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/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>