fix(web): make settings project scopes searchable and scrollable

apps/web/src/components/settings/ProjectsSettings.tsx

@@ -1,12 +1,22 @@
 import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
-import { FolderIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { ChevronDownIcon, FolderIcon, SearchIcon } from "lucide-react";
+import { type ReactNode, useState } from "react";
 import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 import { ProjectFavicon } from "../ProjectFavicon";
 import { WorkspacePageContainer } from "../WorkspacePageContainer";
 import { useEnvironments } from "../../state/environments";
 import { Toggle, ToggleGroup } from "../ui/toggle-group";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+} from "../ui/combobox";
+import { selectTriggerVariants } from "../ui/select";
+import { cn } from "../../lib/utils";
 import { ProjectSettingsPanel, useSettingsProjectGroups } from "./ProjectSettingsPanel";
 import { ProjectDefaultsSettings } from "./ProjectDefaultsSettings";
 
@@ -21,44 +31,67 @@ function ScopePicker({
   options: ReadonlyArray<{ value: string; label: string; icon?: ReactNode }>;
   onChange: (value: string | null) => void;
 }) {
+  const [query, setQuery] = useState("");
   const selected = options.find((option) => option.value === value);
   const allIcon =
     label === "project" ? <FolderIcon aria-hidden className="size-3.5 shrink-0" /> : null;
+  const items = [{ value: "all", label: `All ${label}s`, icon: allIcon }, ...options];
   return (
-    <Select
-      value={value ?? "all"}
+    <Combobox
+      items={items}
+      value={items.find((item) => item.value === (value ?? "all")) ?? null}
+      inputValue={query}
+      onInputValueChange={setQuery}
+      onOpenChange={() => setQuery("")}
       onValueChange={(next) => {
-        if (next) onChange(next === "all" ? null : next);
+        if (next) onChange(next.value === "all" ? null : next.value);
       }}
     >
-      <SelectTrigger
-        size="compact"
+      <ComboboxTrigger
         aria-label={`${label === "project" ? "Project" : "Machine"} scope`}
-        className="w-auto min-w-0 max-w-52"
+        className={cn(selectTriggerVariants({ size: "compact" }), "w-auto min-w-0 max-w-52")}
       >
-        <SelectValue className="flex min-w-0 items-center gap-1.5">
+        <span className="flex min-w-0 items-center gap-1.5">
           {value === null ? allIcon : selected?.icon}
           <span className="truncate">
             {value === null ? `All ${label}s` : (selected?.label ?? `Unavailable ${label}`)}
           </span>
-        </SelectValue>
-      </SelectTrigger>
-      <SelectPopup align="start" alignItemWithTrigger={false}>
-        <SelectItem value="all">
-          <span className="flex items-center gap-2">
-            {allIcon}All {label}s
-          </span>
-        </SelectItem>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            <span className="flex items-center gap-2">
-              {option.icon}
-              {option.label}
-            </span>
-          </SelectItem>
-        ))}
-      </SelectPopup>
-    </Select>
+        </span>
+        <ChevronDownIcon aria-hidden className="-me-1 size-3 opacity-50" />
+      </ComboboxTrigger>
+      <ComboboxPopup align="start" className="w-64">
+        <div className="shrink-0 px-3 pt-2.5">
+          <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
+            <SearchIcon
+              aria-hidden
+              className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+            />
+            <ComboboxInput
+              aria-label={`Search ${label}s`}
+              className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+              inputClassName="rounded-none bg-transparent text-sm"
+              placeholder={`Search ${label}s...`}
+              showTrigger={false}
+              size="sm"
+              unstyled
+            />
+          </div>
+        </div>
+        <ComboboxEmpty>No matching {label}s.</ComboboxEmpty>
+        <ComboboxList>
+          {(item: (typeof items)[number]) => (
+            <ComboboxItem
+              key={item.value}
+              value={item}
+              contentClassName="flex min-w-0 items-center gap-2"
+            >
+              {item.icon}
+              <span className="truncate">{item.label}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
   );
 }