Add delete confirmation dialogs in HistoryTable and SampleList components

- Implemented delete confirmation dialogs for both HistoryTable and SampleList components to enhance user experience and prevent accidental deletions.
- Added state management for handling the selected item to be deleted and the visibility of the delete dialog.
- Refactored delete handling functions to utilize the new dialog confirmation flow, improving code clarity and maintainability.

app/src/components/History/HistoryTable.tsx

@@ -45,6 +45,8 @@ export function HistoryTable() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [generationToDelete, setGenerationToDelete] = useState<{ id: string; name: string } | null>(null);
   const limit = 20;
   const { toast } = useToast();
 
@@ -167,6 +169,19 @@ export function HistoryTable() {
     );
   };
 
+  const handleDeleteClick = (generationId: string, profileName: string) => {
+    setGenerationToDelete({ id: generationId, name: profileName });
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (generationToDelete) {
+      deleteGeneration.mutate(generationToDelete.id);
+      setDeleteDialogOpen(false);
+      setGenerationToDelete(null);
+    }
+  };
+
   const handleImportConfirm = () => {
     if (selectedFile) {
       importGeneration.mutate(selectedFile, {
@@ -307,7 +322,7 @@ export function HistoryTable() {
                           Export Package
                         </DropdownMenuItem>
                         <DropdownMenuItem
-                          onClick={() => deleteGeneration.mutate(gen.id)}
+                          onClick={() => handleDeleteClick(gen.id, gen.profile_name)}
                           disabled={deleteGeneration.isPending}
                           className="text-destructive focus:text-destructive"
                         >
@@ -338,6 +353,35 @@ export function HistoryTable() {
         </>
       )}
 
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Generation</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this generation from "{generationToDelete?.name}"? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setGenerationToDelete(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              disabled={deleteGeneration.isPending}
+            >
+              {deleteGeneration.isPending ? 'Deleting...' : 'Delete'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
         <DialogContent>
           <DialogHeader>

app/src/components/VoiceProfiles/SampleList.tsx

@@ -2,6 +2,14 @@ import { Check, Edit, Pause, Play, Plus, Trash2, Volume2, X } from 'lucide-react
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { CircleButton } from '@/components/ui/circle-button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Slider } from '@/components/ui/slider';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
@@ -140,10 +148,19 @@ export function SampleList({ profileId }: SampleListProps) {
   const [uploadOpen, setUploadOpen] = useState(false);
   const [editingSampleId, setEditingSampleId] = useState<string | null>(null);
   const [editedText, setEditedText] = useState<string>('');
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [sampleToDelete, setSampleToDelete] = useState<string | null>(null);
 
-  const handleDelete = (sampleId: string) => {
-    if (confirm('Are you sure you want to delete this sample?')) {
-      deleteSample.mutate(sampleId);
+  const handleDeleteClick = (sampleId: string) => {
+    setSampleToDelete(sampleId);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (sampleToDelete) {
+      deleteSample.mutate(sampleToDelete);
+      setDeleteDialogOpen(false);
+      setSampleToDelete(null);
     }
   };
 
@@ -268,7 +285,7 @@ export function SampleList({ profileId }: SampleListProps) {
                         <CircleButton
                           icon={Trash2}
                           title="Delete sample"
-                          onClick={() => handleDelete(sample.id)}
+                          onClick={() => handleDeleteClick(sample.id)}
                           disabled={deleteSample.isPending}
                         />
                       </div>
@@ -306,6 +323,35 @@ export function SampleList({ profileId }: SampleListProps) {
       </p>
 
       <SampleUpload profileId={profileId} open={uploadOpen} onOpenChange={setUploadOpen} />
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Sample</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete this audio sample? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setSampleToDelete(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteConfirm}
+              disabled={deleteSample.isPending}
+            >
+              {deleteSample.isPending ? 'Deleting...' : 'Delete'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }