Phase 3: J-IDs, ownership, roles, guest safety, adaptive detail, download

Backend:
- User.role (user/uploader/staff) with can_upload; uploads and downloads
  gated to uploader+; owners and staff can edit their items
- MediaItem.uploaded_by plus J-<id> identity (serializer, admin,
  scan_files --user, first superuser as default owner)
- API resolves J-<id>, bare numeric ids and MD5s; neighbors and lookup
  return j_ids
- Guest safety: mirror e621's anonymous default blacklist into Redis
  (parses comments, negations and wildcards), flag hidden_from_guests
  and filter lists, details and lookups for anonymous users
- POST /api/online/downloads/ writes an e621 file into the watched
  folder and indexes it for the uploader
- MariaDB + Redis via docker compose (host ports 3307/6380), PyMySQL
  driver shim, Redis cache replacing the file cache; SQLite data
  dumped and loaded into MariaDB

Frontend:
- Single /detail/:itemId route with an adaptive shell: J-<id> renders
  the library item, bare numbers render the e621 post
- Legacy /view/<md5> and /online/view/<id> redirect to canonical URLs
- Cards expose J-IDs; library custom-data editor is read-only for
  non-owners
- Role gating: Upload hidden/blocked for regular users, account shows
  the role, guest hint on the library

frontend/src/components/AppShell.tsx

@@ -13,12 +13,6 @@ import { useAuth } from "@/store/auth";
 import { useE621 } from "@/store/e621";
 import { useUi } from "@/store/ui";
 
-const navItems = [
-  { to: "/", label: "Library" },
-  { to: "/online", label: "Online" },
-  { to: "/upload", label: "Upload" },
-];
-
 export function AppShell() {
   const user = useAuth((state) => state.user);
   const logout = useAuth((state) => state.logout);
@@ -63,6 +57,12 @@ export function AppShell() {
   const showSidebarToggle =
     location.pathname === "/" || location.pathname === "/online";
 
+  const navItems = [
+    { to: "/", label: "Library" },
+    { to: "/online", label: "Online" },
+    ...(user?.can_upload ? [{ to: "/upload", label: "Upload" }] : []),
+  ];
+
   const navigationType = useNavigationType();
   useEffect(() => {
     // New navigations start at the top; history back/forward keeps position.

frontend/src/components/CommandPalette.tsx

@@ -51,12 +51,16 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
         icon: FolderOpen,
         run: () => navigate("/"),
       },
-      {
-        id: "upload",
-        label: "Go to Upload",
-        icon: Upload,
-        run: () => navigate("/upload"),
-      },
+      ...(user?.can_upload
+        ? [
+            {
+              id: "upload",
+              label: "Go to Upload",
+              icon: Upload,
+              run: () => navigate("/upload"),
+            },
+          ]
+        : []),
       {
         id: "online",
         label: "Go to Online browser",

frontend/src/components/MediaCard.tsx

@@ -19,12 +19,12 @@ const ratingLabels: Record<string, string> = {
 export function MediaCard({ item }: { item: MediaItem }) {
   const preview =
     item.kind === "video"
-      ? `/api/files/${item.md5}/thumbnail/`
-      : `/api/files/${item.md5}/raw/`;
+      ? `/api/files/${item.j_id}/thumbnail/`
+      : `/api/files/${item.j_id}/raw/`;
 
   return (
     <Link
-      to={`/view/${item.md5}`}
+      to={`/detail/${item.j_id}`}
       className="group overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base transition hover:border-ctp-surface2"
     >
       <div className="relative aspect-square overflow-hidden bg-ctp-mantle">
@@ -54,7 +54,11 @@ export function MediaCard({ item }: { item: MediaItem }) {
         </div>
       </div>
       <div className="px-2.5 py-2">
-        <p className="truncate font-mono text-xs text-ctp-subtext1" title={item.filename}>
+        <p className="font-mono text-[10px] text-ctp-overlay0">{item.j_id}</p>
+        <p
+          className="truncate font-mono text-xs text-ctp-subtext1"
+          title={item.filename}
+        >
           {item.filename}
         </p>
       </div>

frontend/src/components/ui.tsx

@@ -72,6 +72,9 @@ export function Field({
 export const inputClass =
   "w-full rounded-md border border-ctp-surface0 bg-ctp-mantle px-3 py-2 text-sm text-ctp-text placeholder:text-ctp-overlay0 focus:border-ctp-mauve focus:outline-none";
 
+export const linkButtonClass =
+  "inline-flex items-center justify-center gap-2 rounded-md border border-ctp-surface1 bg-ctp-surface0 px-3 py-1.5 text-sm font-medium text-ctp-text transition hover:bg-ctp-surface1";
+
 export function EmptyState({
   title,
   description,