@neurocode-ai/app 1.18.8

package/src/components/prompt-project-selector.tsx

@@ -0,0 +1,593 @@
+import {
+  createEffect,
+  createSignal,
+  For,
+  onCleanup,
+  Show,
+  splitProps,
+  type Accessor,
+  type ComponentProps,
+} from "solid-js"
+import { createStore } from "solid-js/store"
+import { DropdownMenu } from "@neurocode-ai/ui/dropdown-menu"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { Icon as IconV2 } from "@neurocode-ai/ui/v2/icon"
+import { ProjectAvatar } from "@neurocode-ai/ui/v2/project-avatar-v2"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { useLanguage } from "@/context/language"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { pathKey } from "@/utils/path-key"
+import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+
+export type PromptProject = {
+  name?: string
+  id?: string
+  worktree: string
+  sandboxes?: string[]
+  icon?: { color?: string; url?: string; override?: string }
+  server?: { key: string; name: string }
+}
+
+export type PromptProjectControls = {
+  available: PromptProject[]
+  directory: string
+  server?: string
+  select: (worktree: string, server?: string) => void
+  add: (title: string, server?: string) => void
+}
+
+const actionPrefix = "action:"
+const projectPrefix = "project:"
+
+function projectKey(project: PromptProject) {
+  return `${projectPrefix}${encodeURIComponent(project.server?.key ?? "")}:${encodeURIComponent(project.worktree)}`
+}
+
+function actionKey(server?: string) {
+  return `${actionPrefix}${encodeURIComponent(server ?? "")}`
+}
+
+export function createPromptProjectController(input: {
+  controls: Accessor<PromptProjectControls>
+  onDone: () => void
+}) {
+  const language = useLanguage()
+  const [store, setStore] = createStore({ open: false, search: "", active: "" })
+  let searchRef: HTMLInputElement | undefined
+
+  const current = () => {
+    const key = pathKey(input.controls().directory)
+    return input
+      .controls()
+      .available.find(
+        (project) =>
+          (!project.server || project.server.key === input.controls().server) &&
+          (pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key)),
+      )
+  }
+  const selected = () => current() ?? input.controls().available[0]
+  const projects = () => {
+    const search = store.search.trim().toLowerCase()
+    if (!search) return input.controls().available
+    return input.controls().available.filter((project) => displayName(project).toLowerCase().includes(search))
+  }
+  const servers = () =>
+    input
+      .controls()
+      .available.map((project) => project.server)
+      .filter((server, index, all) => server && all.findIndex((item) => item?.key === server.key) === index)
+  const keys = () => {
+    if (servers().length <= 1) {
+      return [...projects().map(projectKey), actionKey(servers()[0]?.key)]
+    }
+    return [
+      ...servers().flatMap((server) =>
+        projects()
+          .filter((project) => project.server?.key === server!.key)
+          .map(projectKey),
+      ),
+      actionKey(),
+    ]
+  }
+  const initialActive = () => {
+    const selectedKey = selected() ? projectKey(selected()!) : undefined
+    const options = keys()
+    if (selectedKey && options.includes(selectedKey)) return selectedKey
+    return options[0] ?? ""
+  }
+  const close = () => {
+    setStore({ open: false, search: "", active: "" })
+    input.onDone()
+  }
+  const select = (project: PromptProject) => {
+    if (
+      pathKey(project.worktree) !== pathKey(current()?.worktree ?? "") ||
+      project.server?.key !== current()?.server?.key
+    ) {
+      input.controls().select(project.worktree, project.server?.key)
+    }
+    close()
+  }
+  const add = (server?: string) => {
+    setStore({ open: false, search: "", active: "" })
+    input.controls().add(language.t("command.project.open"), server)
+  }
+  const setSearch = (value: string) => {
+    const search = value.trim().toLowerCase()
+    const first = input
+      .controls()
+      .available.find((project) => !search || displayName(project).toLowerCase().includes(search))
+    setStore({
+      search: value,
+      active: first ? projectKey(first) : actionKey(servers().length > 1 ? undefined : servers()[0]?.key),
+    })
+  }
+
+  return {
+    selected,
+    empty: () => input.controls().available.length === 0,
+    projects,
+    servers,
+    projectKey,
+    actionKey,
+    open: () => store.open,
+    search: () => store.search,
+    active: () => store.active,
+    labels: {
+      add: () => language.t("session.new.project.add"),
+      clear: () => language.t("common.clear"),
+      new: () => language.t("session.new.project.new"),
+      search: () => language.t("session.new.project.search"),
+    },
+    add,
+    select,
+    setOpen(open: boolean) {
+      if (open) {
+        setStore({ open: true, active: initialActive() })
+        setTimeout(() => requestAnimationFrame(() => searchRef?.focus()))
+        return
+      }
+      setStore({ open: false, search: "", active: "" })
+    },
+    setSearch,
+    clearSearch() {
+      setStore({ search: "", active: initialActive() })
+      setTimeout(() => searchRef?.focus())
+    },
+    setActive(key: string) {
+      setStore("active", key)
+    },
+    moveActive(delta: number) {
+      const options = keys()
+      if (options.length === 0) return
+      const index = options.indexOf(store.active)
+      const start = index === -1 ? 0 : index
+      setStore("active", options[(start + delta + options.length) % options.length])
+    },
+    activeProject() {
+      return store.active.startsWith(projectPrefix)
+        ? projects().find((project) => projectKey(project) === store.active)
+        : undefined
+    },
+    activeServer() {
+      return store.active.startsWith(actionPrefix)
+        ? decodeURIComponent(store.active.slice(actionPrefix.length)) || undefined
+        : undefined
+    },
+    activeAction() {
+      return store.active.startsWith(actionPrefix)
+    },
+    setSearchRef(el: HTMLInputElement) {
+      searchRef = el
+    },
+    focusSearch() {
+      setTimeout(() => requestAnimationFrame(() => searchRef?.focus()))
+    },
+    handleSearchKeydown(event: KeyboardEvent) {
+      return handleDocumentSearchKeydown(searchRef, event, store.search, setSearch)
+    },
+  }
+}
+
+export type PromptProjectController = ReturnType<typeof createPromptProjectController>
+
+export function PromptProjectSelector(props: {
+  controller: PromptProjectController
+  placement?: "bottom" | "bottom-start"
+}) {
+  const [triggerReady, setTriggerReady] = createSignal(false)
+  let contentRef: HTMLDivElement | undefined
+  let triggerFrame: number | undefined
+  let restoreTrigger = true
+
+  // Floating UI requires a connected anchor; route transitions can construct this trigger before adoption.
+  const setTriggerRef = (element: HTMLButtonElement) => {
+    const ready = () => {
+      if (!element.isConnected) {
+        triggerFrame = requestAnimationFrame(ready)
+        return
+      }
+      triggerFrame = undefined
+      setTriggerReady(true)
+    }
+    ready()
+  }
+
+  onCleanup(() => {
+    if (triggerFrame !== undefined) cancelAnimationFrame(triggerFrame)
+  })
+
+  const activeItem = () =>
+    props.controller.active()
+      ? contentRef?.querySelector<HTMLElement>(`[data-option-key="${CSS.escape(props.controller.active())}"]`)
+      : undefined
+  const afterClose = (callback: () => void) => {
+    const complete = () => {
+      if (contentRef?.isConnected) {
+        requestAnimationFrame(complete)
+        return
+      }
+      requestAnimationFrame(() => requestAnimationFrame(callback))
+    }
+    requestAnimationFrame(complete)
+  }
+  const selectProject = (project: PromptProject) => {
+    restoreTrigger = false
+    props.controller.setOpen(false)
+    afterClose(() => props.controller.select(project))
+  }
+  const selectAction = (server?: string) => {
+    restoreTrigger = false
+    props.controller.setOpen(false)
+    afterClose(() => props.controller.add(server))
+  }
+  const selectActive = () => {
+    const project = props.controller.activeProject()
+    if (project) {
+      selectProject(project)
+      return
+    }
+    if (props.controller.activeAction() && props.controller.servers().length > 1) {
+      const item = activeItem()
+      item?.focus()
+      item?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }))
+      return
+    }
+    selectAction(props.controller.activeServer())
+  }
+  const moveActive = (delta: number) => {
+    props.controller.moveActive(delta)
+    queueMicrotask(() => activeItem()?.scrollIntoView({ block: "nearest" }))
+  }
+  const focusPreviousControl = () => {
+    const target = Array.from(
+      document.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    )
+      .filter((element) => !contentRef?.contains(element) && !element.hasAttribute("data-focus-trap"))
+      .findLast((element) => element.offsetParent !== null)
+    restoreTrigger = false
+    target?.focus()
+    queueMicrotask(() => {
+      if (props.controller.open()) props.controller.setOpen(false)
+    })
+  }
+  const selectedValue = () => {
+    const project = props.controller.selected()
+    return project ? props.controller.projectKey(project) : undefined
+  }
+
+  createEffect(() => {
+    if (!props.controller.open()) return
+    const handler = (event: KeyboardEvent) => props.controller.handleSearchKeydown(event)
+    document.addEventListener("keydown", handler, true)
+    onCleanup(() => document.removeEventListener("keydown", handler, true))
+  })
+
+  return (
+    <DropdownMenu
+      open={triggerReady() && props.controller.open()}
+      placement={props.placement ?? "bottom"}
+      gutter={4}
+      modal={false}
+      onOpenChange={(open) => props.controller.setOpen(open)}
+    >
+      <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
+      <DropdownMenu.Portal>
+        <DropdownMenu.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"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          onPointerDownOutside={() => (restoreTrigger = false)}
+          onFocusOutside={() => (restoreTrigger = false)}
+          onCloseAutoFocus={(event) => {
+            if (!restoreTrigger) event.preventDefault()
+          }}
+        >
+          <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
+                  }
+                  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()
+                    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>
+            <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>
+              }
+            >
+              <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>
+          <div class="h-px bg-v2-border-border-muted" />
+          <div class="flex flex-col p-0.5">
+            <Show
+              when={props.controller.servers().length > 1}
+              fallback={
+                <ProjectAction
+                  server={props.controller.servers()[0]?.key}
+                  controller={props.controller}
+                  onSelect={selectAction}
+                />
+              }
+            >
+              <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>
+            </Show>
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}
+
+export function PromptProjectAddButton(props: { controller: PromptProjectController }) {
+  return (
+    <button
+      data-action="prompt-project"
+      type="button"
+      class="flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-sm px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+      onClick={() => props.controller.add()}
+    >
+      <Icon name="folder-add-left" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+      <span class="min-w-0 truncate leading-5">{props.controller.labels.new()}</span>
+      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+    </button>
+  )
+}
+
+function ProjectTrigger(props: ComponentProps<"button"> & { controller: PromptProjectController }) {
+  const [local, rest] = splitProps(props, ["controller", "class", "classList", "onClick", "onKeyDown"])
+  const project = () => local.controller.selected()
+  return (
+    <button
+      {...rest}
+      data-action="prompt-project"
+      type="button"
+      class="flex h-7 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 transition-colors focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+      classList={{
+        ...local.classList,
+        "hover:bg-v2-overlay-simple-overlay-hover": !local.controller.open(),
+        "bg-v2-overlay-simple-overlay-pressed": local.controller.open(),
+        "text-v2-text-text-muted": local.controller.open(),
+      }}
+      onClick={local.onClick ?? (() => local.controller.setOpen(true))}
+      onKeyDown={(event) => {
+        if (!local.controller.open() && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+          event.preventDefault()
+          event.stopPropagation()
+          return
+        }
+        if (typeof local.onKeyDown === "function") local.onKeyDown(event)
+      }}
+    >
+      <Show
+        when={project()}
+        fallback={<Icon name="folder-add-left" size="small" class="shrink-0 text-v2-icon-icon-muted" />}
+      >
+        {(item) => (
+          <ProjectAvatar
+            fallback={displayName(item())}
+            src={getProjectAvatarSource(item().id, item().icon)}
+            variant={getProjectAvatarVariant(item().icon?.color)}
+          />
+        )}
+      </Show>
+      <span class="min-w-0 truncate leading-5">
+        {project() ? displayName(project()!) : local.controller.labels.new()}
+      </span>
+      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+    </button>
+  )
+}
+
+function ProjectItem(props: {
+  project: PromptProject
+  controller: PromptProjectController
+  onSelect: (project: PromptProject) => void
+}) {
+  const key = () => props.controller.projectKey(props.project)
+  return (
+    <DropdownMenu.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",
+      }}
+      closeOnSelect
+      onMouseEnter={() => {
+        props.controller.setActive(key())
+        props.controller.focusSearch()
+      }}
+      onSelect={() => props.onSelect(props.project)}
+    >
+      <ProjectAvatar
+        fallback={displayName(props.project)}
+        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>
+  )
+}
+
+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
+  onSelect: (server?: string) => void
+}) {
+  const key = () => props.controller.actionKey(props.server)
+  return (
+    <DropdownMenu.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",
+      }}
+      onMouseEnter={() => {
+        props.controller.setActive(key())
+        props.controller.focusSearch()
+      }}
+      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>
+  )
+}
+
+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>
+  )
+}