feat: add delete session functionality with confirmation dialog

- Introduced a new DeleteSessionDialog component for confirming session deletions.
- Integrated the delete session dialog into the SessionManager component, allowing users to delete sessions with a confirmation prompt.
- Updated the UI to handle session deletion more intuitively, enhancing user experience.
- Refactored existing delete confirmation logic to utilize the new DeleteConfirmDialog component for consistency across the application.

apps/app/src/components/views/kanban-card.tsx

@@ -21,6 +21,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -195,14 +196,9 @@ export const KanbanCard = memo(function KanbanCard({
   };
 
   const handleConfirmDelete = () => {
-    setIsDeleteDialogOpen(false);
     onDelete();
   };
 
-  const handleCancelDelete = () => {
-    setIsDeleteDialogOpen(false);
-  };
-
   // Dragging logic:
   // - Backlog items can always be dragged
   // - skipTests items can be dragged even when in_progress or verified (unless currently running)
@@ -805,35 +801,15 @@ export const KanbanCard = memo(function KanbanCard({
       </CardContent>
 
       {/* Delete Confirmation Dialog */}
-      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <DialogContent data-testid="delete-confirmation-dialog">
-          <DialogHeader>
-            <DialogTitle>Delete Feature</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete this feature? This action cannot
-              be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="mt-6">
-            <Button
-              variant="ghost"
-              onClick={handleCancelDelete}
-              data-testid="cancel-delete-button"
-            >
-              Cancel
-            </Button>
-            <HotkeyButton
-              variant="destructive"
-              onClick={handleConfirmDelete}
-              data-testid="confirm-delete-button"
-              hotkey={{ key: "Enter", cmdCtrl: true }}
-              hotkeyActive={isDeleteDialogOpen}
-            >
-              Delete
-            </HotkeyButton>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <DeleteConfirmDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        title="Delete Feature"
+        description="Are you sure you want to delete this feature? This action cannot be undone."
+        testId="delete-confirmation-dialog"
+        confirmTestId="confirm-delete-button"
+      />
 
       {/* Summary Modal */}
       <Dialog open={isSummaryDialogOpen} onOpenChange={setIsSummaryDialogOpen}>

apps/app/src/components/views/settings-view/components/delete-project-dialog.tsx

@@ -1,13 +1,5 @@
-import { Trash2, Folder } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+import { Folder, Trash2 } from "lucide-react";
+import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
 import type { Project } from "@/lib/electron";
 
 interface DeleteProjectDialogProps {
@@ -26,24 +18,22 @@ export function DeleteProjectDialog({
   const handleConfirm = () => {
     if (project) {
       onConfirm(project.id);
-      onOpenChange(false);
     }
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-popover border-border max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Trash2 className="w-5 h-5 text-destructive" />
-            Delete Project
-          </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            Are you sure you want to move this project to Trash?
-          </DialogDescription>
-        </DialogHeader>
-
-        {project && (
+    <DeleteConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onConfirm={handleConfirm}
+      title="Delete Project"
+      description="Are you sure you want to move this project to Trash?"
+      confirmText="Move to Trash"
+      testId="delete-project-dialog"
+      confirmTestId="confirm-delete-project"
+    >
+      {project && (
+        <>
           <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
             <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
               <Folder className="w-5 h-5 text-brand-500" />
@@ -57,27 +47,13 @@ export function DeleteProjectDialog({
               </p>
             </div>
           </div>
-        )}
 
-        <p className="text-sm text-muted-foreground">
-          The folder will remain on disk until you permanently delete it from
-          Trash.
-        </p>
-
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={handleConfirm}
-            data-testid="confirm-delete-project"
-          >
-            <Trash2 className="w-4 h-4 mr-2" />
-            Move to Trash
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+          <p className="text-sm text-muted-foreground">
+            The folder will remain on disk until you permanently delete it from
+            Trash.
+          </p>
+        </>
+      )}
+    </DeleteConfirmDialog>
   );
 }