Improve export handling when errors occur

web/src/components/card/ExportCard.tsx

@@ -1,7 +1,7 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { FaDownload, FaPlay } from "react-icons/fa";
 import Chip from "../indicators/Chip";
@@ -47,6 +47,15 @@ export default function ExportCard({
     update: string;
   }>();
 
+  const submitRename = useCallback(() => {
+    if (editName == undefined) {
+      return;
+    }
+
+    onRename(exportedRecording.id, editName.update);
+    setEditName(undefined);
+  }, [editName, exportedRecording, onRename, setEditName]);
+
   useKeyboardListener(
     editName != undefined ? ["Enter"] : [],
     (key, modifiers) => {
@@ -57,8 +66,7 @@ export default function ExportCard({
         editName &&
         editName.update.length > 0
       ) {
-        onRename(exportedRecording.id, editName.update);
-        setEditName(undefined);
+        submitRename();
       }
     },
   );
@@ -98,8 +106,7 @@ export default function ExportCard({
                   variant="select"
                   disabled={(editName?.update?.length ?? 0) == 0}
                   onClick={() => {
-                    onRename(exportedRecording.id, editName.update);
-                    setEditName(undefined);
+                    submitRename();
                   }}
                 >
                   Save

web/src/pages/Exports.tsx

@@ -12,10 +12,12 @@ import {
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Toaster } from "@/components/ui/sonner";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { LuFolderX } from "react-icons/lu";
+import { toast } from "sonner";
 import useSWR from "swr";
 
 function Exports() {
@@ -63,11 +65,25 @@ function Exports() {
 
   const onHandleRename = useCallback(
     (id: string, update: string) => {
-      axios.patch(`export/${id}/${update}`).then((response) => {
+      axios
+        .patch(`export/${id}/${update}`)
+        .then((response) => {
           if (response.status == 200) {
             setDeleteClip(undefined);
             mutate();
           }
+        })
+        .catch((error) => {
+          if (error.response?.data?.message) {
+            toast.error(
+              `Failed to rename export: ${error.response.data.message}`,
+              { position: "top-center" },
+            );
+          } else {
+            toast.error(`Failed to rename export: ${error.message}`, {
+              position: "top-center",
+            });
+          }
         });
     },
     [mutate],
@@ -79,6 +95,8 @@ function Exports() {
 
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
+      <Toaster closeButton={true} />
+
       <AlertDialog
         open={deleteClip != undefined}
         onOpenChange={() => setDeleteClip(undefined)}