refactor(web): make settings an inline route instead of a modal

SettingsDialog fused four jobs into 1,571 lines: the modal shell, the tab nav,
ten page bodies and their derived state. Because the shell was welded to the
content, the pages could only ever render as an overlay.

Split it. useSettingsNav owns the tab union, the groups, the active tab and the
guarded lazy loads; SettingsNav renders the nav inside the real sidebar, and
SettingsPane hosts one component per page in the content area. The sidebar keeps
its header and New Session button in both modes and swaps only its body.

Author: elkaix

apps/pythinker-web/src/App.vue

@@ -14,7 +14,7 @@ import type { AgentMember } from './types';
 import ModelPicker from './components/ModelPicker.vue';
 import ProviderManager from './components/ProviderManager.vue';
 import NewSessionDialog from './components/NewSessionDialog.vue';
-import SettingsDialog from './components/SettingsDialog.vue';
+import SettingsPane from './components/settings/SettingsPane.vue';
 import SessionsDialog from './components/SessionsDialog.vue';
 import AddWorkspaceDialog from './components/AddWorkspaceDialog.vue';
 import StatusPanel from './components/StatusPanel.vue';
@@ -30,6 +30,7 @@ import { isTraceEnabled } from './debug/trace';
 import { usePythinkerWebClient } from './composables/usePythinkerWebClient';
 import { useIsMobile } from './composables/useIsMobile';
 import { useIsDark } from './composables/useIsDark';
+import { useSettingsNav } from './composables/useSettingsNav';
 import type { AppConfig, ThinkingLevel } from './api/types';
 import type { FilePreviewRequest, ToolMedia } from './types';
 
@@ -610,6 +611,31 @@ const showAddWorkspace = ref(false);
 const showStatusPanel = ref(false);
 const showSettings = ref(false);
 
+const { activeTab: activeSettingsTab, setTab: selectSettingsTab } = useSettingsNav({
+  counts: {
+    connectors: () => client.connectors.value.length,
+    plugins: () => client.plugins.value.length,
+    subagents: () => client.subagents.value.length,
+  },
+  onLoadConnectors: () => { void client.loadConnectors(); },
+  onLoadPlugins: () => { void client.loadPlugins(); },
+  onLoadSubagents: () => { void client.loadSubagents(); },
+});
+
+function toggleSettings(): void {
+  showSettings.value = !showSettings.value;
+}
+
+function loginFromSettings(): void {
+  showSettings.value = false;
+  openLogin();
+}
+
+function openOnboardingFromSettings(): void {
+  showSettings.value = false;
+  openOnboarding();
+}
+
 type SubmitPayload = {
   text: string;
   attachments: { fileId: string; kind: 'image' | 'video' }[];
@@ -918,6 +944,8 @@ function openPr(url: string): void {
         :attention-by-session="client.attentionBySession.value"
         :pending-by-session="client.pendingBySession.value"
         :unread-by-session="client.unreadBySession.value"
+        :mode="showSettings ? 'settings' : 'sessions'"
+        :active-settings-tab="activeSettingsTab"
         @select="client.selectSession($event)"
         @create="handleCreateSession"
         @create-in-workspace="handleCreateSessionInWorkspace($event)"
@@ -930,6 +958,8 @@ function openPr(url: string): void {
         @delete-workspace="(id) => client.deleteWorkspace(id)"
         @select-workspaces="handleSelectWorkspaces"
         @open-settings="showSettings = true"
+        @close-settings="showSettings = false"
+        @select-settings-tab="selectSettingsTab($event)"
         @collapse="toggleSidebarCollapse"
       />
       <ResizeHandle
@@ -992,7 +1022,7 @@ function openPr(url: string): void {
           class="rail-btn"
           :title="t('settings.title')"
           :aria-label="t('settings.title')"
-          @click="showSettings = true"
+          @click="toggleSettings"
         >
           <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="3" />
@@ -1014,8 +1044,40 @@ function openPr(url: string): void {
       @open-settings="showMobileSettings = true"
     />
 
+    <SettingsPane
+      v-if="showSettings && !isMobile"
+      :active-tab="activeSettingsTab"
+      :theme="client.theme.value"
+      :color-scheme="client.colorScheme.value"
+      :ui-font-size="client.uiFontSize.value"
+      :auth-ready="client.authReady.value"
+      :account-model="client.defaultModel.value"
+      :notify="client.notifyOnComplete.value"
+      :notify-permission="client.notifyPermission.value"
+      :beta-toc="client.betaToc.value"
+      :config="client.config.value"
+      :models="client.models.value"
+      :config-saving="configSaving"
+      :skills="client.skills.value"
+      :connectors="client.connectors.value"
+      :connectors-loading="client.connectorsLoading.value"
+      :sessions="client.sessionsWithUsage.value"
+      :plugins="client.plugins.value"
+      :subagents="client.subagents.value"
+      @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
+      @restart-connector="client.restartConnector($event)"
+      @set-theme="client.setTheme($event)"
+      @set-color-scheme="client.setColorScheme($event)"
+      @set-ui-font-size="client.setUiFontSize($event)"
+      @set-notify="client.setNotifyOnComplete($event)"
+      @set-beta-toc="client.setBetaToc($event)"
+      @update-config="handleUpdateConfig($event)"
+      @login="loginFromSettings"
+      @open-onboarding="openOnboardingFromSettings"
+    />
+
     <ConversationPane
-      v-if="!hasMultiSelect"
+      v-else-if="!hasMultiSelect"
       ref="conversationPaneRef"
       :mobile="isMobile"
       :modern="client.theme.value === 'modern' || client.theme.value === 'pythinker'"
@@ -1188,42 +1250,6 @@ function openPr(url: string): void {
       @close="showModelPicker = false"
     />
 
-    <!-- Settings page (modal) -->
-    <SettingsDialog
-      v-if="showSettings"
-      :theme="client.theme.value"
-      :color-scheme="client.colorScheme.value"
-      :ui-font-size="client.uiFontSize.value"
-      :auth-ready="client.authReady.value"
-      :account-model="client.defaultModel.value"
-      :notify="client.notifyOnComplete.value"
-      :notify-permission="client.notifyPermission.value"
-      :beta-toc="client.betaToc.value"
-      :config="client.config.value"
-      :models="client.models.value"
-      :config-saving="configSaving"
-      :skills="client.skills.value"
-      :connectors="client.connectors.value"
-      :connectors-loading="client.connectorsLoading.value"
-      :sessions="client.sessionsWithUsage.value"
-      :plugins="client.plugins.value"
-      :subagents="client.subagents.value"
-      @load-plugins="client.loadPlugins()"
-      @set-plugin-enabled="client.setPluginEnabled($event.pluginId, $event.enabled)"
-      @load-subagents="client.loadSubagents()"
-      @load-connectors="client.loadConnectors()"
-      @restart-connector="client.restartConnector($event)"
-      @set-theme="client.setTheme($event)"
-      @set-color-scheme="client.setColorScheme($event)"
-      @set-ui-font-size="client.setUiFontSize($event)"
-      @set-notify="client.setNotifyOnComplete($event)"
-      @set-beta-toc="client.setBetaToc($event)"
-      @update-config="handleUpdateConfig($event)"
-      @login="() => { showSettings = false; openLogin(); }"
-            @open-onboarding="() => { showSettings = false; openOnboarding(); }"
-      @close="showSettings = false"
-    />
-
     <!-- Provider Manager overlay -->
     <ProviderManager
       v-if="showProviders"