Internalize accordion state in ServerSettingsForm

Move expandedSections/onExpandedSectionsChange from props to internal
useState. The accordion open/close is local display logic, not parent
state. Add optional defaultExpandedSections prop for initial state.

Simplify UnconnectedView WithSettingsModal story — no longer needs
external state management for accordion sections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx

@@ -15,8 +15,6 @@ const meta: Meta<typeof ServerSettingsForm> = {
   title: "Groups/ServerSettingsForm",
   component: ServerSettingsForm,
   args: {
-    expandedSections: ["connectionMode"],
-    onExpandedSectionsChange: fn(),
     onConnectionModeChange: fn(),
     onAddHeader: fn(),
     onRemoveHeader: fn(),

clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   Accordion,
   ActionIcon,
@@ -20,8 +21,7 @@ export type ServerSettingsSection =
 
 export interface ServerSettingsFormProps {
   settings: InspectorServerSettings;
-  expandedSections: ServerSettingsSection[];
+  defaultExpandedSections?: ServerSettingsSection[];
-  onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void;
   onConnectionModeChange: (mode: "proxy" | "direct") => void;
   onAddHeader: () => void;
   onRemoveHeader: (index: number) => void;
@@ -95,8 +95,7 @@ function KeyValueRows({
 
 export function ServerSettingsForm({
   settings,
-  expandedSections,
+  defaultExpandedSections = ["connectionMode"],
-  onExpandedSectionsChange,
   onConnectionModeChange,
   onAddHeader,
   onRemoveHeader,
@@ -107,6 +106,10 @@ export function ServerSettingsForm({
   onTimeoutChange,
   onOAuthChange,
 }: ServerSettingsFormProps) {
+  const [expandedSections, setExpandedSections] = useState<
+    ServerSettingsSection[]
+  >(defaultExpandedSections);
+
   const handleTimeoutChange = (field: string) => (value: number | string) => {
     const numValue =
       typeof value === "string" ? parseInt(value, 10) || 0 : value;
@@ -118,7 +121,7 @@ export function ServerSettingsForm({
       multiple
       value={expandedSections}
       onChange={(value) =>
-        onExpandedSectionsChange(value as ServerSettingsSection[])
+        setExpandedSections(value as ServerSettingsSection[])
       }
       variant="separated"
     >

clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx

@@ -1,22 +1,9 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Box, CloseButton, Group, Modal, Title } from "@mantine/core";
+import { CloseButton, Group, Modal, Title } from "@mantine/core";
 import { fn } from "storybook/test";
 import { UnconnectedView } from "./UnconnectedView.js";
 import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen";
-import {
+import { ServerSettingsForm } from "../../groups/ServerSettingsForm/ServerSettingsForm";
-  ServerSettingsForm,
-  type ServerSettingsSection,
-} from "../../groups/ServerSettingsForm/ServerSettingsForm";
-
-const ALL_SETTINGS_SECTIONS: ServerSettingsSection[] = [
-  "connectionMode",
-  "headers",
-  "metadata",
-  "timeouts",
-  "oauth",
-];
-import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
 
 const meta: Meta<typeof UnconnectedView> = {
@@ -125,10 +112,6 @@ export const WithServers: Story = {
 };
 
 function SettingsModalStory() {
-  const [expandedSections, setExpandedSections] = useState<
-    ServerSettingsSection[]
-  >(["connectionMode"]);
-  const allExpanded = expandedSections.length === ALL_SETTINGS_SECTIONS.length;
   return (
     <UnconnectedView onToggleTheme={fn()}>
       <ServerListScreen
@@ -149,19 +132,10 @@ function SettingsModalStory() {
         withCloseButton={false}
         title={
           <Group justify="space-between" wrap="nowrap" w="100%">
-            <ListToggle
-              compact={allExpanded}
-              variant="subtle"
-              onToggle={() =>
-                setExpandedSections(allExpanded ? [] : ALL_SETTINGS_SECTIONS)
-              }
-            />
             <Title order={4} ta="center" style={{ flex: 1 }}>
               Server Settings
             </Title>
-            <Box>
+            <CloseButton onClick={fn()} />
-              <CloseButton onClick={fn()} />
-            </Box>
           </Group>
         }
         size="lg"
@@ -182,8 +156,6 @@ function SettingsModalStory() {
             oauthClientSecret: "super-secret-value",
             oauthScopes: "read write",
           }}
-          expandedSections={expandedSections}
-          onExpandedSectionsChange={setExpandedSections}
           onConnectionModeChange={fn()}
           onAddHeader={fn()}
           onRemoveHeader={fn()}