From fb2b08639701b44b63d8a9e8f14cd00701ddbb15 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 7 Sep 2026 20:16:29 +0000
Subject: [PATCH 1/3] fix(web): make settings project scopes searchable and
 scrollable

---
 .../components/settings/ProjectsSettings.tsx  | 89 +++++++++++++------
 1 file changed, 61 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/settings/ProjectsSettings.tsx b/apps/web/src/components/settings/ProjectsSettings.tsx
index 4eedaab63846..c8ed352935bc 100644
--- a/apps/web/src/components/settings/ProjectsSettings.tsx
+++ b/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>
   );
 }
 

From d57af40a2ac50fa7e69c3cb1d585db671112d6d9 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 7 Sep 2026 20:25:05 +0000
Subject: [PATCH 2/3] fix(web): use shared combobox input styling

---
 .../components/settings/ProjectsSettings.tsx  | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/settings/ProjectsSettings.tsx b/apps/web/src/components/settings/ProjectsSettings.tsx
index c8ed352935bc..a9573152021c 100644
--- a/apps/web/src/components/settings/ProjectsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectsSettings.tsx
@@ -60,22 +60,14 @@ function ScopePicker({
         <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 className="shrink-0 p-2">
+          <ComboboxInput
+            aria-label={`Search ${label}s`}
+            placeholder={`Search ${label}s...`}
+            startAddon={<SearchIcon />}
+            showTrigger={false}
+            size="sm"
+          />
         </div>
         <ComboboxEmpty>No matching {label}s.</ComboboxEmpty>
         <ComboboxList>

From c5499a50820abf1e0cb313badf49dfb09dc6cb51 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Mon, 7 Sep 2026 21:18:30 +0000
Subject: [PATCH 3/3] fix(web): share the sidebar project search styling

---
 apps/web/src/components/Sidebar.tsx           | 72 ++++++++-----------
 .../components/settings/ProjectsSettings.tsx  | 14 +---
 apps/web/src/components/ui/combobox.tsx       | 24 ++++++-
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 5182ee4d783e..954e10b38eb5 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -208,7 +208,7 @@ import { Input } from "./ui/input";
 import {
   Combobox,
   ComboboxEmpty,
-  ComboboxInput,
+  ComboboxSearchInput,
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
@@ -4395,48 +4395,34 @@ export default function Sidebar() {
                     align="start"
                     className="w-(--anchor-width) min-w-0 overflow-hidden"
                   >
-                    <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="true"
-                          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
-                        />
-                        <ComboboxInput
-                          aria-label="Search projects"
-                          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
-                          inputClassName="rounded-none bg-transparent text-sm"
-                          placeholder="Search projects..."
-                          showTrigger={false}
-                          size="sm"
-                          unstyled
-                          value={projectScopeMenuState.query}
-                          onKeyDown={(event) => {
-                            if (
-                              event.defaultPrevented ||
-                              event.nativeEvent.isComposing ||
-                              event.ctrlKey ||
-                              event.altKey ||
-                              event.metaKey ||
-                              (event.key !== "ContextMenu" &&
-                                !(event.shiftKey && event.key === "F10"))
-                            ) {
-                              return;
-                            }
-                            // Combobox items use virtual focus: keyboard events
-                            // stay on this input, not on the highlighted option.
-                            const scopeKey = highlightedProjectScopeKeyRef.current;
-                            const project = scopeKey ? projectGroupByScopeKey.get(scopeKey) : null;
-                            if (project) handleProjectSettings(event, project);
-                          }}
-                          onChange={(event) =>
-                            dispatchProjectScopeMenu({
-                              type: "query-changed",
-                              query: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
+                    <ComboboxSearchInput
+                      aria-label="Search projects"
+                      placeholder="Search projects..."
+                      value={projectScopeMenuState.query}
+                      onKeyDown={(event) => {
+                        if (
+                          event.defaultPrevented ||
+                          event.nativeEvent.isComposing ||
+                          event.ctrlKey ||
+                          event.altKey ||
+                          event.metaKey ||
+                          (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10"))
+                        ) {
+                          return;
+                        }
+                        // Combobox items use virtual focus: keyboard events
+                        // stay on this input, not on the highlighted option.
+                        const scopeKey = highlightedProjectScopeKeyRef.current;
+                        const project = scopeKey ? projectGroupByScopeKey.get(scopeKey) : null;
+                        if (project) handleProjectSettings(event, project);
+                      }}
+                      onChange={(event) =>
+                        dispatchProjectScopeMenu({
+                          type: "query-changed",
+                          query: event.target.value,
+                        })
+                      }
+                    />
                     <ComboboxEmpty>No matching projects.</ComboboxEmpty>
                     <ComboboxList>
                       {(item: (typeof projectScopeItems)[number]) => {
diff --git a/apps/web/src/components/settings/ProjectsSettings.tsx b/apps/web/src/components/settings/ProjectsSettings.tsx
index a9573152021c..b454517bcda7 100644
--- a/apps/web/src/components/settings/ProjectsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectsSettings.tsx
@@ -1,5 +1,5 @@
 import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
-import { ChevronDownIcon, FolderIcon, SearchIcon } from "lucide-react";
+import { ChevronDownIcon, FolderIcon } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 import { ProjectFavicon } from "../ProjectFavicon";
@@ -9,7 +9,7 @@ import { Toggle, ToggleGroup } from "../ui/toggle-group";
 import {
   Combobox,
   ComboboxEmpty,
-  ComboboxInput,
+  ComboboxSearchInput,
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
@@ -60,15 +60,7 @@ function ScopePicker({
         <ChevronDownIcon aria-hidden className="-me-1 size-3 opacity-50" />
       </ComboboxTrigger>
       <ComboboxPopup align="start" className="w-64">
-        <div className="shrink-0 p-2">
-          <ComboboxInput
-            aria-label={`Search ${label}s`}
-            placeholder={`Search ${label}s...`}
-            startAddon={<SearchIcon />}
-            showTrigger={false}
-            size="sm"
-          />
-        </div>
+        <ComboboxSearchInput aria-label={`Search ${label}s`} placeholder={`Search ${label}s...`} />
         <ComboboxEmpty>No matching {label}s.</ComboboxEmpty>
         <ComboboxList>
           {(item: (typeof items)[number]) => (
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index d9f09690331d..59bf4d637704 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
-import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import { ChevronsUpDownIcon, SearchIcon, XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
@@ -130,6 +130,27 @@ function ComboboxInput({
   );
 }
 
+function ComboboxSearchInput(props: React.ComponentProps<typeof ComboboxInput>) {
+  return (
+    <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="true"
+          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+        />
+        <ComboboxInput
+          {...props}
+          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+          inputClassName="rounded-none bg-transparent text-sm"
+          showTrigger={false}
+          size="sm"
+          unstyled
+        />
+      </div>
+    </div>
+  );
+}
+
 function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger className={className} data-slot="combobox-trigger" {...props}>
@@ -393,6 +414,7 @@ export {
   Combobox,
   ComboboxChipsInput,
   ComboboxInput,
+  ComboboxSearchInput,
   ComboboxTrigger,
   ComboboxPopup,
   ComboboxItem,