From a73988fb8f9246c74d8f0c1c05b8aa3094a6048a Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Thu, 7 May 2026 14:57:27 -0700
Subject: [PATCH] feat(desktop): show pick-workspace prompt on cross-version
 routes

When the active version (v1 vs v2) doesn't match the current workspace
route, swap the content Outlet for a "Pick a workspace" placeholder so
users land on the version-correct sidebar instead of an empty/broken page.
---
 .../CrossVersionMismatchState.tsx             | 23 +++++++++++++++++++
 .../CrossVersionMismatchState/index.ts        |  1 +
 .../_authenticated/_dashboard/layout.tsx      | 12 +++++++++-
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/CrossVersionMismatchState.tsx
 create mode 100644 apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/index.ts

diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/CrossVersionMismatchState.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/CrossVersionMismatchState.tsx
new file mode 100644
index 00000000000..75547a812dc
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/CrossVersionMismatchState.tsx
@@ -0,0 +1,23 @@
+import { ArrowLeftFromLine } from "lucide-react";
+
+export function CrossVersionMismatchState() {
+	return (
+		<div className="flex h-full w-full items-center justify-center p-6">
+			<div className="flex w-full max-w-sm flex-col items-start gap-5">
+				<ArrowLeftFromLine
+					className="size-5 text-muted-foreground"
+					strokeWidth={1.5}
+					aria-hidden="true"
+				/>
+				<div className="flex flex-col gap-1.5">
+					<h1 className="text-[15px] font-medium tracking-tight text-foreground select-text cursor-text">
+						Pick a workspace
+					</h1>
+					<p className="text-[13px] leading-relaxed text-muted-foreground select-text cursor-text">
+						Select a workspace from the sidebar to get started.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/index.ts
new file mode 100644
index 00000000000..c4826b7166d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/CrossVersionMismatchState/index.ts
@@ -0,0 +1 @@
+export { CrossVersionMismatchState } from "./CrossVersionMismatchState";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/layout.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/layout.tsx
index 38d69e2f6d9..1a6151c3fa6 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/layout.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/layout.tsx
@@ -22,6 +22,7 @@ import {
 	useWorkspaceSidebarStore,
 } from "renderer/stores/workspace-sidebar-state";
 import { AddRepositoryModals } from "./components/AddRepositoryModals";
+import { CrossVersionMismatchState } from "./components/CrossVersionMismatchState";
 import { TopBar } from "./components/TopBar";
 
 export const Route = createFileRoute("/_authenticated/_dashboard")({
@@ -41,6 +42,15 @@ function DashboardLayout() {
 	});
 	const currentWorkspaceId =
 		currentWorkspaceMatch !== false ? currentWorkspaceMatch.workspaceId : null;
+	const v2WorkspaceMatch = matchRoute({
+		to: "/v2-workspace/$workspaceId",
+		fuzzy: true,
+	});
+	const onV1WorkspaceRoute = currentWorkspaceMatch !== false;
+	const onV2WorkspaceRoute = v2WorkspaceMatch !== false;
+	const versionMismatch =
+		(isV2CloudEnabled && onV1WorkspaceRoute) ||
+		(!isV2CloudEnabled && onV2WorkspaceRoute);
 
 	const { data: currentWorkspace } = electronTrpc.workspaces.get.useQuery(
 		{ id: currentWorkspaceId ?? "" },
@@ -134,7 +144,7 @@ function DashboardLayout() {
 				<div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
 					{!sidebarOutsideColumn && sidebarPanel}
 					<div className="flex flex-1 min-h-0 min-w-0">
-						<Outlet />
+						{versionMismatch ? <CrossVersionMismatchState /> : <Outlet />}
 					</div>
 				</div>
 			</div>