Add step + percent progress for exports (#22915)

* backend

* improve frontend Job typing

* progress frontend

* i18n

* tests

web/src/components/card/ExportCard.tsx

@@ -1,6 +1,7 @@
 import ActivityIndicator from "../indicators/activity-indicator";
 import { Button } from "../ui/button";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { Progress } from "../ui/progress";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { FiMoreVertical } from "react-icons/fi";
 import { Skeleton } from "../ui/skeleton";
@@ -128,6 +129,14 @@ export function ExportCard({
     exportedRecording.thumb_path.length > 0,
   );
 
+  // Resync the skeleton state whenever the backing export changes. The
+  // list keys by id now, so in practice the component remounts instead
+  // of receiving new props — but this keeps the card honest if a parent
+  // ever reuses the instance across different exports.
+  useEffect(() => {
+    setLoading(exportedRecording.thumb_path.length > 0);
+  }, [exportedRecording.thumb_path]);
+
   // selection
 
   const cardRef = useRef<HTMLDivElement | null>(null);
@@ -392,8 +401,35 @@ export function ActiveExportJobCard({
       camera: cameraName,
     });
   }, [cameraName, job.name, t]);
-  const statusLabel =
-    job.status === "queued" ? t("jobCard.queued") : t("jobCard.running");
+
+  const step = job.current_step
+    ? job.current_step
+    : job.status === "queued"
+      ? "queued"
+      : "preparing";
+  const percent = Math.round(job.progress_percent ?? 0);
+
+  const stepLabel = useMemo(() => {
+    switch (step) {
+      case "queued":
+        return t("jobCard.queued");
+      case "preparing":
+        return t("jobCard.preparing");
+      case "copying":
+        return t("jobCard.copying");
+      case "encoding":
+        return t("jobCard.encoding");
+      case "encoding_retry":
+        return t("jobCard.encodingRetry");
+      case "finalizing":
+        return t("jobCard.finalizing");
+      default:
+        return t("jobCard.running");
+    }
+  }, [step, t]);
+
+  const hasDeterminateProgress =
+    step === "copying" || step === "encoding" || step === "encoding_retry";
 
   return (
     <div
@@ -402,11 +438,20 @@ export function ActiveExportJobCard({
         className,
       )}
     >
-      <div className="absolute right-3 top-3 z-30 rounded-full bg-selected/90 px-2 py-1 text-xs text-selected-foreground">
-        {statusLabel}
-      </div>
-      <div className="flex flex-col items-center gap-3 px-6 text-center">
-        <ActivityIndicator />
+      <div className="flex w-full max-w-xs flex-col items-center gap-2 space-y-2 px-6 text-center">
+        <div className="text-xs text-muted-foreground">
+          {stepLabel}
+          {hasDeterminateProgress && ` · ${percent}%`}
+        </div>
+        {step === "queued" ? (
+          <ActivityIndicator className="size-5" />
+        ) : hasDeterminateProgress ? (
+          <Progress value={percent} className="h-2 w-full" />
+        ) : (
+          <div className="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
+            <div className="absolute inset-y-0 left-0 w-1/2 animate-pulse bg-primary" />
+          </div>
+        )}
         <div className="text-sm font-medium text-primary">{displayName}</div>
       </div>
     </div>

web/src/components/filter/ExportActionGroup.tsx

@@ -30,6 +30,7 @@ type ExportActionGroupProps = {
   cases?: ExportCase[];
   currentCaseId?: string;
   mutate: () => void;
+  deleteExports: (ids: string[]) => Promise<void>;
 };
 export default function ExportActionGroup({
   selectedExports,
@@ -38,6 +39,7 @@ export default function ExportActionGroup({
   cases,
   currentCaseId,
   mutate,
+  deleteExports,
 }: ExportActionGroupProps) {
   const { t } = useTranslation(["views/exports", "common"]);
   const isAdmin = useIsAdmin();
@@ -50,27 +52,24 @@ export default function ExportActionGroup({
 
   const onDelete = useCallback(() => {
     const ids = selectedExports.map((e) => e.id);
-    axios
-      .post("exports/delete", { ids })
-      .then((resp) => {
-        if (resp.status === 200) {
-          toast.success(t("bulkToast.success.delete"), {
-            position: "top-center",
-          });
-          setSelectedExports([]);
-          mutate();
-        }
+    deleteExports(ids)
+      .then(() => {
+        toast.success(t("bulkToast.success.delete"), {
+          position: "top-center",
+        });
+        setSelectedExports([]);
       })
       .catch((error) => {
         const errorMessage =
-          error.response?.data?.message ||
-          error.response?.data?.detail ||
+          error?.response?.data?.message ||
+          error?.response?.data?.detail ||
           "Unknown error";
-        toast.error(t("bulkToast.error.deleteFailed", { errorMessage }), {
-          position: "top-center",
-        });
+        toast.error(
+          t("bulkToast.error.deleteFailed", { errorMessage: errorMessage }),
+          { position: "top-center" },
+        );
       });
-  }, [selectedExports, setSelectedExports, mutate, t]);
+  }, [selectedExports, setSelectedExports, deleteExports, t]);
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [bypassDialog, setBypassDialog] = useState(false);
@@ -92,36 +91,54 @@ export default function ExportActionGroup({
 
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const [deleteExportsOnRemove, setDeleteExportsOnRemove] = useState(false);
+  const [isRemovingFromCase, setIsRemovingFromCase] = useState(false);
 
   const handleRemoveFromCase = useCallback(() => {
     const ids = selectedExports.map((e) => e.id);
+    const deleting = deleteExportsOnRemove;
+    setIsRemovingFromCase(true);
 
-    const request = deleteExportsOnRemove
-      ? axios.post("exports/delete", { ids })
-      : axios.post("exports/reassign", { ids, export_case_id: null });
+    const request = deleting
+      ? deleteExports(ids)
+      : axios
+          .post("exports/reassign", { ids, export_case_id: null })
+          .then(() => {
+            mutate();
+          });
 
     request
-      .then((resp) => {
-        if (resp.status === 200) {
-          toast.success(t("bulkToast.success.remove"), {
-            position: "top-center",
-          });
-          setSelectedExports([]);
-          mutate();
-          setRemoveDialogOpen(false);
-          setDeleteExportsOnRemove(false);
-        }
+      .then(() => {
+        const successKey = deleting
+          ? "bulkToast.success.delete"
+          : "bulkToast.success.remove";
+        toast.success(t(successKey), { position: "top-center" });
+        setSelectedExports([]);
+        setRemoveDialogOpen(false);
+        setDeleteExportsOnRemove(false);
       })
       .catch((error) => {
         const errorMessage =
-          error.response?.data?.message ||
-          error.response?.data?.detail ||
+          error?.response?.data?.message ||
+          error?.response?.data?.detail ||
           "Unknown error";
-        toast.error(t("bulkToast.error.reassignFailed", { errorMessage }), {
+        const errorKey = deleting
+          ? "bulkToast.error.deleteFailed"
+          : "bulkToast.error.reassignFailed";
+        toast.error(t(errorKey, { errorMessage: errorMessage }), {
           position: "top-center",
         });
+      })
+      .finally(() => {
+        setIsRemovingFromCase(false);
       });
-  }, [selectedExports, deleteExportsOnRemove, setSelectedExports, mutate, t]);
+  }, [
+    selectedExports,
+    deleteExportsOnRemove,
+    setSelectedExports,
+    mutate,
+    deleteExports,
+    t,
+  ]);
 
   // ── Case picker ─────────────────────────────────────────────────
 
@@ -243,6 +260,7 @@ export default function ExportActionGroup({
         <AlertDialog
           open={removeDialogOpen}
           onOpenChange={(open) => {
+            if (isRemovingFromCase) return;
             if (!open) {
               setRemoveDialogOpen(false);
               setDeleteExportsOnRemove(false);
@@ -274,15 +292,17 @@ export default function ExportActionGroup({
                 id="bulk-delete-exports-switch"
                 checked={deleteExportsOnRemove}
                 onCheckedChange={setDeleteExportsOnRemove}
+                disabled={isRemovingFromCase}
               />
             </div>
             <AlertDialogFooter>
-              <AlertDialogCancel>
+              <AlertDialogCancel disabled={isRemovingFromCase}>
                 {t("button.cancel", { ns: "common" })}
               </AlertDialogCancel>
               <AlertDialogAction
                 className={buttonVariants({ variant: "destructive" })}
                 onClick={handleRemoveFromCase}
+                disabled={isRemovingFromCase}
               >
                 {t("button.delete", { ns: "common" })}
               </AlertDialogAction>