Spaces:
Paused
Paused
| import { useCallback, useEffect, useState } from "react"; | |
| import { Outlet } from "react-router-dom"; | |
| import { cn } from "@/lib/utils"; | |
| import { api, type StatsResponse } from "@/hooks/useApi"; | |
| import { Sidebar } from "./Sidebar"; | |
| import { BottomNav } from "./BottomNav"; | |
| const COLLAPSED_KEY = "openreels_sidebar_collapsed"; | |
| function useMediaQuery(query: string): boolean { | |
| const [matches, setMatches] = useState(() => | |
| typeof window !== "undefined" ? window.matchMedia(query).matches : false, | |
| ); | |
| useEffect(() => { | |
| const mql = window.matchMedia(query); | |
| const handler = (e: MediaQueryListEvent) => setMatches(e.matches); | |
| mql.addEventListener("change", handler); | |
| return () => mql.removeEventListener("change", handler); | |
| }, [query]); | |
| return matches; | |
| } | |
| export function Layout() { | |
| const isDesktop = useMediaQuery("(min-width: 1024px)"); | |
| const [collapsed, setCollapsed] = useState(() => { | |
| if (typeof window === "undefined") return false; | |
| return localStorage.getItem(COLLAPSED_KEY) === "true"; | |
| }); | |
| const [stats, setStats] = useState<StatsResponse | null>(null); | |
| const toggleCollapsed = useCallback(() => { | |
| setCollapsed((prev) => { | |
| const next = !prev; | |
| localStorage.setItem(COLLAPSED_KEY, String(next)); | |
| return next; | |
| }); | |
| }, []); | |
| // Fetch stats on mount and poll every 30s | |
| useEffect(() => { | |
| let active = true; | |
| const load = () => { | |
| api | |
| .getStats() | |
| .then((s) => { if (active) setStats(s); }) | |
| .catch(() => {}); | |
| }; | |
| load(); | |
| const interval = setInterval(load, 30_000); | |
| return () => { | |
| active = false; | |
| clearInterval(interval); | |
| }; | |
| }, []); | |
| if (!isDesktop) { | |
| return ( | |
| <div className="flex min-h-screen flex-col pb-14"> | |
| <main className="flex-1"> | |
| <Outlet /> | |
| </main> | |
| <BottomNav stats={stats} /> | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="flex min-h-screen"> | |
| <Sidebar | |
| collapsed={collapsed} | |
| onToggle={toggleCollapsed} | |
| stats={stats} | |
| /> | |
| {/* Main content */} | |
| <main | |
| className={cn( | |
| "flex-1 transition-[margin-left] duration-200", | |
| collapsed ? "ml-16" : "ml-[240px]", | |
| )} | |
| > | |
| <Outlet /> | |
| </main> | |
| </div> | |
| ); | |
| } | |