Spaces:
Sleeping
Sleeping
| import { Outlet, useNavigate, useLocation } from "react-router-dom"; | |
| import { Sidebar } from "./Sidebar"; | |
| import { createContext, useContext, useState, useEffect } from "react"; | |
| import { Menu, X, Code2, Timer } from "lucide-react"; | |
| import { cn } from "@/lib/utils"; | |
| import { CanvasBackground } from "./CanvasBackground"; | |
| export const SidebarContext = createContext<{ | |
| isCollapsed: boolean; | |
| setIsCollapsed: (v: boolean) => void; | |
| isMobileOpen: boolean; | |
| setIsMobileOpen: (v: boolean) => void; | |
| }>({ | |
| isCollapsed: false, | |
| setIsCollapsed: () => {}, | |
| isMobileOpen: false, | |
| setIsMobileOpen: () => {} | |
| }); | |
| export const useSidebar = () => useContext(SidebarContext); | |
| export const AppLayout = () => { | |
| const [isCollapsed, setIsCollapsed] = useState(false); | |
| const [isMobileOpen, setIsMobileOpen] = useState(false); | |
| const navigate = useNavigate(); | |
| const location = useLocation(); | |
| const [timeLeft, setTimeLeft] = useState<number | null>(null); | |
| useEffect(() => { | |
| const checkTimer = () => { | |
| if (!location.pathname.startsWith("/multirag")) { | |
| setTimeLeft(null); | |
| return; | |
| } | |
| const start = localStorage.getItem("multirag_session_start"); | |
| const duration = localStorage.getItem("multirag_session_duration"); | |
| if (start && duration) { | |
| const elapsed = Math.floor((Date.now() - parseInt(start)) / 1000); | |
| const remaining = parseInt(duration) - elapsed; | |
| if (remaining > 0) { | |
| setTimeLeft(remaining); | |
| } else { | |
| localStorage.removeItem("multirag_session_start"); | |
| localStorage.removeItem("multirag_session_duration"); | |
| localStorage.removeItem("multirag_thread_id"); | |
| setTimeLeft(null); | |
| window.dispatchEvent(new Event("storage")); | |
| navigate("/"); | |
| } | |
| } else { | |
| setTimeLeft(null); | |
| } | |
| }; | |
| checkTimer(); | |
| window.addEventListener("storage", checkTimer); | |
| const interval = setInterval(checkTimer, 1000); | |
| return () => { | |
| window.removeEventListener("storage", checkTimer); | |
| clearInterval(interval); | |
| }; | |
| }, [location.pathname, navigate]); | |
| const formatTime = (seconds: number) => { | |
| const mins = Math.floor(seconds / 60); | |
| const secs = seconds % 60; | |
| return `${mins}:${secs < 10 ? "0" : ""}${secs}`; | |
| }; | |
| const isUrgent = timeLeft !== null && timeLeft <= 60; | |
| // Auto-collapse on smaller screens | |
| useEffect(() => { | |
| const handleResize = () => { | |
| if (window.innerWidth < 1024) { | |
| setIsCollapsed(true); | |
| } else { | |
| setIsCollapsed(false); | |
| setIsMobileOpen(false); | |
| } | |
| }; | |
| handleResize(); | |
| window.addEventListener("resize", handleResize); | |
| return () => window.removeEventListener("resize", handleResize); | |
| }, []); | |
| return ( | |
| <SidebarContext.Provider value={{ isCollapsed, setIsCollapsed, isMobileOpen, setIsMobileOpen }}> | |
| <div className="flex min-h-screen text-foreground w-full overflow-x-hidden"> | |
| {timeLeft !== null && ( | |
| <div className={cn( | |
| "fixed top-4 right-4 z-[9999] flex items-center gap-2 px-4 py-2 rounded-full border backdrop-blur-md shadow-lg transition-all duration-300", | |
| isUrgent | |
| ? "border-red-500/50 text-red-400 bg-red-950/30 shadow-red-500/10 animate-bounce" | |
| : "border-indigo-500/30 text-indigo-400 bg-slate-950/80 shadow-indigo-500/10" | |
| )}> | |
| <Timer className={cn("w-4 h-4", isUrgent ? "animate-pulse" : "animate-spin-slow")} style={{ animationDuration: isUrgent ? "0.5s" : "8s" }} /> | |
| <span className="font-mono font-black text-sm tracking-wider"> | |
| {formatTime(timeLeft)} | |
| </span> | |
| </div> | |
| )} | |
| {/* Mobile Header */} | |
| <header | |
| className="lg:hidden fixed top-0 left-0 right-0 h-16 border-b border-sidebar-border z-40 flex items-center justify-between px-4" | |
| style={{ | |
| background: "hsl(var(--sidebar-background) / 0.75)", | |
| backdropFilter: "blur(20px)", | |
| WebkitBackdropFilter: "blur(20px)", | |
| }} | |
| > | |
| <button | |
| onClick={() => setIsMobileOpen(true)} | |
| className="p-2 hover:bg-sidebar-accent rounded-lg transition-colors" | |
| > | |
| <Menu className="w-6 h-6 text-sidebar-foreground" /> | |
| </button> | |
| {/* Logo — icon + text */} | |
| <div className="flex items-center gap-2"> | |
| <div className="w-8 h-8 rounded-xl gradient-bg flex items-center justify-center shadow-md"> | |
| <Code2 className="w-4 h-4 text-white" /> | |
| </div> | |
| <span className="font-bold text-base"><span className="text-primary">ML</span> Learner</span> | |
| </div> | |
| <div className="w-10"></div> {/* Spacer for symmetry */} | |
| </header> | |
| {/* Sidebar Overlay for Mobile */} | |
| {isMobileOpen && ( | |
| <div | |
| className="lg:hidden fixed inset-0 bg-black/70 z-40 transition-opacity" | |
| onClick={() => setIsMobileOpen(false)} | |
| /> | |
| )} | |
| <Sidebar /> | |
| {/* 3D WebGL Background Layer */} | |
| <CanvasBackground /> | |
| {/* Main content shifts using margin so it never overlaps or leaves a gap */} | |
| <main | |
| className={cn( | |
| "flex flex-col min-h-screen transition-all duration-300 ease-in-out relative z-10", | |
| "pt-16 lg:pt-0", // Account for mobile header | |
| isCollapsed ? "lg:ml-[72px] w-full lg:w-[calc(100vw-72px)]" : "lg:ml-[260px] w-full lg:w-[calc(100vw-260px)]" | |
| )} | |
| > | |
| <div className="flex-1 w-full max-w-full animate-fade-in relative"> | |
| <Outlet /> | |
| </div> | |
| </main> | |
| </div> | |
| </SidebarContext.Provider> | |
| ); | |
| }; | |