monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

refactor(app): replace Popover with DropdownMenu for server options

Browse Source
This commit is contained in:
David Hill
2026-01-24 21:25:47 +00:00
parent b824fc5516
commit a878b8d7ac
1 changed files with 37 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
packages/app/src/components/dialog-select-server.tsx
View File

@@ -11,7 +11,7 @@ import { usePlatform } from "@/context/platform"
import { createOpencodeClient } from "@opencode-ai/sdk/v2/client" import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
import { useNavigate } from "@solidjs/router" import { useNavigate } from "@solidjs/router"
import { useLanguage } from "@/context/language" import { useLanguage } from "@/context/language"
import { Popover } from "@opencode-ai/ui/popover" import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
import { Tooltip } from "@opencode-ai/ui/tooltip" import { Tooltip } from "@opencode-ai/ui/tooltip"
import { useGlobalSDK } from "@/context/global-sdk" import { useGlobalSDK } from "@/context/global-sdk"
@@ -394,7 +394,6 @@ export function DialogSelectServer() {
} }
> >
{(i) => { {(i) => {
const [popoverOpen, setPopoverOpen] = createSignal(false)
const [truncated, setTruncated] = createSignal(false) const [truncated, setTruncated] = createSignal(false)
let nameRef: HTMLSpanElement | undefined let nameRef: HTMLSpanElement | undefined
let versionRef: HTMLSpanElement | undefined let versionRef: HTMLSpanElement | undefined
@@ -476,33 +475,19 @@ export function DialogSelectServer() {
<p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p> <p class="text-text-weak text-12-regular">{language.t("dialog.server.current")}</p>
</Show> </Show>
<div onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}> <DropdownMenu>
<Popover <DropdownMenu.Trigger
open={popoverOpen()} as={IconButton}
onOpenChange={setPopoverOpen} icon="dot-grid"
placement="bottom-start" variant="ghost"
trigger={ class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
<IconButton onClick={(e: MouseEvent) => e.stopPropagation()}
icon="dot-grid" onPointerDown={(e: PointerEvent) => e.stopPropagation()}
variant="ghost" />
class="shrink-0 size-8 hover:bg-surface-base-hover" <DropdownMenu.Portal>
classList={{ <DropdownMenu.Content class="mt-1">
"bg-transparent": !popoverOpen(), <DropdownMenu.Item
"bg-surface-base-active": popoverOpen(), onSelect={() => {
}}
onPointerDown={(event: PointerEvent) => event.stopPropagation()}
/>
}
class="w-max !min-w-fit !max-w-none"
>
<div class="flex flex-col gap-1">
<Button
variant="ghost"
size="normal"
class="justify-start text-md"
onClick={(e: MouseEvent) => {
e.stopPropagation()
setPopoverOpen(false)
setStore("editServer", { setStore("editServer", {
id: i, id: i,
value: i, value: i,
@@ -511,54 +496,42 @@ export function DialogSelectServer() {
}) })
}} }}
> >
{language.t("dialog.server.menu.edit")} <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
</Button> </DropdownMenu.Item>
<Show when={isDesktop && defaultUrl() !== i}> <Show when={isDesktop && defaultUrl() !== i}>
<Button <DropdownMenu.Item
variant="ghost" onSelect={async () => {
size="normal"
class="justify-start text-md"
onClick={async (e: MouseEvent) => {
e.stopPropagation()
setPopoverOpen(false)
await platform.setDefaultServerUrl?.(i) await platform.setDefaultServerUrl?.(i)
defaultUrlActions.refetch(i) defaultUrlActions.refetch(i)
}} }}
> >
{language.t("dialog.server.menu.default")} <DropdownMenu.ItemLabel>
</Button> {language.t("dialog.server.menu.default")}
</DropdownMenu.ItemLabel>
</DropdownMenu.Item>
</Show> </Show>
<Show when={isDesktop && defaultUrl() === i}> <Show when={isDesktop && defaultUrl() === i}>
<Button <DropdownMenu.Item
variant="ghost" onSelect={async () => {
size="normal"
class="justify-start text-md"
onClick={async (e: MouseEvent) => {
e.stopPropagation()
setPopoverOpen(false)
await platform.setDefaultServerUrl?.(null) await platform.setDefaultServerUrl?.(null)
defaultUrlActions.refetch(null) defaultUrlActions.refetch(null)
}} }}
> >
{language.t("dialog.server.menu.defaultRemove")} <DropdownMenu.ItemLabel>
</Button> {language.t("dialog.server.menu.defaultRemove")}
</DropdownMenu.ItemLabel>
</DropdownMenu.Item>
</Show> </Show>
<div class="h-px bg-border-weak-base my-1" /> <DropdownMenu.Separator />
<Button <DropdownMenu.Item
variant="ghost" onSelect={() => handleRemove(i)}
size="normal" class="text-text-on-critical-base hover:bg-surface-critical-weak"
class="justify-start text-md text-text-on-critical-base hover:bg-surface-critical-weak"
onClick={(e: MouseEvent) => {
e.stopPropagation()
setPopoverOpen(false)
handleRemove(i)
}}
> >
{language.t("dialog.server.menu.delete")} <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
</Button> </DropdownMenu.Item>
</div> </DropdownMenu.Content>
</Popover> </DropdownMenu.Portal>
</div> </DropdownMenu>
</div> </div>
</Show> </Show>
</div> </div>