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/UploadDialog.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { UploadCloud, File as FileIcon } from "lucide-react";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { Button } from "./ui/Button";
 import { api } from "../lib/api";
 import { qk } from "../lib/queryKeys";
@@ -98,7 +98,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
   };
 
   return (
-    <Modal title={t("downloads.upload.title")} onClose={onClose}>
+    <Modal initialFocus="field" title={t("downloads.upload.title")} onClose={onClose}>
       <p className="text-sm text-muted mb-4">{t("downloads.upload.hint")}</p>
 
       {/* Drop zone doubles as the picker trigger — a click anywhere opens the native file dialog. */}
@@ -180,7 +180,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
         {t("downloads.upload.nameLabel")}
       </label>
       <Input
-        className="w-full mb-5"
+        className="w-full"
         id="upload-display-name"
         value={name}
         onChange={(e) => setName(e.target.value)}
@@ -194,7 +194,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
       />
 
       {busy && (
-        <div className="mb-5" aria-live="polite">
+        <div className="mt-5" aria-live="polite">
           <div
             className="h-2 rounded-full bg-surface overflow-hidden"
             role="progressbar"
@@ -216,7 +216,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
         </div>
       )}
 
-      <div className="flex justify-end gap-2">
+      <ModalFooter>
         <Button
           variant="ghost"
           size="sm"
@@ -239,7 +239,7 @@ export default function UploadDialog({ onClose }: { onClose: () => void }) {
         >
           {t("downloads.upload.submit")}
         </Button>
-      </div>
+      </ModalFooter>
     </Modal>
   );
 }