M0: scaffold SPA + API monorepo

Backend (Django 6.1 + DRF): - Token auth with a custom User model (register/login/logout/me) - Library models (MediaItem, MediaLocation) and REST endpoints - File list/detail with search, rating filter, sorting, pagination - Multipart upload with optional rating/tags/notes - Range-aware media serving (video seeking) and ffmpeg thumbnails - scan_files management command for the watched folder Frontend (React 19 + Vite + TypeScript): - Catppuccin Mocha design tokens from the design docs - App shell, token persistence, protected routes - Library grid with filters, file detail with custom data editor - Upload page with per-file progress via XHR - Dev proxy to the Django API
2026-09-17 07:56:47 -05:00
commit 555c25d77b
65 changed files with 5237 additions and 0 deletions
@@ -0,0 +1,86 @@
+import { LogOut } from "lucide-react";
+import { Link, NavLink, Outlet } from "react-router-dom";
+
+import { cn } from "@/lib/cn";
+import { useAuth } from "@/store/auth";
+
+const navItems = [
+  { to: "/", label: "Library" },
+  { to: "/upload", label: "Upload" },
+];
+
+export function AppShell() {
+  const user = useAuth((state) => state.user);
+  const logout = useAuth((state) => state.logout);
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-40 border-b border-ctp-surface0 bg-ctp-crust/95 backdrop-blur">
+        <div className="mx-auto flex h-14 w-full max-w-[1600px] items-center gap-6 px-4">
+          <Link to="/" className="flex items-center gap-2.5">
+            <span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust">
+              J621
+            </span>
+            <span className="hidden text-[11px] font-medium uppercase tracking-[0.14em] text-ctp-overlay0 md:block">
+              Mocha Archive Terminal
+            </span>
+          </Link>
+
+          <nav className="flex items-center gap-1">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === "/"}
+                className={({ isActive }) =>
+                  cn(
+                    "rounded-md px-3 py-1.5 text-sm font-medium transition",
+                    isActive
+                      ? "bg-ctp-surface0 text-ctp-text"
+                      : "text-ctp-subtext0 hover:bg-ctp-surface0/60 hover:text-ctp-text",
+                  )
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+
+          <div className="ml-auto flex items-center gap-3">
+            {user ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
+                    {user.username.slice(0, 1).toUpperCase()}
+                  </span>
+                  <span className="hidden text-sm text-ctp-subtext1 sm:block">
+                    {user.username}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => void logout()}
+                  title="Log out"
+                  className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+                >
+                  <LogOut className="h-4 w-4" />
+                </button>
+              </>
+            ) : (
+              <Link
+                to="/login"
+                className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+              >
+                Log in
+              </Link>
+            )}
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-[1600px] flex-1 px-4 py-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}