feat: add github repo filter search (#1476)

apps/web/components/github/my-github/list-toolbar.test.tsx

@@ -0,0 +1,76 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { ListToolbar } from "./list-toolbar";
+
+afterEach(() => cleanup());
+
+const ALL_REPOS_LABEL = "All repos";
+const REPO_SEARCH_PLACEHOLDER = "Filter repositories...";
+const REPO_DROPDOWN_TEST_ID = "github-repo-filter-dropdown";
+const KANDEV_REPO = "kdlbs/kandev";
+
+function renderToolbar({ repoFilter = "" }: { repoFilter?: string } = {}) {
+  const onRepoFilterChange = vi.fn();
+  render(
+    <TooltipProvider>
+      <ListToolbar
+        title="Review requested"
+        count={2}
+        loading={false}
+        lastFetchedAt={null}
+        customQuery="is:open"
+        committedQuery="is:open"
+        onCustomQueryChange={vi.fn()}
+        onCommitCustomQuery={vi.fn()}
+        repoFilter={repoFilter}
+        onRepoFilterChange={onRepoFilterChange}
+        repoOptions={["acme/api", KANDEV_REPO]}
+        onRefresh={vi.fn()}
+      />
+    </TooltipProvider>,
+  );
+  return { onRepoFilterChange };
+}
+
+describe("ListToolbar", () => {
+  it("opens the repository filter with a search input", async () => {
+    renderToolbar();
+
+    fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
+
+    expect(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER)).toBeTruthy();
+    expect(screen.getByTestId(REPO_DROPDOWN_TEST_ID)).toBeTruthy();
+    expect(screen.getByText(KANDEV_REPO)).toBeTruthy();
+  });
+
+  it("filters and selects a repository", async () => {
+    const { onRepoFilterChange } = renderToolbar();
+
+    fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
+    fireEvent.change(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER), {
+      target: { value: "kdlbs" },
+    });
+    fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
+
+    expect(onRepoFilterChange).toHaveBeenCalledWith(KANDEV_REPO);
+  });
+
+  it("clears the repository filter from the All repos option", async () => {
+    const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
+
+    fireEvent.click(screen.getByText(KANDEV_REPO));
+    fireEvent.click(await screen.findByRole("option", { name: ALL_REPOS_LABEL }));
+
+    expect(onRepoFilterChange).toHaveBeenCalledWith("");
+  });
+
+  it("preserves the repository filter when the selected repository is reselected", async () => {
+    const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
+
+    fireEvent.click(screen.getByText(KANDEV_REPO));
+    fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
+
+    expect(onRepoFilterChange).not.toHaveBeenCalled();
+  });
+});

apps/web/components/github/my-github/list-toolbar.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { useMemo } from "react";
 import { IconRefresh } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { Input } from "@kandev/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
+import { Combobox, type ComboboxOption } from "@/components/combobox";
 import { cn } from "@/lib/utils";
 import { formatRelativeTime } from "@/lib/utils";
 
@@ -57,6 +58,13 @@ function RefreshControls({
   );
 }
 
+function buildRepoFilterOptions(repoOptions: string[]): ComboboxOption[] {
+  return [
+    { value: ALL_REPOS, label: "All repos", keywords: ["all", "repositories", "repos"] },
+    ...repoOptions.map((key) => ({ value: key, label: key, keywords: [key] })),
+  ];
+}
+
 export function ListToolbar({
   title,
   count,
@@ -73,6 +81,7 @@ export function ListToolbar({
 }: ListToolbarProps) {
   const selectValue = repoFilter || ALL_REPOS;
   const dirty = customQuery !== committedQuery;
+  const repoFilterOptions = useMemo(() => buildRepoFilterOptions(repoOptions), [repoOptions]);
   return (
     <div className="px-4 sm:px-6 py-2.5 border-b shrink-0 flex flex-col md:flex-row md:items-center md:flex-wrap gap-2 md:gap-3">
       <div className="flex items-center gap-2 min-w-0">
@@ -93,24 +102,22 @@ export function ListToolbar({
           />
         </div>
       </div>
-      <Select
+      <Combobox
         value={selectValue}
-        onValueChange={(v) => onRepoFilterChange(v === ALL_REPOS ? "" : v)}
-      >
-        <SelectTrigger className="w-full md:w-[220px] h-8 cursor-pointer">
-          <SelectValue placeholder="All repos" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value={ALL_REPOS} className="cursor-pointer">
-            All repos
-          </SelectItem>
-          {repoOptions.map((key) => (
-            <SelectItem key={key} value={key} className="cursor-pointer">
-              {key}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+        onValueChange={(v) => {
+          // Combobox signals "toggle off" with ""; All repos is the explicit clear path.
+          if (!v) return;
+          onRepoFilterChange(v === ALL_REPOS ? "" : v);
+        }}
+        options={repoFilterOptions}
+        placeholder="All repos"
+        searchPlaceholder="Filter repositories..."
+        emptyMessage="No repositories found."
+        triggerClassName="w-full md:w-[220px] h-8 border border-input bg-background hover:bg-secondary/50 px-2 py-1.5 text-xs/relaxed"
+        className="md:min-w-[360px]"
+        testId="github-repo-filter-trigger"
+        dropdownTestId="github-repo-filter-dropdown"
+      />
       <div className="w-full md:flex-1 md:min-w-[240px] relative">
         <Input
           value={customQuery}