Commit b744bded016b15b9b5ade552a3e28270ac20176f | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-10-09 18:47:15-07:00
committer	GitHub <noreply@github.com> 2026-10-09 18:47:15-07:00
log	b744bded016b15b9b5ade552a3e28270ac20176f
tree	94858f3f15c8342e034c7ddc424c952d048aeb61
parent	3e94afa7c26734f525a7d8a9cdb47896e8618cf8
signature	Signed by PGP key B5690EEEBB952194

feat(web): draft screen project picker is searchable (#17664)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 114 insertions(+), 77 deletions(-)

apps
- web
  - src
    components
    chat
    DraftHeroHeadline.tsx

apps/web/src/components/chat/DraftHeroHeadline.tsx+114-77

 @@ -3,13 +3,12 @@ import { composerDraftHasUserContent, useComposerDraftStore } from "~/composerDr
 import { resolveEnvironmentMachineKind, type ScopedProjectRef } from "@t3tools/contracts";
 import { scopedProjectKey, scopeProjectRef } from "@t3tools/client-runtime/environment";
 import { isScratchProject } from "@t3tools/client-runtime/state/projects";
-import { FolderPlusIcon, MessageSquareDashedIcon } from "lucide-react";
+import { FolderPlusIcon } from "lucide-react";
 import { useAtomValue } from "@effect/atom-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { openCommandPalette } from "~/commandPaletteBus";
 import { shortcutLabelForCommand } from "~/keybindings";
-import { projectIconColorClassName } from "~/projectIconColors";
 import { primaryServerKeybindingsAtom } from "~/state/server";
 import { useNewThreadHandler } from "~/hooks/useHandleNewThread";
 import { useScratchProject } from "~/hooks/useScratchProject";
 @@ -30,20 +29,27 @@ import { ProjectEnvironmentBadge } from "../ProjectEnvironmentBadge";
 import { ProjectFavicon } from "../ProjectFavicon";
 import { sortLogicalProjectsForSidebar } from "../Sidebar.logic";
 import {
-  Menu,
+  Combobox,
-  MenuItem,
+  ComboboxEmpty,
-  MenuPopup,
+  ComboboxItem,
-  MenuRadioGroup,
+  ComboboxList,
-  MenuRadioItem,
+  ComboboxPopup,
-  MenuSeparator,
+  ComboboxSearchInput,
-  MenuTrigger,
+  ComboboxTrigger,
-} from "../ui/menu";
+  useComboboxFilter,
+} from "../ui/combobox";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { InlineButton } from "../ui/button";
 import { resolveProjectSettings } from "@t3tools/shared/projectSettings";
-// Menu value for "No project"; real entries are keyed by logical project key.
+// Picker value for the "Add project" row; real entries are keyed by logical
-const NO_PROJECT_VALUE = "no-project";
+// project key.
+const ADD_PROJECT_VALUE = "add-project";
+interface PickerItem {
+  readonly value: string;
+  readonly label: string;
+}
 interface DraftHeroHeadlineProps {
   readonly draftId: DraftId | null;
 @@ -147,11 +153,15 @@ export function DraftHeroHeadline({
   const hasResolvedProject = activeProjectTitle !== null;
   const canChooseProject = projectPickerEntries.length > 0;
   const shouldShowProjectMenu = canChooseProject;
-  // The project that hosts threads without a project appears once, as the
+  // The project that hosts threads without a project is not a row: the line
-  // "No project" item, not as a project row.
+  // under the headline is the way into it.
-  const menuEntries = projectPickerEntries.filter(
+  const menuEntries = useMemo(
-    ({ targetProject }) =>
+    () =>
-      !isScratchProject(targetProject, scratchWorkspaceRootFor(targetProject.environmentId)),
+      projectPickerEntries.filter(
+        ({ targetProject }) =>
+          !isScratchProject(targetProject, scratchWorkspaceRootFor(targetProject.environmentId)),
+      ),
+    [projectPickerEntries, scratchWorkspaceRootFor],
   );
   const activeProject =
     activeProjectRef === null
 @@ -168,6 +178,30 @@ export function DraftHeroHeadline({
   const isScratchDraft =
     activeProject !== null && isScratchProject(activeProject, scratchWorkspaceRoot);
+  // {value, label} items let Base UI drive the combobox selection while the
+  // popup search filters the same collection. "Add project" is an action, not
+  // a project, so it only trails the unfiltered list.
+  const pickerItems = useMemo<readonly PickerItem[]>(
+    () => [
+      ...menuEntries.map(({ group }) => ({ value: group.projectKey, label: group.displayName })),
+      { value: ADD_PROJECT_VALUE, label: "Add project" },
+    ],
+    [menuEntries],
+  );
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerQuery, setPickerQuery] = useState("");
+  const pickerFilter = useComboboxFilter();
+  const filteredPickerItems = useMemo(() => {
+    const query = pickerQuery.trim();
+    if (query.length === 0) return pickerItems;
+    return pickerItems.filter(
+      (item) =>
+        item.value !== ADD_PROJECT_VALUE &&
+        pickerFilter.contains(item, query, (candidate) => candidate.label),
+    );
+  }, [pickerFilter, pickerItems, pickerQuery]);
+  const selectedPickerItem = pickerItems.find((item) => item.value === activeProjectKey) ?? null;
   // The picker can change the draft's target while the no-project home is
   // still being opened; a stale continuation must not retarget it again.
   const latestTargetRef = useRef({ draftId, activeProjectKey, scratchTargetEnvironmentId });
 @@ -234,7 +268,32 @@ export function DraftHeroHeadline({
   };
   const projectSelector = shouldShowProjectMenu ? (
-    <Menu>
+    <Combobox
+      items={pickerItems}
+      filteredItems={filteredPickerItems}
+      autoHighlight
+      itemToStringLabel={(item) => item.label}
+      isItemEqualToValue={(a, b) => a.value === b.value}
+      open={pickerOpen}
+      onOpenChange={(open) => {
+        setPickerOpen(open);
+        setPickerQuery("");
+      }}
+      value={selectedPickerItem}
+      onValueChange={(item) => {
+        if (!item) return;
+        setPickerOpen(false);
+        if (item.value === ADD_PROJECT_VALUE) {
+          openAddProject();
+          return;
+        }
+        const entry = projectEntryByKey.get(item.value);
+        if (!entry || item.value === activeProjectKey) {
+          return;
+        }
+        selectProject(entry.targetProject, entry.group.projectKey);
+      }}
+    >
       <Tooltip>
         <TooltipTrigger
           render={
 @@ -242,7 +301,7 @@ export function DraftHeroHeadline({
             // project title) so the hero sentence reads naturally: an
             // aria-label here would replace the title with an action phrase
             // mid-sentence and baffle screen-reader users.
-            <MenuTrigger
+            <ComboboxTrigger
               render={<InlineButton tone="picker" />}
               data-draft-project-trigger=""
               className="pointer-events-auto max-w-64 align-baseline"
 @@ -257,65 +316,43 @@ export function DraftHeroHeadline({
           <TooltipPopup side="top">{activeProjectDisplayName}</TooltipPopup>
         ) : null}
       </Tooltip>
-      <MenuPopup align="center" className="max-h-80 overflow-y-auto">
+      <ComboboxPopup align="center" className="w-72 overflow-hidden">
-        <MenuRadioGroup
+        <ComboboxSearchInput
-          value={isScratchDraft ? NO_PROJECT_VALUE : activeProjectKey}
+          aria-label="Search projects"
-          onValueChange={(value) => {
+          placeholder="Search projects..."
-            if (value === NO_PROJECT_VALUE) {
+          value={pickerQuery}
-              void startScratch();
+          onChange={(event) => setPickerQuery(event.target.value)}
-              return;
+        />
-            }
+        <ComboboxEmpty>No matching projects.</ComboboxEmpty>
-            const entry = projectEntryByKey.get(value as string);
+        <ComboboxList>
-            if (!entry || value === activeProjectKey) {
+          {(item: PickerItem) => {
-              return;
+            const entry = projectEntryByKey.get(item.value);
-            }
-            selectProject(entry.targetProject, entry.group.projectKey);
-          }}
-        >
-          {scratchWorkspaceRoot === null ? null : (
-            <MenuRadioItem value={NO_PROJECT_VALUE} closeOnClick>
-              <span className="flex min-w-0 items-center gap-2">
-                {/* Boxed like ProjectFavicon so the label lines up with project rows. */}
-                <span
-                  aria-hidden="true"
-                  className={`inline-flex size-4 shrink-0 ${projectIconColorClassName("gray")}`}
-                >
-                  <MessageSquareDashedIcon className="size-full" />
-                </span>
-                No project
-              </span>
-            </MenuRadioItem>
-          )}
-          {menuEntries.map(({ group }) => {
             return (
-              <MenuRadioItem key={group.projectKey} value={group.projectKey} closeOnClick>
+              <ComboboxItem key={item.value} hideIndicator value={item}>
-                <span className="flex min-w-0 items-center gap-2">
+                {item.value === ADD_PROJECT_VALUE ? (
-                  <ProjectFavicon project={group} className="size-4 shrink-0" />
+                  <FolderPlusIcon className="size-4 shrink-0" />
-                  <Tooltip>
+                ) : entry ? (
-                    <TooltipTrigger render={<span className="block min-w-0 truncate" />}>
+                  <ProjectFavicon project={entry.group} className="size-4 shrink-0" />
-                      {group.displayName}
+                ) : null}
-                    </TooltipTrigger>
+                <Tooltip>
-                    <TooltipPopup side="top">{group.displayName}</TooltipPopup>
+                  <TooltipTrigger render={<span className="min-w-0 flex-1 truncate text-sm" />}>
-                  </Tooltip>
+                    {item.label}
-                  {showProjectEnvironments ? (
+                  </TooltipTrigger>
-                    <ProjectEnvironmentBadge
+                  <TooltipPopup side="top">{item.label}</TooltipPopup>
-                      group={group}
+                </Tooltip>
-                      primaryEnvironmentId={primaryEnvironmentId}
+                {entry && showProjectEnvironments ? (
-                      machineByEnvironmentId={environmentMachineById}
+                  <ProjectEnvironmentBadge
-                    />
+                    group={entry.group}
-                  ) : null}
+                    primaryEnvironmentId={primaryEnvironmentId}
-                </span>
+                    machineByEnvironmentId={environmentMachineById}
-              </MenuRadioItem>
+                  />
+                ) : null}
+              </ComboboxItem>
             );
-          })}
+          }}
-        </MenuRadioGroup>
+        </ComboboxList>
-        {projectPickerEntries.length > 0 ? <MenuSeparator /> : null}
+      </ComboboxPopup>
-        <MenuItem onClick={openAddProject}>
+    </Combobox>
-          <FolderPlusIcon />
-          Add project
-        </MenuItem>
-      </MenuPopup>
-    </Menu>
   ) : (
     <button
       type="button"