591 lines
22 KiB
TypeScript
591 lines
22 KiB
TypeScript
import {
|
|
createEffect,
|
|
createSignal,
|
|
For,
|
|
onCleanup,
|
|
Show,
|
|
splitProps,
|
|
type Accessor,
|
|
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 { ProjectAvatar } from "@opencode-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 selected = () => {
|
|
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 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(selected()?.worktree ?? "") ||
|
|
project.server?.key !== selected()?.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,
|
|
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>
|
|
)
|
|
}
|