Add inline branch creation to branch picker search

- let users create a new local branch directly from the branch combobox search - remove separate "New branch" form/button flow in `BranchToolbar` - add `inputClassName` support to `ComboboxInput` for native input styling control

Julius Marminge committed 9 months ago

Commit 9bd663b1 parent 58d926f2 files · +51 −73Browse files

Unified · Split

2 files

apps/web/src/components/BranchToolbar.tsx +42 −72
apps/web/src/components/ui/combobox.tsx +9 −1

apps/web/src/components/BranchToolbar.tsx+42−72

   ComboboxPopup,
   ComboboxTrigger,
 } from "./ui/combobox";
-import { ChevronDownIcon, PlusIcon } from "lucide-react";
+import { ChevronDownIcon } from "lucide-react";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group";
 interface BranchToolbarProps {
   envMode: "local" | "worktree";
   const queryClient = useQueryClient();
   const [isBranchMenuOpen, setIsBranchMenuOpen] = useState(false);
-  const [isCreatingBranch, setIsCreatingBranch] = useState(false);
+  const [branchQuery, setBranchQuery] = useState("");
-  const [newBranchName, setNewBranchName] = useState("");
   const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId);
   const activeProject = state.projects.find((project) => project.id === activeThread?.projectId);
   const branches = branchesQuery.data?.branches ?? [];
   const branchNames = branches.map((branch) => branch.name);
   const branchByName = new Map(branches.map((branch) => [branch.name, branch]));
+  const trimmedBranchQuery = branchQuery.trim();
+  const canCreateBranch = envMode === "local" && trimmedBranchQuery.length > 0;
+  const hasExactBranchMatch = branchByName.has(trimmedBranchQuery);
+  const createBranchItemValue = canCreateBranch
+    ? `__create_new_branch__:${trimmedBranchQuery}`
+    : null;
+  const branchPickerItems =
+    createBranchItemValue && !hasExactBranchMatch
+      ? [...branchNames, createBranchItemValue]
+      : branchNames;
   // ── Mutations ─────────────────────────────────────────────────────────
   const checkoutMutation = useMutation({
   useEffect(() => {
     if (isBranchMenuOpen) return;
-    setIsCreatingBranch(false);
+    setBranchQuery("");
-    setNewBranchName("");
   }, [isBranchMenuOpen]);
   // ── Helpers ───────────────────────────────────────────────────────────
     });
   };
-  const createBranch = () => {
+  const createBranch = (rawName: string) => {
-    const name = newBranchName.trim();
+    const name = rawName.trim();
-    if (!api || !activeThreadId || !branchCwd || !name) return;
+    if (!api || !activeThreadId || !branchCwd || !name || createBranchMutation.isPending) return;
     createBranchMutation.mutate(name, {
       onSuccess: () => {
         setThreadError(null);
         setThreadBranch(name, activeWorktreePath);
-        setNewBranchName("");
+        setBranchQuery("");
-        setIsCreatingBranch(false);
         setIsBranchMenuOpen(false);
       },
     });
       </div>
       <Combobox
-        items={branchNames}
+        items={branchPickerItems}
         autoHighlight
         onOpenChange={(open) => setIsBranchMenuOpen(open)}
         open={isBranchMenuOpen}
           <ChevronDownIcon />
         </ComboboxTrigger>
         <ComboboxPopup align="end" side="top" className="w-64">
-          <div className="border-b">
+          <div className="border-b p-1">
             <ComboboxInput
-              className="rounded-b-none before:rounded-b-none [&_input]:font-sans"
+              className="[&_input]:font-sans rounded-md"
+              inputClassName="ring-0"
               placeholder="Search branches..."
-              showClear
               showTrigger={false}
               size="sm"
+              value={branchQuery}
+              onChange={(event) => setBranchQuery(event.target.value)}
             />
           </div>
           <ComboboxEmpty>No branches found.</ComboboxEmpty>
           <ComboboxList className="max-h-56">
-            {(branchName) => {
+            {(itemValue) => {
-              const branch = branchByName.get(branchName);
+              if (createBranchItemValue && itemValue === createBranchItemValue) {
+                return (
+                  <ComboboxItem
+                    hideIndicator
+                    key={itemValue}
+                    value={itemValue}
+                    onClick={() => createBranch(trimmedBranchQuery)}
+                  >
+                    <span className="truncate">Create new branch "{trimmedBranchQuery}"</span>
+                  </ComboboxItem>
+                );
+              }
+              const branch = branchByName.get(itemValue);
               if (!branch) return null;
               const hasSecondaryWorktree =
               return (
                 <ComboboxItem
                   hideIndicator
-                  key={branchName}
+                  key={itemValue}
-                  value={branchName}
+                  value={itemValue}
                   className={
-                    branchName === activeThread.branch ? "bg-accent text-foreground" : undefined
+                    itemValue === activeThread.branch ? "bg-accent text-foreground" : undefined
                   }
                   onClick={() => selectBranch(branch)}
                 >
                   <div className="flex w-full items-center justify-between gap-2">
-                    <span className="truncate">{branchName}</span>
+                    <span className="truncate">{itemValue}</span>
                     {(branch.current || branch.isDefault || hasSecondaryWorktree) && (
                       <span className="shrink-0 text-[10px] text-muted-foreground/45">
                         {branch.current ? "current" : hasSecondaryWorktree ? "worktree" : "default"}
               );
             }}
           </ComboboxList>
-          {envMode === "local" && (
-            <>
-              {isCreatingBranch ? (
-                <form
-                  onSubmit={(event) => {
-                    event.preventDefault();
-                    createBranch();
-                  }}
-                >
-                  <InputGroup className="rounded-t-none before:rounded-t-none">
-                    <InputGroupInput
-                      className="[&_input]:font-sans"
-                      size="sm"
-                      placeholder="branch-name"
-                      type="text"
-                      value={newBranchName}
-                      onChange={(event) => setNewBranchName(event.target.value)}
-                      onKeyDown={(event) => {
-                        if (event.key === "Escape") {
-                          event.stopPropagation();
-                          setIsCreatingBranch(false);
-                          setNewBranchName("");
-                        }
-                      }}
-                      autoFocus
-                    />
-                    <InputGroupAddon align="inline-end">
-                      <Button
-                        size="xs"
-                        variant="secondary"
-                        type="submit"
-                        disabled={!newBranchName.trim() || createBranchMutation.isPending}
-                      >
-                        Create
-                      </Button>
-                    </InputGroupAddon>
-                  </InputGroup>
-                </form>
-              ) : (
-                <Button
-                  size="sm"
-                  className="w-full justify-start h-9 rounded-t-none rounded-b-lg before:rounded-t-none"
-                  variant="outline"
-                  onClick={() => setIsCreatingBranch(true)}
-                >
-                  <PlusIcon />
-                  New branch
-                </Button>
-              )}
-            </>
-          )}
         </ComboboxPopup>
       </Combobox>
     </div>

apps/web/src/components/ui/combobox.tsx+9−1

 function ComboboxInput({
   className,
+  inputClassName,
   showTrigger = true,
   showClear = false,
   startAddon,
   size,
   ...props
 }: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+  inputClassName?: string;
   showTrigger?: boolean;
   showClear?: boolean;
   startAddon?: React.ReactNode;
           className,
         )}
         data-slot="combobox-input"
-        render={<Input className="has-disabled:opacity-100" nativeInput size={sizeValue} />}
+        render={
+          <Input
+            className={cn("has-disabled:opacity-100", inputClassName)}
+            nativeInput
+            size={sizeValue}
+          />
+        }
         {...props}
       />
       {showTrigger && (

Add inline branch creation to branch picker search

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code