From 0550b57c34726583a0917be3794064a1c70d49a7 Mon Sep 17 00:00:00 2001
From: shawn <me@bentsignal.com>
Date: Wed, 13 May 2026 12:48:55 -0400
Subject: [PATCH] Improve dialog forms and rename modals

- Use form submit flows for file and thread renames
- Make confirm-on-enter work in the custom alert
- Update dialog styling for better mobile sizing and backdrop
---
 apps/web/src/components/alert.tsx             |  5 ++
 .../components/library-rename-modal.tsx       | 84 ++++++++++---------
 .../thread/components/thread-rename-modal.tsx | 83 ++++++++++--------
 packages/ui/src/components/dialog.tsx         |  2 +-
 4 files changed, 98 insertions(+), 76 deletions(-)

diff --git a/apps/web/src/components/alert.tsx b/apps/web/src/components/alert.tsx
index e548b0e9..29dd54bb 100644
--- a/apps/web/src/components/alert.tsx
+++ b/apps/web/src/components/alert.tsx
@@ -65,6 +65,11 @@ export function CustomAlert({
                 className="mt-2"
                 value={typeToConfirmValue}
                 onChange={(e) => setTypeToConfirmValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !disabled) {
+                    onConfirm();
+                  }
+                }}
               />
             </AlertDialogDescription>
           )}
diff --git a/apps/web/src/features/library/components/library-rename-modal.tsx b/apps/web/src/features/library/components/library-rename-modal.tsx
index 68ccf55e..acaac82c 100644
--- a/apps/web/src/features/library/components/library-rename-modal.tsx
+++ b/apps/web/src/features/library/components/library-rename-modal.tsx
@@ -3,16 +3,16 @@ import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 
 import { useFileMutations, useLibraryStore } from "@acme/features/library";
+import { Button } from "@acme/ui/button";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@acme/ui/alert-dialog";
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@acme/ui/dialog";
 import { Input } from "@acme/ui/input";
 
 export function LibraryRenameModal() {
@@ -38,44 +38,48 @@ export function LibraryRenameModal() {
   });
 
   return (
-    <AlertDialog
+    <Dialog
       open={libraryRenameModalOpen}
       onOpenChange={setLibraryRenameModalOpen}
     >
-      <AlertDialogContent
+      <DialogContent
+        showCloseButton={false}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
           inputRef.current?.focus();
         }}
       >
-        <AlertDialogHeader>
-          <AlertDialogTitle>Rename File</AlertDialogTitle>
-        </AlertDialogHeader>
-        <AlertDialogDescription className="flex flex-col gap-2">
-          <span className="text-muted-foreground">
-            Enter a new name for the file.
-          </span>
-          <Input
-            ref={inputRef}
-            value={newFileName}
-            onChange={(e) => setNewFileName(e.target.value)}
-            placeholder="Enter a new name..."
-          />
-        </AlertDialogDescription>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            onClick={() => {
-              if (!selectedFile) return;
-              renameFile({ id: selectedFile.id, name: newFileName });
-              setLibraryRenameModalOpen(false);
-              setNewFileName("");
-            }}
-          >
-            Rename
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!selectedFile) return;
+            renameFile({ id: selectedFile.id, name: newFileName });
+            setLibraryRenameModalOpen(false);
+            setNewFileName("");
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Rename File</DialogTitle>
+          </DialogHeader>
+          <DialogDescription className="flex flex-col gap-2 py-4">
+            <span className="text-muted-foreground">
+              Enter a new name for the file.
+            </span>
+            <Input
+              ref={inputRef}
+              value={newFileName}
+              onChange={(e) => setNewFileName(e.target.value)}
+              placeholder="Enter a new name..."
+            />
+          </DialogDescription>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Rename</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/apps/web/src/features/thread/components/thread-rename-modal.tsx b/apps/web/src/features/thread/components/thread-rename-modal.tsx
index 8f74554f..fab0e647 100644
--- a/apps/web/src/features/thread/components/thread-rename-modal.tsx
+++ b/apps/web/src/features/thread/components/thread-rename-modal.tsx
@@ -3,7 +3,16 @@ import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 
 import { useThreadMutations, useThreadStore } from "@acme/features/thread";
-import * as Alert from "@acme/ui/alert-dialog";
+import { Button } from "@acme/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@acme/ui/dialog";
 import { Input } from "@acme/ui/input";
 
 export function ThreadRenameModal() {
@@ -26,7 +35,7 @@ export function ThreadRenameModal() {
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
-    <Alert.AlertDialog
+    <Dialog
       open={renameModalOpen}
       onOpenChange={(open) => {
         if (open) {
@@ -37,43 +46,47 @@ export function ThreadRenameModal() {
         }
       }}
     >
-      <Alert.AlertDialogContent
+      <DialogContent
+        showCloseButton={false}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
           inputRef.current?.focus();
         }}
       >
-        <Alert.AlertDialogHeader>
-          <Alert.AlertDialogTitle>Rename Thread</Alert.AlertDialogTitle>
-        </Alert.AlertDialogHeader>
-        <Alert.AlertDialogDescription className="flex flex-col gap-2">
-          <span className="text-muted-foreground">
-            Enter a new name for the thread.
-          </span>
-          <Input
-            ref={inputRef}
-            value={newThreadName}
-            onChange={(e) => setNewThreadName(e.target.value)}
-            placeholder="Enter a new name..."
-          />
-        </Alert.AlertDialogDescription>
-        <Alert.AlertDialogFooter>
-          <Alert.AlertDialogCancel>Cancel</Alert.AlertDialogCancel>
-          <Alert.AlertDialogAction
-            onClick={() => {
-              if (!hoveredThread) return;
-              renameThread({
-                threadId: hoveredThread.id,
-                name: newThreadName,
-              });
-              setRenameModalOpen(false);
-              setNewThreadName("");
-            }}
-          >
-            Rename
-          </Alert.AlertDialogAction>
-        </Alert.AlertDialogFooter>
-      </Alert.AlertDialogContent>
-    </Alert.AlertDialog>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (!hoveredThread) return;
+            renameThread({
+              threadId: hoveredThread.id,
+              name: newThreadName,
+            });
+            setRenameModalOpen(false);
+            setNewThreadName("");
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Rename Thread</DialogTitle>
+          </DialogHeader>
+          <DialogDescription className="flex flex-col gap-2 py-4">
+            <span className="text-muted-foreground">
+              Enter a new name for the thread.
+            </span>
+            <Input
+              ref={inputRef}
+              value={newThreadName}
+              onChange={(e) => setNewThreadName(e.target.value)}
+              placeholder="Enter a new name..."
+            />
+          </DialogDescription>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Rename</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 0a1d72d4..c1b525ee 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-4rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 duration-200",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 supports-[backdrop-filter]:bg-background/50 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-lg backdrop-blur-lg duration-200 sm:max-w-lg",
           className,
         )}
         {...props}