VIBN Frontend for Coolify deployment

components/layout/app-shell.tsx

@@ -0,0 +1,63 @@
+"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>
+  );
+}
+