feat: rework ux for deleting chats (#46)

packages/bolt/app/components/sidebar/HistoryItem.tsx

@@ -1,26 +1,16 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { toast } from 'react-toastify';
-import { db, deleteId, type ChatHistory } from '~/lib/persistence';
-import { logger } from '~/utils/logger';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useEffect, useRef, useState } from 'react';
+import { type ChatHistoryItem } from '~/lib/persistence';
 
-export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntries: () => void }) {
-  const [requestingDelete, setRequestingDelete] = useState(false);
+interface HistoryItemProps {
+  item: ChatHistoryItem;
+  onDelete?: (event: React.UIEvent) => void;
+}
+
+export function HistoryItem({ item, onDelete }: HistoryItemProps) {
   const [hovering, setHovering] = useState(false);
   const hoverRef = useRef<HTMLDivElement>(null);
 
-  const deleteItem = useCallback((event: React.UIEvent) => {
-    event.preventDefault();
-
-    if (db) {
-      deleteId(db, item.id)
-        .then(() => loadEntries())
-        .catch((error) => {
-          toast.error('Failed to delete conversation');
-          logger.error(error);
-        });
-    }
-  }, []);
-
   useEffect(() => {
     let timeout: NodeJS.Timeout | undefined;
 
@@ -34,11 +24,6 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
 
     function mouseLeave() {
       setHovering(false);
-
-      // wait for animation to finish before unsetting
-      timeout = setTimeout(() => {
-        setRequestingDelete(false);
-      }, 200);
     }
 
     hoverRef.current?.addEventListener('mouseenter', mouseEnter);
@@ -59,18 +44,17 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
         {item.description}
         <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
           {hovering && (
-            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary">
-              {requestingDelete ? (
-                <button className="i-ph:check scale-110" onClick={deleteItem} />
-              ) : (
+            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
+              <Dialog.Trigger asChild>
                 <button
                   className="i-ph:trash scale-110"
                   onClick={(event) => {
+                    // we prevent the default so we don't trigger the anchor above
                     event.preventDefault();
-                    setRequestingDelete(true);
+                    onDelete?.(event);
                   }}
                 />
-              )}
+              </Dialog.Trigger>
             </div>
           )}
         </div>

packages/bolt/app/components/sidebar/Menu.client.tsx

@@ -1,10 +1,12 @@
 import { motion, type Variants } from 'framer-motion';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
+import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
 import { IconButton } from '~/components/ui/IconButton';
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
-import { db, getAll, type ChatHistory } from '~/lib/persistence';
+import { db, deleteId, getAll, type ChatHistoryItem } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
+import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
 
@@ -29,10 +31,13 @@ const menuVariants = {
   },
 } satisfies Variants;
 
+type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
+
 export function Menu() {
   const menuRef = useRef<HTMLDivElement>(null);
-  const [list, setList] = useState<ChatHistory[]>([]);
+  const [list, setList] = useState<ChatHistoryItem[]>([]);
   const [open, setOpen] = useState(false);
+  const [dialogContent, setDialogContent] = useState<DialogContent>(null);
 
   const loadEntries = useCallback(() => {
     if (db) {
@@ -43,6 +48,23 @@ export function Menu() {
     }
   }, []);
 
+  const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
+    event.preventDefault();
+
+    if (db) {
+      deleteId(db, item.id)
+        .then(() => loadEntries())
+        .catch((error) => {
+          toast.error('Failed to delete conversation');
+          logger.error(error);
+        });
+    }
+  }, []);
+
+  const closeDialog = () => {
+    setDialogContent(null);
+  };
+
   useEffect(() => {
     if (open) {
       loadEntries();
@@ -92,16 +114,47 @@ export function Menu() {
         <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
         <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
           {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
-          {binDates(list).map(({ category, items }) => (
-            <div key={category} className="mt-4 first:mt-0 space-y-1">
-              <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
-                {category}
+          <DialogRoot open={dialogContent !== null}>
+            {binDates(list).map(({ category, items }) => (
+              <div key={category} className="mt-4 first:mt-0 space-y-1">
+                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                  {category}
+                </div>
+                {items.map((item) => (
+                  <HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
+                ))}
               </div>
-              {items.map((item) => (
-                <HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
-              ))}
-            </div>
-          ))}
+            ))}
+            <Dialog onBackdrop={closeDialog} onClose={closeDialog}>
+              {dialogContent?.type === 'delete' && (
+                <>
+                  <DialogTitle>Delete Chat?</DialogTitle>
+                  <DialogDescription asChild>
+                    <div>
+                      <p>
+                        You are about to delete <strong>{dialogContent.item.description}</strong>.
+                      </p>
+                      <p className="mt-1">Are you sure you want to delete this chat?</p>
+                    </div>
+                  </DialogDescription>
+                  <div className="px-5 pb-4 bg-bolt-elements-background-depth-2 flex gap-2 justify-end">
+                    <DialogButton type="secondary" onClick={closeDialog}>
+                      Cancel
+                    </DialogButton>
+                    <DialogButton
+                      type="danger"
+                      onClick={(event) => {
+                        deleteItem(event, dialogContent.item);
+                        closeDialog();
+                      }}
+                    >
+                      Delete
+                    </DialogButton>
+                  </div>
+                </>
+              )}
+            </Dialog>
+          </DialogRoot>
         </div>
         <div className="flex items-center border-t border-bolt-elements-borderColor p-4">
           <a href="/logout">

packages/bolt/app/components/sidebar/date-binning.ts

@@ -1,9 +1,9 @@
 import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
-import type { ChatHistory } from '~/lib/persistence';
+import type { ChatHistoryItem } from '~/lib/persistence';
 
-type Bin = { category: string; items: ChatHistory[] };
+type Bin = { category: string; items: ChatHistoryItem[] };
 
-export function binDates(_list: ChatHistory[]) {
+export function binDates(_list: ChatHistoryItem[]) {
   const list = _list.toSorted((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
 
   const binLookup: Record<string, Bin> = {};