feat: rebuild Layout with collapsible sidebar topbar toggles and Supabase link

The shell now mirrors YouTube more closely with a sectioned sidebar, a search field, language and theme switches in the topbar, and a hamburger that collapses the sidebar on desktop or opens it as a drawer on mobile. Adds a Database entry that points to the Supabase editor so the team can jump straight to the data.

frontend/src/App.tsx

@@ -1,22 +1,28 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Layout } from "./components/Layout";
 import { AppProvider } from "./context/AppContext";
+import { ThemeProvider } from "./context/ThemeContext";
+import { I18nProvider } from "./i18n/I18nContext";
 import { HubPage } from "./pages/HubPage";
 import { SettingsPage } from "./pages/SettingsPage";
 import { WatchPage } from "./pages/WatchPage";
 
 export default function App() {
   return (
-    <AppProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route element={<Layout />}>
-            <Route index element={<WatchPage />} />
-            <Route path="hub" element={<HubPage />} />
-            <Route path="settings" element={<SettingsPage />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
-    </AppProvider>
+    <ThemeProvider>
+      <I18nProvider>
+        <AppProvider>
+          <BrowserRouter>
+            <Routes>
+              <Route element={<Layout />}>
+                <Route index element={<WatchPage />} />
+                <Route path="hub" element={<HubPage />} />
+                <Route path="settings" element={<SettingsPage />} />
+              </Route>
+            </Routes>
+          </BrowserRouter>
+        </AppProvider>
+      </I18nProvider>
+    </ThemeProvider>
   );
 }

frontend/src/components/Layout.tsx

@@ -1,25 +1,173 @@
+import { useState } from "react";
 import { NavLink, Outlet } from "react-router-dom";
-import { ModelBanner } from "./ModelBanner";
+import { useI18n } from "../i18n/I18nContext";
+import { useTheme } from "../context/ThemeContext";
+import {
+  DatabaseIcon,
+  GlobeIcon,
+  HistoryIcon,
+  HomeIcon,
+  HubIcon,
+  LibraryIcon,
+  MenuIcon,
+  MoonIcon,
+  SearchIcon,
+  SettingsIcon,
+  ShieldIcon,
+  ShortsIcon,
+  SubsIcon,
+  SunIcon,
+  WatchIcon,
+  YourVideosIcon,
+} from "./icons";
+
+const DATABASE_URL =
+  "https://supabase.com/dashboard/project/kxzxqlhdzkpcanotdbgl/editor/17547?schema=public&sort=created_at%3Adesc";
 
 export function Layout() {
+  const { t, toggleLocale } = useI18n();
+  const { theme, toggleTheme } = useTheme();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? "nav-item active" : "nav-item";
+
+  const closeMobile = () => setSidebarOpen(false);
+
+  const sidebarClass = [
+    "sidebar",
+    sidebarOpen ? "open" : "",
+    collapsed ? "collapsed" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
-    <div className="app-shell">
-      <nav className="sidebar">
-        <div className="logo">
-          <img src="/signalmod_logo.png" alt="SignalMod" className="logo-img" />
-        </div>
-        <NavLink to="/" end className={({ isActive }) => (isActive ? "nav active" : "nav")}>
-          Watch
-        </NavLink>
-        <NavLink to="/hub" className={({ isActive }) => (isActive ? "nav active" : "nav")}>
-          Moderator Hub
-        </NavLink>
-        <NavLink to="/settings" className={({ isActive }) => (isActive ? "nav active" : "nav")}>
-          Settings
+    <div className={collapsed ? "app-shell collapsed-shell" : "app-shell"}>
+      <nav className={sidebarClass}>
+        <NavLink to="/" className="brand" onClick={closeMobile} aria-label="SignalMod">
+          <img src="/signalmod_logo.png" alt="SignalMod" className="brand-logo" />
         </NavLink>
+
+        <div className="sidebar-section">
+          <NavLink to="/" end className={navLinkClass} onClick={closeMobile} title={t.nav.home}>
+            <span className="nav-icon"><HomeIcon /></span>
+            <span className="nav-label">{t.nav.home}</span>
+          </NavLink>
+          <button className="nav-item" type="button" disabled title={t.nav.shorts}>
+            <span className="nav-icon"><ShortsIcon /></span>
+            <span className="nav-label">{t.nav.shorts}</span>
+          </button>
+          <button className="nav-item" type="button" disabled title={t.nav.subscriptions}>
+            <span className="nav-icon"><SubsIcon /></span>
+            <span className="nav-label">{t.nav.subscriptions}</span>
+          </button>
+        </div>
+
+        <div className="sidebar-section">
+          <button className="nav-item" type="button" title={t.nav.library}>
+            <span className="nav-icon"><LibraryIcon /></span>
+            <span className="nav-label">{t.nav.library}</span>
+          </button>
+          <button className="nav-item" type="button" title={t.nav.history}>
+            <span className="nav-icon"><HistoryIcon /></span>
+            <span className="nav-label">{t.nav.history}</span>
+          </button>
+          <button className="nav-item" type="button" title={t.nav.yourVideos}>
+            <span className="nav-icon"><YourVideosIcon /></span>
+            <span className="nav-label">{t.nav.yourVideos}</span>
+          </button>
+        </div>
+
+        <div className="sidebar-section">
+          <h3 className="sidebar-heading">
+            <span className="nav-icon"><ShieldIcon /></span>
+            <span className="nav-label">{t.nav.moderation}</span>
+          </h3>
+          <NavLink to="/" end className={navLinkClass} onClick={closeMobile} title={t.nav.watch}>
+            <span className="nav-icon"><WatchIcon /></span>
+            <span className="nav-label">{t.nav.watch}</span>
+          </NavLink>
+          <NavLink to="/hub" className={navLinkClass} onClick={closeMobile} title={t.nav.hub}>
+            <span className="nav-icon"><HubIcon /></span>
+            <span className="nav-label">{t.nav.hub}</span>
+          </NavLink>
+          <NavLink to="/settings" className={navLinkClass} onClick={closeMobile} title={t.nav.settings}>
+            <span className="nav-icon"><SettingsIcon /></span>
+            <span className="nav-label">{t.nav.settings}</span>
+          </NavLink>
+          <a
+            className="nav-item"
+            href={DATABASE_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={closeMobile}
+            title={t.nav.database}
+          >
+            <span className="nav-icon"><DatabaseIcon /></span>
+            <span className="nav-label">{t.nav.database}</span>
+          </a>
+        </div>
       </nav>
+
+      {sidebarOpen && (
+        <div className="sidebar-backdrop" onClick={closeMobile} />
+      )}
+
       <main className="main-content">
-        {/* <ModelBanner /> */}
+        <header className="topbar">
+          <div className="topbar-left">
+            <button
+              className="icon-btn"
+              type="button"
+              onClick={() => {
+                if (window.matchMedia("(max-width: 820px)").matches) {
+                  setSidebarOpen((v) => !v);
+                } else {
+                  setCollapsed((v) => !v);
+                }
+              }}
+              aria-label={t.topbar.toggleSidebar}
+              title={t.topbar.toggleSidebar}
+            >
+              <MenuIcon />
+            </button>
+          </div>
+
+          <div className="topbar-search">
+            <SearchIcon />
+            <input
+              placeholder={t.topbar.searchPlaceholder}
+              aria-label={t.topbar.searchPlaceholder}
+            />
+          </div>
+
+          <div className="topbar-right">
+            <button
+              className="lang-toggle"
+              type="button"
+              onClick={toggleLocale}
+              title={t.topbar.toggleLanguage}
+              aria-label={t.topbar.toggleLanguage}
+            >
+              <GlobeIcon /> {t.topbar.languageLabel}
+            </button>
+            <button
+              className="theme-toggle"
+              type="button"
+              onClick={toggleTheme}
+              title={t.topbar.toggleTheme}
+              aria-label={t.topbar.toggleTheme}
+            >
+              {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+            </button>
+            <button className="sign-in" type="button">
+              {t.topbar.signIn}
+            </button>
+          </div>
+        </header>
+
         <Outlet />
       </main>
     </div>