From 7715ef38d79068e48a7c2d6387f801492127cdee Mon Sep 17 00:00:00 2001
From: Ivan Malison <IvanMalison@gmail.com>
Date: Wed, 22 Jul 2026 02:36:21 -0700
Subject: [PATCH] Add search to new-thread project picker

---
 .../src/components/chat/DraftHeroHeadline.tsx | 176 +++++++++++++-----
 .../chat/draftHeroProjectSearch.test.ts       |  31 +++
 .../components/chat/draftHeroProjectSearch.ts |  20 ++
 3 files changed, 181 insertions(+), 46 deletions(-)
 create mode 100644 apps/web/src/components/chat/draftHeroProjectSearch.test.ts
 create mode 100644 apps/web/src/components/chat/draftHeroProjectSearch.ts

diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 98091f9aab6..4796edfd09c 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -1,7 +1,10 @@
 import type { ScopedProjectRef } from "@t3tools/contracts";
-import { scopedProjectKey, scopeProjectRef } from "@t3tools/client-runtime/environment";
-import { FolderPlusIcon } from "lucide-react";
-import { useCallback, useMemo } from "react";
+import {
+  scopedProjectKey,
+  scopeProjectRef,
+} from "@t3tools/client-runtime/environment";
+import { FolderPlusIcon, SearchIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
 import { openCommandPalette } from "~/commandPaletteBus";
 import { useNewThreadHandler } from "~/hooks/useHandleNewThread";
@@ -15,14 +18,15 @@ import { useProjects, useThreadShells } from "~/state/entities";
 import { useEnvironments, usePrimaryEnvironmentId } from "~/state/environments";
 import { sortLogicalProjectsForSidebar } from "../Sidebar.logic";
 import {
-  Menu,
-  MenuItem,
-  MenuPopup,
-  MenuRadioGroup,
-  MenuRadioItem,
-  MenuSeparator,
-  MenuTrigger,
-} from "../ui/menu";
+  Combobox,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+} from "../ui/combobox";
+import { filterDraftHeroProjects } from "./draftHeroProjectSearch";
 
 interface DraftHeroHeadlineProps {
   readonly activeProjectRef: ScopedProjectRef | null;
@@ -37,15 +41,27 @@ export function DraftHeroHeadline({
   const threads = useThreadShells();
   const { environments } = useEnvironments();
   const primaryEnvironmentId = usePrimaryEnvironmentId();
-  const projectGroupingSettings = useClientSettings(selectProjectGroupingSettings);
-  const projectSortOrder = useClientSettings((settings) => settings.sidebarProjectSortOrder);
+  const projectGroupingSettings = useClientSettings(
+    selectProjectGroupingSettings,
+  );
+  const projectSortOrder = useClientSettings(
+    (settings) => settings.sidebarProjectSortOrder,
+  );
   const handleNewThread = useNewThreadHandler();
-  const openAddProject = useCallback(() => openCommandPalette({ open: "add-project" }), []);
+  const openAddProject = useCallback(
+    () => openCommandPalette({ open: "add-project" }),
+    [],
+  );
+  const [isProjectPickerOpen, setIsProjectPickerOpen] = useState(false);
+  const [projectQuery, setProjectQuery] = useState("");
 
   const environmentLabelById = useMemo(
     () =>
       new Map(
-        environments.map((environment) => [environment.environmentId, environment.label] as const),
+        environments.map(
+          (environment) =>
+            [environment.environmentId, environment.label] as const,
+        ),
       ),
     [environments],
   );
@@ -80,60 +96,128 @@ export function DraftHeroHeadline({
     [activeProjectRef, projectGroups],
   );
   const projectEntryByKey = useMemo(
-    () => new Map(projectPickerEntries.map((entry) => [entry.group.projectKey, entry] as const)),
+    () =>
+      new Map(
+        projectPickerEntries.map(
+          (entry) => [entry.group.projectKey, entry] as const,
+        ),
+      ),
     [projectPickerEntries],
   );
+  const filteredProjectEntries = useMemo(
+    () =>
+      filterDraftHeroProjects(
+        projectPickerEntries.map((entry) => ({
+          entry,
+          title: entry.group.displayName,
+          workspaceRoot: entry.targetProject.workspaceRoot,
+        })),
+        projectQuery,
+      ).map(({ entry }) => entry),
+    [projectPickerEntries, projectQuery],
+  );
   const activeProjectGroup =
     activeProjectRef === null
       ? null
       : (projectGroups.find((group) =>
           group.memberProjectRefs.some(
-            (projectRef) => scopedProjectKey(projectRef) === scopedProjectKey(activeProjectRef),
+            (projectRef) =>
+              scopedProjectKey(projectRef) ===
+              scopedProjectKey(activeProjectRef),
           ),
         ) ?? null);
   const activeProjectKey = activeProjectGroup?.projectKey ?? "";
-  const activeProjectDisplayName = activeProjectGroup?.displayName ?? activeProjectTitle;
+  const activeProjectDisplayName =
+    activeProjectGroup?.displayName ?? activeProjectTitle;
   const hasResolvedProject = activeProjectTitle !== null;
   const canChooseProject = projectPickerEntries.length > 0;
   const shouldShowProjectMenu = canChooseProject;
 
   const projectSelector = shouldShowProjectMenu ? (
-    <Menu>
-      <MenuTrigger
+    <Combobox
+      autoHighlight
+      items={projectPickerEntries.map(({ group }) => group.projectKey)}
+      filteredItems={filteredProjectEntries.map(
+        ({ group }) => group.projectKey,
+      )}
+      open={isProjectPickerOpen}
+      value={activeProjectKey}
+      onOpenChange={(open) => {
+        setIsProjectPickerOpen(open);
+        if (!open) {
+          setProjectQuery("");
+        }
+      }}
+      onValueChange={(value) => {
+        if (!value || value === activeProjectKey) {
+          setIsProjectPickerOpen(false);
+          return;
+        }
+        const entry = projectEntryByKey.get(value);
+        if (!entry) {
+          return;
+        }
+        setIsProjectPickerOpen(false);
+        const project = entry.targetProject;
+        void handleNewThread(
+          scopeProjectRef(project.environmentId, project.id),
+          {
+            replace: true,
+          },
+        );
+      }}
+    >
+      <ComboboxTrigger
         aria-label={hasResolvedProject ? "Change project" : "Choose a project"}
         className="pointer-events-auto inline cursor-pointer border-current border-b border-dotted text-foreground underline-offset-8 transition-opacity hover:opacity-75 focus-visible:rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
       >
         {activeProjectDisplayName ?? "Choose a project"}
-      </MenuTrigger>
-      <MenuPopup align="center" className="max-h-80 w-64 overflow-y-auto">
-        <MenuRadioGroup
-          value={activeProjectKey}
-          onValueChange={(value) => {
-            const entry = projectEntryByKey.get(value as string);
-            if (!entry || value === activeProjectKey) {
-              return;
-            }
-            const project = entry.targetProject;
-            void handleNewThread(scopeProjectRef(project.environmentId, project.id), {
-              replace: true,
-            });
-          }}
-        >
-          {projectPickerEntries.map(({ group }) => {
+      </ComboboxTrigger>
+      <ComboboxPopup align="center" className="w-72 max-w-[calc(100vw-1rem)]">
+        <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 text-muted-foreground/55"
+            />
+            <ComboboxInput
+              autoFocus
+              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={projectQuery}
+              onChange={(event) => setProjectQuery(event.target.value)}
+            />
+          </div>
+        </div>
+        <ComboboxEmpty>No matching projects.</ComboboxEmpty>
+        <ComboboxList className="max-h-64">
+          {filteredProjectEntries.map(({ group }) => {
             return (
-              <MenuRadioItem key={group.projectKey} value={group.projectKey} closeOnClick>
+              <ComboboxItem key={group.projectKey} value={group.projectKey}>
                 <span className="min-w-0 truncate">{group.displayName}</span>
-              </MenuRadioItem>
+              </ComboboxItem>
             );
           })}
-        </MenuRadioGroup>
-        <MenuSeparator />
-        <MenuItem onClick={openAddProject}>
-          <FolderPlusIcon />
-          New project
-        </MenuItem>
-      </MenuPopup>
-    </Menu>
+        </ComboboxList>
+        <div className="border-t border-border/70 p-1">
+          <button
+            type="button"
+            className="flex min-h-8 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-left text-base text-foreground outline-none hover:bg-accent focus-visible:bg-accent sm:min-h-7 sm:text-sm"
+            onClick={() => {
+              setIsProjectPickerOpen(false);
+              openAddProject();
+            }}
+          >
+            <FolderPlusIcon />
+            New project
+          </button>
+        </div>
+      </ComboboxPopup>
+    </Combobox>
   ) : (
     <button
       type="button"
diff --git a/apps/web/src/components/chat/draftHeroProjectSearch.test.ts b/apps/web/src/components/chat/draftHeroProjectSearch.test.ts
new file mode 100644
index 00000000000..ddd1e61a4e4
--- /dev/null
+++ b/apps/web/src/components/chat/draftHeroProjectSearch.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { filterDraftHeroProjects } from "./draftHeroProjectSearch";
+
+const projects = [
+  { title: "T3 Code", workspaceRoot: "/work/t3code" },
+  { title: "Mobile App", workspaceRoot: "/work/products/mobile" },
+  { title: "Marketing Site", workspaceRoot: "/work/products/marketing" },
+];
+
+describe("filterDraftHeroProjects", () => {
+  it("narrows candidates as the title query becomes more specific", () => {
+    expect(filterDraftHeroProjects(projects, "m").map((project) => project.title)).toEqual([
+      "Mobile App",
+      "Marketing Site",
+    ]);
+    expect(filterDraftHeroProjects(projects, "mob").map((project) => project.title)).toEqual([
+      "Mobile App",
+    ]);
+  });
+
+  it("matches project paths and multiple query tokens", () => {
+    expect(
+      filterDraftHeroProjects(projects, "products market").map((project) => project.title),
+    ).toEqual(["Marketing Site"]);
+  });
+
+  it("preserves candidate order for an empty query", () => {
+    expect(filterDraftHeroProjects(projects, "   ")).toEqual(projects);
+  });
+});
diff --git a/apps/web/src/components/chat/draftHeroProjectSearch.ts b/apps/web/src/components/chat/draftHeroProjectSearch.ts
new file mode 100644
index 00000000000..02f79b85095
--- /dev/null
+++ b/apps/web/src/components/chat/draftHeroProjectSearch.ts
@@ -0,0 +1,20 @@
+type SearchableProject = {
+  readonly title: string;
+  readonly workspaceRoot: string;
+};
+
+export function filterDraftHeroProjects<T extends SearchableProject>(
+  projects: ReadonlyArray<T>,
+  query: string,
+): T[] {
+  const tokens = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+
+  if (tokens.length === 0) {
+    return [...projects];
+  }
+
+  return projects.filter((project) => {
+    const searchText = `${project.title}\n${project.workspaceRoot}`.toLocaleLowerCase();
+    return tokens.every((token) => searchText.includes(token));
+  });
+}