initial commit

2026-05-09 12:34:45 -04:00
commit 97fabc2c17
49 changed files with 4856 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,20 @@
+server {
+    listen 80;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        proxy_pass http://backend:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        # Allow large file uploads
+        client_max_body_size 0;
+        # Disable buffering for video streaming
+        proxy_buffering off;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.100.9",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.15.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.10"
+  }
+}
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/icons.svg
+++ b/frontend/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,76 @@
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { api, Library } from "./api/client";
+import BrowserPage from "./pages/BrowserPage";
+import SettingsPage from "./pages/SettingsPage";
+import SearchPage from "./pages/SearchPage";
+
+const queryClient = new QueryClient();
+
+function Sidebar() {
+  const { data: libraries = [] } = useQuery<Library[]>({
+    queryKey: ["libraries"],
+    queryFn: api.libraries.list,
+  });
+
+  const linkStyle = ({ isActive }: { isActive: boolean }) => ({
+    display: "block",
+    padding: "6px 12px",
+    textDecoration: "none",
+    borderRadius: 4,
+    color: isActive ? "#3b82f6" : "inherit",
+    background: isActive ? "#eff6ff" : "transparent",
+    fontWeight: isActive ? 600 : 400,
+  });
+
+  return (
+    <nav style={{ width: 220, borderRight: "1px solid #e5e7eb", padding: "1rem", display: "flex", flexDirection: "column", gap: 4 }}>
+      <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 12 }}>MediaLore</div>
+
+      <NavLink to="/search" style={linkStyle}>Search</NavLink>
+
+      {libraries.length > 0 && (
+        <>
+          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#9ca3af", margin: "12px 0 4px", padding: "0 12px" }}>
+            Libraries
+          </div>
+          {libraries.map((lib) => (
+            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle}>
+              {lib.name}
+            </NavLink>
+          ))}
+        </>
+      )}
+
+      <div style={{ marginTop: "auto" }}>
+        <NavLink to="/settings" style={linkStyle}>Settings</NavLink>
+      </div>
+    </nav>
+  );
+}
+
+function AppShell() {
+  return (
+    <div style={{ display: "flex", height: "100vh", fontFamily: "system-ui, sans-serif" }}>
+      <Sidebar />
+      <main style={{ flex: 1, overflow: "auto" }}>
+        <Routes>
+          <Route path="/" element={<SearchPage />} />
+          <Route path="/search" element={<SearchPage />} />
+          <Route path="/library/:libraryId" element={<BrowserPage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AppShell />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,101 @@
+const BASE = "/api";
+
+export interface Library {
+  id: number;
+  name: string;
+  path: string;
+}
+
+export interface Tag {
+  id: number;
+  name: string;
+  category: string;
+}
+
+export interface TagsByCategory {
+  category: string;
+  tags: Tag[];
+}
+
+export interface MediaItem {
+  id: number;
+  library_id: number;
+  rel_path: string;
+  filename: string;
+  media_type: "image" | "video";
+  size_bytes: number | null;
+  missing: boolean;
+  tags: Tag[];
+  created_at: string;
+  updated_at: string;
+}
+
+export interface BrowseEntry {
+  name: string;
+  type: "dir" | "image" | "video";
+  rel_path: string;
+  media_item_id: number | null;
+}
+
+export interface BrowseResult {
+  path: string;
+  entries: BrowseEntry[];
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    ...init,
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`${res.status}: ${text}`);
+  }
+  if (res.status === 204) return undefined as T;
+  return res.json();
+}
+
+export const api = {
+  libraries: {
+    list: () => request<Library[]>("/libraries"),
+    create: (name: string, path: string) =>
+      request<Library>("/libraries", {
+        method: "POST",
+        body: JSON.stringify({ name, path }),
+      }),
+    delete: (id: number) =>
+      request<void>(`/libraries/${id}`, { method: "DELETE" }),
+    browse: (id: number, path = "") =>
+      request<BrowseResult>(`/libraries/${id}/browse?path=${encodeURIComponent(path)}`),
+  },
+
+  media: {
+    get: (id: number) => request<MediaItem>(`/media/${id}`),
+    fileUrl: (id: number) => `${BASE}/media/${id}/file`,
+    thumbnailUrl: (id: number) => `${BASE}/media/${id}/thumbnail`,
+    setTags: (id: number, tagIds: number[]) =>
+      request<MediaItem>(`/media/${id}/tags`, {
+        method: "PUT",
+        body: JSON.stringify({ tag_ids: tagIds }),
+      }),
+  },
+
+  tags: {
+    list: () => request<TagsByCategory[]>("/tags"),
+    create: (name: string, category: string) =>
+      request<Tag>("/tags", {
+        method: "POST",
+        body: JSON.stringify({ name, category }),
+      }),
+    delete: (id: number) =>
+      request<void>(`/tags/${id}`, { method: "DELETE" }),
+  },
+
+  search: (params: { q?: string; tags?: number[]; library_id?: number }) => {
+    const p = new URLSearchParams();
+    if (params.q) p.set("q", params.q);
+    if (params.tags?.length) p.set("tags", params.tags.join(","));
+    if (params.library_id != null) p.set("library_id", String(params.library_id));
+    return request<MediaItem[]>(`/search?${p}`);
+  },
+};
--- a/frontend/src/assets/hero.png
+++ b/frontend/src/assets/hero.png
--- a/frontend/src/assets/vite.svg
+++ b/frontend/src/assets/vite.svg
--- a/frontend/src/components/FileBrowser/FileBrowser.tsx
+++ b/frontend/src/components/FileBrowser/FileBrowser.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api, BrowseResult } from "../../api/client";
+import MediaViewer from "../MediaViewer/MediaViewer";
+
+interface Props {
+  libraryId: number;
+}
+
+export default function FileBrowser({ libraryId }: Props) {
+  const [currentPath, setCurrentPath] = useState("");
+  const [viewingId, setViewingId] = useState<number | null>(null);
+
+  const { data, isLoading } = useQuery<BrowseResult>({
+    queryKey: ["browse", libraryId, currentPath],
+    queryFn: () => api.libraries.browse(libraryId, currentPath),
+  });
+
+  const pathParts = currentPath ? currentPath.split("/").filter(Boolean) : [];
+
+  function navigate(relPath: string) {
+    setCurrentPath(relPath);
+    setViewingId(null);
+  }
+
+  return (
+    <div style={{ padding: "1rem" }}>
+      {/* Breadcrumb */}
+      <nav style={{ marginBottom: 16, display: "flex", gap: 4, alignItems: "center", flexWrap: "wrap" }}>
+        <button onClick={() => navigate("")} style={{ background: "none", border: "none", cursor: "pointer", fontWeight: 600 }}>
+          Root
+        </button>
+        {pathParts.map((part, i) => {
+          const partPath = pathParts.slice(0, i + 1).join("/");
+          return (
+            <span key={partPath} style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              <span style={{ color: "#888" }}>/</span>
+              <button onClick={() => navigate(partPath)} style={{ background: "none", border: "none", cursor: "pointer" }}>
+                {part}
+              </button>
+            </span>
+          );
+        })}
+      </nav>
+
+      {isLoading && <p>Loading…</p>}
+
+      {/* Grid */}
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
+        {data?.entries.map((entry) => (
+          <div
+            key={entry.rel_path}
+            onClick={() => {
+              if (entry.type === "dir") navigate(entry.rel_path);
+              else if (entry.media_item_id) setViewingId(entry.media_item_id);
+            }}
+            style={{
+              cursor: "pointer",
+              border: "1px solid #ddd",
+              borderRadius: 6,
+              overflow: "hidden",
+              background: "#fafafa",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            {entry.type === "dir" ? (
+              <div style={{ fontSize: 40, padding: "20px 0" }}>📁</div>
+            ) : (
+              <img
+                src={entry.media_item_id ? api.media.thumbnailUrl(entry.media_item_id) : ""}
+                alt={entry.name}
+                loading="lazy"
+                style={{ width: "100%", height: 110, objectFit: "cover" }}
+                onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
+              />
+            )}
+            <div style={{ padding: "4px 6px", fontSize: 12, width: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {entry.name}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {viewingId && data && (
+        <MediaViewer
+          mediaId={viewingId}
+          siblings={data.entries}
+          onClose={() => setViewingId(null)}
+          onNavigate={setViewingId}
+        />
+      )}
+    </div>
+  );
+}
--- a/frontend/src/components/MediaViewer/MediaViewer.tsx
+++ b/frontend/src/components/MediaViewer/MediaViewer.tsx
@@ -0,0 +1,105 @@
+import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api, BrowseEntry, MediaItem } from "../../api/client";
+import TagPanel from "../TagPanel/TagPanel";
+
+interface Props {
+  mediaId: number;
+  siblings: BrowseEntry[];
+  onClose: () => void;
+  onNavigate: (id: number) => void;
+}
+
+export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
+  const { data: item } = useQuery<MediaItem>({
+    queryKey: ["media", mediaId],
+    queryFn: () => api.media.get(mediaId),
+  });
+
+  const mediaSiblings = siblings.filter((e) => e.media_item_id != null);
+  const currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
+  const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null;
+  const nextId = currentIndex < mediaSiblings.length - 1 ? mediaSiblings[currentIndex + 1].media_item_id : null;
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
+      if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [prevId, nextId, onClose, onNavigate]);
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
+        display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          display: "flex", gap: 16, background: "#1a1a1a", borderRadius: 8,
+          padding: 16, maxWidth: "95vw", maxHeight: "95vh", overflow: "auto",
+        }}
+      >
+        {/* Prev */}
+        <button
+          onClick={() => prevId && onNavigate(prevId)}
+          disabled={!prevId}
+          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
+        >
+          ‹
+        </button>
+
+        {/* Media */}
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
+          {item?.filename && (
+            <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
+          )}
+          {item?.media_type === "image" && (
+            <img
+              src={api.media.fileUrl(mediaId)}
+              alt={item.filename}
+              style={{ maxWidth: "70vw", maxHeight: "80vh", objectFit: "contain" }}
+            />
+          )}
+          {item?.media_type === "video" && (
+            <video
+              src={api.media.fileUrl(mediaId)}
+              controls
+              style={{ maxWidth: "70vw", maxHeight: "80vh" }}
+            />
+          )}
+        </div>
+
+        {/* Next */}
+        <button
+          onClick={() => nextId && onNavigate(nextId)}
+          disabled={!nextId}
+          style={{ alignSelf: "center", fontSize: 24, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
+        >
+          ›
+        </button>
+
+        {/* Tag panel */}
+        {item && (
+          <div style={{ color: "#fff", borderLeft: "1px solid #333", paddingLeft: 16, minWidth: 200 }}>
+            <TagPanel item={item} />
+          </div>
+        )}
+
+        {/* Close */}
+        <button
+          onClick={onClose}
+          style={{ position: "absolute", top: 16, right: 16, background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/TagPanel/TagPanel.tsx
+++ b/frontend/src/components/TagPanel/TagPanel.tsx
@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, Tag, TagsByCategory, MediaItem } from "../../api/client";
+
+interface Props {
+  item: MediaItem;
+}
+
+export default function TagPanel({ item }: Props) {
+  const qc = useQueryClient();
+  const { data: grouped = [] } = useQuery<TagsByCategory[]>({
+    queryKey: ["tags"],
+    queryFn: api.tags.list,
+  });
+
+  const allTags = grouped.flatMap((g) => g.tags);
+  const assignedIds = new Set(item.tags.map((t) => t.id));
+
+  const [newName, setNewName] = useState("");
+  const [newCategory, setNewCategory] = useState("");
+
+  const setTagsMutation = useMutation({
+    mutationFn: (ids: number[]) => api.media.setTags(item.id, ids),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["media", item.id] }),
+  });
+
+  const createTagMutation = useMutation({
+    mutationFn: () => api.tags.create(newName.trim(), newCategory.trim()),
+    onSuccess: (tag: Tag) => {
+      qc.invalidateQueries({ queryKey: ["tags"] });
+      const newIds = [...assignedIds, tag.id];
+      setTagsMutation.mutate(newIds);
+      setNewName("");
+      setNewCategory("");
+    },
+  });
+
+  function toggle(tagId: number) {
+    const next = assignedIds.has(tagId)
+      ? [...assignedIds].filter((id) => id !== tagId)
+      : [...assignedIds, tagId];
+    setTagsMutation.mutate(next);
+  }
+
+  return (
+    <div style={{ minWidth: 220 }}>
+      <h3 style={{ margin: "0 0 12px" }}>Tags</h3>
+
+      {grouped.map((group) => (
+        <div key={group.category} style={{ marginBottom: 12 }}>
+          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>
+            {group.category}
+          </div>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
+            {group.tags.map((tag) => (
+              <button
+                key={tag.id}
+                onClick={() => toggle(tag.id)}
+                style={{
+                  padding: "3px 10px",
+                  borderRadius: 12,
+                  border: "1px solid",
+                  cursor: "pointer",
+                  background: assignedIds.has(tag.id) ? "#3b82f6" : "transparent",
+                  color: assignedIds.has(tag.id) ? "#fff" : "inherit",
+                  borderColor: assignedIds.has(tag.id) ? "#3b82f6" : "#ccc",
+                  fontSize: 13,
+                }}
+              >
+                {tag.name}
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+
+      <details style={{ marginTop: 16 }}>
+        <summary style={{ cursor: "pointer", fontSize: 13, color: "#3b82f6" }}>+ New tag</summary>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }}>
+          <input
+            placeholder="Tag name"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            style={{ padding: "4px 8px" }}
+          />
+          <input
+            placeholder="Category"
+            value={newCategory}
+            onChange={(e) => setNewCategory(e.target.value)}
+            style={{ padding: "4px 8px" }}
+          />
+          <button
+            onClick={() => createTagMutation.mutate()}
+            disabled={!newName.trim() || !newCategory.trim() || createTagMutation.isPending}
+          >
+            Create & assign
+          </button>
+        </div>
+      </details>
+    </div>
+  );
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/BrowserPage.tsx
+++ b/frontend/src/pages/BrowserPage.tsx
@@ -0,0 +1,28 @@
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { api, Library } from "../api/client";
+import FileBrowser from "../components/FileBrowser/FileBrowser";
+
+export default function BrowserPage() {
+  const { libraryId } = useParams<{ libraryId: string }>();
+  const id = Number(libraryId);
+
+  const { data: libraries = [] } = useQuery<Library[]>({
+    queryKey: ["libraries"],
+    queryFn: api.libraries.list,
+  });
+
+  const library = libraries.find((l) => l.id === id);
+
+  if (!library) return <p style={{ padding: "2rem" }}>Library not found.</p>;
+
+  return (
+    <div>
+      <div style={{ padding: "1rem 1rem 0", borderBottom: "1px solid #eee" }}>
+        <h2 style={{ margin: 0 }}>{library.name}</h2>
+        <div style={{ fontSize: 12, color: "#888" }}>{library.path}</div>
+      </div>
+      <FileBrowser libraryId={id} />
+    </div>
+  );
+}
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api, MediaItem, TagsByCategory } from "../api/client";
+
+export default function SearchPage() {
+  const [q, setQ] = useState("");
+  const [selectedTags, setSelectedTags] = useState<number[]>([]);
+  const [submitted, setSubmitted] = useState(false);
+
+  const { data: grouped = [] } = useQuery<TagsByCategory[]>({
+    queryKey: ["tags"],
+    queryFn: api.tags.list,
+  });
+
+  const { data: results = [], isFetching } = useQuery<MediaItem[]>({
+    queryKey: ["search", q, selectedTags],
+    queryFn: () => api.search({ q, tags: selectedTags }),
+    enabled: submitted,
+  });
+
+  function toggleTag(id: number) {
+    setSelectedTags((prev) =>
+      prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id]
+    );
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitted(true);
+  }
+
+  return (
+    <div style={{ padding: "2rem", maxWidth: 900 }}>
+      <h1>Search</h1>
+      <form onSubmit={handleSubmit} style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
+        <input
+          placeholder="Search by filename…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          style={{ flex: 1, minWidth: 200, padding: "6px 10px" }}
+        />
+        <button type="submit">Search</button>
+      </form>
+
+      {/* Tag filter */}
+      {grouped.length > 0 && (
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ fontSize: 13, color: "#666", marginBottom: 8 }}>Filter by tag:</div>
+          {grouped.map((group) => (
+            <div key={group.category} style={{ marginBottom: 8 }}>
+              <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "#888", marginRight: 8 }}>
+                {group.category}
+              </span>
+              {group.tags.map((tag) => (
+                <button
+                  key={tag.id}
+                  onClick={() => toggleTag(tag.id)}
+                  style={{
+                    margin: "2px",
+                    padding: "2px 10px",
+                    borderRadius: 12,
+                    border: "1px solid",
+                    cursor: "pointer",
+                    background: selectedTags.includes(tag.id) ? "#3b82f6" : "transparent",
+                    color: selectedTags.includes(tag.id) ? "#fff" : "inherit",
+                    borderColor: selectedTags.includes(tag.id) ? "#3b82f6" : "#ccc",
+                    fontSize: 13,
+                  }}
+                >
+                  {tag.name}
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {isFetching && <p>Searching…</p>}
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 12 }}>
+        {results.map((item) => (
+          <div key={item.id} style={{ border: "1px solid #ddd", borderRadius: 6, overflow: "hidden" }}>
+            <img
+              src={api.media.thumbnailUrl(item.id)}
+              alt={item.filename}
+              loading="lazy"
+              style={{ width: "100%", height: 110, objectFit: "cover" }}
+            />
+            <div style={{ padding: "4px 6px", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {item.filename}
+            </div>
+            {item.tags.length > 0 && (
+              <div style={{ padding: "0 6px 4px", display: "flex", flexWrap: "wrap", gap: 4 }}>
+                {item.tags.map((t) => (
+                  <span key={t.id} style={{ background: "#e0edff", color: "#3b82f6", borderRadius: 8, padding: "1px 6px", fontSize: 11 }}>
+                    {t.name}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {submitted && !isFetching && results.length === 0 && (
+        <p style={{ color: "#888" }}>No results found.</p>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { api, Library } from "../api/client";
+
+export default function SettingsPage() {
+  const qc = useQueryClient();
+  const { data: libraries = [] } = useQuery<Library[]>({
+    queryKey: ["libraries"],
+    queryFn: api.libraries.list,
+  });
+
+  const [name, setName] = useState("");
+  const [path, setPath] = useState("");
+  const [error, setError] = useState("");
+
+  const addMutation = useMutation({
+    mutationFn: () => api.libraries.create(name, path),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["libraries"] });
+      setName("");
+      setPath("");
+      setError("");
+    },
+    onError: (e: Error) => setError(e.message),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: number) => api.libraries.delete(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["libraries"] }),
+  });
+
+  return (
+    <div style={{ padding: "2rem", maxWidth: 600 }}>
+      <h1>Settings</h1>
+      <h2>Libraries</h2>
+
+      <form
+        onSubmit={(e) => { e.preventDefault(); addMutation.mutate(); }}
+        style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 24 }}
+      >
+        <input
+          placeholder="Library name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+        />
+        <input
+          placeholder="/path/to/directory"
+          value={path}
+          onChange={(e) => setPath(e.target.value)}
+          required
+        />
+        {error && <p style={{ color: "red", margin: 0 }}>{error}</p>}
+        <button type="submit" disabled={addMutation.isPending}>
+          {addMutation.isPending ? "Adding…" : "Add Library"}
+        </button>
+      </form>
+
+      <ul style={{ listStyle: "none", padding: 0 }}>
+        {libraries.map((lib) => (
+          <li
+            key={lib.id}
+            style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: "1px solid #eee" }}
+          >
+            <div>
+              <strong>{lib.name}</strong>
+              <div style={{ fontSize: 12, color: "#666" }}>{lib.path}</div>
+            </div>
+            <button
+              onClick={() => deleteMutation.mutate(lib.id)}
+              disabled={deleteMutation.isPending}
+              style={{ color: "red" }}
+            >
+              Remove
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": "http://localhost:8000",
+    },
+  },
+})