feat(design): dialogs open by purpose and keep their commit row pinned (E28 S3f1)

Modal takes a required initialFocus (field / close / action), a field that
loads late takes the focus while it still rests on the close button, and
ModalFooter portals a dialog's commit row under the scrolling body from any
depth. The header and footer fades follow the body's scroll timeline, and the
viewport's interactive-widget=resizes-content keeps the footer above an
on-screen keyboard.

frontend/src/components/VideoEditor.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Crop, Eye, EyeOff, Pause, Play, Scissors, SplitSquareHorizontal, X } from "lucide-react";
 import clsx from "clsx";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { notify } from "../lib/notifications";
 import { api, type DownloadJob, type EditSpec } from "../lib/api";
 import { contentRect, cropToSourcePx, type Frac } from "../lib/cropGeometry";
@@ -384,7 +384,12 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
   const selIdx = segments.findIndex((s) => s.id === sel?.id);
 
   return (
-    <Modal title={t("editor.title", { name: defaultName })} onClose={onClose} maxWidth="max-w-3xl">
+    <Modal
+      initialFocus="field"
+      title={t("editor.title", { name: defaultName })}
+      onClose={onClose}
+      maxWidth="max-w-3xl"
+    >
       <div className="space-y-3">
         {/* video + crop overlay */}
         <div className="relative bg-black rounded-lg overflow-hidden select-none">
@@ -681,7 +686,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
           />
         </div>
 
-        <div className="flex items-center justify-between pt-1">
+        <ModalFooter className="flex items-center justify-between gap-2">
           <span className="text-xs text-muted">
             {reencode ? t("editor.willReencode") : t("editor.willCopy")}
           </span>
@@ -704,7 +709,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                   : t("editor.create")}
             </Button>
           </div>
-        </div>
+        </ModalFooter>
       </div>
     </Modal>
   );