From 93e1ff569b0a3cbf1ab991da5b4c639457b30917 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:15:39 -0500
Subject: [PATCH 1/5] feat: move ThinkEx logo from sidebar to workspace header

- Remove ThinkEx logo and home icon from workspace sidebar
- Add ThinkEx logo to workspace header (workspace routes only)
- Logo scales on hover instead of background highlight
- Hide sidebar header completely on workspace routes
---
 .../workspace-canvas/WorkspaceHeader.tsx      | 23 ++++++++
 .../workspace-canvas/WorkspaceSidebar.tsx     | 59 ++++++++-----------
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/src/components/workspace-canvas/WorkspaceHeader.tsx b/src/components/workspace-canvas/WorkspaceHeader.tsx
index 713af9c6..047dfc47 100644
--- a/src/components/workspace-canvas/WorkspaceHeader.tsx
+++ b/src/components/workspace-canvas/WorkspaceHeader.tsx
@@ -1,5 +1,8 @@
 import type React from "react";
 import { useState, useRef, useEffect, useCallback } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Search, X, ChevronRight, ChevronDown, FolderOpen, ChevronLeft, Plus, Upload, FileText, Folder, Settings, Share2, Play, MoreHorizontal, Globe, Brain } from "lucide-react";
 import { LuBook } from "react-icons/lu";
 import { PiCardsThreeBold } from "react-icons/pi";
@@ -118,6 +121,8 @@ export default function WorkspaceHeader({
   const [showYouTubeDialog, setShowYouTubeDialog] = useState(false);
   const renameInputRef = useRef<HTMLInputElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const pathname = usePathname();
+  const isWorkspaceRoute = pathname.startsWith("/workspace");
   
   // Track drag hover state for breadcrumb elements
   const [hoveredBreadcrumbTarget, setHoveredBreadcrumbTarget] = useState<string | null>(null); // 'root' or folderId
@@ -346,6 +351,24 @@ export default function WorkspaceHeader({
       <div className="flex items-center justify-between w-full px-3">
         {/* Left Side: Sidebar Toggle + Navigation Arrows + Breadcrumbs */}
         <div className="flex items-center gap-2 pointer-events-auto min-w-0">
+          {isWorkspaceRoute && (
+            <Link
+              href="/home"
+              className="group flex items-center mr-1 shrink-0 rounded-md p-1 cursor-pointer"
+              aria-label="ThinkEx"
+            >
+              <div className="transition-transform duration-200 group-hover:scale-110">
+                <Image
+                  src="/newlogothinkex.svg"
+                  alt="ThinkEx Logo"
+                  width={24}
+                  height={24}
+                  className="object-contain"
+                  priority
+                />
+              </div>
+            </Link>
+          )}
           <Tooltip>
             <TooltipTrigger asChild>
               <SidebarTrigger />
diff --git a/src/components/workspace-canvas/WorkspaceSidebar.tsx b/src/components/workspace-canvas/WorkspaceSidebar.tsx
index a025f42e..02eed241 100644
--- a/src/components/workspace-canvas/WorkspaceSidebar.tsx
+++ b/src/components/workspace-canvas/WorkspaceSidebar.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { MoreVertical, LogOut, Layers, User, Mail, Play, Users, Globe, Plus, Upload, Tag, Home } from "lucide-react";
+import { MoreVertical, LogOut, Layers, User, Mail, Play, Users, Globe, Plus, Upload, Tag } from "lucide-react";
 import { useState, useCallback, memo } from "react";
 import { useSession, signOut } from "@/lib/auth-client";
 import { useRouter, usePathname } from "next/navigation";
@@ -70,6 +70,7 @@ function WorkspaceSidebar({
   const router = useRouter();
   const pathname = usePathname();
   const isHomeRoute = pathname === "/home";
+  const isWorkspaceRoute = pathname.startsWith("/workspace");
 
   // Get workspace context
   const {
@@ -176,38 +177,30 @@ function WorkspaceSidebar({
 
   return (
     <>
-      <SidebarHeader className="bg-sidebar" data-tour="sidebar">
-        <div className="flex items-center justify-between py-2 px-3 min-h-[3rem] group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center">
-          <Link
-            href="/"
-            className="flex items-center gap-2 group-data-[collapsible=icon]:hidden transition-all duration-[400ms] group/logo cursor-pointer"
-            style={{
-              transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)'
-            }}
-          >
-            <div className="relative h-6 w-6 flex items-center justify-center transition-transform group-hover/logo:scale-105">
-              <Image
-                src="/newlogothinkex.svg"
-                alt="ThinkEx Logo"
-                width={24}
-                height={24}
-                className="object-contain"
-              />
-            </div>
-            <h2 className="text-lg font-medium whitespace-nowrap -mb-0.5">ThinkEx</h2>
-          </Link>
-          <Link
-            href="/home"
-            className={cn(
-              "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer group-data-[collapsible=icon]:hidden"
-            )}
-            aria-label="Home"
-          >
-            <Home className="h-4 w-4" />
-            <span className="sr-only">Home</span>
-          </Link>
-        </div>
-      </SidebarHeader>
+      {!isWorkspaceRoute && (
+        <SidebarHeader className="bg-sidebar" data-tour="sidebar">
+          <div className="flex items-center justify-between py-2 px-3 min-h-[3rem] group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center">
+            <Link
+              href="/"
+              className="flex items-center gap-2 group-data-[collapsible=icon]:hidden transition-all duration-[400ms] group/logo cursor-pointer"
+              style={{
+                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+              }}
+            >
+              <div className="relative h-6 w-6 flex items-center justify-center transition-transform group-hover/logo:scale-105">
+                <Image
+                  src="/newlogothinkex.svg"
+                  alt="ThinkEx Logo"
+                  width={24}
+                  height={24}
+                  className="object-contain"
+                />
+              </div>
+              <h2 className="text-lg font-medium whitespace-nowrap -mb-0.5">ThinkEx</h2>
+            </Link>
+          </div>
+        </SidebarHeader>
+      )}
 
       <SidebarContent className="overflow-hidden flex flex-col">
         {/* Workspaces Section */}

From 374f7035b3c9070e7334754a73c594a47c47e64e Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:15:43 -0500
Subject: [PATCH 2/5] feat: add embedded mode to Sidebar component

- Add embedded prop to Sidebar for layout-embedded positioning
- When embedded, sidebar uses absolute positioning within its container
- Sidebar wrapper becomes relative when embedded for proper positioning
- Enables sidebar to sit below headers in flex layouts
---
 src/components/ui/sidebar.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 23031e0e..58788204 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -149,6 +149,7 @@ function Sidebar({
   side = "left",
   variant = "sidebar",
   collapsible = "offcanvas",
+  embedded = false,
   className,
   children,
   ...props
@@ -156,6 +157,12 @@ function Sidebar({
   side?: "left" | "right"
   variant?: "sidebar" | "floating" | "inset"
   collapsible?: "offcanvas" | "icon" | "none"
+  /**
+   * When true, renders the sidebar container within normal layout flow
+   * (absolute inside its reserved "gap" column) instead of `fixed` to viewport.
+   * Useful when you want the sidebar to sit under a page header.
+   */
+  embedded?: boolean
 }) {
   const { isMobile, state, openMobile, setOpenMobile, open, setOpen } = useSidebar()
 
@@ -201,7 +208,10 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className={cn(
+        "group peer text-sidebar-foreground hidden md:block",
+        embedded && "relative h-full"
+      )}
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -212,7 +222,7 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          "relative w-(--sidebar-width) bg-transparent",
+          "relative h-full w-(--sidebar-width) bg-transparent",
           "group-data-[collapsible=offcanvas]:w-0",
           "group-data-[side=right]:rotate-180",
           variant === "floating" || variant === "inset"
@@ -223,7 +233,9 @@ function Sidebar({
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-[60] hidden h-svh w-(--sidebar-width) md:flex",
+          embedded
+            ? "absolute inset-y-0 z-[60] hidden w-(--sidebar-width) md:flex"
+            : "fixed inset-y-0 z-[60] hidden h-svh w-(--sidebar-width) md:flex",
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",

From ae379fcf6020cee146fa7cc189e68f0ad0727095 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:15:49 -0500
Subject: [PATCH 3/5] feat: restructure layout to place workspace header above
 sidebar

- Add workspaceHeader prop to DashboardLayout
- Move WorkspaceHeader rendering from WorkspaceSection to DashboardLayout
- Header now spans full width of sidebar + workspace canvas area
- Sidebar positioned below header using embedded mode
- Item panels start at top (full height) instead of below header
- Use nested ResizablePanelGroups: outer for chat, inner for workspace/panels
- Move workspace settings/share modals to dashboard/page.tsx
- Move PDF upload handler to dashboard/page.tsx
- Preserve all existing functionality (chat resizing, maximized mode, etc.)
---
 src/app/dashboard/page.tsx                    | 118 +++++++-
 src/components/layout/DashboardLayout.tsx     | 271 ++++++++++--------
 .../workspace-canvas/WorkspaceSection.tsx     |  57 ----
 3 files changed, 260 insertions(+), 186 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 0e408fd9..e51354a4 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { usePostHog } from 'posthog-js/react';
-import type { AgentState } from "@/lib/workspace-state/types";
+import type { AgentState, PdfData, WorkspaceWithState } from "@/lib/workspace-state/types";
 import { initialState } from "@/lib/workspace-state/state";
 import { useScrollHeader } from "@/hooks/ui/use-scroll-header";
 import { useKeyboardShortcuts } from "@/hooks/ui/use-keyboard-shortcuts";
@@ -22,6 +22,7 @@ import { useUIStore } from "@/lib/stores/ui-store";
 import { useWorkspaceStore } from "@/lib/stores/workspace-store";
 import { useSession } from "@/lib/auth-client";
 import { WorkspaceSection } from "@/components/workspace-canvas/WorkspaceSection";
+import WorkspaceHeader from "@/components/workspace-canvas/WorkspaceHeader";
 import { ModalManager } from "@/components/modals/ModalManager";
 import { AnonymousSignInPrompt } from "@/components/modals/AnonymousSignInPrompt";
 import { DashboardLayout } from "@/components/layout/DashboardLayout";
@@ -32,6 +33,8 @@ import { AnonymousSessionHandler, SidebarCoordinator } from "@/components/layout
 // import { OnboardingVideoDialog } from "@/components/onboarding/OnboardingVideoDialog";
 // import { useOnboardingStatus } from "@/hooks/user/use-onboarding-status";
 import { PdfEngineWrapper } from "@/components/pdf/PdfEngineWrapper";
+import WorkspaceSettingsModal from "@/components/workspace/WorkspaceSettingsModal";
+import ShareWorkspaceDialog from "@/components/workspace/ShareWorkspaceDialog";
 // Main dashboard content component
 function DashboardContent({
   currentWorkspaceId,
@@ -63,6 +66,7 @@ function DashboardContent({
   const {
     currentSlug,
     switchWorkspace,
+    workspaces,
   } = useWorkspaceContext();
 
   // Get save status from Zustand store
@@ -90,6 +94,15 @@ function DashboardContent({
   // Track sign-in prompt for anonymous users
   const [showSignInPrompt, setShowSignInPrompt] = useState(false);
 
+  // Workspace settings/share modals (lifted so header can open them)
+  const [showWorkspaceSettings, setShowWorkspaceSettings] = useState(false);
+  const [showWorkspaceShare, setShowWorkspaceShare] = useState(false);
+
+  const currentWorkspace = useMemo<WorkspaceWithState | null>(() => {
+    if (!currentWorkspaceId) return null;
+    return workspaces.find((w) => w.id === currentWorkspaceId) || null;
+  }, [currentWorkspaceId, workspaces]);
+
   // Show sign-in prompt after 13 events for anonymous users
   useEffect(() => {
     // Only show for anonymous users
@@ -302,6 +315,60 @@ function DashboardContent({
   // Text selection handlers - delegate to agent for intelligent processing
   const { handleCreateInstantNote, handleCreateCardFromSelections } = useTextSelectionAgent(operations);
 
+  const handleWorkspacePdfUpload = useCallback(
+    async (files: File[]) => {
+      if (!currentWorkspaceId) {
+        throw new Error("Workspace not available");
+      }
+
+      const uploadPromises = files.map(async (file) => {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        const uploadResponse = await fetch("/api/upload-file", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!uploadResponse.ok) {
+          throw new Error(`Failed to upload PDF: ${uploadResponse.statusText}`);
+        }
+
+        const { url: fileUrl, filename } = await uploadResponse.json();
+
+        return {
+          fileUrl,
+          filename: filename || file.name,
+          fileSize: file.size,
+          name: file.name.replace(/\\.pdf$/i, ""),
+        };
+      });
+
+      const uploadResults = await Promise.all(uploadPromises);
+      const pdfCardDefinitions = uploadResults.map((result) => {
+        const pdfData: Partial<PdfData> = {
+          fileUrl: result.fileUrl,
+          filename: result.filename,
+          fileSize: result.fileSize,
+        };
+
+        return {
+          type: "pdf" as const,
+          name: result.name,
+          initialData: pdfData,
+        };
+      });
+
+      operations.createItems(pdfCardDefinitions);
+    },
+    [operations, currentWorkspaceId]
+  );
+
+  const handleShowHistory = useCallback(() => {
+    posthog.capture("version-history-viewed", { workspace_id: currentWorkspaceId });
+    setShowVersionHistory(true);
+  }, [posthog, currentWorkspaceId, setShowVersionHistory]);
+
 
   return (
     <PdfEngineWrapper>
@@ -320,6 +387,39 @@ function DashboardContent({
         onWorkspaceSwitch={switchWorkspace}
         showCreateModal={showCreateWorkspaceModal}
         setShowCreateModal={setShowCreateWorkspaceModal}
+        workspaceHeader={
+          !showJsonView && !isChatMaximized && currentWorkspaceId && !isLoadingWorkspace ? (
+            <WorkspaceHeader
+              titleInputRef={titleInputRef}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              isSaving={isSaving}
+              lastSavedAt={lastSavedAt}
+              hasUnsavedChanges={hasUnsavedChanges}
+              onManualSave={() => {
+                void manualSave();
+              }}
+              currentWorkspaceId={currentWorkspaceId}
+              onShowHistory={handleShowHistory}
+              isDesktop={isDesktop}
+              isChatExpanded={isChatExpanded}
+              setIsChatExpanded={setIsChatExpanded}
+              workspaceName={currentWorkspaceTitle || state.globalTitle}
+              workspaceIcon={currentWorkspaceIcon}
+              workspaceColor={currentWorkspaceColor}
+              addItem={operations.createItem}
+              onPDFUpload={handleWorkspacePdfUpload}
+              setOpenModalItemId={setOpenModalItemId}
+              items={state.items || []}
+              onRenameFolder={(folderId, newName) => {
+                operations.updateItem(folderId, { name: newName });
+              }}
+              onOpenSettings={() => setShowWorkspaceSettings(true)}
+              onOpenShare={() => setShowWorkspaceShare(true)}
+              isItemPanelOpen={panels.length > 0}
+            />
+          ) : null
+        }
         isDesktop={isDesktop}
         isChatExpanded={isChatExpanded}
         isChatMaximized={isChatMaximized}
@@ -356,10 +456,7 @@ function DashboardContent({
             setIsChatExpanded={setIsChatExpanded}
             isItemPanelOpen={panels.length > 0}
             setOpenModalItemId={setOpenModalItemId}
-            onShowHistory={() => {
-              posthog.capture('version-history-viewed', { workspace_id: currentWorkspaceId });
-              setShowVersionHistory(true);
-            }}
+            onShowHistory={handleShowHistory}
             titleInputRef={titleInputRef as React.RefObject<HTMLInputElement>}
             operations={operations}
             scrollAreaRef={scrollAreaRef as React.RefObject<HTMLDivElement>}
@@ -370,6 +467,17 @@ function DashboardContent({
           />
         }
       />
+
+      <WorkspaceSettingsModal
+        workspace={currentWorkspace}
+        open={showWorkspaceSettings}
+        onOpenChange={setShowWorkspaceSettings}
+      />
+      <ShareWorkspaceDialog
+        workspace={currentWorkspace}
+        open={showWorkspaceShare}
+        onOpenChange={setShowWorkspaceShare}
+      />
     </PdfEngineWrapper>
   );
 }
diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx
index 2419736d..65995866 100644
--- a/src/components/layout/DashboardLayout.tsx
+++ b/src/components/layout/DashboardLayout.tsx
@@ -18,6 +18,9 @@ interface DashboardLayoutProps {
   showCreateModal: boolean;
   setShowCreateModal: (show: boolean) => void;
 
+  // Workspace header (should span sidebar + workspace area)
+  workspaceHeader?: React.ReactNode;
+
   // Chat state
   isDesktop: boolean;
   isChatExpanded: boolean;
@@ -46,6 +49,7 @@ export function DashboardLayout({
   onWorkspaceSwitch,
   showCreateModal,
   setShowCreateModal,
+  workspaceHeader,
   isDesktop,
   isChatExpanded,
   isChatMaximized,
@@ -87,142 +91,161 @@ export function DashboardLayout({
 
   const content = (
     <div className="h-screen flex w-full">
-      {/* Left Sidebar - Key forces remount on workspace change */}
-      <Sidebar side="left" variant="sidebar" collapsible="offcanvas" key={`sidebar-${currentWorkspaceId || 'none'}`}>
-        <WorkspaceSidebar
-          showJsonView={showJsonView}
-          setShowJsonView={setShowJsonView}
-          onWorkspaceSwitch={onWorkspaceSwitch}
-          showCreateModal={showCreateModal}
-          setShowCreateModal={setShowCreateModal}
-          isChatExpanded={effectiveChatExpanded}
-          setIsChatExpanded={setIsChatExpanded}
-        />
-      </Sidebar>
-
-      {/* Main Layout */}
-      <SidebarInset className="flex flex-col relative overflow-hidden">
-        <GridPattern
-          width={30}
-          height={30}
-          className="opacity-10"
-          id="dashboard-grid-pattern"
-        />
-        <div className="flex flex-1 overflow-hidden relative z-10">
-          {/* MAXIMIZED MODE: Show only chat (workspace completely hidden) */}
-          {effectiveChatMaximized ? (
-            <div className="relative flex-1 h-full">
-              <AssistantDropzone>
-                <div className="flex-1 h-full">
-                  <AssistantPanel
-                    key={`assistant-panel-${currentWorkspaceId}`}
-                    workspaceId={currentWorkspaceId || ""}
-                    setIsChatExpanded={setIsChatExpanded}
-                    isChatMaximized={effectiveChatMaximized}
-                    setIsChatMaximized={setIsChatMaximized}
-                    onSingleSelect={onSingleSelect}
-                    onMultiSelect={onMultiSelect}
-                  />
-                </div>
-              </AssistantDropzone>
+      <GridPattern
+        width={30}
+        height={30}
+        className="opacity-10"
+        id="dashboard-grid-pattern"
+      />
+
+      {/* MAXIMIZED MODE: Show only chat (workspace completely hidden) */}
+      {effectiveChatMaximized ? (
+        <div className="relative flex-1 h-full z-10">
+          <AssistantDropzone>
+            <div className="flex-1 h-full">
+              <AssistantPanel
+                key={`assistant-panel-${currentWorkspaceId}`}
+                workspaceId={currentWorkspaceId || ""}
+                setIsChatExpanded={setIsChatExpanded}
+                isChatMaximized={effectiveChatMaximized}
+                setIsChatMaximized={setIsChatMaximized}
+                onSingleSelect={onSingleSelect}
+                onMultiSelect={onMultiSelect}
+              />
             </div>
-          ) : (
-            /* NORMAL MODE: Resizable workspace + chat */
+          </AssistantDropzone>
+        </div>
+      ) : (
+        <ResizablePanelGroup
+          key={`layout-${effectiveChatExpanded ? "chat" : "no-chat"}`}
+          id={`layout-${effectiveChatExpanded ? "chat" : "no-chat"}`}
+          direction="horizontal"
+          className="flex-1 z-10"
+          onLayout={handlePanelLayout}
+        >
+          {/* Left Area: Split between workspace area (with header) and item panels */}
+          <ResizablePanel
+            id="left-area-panel"
+            order={1}
+            defaultSize={(() => {
+              if (!effectiveChatExpanded) return 100;
+              return 100 - PANEL_DEFAULTS.CHAT;
+            })()}
+            minSize={effectiveChatExpanded ? PANEL_DEFAULTS.WORKSPACE_MIN : 100}
+          >
             <ResizablePanelGroup
-              key={`layout-${effectiveChatExpanded ? 'chat' : 'no-chat'}`}
-              id={`layout-${effectiveChatExpanded ? 'chat' : 'no-chat'}`}
+              id="left-area-split"
               direction="horizontal"
-              className="flex-1"
-              onLayout={handlePanelLayout}
+              className="flex-1 h-full"
             >
-              {/* Workspace Panel - hidden when 2 item panels are open (split view) */}
-              {panels.length < 2 && (
-                <ResizablePanel
-                  id="workspace-panel"
-                  order={1}
-                  defaultSize={(() => {
-                    if (panels.length === 0) {
-                      return effectiveChatExpanded ? PANEL_DEFAULTS.WORKSPACE_WITH_CHAT : 100;
-                    }
-                    // 1 panel + workspace = split based on ratio (workspace gets the smaller share)
-                    const availableSpace = effectiveChatExpanded ? (100 - PANEL_DEFAULTS.CHAT_MIN) : 100;
-                    return availableSpace * (1 - PANEL_DEFAULTS.ITEM_PANEL_SPLIT_RATIO);
-                  })()}
-                  minSize={panels.length > 0 ? 20 : (effectiveChatExpanded ? PANEL_DEFAULTS.WORKSPACE_MIN : 100)}
-                >
-                  <WorkspaceCanvasDropzone>
-                    {workspaceSection}
-                  </WorkspaceCanvasDropzone>
-                </ResizablePanel>
-              )}
+              {/* Workspace area: header + sidebar + workspace canvas */}
+              <ResizablePanel
+                id="workspace-area-panel"
+                order={1}
+                defaultSize={(() => {
+                  if (panels.length === 0) {
+                    return 100;
+                  }
+                  if (panels.length >= 2) {
+                    return 0; // Hide workspace when 2 panels are open
+                  }
+                  return 100 * (1 - PANEL_DEFAULTS.ITEM_PANEL_SPLIT_RATIO);
+                })()}
+                minSize={panels.length >= 2 ? 0 : (panels.length > 0 ? 20 : 100)}
+              >
+                <div className="h-full flex flex-col relative overflow-hidden">
+                  {/* Header spans sidebar + workspace canvas (only render when a workspace exists) */}
+                  {!!currentWorkspaceId && workspaceHeader}
 
-              {/* Item Panels - dynamically rendered from array */}
-              {panels.map((panel, index) => {
-                // Extract key from the panel ReactNode (set by page.tsx as item.id)
-                const panelKey = React.isValidElement(panel) ? panel.key : `panel-${index}`;
-                return (
-                  <React.Fragment key={panelKey}>
-                    {/* Handle only needed when there's something before this panel */}
-                    {(index > 0 || panels.length < 2) && (
-                      <ResizableHandle
-                        id={`panel-handle-${panelKey}`}
-                        className="border-r border-sidebar-border"
-                      />
-                    )}
-                    <ResizablePanel
-                      id={`item-panel-${panelKey}`}
-                      order={panels.length >= 2 ? (1 + index) : (2 + index)}
-                      defaultSize={(() => {
-                        if (panels.length >= 2) {
-                          // 2 panels with chat = chat at min, panels split remaining
-                          return effectiveChatExpanded ? (100 - PANEL_DEFAULTS.CHAT_MIN) / 2 : 50;
-                        }
-                        // 1 panel + workspace with chat = chat at min, split remaining based on ratio
-                        const availableSpace = effectiveChatExpanded ? (100 - PANEL_DEFAULTS.CHAT_MIN) : 100;
-                        return availableSpace * PANEL_DEFAULTS.ITEM_PANEL_SPLIT_RATIO;
-                      })()}
-                      minSize={20}
+                  {/* Below header: sidebar + workspace content */}
+                  <div className="flex flex-1 overflow-hidden">
+                    <Sidebar
+                      side="left"
+                      variant="sidebar"
+                      collapsible="offcanvas"
+                      key={`sidebar-${currentWorkspaceId || "none"}`}
+                      embedded
                     >
-                      {panel}
-                    </ResizablePanel>
-                  </React.Fragment>
-                );
-              })}
-
-              {/* Chat Section - Only when expanded and workspace exists */}
-              {effectiveChatExpanded && (
-                <>
-                  <ResizableHandle
-                    id="workspace-chat-handle"
-                    className="border-r border-sidebar-border"
-                  />
-
-                  {/* Chat Panel */}
-                  <ResizablePanel
-                    id="chat-panel"
-                    order={panels.length >= 2 ? 3 : (2 + panels.length)}
-                    defaultSize={panels.length > 0 ? PANEL_DEFAULTS.CHAT_MIN : PANEL_DEFAULTS.CHAT}
-                    minSize={PANEL_DEFAULTS.CHAT_MIN}
-                    maxSize={PANEL_DEFAULTS.CHAT_MAX}
-                  >
-                    <AssistantDropzone>
-                      <AssistantPanel
-                        key={`assistant-panel-${currentWorkspaceId}`}
-                        workspaceId={currentWorkspaceId || ""}
+                      <WorkspaceSidebar
+                        showJsonView={showJsonView}
+                        setShowJsonView={setShowJsonView}
+                        onWorkspaceSwitch={onWorkspaceSwitch}
+                        showCreateModal={showCreateModal}
+                        setShowCreateModal={setShowCreateModal}
+                        isChatExpanded={effectiveChatExpanded}
                         setIsChatExpanded={setIsChatExpanded}
-                        isChatMaximized={effectiveChatMaximized}
-                        setIsChatMaximized={setIsChatMaximized}
-                        onSingleSelect={onSingleSelect}
-                        onMultiSelect={onMultiSelect}
                       />
-                    </AssistantDropzone>
-                  </ResizablePanel>
+                    </Sidebar>
+
+                    <SidebarInset className="flex flex-col relative overflow-hidden">
+                      <WorkspaceCanvasDropzone>{workspaceSection}</WorkspaceCanvasDropzone>
+                    </SidebarInset>
+                  </div>
+                </div>
+              </ResizablePanel>
+
+              {/* Item Panels - full height, start at top */}
+              {panels.length > 0 && (
+                <>
+                  {panels.length < 2 && (
+                    <ResizableHandle
+                      id="workspace-panel-handle"
+                      className="border-r border-sidebar-border"
+                    />
+                  )}
+                  {panels.map((panel, index) => {
+                    const panelKey = React.isValidElement(panel) ? panel.key : `panel-${index}`;
+                    return (
+                      <React.Fragment key={panelKey}>
+                        {panels.length >= 2 && index > 0 && (
+                          <ResizableHandle
+                            id={`panel-handle-${panelKey}`}
+                            className="border-r border-sidebar-border"
+                          />
+                        )}
+                        <ResizablePanel
+                          id={`item-panel-${panelKey}`}
+                          order={panels.length >= 2 ? 1 + index : 2}
+                          defaultSize={panels.length >= 2 ? 50 : 100 * PANEL_DEFAULTS.ITEM_PANEL_SPLIT_RATIO}
+                          minSize={20}
+                        >
+                          {panel}
+                        </ResizablePanel>
+                      </React.Fragment>
+                    );
+                  })}
                 </>
               )}
             </ResizablePanelGroup>
+          </ResizablePanel>
+
+          {/* Chat Section - Only when expanded and workspace exists */}
+          {effectiveChatExpanded && (
+            <>
+              <ResizableHandle id="workspace-chat-handle" className="border-r border-sidebar-border" />
+              <ResizablePanel
+                id="chat-panel"
+                order={2}
+                defaultSize={panels.length > 0 ? PANEL_DEFAULTS.CHAT_MIN : PANEL_DEFAULTS.CHAT}
+                minSize={PANEL_DEFAULTS.CHAT_MIN}
+                maxSize={PANEL_DEFAULTS.CHAT_MAX}
+              >
+                <AssistantDropzone>
+                  <AssistantPanel
+                    key={`assistant-panel-${currentWorkspaceId}`}
+                    workspaceId={currentWorkspaceId || ""}
+                    setIsChatExpanded={setIsChatExpanded}
+                    isChatMaximized={effectiveChatMaximized}
+                    setIsChatMaximized={setIsChatMaximized}
+                    onSingleSelect={onSingleSelect}
+                    onMultiSelect={onMultiSelect}
+                  />
+                </AssistantDropzone>
+              </ResizablePanel>
+            </>
           )}
-        </div>
-      </SidebarInset>
+        </ResizablePanelGroup>
+      )}
     </div>
   );
 
diff --git a/src/components/workspace-canvas/WorkspaceSection.tsx b/src/components/workspace-canvas/WorkspaceSection.tsx
index 16267824..b90bda40 100644
--- a/src/components/workspace-canvas/WorkspaceSection.tsx
+++ b/src/components/workspace-canvas/WorkspaceSection.tsx
@@ -3,7 +3,6 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import type { AgentState, Item, CardType, PdfData } from "@/lib/workspace-state/types";
 import type { WorkspaceOperations } from "@/hooks/workspace/use-workspace-operations";
-import WorkspaceHeader from "./WorkspaceHeader";
 import WorkspaceContent from "./WorkspaceContent";
 import SelectionActionBar from "./SelectionActionBar";
 import { WorkspaceSkeleton } from "@/components/workspace/WorkspaceSkeleton";
@@ -36,8 +35,6 @@ import {
 import { FileText, Folder, Upload, Play, MoreHorizontal, Globe, Brain } from "lucide-react";
 import { LuBook } from "react-icons/lu";
 import { PiCardsThreeBold } from "react-icons/pi";
-import WorkspaceSettingsModal from "@/components/workspace/WorkspaceSettingsModal";
-import ShareWorkspaceDialog from "@/components/workspace/ShareWorkspaceDialog";
 import { CreateYouTubeDialog } from "@/components/modals/CreateYouTubeDialog";
 import { useWorkspaceContext } from "@/contexts/WorkspaceContext";
 import type { WorkspaceWithState } from "@/lib/workspace-state/types";
@@ -188,8 +185,6 @@ export function WorkspaceSection({
   const [showMoveDialog, setShowMoveDialog] = useState(false);
 
   // Workspace settings and share modal state
-  const [showSettingsModal, setShowSettingsModal] = useState(false);
-  const [showShareDialog, setShowShareDialog] = useState(false);
   const [showYouTubeDialog, setShowYouTubeDialog] = useState(false);
 
   // Get workspace data from context
@@ -199,15 +194,6 @@ export function WorkspaceSection({
     return workspaces.find(w => w.id === currentWorkspaceId) || null;
   }, [currentWorkspaceId, workspaces]);
 
-  // Handlers for opening settings and share modals
-  const handleOpenSettings = useCallback(() => {
-    setShowSettingsModal(true);
-  }, []);
-
-  const handleOpenShare = useCallback(() => {
-    setShowShareDialog(true);
-  }, []);
-
   const handleYouTubeCreate = useCallback((url: string, name: string) => {
     if (addItem) {
       addItem("youtube", name, { url });
@@ -411,37 +397,6 @@ export function WorkspaceSection({
       data-tour="workspace-canvas"
       onMouseDown={handleWorkspaceMouseDown}
     >
-      {/* Search Bar (hidden in JSON view, when chat maximized, no workspace selected, or loading) - outside scrollable container */}
-      {!showJsonView && !isChatMaximized && currentWorkspaceId && !isLoadingWorkspace && (
-        <WorkspaceHeader
-          titleInputRef={titleInputRef}
-          searchQuery={searchQuery}
-          onSearchChange={onSearchChange}
-          isSaving={isSaving}
-          lastSavedAt={lastSavedAt}
-          hasUnsavedChanges={hasUnsavedChanges}
-          onManualSave={onManualSave}
-          currentWorkspaceId={currentWorkspaceId}
-          onShowHistory={onShowHistory}
-          isDesktop={isDesktop}
-          isChatExpanded={isChatExpanded}
-          setIsChatExpanded={setIsChatExpanded}
-          workspaceName={workspaceTitle || state.globalTitle}
-          workspaceIcon={workspaceIcon}
-          workspaceColor={workspaceColor}
-          addItem={addItem}
-          onPDFUpload={handlePDFUpload}
-
-          setOpenModalItemId={setOpenModalItemId}
-          activeFolderName={activeFolderName}
-          activeFolderColor={activeFolderColor}
-          items={state.items || []}
-          onRenameFolder={handleRenameFolder}
-          onOpenSettings={handleOpenSettings}
-          onOpenShare={handleOpenShare}
-          isItemPanelOpen={isItemPanelOpen}
-        />
-      )}
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <div ref={scrollAreaRef} className="flex-1 overflow-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent">
@@ -672,18 +627,6 @@ export function WorkspaceSection({
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-      {/* Workspace Settings Modal */}
-      <WorkspaceSettingsModal
-        workspace={currentWorkspace}
-        open={showSettingsModal}
-        onOpenChange={setShowSettingsModal}
-      />
-      {/* Share Workspace Dialog */}
-      <ShareWorkspaceDialog
-        workspace={currentWorkspace}
-        open={showShareDialog}
-        onOpenChange={setShowShareDialog}
-      />
       {/* YouTube Dialog */}
       <CreateYouTubeDialog
         open={showYouTubeDialog}

From 9712eef9f4e0ace70aa041a6884a7966703102d9 Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:33:39 -0500
Subject: [PATCH 4/5] fix: bugs

---
 src/app/dashboard/page.tsx                | 72 +++++++----------------
 src/components/layout/DashboardLayout.tsx |  9 ++-
 2 files changed, 28 insertions(+), 53 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index e51354a4..839c4c84 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -36,22 +36,23 @@ import { PdfEngineWrapper } from "@/components/pdf/PdfEngineWrapper";
 import WorkspaceSettingsModal from "@/components/workspace/WorkspaceSettingsModal";
 import ShareWorkspaceDialog from "@/components/workspace/ShareWorkspaceDialog";
 // Main dashboard content component
+interface DashboardContentProps {
+  currentWorkspace: WorkspaceWithState | null;
+  loadingWorkspaces: boolean;
+}
+
 function DashboardContent({
-  currentWorkspaceId,
+  currentWorkspace,
   loadingWorkspaces,
-  currentWorkspaceTitle,
-  currentWorkspaceIcon,
-  currentWorkspaceColor,
-}: {
-  currentWorkspaceId: string | null;
-  loadingWorkspaces: boolean;
-  currentWorkspaceTitle?: string;
-  currentWorkspaceIcon?: string | null;
-  currentWorkspaceColor?: string | null;
-}) {
+}: DashboardContentProps) {
   const posthog = usePostHog();
   const { data: session } = useSession();
 
+  const currentWorkspaceId = currentWorkspace?.id || null;
+  const currentWorkspaceTitle = currentWorkspace?.name;
+  const currentWorkspaceIcon = currentWorkspace?.icon;
+  const currentWorkspaceColor = currentWorkspace?.color;
+
   // Check onboarding status
   // const { shouldShowOnboarding, isLoading: isLoadingOnboarding } = useOnboardingStatus();
   // const [showOnboardingDialog, setShowOnboardingDialog] = useState(false);
@@ -66,7 +67,6 @@ function DashboardContent({
   const {
     currentSlug,
     switchWorkspace,
-    workspaces,
   } = useWorkspaceContext();
 
   // Get save status from Zustand store
@@ -98,11 +98,6 @@ function DashboardContent({
   const [showWorkspaceSettings, setShowWorkspaceSettings] = useState(false);
   const [showWorkspaceShare, setShowWorkspaceShare] = useState(false);
 
-  const currentWorkspace = useMemo<WorkspaceWithState | null>(() => {
-    if (!currentWorkspaceId) return null;
-    return workspaces.find((w) => w.id === currentWorkspaceId) || null;
-  }, [currentWorkspaceId, workspaces]);
-
   // Show sign-in prompt after 13 events for anonymous users
   useEffect(() => {
     // Only show for anonymous users
@@ -141,7 +136,7 @@ function DashboardContent({
   const manualSave = useCallback(async () => {
     posthog.capture('manual-save-clicked', { workspace_id: currentWorkspaceId });
     updateLastSaved(new Date());
-  }, [updateLastSaved, currentWorkspaceId]);
+  }, [updateLastSaved, currentWorkspaceId, posthog]);
 
   // Update save status based on mutation status
   useEffect(() => {
@@ -340,7 +335,7 @@ function DashboardContent({
           fileUrl,
           filename: filename || file.name,
           fileSize: file.size,
-          name: file.name.replace(/\\.pdf$/i, ""),
+          name: file.name.replace(/\.pdf$/i, ""),
         };
       });
 
@@ -494,33 +489,13 @@ export function DashboardPage() {
     loadingWorkspaces,
   } = useWorkspaceContext();
 
-  // Derive workspace ID directly from slug and sync to store
-  const currentWorkspaceId = useMemo(() => {
+  // Find current workspace from slug
+  const currentWorkspace = useMemo(() => {
     if (!currentSlug) return null;
-    const workspace = workspaces.find(w => w.slug === currentSlug);
-    return workspace?.id || null;
+    return workspaces.find(w => w.slug === currentSlug) || null;
   }, [currentSlug, workspaces]);
 
-  // Get current workspace title for JSON download filename
-  const currentWorkspaceTitle = useMemo(() => {
-    if (!currentSlug) return undefined;
-    const workspace = workspaces.find(w => w.slug === currentSlug);
-    return workspace?.name || undefined;
-  }, [currentSlug, workspaces]);
-
-  // Get current workspace icon for header breadcrumbs
-  const currentWorkspaceIcon = useMemo(() => {
-    if (!currentSlug) return null;
-    const workspace = workspaces.find(w => w.slug === currentSlug);
-    return workspace?.icon || null;
-  }, [currentSlug, workspaces]);
-
-  // Get current workspace color for header breadcrumbs
-  const currentWorkspaceColor = useMemo(() => {
-    if (!currentSlug) return null;
-    const workspace = workspaces.find(w => w.slug === currentSlug);
-    return workspace?.color || null;
-  }, [currentSlug, workspaces]);
+  const currentWorkspaceId = currentWorkspace?.id || null;
 
   // Sync workspace ID to store
   const setCurrentWorkspaceId = useWorkspaceStore((state) => state.setCurrentWorkspaceId);
@@ -532,10 +507,10 @@ export function DashboardPage() {
   const lastTrackedWorkspaceIdRef = useRef<string | null>(null);
   useEffect(() => {
     if (!currentWorkspaceId) return;
-    
+
     // Only track if this is a different workspace than last time
     if (lastTrackedWorkspaceIdRef.current === currentWorkspaceId) return;
-    
+
     // Track the open
     fetch(`/api/workspaces/${currentWorkspaceId}/track-open`, {
       method: 'POST',
@@ -543,7 +518,7 @@ export function DashboardPage() {
       // Silently fail - tracking is not critical
       console.error('Failed to track workspace open:', error);
     });
-    
+
     lastTrackedWorkspaceIdRef.current = currentWorkspaceId;
   }, [currentWorkspaceId]);
 
@@ -567,11 +542,8 @@ export function DashboardPage() {
 
   return (
     <DashboardContent
-      currentWorkspaceId={currentWorkspaceId}
+      currentWorkspace={currentWorkspace}
       loadingWorkspaces={loadingWorkspaces}
-      currentWorkspaceTitle={currentWorkspaceTitle}
-      currentWorkspaceIcon={currentWorkspaceIcon}
-      currentWorkspaceColor={currentWorkspaceColor}
     />
   );
 }
diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx
index 65995866..9b681e97 100644
--- a/src/components/layout/DashboardLayout.tsx
+++ b/src/components/layout/DashboardLayout.tsx
@@ -134,14 +134,17 @@ export function DashboardLayout({
             minSize={effectiveChatExpanded ? PANEL_DEFAULTS.WORKSPACE_MIN : 100}
           >
             <ResizablePanelGroup
-              id="left-area-split"
+              id={`left-area-split-${panels.length}`}
+              // Force re-mount when panel count changes to ensure defaultSize is respected
+              // and to prevent "Panel data not found" errors from react-resizable-panels
+              key={`left-area-split-${panels.length}`}
               direction="horizontal"
               className="flex-1 h-full"
             >
               {/* Workspace area: header + sidebar + workspace canvas */}
               <ResizablePanel
                 id="workspace-area-panel"
-                order={1}
+                order={0}
                 defaultSize={(() => {
                   if (panels.length === 0) {
                     return 100;
@@ -205,7 +208,7 @@ export function DashboardLayout({
                         )}
                         <ResizablePanel
                           id={`item-panel-${panelKey}`}
-                          order={panels.length >= 2 ? 1 + index : 2}
+                          order={index + 1}
                           defaultSize={panels.length >= 2 ? 50 : 100 * PANEL_DEFAULTS.ITEM_PANEL_SPLIT_RATIO}
                           minSize={20}
                         >

From 9638c98581570314bb9a32deaad488fbf9259e1a Mon Sep 17 00:00:00 2001
From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com>
Date: Wed, 28 Jan 2026 18:38:04 -0500
Subject: [PATCH 5/5] fix: navigation

---
 src/components/workspace-canvas/WorkspaceSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/workspace-canvas/WorkspaceSidebar.tsx b/src/components/workspace-canvas/WorkspaceSidebar.tsx
index 02eed241..259ca5e6 100644
--- a/src/components/workspace-canvas/WorkspaceSidebar.tsx
+++ b/src/components/workspace-canvas/WorkspaceSidebar.tsx
@@ -181,7 +181,7 @@ function WorkspaceSidebar({
         <SidebarHeader className="bg-sidebar" data-tour="sidebar">
           <div className="flex items-center justify-between py-2 px-3 min-h-[3rem] group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center">
             <Link
-              href="/"
+              href={isHomeRoute ? "/home" : "/"}
               className="flex items-center gap-2 group-data-[collapsible=icon]:hidden transition-all duration-[400ms] group/logo cursor-pointer"
               style={{
                 transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",