feat(desktop): v2 chrome — sidebar-hosted toggle/nav, sidebar OpenIn,…

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarHeader/DashboardSidebarHeader.tsx

@@ -20,7 +20,10 @@ import {
 } from "react-icons/lu";
 import { GATED_FEATURES, usePaywall } from "renderer/components/Paywall";
 import { useHotkeyDisplay } from "renderer/hotkeys";
+import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useFolderFirstImport } from "renderer/routes/_authenticated/_dashboard/components/AddRepositoryModals/hooks/useFolderFirstImport";
+import { NavigationControls } from "renderer/routes/_authenticated/_dashboard/components/NavigationControls";
+import { SidebarToggle } from "renderer/routes/_authenticated/_dashboard/components/SidebarToggle";
 import { OrganizationDropdown } from "renderer/routes/_authenticated/_dashboard/components/TopBar/components/OrganizationDropdown";
 import { useTasksFilterStore } from "renderer/routes/_authenticated/_dashboard/tasks/stores/tasks-filter-state";
 import { STROKE_WIDTH_THICK } from "renderer/screens/main/components/WorkspaceSidebar/constants";
@@ -59,6 +62,9 @@ export function DashboardSidebarHeader({
 		}
 	};
 	const shortcutText = useHotkeyDisplay("NEW_WORKSPACE").text;
+	const { data: platform } = electronTrpc.window.getPlatform.useQuery();
+	// Default to Mac while loading so we don't briefly cover the traffic lights.
+	const isMac = platform === undefined || platform === "darwin";
 	const matchRoute = useMatchRoute();
 	const { gateFeature } = usePaywall();
 	const isWorkspacesListOpen = !!matchRoute({ to: "/v2-workspaces" });
@@ -203,6 +209,16 @@ export function DashboardSidebarHeader({
 
 	return (
 		<div className="flex flex-col gap-1 border-b border-border px-2 pt-2 pb-2">
+			{/* -mx-2 cancels the parent's px-2 so this row owns its own
+			    horizontal inset — keeps traffic-light alignment matching the
+			    TopBar's 80px pad regardless of parent padding changes. */}
+			<div
+				className="drag -mx-2 flex h-8 items-center gap-1.5"
+				style={{ paddingLeft: isMac ? "80px" : "8px" }}
+			>
+				<SidebarToggle />
+				<NavigationControls />
+			</div>
 			<OrganizationDropdown variant="expanded" />
 
 			<button

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/TopBar.tsx

@@ -4,15 +4,15 @@ import { useIsV2CloudEnabled } from "renderer/hooks/useIsV2CloudEnabled";
 import { useOnlineStatus } from "renderer/hooks/useOnlineStatus";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import { getWorkspaceDisplayName } from "renderer/lib/getWorkspaceDisplayName";
-import { NavigationControls } from "./components/NavigationControls";
+import { useWorkspaceSidebarStore } from "renderer/stores/workspace-sidebar-state";
+import { NavigationControls } from "../NavigationControls";
+import { SidebarToggle } from "../SidebarToggle";
 import { OpenInMenuButton } from "./components/OpenInMenuButton";
 import { OrganizationDropdown } from "./components/OrganizationDropdown";
 import { ResourceConsumption } from "./components/ResourceConsumption";
 import { RightSidebarToggle } from "./components/RightSidebarToggle";
 import { SearchBarTrigger } from "./components/SearchBarTrigger";
-import { SidebarToggle } from "./components/SidebarToggle";
 import { V2WorkspaceOpenInButton } from "./components/V2WorkspaceOpenInButton";
-import { V2WorkspaceSearchBarTrigger } from "./components/V2WorkspaceSearchBarTrigger";
 import { WindowControls } from "./components/WindowControls";
 
 export function TopBar() {
@@ -31,42 +31,50 @@ export function TopBar() {
 	);
 	const isOnline = useOnlineStatus();
 	const { isV2CloudEnabled } = useIsV2CloudEnabled();
+	const isSidebarOpen = useWorkspaceSidebarStore((s) => s.isOpen);
+	const isSidebarCollapsed = useWorkspaceSidebarStore((s) => s.isCollapsed());
 	// Default to Mac layout while loading to avoid overlap with traffic lights
 	const isMac = platform === undefined || platform === "darwin";
+	// In v2 the expanded sidebar lives outside the TopBar column, so the TopBar
+	// starts to the right of it and the sidebar header hosts the traffic-light
+	// pad + SidebarToggle. When the sidebar is closed or collapsed (too narrow
+	// for the pad), bring the toggle and pad back into the TopBar.
+	const sidebarHostsChrome =
+		isV2CloudEnabled && isSidebarOpen && !isSidebarCollapsed;
 
 	return (
 		<div className="drag gap-2 h-12 w-full flex items-center justify-between bg-muted/45 border-b border-border relative dark:bg-muted/35">
 			<div
 				className="flex items-center gap-1.5 h-full"
 				style={{
-					paddingLeft: isMac ? "88px" : "16px",
+					paddingLeft: isMac && !sidebarHostsChrome ? "80px" : "16px",
 				}}
 			>
-				<SidebarToggle />
-				<NavigationControls />
-				<ResourceConsumption />
+				{!sidebarHostsChrome && (
+					<>
+						<SidebarToggle />
+						<NavigationControls />
+					</>
+				)}
+				{!isV2CloudEnabled && <ResourceConsumption />}
 			</div>
 
-			{isV2WorkspaceRoute ? (
-				<V2WorkspaceSearchBarTrigger workspaceId={v2WorkspaceId} />
-			) : (
-				workspaceId && (
-					<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-						<div className="pointer-events-auto">
-							<SearchBarTrigger
-								workspaceName={
-									workspace
-										? getWorkspaceDisplayName(
-												workspace.name,
-												workspace.type,
-												workspace.project?.name,
-											)
-										: undefined
-								}
-							/>
-						</div>
+			{!isV2WorkspaceRoute && workspaceId && (
+				<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+					<div className="pointer-events-auto">
+						<SearchBarTrigger
+							workspaceName={
+								workspace
+									? getWorkspaceDisplayName(
+											workspace.name,
+											workspace.type,
+											workspace.project?.name,
+										)
+									: undefined
+							}
+						/>
 					</div>
-				)
+				</div>
 			)}
 
 			<div className="flex items-center gap-3 h-full pr-4 shrink-0">

apps/desktop/src/renderer/routes/_authenticated/_dashboard/layout.tsx

@@ -93,36 +93,46 @@ function DashboardLayout() {
 		{ enabled: !!currentWorkspaceId },
 	);
 
+	const sidebarPanel = isWorkspaceSidebarOpen && (
+		<ResizablePanel
+			width={workspaceSidebarWidth}
+			onWidthChange={setWorkspaceSidebarWidth}
+			isResizing={isWorkspaceSidebarResizing}
+			onResizingChange={setWorkspaceSidebarIsResizing}
+			minWidth={COLLAPSED_WORKSPACE_SIDEBAR_WIDTH}
+			maxWidth={MAX_WORKSPACE_SIDEBAR_WIDTH}
+			handleSide="right"
+			clampWidth={false}
+			onDoubleClickHandle={() =>
+				setWorkspaceSidebarWidth(DEFAULT_WORKSPACE_SIDEBAR_WIDTH)
+			}
+		>
+			{isV2CloudEnabled ? (
+				<DashboardSidebar isCollapsed={isWorkspaceSidebarCollapsed()} />
+			) : (
+				<WorkspaceSidebar
+					isCollapsed={isWorkspaceSidebarCollapsed()}
+					activeProjectId={currentWorkspace?.projectId ?? null}
+					activeProjectName={currentWorkspace?.project?.name ?? null}
+				/>
+			)}
+		</ResizablePanel>
+	);
+
+	// Only lift the sidebar out of the TopBar column when v2 + expanded.
+	// Collapsed/closed sidebars stay inside so the TopBar runs full-width.
+	const sidebarOutsideColumn =
+		isV2CloudEnabled &&
+		isWorkspaceSidebarOpen &&
+		!isWorkspaceSidebarCollapsed();
+
 	return (
 		<div className="flex h-full w-full overflow-hidden">
+			{sidebarOutsideColumn && sidebarPanel}
 			<div className="flex flex-1 flex-col min-w-0 min-h-0">
 				<TopBar />
 				<div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
-					{isWorkspaceSidebarOpen && (
-						<ResizablePanel
-							width={workspaceSidebarWidth}
-							onWidthChange={setWorkspaceSidebarWidth}
-							isResizing={isWorkspaceSidebarResizing}
-							onResizingChange={setWorkspaceSidebarIsResizing}
-							minWidth={COLLAPSED_WORKSPACE_SIDEBAR_WIDTH}
-							maxWidth={MAX_WORKSPACE_SIDEBAR_WIDTH}
-							handleSide="right"
-							clampWidth={false}
-							onDoubleClickHandle={() =>
-								setWorkspaceSidebarWidth(DEFAULT_WORKSPACE_SIDEBAR_WIDTH)
-							}
-						>
-							{isV2CloudEnabled ? (
-								<DashboardSidebar isCollapsed={isWorkspaceSidebarCollapsed()} />
-							) : (
-								<WorkspaceSidebar
-									isCollapsed={isWorkspaceSidebarCollapsed()}
-									activeProjectId={currentWorkspace?.projectId ?? null}
-									activeProjectName={currentWorkspace?.project?.name ?? null}
-								/>
-							)}
-						</ResizablePanel>
-					)}
+					{!sidebarOutsideColumn && sidebarPanel}
 					<div className="flex flex-1 min-h-0 min-w-0">
 						<Outlet />
 					</div>