diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx index b56e5b94bc8..74bef501a8a 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsx @@ -1,14 +1,21 @@ import { Button } from "@superset/ui/button"; +import { + Command, + CommandEmpty, + CommandInput, + CommandItem, + CommandList, +} from "@superset/ui/command"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, - DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@superset/ui/dropdown-menu"; +import { Popover, PopoverContent, PopoverTrigger } from "@superset/ui/popover"; import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { HiArrowPath, HiCheck } from "react-icons/hi2"; import { LuGitBranch } from "react-icons/lu"; import { VscGitStash, VscGitStashApply } from "react-icons/vsc"; @@ -33,6 +40,8 @@ interface ChangesHeaderProps { function BaseBranchSelector({ worktreePath }: { worktreePath: string }) { const { getBaseBranch, setBaseBranch } = useChangesStore(); const baseBranch = getBaseBranch(worktreePath); + const [open, setOpen] = useState(false); + const [search, setSearch] = useState(""); const { data: branchData, isLoading } = electronTrpc.changes.getBranches.useQuery( { worktreePath }, @@ -40,11 +49,21 @@ function BaseBranchSelector({ worktreePath }: { worktreePath: string }) { ); const effectiveBaseBranch = baseBranch ?? branchData?.defaultBranch ?? "main"; - const sortedBranches = [...(branchData?.remote ?? [])].sort((a, b) => { - if (a === branchData?.defaultBranch) return -1; - if (b === branchData?.defaultBranch) return 1; - return a.localeCompare(b); - }); + const sortedBranches = useMemo(() => { + return [...(branchData?.remote ?? [])].sort((a, b) => { + if (a === branchData?.defaultBranch) return -1; + if (b === branchData?.defaultBranch) return 1; + return a.localeCompare(b); + }); + }, [branchData?.remote, branchData?.defaultBranch]); + + const filteredBranches = useMemo(() => { + if (!search) return sortedBranches.filter(Boolean); + const lower = search.toLowerCase(); + return sortedBranches.filter((branch) => + branch?.toLowerCase().includes(lower), + ); + }, [sortedBranches, search]); const handleBranchSelect = (branch: string) => { if (branch === branchData?.defaultBranch) { @@ -52,13 +71,15 @@ function BaseBranchSelector({ worktreePath }: { worktreePath: string }) { } else { setBaseBranch(worktreePath, branch); } + setOpen(false); + setSearch(""); }; return ( - + - + - + Change base branch - - - Current base branch - - - {sortedBranches - .filter((branch) => branch) - .map((branch) => ( - handleBranchSelect(branch)} - className="flex items-center justify-between text-xs" - > - - {branch} - {branch === branchData?.defaultBranch && ( - (default) + + + + + No branches found + {filteredBranches.map((branch) => ( + handleBranchSelect(branch)} + className="flex items-center justify-between text-xs" + > + + {branch} + {branch === branchData?.defaultBranch && ( + + (default) + + )} + + {branch === effectiveBaseBranch && ( + )} - - {branch === effectiveBaseBranch && ( - - )} - - ))} - - + + ))} + + + + ); }