[refactor] Migrate SettingDialog to BaseModalLayout design system (#8270)

2026-02-18 22:10:03 +00:00 · 2026-02-12 16:27:11 +09:00
parent 995ebc4ba4
commit 553ea63357
54 changed files with 659 additions and 1013 deletions
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -100,8 +100,7 @@ const config: StorybookConfig = {
        rolldownOptions: {
          treeshake: false,
          output: {
-            keepNames: true,
-            strictExecutionOrder: true
+            keepNames: true
          },
          onwarn: (warning, warn) => {
            // Suppress specific warnings
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -23,9 +23,7 @@ export class SettingDialog extends BaseDialog {
   * @param value - The value to set
   */
  async setStringSetting(id: string, value: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
    await settingInputDiv.locator('input').fill(value)
  }

@@ -34,16 +32,31 @@ export class SettingDialog extends BaseDialog {
   * @param id - The id of the setting
   */
  async toggleBooleanSetting(id: string) {
-    const settingInputDiv = this.page.locator(
-      `div.settings-container div[id="${id}"]`
-    )
+    const settingInputDiv = this.root.locator(`div[id="${id}"]`)
    await settingInputDiv.locator('input').click()
  }

+  get searchBox() {
+    return this.root.getByPlaceholder(/Search/)
+  }
+
+  get categories() {
+    return this.root.locator('nav').getByRole('button')
+  }
+
+  category(name: string) {
+    return this.root.locator('nav').getByRole('button', { name })
+  }
+
+  get contentArea() {
+    return this.root.getByRole('main')
+  }
+
  async goToAboutPanel() {
-    await this.page.getByTestId(TestIds.dialogs.settingsTabAbout).click()
-    await this.page
-      .getByTestId(TestIds.dialogs.about)
-      .waitFor({ state: 'visible' })
+    const aboutButton = this.root.locator('nav').getByRole('button', {
+      name: 'About'
+    })
+    await aboutButton.click()
+    await this.page.waitForSelector('.about-container')
  }
 }
--- a/browser_tests/tests/bottomPanelShortcuts.spec.ts
+++ b/browser_tests/tests/bottomPanelShortcuts.spec.ts
@@ -226,9 +226,7 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
    await expect(bottomPanel.shortcuts.manageButton).toBeVisible()
    await bottomPanel.shortcuts.manageButton.click()

-    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
-    await expect(
-      comfyPage.page.getByRole('option', { name: 'Keybinding' })
-    ).toBeVisible()
+    await expect(comfyPage.settingDialog.root).toBeVisible()
+    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
  })
 })
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -244,9 +244,13 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
    await comfyPage.page.keyboard.press('Control+,')
-    const settingsContent = comfyPage.page.locator('.settings-content')
-    await expect(settingsContent).toBeVisible()
-    const isUsableHeight = await settingsContent.evaluate(
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await expect(settingsDialog).toBeVisible()
+    const contentArea = settingsDialog.locator('main')
+    await expect(contentArea).toBeVisible()
+    const isUsableHeight = await contentArea.evaluate(
      (el) => el.clientHeight > 30
    )
    expect(isUsableHeight).toBeTruthy()
@@ -256,7 +260,9 @@ test.describe('Settings', () => {
    await comfyPage.page.keyboard.down('ControlOrMeta')
    await comfyPage.page.keyboard.press(',')
    await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator('.settings-container')
+    const settingsLocator = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
    await expect(settingsLocator).toBeVisible()
    await comfyPage.page.keyboard.press('Escape')
    await expect(settingsLocator).not.toBeVisible()
@@ -275,10 +281,15 @@ test.describe('Settings', () => {
  test('Should persist keybinding setting', async ({ comfyPage }) => {
    // Open the settings dialog
    await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('.settings-container')
+    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')

    // Open the keybinding tab
-    await comfyPage.page.getByLabel('Keybinding').click()
+    const settingsDialog = comfyPage.page.locator(
+      '[data-testid="settings-dialog"]'
+    )
+    await settingsDialog
+      .locator('nav [role="button"]', { hasText: 'Keybinding' })
+      .click()
    await comfyPage.page.waitForSelector(
      '[placeholder="Search Keybindings..."]'
    )
--- a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
--- a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
+++ b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
--- a/browser_tests/tests/subgraph.spec.ts
+++ b/browser_tests/tests/subgraph.spec.ts
@@ -826,7 +826,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {

      // Open settings dialog using hotkey
      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
        state: 'visible'
      })

@@ -836,7 +836,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {

      // Dialog should be closed
      await expect(
-        comfyPage.page.locator('.settings-container')
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
      ).not.toBeVisible()

      // Should still be in subgraph
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-grid-varying-content-chromium-linux.png
--- a/browser_tests/tests/useSettingSearch.spec.ts
+++ b/browser_tests/tests/useSettingSearch.spec.ts
@@ -22,7 +22,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
        name: 'TestSettingsExtension',
        settings: [
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestHiddenSetting' as TestSettingId,
            name: 'Test Hidden Setting',
            type: 'hidden',
@@ -30,7 +29,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
            category: ['Test', 'Hidden']
          },
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestDeprecatedSetting' as TestSettingId,
            name: 'Test Deprecated Setting',
            type: 'text',
@@ -39,7 +37,6 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
            category: ['Test', 'Deprecated']
          },
          {
-            // Extensions can register arbitrary setting IDs
            id: 'TestVisibleSetting' as TestSettingId,
            name: 'Test Visible Setting',
            type: 'text',
@@ -52,238 +49,143 @@ test.describe('Settings Search functionality', { tag: '@settings' }, () => {
  })

  test('can open settings dialog and use search box', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await expect(searchBox).toBeVisible()
-
-    // Verify search box has the correct placeholder
-    await expect(searchBox).toHaveAttribute(
+    await expect(dialog.searchBox).toHaveAttribute(
      'placeholder',
      expect.stringContaining('Search')
    )
  })

  test('search box is functional and accepts input', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Comfy')
-
-    // Verify the input was accepted
-    await expect(searchBox).toHaveValue('Comfy')
+    await dialog.searchBox.fill('Comfy')
+    await expect(dialog.searchBox).toHaveValue('Comfy')
  })

  test('search box clears properly', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Find and interact with the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('test')
-    await expect(searchBox).toHaveValue('test')
+    await dialog.searchBox.fill('test')
+    await expect(dialog.searchBox).toHaveValue('test')

-    // Clear the search box
-    await searchBox.clear()
-    await expect(searchBox).toHaveValue('')
+    await dialog.searchBox.clear()
+    await expect(dialog.searchBox).toHaveValue('')
  })

  test('settings categories are visible in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Check that the sidebar has categories
-    const categories = comfyPage.page.locator(
-      '.settings-sidebar .p-listbox-option'
-    )
-    expect(await categories.count()).toBeGreaterThan(0)
-
-    // Check that at least one category is visible
-    await expect(categories.first()).toBeVisible()
+    expect(await dialog.categories.count()).toBeGreaterThan(0)
  })

  test('can select different categories in sidebar', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Click on a specific category (Appearance) to verify category switching
-    const appearanceCategory = comfyPage.page.getByRole('option', {
-      name: 'Appearance'
-    })
-    await appearanceCategory.click()
+    const categoryCount = await dialog.categories.count()

-    // Verify the category is selected
-    await expect(appearanceCategory).toHaveClass(/p-listbox-option-selected/)
-  })
+    if (categoryCount > 1) {
+      await dialog.categories.nth(1).click()

-  test('settings content area is visible', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
-
-    // Check that the content area is visible
-    const contentArea = comfyPage.page.locator('.settings-content')
-    await expect(contentArea).toBeVisible()
-
-    // Check that tab panels are visible
-    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
-    await expect(tabPanels).toBeVisible()
+      await expect(dialog.categories.nth(1)).toHaveClass(
+        /bg-interface-menu-component-surface-selected/
+      )
+    }
  })

  test('search functionality affects UI state', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Find the search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-
-    // Type in search box
-    await searchBox.fill('graph')
-
-    // Verify that the search input is handled
-    await expect(searchBox).toHaveValue('graph')
+    await dialog.searchBox.fill('graph')
+    await expect(dialog.searchBox).toHaveValue('graph')
  })

  test('settings dialog can be closed', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Close with escape key
    await comfyPage.page.keyboard.press('Escape')
-
-    // Verify dialog is closed
-    await expect(settingsDialog).not.toBeVisible()
+    await expect(dialog.root).not.toBeVisible()
  })

  test('search box has proper debouncing behavior', async ({ comfyPage }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Type rapidly in search box
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('a')
-    await searchBox.fill('ab')
-    await searchBox.fill('abc')
-    await searchBox.fill('abcd')
+    await dialog.searchBox.fill('a')
+    await dialog.searchBox.fill('ab')
+    await dialog.searchBox.fill('abc')
+    await dialog.searchBox.fill('abcd')

-    // Verify final value
-    await expect(searchBox).toHaveValue('abcd')
+    await expect(dialog.searchBox).toHaveValue('abcd')
  })

  test('search excludes hidden settings from results', async ({
    comfyPage
  }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not hidden setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
  })

  test('search excludes deprecated settings from results', async ({
    comfyPage
  }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should show visible setting but not deprecated setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
  })

  test('search shows visible settings but excludes hidden and deprecated', async ({
    comfyPage
  }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    // Search for our test settings
-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    await searchBox.fill('Test')
+    await dialog.searchBox.fill('Test')

-    // Get all settings content
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
-
-    // Should only show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
-
-    // Should not show hidden or deprecated settings
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )
  })

  test('search by setting name excludes hidden and deprecated', async ({
    comfyPage
  }) => {
-    // Open settings dialog
-    await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator('.settings-container')
-    await expect(settingsDialog).toBeVisible()
+    const dialog = comfyPage.settingDialog
+    await dialog.open()

-    const searchBox = comfyPage.page.locator('.settings-search-box input')
-    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Hidden')
+    await expect(dialog.contentArea).not.toContainText('Test Hidden Setting')

-    // Search specifically for hidden setting by name
-    await searchBox.clear()
-    await searchBox.fill('Hidden')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Deprecated')
+    await expect(dialog.contentArea).not.toContainText(
+      'Test Deprecated Setting'
+    )

-    // Should not show the hidden setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Hidden Setting')
-
-    // Search specifically for deprecated setting by name
-    await searchBox.clear()
-    await searchBox.fill('Deprecated')
-
-    // Should not show the deprecated setting even when searching by name
-    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
-
-    // Search for visible setting by name - should work
-    await searchBox.clear()
-    await searchBox.fill('Visible')
-
-    // Should show the visible setting
-    await expect(settingsContent).toContainText('Test Visible Setting')
+    await dialog.searchBox.clear()
+    await dialog.searchBox.fill('Visible')
+    await expect(dialog.contentArea).toContainText('Test Visible Setting')
  })
 })
--- a/src/components/bottomPanel/BottomPanel.vue
+++ b/src/components/bottomPanel/BottomPanel.vue
@@ -89,12 +89,12 @@ import { useI18n } from 'vue-i18n'

 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { BottomPanelExtension } from '@/types/extensionTypes'

 const bottomPanelStore = useBottomPanelStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 const { t } = useI18n()

 const isShortcutsTabActive = computed(() => {
@@ -115,7 +115,7 @@ const getTabDisplayTitle = (tab: BottomPanelExtension): string => {
 }

 const openKeybindingSettings = async () => {
-  dialogService.showSettingsDialog('keybinding')
+  settingsDialog.show('keybinding')
 }

 const closeBottomPanel = () => {
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -1,7 +1,7 @@
 <template>
  <BaseModalLayout
    :content-title="$t('templateWorkflows.title', 'Workflow Templates')"
-    class="workflow-template-selector-dialog"
+    size="md"
  >
    <template #leftPanelHeaderTitle>
      <i class="icon-[comfy--template]" />
@@ -854,19 +854,3 @@ onBeforeUnmount(() => {
  cardRefs.value = [] // Release DOM refs
 })
 </script>
-
-<style>
-/* Ensure the workflow template selector dialog fits within provided dialog */
-.workflow-template-selector-dialog.base-widget-layout {
-  width: 100% !important;
-  max-width: 1400px;
-  height: 100% !important;
-  aspect-ratio: auto !important;
-}
-
-@media (min-width: 1600px) {
-  .workflow-template-selector-dialog.base-widget-layout {
-    max-width: 1600px;
-  }
-}
-</style>
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -4,12 +4,7 @@
    v-for="item in dialogStore.dialogStack"
    :key="item.key"
    v-model:visible="item.visible"
-    :class="[
-      'global-dialog',
-      item.key === 'global-settings' && teamWorkspacesEnabled
-        ? 'settings-dialog-workspace'
-        : ''
-    ]"
+    class="global-dialog"
    v-bind="item.dialogComponentProps"
    :pt="getDialogPt(item)"
    :aria-labelledby="item.key"
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -116,7 +116,7 @@ import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

@@ -134,10 +134,7 @@ const onCancel = () => useDialogStore().closeDialog()

 function openBlueprintOverwriteSetting() {
  useDialogStore().closeDialog()
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.WarnBlueprintOverwrite'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.WarnBlueprintOverwrite')
 }

 const doNotAskAgain = ref(false)
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -64,7 +64,7 @@ import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'

 // TODO: Read this from server internal API rather than hardcoding here
@@ -105,10 +105,7 @@ const doNotAskAgain = ref(false)

 function openShowMissingModelsSetting() {
  useDialogStore().closeDialog({ key: 'global-missing-models-warning' })
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.ShowMissingModelsWarning'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingModelsWarning')
 }

 const modelDownloads = ref<Record<string, ModelInfo>>({})
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -80,7 +80,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -103,10 +103,7 @@ const handleGotItClick = () => {

 function openShowMissingNodesSetting() {
  dialogStore.closeDialog({ key: 'global-missing-nodes' })
-  void useDialogService().showSettingsDialog(
-    undefined,
-    'Comfy.Workflow.ShowMissingNodesWarning'
-  )
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingNodesWarning')
 }

 const { missingNodePacks, isLoading, error } = useMissingNodes()
--- a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
@@ -162,7 +162,7 @@ import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'

@@ -173,7 +173,7 @@ const { isInsufficientCredits = false } = defineProps<{
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
 const dialogStore = useDialogStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
@@ -266,7 +266,7 @@ async function handleBuy() {
      : isSubscriptionEnabled()
        ? 'subscription'
        : 'credits'
-    dialogService.showSettingsDialog(settingsPanel)
+    settingsDialog.show(settingsPanel)
  } catch (error) {
    console.error('Purchase failed:', error)

--- a/src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContentWorkspace.vue
@@ -161,7 +161,7 @@ import { useExternalLink } from '@/composables/useExternalLink'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useBillingOperationStore } from '@/stores/billingOperationStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -172,7 +172,7 @@ const { isInsufficientCredits = false } = defineProps<{

 const { t } = useI18n()
 const dialogStore = useDialogStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
@@ -266,7 +266,7 @@ async function handleBuy() {
      })
      await fetchBalance()
      handleClose(false)
-      dialogService.showSettingsDialog('workspace')
+      settingsDialog.show('workspace')
    } else if (response.status === 'pending') {
      billingOperationStore.startOperation(response.billing_op_id, 'topup')
    } else {
--- a/src/components/dialog/content/setting/AboutPanel.vue
+++ b/src/components/dialog/content/setting/AboutPanel.vue
@@ -1,9 +1,5 @@
 <template>
-  <PanelTemplate
-    value="About"
-    class="about-container"
-    data-testid="about-panel"
-  >
+  <div class="about-container flex flex-col gap-2" data-testid="about-panel">
    <h2 class="mb-2 text-2xl font-bold">
      {{ $t('g.about') }}
    </h2>
@@ -32,7 +28,7 @@
      v-if="systemStatsStore.systemStats"
      :stats="systemStatsStore.systemStats"
    />
-  </PanelTemplate>
+  </div>
 </template>

 <script setup lang="ts">
@@ -43,8 +39,6 @@ import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'

-import PanelTemplate from './PanelTemplate.vue'
-
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()
 </script>
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -1,13 +1,9 @@
 <template>
-  <PanelTemplate value="Keybinding" class="keybinding-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="
-          $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
-        "
-      />
-    </template>
+  <div class="keybinding-panel flex flex-col gap-2">
+    <SearchBox
+      v-model="filters['global'].value"
+      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.keybindings') })"
+    />

    <DataTable
      v-model:selection="selectedCommandData"
@@ -135,7 +131,7 @@
      <i class="pi pi-replay" />
      {{ $t('g.resetAll') }}
    </Button>
-  </PanelTemplate>
+  </div>
 </template>

 <script setup lang="ts">
@@ -159,7 +155,6 @@ import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'

-import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'

 const filters = ref({
--- a/src/components/dialog/content/setting/LegacyCreditsPanel.vue
+++ b/src/components/dialog/content/setting/LegacyCreditsPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabPanel value="Credits" class="credits-container h-full">
+  <div class="credits-container h-full">
    <!-- Legacy Design -->
    <div class="flex h-full flex-col">
      <h2 class="mb-2 text-2xl font-bold">
@@ -102,7 +102,7 @@
        </Button>
      </div>
    </div>
-  </TabPanel>
+  </div>
 </template>

 <script setup lang="ts">
@@ -110,7 +110,6 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
-import TabPanel from 'primevue/tabpanel'
 import { computed, ref, watch } from 'vue'

 import UserCredit from '@/components/common/UserCredit.vue'
--- a/src/components/dialog/content/setting/PanelTemplate.vue
+++ b/src/components/dialog/content/setting/PanelTemplate.vue
@@ -1,21 +0,0 @@
-<template>
-  <TabPanel :value="props.value" class="h-full w-full" :class="props.class">
-    <div class="flex h-full w-full flex-col gap-2">
-      <slot name="header" />
-      <ScrollPanel class="h-0 grow pr-2">
-        <slot />
-      </ScrollPanel>
-      <slot name="footer" />
-    </div>
-  </TabPanel>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import TabPanel from 'primevue/tabpanel'
-
-const props = defineProps<{
-  value: string
-  class?: string
-}>()
-</script>
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabPanel value="User" class="user-settings-container h-full">
+  <div class="user-settings-container h-full">
    <div class="flex h-full flex-col">
      <h2 class="mb-2 text-2xl font-bold">{{ $t('userSettings.title') }}</h2>
      <Divider class="mb-3" />
@@ -95,13 +95,12 @@
        </Button>
      </div>
    </div>
-  </TabPanel>
+  </div>
 </template>

 <script setup lang="ts">
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
-import TabPanel from 'primevue/tabpanel'

 import UserAvatar from '@/components/common/UserAvatar.vue'
 import Button from '@/components/ui/button/Button.vue'
--- a/src/components/dialog/content/setting/WorkspacePanel.vue
+++ b/src/components/dialog/content/setting/WorkspacePanel.vue
@@ -1,11 +0,0 @@
-<template>
-  <TabPanel value="Workspace" class="h-full">
-    <WorkspacePanelContent />
-  </TabPanel>
-</template>
-
-<script setup lang="ts">
-import TabPanel from 'primevue/tabpanel'
-
-import WorkspacePanelContent from '@/components/dialog/content/setting/WorkspacePanelContent.vue'
-</script>
--- a/src/components/dialog/content/setting/WorkspacePanelContent.vue
+++ b/src/components/dialog/content/setting/WorkspacePanelContent.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="flex h-full w-full flex-col">
-    <div class="pb-8 flex items-center gap-4">
+    <header class="mb-8 flex items-center gap-4">
      <WorkspaceProfilePic
        class="size-12 !text-3xl"
        :workspace-name="workspaceName"
@@ -8,44 +8,38 @@
      <h1 class="text-3xl text-base-foreground">
        {{ workspaceName }}
      </h1>
-    </div>
-    <Tabs unstyled :value="activeTab" @update:value="setActiveTab">
+    </header>
+    <TabsRoot v-model="activeTab">
      <div class="flex w-full items-center">
-        <TabList unstyled class="flex w-full gap-2">
-          <Tab
+        <TabsList class="flex items-center gap-2 pb-1">
+          <TabsTrigger
            value="plan"
            :class="
              cn(
-                buttonVariants({
-                  variant: activeTab === 'plan' ? 'secondary' : 'textonly',
-                  size: 'md'
-                }),
-                activeTab === 'plan' && 'text-base-foreground no-underline'
+                tabTriggerBase,
+                activeTab === 'plan' ? tabTriggerActive : tabTriggerInactive
              )
            "
          >
            {{ $t('workspacePanel.tabs.planCredits') }}
-          </Tab>
-          <Tab
+          </TabsTrigger>
+          <TabsTrigger
            value="members"
            :class="
              cn(
-                buttonVariants({
-                  variant: activeTab === 'members' ? 'secondary' : 'textonly',
-                  size: 'md'
-                }),
-                activeTab === 'members' && 'text-base-foreground no-underline',
-                'ml-2'
+                tabTriggerBase,
+                activeTab === 'members' ? tabTriggerActive : tabTriggerInactive
              )
            "
          >
            {{
              $t('workspacePanel.tabs.membersCount', {
-                count: isInPersonalWorkspace ? 1 : members.length
+                count: members.length
              })
            }}
-          </Tab>
-        </TabList>
+          </TabsTrigger>
+        </TabsList>
+
        <Button
          v-if="permissions.canInviteMembers"
          v-tooltip="
@@ -64,15 +58,13 @@
          :aria-label="$t('workspacePanel.inviteMember')"
          @click="handleInviteMember"
        >
-          {{ $t('workspacePanel.invite') }}
-          <i class="pi pi-plus ml-1 text-sm" />
+          <i class="pi pi-plus text-sm" />
        </Button>
        <template v-if="permissions.canAccessWorkspaceMenu">
          <Button
            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            class="ml-2"
-            variant="secondary"
-            size="lg"
+            variant="muted-textonly"
+            size="icon"
            :aria-label="$t('g.moreOptions')"
            @click="menu?.toggle($event)"
          >
@@ -80,17 +72,21 @@
          </Button>
          <Menu ref="menu" :model="menuItems" :popup="true">
            <template #item="{ item }">
-              <div
+              <button
                v-tooltip="
                  item.disabled && deleteTooltip
                    ? { value: deleteTooltip, showDelay: 0 }
                    : null
                "
-                :class="[
-                  'flex items-center gap-2 px-3 py-2',
-                  item.class,
-                  item.disabled ? 'pointer-events-auto' : 'cursor-pointer'
-                ]"
+                type="button"
+                :disabled="!!item.disabled"
+                :class="
+                  cn(
+                    'flex w-full items-center gap-2 px-3 py-2 bg-transparent border-none cursor-pointer',
+                    item.class,
+                    item.disabled && 'pointer-events-auto cursor-not-allowed'
+                  )
+                "
                @click="
                  item.command?.({
                    originalEvent: $event,
@@ -100,46 +96,47 @@
              >
                <i :class="item.icon" />
                <span>{{ item.label }}</span>
-              </div>
+              </button>
            </template>
          </Menu>
        </template>
      </div>

-      <TabPanels unstyled>
-        <TabPanel value="plan">
-          <SubscriptionPanelContentWorkspace />
-        </TabPanel>
-        <TabPanel value="members">
-          <MembersPanelContent :key="workspaceRole" />
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+      <TabsContent value="plan" class="mt-4">
+        <SubscriptionPanelContentWorkspace />
+      </TabsContent>
+      <TabsContent value="members" class="mt-4">
+        <MembersPanelContent :key="workspaceRole" />
+      </TabsContent>
+    </TabsRoot>
  </div>
 </template>

 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 import Menu from 'primevue/menu'
-import Tab from 'primevue/tab'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+
 import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
 import MembersPanelContent from '@/components/dialog/content/setting/MembersPanelContent.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { buttonVariants } from '@/components/ui/button/button.variants'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
 import SubscriptionPanelContentWorkspace from '@/platform/cloud/subscription/components/SubscriptionPanelContentWorkspace.vue'
-import { cn } from '@/utils/tailwindUtil'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
+import { cn } from '@/utils/tailwindUtil'
+
+const tabTriggerBase =
+  'flex items-center justify-center shrink-0 px-2.5 py-2 text-sm rounded-lg cursor-pointer transition-all duration-200 outline-hidden border-none'
+const tabTriggerActive =
+  'bg-interface-menu-component-surface-hovered text-text-primary font-bold'
+const tabTriggerInactive =
+  'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'

 const { defaultTab = 'plan' } = defineProps<{
  defaultTab?: string
@@ -164,16 +161,12 @@ const isSingleSeatPlan = computed(() => {
  return getMaxSeats(tierKey) <= 1
 })
 const workspaceStore = useTeamWorkspaceStore()
-const {
-  workspaceName,
-  members,
-  isInviteLimitReached,
-  isWorkspaceSubscribed,
-  isInPersonalWorkspace
-} = storeToRefs(workspaceStore)
+const { workspaceName, members, isInviteLimitReached, isWorkspaceSubscribed } =
+  storeToRefs(workspaceStore)
 const { fetchMembers, fetchPendingInvites } = workspaceStore
-const { activeTab, setActiveTab, workspaceRole, permissions, uiConfig } =
-  useWorkspaceUI()
+
+const { workspaceRole, permissions, uiConfig } = useWorkspaceUI()
+const activeTab = ref(defaultTab)

 const menu = ref<InstanceType<typeof Menu> | null>(null)

@@ -253,7 +246,6 @@ const menuItems = computed(() => {
 })

 onMounted(() => {
-  setActiveTab(defaultTab)
  fetchMembers()
  fetchPendingInvites()
 })
--- a/src/components/dialog/content/setting/WorkspaceSidebarItem.vue
+++ b/src/components/dialog/content/setting/WorkspaceSidebarItem.vue
@@ -1,19 +0,0 @@
-<template>
-  <div class="flex items-center gap-2">
-    <WorkspaceProfilePic
-      class="size-6 text-xs"
-      :workspace-name="workspaceName"
-    />
-
-    <span>{{ workspaceName }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
-import WorkspaceProfilePic from '@/components/common/WorkspaceProfilePic.vue'
-import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
-
-const { workspaceName } = storeToRefs(useTeamWorkspaceStore())
-</script>
--- a/src/components/dialog/header/SettingDialogHeader.vue
+++ b/src/components/dialog/header/SettingDialogHeader.vue
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <h2 :class="cn(flags.teamWorkspacesEnabled ? 'px-6' : 'px-4')">
-      <i class="pi pi-cog" />
-      <span>{{ $t('g.settings') }}</span>
-      <Tag
-        v-if="isStaging"
-        value="staging"
-        severity="warn"
-        class="ml-2 text-xs"
-      />
-    </h2>
-  </div>
-</template>
-<script setup lang="ts">
-import Tag from 'primevue/tag'
-
-import { isStaging } from '@/config/staging'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { cn } from '@comfyorg/tailwind-utils'
-const { flags } = useFeatureFlags()
-</script>
-
-<style scoped>
-.pi-cog {
-  font-size: 1.25rem;
-  margin-right: 0.5rem;
-}
-.version-tag {
-  margin-left: 0.5rem;
-}
-</style>
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -11,7 +11,7 @@ import type { LinkRenderType } from '@/lib/litegraph/src/types/globalEnums'
 import { LinkMarkerShape } from '@/lib/litegraph/src/types/globalEnums'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { WidgetInputBaseClass } from '@/renderer/extensions/vueNodes/widgets/components/layout'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { cn } from '@/utils/tailwindUtil'

 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
@@ -20,7 +20,7 @@ import LayoutField from './LayoutField.vue'

 const { t } = useI18n()
 const settingStore = useSettingStore()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()

 // NODES settings
 const showAdvancedParameters = computed({
@@ -92,7 +92,7 @@ function updateGridSpacingFromInput(value: number | null | undefined) {
 }

 function openFullSettings() {
-  dialogService.showSettingsDialog()
+  settingsDialog.show()
 }
 </script>

--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -108,15 +108,14 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

-import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import ComfyLogo from '@/components/icons/ComfyLogo.vue'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
-import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import type { SettingPanelType } from '@/platform/settings/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
@@ -129,7 +128,7 @@ const commandStore = useCommandStore()
 const menuItemStore = useMenuItemStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
-const dialogStore = useDialogStore()
+const settingsDialog = useSettingsDialog()
 const managerState = useManagerState()
 const settingStore = useSettingStore()

@@ -166,15 +165,8 @@ const translateMenuItem = (item: MenuItem): MenuItem => {
  }
 }

-const showSettings = (defaultPanel?: string) => {
-  dialogStore.showDialog({
-    key: 'global-settings',
-    headerComponent: SettingDialogHeader,
-    component: SettingDialogContent,
-    props: {
-      defaultPanel
-    }
-  })
+const showSettings = (defaultPanel?: SettingPanelType) => {
+  settingsDialog.show(defaultPanel)
 }

 const showManageExtensions = async () => {
--- a/src/components/topbar/CurrentUserPopoverLegacy.test.ts
+++ b/src/components/topbar/CurrentUserPopoverLegacy.test.ts
@@ -31,6 +31,15 @@ vi.mock('pinia')
 const mockShowSettingsDialog = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()

+// Mock the settings dialog composable
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: vi.fn(() => ({
+    show: mockShowSettingsDialog,
+    hide: vi.fn(),
+    showAbout: vi.fn()
+  }))
+}))
+
 // Mock window.open
 const originalWindowOpen = window.open
 beforeEach(() => {
@@ -64,7 +73,6 @@ vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
 // Mock the dialog service
 vi.mock('@/services/dialogService', () => ({
  useDialogService: vi.fn(() => ({
-    showSettingsDialog: mockShowSettingsDialog,
    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
  }))
 }))
--- a/src/components/topbar/CurrentUserPopoverLegacy.vue
+++ b/src/components/topbar/CurrentUserPopoverLegacy.vue
@@ -152,6 +152,7 @@ import { useSubscription } from '@/platform/cloud/subscription/composables/useSu
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'

@@ -165,6 +166,7 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
  useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const authStore = useFirebaseAuthStore()
+const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
  isActiveSubscription,
@@ -198,7 +200,7 @@ const canUpgrade = computed(() => {
 })

 const handleOpenUserSettings = () => {
-  dialogService.showSettingsDialog('user')
+  settingsDialog.show('user')
  emit('close')
 }

@@ -209,9 +211,9 @@ const handleOpenPlansAndPricing = () => {

 const handleOpenPlanAndCreditsSettings = () => {
  if (isCloud) {
-    dialogService.showSettingsDialog('subscription')
+    settingsDialog.show('subscription')
  } else {
-    dialogService.showSettingsDialog('credits')
+    settingsDialog.show('credits')
  }

  emit('close')
--- a/src/components/topbar/CurrentUserPopoverWorkspace.vue
+++ b/src/components/topbar/CurrentUserPopoverWorkspace.vue
@@ -220,6 +220,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogService } from '@/services/dialogService'

 const workspaceStore = useTeamWorkspaceStore()
@@ -239,6 +240,7 @@ const { buildDocsUrl, docsPaths } = useExternalLink()

 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
  useCurrentUser()
+const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
  useBillingContext()
@@ -284,12 +286,12 @@ const showSubscribeAction = computed(
 )

 const handleOpenUserSettings = () => {
-  dialogService.showSettingsDialog('user')
+  settingsDialog.show('user')
  emit('close')
 }

 const handleOpenWorkspaceSettings = () => {
-  dialogService.showSettingsDialog('workspace')
+  settingsDialog.show('workspace')
  emit('close')
 }

@@ -300,9 +302,9 @@ const handleOpenPlansAndPricing = () => {

 const handleOpenPlanAndCreditsSettings = () => {
  if (isCloud) {
-    dialogService.showSettingsDialog('workspace')
+    settingsDialog.show('workspace')
  } else {
-    dialogService.showSettingsDialog('credits')
+    settingsDialog.show('credits')
  }

  emit('close')
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="base-widget-layout rounded-2xl overflow-hidden relative"
+    :class="cn('rounded-2xl overflow-hidden relative', sizeClasses)"
    @keydown.esc.capture="handleEscape"
  >
    <div
@@ -141,14 +141,31 @@ import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
 import { OnCloseKey } from '@/types/widgetTypes'
+import { cn } from '@/utils/tailwindUtil'

 const { t } = useI18n()

-const { contentTitle, rightPanelTitle } = defineProps<{
+const SIZE_CLASSES = {
+  sm: 'h-[80vh] w-[90vw] max-w-[960px]',
+  md: 'h-[80vh] w-[90vw] max-w-[1400px]',
+  lg: 'h-[80vh] w-[90vw] max-w-[1280px] aspect-[20/13] min-[1450px]:max-w-[1724px]',
+  full: 'h-full w-full max-w-[1400px] 2xl:max-w-[1600px]'
+} as const
+
+type ModalSize = keyof typeof SIZE_CLASSES
+
+const {
+  contentTitle,
+  rightPanelTitle,
+  size = 'lg'
+} = defineProps<{
  contentTitle: string
  rightPanelTitle?: string
+  size?: ModalSize
 }>()

+const sizeClasses = computed(() => SIZE_CLASSES[size])
+
 const isRightPanelOpen = defineModel<boolean>('rightPanelOpen', {
  default: false
 })
@@ -215,17 +232,3 @@ function handleEscape(event: KeyboardEvent) {
  }
 }
 </script>
-<style scoped>
-.base-widget-layout {
-  height: 80vh;
-  width: 90vw;
-  max-width: 1280px;
-  aspect-ratio: 20/13;
-}
-
-@media (min-width: 1450px) {
-  .base-widget-layout {
-    max-width: 1724px;
-  }
-}
-</style>
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -35,6 +35,7 @@ import {
 } from '@/renderer/core/canvas/canvasStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyCommand } from '@/stores/commandStore'
@@ -73,6 +74,7 @@ export function useCoreCommands(): ComfyCommand[] {
  const { isActiveSubscription, showSubscriptionDialog } = useBillingContext()
  const workflowService = useWorkflowService()
  const workflowStore = useWorkflowStore()
+  const settingsDialog = useSettingsDialog()
  const dialogService = useDialogService()
  const colorPaletteStore = useColorPaletteStore()
  const firebaseAuthActions = useFirebaseAuthActions()
@@ -582,7 +584,7 @@ export function useCoreCommands(): ComfyCommand[] {
      versionAdded: '1.3.7',
      category: 'view-controls' as const,
      function: () => {
-        void dialogService.showSettingsDialog()
+        settingsDialog.show()
      }
    },
    {
@@ -831,7 +833,7 @@ export function useCoreCommands(): ComfyCommand[] {
      menubarLabel: 'About ComfyUI',
      versionAdded: '1.6.4',
      function: () => {
-        void dialogService.showSettingsDialog('about')
+        settingsDialog.showAbout()
      }
    },
    {
--- a/src/composables/useWorkflowTemplateSelectorDialog.ts
+++ b/src/composables/useWorkflowTemplateSelectorDialog.ts
@@ -32,15 +32,6 @@ export const useWorkflowTemplateSelectorDialog = () => {
      props: {
        onClose: hide,
        initialCategory
-      },
-      dialogComponentProps: {
-        pt: {
-          content: { class: '!px-0 overflow-hidden h-full !py-0' },
-          root: {
-            style:
-              'width: 90vw; height: 85vh; max-width: 1400px; display: flex;'
-          }
-        }
      }
    })
  }
--- a/src/config/staging.ts
+++ b/src/config/staging.ts
@@ -1,20 +0,0 @@
-import { computed } from 'vue'
-
-import { isCloud } from '@/platform/distribution/types'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
-
-const BUILD_TIME_IS_STAGING = !__USE_PROD_CONFIG__
-
-/**
- * Returns whether the current environment is staging.
- * - Cloud builds use runtime configuration (firebase_config.projectId containing '-dev')
- * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
- */
-export const isStaging = computed(() => {
-  if (!isCloud) {
-    return BUILD_TIME_IS_STAGING
-  }
-
-  const projectId = remoteConfig.value.firebase_config?.projectId
-  return projectId?.includes('-dev') ?? BUILD_TIME_IS_STAGING
-})
--- a/src/platform/assets/components/UploadModelUrlInput.vue
+++ b/src/platform/assets/components/UploadModelUrlInput.vue
@@ -86,15 +86,15 @@ import { computed } from 'vue'

 import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'

 const { flags } = useFeatureFlags()
-const dialogService = useDialogService()
+const settingsDialog = useSettingsDialog()

 const showSecretsHint = computed(() => flags.userSecretsEnabled)

 function openSecretsSettings() {
-  dialogService.showSettingsDialog('secrets')
+  settingsDialog.show('secrets')
 }

 const props = defineProps<{
--- a/src/platform/assets/composables/useAssetBrowserDialog.ts
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -1,7 +1,7 @@
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { DialogComponentProps } from '@/stores/dialogStore'

 interface ShowOptions {
  /** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
@@ -22,64 +22,51 @@ interface BrowseOptions {
  onAssetSelected?: (asset: AssetItem) => void
 }

-const dialogComponentProps: DialogComponentProps = {
-  headless: true,
-  modal: true,
-  closable: true,
-  pt: {
-    root: {
-      class: 'rounded-2xl overflow-hidden asset-browser-dialog'
-    },
-    header: {
-      class: '!p-0 hidden'
-    },
-    content: {
-      class: '!p-0 !m-0 h-full w-full'
-    }
-  }
-} as const
+const DIALOG_KEY = 'global-asset-browser'

 export const useAssetBrowserDialog = () => {
+  const dialogService = useDialogService()
  const dialogStore = useDialogStore()
-  const dialogKey = 'global-asset-browser'

-  async function show(props: ShowOptions) {
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(props: ShowOptions) {
    const handleAssetSelected = (asset: AssetItem) => {
      props.onAssetSelected?.(asset)
-      dialogStore.closeDialog({ key: dialogKey })
+      hide()
    }

-    dialogStore.showDialog({
-      key: dialogKey,
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
      component: AssetBrowserModal,
      props: {
        nodeType: props.nodeType,
        inputName: props.inputName,
        currentValue: props.currentValue,
        onSelect: handleAssetSelected,
-        onClose: () => dialogStore.closeDialog({ key: dialogKey })
-      },
-      dialogComponentProps
+        onClose: hide
+      }
    })
  }

-  async function browse(options: BrowseOptions): Promise<void> {
+  function browse(options: BrowseOptions) {
    const handleAssetSelected = (asset: AssetItem) => {
      options.onAssetSelected?.(asset)
-      dialogStore.closeDialog({ key: dialogKey })
+      hide()
    }

-    dialogStore.showDialog({
-      key: dialogKey,
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
      component: AssetBrowserModal,
      props: {
        showLeftPanel: true,
        assetType: options.assetType,
        title: options.title,
        onSelect: handleAssetSelected,
-        onClose: () => dialogStore.closeDialog({ key: dialogKey })
-      },
-      dialogComponentProps
+        onClose: hide
+      }
    })
  }

--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <TabPanel value="PlanCredits" class="subscription-container h-full">
+  <div class="subscription-container h-full">
    <div class="flex h-full flex-col gap-6">
      <div class="flex items-center gap-2">
        <span class="text-2xl font-inter font-semibold leading-tight">
@@ -63,11 +63,10 @@
        </Button>
      </div>
    </div>
-  </TabPanel>
+  </div>
 </template>

 <script setup lang="ts">
-import TabPanel from 'primevue/tabpanel'
 import { computed, defineAsyncComponent } from 'vue'

 import CloudBadge from '@/components/topbar/CloudBadge.vue'
--- a/src/platform/settings/components/ExtensionPanel.vue
+++ b/src/platform/settings/components/ExtensionPanel.vue
@@ -1,33 +1,29 @@
 <template>
-  <PanelTemplate value="Extension" class="extension-panel">
-    <template #header>
-      <SearchBox
-        v-model="filters['global'].value"
-        :placeholder="
-          $t('g.searchPlaceholder', { subject: $t('g.extensions') })
-        "
-      />
-      <Message
-        v-if="hasChanges"
-        severity="info"
-        pt:text="w-full"
-        class="max-h-96 overflow-y-auto"
-      >
-        <ul>
-          <li v-for="ext in changedExtensions" :key="ext.name">
-            <span>
-              {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
-            </span>
-            {{ ext.name }}
-          </li>
-        </ul>
-        <div class="flex justify-end">
-          <Button variant="destructive" @click="applyChanges">
-            {{ $t('g.reloadToApplyChanges') }}
-          </Button>
-        </div>
-      </Message>
-    </template>
+  <div class="extension-panel flex flex-col gap-2">
+    <SearchBox
+      v-model="filters['global'].value"
+      :placeholder="$t('g.searchPlaceholder', { subject: $t('g.extensions') })"
+    />
+    <Message
+      v-if="hasChanges"
+      severity="info"
+      pt:text="w-full"
+      class="max-h-96 overflow-y-auto"
+    >
+      <ul>
+        <li v-for="ext in changedExtensions" :key="ext.name">
+          <span>
+            {{ extensionStore.isExtensionEnabled(ext.name) ? '[-]' : '[+]' }}
+          </span>
+          {{ ext.name }}
+        </li>
+      </ul>
+      <div class="flex justify-end">
+        <Button variant="destructive" @click="applyChanges">
+          {{ $t('g.reloadToApplyChanges') }}
+        </Button>
+      </div>
+    </Message>
    <div class="mb-3 flex gap-2">
      <SelectButton
        v-model="filterType"
@@ -81,7 +77,7 @@
        </template>
      </Column>
    </DataTable>
-  </PanelTemplate>
+  </div>
 </template>

 <script setup lang="ts">
@@ -97,7 +93,6 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import SearchBox from '@/components/common/SearchBox.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
--- a/src/platform/settings/components/ServerConfigPanel.vue
+++ b/src/platform/settings/components/ServerConfigPanel.vue
@@ -1,46 +1,39 @@
 <template>
-  <PanelTemplate value="Server-Config" class="server-config-panel">
-    <template #header>
-      <div class="flex flex-col gap-2">
-        <Message
-          v-if="modifiedConfigs.length > 0"
-          severity="info"
-          pt:text="w-full"
-        >
-          <p>
-            {{ $t('serverConfig.modifiedConfigs') }}
-          </p>
-          <ul>
-            <li v-for="config in modifiedConfigs" :key="config.id">
-              {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
-            </li>
-          </ul>
-          <div class="flex justify-end gap-2">
-            <Button variant="secondary" @click="revertChanges">
-              {{ $t('serverConfig.revertChanges') }}
-            </Button>
-            <Button variant="destructive" @click="restartApp">
-              {{ $t('serverConfig.restart') }}
-            </Button>
-          </div>
-        </Message>
-        <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
-          <template #icon>
-            <i class="icon-[lucide--terminal] text-xl font-bold" />
-          </template>
-          <div class="flex items-center justify-between">
-            <p>{{ commandLineArgs }}</p>
-            <Button
-              size="icon"
-              variant="muted-textonly"
-              @click="copyCommandLineArgs"
-            >
-              <i class="pi pi-clipboard" />
-            </Button>
-          </div>
-        </Message>
+  <div class="server-config-panel flex flex-col gap-2">
+    <Message v-if="modifiedConfigs.length > 0" severity="info" pt:text="w-full">
+      <p>
+        {{ $t('serverConfig.modifiedConfigs') }}
+      </p>
+      <ul>
+        <li v-for="config in modifiedConfigs" :key="config.id">
+          {{ config.name }}: {{ config.initialValue }} → {{ config.value }}
+        </li>
+      </ul>
+      <div class="flex justify-end gap-2">
+        <Button variant="secondary" @click="revertChanges">
+          {{ $t('serverConfig.revertChanges') }}
+        </Button>
+        <Button variant="destructive" @click="restartApp">
+          {{ $t('serverConfig.restart') }}
+        </Button>
      </div>
-    </template>
+    </Message>
+    <Message v-if="commandLineArgs" severity="secondary" pt:text="w-full">
+      <template #icon>
+        <i class="icon-[lucide--terminal] text-xl font-bold" />
+      </template>
+      <div class="flex items-center justify-between">
+        <p>{{ commandLineArgs }}</p>
+        <Button
+          size="icon"
+          variant="muted-textonly"
+          :aria-label="$t('g.copyToClipboard')"
+          @click="copyCommandLineArgs"
+        >
+          <i class="pi pi-clipboard" />
+        </Button>
+      </div>
+    </Message>
    <div
      v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
      :key="label"
@@ -58,7 +51,7 @@
        />
      </div>
    </div>
-  </PanelTemplate>
+  </div>
 </template>

 <script setup lang="ts">
@@ -69,7 +62,6 @@ import { onBeforeUnmount, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

 import FormItem from '@/components/common/FormItem.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -0,0 +1,200 @@
+<template>
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="md">
+    <template #leftPanelHeaderTitle>
+      <i class="icon-[lucide--settings]" />
+      <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
+    </template>
+
+    <template #leftPanel>
+      <div class="px-3">
+        <SearchBox
+          v-model:model-value="searchQuery"
+          size="md"
+          :placeholder="$t('g.searchSettings') + '...'"
+          :debounce-time="128"
+          @search="handleSearch"
+        />
+      </div>
+
+      <nav
+        ref="navRef"
+        class="scrollbar-hide flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
+      >
+        <div
+          v-for="(group, index) in navGroups"
+          :key="index"
+          class="flex flex-col gap-2"
+        >
+          <NavTitle :title="group.title" />
+          <NavItem
+            v-for="item in group.items"
+            :key="item.id"
+            :data-nav-id="item.id"
+            :icon="item.icon"
+            :badge="item.badge"
+            :active="activeCategoryKey === item.id"
+            @click="onNavItemClick(item.id)"
+          >
+            {{ item.label }}
+          </NavItem>
+        </div>
+      </nav>
+    </template>
+
+    <template #header />
+
+    <template #content>
+      <template v-if="inSearch">
+        <SettingsPanel :setting-groups="searchResults" />
+      </template>
+      <template v-else-if="activeSettingCategory">
+        <CurrentUserMessage v-if="activeSettingCategory.label === 'Comfy'" />
+        <ColorPaletteMessage
+          v-if="activeSettingCategory.label === 'Appearance'"
+        />
+        <SettingsPanel :setting-groups="sortedGroups(activeSettingCategory)" />
+      </template>
+      <template v-else-if="activePanel">
+        <Suspense>
+          <component :is="activePanel.component" v-bind="activePanel.props" />
+          <template #fallback>
+            <div>
+              {{ $t('g.loadingPanel', { panel: activePanel.node.label }) }}
+            </div>
+          </template>
+        </Suspense>
+      </template>
+    </template>
+  </BaseModalLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, provide, ref, watch } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
+import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
+import NavItem from '@/components/widget/nav/NavItem.vue'
+import NavTitle from '@/components/widget/nav/NavTitle.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
+import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
+import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
+import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+import type {
+  ISettingGroup,
+  SettingPanelType,
+  SettingParams
+} from '@/platform/settings/types'
+import { OnCloseKey } from '@/types/widgetTypes'
+import { flattenTree } from '@/utils/treeUtil'
+
+const { onClose, defaultPanel, scrollToSettingId } = defineProps<{
+  onClose: () => void
+  defaultPanel?: SettingPanelType
+  scrollToSettingId?: string
+}>()
+
+provide(OnCloseKey, onClose)
+
+const {
+  defaultCategory,
+  settingCategories,
+  navGroups,
+  findCategoryByKey,
+  findPanelByKey
+} = useSettingUI(defaultPanel, scrollToSettingId)
+
+const {
+  searchQuery,
+  inSearch,
+  searchResultsCategories,
+  handleSearch: handleSearchBase,
+  getSearchResults
+} = useSettingSearch()
+
+const authActions = useFirebaseAuthActions()
+
+const navRef = ref<HTMLElement | null>(null)
+const activeCategoryKey = ref<string | null>(defaultCategory.value?.key ?? null)
+
+watch(searchResultsCategories, (categories) => {
+  if (!inSearch.value || categories.size === 0) return
+  const firstMatch = navGroups.value
+    .flatMap((g) => g.items)
+    .find((item) => {
+      const node = findCategoryByKey(item.id)
+      return node && categories.has(node.label)
+    })
+  activeCategoryKey.value = firstMatch?.id ?? null
+})
+
+const activeSettingCategory = computed<SettingTreeNode | null>(() => {
+  if (!activeCategoryKey.value) return null
+  return (
+    settingCategories.value.find((c) => c.key === activeCategoryKey.value) ??
+    null
+  )
+})
+
+const activePanel = computed(() => {
+  if (!activeCategoryKey.value) return null
+  return findPanelByKey(activeCategoryKey.value)
+})
+
+const getGroupSortOrder = (group: SettingTreeNode): number =>
+  Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
+
+function sortedGroups(category: SettingTreeNode): ISettingGroup[] {
+  return [...(category.children ?? [])]
+    .sort((a, b) => {
+      const orderDiff = getGroupSortOrder(b) - getGroupSortOrder(a)
+      return orderDiff !== 0 ? orderDiff : a.label.localeCompare(b.label)
+    })
+    .map((group) => ({
+      label: group.label,
+      settings: flattenTree<SettingParams>(group).sort((a, b) => {
+        const sortOrderA = a.sortOrder ?? 0
+        const sortOrderB = b.sortOrder ?? 0
+        return sortOrderB - sortOrderA
+      })
+    }))
+}
+
+function handleSearch(query: string) {
+  handleSearchBase(query.trim())
+  if (query) {
+    activeCategoryKey.value = null
+  } else if (!activeCategoryKey.value) {
+    activeCategoryKey.value = defaultCategory.value?.key ?? null
+  }
+}
+
+function onNavItemClick(id: string) {
+  activeCategoryKey.value = id
+}
+
+const searchResults = computed<ISettingGroup[]>(() => {
+  const category = activeCategoryKey.value
+    ? findCategoryByKey(activeCategoryKey.value)
+    : null
+  return getSearchResults(category)
+})
+
+watch(activeCategoryKey, (newKey, oldKey) => {
+  if (!newKey && !inSearch.value) {
+    activeCategoryKey.value = oldKey
+  }
+  if (newKey === 'credits') {
+    void authActions.fetchBalance()
+  }
+  if (newKey) {
+    void nextTick(() => {
+      navRef.value
+        ?.querySelector(`[data-nav-id="${newKey}"]`)
+        ?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    })
+  }
+})
+</script>
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -1,303 +0,0 @@
-<template>
-  <div
-    data-testid="settings-dialog"
-    :class="
-      teamWorkspacesEnabled
-        ? 'flex h-full w-full overflow-auto flex-col md:flex-row'
-        : 'settings-container'
-    "
-  >
-    <ScrollPanel
-      :class="
-        teamWorkspacesEnabled
-          ? 'w-full md:w-64 md:min-w-64 md:max-w-64 shrink-0 p-2'
-          : 'settings-sidebar w-48 shrink-0 p-2 2xl:w-64'
-      "
-    >
-      <div :class="teamWorkspacesEnabled ? 'px-4' : ''">
-        <SearchBox
-          v-model:model-value="searchQuery"
-          class="settings-search-box mb-2 w-full"
-          :placeholder="
-            $t('g.searchPlaceholder', { subject: $t('g.settings') })
-          "
-          :debounce-time="128"
-          autofocus
-          @search="handleSearch"
-        />
-      </div>
-      <Listbox
-        v-model="activeCategory"
-        :options="groupedMenuTreeNodes"
-        option-label="translatedLabel"
-        option-group-label="label"
-        option-group-children="children"
-        scroll-height="100%"
-        :option-disabled="
-          (option: SettingTreeNode) =>
-            !queryIsEmpty && !searchResultsCategories.has(option.label ?? '')
-        "
-        :class="
-          teamWorkspacesEnabled
-            ? 'w-full border-none bg-transparent'
-            : 'w-full border-none'
-        "
-      >
-        <!-- Workspace mode: custom group headers -->
-        <template v-if="teamWorkspacesEnabled" #optiongroup="{ option }">
-          <h3 class="text-xs font-semibold uppercase text-muted m-0 pt-6 pb-2">
-            {{ option.translatedLabel ?? option.label }}
-          </h3>
-        </template>
-        <!-- Legacy mode: divider between groups -->
-        <template v-else #optiongroup>
-          <Divider class="my-0" />
-        </template>
-        <!-- Custom option template with data-testid for stable test selectors -->
-        <template #option="{ option }">
-          <span
-            :data-testid="`settings-tab-${option.key}`"
-            class="settings-tab-option"
-          >
-            <WorkspaceSidebarItem
-              v-if="teamWorkspacesEnabled && option.key === 'workspace'"
-            />
-            <template v-else>{{ option.translatedLabel }}</template>
-          </span>
-        </template>
-      </Listbox>
-    </ScrollPanel>
-    <Divider layout="vertical" class="mx-1 hidden md:flex 2xl:mx-4" />
-    <Divider layout="horizontal" class="flex md:hidden" />
-    <Tabs
-      :value="tabValue"
-      :lazy="true"
-      :class="
-        teamWorkspacesEnabled
-          ? 'h-full flex-1 overflow-auto scrollbar-custom'
-          : 'settings-content h-full w-full'
-      "
-    >
-      <TabPanels class="settings-tab-panels h-full w-full pr-0">
-        <PanelTemplate value="Search Results">
-          <SettingsPanel :setting-groups="searchResults" />
-        </PanelTemplate>
-
-        <PanelTemplate
-          v-for="category in settingCategories"
-          :key="category.key"
-          :value="category.label ?? ''"
-        >
-          <template #header>
-            <CurrentUserMessage v-if="tabValue === 'Comfy'" />
-            <ColorPaletteMessage v-if="tabValue === 'Appearance'" />
-          </template>
-          <SettingsPanel :setting-groups="sortedGroups(category)" />
-        </PanelTemplate>
-
-        <Suspense v-for="panel in panels" :key="panel.node.key">
-          <component :is="panel.component" v-bind="panel.props" />
-          <template #fallback>
-            <div>{{ $t('g.loadingPanel', { panel: panel.node.label }) }}</div>
-          </template>
-        </Suspense>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-import Listbox from 'primevue/listbox'
-import ScrollPanel from 'primevue/scrollpanel'
-import TabPanels from 'primevue/tabpanels'
-import Tabs from 'primevue/tabs'
-import { computed, nextTick, onBeforeUnmount, watch } from 'vue'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
-import WorkspaceSidebarItem from '@/components/dialog/content/setting/WorkspaceSidebarItem.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
-import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
-import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
-import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
-import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
-import type { SettingTreeNode } from '@/platform/settings/settingStore'
-import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
-import { flattenTree } from '@/utils/treeUtil'
-
-const { defaultPanel, scrollToSettingId } = defineProps<{
-  defaultPanel?:
-    | 'about'
-    | 'keybinding'
-    | 'extension'
-    | 'server-config'
-    | 'user'
-    | 'credits'
-    | 'subscription'
-    | 'workspace'
-    | 'secrets'
-  scrollToSettingId?: string
-}>()
-
-const { flags } = useFeatureFlags()
-const teamWorkspacesEnabled = computed(
-  () => isCloud && flags.teamWorkspacesEnabled
-)
-
-const {
-  activeCategory,
-  defaultCategory,
-  settingCategories,
-  groupedMenuTreeNodes,
-  panels
-} = useSettingUI(defaultPanel, scrollToSettingId)
-
-const {
-  searchQuery,
-  searchResultsCategories,
-  queryIsEmpty,
-  inSearch,
-  handleSearch: handleSearchBase,
-  getSearchResults
-} = useSettingSearch()
-
-const authActions = useFirebaseAuthActions()
-
-// Get max sortOrder from settings in a group
-const getGroupSortOrder = (group: SettingTreeNode): number =>
-  Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
-
-// Sort groups for a category
-const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
-  return [...(category.children ?? [])]
-    .sort((a, b) => {
-      const orderDiff = getGroupSortOrder(b) - getGroupSortOrder(a)
-      return orderDiff !== 0 ? orderDiff : a.label.localeCompare(b.label)
-    })
-    .map((group) => ({
-      label: group.label,
-      settings: flattenTree<SettingParams>(group).sort((a, b) => {
-        const sortOrderA = a.sortOrder ?? 0
-        const sortOrderB = b.sortOrder ?? 0
-
-        return sortOrderB - sortOrderA
-      })
-    }))
-}
-
-const handleSearch = (query: string) => {
-  handleSearchBase(query.trim())
-  activeCategory.value = query ? null : defaultCategory.value
-}
-
-// Get search results
-const searchResults = computed<ISettingGroup[]>(() =>
-  getSearchResults(activeCategory.value)
-)
-
-const tabValue = computed<string>(() =>
-  inSearch.value ? 'Search Results' : (activeCategory.value?.label ?? '')
-)
-
-// Scroll to and highlight the target setting once the correct tab renders.
-if (scrollToSettingId) {
-  const stopScrollWatch = watch(
-    tabValue,
-    () => {
-      void nextTick(() => {
-        const el = document.querySelector(
-          `[data-setting-id="${CSS.escape(scrollToSettingId)}"]`
-        )
-        if (!el) return
-        stopScrollWatch()
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        el.classList.add('setting-highlight')
-        el.addEventListener(
-          'animationend',
-          () => el.classList.remove('setting-highlight'),
-          { once: true }
-        )
-      })
-    },
-    { immediate: true }
-  )
-  onBeforeUnmount(stopScrollWatch)
-}
-
-// Don't allow null category to be set outside of search.
-// In search mode, the active category can be null to show all search results.
-watch(activeCategory, (_, oldValue) => {
-  if (!tabValue.value) {
-    activeCategory.value = oldValue
-  }
-  if (activeCategory.value?.key === 'credits') {
-    void authActions.fetchBalance()
-  }
-})
-</script>
-
-<style>
-.settings-tab-panels {
-  padding-top: 0 !important;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .setting-highlight {
-    animation: setting-highlight-pulse 1.5s ease-in-out;
-  }
-}
-
-@keyframes setting-highlight-pulse {
-  0%,
-  100% {
-    background-color: transparent;
-  }
-  30% {
-    background-color: color-mix(
-      in srgb,
-      var(--p-primary-color) 15%,
-      transparent
-    );
-  }
-}
-</style>
-
-<style scoped>
-/* Legacy mode styles (when teamWorkspacesEnabled is false) */
-.settings-container {
-  display: flex;
-  height: 70vh;
-  width: 60vw;
-  max-width: 64rem;
-  overflow: hidden;
-}
-
-.settings-content {
-  overflow-x: auto;
-}
-
-@media (max-width: 768px) {
-  .settings-container {
-    flex-direction: column;
-    height: auto;
-    width: 80vw;
-  }
-
-  .settings-sidebar {
-    width: 100%;
-  }
-
-  .settings-content {
-    height: 350px;
-  }
-}
-
-/* Hide the first group separator in legacy mode */
-.settings-sidebar :deep(.p-listbox-option-group:nth-child(1)) {
-  display: none;
-}
-</style>
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -12,10 +12,30 @@ import {
  useSettingStore
 } from '@/platform/settings/settingStore'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
-import type { SettingParams } from '@/platform/settings/types'
+import type { SettingPanelType, SettingParams } from '@/platform/settings/types'
+import type { NavGroupData } from '@/types/navTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'

+const CATEGORY_ICONS: Record<string, string> = {
+  '3D': 'icon-[lucide--box]',
+  about: 'icon-[lucide--info]',
+  Appearance: 'icon-[lucide--palette]',
+  Comfy: 'icon-[lucide--settings]',
+  credits: 'icon-[lucide--coins]',
+  extension: 'icon-[lucide--puzzle]',
+  keybinding: 'icon-[lucide--keyboard]',
+  LiteGraph: 'icon-[lucide--workflow]',
+  'Mask Editor': 'icon-[lucide--pen-tool]',
+  Other: 'icon-[lucide--ellipsis]',
+  PlanCredits: 'icon-[lucide--credit-card]',
+  secrets: 'icon-[lucide--key-round]',
+  'server-config': 'icon-[lucide--server]',
+  subscription: 'icon-[lucide--credit-card]',
+  user: 'icon-[lucide--user]',
+  workspace: 'icon-[lucide--building-2]'
+}
+
 interface SettingPanelItem {
  node: SettingTreeNode
  component: Component
@@ -23,16 +43,7 @@ interface SettingPanelItem {
 }

 export function useSettingUI(
-  defaultPanel?:
-    | 'about'
-    | 'keybinding'
-    | 'extension'
-    | 'server-config'
-    | 'user'
-    | 'credits'
-    | 'subscription'
-    | 'workspace'
-    | 'secrets',
+  defaultPanel?: SettingPanelType,
  scrollToSettingId?: string
 ) {
  const { t } = useI18n()
@@ -165,7 +176,8 @@ export function useSettingUI(
      children: []
    },
    component: defineAsyncComponent(
-      () => import('@/components/dialog/content/setting/WorkspacePanel.vue')
+      () =>
+        import('@/components/dialog/content/setting/WorkspacePanelContent.vue')
    )
  }

@@ -357,6 +369,36 @@ export function useSettingUI(
      : legacyMenuTreeNodes.value
  )

+  const navGroups = computed<NavGroupData[]>(() =>
+    groupedMenuTreeNodes.value.map((group) => ({
+      title:
+        (group as SettingTreeNode & { translatedLabel?: string })
+          .translatedLabel ?? group.label,
+      items: (group.children ?? []).map((child) => ({
+        id: child.key,
+        label:
+          (child as SettingTreeNode & { translatedLabel?: string })
+            .translatedLabel ?? child.label,
+        icon:
+          CATEGORY_ICONS[child.key] ??
+          CATEGORY_ICONS[child.label] ??
+          'icon-[lucide--plug]'
+      }))
+    }))
+  )
+
+  function findCategoryByKey(key: string): SettingTreeNode | null {
+    for (const group of groupedMenuTreeNodes.value) {
+      const found = group.children?.find((node) => node.key === key)
+      if (found) return found
+    }
+    return null
+  }
+
+  function findPanelByKey(key: string): SettingPanelItem | null {
+    return panels.value.find((p) => p.node.key === key) ?? null
+  }
+
  onMounted(() => {
    activeCategory.value = defaultCategory.value
  })
@@ -366,6 +408,10 @@ export function useSettingUI(
    activeCategory,
    defaultCategory,
    groupedMenuTreeNodes,
-    settingCategories
+    settingCategories,
+    navGroups,
+    teamWorkspacesEnabled,
+    findCategoryByKey,
+    findPanelByKey
  }
 }
--- a/src/platform/settings/composables/useSettingsDialog.ts
+++ b/src/platform/settings/composables/useSettingsDialog.ts
@@ -0,0 +1,34 @@
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
+
+import SettingDialog from '@/platform/settings/components/SettingDialog.vue'
+import type { SettingPanelType } from '@/platform/settings/types'
+
+const DIALOG_KEY = 'global-settings'
+
+export function useSettingsDialog() {
+  const dialogService = useDialogService()
+  const dialogStore = useDialogStore()
+
+  function hide() {
+    dialogStore.closeDialog({ key: DIALOG_KEY })
+  }
+
+  function show(panel?: SettingPanelType, settingId?: string) {
+    dialogService.showLayoutDialog({
+      key: DIALOG_KEY,
+      component: SettingDialog,
+      props: {
+        onClose: hide,
+        ...(panel ? { defaultPanel: panel } : {}),
+        ...(settingId ? { scrollToSettingId: settingId } : {})
+      }
+    })
+  }
+
+  function showAbout() {
+    show('about')
+  }
+
+  return { show, hide, showAbout }
+}
--- a/src/platform/settings/types.ts
+++ b/src/platform/settings/types.ts
@@ -64,3 +64,14 @@ export interface ISettingGroup {
  label: string
  settings: SettingParams[]
 }
+
+export type SettingPanelType =
+  | 'about'
+  | 'credits'
+  | 'extension'
+  | 'keybinding'
+  | 'secrets'
+  | 'server-config'
+  | 'subscription'
+  | 'user'
+  | 'workspace'
--- a/src/platform/workspace/composables/useWorkspaceUI.ts
+++ b/src/platform/workspace/composables/useWorkspaceUI.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { createSharedComposable } from '@vueuse/core'

 import type { WorkspaceRole, WorkspaceType } from '../api/workspaceApi'
@@ -137,13 +137,6 @@ function getUIConfig(
 function useWorkspaceUIInternal() {
  const store = useTeamWorkspaceStore()

-  // Tab management (shared UI state)
-  const activeTab = ref<string>('plan')
-
-  function setActiveTab(tab: string | number) {
-    activeTab.value = String(tab)
-  }
-
  const workspaceType = computed<WorkspaceType>(
    () => store.activeWorkspace?.type ?? 'personal'
  )
@@ -161,10 +154,6 @@ function useWorkspaceUIInternal() {
  )

  return {
-    // Tab management
-    activeTab: computed(() => activeTab.value),
-    setActiveTab,
-
    // Permissions and config
    permissions,
    uiConfig,
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,7 +1,7 @@
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
 import { type StatusWsMessageStatus } from '@/schemas/apiSchema'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { isCloud } from '@/platform/distribution/types'
 import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
 import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
@@ -464,7 +464,7 @@ export class ComfyUI {
              $el('button.comfy-settings-btn', {
                textContent: '⚙️',
                onclick: () => {
-                  useDialogService().showSettingsDialog()
+                  useSettingsDialog().show()
                }
              }),
              $el('button.comfy-close-menu-btn', {
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -40,10 +40,6 @@ const lazyUpdatePasswordContent = () =>
  import('@/components/dialog/content/UpdatePasswordContent.vue')
 const lazyComfyOrgHeader = () =>
  import('@/components/dialog/header/ComfyOrgHeader.vue')
-const lazySettingDialogHeader = () =>
-  import('@/components/dialog/header/SettingDialogHeader.vue')
-const lazySettingDialogContent = () =>
-  import('@/platform/settings/components/SettingDialogContent.vue')
 const lazyImportFailedNodeContent = () =>
  import('@/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue')
 const lazyImportFailedNodeHeader = () =>
@@ -128,64 +124,6 @@ export const useDialogService = () => {
    })
  }

-  async function showSettingsDialog(
-    panel?:
-      | 'about'
-      | 'keybinding'
-      | 'extension'
-      | 'server-config'
-      | 'user'
-      | 'credits'
-      | 'subscription'
-      | 'workspace'
-      | 'secrets',
-    settingId?: string
-  ) {
-    const [
-      { default: SettingDialogHeader },
-      { default: SettingDialogContent }
-    ] = await Promise.all([
-      lazySettingDialogHeader(),
-      lazySettingDialogContent()
-    ])
-
-    const props =
-      panel || settingId
-        ? {
-            props: {
-              defaultPanel: panel,
-              scrollToSettingId: settingId
-            }
-          }
-        : undefined
-
-    dialogStore.showDialog({
-      key: 'global-settings',
-      headerComponent: SettingDialogHeader,
-      component: SettingDialogContent,
-      ...props
-    })
-  }
-
-  async function showAboutDialog() {
-    const [
-      { default: SettingDialogHeader },
-      { default: SettingDialogContent }
-    ] = await Promise.all([
-      lazySettingDialogHeader(),
-      lazySettingDialogContent()
-    ])
-
-    dialogStore.showDialog({
-      key: 'global-settings',
-      headerComponent: SettingDialogHeader,
-      component: SettingDialogContent,
-      props: {
-        defaultPanel: 'about'
-      }
-    })
-  }
-
  function showExecutionErrorDialog(executionError: ExecutionErrorDialogInput) {
    const props: ComponentAttrs<typeof ErrorDialogContent> = {
      error: {
@@ -476,7 +414,7 @@ export const useDialogService = () => {
    const layoutDefaultProps: DialogComponentProps = {
      headless: true,
      modal: true,
-      closable: false,
+      closable: true,
      pt: {
        root: {
          class: 'rounded-2xl overflow-hidden'
@@ -776,8 +714,6 @@ export const useDialogService = () => {
  return {
    showLoadWorkflowWarning,
    showMissingModelsWarning,
-    showSettingsDialog,
-    showAboutDialog,
    showExecutionErrorDialog,
    showApiNodesSignInDialog,
    showSignInDialog,
--- a/src/stores/billingOperationStore.test.ts
+++ b/src/stores/billingOperationStore.test.ts
@@ -33,9 +33,11 @@ vi.mock('@/i18n', () => ({
  t: (key: string) => key
 }))

-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({
-    showSettingsDialog: vi.fn()
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: () => ({
+    show: vi.fn(),
+    hide: vi.fn(),
+    showAbout: vi.fn()
  })
 }))

--- a/src/stores/billingOperationStore.ts
+++ b/src/stores/billingOperationStore.ts
@@ -6,7 +6,7 @@ import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'

 const INITIAL_INTERVAL_MS = 1000
@@ -143,7 +143,7 @@ export const useBillingOperationStore = defineStore('billingOperation', () => {
    const dialogStore = useDialogStore()
    dialogStore.closeDialog({ key: 'subscription-required' })
    dialogStore.closeDialog({ key: 'top-up-credits' })
-    void useDialogService().showSettingsDialog('workspace')
+    useSettingsDialog().show('workspace')

    const toastStore = useToastStore()
    const messageKey =
--- a/src/stores/firebaseAuthStore.test.ts
+++ b/src/stores/firebaseAuthStore.test.ts
@@ -119,7 +119,6 @@ describe('useFirebaseAuthStore', () => {

    // Setup dialog service mock
    vi.mocked(useDialogService, { partial: true }).mockReturnValue({
-      showSettingsDialog: vi.fn(),
      showErrorDialog: vi.fn()
    })

--- a/src/workbench/extensions/manager/composables/useManagerDialog.ts
+++ b/src/workbench/extensions/manager/composables/useManagerDialog.ts
@@ -20,11 +20,6 @@ export function useManagerDialog() {
      props: {
        onClose: hide,
        initialTab
-      },
-      dialogComponentProps: {
-        pt: {
-          content: { class: '!px-0 overflow-hidden h-full !py-0' }
-        }
      }
    })
  }
--- a/src/workbench/extensions/manager/composables/useManagerState.test.ts
+++ b/src/workbench/extensions/manager/composables/useManagerState.test.ts
@@ -28,18 +28,13 @@ vi.mock('@/composables/useFeatureFlags', () => {
  }
 })

-vi.mock('@/services/dialogService', () => {
-  const showManagerPopup = vi.fn()
-  const showLegacyManagerPopup = vi.fn()
-  const showSettingsDialog = vi.fn()
-  return {
-    useDialogService: vi.fn(() => ({
-      showManagerPopup,
-      showLegacyManagerPopup,
-      showSettingsDialog
-    }))
-  }
-})
+vi.mock('@/platform/settings/composables/useSettingsDialog', () => ({
+  useSettingsDialog: vi.fn(() => ({
+    show: vi.fn(),
+    hide: vi.fn(),
+    showAbout: vi.fn()
+  }))
+}))

 vi.mock('@/stores/commandStore', () => ({
  useCommandStore: vi.fn(() => ({
--- a/src/workbench/extensions/manager/composables/useManagerState.ts
+++ b/src/workbench/extensions/manager/composables/useManagerState.ts
@@ -4,7 +4,7 @@ import { computed, readonly } from 'vue'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
-import { useDialogService } from '@/services/dialogService'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useManagerDialog } from '@/workbench/extensions/manager/composables/useManagerDialog'
@@ -148,12 +148,12 @@ export function useManagerState() {
    isLegacyOnly?: boolean
  }): Promise<void> => {
    const state = managerUIState.value
-    const dialogService = useDialogService()
+    const settingsDialog = useSettingsDialog()
    const commandStore = useCommandStore()

    switch (state) {
      case ManagerUIState.DISABLED:
-        void dialogService.showSettingsDialog('extension')
+        settingsDialog.show('extension')
        break

      case ManagerUIState.LEGACY_UI: {
@@ -173,7 +173,7 @@ export function useManagerState() {
          }
          // Fallback to extensions panel if not showing toast
          if (options?.showToastOnLegacyError === false) {
-            void dialogService.showSettingsDialog('extension')
+            settingsDialog.show('extension')
          }
        }
        break