V48 Gate 3 (implementation-only): one reused rich search-dropdown component (SearchableSelect) for repo/branch/commit selects

The deposit branch and commit pickers were plain native <select> elements
while the repository picker used a rich Command/Popover search combobox
(VCSRepositorySelector), so the same "pick one of a list" interaction looked
and behaved inconsistently on one page.

Extracted the combobox machinery into a new generic
uapi/components/base/bitcode/forms/SearchableSelect.tsx (search input, badge/
description/meta rendering, loading/empty/disabled states, optional
open-state observation for lazy-fetch consumers) and made
VCSRepositorySelector compose it instead of duplicating the Command/Popover
wiring — the repo select is now the SAME reused component, not a bespoke one.
Wired DepositSourceSelection's Branch and Commit fields onto it too (branch
shows a "default" badge; commit shows the short SHA as the label and the
commit message as description, richer than the old flat option text).

Added a SearchableSelect unit suite (8 tests: placeholder, selected label,
open+list, search filter, empty state, select+close, loading, disabled) and
registered it in jest.config.cjs's explicit testMatch allowlist (new test
files here must be added there to run in CI). uapi tsc 0; deposit/terminal/vcs
suites green (32/32 across the touched surfaces).

Note: an app-wide sweep of every native <select> (19 files, several of them
small fixed-option pickers where a search popover adds no value) is a
separate, larger scoping decision — this chunk covers the concrete repo/
branch/commit dropdowns shown in QA and establishes the one component to
converge on next.

Author: geraldarthurdavis

uapi/app/deposit/DepositSourceSelection.tsx

@@ -16,6 +16,7 @@ import { Anchor, GitBranch, Lock, RefreshCw } from "lucide-react";
 import type { VCSBranch, VCSCommit, VCSRepository } from "@bitcode/vcs-core";
 
 import { VCSRepositorySelector } from "@/components/base/bitcode/vcs/VCSRepositorySelector";
+import { SearchableSelect } from "@/components/base/bitcode/forms/SearchableSelect";
 import {
   buildTerminalRepositoryAnchorDraft,
   type TerminalActivityRecordDraft,
@@ -54,12 +55,6 @@ function splitRepositoryFullName(fullName?: string | null) {
   return { owner, repo };
 }
 
-function formatCommitOption(commit: VCSCommit) {
-  const shortSha = commit.sha.slice(0, 7);
-  const title = commit.message.split("\n")[0]?.trim() || "Commit";
-  return `${shortSha} - ${title}`;
-}
-
 export default function DepositSourceSelection({
   preferredRepository,
   onContextChange,
@@ -482,32 +477,38 @@ export default function DepositSourceSelection({
             <GitBranch className="h-3.5 w-3.5" />
             <span>Branch</span>
           </span>
-          <select
-            aria-label="Repository source branch"
-            value={selectedBranch || ""}
-            disabled={!selectedRepository || isLoadingBranches || branches.length === 0}
-            onChange={(event) =>
-              updateSourceParams((params) => {
-                if (selectedRepository)
-                  params.set("repo", selectedRepository.fullName);
-                params.set("sourceBranch", event.target.value);
-                params.delete("sourceCommit");
-                params.delete("branch");
-                params.delete("commit");
-              })
-            }
-            className="mt-3 w-full rounded-xl border border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
-          >
-            {branches.length ? null : <option value="">No branches loaded</option>}
-            {branches.map((branch) => (
-              <option key={branch.name} value={branch.name}>
-                {branch.name}
-                {branch.name === (defaultBranch || selectedRepository?.defaultBranch)
-                  ? " · default"
-                  : ""}
-              </option>
-            ))}
-          </select>
+          <div className="mt-3">
+            <SearchableSelect
+              aria-label="Repository source branch"
+              value={selectedBranch || null}
+              disabled={!selectedRepository || isLoadingBranches || branches.length === 0}
+              loading={isLoadingBranches}
+              loadingMessage="Loading branches…"
+              placeholder="Select branch..."
+              searchPlaceholder="Search branches..."
+              emptyMessage="No branches loaded."
+              items={branches.map((branch) => ({
+                key: branch.name,
+                label: branch.name,
+                badge:
+                  branch.name === (defaultBranch || selectedRepository?.defaultBranch)
+                    ? "default"
+                    : null,
+              }))}
+              onSelect={(branchName) =>
+                updateSourceParams((params) => {
+                  if (selectedRepository)
+                    params.set("repo", selectedRepository.fullName);
+                  if (branchName) params.set("sourceBranch", branchName);
+                  else params.delete("sourceBranch");
+                  params.delete("sourceCommit");
+                  params.delete("branch");
+                  params.delete("commit");
+                })
+              }
+              className="rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
+            />
+          </div>
           <p className="mt-2 text-[0.68rem] uppercase tracking-[0.18em] text-neutral-500">
             {isLoadingBranches
               ? "Loading branches…"
@@ -519,29 +520,35 @@ export default function DepositSourceSelection({
           <span className="flex items-center gap-2 text-[0.64rem] uppercase tracking-[0.2em] text-neutral-400">
             <span>Commit / ref</span>
           </span>
-          <select
-            aria-label="Repository source commit"
-            value={selectedCommit || ""}
-            disabled={!selectedBranch || isLoadingCommits || commits.length === 0}
-            onChange={(event) =>
-              updateSourceParams((params) => {
-                if (selectedRepository)
-                  params.set("repo", selectedRepository.fullName);
-                if (selectedBranch) params.set("sourceBranch", selectedBranch);
-                params.set("sourceCommit", event.target.value);
-                params.delete("branch");
-                params.delete("commit");
-              })
-            }
-            className="mt-3 w-full rounded-xl border border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white outline-none transition focus:border-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
-          >
-            {commits.length ? null : <option value="">No commits loaded</option>}
-            {commits.map((commit) => (
-              <option key={commit.sha} value={commit.sha}>
-                {formatCommitOption(commit)}
-              </option>
-            ))}
-          </select>
+          <div className="mt-3">
+            <SearchableSelect
+              aria-label="Repository source commit"
+              value={selectedCommit || null}
+              disabled={!selectedBranch || isLoadingCommits || commits.length === 0}
+              loading={isLoadingCommits}
+              loadingMessage="Loading commits…"
+              placeholder="Select commit..."
+              searchPlaceholder="Search commits..."
+              emptyMessage="No commits loaded."
+              items={commits.map((commit) => ({
+                key: commit.sha,
+                label: commit.sha.slice(0, 7),
+                description: commit.message.split("\n")[0]?.trim() || "Commit",
+              }))}
+              onSelect={(commitSha) =>
+                updateSourceParams((params) => {
+                  if (selectedRepository)
+                    params.set("repo", selectedRepository.fullName);
+                  if (selectedBranch) params.set("sourceBranch", selectedBranch);
+                  if (commitSha) params.set("sourceCommit", commitSha);
+                  else params.delete("sourceCommit");
+                  params.delete("branch");
+                  params.delete("commit");
+                })
+              }
+              className="rounded-xl border-white/10 bg-[rgba(10,15,30,0.88)] px-3 py-3 text-sm text-white hover:bg-[rgba(10,15,30,0.88)] focus:border-emerald-400/40"
+            />
+          </div>
           <p className="mt-2 text-[0.68rem] uppercase tracking-[0.18em] text-neutral-500">
             {isLoadingCommits
               ? "Loading commits…"

uapi/components/base/bitcode/forms/SearchableSelect.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+/**
+ * SearchableSelect — the one rich, searchable dropdown component for the app.
+ *
+ * A generic Command/Popover combobox (search box + list, badges, description,
+ * meta text, an icon slot) so every "pick one of a list" control looks and
+ * behaves the same way, instead of every surface growing its own bespoke
+ * native <select> or one-off popover. VCSRepositorySelector is the reference
+ * implementation this was extracted from (repo picker with lock/fork icons,
+ * language badge, "Updated" meta) — it now composes this component rather
+ * than duplicating the combobox machinery.
+ */
+
+import React, { useMemo, useState } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { cn } from '@bitcode/styling';
+import { Button } from '@/components/base/shadcn/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/base/shadcn/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/base/shadcn/popover';
+import { Badge } from '@/components/base/shadcn/badge';
+
+export interface SearchableSelectItem {
+  /** Unique, stable identifier — this is what onSelect receives. */
+  key: string;
+  label: string;
+  description?: string | null;
+  /** Short tag rendered as a badge (e.g. a language, a "default" marker). */
+  badge?: string | null;
+  /** Trailing meta text (e.g. "Updated 2/29/2024"). */
+  meta?: string | null;
+  /** Extra text matched against the search query but not otherwise shown. */
+  searchText?: string | null;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface SearchableSelectProps {
+  items: SearchableSelectItem[];
+  /** The selected item's key, or null/undefined for no selection. */
+  value?: string | null;
+  onSelect: (key: string | null) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  loading?: boolean;
+  loadingMessage?: string;
+  disabled?: boolean;
+  /** Trigger button className (merged with the default full-width outline style). */
+  className?: string;
+  /** Popover content className override (defaults to matching the trigger's width). */
+  contentClassName?: string;
+  'aria-label'?: string;
+  /** Observe/control the open state (e.g. to lazily fetch items on first open). */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function SearchableSelect({
+  items,
+  value,
+  onSelect,
+  placeholder = 'Select...',
+  searchPlaceholder = 'Search...',
+  emptyMessage = 'No results found.',
+  loading = false,
+  loadingMessage = 'Loading...',
+  disabled = false,
+  className,
+  contentClassName,
+  'aria-label': ariaLabel,
+  open: openProp,
+  onOpenChange,
+}: SearchableSelectProps) {
+  const [openState, setOpenState] = useState(false);
+  const open = openProp ?? openState;
+  const setOpen = (next: boolean) => {
+    setOpenState(next);
+    onOpenChange?.(next);
+  };
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const selected = useMemo(
+    () => items.find((item) => item.key === value) || null,
+    [items, value],
+  );
+
+  const filteredItems = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return items;
+    return items.filter((item) =>
+      [item.label, item.description, item.searchText]
+        .filter((text): text is string => Boolean(text))
+        .some((text) => text.toLowerCase().includes(query)),
+    );
+  }, [items, searchQuery]);
+
+  const handleSelect = (item: SearchableSelectItem) => {
+    if (item.disabled) return;
+    onSelect(item.key);
+    setOpen(false);
+    setSearchQuery('');
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          aria-label={ariaLabel}
+          disabled={disabled}
+          className={cn('w-full justify-between font-normal', className)}
+        >
+          {selected ? (
+            <span className="flex min-w-0 items-center gap-2 truncate">
+              {selected.icon}
+              <span className="truncate">{selected.label}</span>
+            </span>
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn('w-[--radix-popover-trigger-width] min-w-[280px] p-0', contentClassName)}
+        align="start"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onValueChange={setSearchQuery}
+          />
+          <CommandList>
+            {loading ? (
+              <div className="py-6 text-center text-sm text-muted-foreground">{loadingMessage}</div>
+            ) : filteredItems.length === 0 ? (
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+            ) : (
+              <CommandGroup>
+                {filteredItems.map((item) => (
+                  <CommandItem
+                    key={item.key}
+                    value={item.key}
+                    disabled={item.disabled}
+                    onSelect={() => handleSelect(item)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4 shrink-0',
+                        selected?.key === item.key ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <div className="min-w-0 flex-1 overflow-hidden">
+                      <div className="flex items-center gap-2">
+                        {item.icon}
+                        <span className="truncate font-medium">{item.label}</span>
+                      </div>
+                      {item.description ? (
+                        <p className="truncate text-xs text-muted-foreground">{item.description}</p>
+                      ) : null}
+                      {item.badge || item.meta ? (
+                        <div className="mt-1 flex items-center gap-2">
+                          {item.badge ? (
+                            <Badge variant="secondary" className="text-xs">
+                              {item.badge}
+                            </Badge>
+                          ) : null}
+                          {item.meta ? (
+                            <span className="text-xs text-muted-foreground">{item.meta}</span>
+                          ) : null}
+                        </div>
+                      ) : null}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}