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>}
+          <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} loadEntries={loadEntries} />
+                  <HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
                 ))}
               </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> = {};

packages/bolt/app/components/ui/Dialog.tsx

@@ -0,0 +1,133 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { motion, type Variants } from 'framer-motion';
+import React, { memo, type ReactNode } from 'react';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { IconButton } from './IconButton';
+
+export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
+
+const transition = {
+  duration: 0.15,
+  ease: cubicEasingFn,
+};
+
+export const dialogBackdropVariants = {
+  closed: {
+    opacity: 0,
+    transition,
+  },
+  open: {
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+export const dialogVariants = {
+  closed: {
+    x: '-50%',
+    y: '-40%',
+    scale: 0.96,
+    opacity: 0,
+    transition,
+  },
+  open: {
+    x: '-50%',
+    y: '-50%',
+    scale: 1,
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+interface DialogButtonProps {
+  type: 'primary' | 'secondary' | 'danger';
+  children: ReactNode;
+  onClick?: (event: React.UIEvent) => void;
+}
+
+export const DialogButton = memo(({ type, children, onClick }: DialogButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none',
+        {
+          'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text hover:bg-bolt-elements-button-primary-backgroundHover':
+            type === 'primary',
+          'bg-bolt-elements-button-secondary-background text-bolt-elements-button-secondary-text hover:bg-bolt-elements-button-secondary-backgroundHover':
+            type === 'secondary',
+          'bg-bolt-elements-button-danger-background text-bolt-elements-button-danger-text hover:bg-bolt-elements-button-danger-backgroundHover':
+            type === 'danger',
+        },
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+});
+
+export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
+  return (
+    <RadixDialog.Title
+      className={classNames(
+        'px-5 py-4 flex items-center justify-between border-b border-bolt-elements-borderColor text-lg font-semibold leading-6 text-bolt-elements-textPrimary',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Title>
+  );
+});
+
+export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
+  return (
+    <RadixDialog.Description
+      className={classNames('px-5 py-4 text-bolt-elements-textPrimary text-md', className)}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Description>
+  );
+});
+
+interface DialogProps {
+  children: ReactNode | ReactNode[];
+  className?: string;
+  onBackdrop?: (event: React.UIEvent) => void;
+  onClose?: (event: React.UIEvent) => void;
+}
+
+export const Dialog = memo(({ className, children, onBackdrop, onClose }: DialogProps) => {
+  return (
+    <RadixDialog.Portal>
+      <RadixDialog.Overlay onClick={onBackdrop} asChild>
+        <motion.div
+          className="bg-black/50 fixed inset-0 z-max"
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogBackdropVariants}
+        />
+      </RadixDialog.Overlay>
+      <RadixDialog.Content asChild>
+        <motion.div
+          className={classNames(
+            'fixed top-[50%] left-[50%] z-max max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] border border-bolt-elements-borderColor rounded-lg bg-bolt-elements-background-depth-2 shadow-lg focus:outline-none overflow-hidden',
+            className,
+          )}
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogVariants}
+        >
+          {children}
+          <RadixDialog.Close asChild onClick={onClose}>
+            <IconButton icon="i-ph:x" className="absolute top-[10px] right-[10px]" />
+          </RadixDialog.Close>
+        </motion.div>
+      </RadixDialog.Content>
+    </RadixDialog.Portal>
+  );
+});

packages/bolt/app/lib/persistence/db.ts

@@ -1,6 +1,6 @@
 import type { Message } from 'ai';
-import type { ChatHistory } from './useChatHistory';
 import { createScopedLogger } from '~/utils/logger';
+import type { ChatHistoryItem } from './useChatHistory';
 
 const logger = createScopedLogger('ChatHistory');
 
@@ -30,13 +30,13 @@ export async function openDatabase(): Promise<IDBDatabase | undefined> {
   });
 }
 
-export async function getAll(db: IDBDatabase): Promise<ChatHistory[]> {
+export async function getAll(db: IDBDatabase): Promise<ChatHistoryItem[]> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction('chats', 'readonly');
     const store = transaction.objectStore('chats');
     const request = store.getAll();
 
-    request.onsuccess = () => resolve(request.result as ChatHistory[]);
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem[]);
     request.onerror = () => reject(request.error);
   });
 }
@@ -65,29 +65,29 @@ export async function setMessages(
   });
 }
 
-export async function getMessages(db: IDBDatabase, id: string): Promise<ChatHistory> {
+export async function getMessages(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
   return (await getMessagesById(db, id)) || (await getMessagesByUrlId(db, id));
 }
 
-export async function getMessagesByUrlId(db: IDBDatabase, id: string): Promise<ChatHistory> {
+export async function getMessagesByUrlId(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction('chats', 'readonly');
     const store = transaction.objectStore('chats');
     const index = store.index('urlId');
     const request = index.get(id);
 
-    request.onsuccess = () => resolve(request.result as ChatHistory);
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem);
     request.onerror = () => reject(request.error);
   });
 }
 
-export async function getMessagesById(db: IDBDatabase, id: string): Promise<ChatHistory> {
+export async function getMessagesById(db: IDBDatabase, id: string): Promise<ChatHistoryItem> {
   return new Promise((resolve, reject) => {
     const transaction = db.transaction('chats', 'readonly');
     const store = transaction.objectStore('chats');
     const request = store.get(id);
 
-    request.onsuccess = () => resolve(request.result as ChatHistory);
+    request.onsuccess = () => resolve(request.result as ChatHistoryItem);
     request.onerror = () => reject(request.error);
   });
 }

packages/bolt/app/lib/persistence/useChatHistory.ts

@@ -1,12 +1,12 @@
-import { useNavigate, useLoaderData } from '@remix-run/react';
-import { useState, useEffect } from 'react';
+import { useLoaderData, useNavigate } from '@remix-run/react';
 import type { Message } from 'ai';
-import { openDatabase, setMessages, getMessages, getNextId, getUrlId } from './db';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import { AnalyticsAction, sendAnalyticsEvent } from '~/lib/analytics';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { sendAnalyticsEvent, AnalyticsAction } from '~/lib/analytics';
+import { getMessages, getNextId, getUrlId, openDatabase, setMessages } from './db';
 
-export interface ChatHistory {
+export interface ChatHistoryItem {
   id: string;
   urlId?: string;
   description?: string;

packages/bolt/app/styles/variables.scss

@@ -16,6 +16,18 @@
   --bolt-elements-code-background: theme('colors.gray.100');
   --bolt-elements-code-text: theme('colors.gray.950');
 
+  --bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
+  --bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
+  --bolt-elements-button-primary-text: theme('colors.accent.500');
+
+  --bolt-elements-button-secondary-background: theme('colors.alpha.gray.5');
+  --bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.gray.10');
+  --bolt-elements-button-secondary-text: theme('colors.gray.950');
+
+  --bolt-elements-button-danger-background: theme('colors.alpha.red.10');
+  --bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
+  --bolt-elements-button-danger-text: theme('colors.red.500');
+
   --bolt-elements-item-contentDefault: theme('colors.alpha.gray.50');
   --bolt-elements-item-contentActive: theme('colors.gray.950');
   --bolt-elements-item-contentAccent: theme('colors.accent.700');
@@ -110,6 +122,18 @@
   --bolt-elements-code-background: theme('colors.gray.800');
   --bolt-elements-code-text: theme('colors.white');
 
+  --bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
+  --bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
+  --bolt-elements-button-primary-text: theme('colors.accent.500');
+
+  --bolt-elements-button-secondary-background: theme('colors.alpha.white.5');
+  --bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.white.10');
+  --bolt-elements-button-secondary-text: theme('colors.white');
+
+  --bolt-elements-button-danger-background: theme('colors.alpha.red.10');
+  --bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
+  --bolt-elements-button-danger-text: theme('colors.red.500');
+
   --bolt-elements-item-contentDefault: theme('colors.alpha.white.50');
   --bolt-elements-item-contentActive: theme('colors.white');
   --bolt-elements-item-contentAccent: theme('colors.accent.500');

packages/bolt/package.json

@@ -36,6 +36,7 @@
     "@iconify-json/svg-spinners": "^1.1.2",
     "@lezer/highlight": "^1.2.0",
     "@nanostores/react": "^0.7.2",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@remix-run/cloudflare": "^2.10.2",
     "@remix-run/cloudflare-pages": "^2.10.2",

packages/bolt/uno.config.ts

@@ -133,6 +133,23 @@ export default defineConfig({
             background: 'var(--bolt-elements-code-background)',
             text: 'var(--bolt-elements-code-text)',
           },
+          button: {
+            primary: {
+              background: 'var(--bolt-elements-button-primary-background)',
+              backgroundHover: 'var(--bolt-elements-button-primary-backgroundHover)',
+              text: 'var(--bolt-elements-button-primary-text)',
+            },
+            secondary: {
+              background: 'var(--bolt-elements-button-secondary-background)',
+              backgroundHover: 'var(--bolt-elements-button-secondary-backgroundHover)',
+              text: 'var(--bolt-elements-button-secondary-text)',
+            },
+            danger: {
+              background: 'var(--bolt-elements-button-danger-background)',
+              backgroundHover: 'var(--bolt-elements-button-danger-backgroundHover)',
+              text: 'var(--bolt-elements-button-danger-text)',
+            },
+          },
           item: {
             contentDefault: 'var(--bolt-elements-item-contentDefault)',
             contentActive: 'var(--bolt-elements-item-contentActive)',

pnpm-lock.yaml

@@ -95,6 +95,9 @@ importers:
       '@nanostores/react':
         specifier: ^0.7.2
         version: 0.7.2(nanostores@0.10.3)(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1296,6 +1299,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.1':
+    resolution: {integrity: sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.0':
     resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
@@ -6597,6 +6613,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@radix-ui/react-dialog@1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.7(@types/react@18.3.3)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-direction@1.1.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       react: 18.3.1