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

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Download } from "lucide-react";
+import clsx from "clsx";
+import DownloadDialog from "./DownloadDialog";
+import { api, type Me } from "../lib/api";
+
+// Self-contained download affordance for a video card / the player. Hidden for the demo account
+// (downloads spend server disk + need a real identity). Reflects the video's current state from
+// the shared per-user download index (one polled query shared across every card).
+export default function DownloadButton({
+  videoId,
+  title,
+  className,
+}: {
+  videoId: string;
+  title?: string | null;
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const me = qc.getQueryData<Me>(["me"]);
+  const isDemo = !!me?.is_demo;
+
+  const indexQ = useQuery({
+    queryKey: ["download-index"],
+    queryFn: api.downloadIndex,
+    enabled: !isDemo,
+    staleTime: 10000,
+  });
+  const [open, setOpen] = useState(false);
+
+  if (isDemo) return null;
+
+  const status = indexQ.data?.[videoId];
+  const downloaded = status === "done";
+  const inQueue = status === "queued" || status === "running" || status === "paused";
+  const label = downloaded
+    ? t("downloads.button.downloaded")
+    : inQueue
+      ? t("downloads.button.queued")
+      : t("downloads.button.label");
+
+  return (
+    <>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        title={label}
+        className={clsx(
+          className ?? "p-1.5 rounded-md hover:bg-surface text-muted hover:text-fg",
+          (downloaded || inQueue) && "text-accent"
+        )}
+      >
+        <Download className={clsx("w-4 h-4", inQueue && "animate-pulse")} />
+      </button>
+      {open && (
+        <DownloadDialog source={videoId} title={title} onClose={() => setOpen(false)} />
+      )}
+    </>
+  );
+}