fix(app): add server button dropdown (#33358)

Author: arvsrn

packages/app/src/components/settings-v2/servers.tsx

@@ -1,4 +1,3 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
@@ -14,7 +13,7 @@ import { ServerConnection, serverName } from "@/context/server"
 import { useServerManagementController } from "../dialog-select-server"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"
-import { isWslServer, useFilteredWslServers, WslAddServerButton, WslServerSettings } from "@/wsl/settings"
+import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/wsl/settings"
 import "./settings-v2.css"
 
 export const SettingsServersV2: Component = () => {
@@ -55,10 +54,7 @@ export const SettingsServersV2: Component = () => {
       >
         <div class="settings-v2-tab-header-row">
           <h2 class="settings-v2-tab-title">{language.t("status.popover.tab.servers")}</h2>
-          <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
-            {language.t("dialog.server.add.button")}
-          </ButtonV2>
-          <WslAddServerButton />
+          <AddServerMenu onAddServer={openAdd} />
         </div>
         <Show when={showSearch()}>
           <div class="settings-v2-tab-search">

packages/app/src/wsl/settings.tsx

@@ -24,22 +24,37 @@ export function isWslServer(server: ServerConnection.Any) {
   return server.type === "sidecar" && server.variant === "wsl"
 }
 
-export function WslAddServerButton() {
+export function AddServerMenu(props: { onAddServer: () => void }) {
   const platform = usePlatform()
   const dialog = useDialog()
   const language = useLanguage()
-  const openAdd = () => {
+  const openAddWsl = () => {
     dialog.push(() => (
       <Dialog title={language.t("wsl.server.add")} size="large" fit class="settings-v2-wsl-dialog">
         <DialogAddWslServer />
       </Dialog>
     ))
   }
   return (
-    <Show when={platform.wslServers}>
-      <ButtonV2 variant="ghost-muted" icon="plus" onClick={openAdd}>
-        {language.t("wsl.server.addShort")}
-      </ButtonV2>
+    <Show
+      when={platform.wslServers}
+      fallback={
+        <ButtonV2 variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
+          {language.t("dialog.server.add.button")}
+        </ButtonV2>
+      }
+    >
+      <MenuV2 gutter={4} modal={false} placement="bottom-end">
+        <MenuV2.Trigger as={ButtonV2} variant="ghost-muted" icon="plus">
+          {language.t("dialog.server.add.button")}
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</MenuV2.Item>
+            <MenuV2.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
     </Show>
   )
 }

packages/ui/src/v2/components/button-v2.css

@@ -132,14 +132,18 @@
   color: var(--v2-text-text-base);
 }
 
-[data-component="button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not([data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
 [data-component="button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 
+[data-component="button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
 [data-component="button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
   opacity: 0.5;
   cursor: not-allowed;
@@ -155,14 +159,23 @@
   color: var(--v2-icon-icon-muted);
 }
 
-[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not([data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
 [data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-text-text-base);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-base);
+}
+
 [data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
   opacity: 0.5;
   cursor: not-allowed;

packages/ui/src/v2/components/icon-button-v2.css

@@ -112,7 +112,7 @@
   color: var(--v2-text-text-base);
 }
 
-[data-component="icon-button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="icon-button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not([data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
@@ -131,7 +131,7 @@
   color: var(--v2-icon-icon-muted);
 }
 
-[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not([data-expanded]) {
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
@@ -140,6 +140,11 @@
   color: var(--v2-icon-icon-base);
 }
 
+[data-component="icon-button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-icon-icon-base);
+}
+
 [data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
   opacity: 0.5;
   cursor: not-allowed;