From 56023ccf1440f545ebb4f90d117e493eb2342473 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 9 Mar 2026 09:02:56 -0700
Subject: [PATCH 1/4] Open folder picker immediately on desktop Electron

- add `shouldOpenProjectFolderPickerImmediately` to centralize Sidebar behavior
- trigger folder browse directly when adding a project in desktop Electron
- keep manual path entry for mobile layouts and non-Electron, with tests for all cases
---
 apps/web/src/components/Sidebar.logic.test.ts | 31 ++++++++++++++++
 apps/web/src/components/Sidebar.logic.ts      |  6 ++++
 apps/web/src/components/Sidebar.tsx           | 35 ++++++++++++++-----
 3 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/Sidebar.logic.test.ts
 create mode 100644 apps/web/src/components/Sidebar.logic.ts

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
new file mode 100644
index 000000000000..5bf53f25fd27
--- /dev/null
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
+
+describe("shouldOpenProjectFolderPickerImmediately", () => {
+  it("opens the folder picker immediately in Electron on desktop", () => {
+    expect(
+      shouldOpenProjectFolderPickerImmediately({
+        isElectron: true,
+        isMobile: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("keeps manual project entry on mobile Electron layouts", () => {
+    expect(
+      shouldOpenProjectFolderPickerImmediately({
+        isElectron: true,
+        isMobile: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("keeps manual project entry outside Electron", () => {
+    expect(
+      shouldOpenProjectFolderPickerImmediately({
+        isElectron: false,
+        isMobile: false,
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
new file mode 100644
index 000000000000..9fa649bc0171
--- /dev/null
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -0,0 +1,6 @@
+export function shouldOpenProjectFolderPickerImmediately(input: {
+  isElectron: boolean;
+  isMobile: boolean;
+}): boolean {
+  return input.isElectron && !input.isMobile;
+}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 894fde25e916..67d5feccb007 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -32,6 +32,7 @@ import { type Thread } from "../types";
 import { derivePendingApprovals } from "../session-logic";
 import { gitRemoveWorktreeMutationOptions, gitStatusQueryOptions } from "../lib/gitReactQuery";
 import { serverConfigQueryOptions } from "../lib/serverReactQuery";
+import { useMediaQuery } from "../hooks/useMediaQuery";
 import { readNativeApi } from "../nativeApi";
 import { type DraftThreadEnvMode, useComposerDraftStore } from "../composerDraftStore";
 import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
@@ -49,6 +50,7 @@ import {
 } from "./desktopUpdate.logic";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
+import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import {
@@ -266,6 +268,7 @@ function ProjectFavicon({ cwd }: { cwd: string }) {
 }
 
 export default function Sidebar() {
+  const isMobile = useMediaQuery("(max-width: 767px)");
   const projects = useStore((store) => store.projects);
   const threads = useStore((store) => store.threads);
   const markThreadUnread = useStore((store) => store.markThreadUnread);
@@ -312,6 +315,11 @@ export default function Sidebar() {
   const renamingCommittedRef = useRef(false);
   const renamingInputRef = useRef<HTMLInputElement | null>(null);
   const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null);
+  const shouldBrowseForProjectImmediately = shouldOpenProjectFolderPickerImmediately({
+    isElectron,
+    isMobile,
+  });
+  const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately;
   const pendingApprovalByThreadId = useMemo(() => {
     const map = new Map<ThreadId, boolean>();
     for (const thread of threads) {
@@ -550,12 +558,21 @@ export default function Sidebar() {
     }
     if (pickedPath) {
       await addProjectFromPath(pickedPath);
-    } else {
+    } else if (!shouldBrowseForProjectImmediately) {
       addProjectInputRef.current?.focus();
     }
     setIsPickingFolder(false);
   };
 
+  const handleStartAddProject = () => {
+    setAddProjectError(null);
+    if (shouldBrowseForProjectImmediately) {
+      void handlePickFolder();
+      return;
+    }
+    setAddingProject((prev) => !prev);
+  };
+
   const cancelRename = useCallback(() => {
     setRenamingThreadId(null);
     renamingInputRef.current = null;
@@ -1075,21 +1092,23 @@ export default function Sidebar() {
                   <button
                     type="button"
                     aria-label="Add project"
+                    aria-pressed={shouldShowProjectPathEntry}
                     className="inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
-                    onClick={() => {
-                      setAddingProject((prev) => !prev);
-                      setAddProjectError(null);
-                    }}
+                    onClick={handleStartAddProject}
                   />
                 }
               >
-                <PlusIcon className="size-3.5" />
+                <PlusIcon
+                  className={`size-3.5 transition-transform duration-150 ${
+                    shouldShowProjectPathEntry ? "rotate-45" : "rotate-0"
+                  }`}
+                />
               </TooltipTrigger>
               <TooltipPopup side="right">Add project</TooltipPopup>
             </Tooltip>
           </div>
 
-          {addingProject && (
+          {shouldShowProjectPathEntry && (
             <div className="mb-2 px-1">
               {isElectron && (
                 <button
@@ -1415,7 +1434,7 @@ export default function Sidebar() {
             })}
           </SidebarMenu>
 
-          {projects.length === 0 && !addingProject && (
+          {projects.length === 0 && !shouldShowProjectPathEntry && (
             <div className="px-2 pt-4 text-center text-xs text-muted-foreground/60">
               No projects yet
             </div>

From 0bc5934a2e730d2f872b66284aa5045e5b897691 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 9 Mar 2026 09:10:37 -0700
Subject: [PATCH 2/4] Open project folder picker immediately in Electron

- remove mobile-width gating from sidebar project picker behavior
- simplify picker logic/tests to depend only on Electron runtime
---
 apps/web/src/components/Sidebar.logic.test.ts | 15 ++++-----------
 apps/web/src/components/Sidebar.logic.ts      |  3 +--
 apps/web/src/components/Sidebar.tsx           |  3 ---
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
index 5bf53f25fd27..6caeffed31bd 100644
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ b/apps/web/src/components/Sidebar.logic.test.ts
@@ -2,30 +2,23 @@ import { describe, expect, it } from "vitest";
 import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
 
 describe("shouldOpenProjectFolderPickerImmediately", () => {
-  it("opens the folder picker immediately in Electron on desktop", () => {
+  it("opens the folder picker immediately in Electron", () => {
     expect(
       shouldOpenProjectFolderPickerImmediately({
         isElectron: true,
-        isMobile: false,
       }),
     ).toBe(true);
   });
 
-  it("keeps manual project entry on mobile Electron layouts", () => {
+  it("still opens the folder picker immediately for mobile-width Electron layouts", () => {
     expect(
       shouldOpenProjectFolderPickerImmediately({
         isElectron: true,
-        isMobile: true,
       }),
-    ).toBe(false);
+    ).toBe(true);
   });
 
   it("keeps manual project entry outside Electron", () => {
-    expect(
-      shouldOpenProjectFolderPickerImmediately({
-        isElectron: false,
-        isMobile: false,
-      }),
-    ).toBe(false);
+    expect(shouldOpenProjectFolderPickerImmediately({ isElectron: false })).toBe(false);
   });
 });
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
index 9fa649bc0171..95346241e2d4 100644
--- a/apps/web/src/components/Sidebar.logic.ts
+++ b/apps/web/src/components/Sidebar.logic.ts
@@ -1,6 +1,5 @@
 export function shouldOpenProjectFolderPickerImmediately(input: {
   isElectron: boolean;
-  isMobile: boolean;
 }): boolean {
-  return input.isElectron && !input.isMobile;
+  return input.isElectron;
 }
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 67d5feccb007..6421343827b4 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -32,7 +32,6 @@ import { type Thread } from "../types";
 import { derivePendingApprovals } from "../session-logic";
 import { gitRemoveWorktreeMutationOptions, gitStatusQueryOptions } from "../lib/gitReactQuery";
 import { serverConfigQueryOptions } from "../lib/serverReactQuery";
-import { useMediaQuery } from "../hooks/useMediaQuery";
 import { readNativeApi } from "../nativeApi";
 import { type DraftThreadEnvMode, useComposerDraftStore } from "../composerDraftStore";
 import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
@@ -268,7 +267,6 @@ function ProjectFavicon({ cwd }: { cwd: string }) {
 }
 
 export default function Sidebar() {
-  const isMobile = useMediaQuery("(max-width: 767px)");
   const projects = useStore((store) => store.projects);
   const threads = useStore((store) => store.threads);
   const markThreadUnread = useStore((store) => store.markThreadUnread);
@@ -317,7 +315,6 @@ export default function Sidebar() {
   const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null);
   const shouldBrowseForProjectImmediately = shouldOpenProjectFolderPickerImmediately({
     isElectron,
-    isMobile,
   });
   const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately;
   const pendingApprovalByThreadId = useMemo(() => {

From 70c4035b3cbdbc0d23230f73c9b407e31e4c93b5 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 9 Mar 2026 09:14:18 -0700
Subject: [PATCH 3/4] Inline Electron project picker check in Sidebar

- Replace `shouldOpenProjectFolderPickerImmediately` with direct `isElectron` usage
- Remove obsolete `Sidebar.logic.ts` and its tests
---
 apps/web/src/components/Sidebar.logic.test.ts | 24 -------------------
 apps/web/src/components/Sidebar.logic.ts      |  5 ----
 apps/web/src/components/Sidebar.tsx           |  5 +---
 3 files changed, 1 insertion(+), 33 deletions(-)
 delete mode 100644 apps/web/src/components/Sidebar.logic.test.ts
 delete mode 100644 apps/web/src/components/Sidebar.logic.ts

diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts
deleted file mode 100644
index 6caeffed31bd..000000000000
--- a/apps/web/src/components/Sidebar.logic.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
-
-describe("shouldOpenProjectFolderPickerImmediately", () => {
-  it("opens the folder picker immediately in Electron", () => {
-    expect(
-      shouldOpenProjectFolderPickerImmediately({
-        isElectron: true,
-      }),
-    ).toBe(true);
-  });
-
-  it("still opens the folder picker immediately for mobile-width Electron layouts", () => {
-    expect(
-      shouldOpenProjectFolderPickerImmediately({
-        isElectron: true,
-      }),
-    ).toBe(true);
-  });
-
-  it("keeps manual project entry outside Electron", () => {
-    expect(shouldOpenProjectFolderPickerImmediately({ isElectron: false })).toBe(false);
-  });
-});
diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts
deleted file mode 100644
index 95346241e2d4..000000000000
--- a/apps/web/src/components/Sidebar.logic.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export function shouldOpenProjectFolderPickerImmediately(input: {
-  isElectron: boolean;
-}): boolean {
-  return input.isElectron;
-}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 6421343827b4..af8255a272dd 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -49,7 +49,6 @@ import {
 } from "./desktopUpdate.logic";
 import { Alert, AlertAction, AlertDescription, AlertTitle } from "./ui/alert";
 import { Button } from "./ui/button";
-import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 import {
@@ -313,9 +312,7 @@ export default function Sidebar() {
   const renamingCommittedRef = useRef(false);
   const renamingInputRef = useRef<HTMLInputElement | null>(null);
   const [desktopUpdateState, setDesktopUpdateState] = useState<DesktopUpdateState | null>(null);
-  const shouldBrowseForProjectImmediately = shouldOpenProjectFolderPickerImmediately({
-    isElectron,
-  });
+  const shouldBrowseForProjectImmediately = isElectron;
   const shouldShowProjectPathEntry = addingProject && !shouldBrowseForProjectImmediately;
   const pendingApprovalByThreadId = useMemo(() => {
     const map = new Map<ThreadId, boolean>();

From 2b6e01164e160ac23e9c22d4b4ac663236cac91f Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 9 Mar 2026 09:21:32 -0700
Subject: [PATCH 4/4] Show toast when immediate project add fails

- Use a toast error for add-project failures during immediate folder browse
- Keep inline add-project error state for non-immediate flows
- Include `shouldBrowseForProjectImmediately` in callback dependencies
---
 apps/web/src/components/Sidebar.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index af8255a272dd..0e700369eba8 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -525,15 +525,29 @@ export default function Sidebar() {
         });
         await handleNewThread(projectId).catch(() => undefined);
       } catch (error) {
+        const description =
+          error instanceof Error ? error.message : "An error occurred while adding the project.";
         setIsAddingProject(false);
-        setAddProjectError(
-          error instanceof Error ? error.message : "An error occurred while adding the project.",
-        );
+        if (shouldBrowseForProjectImmediately) {
+          toastManager.add({
+            type: "error",
+            title: "Failed to add project",
+            description,
+          });
+        } else {
+          setAddProjectError(description);
+        }
         return;
       }
       finishAddingProject();
     },
-    [focusMostRecentThreadForProject, handleNewThread, isAddingProject, projects],
+    [
+      focusMostRecentThreadForProject,
+      handleNewThread,
+      isAddingProject,
+      projects,
+      shouldBrowseForProjectImmediately,
+    ],
   );
 
   const handleAddProject = () => {