64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode, useState, useMemo } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { LeftRail } from "./left-rail";
|
|
import { RightPanel } from "./right-panel";
|
|
|
|
interface AppShellProps {
|
|
children: ReactNode;
|
|
workspace: string;
|
|
projectId: string;
|
|
projectName?: string;
|
|
}
|
|
|
|
export function AppShell({ children, workspace, projectId, projectName }: AppShellProps) {
|
|
const pathname = usePathname();
|
|
const [activeSection, setActiveSection] = useState<string>("home");
|
|
|
|
// Derive active section from pathname
|
|
const derivedSection = useMemo(() => {
|
|
if (pathname.includes('/v_ai_chat')) {
|
|
return 'ai-chat';
|
|
} else if (pathname.includes('/overview')) {
|
|
return 'home';
|
|
} else if (pathname.includes('/docs')) {
|
|
return 'docs';
|
|
} else if (pathname.includes('/plan') || pathname.includes('/timeline-plan')) {
|
|
return 'plan';
|
|
} else if (pathname.includes('/design')) {
|
|
return 'design';
|
|
} else if (pathname.includes('/tech')) {
|
|
return 'tech';
|
|
} else if (pathname.includes('/journey')) {
|
|
return 'journey';
|
|
}
|
|
return activeSection;
|
|
}, [pathname, activeSection]);
|
|
|
|
const displayProjectName = projectName || "Product";
|
|
|
|
return (
|
|
<div className="flex h-screen w-full overflow-hidden bg-background">
|
|
{/* Left Rail - App Navigation */}
|
|
<LeftRail
|
|
key={projectId} // Force re-render when projectId changes
|
|
activeSection={derivedSection}
|
|
onSectionChange={setActiveSection}
|
|
projectName={displayProjectName}
|
|
projectId={projectId}
|
|
workspace={workspace}
|
|
/>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 flex flex-col overflow-y-auto">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Right Panel - Activity & AI Chat */}
|
|
<RightPanel />
|
|
</div>
|
|
);
|
|
}
|
|
|