|
| 1 | +import { Combobox } from "@components/ui/combobox/Combobox"; |
| 2 | +import { useGitInteractionStore } from "@features/git-interaction/state/gitInteractionStore"; |
| 3 | +import { GitBranch, Plus } from "@phosphor-icons/react"; |
| 4 | +import { Flex, Spinner } from "@radix-ui/themes"; |
| 5 | +import { trpcVanilla } from "@renderer/trpc"; |
| 6 | +import { toast } from "@renderer/utils/toast"; |
| 7 | +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; |
| 8 | +import { useEffect, useState } from "react"; |
| 9 | + |
| 10 | +interface BranchSelectorProps { |
| 11 | + repoPath: string | null; |
| 12 | + currentBranch: string | null; |
| 13 | + defaultBranch?: string | null; |
| 14 | + disabled?: boolean; |
| 15 | + loading?: boolean; |
| 16 | + variant?: "outline" | "ghost"; |
| 17 | + workspaceMode?: "worktree" | "local"; |
| 18 | + selectedBranch?: string | null; |
| 19 | + onBranchSelect?: (branch: string | null) => void; |
| 20 | +} |
| 21 | + |
| 22 | +export function BranchSelector({ |
| 23 | + repoPath, |
| 24 | + currentBranch, |
| 25 | + defaultBranch, |
| 26 | + disabled, |
| 27 | + loading, |
| 28 | + variant = "outline", |
| 29 | + workspaceMode, |
| 30 | + selectedBranch, |
| 31 | + onBranchSelect, |
| 32 | +}: BranchSelectorProps) { |
| 33 | + const [open, setOpen] = useState(false); |
| 34 | + const queryClient = useQueryClient(); |
| 35 | + const { actions } = useGitInteractionStore(); |
| 36 | + |
| 37 | + const isWorktreeMode = workspaceMode === "worktree"; |
| 38 | + const displayedBranch = isWorktreeMode ? selectedBranch : currentBranch; |
| 39 | + |
| 40 | + useEffect(() => { |
| 41 | + if (isWorktreeMode && defaultBranch && !selectedBranch && onBranchSelect) { |
| 42 | + onBranchSelect(defaultBranch); |
| 43 | + } |
| 44 | + }, [isWorktreeMode, defaultBranch, selectedBranch, onBranchSelect]); |
| 45 | + |
| 46 | + const { data: branches = [] } = useQuery({ |
| 47 | + queryKey: ["git-all-branches", repoPath], |
| 48 | + queryFn: () => |
| 49 | + trpcVanilla.git.getAllBranches.query({ |
| 50 | + directoryPath: repoPath as string, |
| 51 | + }), |
| 52 | + enabled: !!repoPath && open, |
| 53 | + staleTime: 10_000, |
| 54 | + }); |
| 55 | + |
| 56 | + const checkoutMutation = useMutation({ |
| 57 | + mutationFn: (branchName: string) => |
| 58 | + trpcVanilla.git.checkoutBranch.mutate({ |
| 59 | + directoryPath: repoPath as string, |
| 60 | + branchName, |
| 61 | + }), |
| 62 | + onSuccess: () => { |
| 63 | + queryClient.invalidateQueries({ queryKey: ["git-current-branch"] }); |
| 64 | + queryClient.invalidateQueries({ queryKey: ["git-sync-status"] }); |
| 65 | + queryClient.invalidateQueries({ queryKey: ["git-all-branches"] }); |
| 66 | + queryClient.invalidateQueries({ queryKey: ["changed-files-head"] }); |
| 67 | + }, |
| 68 | + onError: (error, branchName) => { |
| 69 | + const message = |
| 70 | + error instanceof Error ? error.message : "Unknown error occurred"; |
| 71 | + toast.error(`Failed to checkout ${branchName}`, { description: message }); |
| 72 | + }, |
| 73 | + }); |
| 74 | + |
| 75 | + const handleBranchChange = (value: string) => { |
| 76 | + if (isWorktreeMode) { |
| 77 | + onBranchSelect?.(value || null); |
| 78 | + } else if (value && value !== currentBranch) { |
| 79 | + checkoutMutation.mutate(value); |
| 80 | + } |
| 81 | + setOpen(false); |
| 82 | + }; |
| 83 | + |
| 84 | + const displayText = loading ? "Loading..." : (displayedBranch ?? "No branch"); |
| 85 | + |
| 86 | + const triggerContent = ( |
| 87 | + <Flex align="center" gap="1" style={{ minWidth: 0 }}> |
| 88 | + {loading ? ( |
| 89 | + <Spinner size="1" /> |
| 90 | + ) : ( |
| 91 | + <GitBranch size={16} weight="regular" style={{ flexShrink: 0 }} /> |
| 92 | + )} |
| 93 | + <span className="combobox-trigger-text">{displayText}</span> |
| 94 | + </Flex> |
| 95 | + ); |
| 96 | + |
| 97 | + const combobox = ( |
| 98 | + <Combobox.Root |
| 99 | + value={displayedBranch ?? ""} |
| 100 | + onValueChange={handleBranchChange} |
| 101 | + open={open} |
| 102 | + onOpenChange={setOpen} |
| 103 | + size="1" |
| 104 | + disabled={disabled || !repoPath} |
| 105 | + > |
| 106 | + <Combobox.Trigger variant={variant} placeholder="No branch"> |
| 107 | + {triggerContent} |
| 108 | + </Combobox.Trigger> |
| 109 | + |
| 110 | + <Combobox.Content> |
| 111 | + <Combobox.Input placeholder="Search branches" /> |
| 112 | + <Combobox.Empty>No branches found.</Combobox.Empty> |
| 113 | + |
| 114 | + <Combobox.Group heading="Local branches"> |
| 115 | + {branches.map((branch) => ( |
| 116 | + <Combobox.Item |
| 117 | + key={branch} |
| 118 | + value={branch} |
| 119 | + icon={<GitBranch size={11} weight="regular" />} |
| 120 | + > |
| 121 | + {branch} |
| 122 | + </Combobox.Item> |
| 123 | + ))} |
| 124 | + </Combobox.Group> |
| 125 | + |
| 126 | + <Combobox.Footer> |
| 127 | + <button |
| 128 | + type="button" |
| 129 | + className="combobox-footer-button" |
| 130 | + onClick={() => { |
| 131 | + setOpen(false); |
| 132 | + actions.openBranch(); |
| 133 | + }} |
| 134 | + > |
| 135 | + <Flex align="center" gap="2" style={{ color: "var(--accent-11)" }}> |
| 136 | + <Plus size={11} weight="bold" /> |
| 137 | + <span>Create new branch</span> |
| 138 | + </Flex> |
| 139 | + </button> |
| 140 | + </Combobox.Footer> |
| 141 | + </Combobox.Content> |
| 142 | + </Combobox.Root> |
| 143 | + ); |
| 144 | + |
| 145 | + return combobox; |
| 146 | +} |
0 commit comments