feat(desktop): make change base branch list searchable

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,32 +40,46 @@ 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 },
 			{ enabled: !!worktreePath },
 		);
 
 	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) {
 			setBaseBranch(worktreePath, null);
 		} else {
 			setBaseBranch(worktreePath, branch);
 		}
+		setOpen(false);
+		setSearch("");
 	};
 
 	return (
-		<DropdownMenu>
+		<Popover open={open} onOpenChange={setOpen}>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<DropdownMenuTrigger asChild>
+					<PopoverTrigger asChild>
 						<Button
 							variant="ghost"
 							size="icon"
@@ -67,38 +88,45 @@ function BaseBranchSelector({ worktreePath }: { worktreePath: string }) {
 						>
 							<LuGitBranch className="size-3.5" />
 						</Button>
-					</DropdownMenuTrigger>
+					</PopoverTrigger>
 				</TooltipTrigger>
 				<TooltipContent side="bottom" showArrow={false}>
 					Change base branch
 				</TooltipContent>
 			</Tooltip>
-			<DropdownMenuContent align="start" className="w-56">
-				<DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
-					Current base branch
-				</DropdownMenuLabel>
-				<DropdownMenuSeparator />
-				{sortedBranches
-					.filter((branch) => branch)
-					.map((branch) => (
-						<DropdownMenuItem
-							key={branch}
-							onClick={() => handleBranchSelect(branch)}
-							className="flex items-center justify-between text-xs"
-						>
-							<span className="truncate">
-								{branch}
-								{branch === branchData?.defaultBranch && (
-									<span className="ml-1 text-muted-foreground">(default)</span>
+			<PopoverContent align="start" className="w-56 p-0">
+				<Command shouldFilter={false}>
+					<CommandInput
+						placeholder="Search branches..."
+						value={search}
+						onValueChange={setSearch}
+					/>
+					<CommandList className="max-h-[200px]">
+						<CommandEmpty>No branches found</CommandEmpty>
+						{filteredBranches.map((branch) => (
+							<CommandItem
+								key={branch}
+								value={branch}
+								onSelect={() => handleBranchSelect(branch)}
+								className="flex items-center justify-between text-xs"
+							>
+								<span className="truncate">
+									{branch}
+									{branch === branchData?.defaultBranch && (
+										<span className="ml-1 text-muted-foreground">
+											(default)
+										</span>
+									)}
+								</span>
+								{branch === effectiveBaseBranch && (
+									<HiCheck className="size-3.5 shrink-0 text-primary" />
 								)}
-							</span>
-							{branch === effectiveBaseBranch && (
-								<HiCheck className="size-3.5 shrink-0 text-primary" />
-							)}
-						</DropdownMenuItem>
-					))}
-			</DropdownMenuContent>
-		</DropdownMenu>
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
 	);
 }