From fe863845bb678368e59f935d4fc89d981b886037 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 28 Jul 2026 16:28:14 -0400
Subject: [PATCH] refactor: use shadcn components in NodeEditDialog, add
 Textarea component

- Replace raw <textarea> with shadcn Textarea component
- Replace raw <button> with shadcn Button (variant='destructive' + icon)
- Remove custom className overrides fighting admin dark theme
- Add shadcn preference rule to AGENTS.md
---
 AGENTS.md                                     |  2 +
 .../admin/narrative-flow/NodeEditDialog.tsx   | 61 ++++++++-----------
 src/components/ui/textarea.tsx                | 18 ++++++
 3 files changed, 45 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/AGENTS.md b/AGENTS.md
index e6216c3..8c49b3f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -135,6 +135,8 @@ In development, `postgresAdapter` uses `push: true` to auto-sync schema.
 
 shadcn/ui components live in `src/components/ui/`. Use `bunx shadcn@latest add <component>` to add new ones. Frontend components in `src/components/frontend/`. Payload admin custom components referenced in `payload.config.ts` under `admin.components`.
 
+**Rule**: always prefer shadcn/ui components (Dialog, Button, Input, Textarea, Select, etc.) over raw HTML elements or custom-built alternatives. Only build new components when no existing shadcn component fits the need. Do not override shadcn's default dark theme classes with custom `bg-*` `border-*` overrides — the admin panel's theme handles styling.
+
 ## Environment
 
 - `.env` — local dev (PostgreSQL connection string + PAYLOAD_SECRET)
diff --git a/src/components/admin/narrative-flow/NodeEditDialog.tsx b/src/components/admin/narrative-flow/NodeEditDialog.tsx
index 70e563a..b1712a2 100644
--- a/src/components/admin/narrative-flow/NodeEditDialog.tsx
+++ b/src/components/admin/narrative-flow/NodeEditDialog.tsx
@@ -10,7 +10,9 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
+import { PlusIcon, XIcon } from "lucide-react";
 import type { Node } from "@xyflow/react";
 
 interface NodeEditDialogProps {
@@ -66,18 +68,16 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.title as string) ?? ""}
                 onChange={(e) => updateField("title", e.target.value)}
                 placeholder="Beat title"
-                className="bg-zinc-800 border-zinc-700"
               />
             </div>
             <div className="space-y-2">
               <Label htmlFor="beat-text">Text</Label>
-              <textarea
+              <Textarea
                 id="beat-text"
                 value={(nodeData.text as string) ?? ""}
                 onChange={(e) => updateField("text", e.target.value)}
                 placeholder="Describe the story beat..."
                 rows={4}
-                className="flex w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
               />
             </div>
           </div>
@@ -94,14 +94,13 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.question as string) ?? ""}
                 onChange={(e) => updateField("question", e.target.value)}
                 placeholder="What decision does the player face?"
-                className="bg-zinc-800 border-zinc-700"
               />
             </div>
             <div className="space-y-2">
               <Label>Options</Label>
               {options.map((opt, i) => (
                 <div key={opt.id} className="flex items-center gap-2">
-                  <span className="text-xs text-zinc-500 w-4">{i + 1}.</span>
+                  <span className="text-xs text-muted-foreground w-4 shrink-0">{i + 1}.</span>
                   <Input
                     value={opt.label}
                     onChange={(e) => {
@@ -111,17 +110,18 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("options", updated);
                     }}
                     placeholder="Option label"
-                    className="bg-zinc-800 border-zinc-700"
                   />
-                  <button
+                  <Button
+                    variant="destructive"
+                    size="icon"
                     onClick={() => {
                       const updated = options.filter((o) => o.id !== opt.id);
                       updateField("options", updated);
                     }}
-                    className="text-xs text-red-400 hover:text-red-300 cursor-pointer"
+                    className="size-8 shrink-0"
                   >
-                    Remove
-                  </button>
+                    <XIcon className="size-3" />
+                  </Button>
                 </div>
               ))}
               <Button
@@ -134,9 +134,9 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                   ];
                   updateField("options", updated);
                 }}
-                className="border-zinc-700 text-zinc-300 hover:bg-zinc-800 text-xs"
               >
-                + Add option
+                <PlusIcon className="size-3 mr-1" />
+                Add option
               </Button>
             </div>
           </div>
@@ -154,18 +154,16 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                 value={(nodeData.title as string) ?? ""}
                 onChange={(e) => updateField("title", e.target.value)}
                 placeholder="Outcome title"
-                className="bg-zinc-800 border-zinc-700"
               />
             </div>
             <div className="space-y-2">
               <Label htmlFor="outcome-text">Text</Label>
-              <textarea
+              <Textarea
                 id="outcome-text"
                 value={(nodeData.text as string) ?? ""}
                 onChange={(e) => updateField("text", e.target.value)}
                 placeholder="Describe the outcome..."
                 rows={3}
-                className="flex w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 resize-none"
               />
             </div>
             <div className="space-y-2">
@@ -181,7 +179,6 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("effects", updated);
                     }}
                     placeholder="Type (e.g. add_flag)"
-                    className="bg-zinc-800 border-zinc-700 flex-1"
                   />
                   <Input
                     value={eff.value}
@@ -192,17 +189,18 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                       updateField("effects", updated);
                     }}
                     placeholder="Value"
-                    className="bg-zinc-800 border-zinc-700 flex-1"
                   />
-                  <button
+                  <Button
+                    variant="destructive"
+                    size="icon"
                     onClick={() => {
                       const updated = effects.filter((_, j) => j !== i);
                       updateField("effects", updated);
                     }}
-                    className="text-xs text-red-400 hover:text-red-300 cursor-pointer"
+                    className="size-8 shrink-0"
                   >
-                    Remove
-                  </button>
+                    <XIcon className="size-3" />
+                  </Button>
                 </div>
               ))}
               <Button
@@ -212,9 +210,9 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
                   const updated = [...effects, { type: "", value: "" }];
                   updateField("effects", updated);
                 }}
-                className="border-zinc-700 text-zinc-300 hover:bg-zinc-800 text-xs"
               >
-                + Add effect
+                <PlusIcon className="size-3 mr-1" />
+                Add effect
               </Button>
             </div>
           </div>
@@ -222,7 +220,7 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
       }
 
       default:
-        return <p className="text-sm text-zinc-500">Unknown node type.</p>;
+        return <p className="text-sm text-muted-foreground">Unknown node type.</p>;
     }
   };
 
@@ -237,25 +235,16 @@ export const NodeEditDialog: FC<NodeEditDialogProps> = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-zinc-900 border-zinc-700 text-white max-w-lg">
+      <DialogContent className="max-w-lg">
         <DialogHeader>
           <DialogTitle>Edit {typeLabel}</DialogTitle>
         </DialogHeader>
         {renderFields()}
         <DialogFooter className="gap-2">
-          <Button
-            variant="outline"
-            onClick={handleCancel}
-            className="border-zinc-700 text-zinc-300 hover:bg-zinc-800"
-          >
+          <Button variant="outline" onClick={handleCancel}>
             Cancel
           </Button>
-          <Button
-            onClick={handleSave}
-            className="bg-blue-600 hover:bg-blue-700 text-white"
-          >
-            Save
-          </Button>
+          <Button onClick={handleSave}>Save</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e67d8fe
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }