feat(downloads): M5 — Download Center frontend

- api.ts: download types + methods (profiles, enqueue, list/manage, file url, share,
  usage, index, admin storage/quota)
- format.ts: formatBytes / formatSpeed
- i18n: en/hu/de downloads.json (trilingual)
- Downloads nav module (Download icon, active-count badge, hidden for demo) placed after
  Messages; urlState page + App render + Header title
- DownloadButton: self-contained per-card/player affordance (demo-hidden, reflects the
  per-user download index: downloaded / in-queue), opens the preset dialog
- DownloadDialog: preset picker + optional display name -> enqueue + 'View' toast
- ProfileEditor: manage built-in + custom formats (full spec form incl. SponsorBlock)
- DownloadCenter: Queue / Library / Shared / (admin) System tabs, live progress via
  useLiveQuery, usage bar, pause/resume/cancel/delete, save-to-device, rename, share,
  admin storage dashboard + per-user quota editor
- wired DownloadButton into VideoCard + PlayerModal
- lib/nav.ts: decoupled navigator so the download toast can jump to the page

tsc + vite build clean. Verified in a headless authed browser: page + tabs render, Library
shows a real download with usage bar + actions, no console errors.

frontend/src/components/DownloadDialog.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import Modal from "./Modal";
+import ProfileEditor from "./ProfileEditor";
+import { api } from "../lib/api";
+import { notify } from "../lib/notifications";
+import { navigateTo } from "../lib/nav";
+
+const inputCls =
+  "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40";
+
+// Preset picker shown when the user hits Download on a card / in the player, or adds a URL from
+// the Download Center. Enqueues via the API and points the user at the Download Center.
+export default function DownloadDialog({
+  source,
+  title,
+  onClose,
+}: {
+  source: string;
+  title?: string | null;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const profilesQ = useQuery({ queryKey: ["download-profiles"], queryFn: api.downloadProfiles });
+  const [profileId, setProfileId] = useState<number | null>(null);
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [manage, setManage] = useState(false);
+
+  const profiles = profilesQ.data ?? [];
+  const chosen = profileId ?? profiles[0]?.id ?? null;
+
+  const submit = async () => {
+    if (!chosen || busy) return;
+    setBusy(true);
+    try {
+      await api.enqueueDownload({
+        source,
+        profile_id: chosen,
+        display_name: name.trim() || undefined,
+      });
+      qc.invalidateQueries({ queryKey: ["downloads"] });
+      qc.invalidateQueries({ queryKey: ["download-index"] });
+      qc.invalidateQueries({ queryKey: ["download-usage"] });
+      notify({
+        level: "success",
+        message: t("downloads.dialog.added"),
+        action: { label: t("downloads.dialog.view"), onClick: () => navigateTo("downloads") },
+      });
+      onClose();
+    } catch {
+      // Non-quiet request: the global error dialog already surfaced the reason (e.g. quota).
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal title={t("downloads.dialog.title")} onClose={onClose}>
+      {title && <p className="text-sm text-muted mb-4 line-clamp-2">{title}</p>}
+
+      <label className="block text-sm font-medium mb-1">{t("downloads.dialog.profile")}</label>
+      <select
+        value={chosen ?? ""}
+        onChange={(e) => setProfileId(Number(e.target.value))}
+        className={inputCls}
+      >
+        {profiles.map((p) => (
+          <option key={p.id} value={p.id}>
+            {p.name}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        onClick={() => setManage(true)}
+        className="text-xs text-accent hover:underline mt-1 mb-4"
+      >
+        {t("downloads.dialog.manage")}
+      </button>
+
+      <label className="block text-sm font-medium mb-1">{t("downloads.dialog.nameLabel")}</label>
+      <input
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={t("downloads.dialog.namePlaceholder")}
+        className={`${inputCls} mb-5`}
+      />
+
+      <div className="flex justify-end gap-2">
+        <button
+          onClick={onClose}
+          className="px-3 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-surface transition"
+        >
+          {t("downloads.actions.cancel")}
+        </button>
+        <button
+          onClick={submit}
+          disabled={busy || !chosen}
+          className="px-3 py-1.5 rounded-lg text-sm font-medium bg-accent text-accent-fg hover:opacity-90 disabled:opacity-50 transition"
+        >
+          {t("downloads.dialog.submit")}
+        </button>
+      </div>
+
+      {manage && (
+        <ProfileEditor
+          onClose={() => {
+            setManage(false);
+            profilesQ.refetch();
+          }}
+        />
+      )}
+    </Modal>
+  );
+}