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,63 @@
+import { Link } from "react-router-dom";
+
+import { cn } from "@/lib/cn";
+import { formatBytes } from "@/lib/format";
+import type { MediaItem } from "@/lib/types";
+
+const ratingStyles: Record<string, string> = {
+  s: "border-ctp-green/30 bg-ctp-green/15 text-ctp-green",
+  q: "border-ctp-peach/30 bg-ctp-peach/15 text-ctp-peach",
+  e: "border-ctp-red/30 bg-ctp-red/15 text-ctp-red",
+};
+
+const ratingLabels: Record<string, string> = {
+  s: "S",
+  q: "Q",
+  e: "E",
+};
+
+export function MediaCard({ item }: { item: MediaItem }) {
+  const preview =
+    item.kind === "video"
+      ? `/api/files/${item.md5}/thumbnail/`
+      : `/api/files/${item.md5}/raw/`;
+
+  return (
+    <Link
+      to={`/view/${item.md5}`}
+      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">
+        <img
+          src={preview}
+          alt={item.filename}
+          loading="lazy"
+          className="h-full w-full object-cover transition duration-200 group-hover:scale-[1.03]"
+        />
+        {item.rating ? (
+          <span
+            className={cn(
+              "absolute left-2 top-2 rounded-full border px-2 py-0.5 font-mono text-[11px] font-medium",
+              ratingStyles[item.rating],
+            )}
+          >
+            {ratingLabels[item.rating]}
+          </span>
+        ) : null}
+        <span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] uppercase text-ctp-overlay1">
+          {item.extension}
+        </span>
+        <div className="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-ctp-mantle via-ctp-mantle/80 to-transparent p-2 pt-8 transition duration-150 group-hover:translate-y-0">
+          <p className="font-mono text-[11px] text-ctp-subtext0">
+            {formatBytes(item.size)}
+          </p>
+        </div>
+      </div>
+      <div className="px-2.5 py-2">
+        <p className="truncate font-mono text-xs text-ctp-subtext1" title={item.filename}>
+          {item.filename}
+        </p>
+      </div>
+    </Link>
+  );
+}