MediaLore-Web-App/frontend/src/App.tsx

import { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
import { api, type Library } from "./api/client";
import BrowserPage from "./pages/BrowserPage";
import SettingsPage from "./pages/SettingsPage";
import SearchPage from "./pages/SearchPage";

const queryClient = new QueryClient();

function useTheme() {
  const [dark, setDark] = useState(
    () => document.documentElement.getAttribute("data-theme") === "dark"
  );

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
    localStorage.setItem("theme", dark ? "dark" : "light");
  }, [dark]);

  return { dark, toggle: () => setDark((d) => !d) };
}

function Sidebar({ onToggleTheme, dark, onClose }: { onToggleTheme: () => void; dark: boolean; onClose?: () => void }) {
  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 ? "var(--accent)" : "var(--text)",
    background: isActive ? "var(--accent-bg)" : "transparent",
    fontWeight: isActive ? 600 : 400,
  });

  return (
    <nav style={{
      width: 220,
      borderRight: "1px solid var(--border)",
      background: "var(--bg)",
      padding: "1rem",
      display: "flex",
      flexDirection: "column",
      gap: 4,
      flexShrink: 0,
    }}>
      <div style={{ fontWeight: 700, fontSize: 18, marginBottom: 12, color: "var(--text)" }}>
        MediaLore
      </div>

      <NavLink to="/search" style={linkStyle} onClick={onClose}>Search</NavLink>

      {libraries.length > 0 && (
        <>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", color: "var(--text-muted)", margin: "12px 0 4px", padding: "0 12px" }}>
            Libraries
          </div>
          {libraries.map((lib) => (
            <NavLink key={lib.id} to={`/library/${lib.id}`} style={linkStyle} onClick={onClose}>
              {lib.name}
            </NavLink>
          ))}
        </>
      )}

      <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 4 }}>
        <NavLink to="/settings" style={linkStyle} onClick={onClose}>Settings</NavLink>
        <button
          onClick={onToggleTheme}
          title={dark ? "Switch to light mode" : "Switch to dark mode"}
          style={{ textAlign: "left", border: "none", background: "transparent", padding: "6px 12px", color: "var(--text-secondary)", borderRadius: 4 }}
        >
          {dark ? "☀ Light mode" : "☾ Dark mode"}
        </button>
      </div>
    </nav>
  );
}

function AppShell() {
  const { dark, toggle } = useTheme();
  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia("(max-width: 767px)");
    setIsMobile(mq.matches);
    const handler = (e: MediaQueryListEvent) => {
      setIsMobile(e.matches);
      if (!e.matches) setSidebarOpen(false);
    };
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, []);

  return (
    <div style={{ display: "flex", height: "100vh", background: "var(--bg)", color: "var(--text)" }}>
      {/* Mobile hamburger button */}
      {isMobile && (
        <button
          onClick={() => setSidebarOpen((v) => !v)}
          style={{ position: "fixed", top: 12, left: 12, zIndex: 301, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6, padding: "6px 10px", color: "var(--text)", fontSize: 18, cursor: "pointer" }}
          aria-label="Toggle menu"
        >
          ☰
        </button>
      )}

      {/* Mobile backdrop */}
      {isMobile && sidebarOpen && (
        <div
          onClick={() => setSidebarOpen(false)}
          style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 299 }}
        />
      )}

      {/* Sidebar */}
      <div style={isMobile ? {
        position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 300,
        transform: sidebarOpen ? "translateX(0)" : "translateX(-100%)",
        transition: "transform 0.2s ease",
      } : {}}>
        <Sidebar onToggleTheme={toggle} dark={dark} onClose={isMobile ? () => setSidebarOpen(false) : undefined} />
      </div>

      <main style={{ flex: 1, overflow: "auto", background: "var(--bg)", paddingTop: isMobile ? 48 : 0 }}>
        <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>
  );
}