From 1e347887fe7464102c9cb5f12c80f7fa728a7573 Mon Sep 17 00:00:00 2001
From: Adam Leith <adamleithp@users.noreply.github.com>
Date: Fri, 8 May 2026 07:37:33 +0100
Subject: [PATCH] feat(code): project pickers on quill autocomplete

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../features/command/components/Command.css   |  21 ---
 .../features/command/components/Command.tsx   | 159 ------------------
 .../onboarding/components/ProjectSelect.css   |  80 ---------
 .../onboarding/components/ProjectSelect.tsx   | 109 +++++++-----
 .../sidebar/components/ProjectSwitcher.css    | 110 ------------
 .../sidebar/components/ProjectSwitcher.tsx    | 159 ++++++++++++------
 6 files changed, 172 insertions(+), 466 deletions(-)
 delete mode 100644 apps/code/src/renderer/features/command/components/Command.css
 delete mode 100644 apps/code/src/renderer/features/command/components/Command.tsx
 delete mode 100644 apps/code/src/renderer/features/onboarding/components/ProjectSelect.css
 delete mode 100644 apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.css

diff --git a/apps/code/src/renderer/features/command/components/Command.css b/apps/code/src/renderer/features/command/components/Command.css
deleted file mode 100644
index 23f8a48f5..000000000
--- a/apps/code/src/renderer/features/command/components/Command.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.command-dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.command-dialog-content {
-  position: fixed;
-  top: var(--space-9);
-  left: 50%;
-  z-index: 50;
-  transform: translateX(-50%);
-  width: 640px;
-  max-width: 90vw;
-  overflow: hidden;
-  border-radius: var(--radius-2);
-  border: 1px solid var(--gray-6);
-  background-color: var(--gray-1);
-  box-shadow: var(--shadow-6);
-}
diff --git a/apps/code/src/renderer/features/command/components/Command.tsx b/apps/code/src/renderer/features/command/components/Command.tsx
deleted file mode 100644
index 17117169b..000000000
--- a/apps/code/src/renderer/features/command/components/Command.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandRoot,
-} from "cmdk";
-import React from "react";
-import "./Command.css";
-
-type CommandRootProps = React.ComponentPropsWithoutRef<typeof CommandRoot> & {
-  className?: string;
-};
-
-const CommandRootWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandRoot>,
-  CommandRootProps
->(({ className, ...props }, ref) => {
-  return (
-    <CommandRoot
-      ref={ref}
-      className={`flex h-full w-full flex-col overflow-hidden ${className || ""}`}
-      {...props}
-    />
-  );
-});
-
-CommandRootWrapper.displayName = "CommandRoot";
-
-type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandInput> & {
-  className?: string;
-};
-
-const CommandInputWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandInput>,
-  CommandInputProps
->(({ className, ...props }, ref) => {
-  return <CommandInput ref={ref} className={className} {...props} />;
-});
-
-CommandInputWrapper.displayName = "CommandInput";
-
-type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandList> & {
-  className?: string;
-};
-
-const CommandListWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandList>,
-  CommandListProps
->(({ className, ...props }, ref) => {
-  return (
-    <CommandList
-      ref={ref}
-      className={`overflow-y-auto ${className || ""}`}
-      {...props}
-    />
-  );
-});
-
-CommandListWrapper.displayName = "CommandList";
-
-type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandItem> & {
-  className?: string;
-};
-
-const CommandItemWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandItem>,
-  CommandItemProps
->(({ className, ...props }, ref) => {
-  return (
-    <CommandItem
-      ref={ref}
-      className={`relative flex cursor-pointer select-none items-center px-3 py-2 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent-3 data-[disabled=true]:opacity-50 ${className || ""}`}
-      {...props}
-    />
-  );
-});
-
-CommandItemWrapper.displayName = "CommandItem";
-
-type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandGroup> & {
-  className?: string;
-  heading?: string;
-};
-
-const CommandGroupWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandGroup>,
-  CommandGroupProps
->(({ className, heading, children, ...props }, ref) => {
-  return (
-    <CommandGroup ref={ref} className={`p-1 ${className || ""}`} {...props}>
-      {heading && (
-        <div className="px-2 py-1.5 text-gray-11 text-sm">{heading}</div>
-      )}
-      {children}
-    </CommandGroup>
-  );
-});
-
-CommandGroupWrapper.displayName = "CommandGroup";
-
-type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandEmpty> & {
-  className?: string;
-};
-
-const CommandEmptyWrapper = React.forwardRef<
-  React.ElementRef<typeof CommandEmpty>,
-  CommandEmptyProps
->(({ className, ...props }, ref) => {
-  return (
-    <CommandEmpty
-      ref={ref}
-      className={`py-6 text-center text-sm ${className || ""}`}
-      {...props}
-    />
-  );
-});
-
-CommandEmptyWrapper.displayName = "CommandEmpty";
-
-type CommandDialogProps = React.ComponentPropsWithoutRef<
-  typeof CommandDialog
-> & {
-  className?: string;
-  contentClassName?: string;
-};
-
-const CommandDialogWrapper = ({
-  className,
-  contentClassName,
-  children,
-  ...props
-}: CommandDialogProps) => {
-  return (
-    <CommandDialog
-      label="Command menu"
-      className={className}
-      contentClassName={`command-dialog-content ${contentClassName || ""}`}
-      overlayClassName="command-dialog-overlay"
-      {...props}
-    >
-      {children}
-    </CommandDialog>
-  );
-};
-
-CommandDialogWrapper.displayName = "CommandDialog";
-
-export const Command = {
-  Root: CommandRootWrapper,
-  Dialog: CommandDialogWrapper,
-  Input: CommandInputWrapper,
-  List: CommandListWrapper,
-  Item: CommandItemWrapper,
-  Group: CommandGroupWrapper,
-  Empty: CommandEmptyWrapper,
-};
diff --git a/apps/code/src/renderer/features/onboarding/components/ProjectSelect.css b/apps/code/src/renderer/features/onboarding/components/ProjectSelect.css
deleted file mode 100644
index 3a6910188..000000000
--- a/apps/code/src/renderer/features/onboarding/components/ProjectSelect.css
+++ /dev/null
@@ -1,80 +0,0 @@
-.project-select-popover [cmdk-root] {
-  width: 100%;
-  background: var(--color-panel-solid);
-  border-radius: var(--radius-3);
-  border: 1px solid var(--gray-6);
-  box-shadow: var(--shadow-6);
-  overflow: hidden;
-}
-
-.project-select-popover [cmdk-input] {
-  font-family: var(--default-font-family);
-  font-size: 13px;
-  padding: 12px 16px;
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--gray-12);
-  caret-color: var(--accent-9);
-}
-
-.project-select-popover [cmdk-input]::placeholder {
-  color: var(--gray-9);
-}
-
-.project-select-popover [cmdk-list] {
-  max-height: 240px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  overscroll-behavior: contain;
-  transition: height 150ms ease;
-}
-
-.project-select-popover [cmdk-list]::-webkit-scrollbar {
-  width: 8px;
-}
-
-.project-select-popover [cmdk-list]::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.project-select-popover [cmdk-list]::-webkit-scrollbar-thumb {
-  background: var(--gray-6);
-  border-radius: 4px;
-}
-
-.project-select-popover [cmdk-list]::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-7);
-}
-
-.project-select-popover [cmdk-item] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--radius-2);
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 150ms ease;
-  color: var(--gray-12);
-  margin: 0 4px;
-}
-
-.project-select-popover [cmdk-item][data-selected="true"] {
-  background: var(--accent-3);
-  color: var(--accent-11);
-}
-
-.project-select-popover [cmdk-item]:active {
-  background: var(--accent-4);
-}
-
-.project-select-popover [cmdk-empty] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  font-size: 13px;
-  color: var(--gray-9);
-}
diff --git a/apps/code/src/renderer/features/onboarding/components/ProjectSelect.tsx b/apps/code/src/renderer/features/onboarding/components/ProjectSelect.tsx
index 2fa0611c2..42ce7f436 100644
--- a/apps/code/src/renderer/features/onboarding/components/ProjectSelect.tsx
+++ b/apps/code/src/renderer/features/onboarding/components/ProjectSelect.tsx
@@ -1,8 +1,13 @@
-import { Command } from "@features/command/components/Command";
 import { Check } from "@phosphor-icons/react";
-import { Flex, Popover, Text } from "@radix-ui/themes";
+import {
+  Autocomplete,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompleteStatus,
+} from "@posthog/quill";
+import { Popover, Text } from "@radix-ui/themes";
 import { useState } from "react";
-import "./ProjectSelect.css";
 
 interface ProjectSelectProps {
   projectId: number;
@@ -13,6 +18,8 @@ interface ProjectSelectProps {
   size?: "1" | "2";
 }
 
+type ProjectInfo = { id: number; name: string };
+
 export function ProjectSelect({
   projectId,
   projectName,
@@ -22,13 +29,22 @@ export function ProjectSelect({
   size = "2",
 }: ProjectSelectProps) {
   const [open, setOpen] = useState(false);
-  const currentProject = projects.find((p) => p.id === projectId);
-  const defaultValue = currentProject
-    ? `${currentProject.name} ${currentProject.id}`
-    : undefined;
-  const [highlightedValue, setHighlightedValue] = useState(defaultValue);
+  const [query, setQuery] = useState("");
   const sizeClass = size === "1" ? "text-[13px]" : "text-sm";
 
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) setQuery("");
+  };
+
+  const handleSelect = (id: string | null) => {
+    if (id === null) return;
+    const next = Number(id);
+    if (Number.isNaN(next)) return;
+    onProjectChange(next);
+    setOpen(false);
+  };
+
   if (projects.length <= 1) {
     return (
       <Text className={`text-(--gray-12) opacity-50 ${sizeClass}`}>
@@ -43,15 +59,7 @@ export function ProjectSelect({
         {projectName}
         {" · "}
       </span>
-      <Popover.Root
-        open={open}
-        onOpenChange={(nextOpen) => {
-          setOpen(nextOpen);
-          if (nextOpen) {
-            setHighlightedValue(defaultValue);
-          }
-        }}
-      >
+      <Popover.Root open={open} onOpenChange={handleOpenChange}>
         <Popover.Trigger>
           <button
             type="button"
@@ -68,39 +76,54 @@ export function ProjectSelect({
           </button>
         </Popover.Trigger>
         <Popover.Content
-          className="project-select-popover p-0"
+          className="w-[320px] gap-0 border border-(--gray-6) bg-(--color-panel-solid) p-0 shadow-6"
           side="bottom"
           align="start"
           sideOffset={8}
         >
-          <Command.Root
-            shouldFilter={true}
-            label="Project picker"
-            value={highlightedValue}
-            onValueChange={setHighlightedValue}
+          <Autocomplete<ProjectInfo>
+            inline
+            defaultOpen
+            items={projects}
+            value={query}
+            autoHighlight="always"
+            onValueChange={(val, eventDetails) => {
+              if (eventDetails.reason !== "input-change") return;
+              if (typeof val === "string") setQuery(val);
+            }}
+            filter={(project, q) => {
+              if (!q) return true;
+              return project.name.toLowerCase().includes(q.toLowerCase());
+            }}
           >
-            <Command.Input placeholder="Search projects..." autoFocus={true} />
-            <Command.List>
-              <Command.Empty>No projects found.</Command.Empty>
-              {projects.map((project) => (
-                <Command.Item
+            <AutocompleteInput
+              placeholder="Search projects…"
+              autoFocus
+              showClear
+            />
+            <AutocompleteStatus
+              emptyContent={
+                <span>
+                  No projects match <strong>"{query}"</strong>
+                </span>
+              }
+            />
+            <AutocompleteList className="max-h-[240px] pt-1">
+              {(project: ProjectInfo) => (
+                <AutocompleteItem
                   key={project.id}
-                  value={`${project.name} ${project.id}`}
-                  onSelect={() => {
-                    onProjectChange(project.id);
-                    setOpen(false);
-                  }}
+                  value={String(project.id)}
+                  onClick={() => handleSelect(String(project.id))}
+                  className="flex items-center justify-between gap-3"
                 >
-                  <Flex align="center" justify="between" width="100%">
-                    <Text className="text-sm">{project.name}</Text>
-                    {project.id === projectId && (
-                      <Check size={14} className="text-accent-11" />
-                    )}
-                  </Flex>
-                </Command.Item>
-              ))}
-            </Command.List>
-          </Command.Root>
+                  <span className="text-sm">{project.name}</span>
+                  {project.id === projectId && (
+                    <Check size={14} className="text-accent-11" />
+                  )}
+                </AutocompleteItem>
+              )}
+            </AutocompleteList>
+          </Autocomplete>
         </Popover.Content>
       </Popover.Root>
     </Text>
diff --git a/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.css b/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.css
deleted file mode 100644
index 315ce42e2..000000000
--- a/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.project-picker-dialog [cmdk-root] {
-  width: 100%;
-  background: var(--color-panel-solid);
-  border-radius: var(--radius-3);
-  border: 1px solid var(--gray-6);
-  overflow: hidden;
-}
-
-.project-picker-dialog [cmdk-input] {
-  font-family: var(--default-font-family);
-  font-size: 13px;
-  padding: 12px 16px;
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--gray-12);
-  caret-color: var(--accent-9);
-}
-
-.project-picker-dialog [cmdk-input]::placeholder {
-  color: var(--gray-9);
-}
-
-.project-picker-dialog [cmdk-list] {
-  max-height: 400px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  overscroll-behavior: contain;
-  transition: height 150ms ease;
-}
-
-.project-picker-dialog [cmdk-list]::-webkit-scrollbar {
-  width: 8px;
-}
-
-.project-picker-dialog [cmdk-list]::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.project-picker-dialog [cmdk-list]::-webkit-scrollbar-thumb {
-  background: var(--gray-6);
-  border-radius: 4px;
-}
-
-.project-picker-dialog [cmdk-list]::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-7);
-}
-
-.project-picker-dialog [cmdk-group] {
-  padding: 4px 8px;
-}
-
-.project-picker-dialog [cmdk-group-heading] {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--gray-11);
-  padding: 8px 12px 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.project-picker-dialog [cmdk-item] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--radius-2);
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 150ms ease;
-  color: var(--gray-12);
-}
-
-.project-picker-dialog [cmdk-item][data-selected="true"] {
-  background: var(--accent-3);
-  color: var(--accent-11);
-}
-
-.project-picker-dialog [cmdk-item][data-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.project-picker-dialog [cmdk-item]:active {
-  background: var(--accent-4);
-}
-
-.project-picker-dialog [cmdk-empty] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 64px;
-  font-size: 13px;
-  color: var(--gray-9);
-}
-
-.project-picker-dialog [cmdk-separator] {
-  height: 1px;
-  background: var(--gray-6);
-  margin: 4px 0;
-}
-
-.rt-DialogContent:has(.project-picker-dialog) {
-  padding: 0;
-  background: transparent;
-  border: 1px solid var(--gray-6);
-  box-shadow: var(--shadow-6);
-}
diff --git a/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.tsx b/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.tsx
index 4b6c43f6d..56a5500f2 100644
--- a/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/ProjectSwitcher.tsx
@@ -3,7 +3,7 @@ import {
   useSelectProjectMutation,
 } from "@features/auth/hooks/authMutations";
 import { useAuthStateValue } from "@features/auth/hooks/authQueries";
-import { Command } from "@features/command/components/Command";
+import { CommandKeyHints } from "@features/command/components/CommandKeyHints";
 import { useProjects } from "@features/projects/hooks/useProjects";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import {
@@ -18,14 +18,17 @@ import {
   ShieldCheck,
   SignOut,
 } from "@phosphor-icons/react";
-import { Box, Dialog, Flex, Text } from "@radix-ui/themes";
-import { trpcClient } from "@renderer/trpc/client";
-import { getCloudUrlFromRegion } from "@shared/utils/urls";
-import { EXTERNAL_LINKS } from "@utils/links";
-import { isMac } from "@utils/platform";
-import { useState } from "react";
-import "./ProjectSwitcher.css";
 import {
+  Autocomplete,
+  AutocompleteCollection,
+  AutocompleteGroup,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteLabel,
+  AutocompleteList,
+  AutocompleteStatus,
+  Dialog,
+  DialogContent,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -42,7 +45,16 @@ import {
   ItemTitle,
   Kbd,
 } from "@posthog/quill";
+import { Box } from "@radix-ui/themes";
+import { trpcClient } from "@renderer/trpc/client";
+import { getCloudUrlFromRegion } from "@shared/utils/urls";
+import { EXTERNAL_LINKS } from "@utils/links";
+import { isMac } from "@utils/platform";
 import { ChevronRightIcon } from "lucide-react";
+import { useState } from "react";
+
+type ProjectInfo = { id: number; name: string };
+type ProjectGroup = ReturnType<typeof useProjects>["groupedProjects"][number];
 
 export function ProjectSwitcher() {
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -234,7 +246,6 @@ export function ProjectSwitcher() {
         setDialogOpen={setDialogOpen}
         groupedProjects={groupedProjects}
         currentProjectId={currentProjectId}
-        currentProject={currentProject}
         handleProjectSelect={handleProjectSelect}
       />
     </>
@@ -244,64 +255,106 @@ export function ProjectSwitcher() {
 interface ProjectPickerDialogInnerProps {
   dialogOpen: boolean;
   setDialogOpen: (open: boolean) => void;
-  groupedProjects: ReturnType<typeof useProjects>["groupedProjects"];
+  groupedProjects: ProjectGroup[];
   currentProjectId: number | null;
-  currentProject: { id: number; name: string } | undefined;
   handleProjectSelect: (projectId: number) => void;
 }
 
+type ProjectSection = { label?: string; items: ProjectInfo[] };
+
 function ProjectPickerDialogInner({
   dialogOpen,
   setDialogOpen,
   groupedProjects,
   currentProjectId,
-  currentProject,
   handleProjectSelect,
 }: ProjectPickerDialogInnerProps) {
-  const defaultValue = currentProject
-    ? `${currentProject.name} ${currentProject.id}`
-    : undefined;
-  const [highlightedValue, setHighlightedValue] = useState(defaultValue);
+  const [query, setQuery] = useState("");
+
+  const handleOpenChange = (open: boolean) => {
+    setDialogOpen(open);
+    if (!open) setQuery("");
+  };
+
+  // Group by org. When there's a single org, drop the label so we don't
+  // render a single redundant header.
+  const sections: ProjectSection[] = groupedProjects.map((group) => ({
+    label: groupedProjects.length > 1 ? group.orgName : undefined,
+    items: group.projects,
+  }));
+
+  const handleSelect = (id: string | null) => {
+    if (id === null) return;
+    const projectId = Number(id);
+    if (Number.isNaN(projectId)) return;
+    handleProjectSelect(projectId);
+  };
 
   return (
-    <Dialog.Root
-      open={dialogOpen}
-      onOpenChange={(open) => {
-        setDialogOpen(open);
-        if (open) {
-          setHighlightedValue(defaultValue);
-        }
-      }}
-    >
-      <Dialog.Content className="project-picker-dialog max-w-[600px] p-0">
-        <Command.Root
-          shouldFilter={true}
-          label="Project picker"
-          value={highlightedValue}
-          onValueChange={setHighlightedValue}
+    <Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className="w-[600px] max-w-[90vw] gap-0 p-0"
+        showCloseButton={false}
+      >
+        <Autocomplete<ProjectInfo>
+          inline
+          defaultOpen
+          items={sections}
+          value={query}
+          autoHighlight="always"
+          onValueChange={(val, eventDetails) => {
+            if (eventDetails.reason !== "input-change") return;
+            if (typeof val === "string") setQuery(val);
+          }}
+          filter={(project, q) => {
+            if (!q) return true;
+            return project.name.toLowerCase().includes(q.toLowerCase());
+          }}
         >
-          <Command.Input placeholder="Search projects..." autoFocus={true} />
-          <Command.List>
-            <Command.Empty>No projects found.</Command.Empty>
-            {groupedProjects.flatMap((group) =>
-              group.projects.map((project) => (
-                <Command.Item
-                  key={project.id}
-                  value={`${project.name} ${project.id}`}
-                  onSelect={() => handleProjectSelect(project.id)}
-                >
-                  <Flex align="center" justify="between" width="100%">
-                    <Text className="text-[13px]">{project.name}</Text>
-                    {project.id === currentProjectId && (
-                      <Check size={14} className="text-accent-11" />
-                    )}
-                  </Flex>
-                </Command.Item>
-              )),
+          <AutocompleteInput
+            placeholder="Search projects…"
+            autoFocus
+            showClear
+          />
+          <AutocompleteStatus
+            emptyContent={
+              <span>
+                No projects match <strong>"{query}"</strong>
+              </span>
+            }
+          />
+          <AutocompleteList
+            className={`max-h-[60vh] ${sections[0]?.label ? "" : "pt-1"}`}
+          >
+            {(section: ProjectSection, index: number) => (
+              <AutocompleteGroup
+                key={section.label ?? `group-${index}`}
+                items={section.items}
+              >
+                {section.label && (
+                  <AutocompleteLabel>{section.label}</AutocompleteLabel>
+                )}
+                <AutocompleteCollection>
+                  {(project: ProjectInfo) => (
+                    <AutocompleteItem
+                      key={project.id}
+                      value={String(project.id)}
+                      onClick={() => handleSelect(String(project.id))}
+                      className="flex items-center justify-between gap-3"
+                    >
+                      <span className="text-[13px]">{project.name}</span>
+                      {project.id === currentProjectId && (
+                        <Check size={14} className="text-accent-11" />
+                      )}
+                    </AutocompleteItem>
+                  )}
+                </AutocompleteCollection>
+              </AutocompleteGroup>
             )}
-          </Command.List>
-        </Command.Root>
-      </Dialog.Content>
-    </Dialog.Root>
+          </AutocompleteList>
+        </Autocomplete>
+        <CommandKeyHints />
+      </DialogContent>
+    </Dialog>
   );
 }