- 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
Unified · Split
| @@ -19,8 +19,7 @@ import { · 18 unmodified lines | ||
| 19 | 19 | ComboboxPopup, |
| 20 | 20 | ComboboxTrigger, |
| 21 | 21 | } from "./ui/combobox"; |
| 22 | −import { ChevronDownIcon, PlusIcon } from "lucide-react"; | |
| 23 | −import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group"; | |
| 22 | +import { ChevronDownIcon } from "lucide-react"; | |
| 24 | 23 | |
| 25 | 24 | interface BranchToolbarProps { |
| 26 | 25 | envMode: "local" | "worktree"; |
| @@ -34,8 +33,7 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 7 unmodified lines | ||
| 34 | 33 | const queryClient = useQueryClient(); |
| 35 | 34 | |
| 36 | 35 | const [isBranchMenuOpen, setIsBranchMenuOpen] = useState(false); |
| 37 | − const [isCreatingBranch, setIsCreatingBranch] = useState(false); | |
| 38 | − const [newBranchName, setNewBranchName] = useState(""); | |
| 36 | + const [branchQuery, setBranchQuery] = useState(""); | |
| 39 | 37 | |
| 40 | 38 | const activeThread = state.threads.find((thread) => thread.id === state.activeThreadId); |
| 41 | 39 | const activeProject = state.projects.find((project) => project.id === activeThread?.projectId); |
| @@ -51,6 +49,16 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 9 unmodified lines | ||
| 51 | 49 | const branches = branchesQuery.data?.branches ?? []; |
| 52 | 50 | const branchNames = branches.map((branch) => branch.name); |
| 53 | 51 | const branchByName = new Map(branches.map((branch) => [branch.name, branch])); |
| 52 | + const trimmedBranchQuery = branchQuery.trim(); | |
| 53 | + const canCreateBranch = envMode === "local" && trimmedBranchQuery.length > 0; | |
| 54 | + const hasExactBranchMatch = branchByName.has(trimmedBranchQuery); | |
| 55 | + const createBranchItemValue = canCreateBranch | |
| 56 | + ? `__create_new_branch__:${trimmedBranchQuery}` | |
| 57 | + : null; | |
| 58 | + const branchPickerItems = | |
| 59 | + createBranchItemValue && !hasExactBranchMatch | |
| 60 | + ? [...branchNames, createBranchItemValue] | |
| 61 | + : branchNames; | |
| 54 | 62 | // ── Mutations ───────────────────────────────────────────────────────── |
| 55 | 63 | |
| 56 | 64 | const checkoutMutation = useMutation({ |
| @@ -86,8 +94,7 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 29 unmodified lines | ||
| 86 | 94 | |
| 87 | 95 | useEffect(() => { |
| 88 | 96 | if (isBranchMenuOpen) return; |
| 89 | − setIsCreatingBranch(false); | |
| 90 | − setNewBranchName(""); | |
| 97 | + setBranchQuery(""); | |
| 91 | 98 | }, [isBranchMenuOpen]); |
| 92 | 99 | |
| 93 | 100 | // ── Helpers ─────────────────────────────────────────────────────────── |
| @@ -140,15 +147,14 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 46 unmodified lines | ||
| 140 | 147 | }); |
| 141 | 148 | }; |
| 142 | 149 | |
| 143 | − const createBranch = () => { | |
| 144 | − const name = newBranchName.trim(); | |
| 145 | − if (!api || !activeThreadId || !branchCwd || !name) return; | |
| 150 | + const createBranch = (rawName: string) => { | |
| 151 | + const name = rawName.trim(); | |
| 152 | + if (!api || !activeThreadId || !branchCwd || !name || createBranchMutation.isPending) return; | |
| 146 | 153 | createBranchMutation.mutate(name, { |
| 147 | 154 | onSuccess: () => { |
| 148 | 155 | setThreadError(null); |
| 149 | 156 | setThreadBranch(name, activeWorktreePath); |
| 150 | − setNewBranchName(""); | |
| 151 | − setIsCreatingBranch(false); | |
| 157 | + setBranchQuery(""); | |
| 152 | 158 | setIsBranchMenuOpen(false); |
| 153 | 159 | }, |
| 154 | 160 | }); |
| @@ -177,7 +183,7 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 22 unmodified lines | ||
| 177 | 183 | </div> |
| 178 | 184 | |
| 179 | 185 | <Combobox |
| 180 | − items={branchNames} | |
| 186 | + items={branchPickerItems} | |
| 181 | 187 | autoHighlight |
| 182 | 188 | onOpenChange={(open) => setIsBranchMenuOpen(open)} |
| 183 | 189 | open={isBranchMenuOpen} |
| @@ -198,20 +204,35 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 14 unmodified lines | ||
| 198 | 204 | <ChevronDownIcon /> |
| 199 | 205 | </ComboboxTrigger> |
| 200 | 206 | <ComboboxPopup align="end" side="top" className="w-64"> |
| 201 | − <div className="border-b"> | |
| 207 | + <div className="border-b p-1"> | |
| 202 | 208 | <ComboboxInput |
| 203 | − className="rounded-b-none before:rounded-b-none [&_input]:font-sans" | |
| 209 | + className="[&_input]:font-sans rounded-md" | |
| 210 | + inputClassName="ring-0" | |
| 204 | 211 | placeholder="Search branches..." |
| 205 | − showClear | |
| 206 | 212 | showTrigger={false} |
| 207 | 213 | size="sm" |
| 214 | + value={branchQuery} | |
| 215 | + onChange={(event) => setBranchQuery(event.target.value)} | |
| 208 | 216 | /> |
| 209 | 217 | </div> |
| 210 | 218 | <ComboboxEmpty>No branches found.</ComboboxEmpty> |
| 211 | 219 | |
| 212 | 220 | <ComboboxList className="max-h-56"> |
| 213 | − {(branchName) => { | |
| 214 | − const branch = branchByName.get(branchName); | |
| 221 | + {(itemValue) => { | |
| 222 | + if (createBranchItemValue && itemValue === createBranchItemValue) { | |
| 223 | + return ( | |
| 224 | + <ComboboxItem | |
| 225 | + hideIndicator | |
| 226 | + key={itemValue} | |
| 227 | + value={itemValue} | |
| 228 | + onClick={() => createBranch(trimmedBranchQuery)} | |
| 229 | + > | |
| 230 | + <span className="truncate">Create new branch "{trimmedBranchQuery}"</span> | |
| 231 | + </ComboboxItem> | |
| 232 | + ); | |
| 233 | + } | |
| 234 | + | |
| 235 | + const branch = branchByName.get(itemValue); | |
| 215 | 236 | if (!branch) return null; |
| 216 | 237 | |
| 217 | 238 | const hasSecondaryWorktree = |
| @@ -219,15 +240,15 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 1 unmodified line | ||
| 219 | 240 | return ( |
| 220 | 241 | <ComboboxItem |
| 221 | 242 | hideIndicator |
| 222 | − key={branchName} | |
| 223 | − value={branchName} | |
| 243 | + key={itemValue} | |
| 244 | + value={itemValue} | |
| 224 | 245 | className={ |
| 225 | − branchName === activeThread.branch ? "bg-accent text-foreground" : undefined | |
| 246 | + itemValue === activeThread.branch ? "bg-accent text-foreground" : undefined | |
| 226 | 247 | } |
| 227 | 248 | onClick={() => selectBranch(branch)} |
| 228 | 249 | > |
| 229 | 250 | <div className="flex w-full items-center justify-between gap-2"> |
| 230 | − <span className="truncate">{branchName}</span> | |
| 251 | + <span className="truncate">{itemValue}</span> | |
| 231 | 252 | {(branch.current || branch.isDefault || hasSecondaryWorktree) && ( |
| 232 | 253 | <span className="shrink-0 text-[10px] text-muted-foreground/45"> |
| 233 | 254 | {branch.current ? "current" : hasSecondaryWorktree ? "worktree" : "default"} |
| @@ -238,57 +259,6 @@ export default function BranchToolbar({ envMode, onEnvModeChange, envLocked }: B · 4 unmodified lines | ||
| 238 | 259 | ); |
| 239 | 260 | }} |
| 240 | 261 | </ComboboxList> |
| 241 | − {envMode === "local" && ( | |
| 242 | − <> | |
| 243 | − {isCreatingBranch ? ( | |
| 244 | − <form | |
| 245 | − onSubmit={(event) => { | |
| 246 | − event.preventDefault(); | |
| 247 | − createBranch(); | |
| 248 | − }} | |
| 249 | − > | |
| 250 | − <InputGroup className="rounded-t-none before:rounded-t-none"> | |
| 251 | − <InputGroupInput | |
| 252 | − className="[&_input]:font-sans" | |
| 253 | − size="sm" | |
| 254 | − placeholder="branch-name" | |
| 255 | − type="text" | |
| 256 | − value={newBranchName} | |
| 257 | − onChange={(event) => setNewBranchName(event.target.value)} | |
| 258 | − onKeyDown={(event) => { | |
| 259 | − if (event.key === "Escape") { | |
| 260 | − event.stopPropagation(); | |
| 261 | − setIsCreatingBranch(false); | |
| 262 | − setNewBranchName(""); | |
| 263 | − } | |
| 264 | − }} | |
| 265 | − autoFocus | |
| 266 | − /> | |
| 267 | − <InputGroupAddon align="inline-end"> | |
| 268 | − <Button | |
| 269 | − size="xs" | |
| 270 | − variant="secondary" | |
| 271 | − type="submit" | |
| 272 | − disabled={!newBranchName.trim() || createBranchMutation.isPending} | |
| 273 | − > | |
| 274 | − Create | |
| 275 | − </Button> | |
| 276 | − </InputGroupAddon> | |
| 277 | − </InputGroup> | |
| 278 | − </form> | |
| 279 | − ) : ( | |
| 280 | − <Button | |
| 281 | − size="sm" | |
| 282 | − className="w-full justify-start h-9 rounded-t-none rounded-b-lg before:rounded-t-none" | |
| 283 | − variant="outline" | |
| 284 | − onClick={() => setIsCreatingBranch(true)} | |
| 285 | − > | |
| 286 | − <PlusIcon /> | |
| 287 | − New branch | |
| 288 | − </Button> | |
| 289 | − )} | |
| 290 | − </> | |
| 291 | − )} | |
| 292 | 262 | </ComboboxPopup> |
| 293 | 263 | </Combobox> |
| 294 | 264 | </div> |
| @@ -54,12 +54,14 @@ function ComboboxChipsInput({ · 53 unmodified lines | ||
| 54 | 54 | |
| 55 | 55 | function ComboboxInput({ |
| 56 | 56 | className, |
| 57 | + inputClassName, | |
| 57 | 58 | showTrigger = true, |
| 58 | 59 | showClear = false, |
| 59 | 60 | startAddon, |
| 60 | 61 | size, |
| 61 | 62 | ...props |
| 62 | 63 | }: Omit<ComboboxPrimitive.Input.Props, "size"> & { |
| 64 | + inputClassName?: string; | |
| 63 | 65 | showTrigger?: boolean; |
| 64 | 66 | showClear?: boolean; |
| 65 | 67 | startAddon?: React.ReactNode; |
| @@ -89,7 +91,13 @@ function ComboboxInput({ · 23 unmodified lines | ||
| 89 | 91 | className, |
| 90 | 92 | )} |
| 91 | 93 | data-slot="combobox-input" |
| 92 | − render={<Input className="has-disabled:opacity-100" nativeInput size={sizeValue} />} | |
| 94 | + render={ | |
| 95 | + <Input | |
| 96 | + className={cn("has-disabled:opacity-100", inputClassName)} | |
| 97 | + nativeInput | |
| 98 | + size={sizeValue} | |
| 99 | + /> | |
| 100 | + } | |
| 93 | 101 | {...props} |
| 94 | 102 | /> |
| 95 | 103 | {showTrigger && ( |