feat(servers): replace enable/disable buttons with labeled toggle

Use a leftmost Enabled switch on server rows for clearer state and fewer action buttons.

Signed-off-by: crimsonsunset <jsangio1@gmail.com>

Author: crimsonsunset

apps/desktop/src/features/servers/ServerEnabledToggle.tsx

@@ -0,0 +1,34 @@
+import { Switch } from '@mcpmux/ui';
+
+interface ServerEnabledToggleProps {
+  serverId: string;
+  enabled: boolean;
+  isLoading: boolean;
+  disabled?: boolean;
+  onToggle: (enabled: boolean) => void;
+}
+
+/**
+ * Labeled enable/disable control for an installed server row.
+ */
+export function ServerEnabledToggle({
+  serverId,
+  enabled,
+  isLoading,
+  disabled = false,
+  onToggle,
+}: ServerEnabledToggleProps) {
+  const label = isLoading ? (enabled ? 'Disabling…' : 'Enabling…') : enabled ? 'Enabled' : 'Disabled';
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-[rgb(var(--muted))] whitespace-nowrap">{label}</span>
+      <Switch
+        checked={enabled}
+        onCheckedChange={onToggle}
+        disabled={disabled || isLoading}
+        data-testid={enabled ? `disable-server-${serverId}` : `enable-server-${serverId}`}
+      />
+    </div>
+  );
+}

apps/desktop/src/features/servers/ServersPage.tsx

@@ -25,6 +25,7 @@ import {
 } from 'lucide-react';
 import { Button, SearchField } from '@mcpmux/ui';
 import { ServerActionMenu } from './ServerActionMenu';
+import { ServerEnabledToggle } from './ServerEnabledToggle';
 import { CloneAccountModal } from './CloneAccountModal';
 import { AddServerMenu } from './AddServerMenu';
 import { ServersFiltersPopover } from './ServersFiltersPopover';
@@ -1451,16 +1452,26 @@ export function ServersPage() {
                       className="flex items-center gap-2 flex-shrink-0"
                       onClick={(event) => event.stopPropagation()}
                     >
-                      {/* Primary action button */}
-                      {serverAction === 'enable' && (
-                        <button
-                          onClick={() => handleEnableClick(server)}
-                          disabled={enableLoading}
-                          className="px-4 py-2 text-sm font-medium rounded-lg bg-[rgb(var(--success))] text-white hover:bg-[rgb(var(--success))]/80 shadow-sm transition-colors disabled:opacity-50"
-                          data-testid={`enable-server-${server.id}`}
-                        >
-                          {enableLoading ? 'Enabling...' : 'Enable'}
-                        </button>
+                      {(serverAction === 'enable' ||
+                        (server.enabled &&
+                          (serverAction === 'running' ||
+                            serverAction === 'connected_auto' ||
+                            serverAction === 'error'))) && (
+                        <ServerEnabledToggle
+                          serverId={server.id}
+                          enabled={server.enabled}
+                          isLoading={enableLoading || disableLoading}
+                          disabled={
+                            serverAction === 'connecting' || serverAction === 'authenticating'
+                          }
+                          onToggle={(checked) => {
+                            if (checked) {
+                              handleEnableClick(server);
+                            } else {
+                              handleDisableClick(server);
+                            }
+                          }}
+                        />
                       )}
 
                       {serverAction === 'configure' && (
@@ -1536,21 +1547,6 @@ export function ServersPage() {
                         </button>
                       )}
 
-                      {/* Disable button - enabled servers that are connected, idle, or stuck in error */}
-                      {server.enabled &&
-                        (serverAction === 'running' ||
-                          serverAction === 'connected_auto' ||
-                          serverAction === 'error') && (
-                        <button
-                          onClick={() => handleDisableClick(server)}
-                          disabled={disableLoading}
-                          className="px-4 py-2 text-sm rounded-lg border border-[rgb(var(--border))] text-[rgb(var(--muted))] hover:bg-[rgb(var(--surface-hover))] transition-colors disabled:opacity-50"
-                          data-testid={`disable-server-${server.id}`}
-                        >
-                          {disableLoading ? '...' : 'Disable'}
-                        </button>
-                      )}
-
                       {/* Overflow menu with secondary actions */}
                       <ServerActionMenu
                         serverId={server.id}