File size: 1,920 Bytes
48eafa7 e6ed1f4 178db06 48eafa7 178db06 e6ed1f4 48eafa7 e6ed1f4 48eafa7 e6ed1f4 48eafa7 e6ed1f4 48eafa7 df790cc 178db06 48eafa7 178db06 48eafa7 df790cc 48eafa7 178db06 df790cc 178db06 48eafa7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | "use client";
import { Sidebar } from "./Sidebar";
import { TopBar } from "./TopBar";
import { Aurora } from "./Aurora";
import { useChatStore } from "@/lib/chatStore";
import { useBackendSync } from "@/lib/useBackendSync";
import clsx from "clsx";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
export function AppShell({ children }: { children: React.ReactNode }) {
const sidebarOpen = useChatStore((s) => s.sidebarOpen);
const hydrated = useChatStore((s) => s.hydrated);
const pathname = usePathname();
const conversations = useChatStore((s) => s.conversations);
const activeId = useChatStore((s) => s.activeId);
const newConversation = useChatStore((s) => s.newConversation);
// Backend hydration + auto-save (debounced PUT to /conversations)
useBackendSync();
// Ensure there is always at least one conversation when on chat route.
// Wait until hydration completes so we don't create a placeholder before
// the remote state arrives (which would cause a flash + redundant save).
useEffect(() => {
if (pathname !== "/") return;
if (!hydrated) return;
const hasAny = Object.keys(conversations).length > 0;
const hasActive = activeId && conversations[activeId];
if (!hasAny || !hasActive) newConversation();
}, [pathname, hydrated, conversations, activeId, newConversation]);
return (
<div className="relative h-screen flex flex-col overflow-hidden">
{/* Atmospheric background — fixed, behind everything */}
<Aurora />
<TopBar />
<div className="relative z-10 flex-1 flex overflow-hidden min-h-0">
<Sidebar />
<main
className={clsx(
"flex-1 flex flex-col min-w-0 min-h-0 transition-[margin] duration-300 ease-atelier",
sidebarOpen ? "md:ml-0" : "md:ml-0"
)}
>
{children}
</main>
</div>
</div>
);
}
|