Atualizacao visual HGTX Commander

src/components/prompts/PromptsFormView.tsx

@@ -8,11 +8,8 @@ import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { ShimmerButton } from "@/components/ui/shimmer-button";
-import { SparklesText } from "@/components/ui/sparkles-text";
 import { InteractiveHoverButton } from "@/components/ui/interactive-hover-button";
-import { BorderBeam } from "@/components/ui/border-beam";
-import { AnimatedShinyText } from "@/components/ui/animated-shiny-text";
+import { PromptAssistantButton } from "@/components/prompts/PromptAssistantButton";
 import { Confetti, type ConfettiRef } from "@/components/ui/confetti";
 import { cn } from "@/lib/utils";
 import { usePrompts } from "@/contexts/PromptsContext";
@@ -85,7 +82,7 @@ export function PromptsFormView() {
 
   useEffect(() => {
     if (id && !prompt && prompts.length > 0) {
-      navigate("/codex/prompts", { replace: true });
+      navigate("/commander/prompts", { replace: true });
     }
   }, [id, prompt, prompts.length, navigate]);
 
@@ -143,7 +140,7 @@ export function PromptsFormView() {
         setPrompts((prev) => [...prev, { id: res.id, titulo: res.titulo, area: finalAreaName, area_id: finalAreaId, descricao: finalDescricao || undefined, conteudo: res.conteudo ?? "" }]);
         toast.success("Prompt criado.");
       }
-      navigate("/codex/prompts");
+      navigate("/commander/prompts");
     } catch (e: unknown) {
       const message = e && typeof e === "object" && "message" in e ? (e as { message: string }).message : "Erro ao salvar.";
       toast.error(message);
@@ -224,7 +221,7 @@ export function PromptsFormView() {
       />
       <div className="border-b border-border p-3 md:p-6 flex-shrink-0">
         <div className="flex flex-col gap-3">
-          <Button variant="ghost" size="sm" className="w-fit gap-2" onClick={() => navigate("/codex/prompts")}>
+          <Button variant="ghost" size="sm" className="w-fit gap-2" onClick={() => navigate("/commander/prompts")}>
             <ArrowLeft className="w-4 h-4" />
             Voltar
           </Button>
@@ -277,27 +274,11 @@ export function PromptsFormView() {
                 title="Gerando em andamento"
               />
             )}
-            <ShimmerButton
-              type="button"
+            <PromptAssistantButton
               onClick={() => setIsAssistantOpen(true)}
               disabled={isAssistantWorkingInBackground}
-              background="hsl(var(--card))"
-              shimmerColor="hsl(var(--foreground) / 0.14)"
-              className={cn(
-                "gap-2 px-5 py-2.5 text-sm font-medium text-card-foreground border-border shadow-md hover:shadow-lg transition-shadow",
-                isAssistantWorkingInBackground && "opacity-70 pointer-events-none"
-              )}
-            >
-              {isAssistantWorkingInBackground ? (
-                <span className="text-sm font-medium text-card-foreground">
-                  Gerando em segundo plano...
-                </span>
-              ) : (
-                <SparklesText sparklesCount={5} className="text-sm font-medium text-card-foreground">
-                  ✨ Assistente de Criação de Prompt
-                </SparklesText>
-              )}
-            </ShimmerButton>
+              loading={isAssistantWorkingInBackground}
+            />
           </div>
         </div>
         <Textarea
@@ -327,21 +308,10 @@ export function PromptsFormView() {
       )}
 
       <Dialog open={isAssistantOpen} onOpenChange={setIsAssistantOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col p-8 gap-6 overflow-hidden rounded-xl border-border/80 bg-gradient-to-b from-background to-muted/20">
-          <div className="absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none">
-            <BorderBeam duration={8} size={100} colorFrom="#a78bfa" colorTo="#06b6d4" />
-          </div>
-          <DialogHeader className="space-y-4 relative z-10">
+        <DialogContent className="max-w-2xl max-h-[90vh] flex flex-col gap-6 overflow-hidden rounded-xl border border-border/80 bg-card p-8 shadow-modal">
+          <DialogHeader className="space-y-4">
             <div className="flex justify-center">
-              <div
-                className={cn(
-                  "inline-flex w-fit rounded-full border border-black/5 bg-neutral-100 text-base transition-all ease-in hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800"
-                )}
-              >
-                <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-2 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
-                  <span>✨ Assistente de Criação de Prompt</span>
-                </AnimatedShinyText>
-              </div>
+              <PromptAssistantButton asBadge />
             </div>
             <DialogTitle className="sr-only">Assistente de Criação de Prompt</DialogTitle>
             <DialogDescription className="text-base text-muted-foreground">
@@ -400,7 +370,7 @@ export function PromptsFormView() {
           </div>
 
           <DialogFooter className="gap-3 pt-4 relative z-10">
-            <Button variant="outline" className="hover:bg-slate-100 hover:text-slate-800 dark:hover:bg-slate-800" onClick={() => setIsAssistantOpen(false)} disabled={isAssistantLoading}>
+            <Button variant="outline" onClick={() => setIsAssistantOpen(false)} disabled={isAssistantLoading}>
               Fechar
             </Button>
             <Button