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/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>
   );
 }