initial commit

2026-05-09 12:34:45 -04:00
commit 97fabc2c17
49 changed files with 4856 additions and 0 deletions
--- 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>
+  );
+}