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

2026-04-26 01:09:46 +00:00 · 2026-02-12 16:27:11 +09:00
parent 995ebc4ba4
commit 553ea63357
54 changed files with 659 additions and 1013 deletions
--- 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>