fix(app): align project picker menu

packages/app/src/components/prompt-project-selector.tsx

@@ -9,9 +9,8 @@ import {
   type ComponentProps,
 } from "solid-js"
 import { createStore } from "solid-js/store"
-import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { getProjectAvatarVariant } from "@/context/layout"
 import { useLanguage } from "@/context/language"
@@ -197,6 +196,7 @@ export function PromptProjectSelector(props: {
   placement?: "bottom" | "bottom-start"
 }) {
   const [triggerReady, setTriggerReady] = createSignal(false)
+  const [showActive, setShowActive] = createSignal(true)
   let contentRef: HTMLDivElement | undefined
   const dismiss = createMenuDismissController(() => contentRef)
   let triggerFrame: number | undefined
@@ -277,166 +277,173 @@ export function PromptProjectSelector(props: {
   })
 
   return (
-    <DropdownMenu
+    <MenuV2
       open={triggerReady() && props.controller.open()}
       placement={props.placement ?? "bottom"}
       gutter={4}
       modal={false}
       onOpenChange={(open) => {
         if (open) dismiss.allowTriggerRestore()
+        if (open) setShowActive(true)
         props.controller.setOpen(open)
       }}
     >
-      <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
+      <MenuV2.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
+      <MenuV2.Portal>
+        <MenuV2.Content
           ref={contentRef}
           id="prompt-project-menu"
-          class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
+          class="w-[243px] overflow-hidden [&[data-closed]]:!animate-none"
           onOpenAutoFocus={(event) => event.preventDefault()}
           onPointerDownOutside={dismiss.preventTriggerRestore}
           onFocusOutside={dismiss.preventTriggerRestore}
           onCloseAutoFocus={dismiss.onCloseAutoFocus}
+          onMouseEnter={() => setShowActive(false)}
         >
-          <div class="flex flex-col p-0.5">
-            <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
-              <Icon name="magnifying-glass" size="small" class="shrink-0" />
-              <input
-                ref={(el) => props.controller.setSearchRef(el)}
-                value={props.controller.search()}
-                placeholder={props.controller.labels.search()}
-                aria-autocomplete="list"
-                aria-controls="prompt-project-menu"
-                aria-activedescendant={props.controller.active() || undefined}
-                class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
-                onInput={(event) => props.controller.setSearch(event.currentTarget.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Tab") {
-                    event.preventDefault()
-                    event.stopPropagation()
-                    if (event.shiftKey) {
-                      focusPreviousControl()
-                      return
-                    }
-                    activeItem()?.focus()
-                    return
-                  }
+          <div class="flex h-7 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
+            <Icon name="magnifying-glass" size="small" class="shrink-0" />
+            <input
+              ref={(el) => props.controller.setSearchRef(el)}
+              value={props.controller.search()}
+              placeholder={props.controller.labels.search()}
+              aria-autocomplete="list"
+              aria-controls="prompt-project-menu"
+              aria-activedescendant={props.controller.active() || undefined}
+              class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
+              onInput={(event) => {
+                setShowActive(true)
+                props.controller.setSearch(event.currentTarget.value)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Tab") {
+                  event.preventDefault()
                   event.stopPropagation()
-                  if (event.key === "Escape") {
-                    event.preventDefault()
-                    props.controller.setOpen(false)
+                  if (event.shiftKey) {
+                    focusPreviousControl()
                     return
                   }
-                  if (event.altKey || event.metaKey) return
-                  if (event.key === "ArrowDown") {
-                    event.preventDefault()
-                    moveActive(1)
-                    return
-                  }
-                  if (event.key === "ArrowUp") {
-                    event.preventDefault()
-                    moveActive(-1)
-                    return
-                  }
-                  if (event.key === "Enter" && !event.isComposing) {
-                    event.preventDefault()
-                    selectActive()
-                  }
-                }}
-              />
-              <Show when={props.controller.search().trim()}>
-                <button
-                  type="button"
-                  class="flex size-5 items-center justify-center rounded-sm text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
-                  onPointerDown={(event) => event.preventDefault()}
-                  onClick={() => props.controller.clearSearch()}
-                  aria-label={props.controller.labels.clear()}
-                >
-                  <Icon name="close-small" size="small" />
-                </button>
-              </Show>
-            </div>
-            <div class="max-h-[224px] overflow-y-auto">
-              <Show
-                when={props.controller.servers().length > 1}
-                fallback={
-                  <DropdownMenu.RadioGroup value={selectedValue()}>
-                    <For each={props.controller.projects()}>
-                      {(project) => (
-                        <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
-                      )}
-                    </For>
-                  </DropdownMenu.RadioGroup>
+                  activeItem()?.focus()
+                  return
                 }
+                event.stopPropagation()
+                if (event.key === "Escape") {
+                  event.preventDefault()
+                  props.controller.setOpen(false)
+                  return
+                }
+                if (event.altKey || event.metaKey) return
+                if (event.key === "ArrowDown") {
+                  event.preventDefault()
+                  setShowActive(true)
+                  moveActive(1)
+                  return
+                }
+                if (event.key === "ArrowUp") {
+                  event.preventDefault()
+                  setShowActive(true)
+                  moveActive(-1)
+                  return
+                }
+                if (event.key === "Enter" && !event.isComposing) {
+                  event.preventDefault()
+                  selectActive()
+                }
+              }}
+            />
+            <Show when={props.controller.search().trim()}>
+              <button
+                type="button"
+                class="flex size-5 items-center justify-center rounded-sm text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
+                onPointerDown={(event) => event.preventDefault()}
+                onClick={() => props.controller.clearSearch()}
+                aria-label={props.controller.labels.clear()}
               >
-                <For
-                  each={props.controller
-                    .servers()
-                    .filter((server) =>
-                      props.controller.projects().some((project) => project.server?.key === server!.key),
-                    )}
-                >
-                  {(server) => (
-                    <div>
-                      <div class="flex h-7 select-none items-center pl-1.5 pr-3 text-[11px] font-[530] leading-none tracking-[0.05px] text-v2-text-text-faint">
-                        {server!.name}
-                      </div>
-                      <DropdownMenu.RadioGroup value={selectedValue()}>
-                        <For
-                          each={props.controller.projects().filter((project) => project.server?.key === server!.key)}
-                        >
-                          {(project) => (
-                            <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
-                          )}
-                        </For>
-                      </DropdownMenu.RadioGroup>
-                    </div>
-                  )}
-                </For>
-              </Show>
-            </div>
+                <Icon name="close-small" size="small" />
+              </button>
+            </Show>
           </div>
-          <div class="h-px bg-v2-border-border-muted" />
-          <div class="flex flex-col p-0.5">
+          <div class="max-h-[224px] overflow-y-auto">
             <Show
               when={props.controller.servers().length > 1}
               fallback={
-                <ProjectAction
-                  server={props.controller.servers()[0]?.key}
-                  controller={props.controller}
-                  onSelect={selectAction}
-                />
+                <MenuV2.RadioGroup value={selectedValue()}>
+                  <For each={props.controller.projects()}>
+                    {(project) => (
+                      <ProjectItem
+                        project={project}
+                        controller={props.controller}
+                        showActive={showActive}
+                        onSelect={selectProject}
+                      />
+                    )}
+                  </For>
+                </MenuV2.RadioGroup>
               }
             >
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger
-                  id={props.controller.actionKey()}
-                  data-option-key={props.controller.actionKey()}
-                  class={projectActionClass}
-                  classList={{
-                    "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === props.controller.actionKey(),
-                  }}
-                  onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
-                >
-                  <Icon name="plus" size="small" />
-                  <span data-slot="dropdown-menu-item-label" class="min-w-0 flex-1 truncate leading-5">
-                    {props.controller.labels.add()}
-                  </span>
-                  <Icon name="chevron-right" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-                </DropdownMenu.SubTrigger>
-                <DropdownMenu.Portal>
-                  <DropdownMenu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
-                    <For each={props.controller.servers()}>
-                      {(server) => <ServerAction server={server!} onSelect={selectAction} />}
-                    </For>
-                  </DropdownMenu.SubContent>
-                </DropdownMenu.Portal>
-              </DropdownMenu.Sub>
+              <For
+                each={props.controller
+                  .servers()
+                  .filter((server) =>
+                    props.controller.projects().some((project) => project.server?.key === server!.key),
+                  )}
+              >
+                {(server) => (
+                  <div>
+                    <MenuV2.GroupLabel>{server!.name}</MenuV2.GroupLabel>
+                    <MenuV2.RadioGroup value={selectedValue()}>
+                      <For each={props.controller.projects().filter((project) => project.server?.key === server!.key)}>
+                        {(project) => (
+                          <ProjectItem
+                            project={project}
+                            controller={props.controller}
+                            showActive={showActive}
+                            onSelect={selectProject}
+                          />
+                        )}
+                      </For>
+                    </MenuV2.RadioGroup>
+                  </div>
+                )}
+              </For>
             </Show>
           </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu>
+          <MenuV2.Separator />
+          <Show
+            when={props.controller.servers().length > 1}
+            fallback={
+              <ProjectAction
+                server={props.controller.servers()[0]?.key}
+                controller={props.controller}
+                showActive={showActive}
+                onSelect={selectAction}
+              />
+            }
+          >
+            <MenuV2.Sub>
+              <MenuV2.SubTrigger
+                id={props.controller.actionKey()}
+                data-option-key={props.controller.actionKey()}
+                classList={{
+                  "!bg-v2-overlay-simple-overlay-hover":
+                    showActive() && props.controller.active() === props.controller.actionKey(),
+                }}
+                onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
+              >
+                <Icon name="plus" size="small" />
+                <span class="min-w-0 flex-1 truncate">{props.controller.labels.add()}</span>
+              </MenuV2.SubTrigger>
+              <MenuV2.Portal>
+                <MenuV2.SubContent class="min-w-[180px]">
+                  <For each={props.controller.servers()}>
+                    {(server) => <ServerAction server={server!} onSelect={selectAction} />}
+                  </For>
+                </MenuV2.SubContent>
+              </MenuV2.Portal>
+            </MenuV2.Sub>
+          </Show>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
   )
 }
 
@@ -503,24 +510,17 @@ function ProjectTrigger(props: ComponentProps<"button"> & { controller: PromptPr
 function ProjectItem(props: {
   project: PromptProject
   controller: PromptProjectController
+  showActive: Accessor<boolean>
   onSelect: (project: PromptProject) => void
 }) {
   const key = () => props.controller.projectKey(props.project)
   return (
-    <DropdownMenu.RadioItem
+    <MenuV2.RadioItem
       id={key()}
       value={key()}
       data-option-key={key()}
-      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
-      classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
-      style={{
-        "font-family": "var(--v2-font-family-sans)",
-        "font-size": "13px",
-        "font-weight": 440,
-        "line-height": "20px",
-        "letter-spacing": "-0.04px",
-        color: "var(--v2-text-text-base)",
-        padding: "0 12px",
+      classList={{
+        "!bg-v2-overlay-simple-overlay-hover": props.showActive() && props.controller.active() === key(),
       }}
       closeOnSelect
       onMouseEnter={() => {
@@ -534,37 +534,24 @@ function ProjectItem(props: {
         src={getProjectAvatarSource(props.project.id, props.project.icon)}
         variant={getProjectAvatarVariant(props.project.icon?.color)}
       />
-      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">{displayName(props.project)}</DropdownMenu.ItemLabel>
-      <DropdownMenu.ItemIndicator style={{ width: "14px", height: "14px", right: "12px" }}>
-        <IconV2 name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
-      </DropdownMenu.ItemIndicator>
-    </DropdownMenu.RadioItem>
+      <span class="min-w-0 truncate">{displayName(props.project)}</span>
+    </MenuV2.RadioItem>
   )
 }
 
-const projectActionClass =
-  "h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-family:var(--v2-font-family-sans)] data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
-
 function ProjectAction(props: {
   server?: string
   controller: PromptProjectController
+  showActive: Accessor<boolean>
   onSelect: (server?: string) => void
 }) {
   const key = () => props.controller.actionKey(props.server)
   return (
-    <DropdownMenu.Item
+    <MenuV2.Item
       id={key()}
       data-option-key={key()}
-      class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
-      classList={{ "!bg-v2-overlay-simple-overlay-hover": props.controller.active() === key() }}
-      style={{
-        "font-family": "var(--v2-font-family-sans)",
-        "font-size": "13px",
-        "font-weight": 440,
-        "line-height": "20px",
-        "letter-spacing": "-0.04px",
-        color: "var(--v2-text-text-base)",
-        padding: "0 12px",
+      classList={{
+        "!bg-v2-overlay-simple-overlay-hover": props.showActive() && props.controller.active() === key(),
       }}
       onMouseEnter={() => {
         props.controller.setActive(key())
@@ -573,17 +560,15 @@ function ProjectAction(props: {
       onSelect={() => props.onSelect(props.server)}
     >
       <Icon name="plus" size="small" />
-      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">
-        {props.controller.labels.add()}
-      </DropdownMenu.ItemLabel>
-    </DropdownMenu.Item>
+      <span class="min-w-0 truncate">{props.controller.labels.add()}</span>
+    </MenuV2.Item>
   )
 }
 
 function ServerAction(props: { server: { key: string; name: string }; onSelect: (server: string) => void }) {
   return (
-    <DropdownMenu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
-      <DropdownMenu.ItemLabel class="min-w-0 flex-1 truncate leading-5">{props.server.name}</DropdownMenu.ItemLabel>
-    </DropdownMenu.Item>
+    <MenuV2.Item onSelect={() => props.onSelect(props.server.key)}>
+      <span class="min-w-0 flex-1 truncate">{props.server.name}</span>
+    </MenuV2.Item>
   )
 }