use export name in dialog instead of file id

web/src/components/card/ExportCard.tsx

@@ -6,7 +6,13 @@ import { isDesktop } from "react-device-detect";
 import { FaDownload, FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
 import { Skeleton } from "../ui/skeleton";
-import { Dialog, DialogContent, DialogFooter, DialogTitle } from "../ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+} from "../ui/dialog";
 import { Input } from "../ui/input";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Export } from "@/types/export";
@@ -18,7 +24,7 @@ type ExportProps = {
   exportedRecording: Export;
   onSelect: (selected: Export) => void;
   onRename: (original: string, update: string) => void;
-  onDelete: (file: string) => void;
+  onDelete: ({ file: string, exportName: string }) => void;
 };
 
 export default function ExportCard({
@@ -62,6 +68,9 @@ export default function ExportCard({
       >
         <DialogContent>
           <DialogTitle>Rename Export</DialogTitle>
+          <DialogDescription>
+            Enter a new name for this export.
+          </DialogDescription>
           {editName && (
             <>
               <Input
@@ -135,7 +144,12 @@ export default function ExportCard({
               </Chip>
               <Chip
                 className="bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 rounded-md cursor-pointer"
-                onClick={() => onDelete(exportedRecording.id)}
+                onClick={() =>
+                  onDelete({
+                    file: exportedRecording.id,
+                    exportName: exportedRecording.name,
+                  })
+                }
               >
                 <LuTrash className="size-4 text-destructive fill-destructive" />
               </Chip>

web/src/pages/Exports.tsx

@@ -43,14 +43,19 @@ function Exports() {
 
   // Deleting
 
-  const [deleteClip, setDeleteClip] = useState<string | undefined>();
+  type DeleteClipType = {
+    file: string;
+    exportName: string;
+  };
+
+  const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
 
   const onHandleDelete = useCallback(() => {
     if (!deleteClip) {
       return;
     }
 
-    axios.delete(`export/${deleteClip}`).then((response) => {
+    axios.delete(`export/${deleteClip.file}`).then((response) => {
       if (response.status == 200) {
         setDeleteClip(undefined);
         mutate();
@@ -86,7 +91,7 @@ function Exports() {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Export</AlertDialogTitle>
             <AlertDialogDescription>
-              Confirm deletion of {deleteClip}.
+              Are you sure you want to delete {deleteClip?.exportName}?
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -149,7 +154,9 @@ function Exports() {
                 exportedRecording={item}
                 onSelect={setSelected}
                 onRename={onHandleRename}
-                onDelete={(id) => setDeleteClip(id)}
+                onDelete={({ file, exportName }) =>
+                  setDeleteClip({ file, exportName })
+                }
               />
             ))}
           </div>