Commit 75ca0d4fa41a4b5a85a6aa852dad813fbcbb94db | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-09 09:02:56-07:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-09 09:31:39-07:00
log	75ca0d4fa41a4b5a85a6aa852dad813fbcbb94db
tree	f17f267fa33b1dbbc55a97fa5e1d377e45593963
parent	8282b11fb55e50147a33e476ee8563ceaf1e75d7

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

3 files changed, 64 insertions(+), 8 deletions(-)

apps
- web
  - src
    components
    Sidebar.logic.test.ts
    Sidebar.logic.ts
    Sidebar.tsx

apps/web/src/components/Sidebar.logic.test.ts created+31

...	@@ -0,0 +1,31 @@
1	import { describe, expect, it } from "vitest";
2	import { shouldOpenProjectFolderPickerImmediately } from "./Sidebar.logic";
3
4	describe("shouldOpenProjectFolderPickerImmediately", () => {
5	it("opens the folder picker immediately in Electron on desktop", () => {
6	expect(
7	shouldOpenProjectFolderPickerImmediately({
8	isElectron: true,
9	isMobile: false,
10	}),
11	).toBe(true);
12	});
13
14	it("keeps manual project entry on mobile Electron layouts", () => {
15	expect(
16	shouldOpenProjectFolderPickerImmediately({
17	isElectron: true,
18	isMobile: true,
19	}),
20	).toBe(false);
21	});
22
23	it("keeps manual project entry outside Electron", () => {
24	expect(
25	shouldOpenProjectFolderPickerImmediately({
26	isElectron: false,
27	isMobile: false,
28	}),
29	).toBe(false);
30	});
31	});

apps/web/src/components/Sidebar.logic.ts created+6

...	@@ -0,0 +1,6 @@
1	export function shouldOpenProjectFolderPickerImmediately(input: {
2	isElectron: boolean;
3	isMobile: boolean;
4	}): boolean {
5	return input.isElectron && !input.isMobile;
6	}

apps/web/src/components/Sidebar.tsx+27-8

 @@ -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={() => {
+                    onClick={handleStartAddProject}
-                      setAddingProject((prev) => !prev);
-                      setAddProjectError(null);
-                    }}
                   />
                 }
               >
-                <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>