From 81d3a18449df4a55bdec6052e935a2ee302ef4ae Mon Sep 17 00:00:00 2001
From: Zortos <zortosdev@proton.me>
Date: Fri, 13 Mar 2026 01:22:34 +0100
Subject: [PATCH 1/2] feat: replace worktree toggle button with discoverable
 Select dropdown

---
 apps/web/src/components/BranchToolbar.tsx | 59 ++++++++++++++++++-----
 1 file changed, 48 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index b2c60b2429..4947975e9e 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -1,4 +1,5 @@
 import type { ThreadId } from "@t3tools/contracts";
+import { FolderIcon, GitForkIcon } from "lucide-react";
 import { useCallback } from "react";
 
 import { newCommandId } from "../lib/utils";
@@ -11,7 +12,12 @@ import {
   resolveEffectiveEnvMode,
 } from "./BranchToolbar.logic";
 import { BranchToolbarBranchSelector } from "./BranchToolbarBranchSelector";
-import { Button } from "./ui/button";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
+
+const envModeItems = [
+  { value: "local", label: "Local" },
+  { value: "worktree", label: "New worktree" },
+] as const;
 
 interface BranchToolbarProps {
   threadId: ThreadId;
@@ -106,19 +112,50 @@ export default function BranchToolbar({
     <div className="mx-auto flex w-full max-w-3xl items-center justify-between px-5 pb-3 pt-1">
       <div className="flex items-center gap-2">
         {envLocked || activeWorktreePath ? (
-          <span className="border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
-            {activeWorktreePath ? "Worktree" : "Local"}
+          <span className="inline-flex items-center gap-1.5 border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+            {activeWorktreePath ? (
+              <>
+                <GitForkIcon className="size-3" />
+                Worktree
+              </>
+            ) : (
+              <>
+                <FolderIcon className="size-3" />
+                Local
+              </>
+            )}
           </span>
         ) : (
-          <Button
-            type="button"
-            variant="ghost"
-            className="text-muted-foreground/70 hover:text-foreground/80"
-            size="xs"
-            onClick={() => onEnvModeChange(effectiveEnvMode === "local" ? "worktree" : "local")}
+          <Select
+            value={effectiveEnvMode}
+            onValueChange={(value) => onEnvModeChange(value as EnvMode)}
+            items={envModeItems}
           >
-            {effectiveEnvMode === "worktree" ? "New worktree" : "Local"}
-          </Button>
+            <SelectTrigger variant="ghost" size="sm">
+              <span className="inline-flex items-center gap-1.5">
+                {effectiveEnvMode === "worktree" ? (
+                  <GitForkIcon className="size-3" />
+                ) : (
+                  <FolderIcon className="size-3" />
+                )}
+                <SelectValue />
+              </span>
+            </SelectTrigger>
+            <SelectPopup>
+              <SelectItem value="local">
+                <span className="inline-flex items-center gap-1.5">
+                  <FolderIcon className="size-3" />
+                  Local
+                </span>
+              </SelectItem>
+              <SelectItem value="worktree">
+                <span className="inline-flex items-center gap-1.5">
+                  <GitForkIcon className="size-3" />
+                  New worktree
+                </span>
+              </SelectItem>
+            </SelectPopup>
+          </Select>
         )}
       </div>
 

From 51556a3cf918fa2b38cbf05f0c4b7b4b08909b36 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 12 Mar 2026 19:20:50 -0700
Subject: [PATCH 2/2] fix styles

---
 apps/web/src/components/BranchToolbar.tsx | 83 +++++++++++------------
 apps/web/src/components/ui/select.tsx     |  1 +
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index 4947975e9e..e0ffa05c22 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -13,6 +13,7 @@ import {
 } from "./BranchToolbar.logic";
 import { BranchToolbarBranchSelector } from "./BranchToolbarBranchSelector";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
+import { Button } from "./ui/button";
 
 const envModeItems = [
   { value: "local", label: "Local" },
@@ -110,54 +111,50 @@ export default function BranchToolbar({
 
   return (
     <div className="mx-auto flex w-full max-w-3xl items-center justify-between px-5 pb-3 pt-1">
-      <div className="flex items-center gap-2">
-        {envLocked || activeWorktreePath ? (
-          <span className="inline-flex items-center gap-1.5 border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
-            {activeWorktreePath ? (
-              <>
-                <GitForkIcon className="size-3" />
-                Worktree
-              </>
+      {envLocked || activeWorktreePath ? (
+        <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+          {activeWorktreePath ? (
+            <>
+              <GitForkIcon className="size-3" />
+              Worktree
+            </>
+          ) : (
+            <>
+              <FolderIcon className="size-3" />
+              Local
+            </>
+          )}
+        </span>
+      ) : (
+        <Select
+          value={effectiveEnvMode}
+          onValueChange={(value) => onEnvModeChange(value as EnvMode)}
+          items={envModeItems}
+        >
+          <SelectTrigger variant="ghost" size="xs" className="font-medium">
+            {effectiveEnvMode === "worktree" ? (
+              <GitForkIcon className="size-3" />
             ) : (
-              <>
+              <FolderIcon className="size-3" />
+            )}
+            <SelectValue />
+          </SelectTrigger>
+          <SelectPopup>
+            <SelectItem value="local">
+              <span className="inline-flex items-center gap-1.5">
                 <FolderIcon className="size-3" />
                 Local
-              </>
-            )}
-          </span>
-        ) : (
-          <Select
-            value={effectiveEnvMode}
-            onValueChange={(value) => onEnvModeChange(value as EnvMode)}
-            items={envModeItems}
-          >
-            <SelectTrigger variant="ghost" size="sm">
+              </span>
+            </SelectItem>
+            <SelectItem value="worktree">
               <span className="inline-flex items-center gap-1.5">
-                {effectiveEnvMode === "worktree" ? (
-                  <GitForkIcon className="size-3" />
-                ) : (
-                  <FolderIcon className="size-3" />
-                )}
-                <SelectValue />
+                <GitForkIcon className="size-3" />
+                New worktree
               </span>
-            </SelectTrigger>
-            <SelectPopup>
-              <SelectItem value="local">
-                <span className="inline-flex items-center gap-1.5">
-                  <FolderIcon className="size-3" />
-                  Local
-                </span>
-              </SelectItem>
-              <SelectItem value="worktree">
-                <span className="inline-flex items-center gap-1.5">
-                  <GitForkIcon className="size-3" />
-                  New worktree
-                </span>
-              </SelectItem>
-            </SelectPopup>
-          </Select>
-        )}
-      </div>
+            </SelectItem>
+          </SelectPopup>
+        </Select>
+      )}
 
       <BranchToolbarBranchSelector
         activeProjectCwd={activeProject.cwd}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index d3c30ae0e0..e90b415820 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -29,6 +29,7 @@ const selectTriggerVariants = cva(
         default: "min-h-9 px-[calc(--spacing(3)-1px)] sm:min-h-8",
         lg: "min-h-10 px-[calc(--spacing(3)-1px)] sm:min-h-9",
         sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
       },
     },
   },