feat: scroll to specific setting when opening settings dialog (#8761)

## Summary - Adds `settingId` parameter to `showSettingsDialog` that auto-navigates to the correct category tab, scrolls to the setting, and briefly highlights it with a CSS pulse animation - Adds `data-setting-id` attributes to setting items for stable DOM targeting - Adds "Don't show this again" checkbox with "Re-enable in Settings" deep-link to the missing nodes dialog - Adds "Re-enable in Settings" deep-link to missing models and blueprint overwrite "Don't show this again" checkboxes - Fixes #3437 ## Test plan - [x] `pnpm typecheck` passes - [x] `pnpm lint` passes - [x] Unit tests pass (59/59 including 5 new tests for `useSettingUI`) https://github.com/user-attachments/assets/a9e80aea-7b69-4686-b030-55a2e0570ff0 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8761-feat-scroll-to-specific-setting-when-opening-settings-dialog-3036d73d365081d18d9afe9f9ed41ebc) by [Unito](https://www.unito.io)
2026-02-19 14:30:07 +00:00 · 2026-02-10 23:00:46 +01:00
parent 19a724710c
commit e411a104f4
9 changed files with 388 additions and 72 deletions
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -18,17 +18,35 @@
    <div class="flex justify-end gap-4">
      <div
        v-if="type === 'overwriteBlueprint'"
-        class="flex justify-start gap-4"
+        class="flex flex-col justify-start gap-1"
      >
-        <Checkbox
-          v-model="doNotAskAgain"
-          class="flex justify-start gap-4"
-          input-id="doNotAskAgain"
-          binary
-        />
-        <label for="doNotAskAgain" severity="secondary">{{
-          t('missingModelsDialog.doNotAskAgain')
-        }}</label>
+        <div class="flex gap-4">
+          <input
+            id="doNotAskAgain"
+            v-model="doNotAskAgain"
+            type="checkbox"
+            class="h-4 w-4 cursor-pointer"
+          />
+          <label for="doNotAskAgain">{{
+            t('missingModelsDialog.doNotAskAgain')
+          }}</label>
+        </div>
+        <i18n-t
+          v-if="doNotAskAgain"
+          keypath="missingModelsDialog.reEnableInSettings"
+          tag="span"
+          class="text-sm text-muted-foreground ml-8"
+        >
+          <template #link>
+            <Button
+              variant="textonly"
+              class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+              @click="openBlueprintOverwriteSetting"
+            >
+              {{ t('missingModelsDialog.reEnableInSettingsLink') }}
+            </Button>
+          </template>
+        </i18n-t>
      </div>

      <Button
@@ -92,13 +110,13 @@
 </template>

 <script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { ref } from 'vue'
 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 type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'

@@ -114,6 +132,14 @@ const { t } = useI18n()

 const onCancel = () => useDialogStore().closeDialog()

+function openBlueprintOverwriteSetting() {
+  useDialogStore().closeDialog()
+  void useDialogService().showSettingsDialog(
+    undefined,
+    'Comfy.Workflow.WarnBlueprintOverwrite'
+  )
+}
+
 const doNotAskAgain = ref(false)

 const onDeny = () => {
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -5,11 +5,34 @@
    :title="t('missingModelsDialog.missingModels')"
    :message="t('missingModelsDialog.missingModelsMessage')"
  />
-  <div class="mb-4 flex gap-1">
-    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
-    <label for="doNotAskAgain">{{
-      t('missingModelsDialog.doNotAskAgain')
-    }}</label>
+  <div class="mb-4 flex flex-col gap-1">
+    <div class="flex gap-1">
+      <input
+        id="doNotAskAgain"
+        v-model="doNotAskAgain"
+        type="checkbox"
+        class="h-4 w-4 cursor-pointer"
+      />
+      <label for="doNotAskAgain">{{
+        t('missingModelsDialog.doNotAskAgain')
+      }}</label>
+    </div>
+    <i18n-t
+      v-if="doNotAskAgain"
+      keypath="missingModelsDialog.reEnableInSettings"
+      tag="span"
+      class="text-sm text-muted-foreground ml-6"
+    >
+      <template #link>
+        <Button
+          variant="textonly"
+          class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+          @click="openShowMissingModelsSetting"
+        >
+          {{ t('missingModelsDialog.reEnableInSettingsLink') }}
+        </Button>
+      </template>
+    </i18n-t>
  </div>
  <ListBox :options="missingModels" class="comfy-missing-models">
    <template #option="{ option }">
@@ -31,16 +54,18 @@
 </template>

 <script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
 import { computed, onBeforeUnmount, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import Button from '@/components/ui/button/Button.vue'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { isDesktop } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useDialogService } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'

 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources
@@ -78,6 +103,14 @@ const { t } = useI18n()

 const doNotAskAgain = ref(false)

+function openShowMissingModelsSetting() {
+  useDialogStore().closeDialog({ key: 'global-missing-models-warning' })
+  void useDialogService().showSettingsDialog(
+    undefined,
+    'Comfy.Workflow.ShowMissingModelsWarning'
+  )
+}
+
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
  return props.missingModels.map((model) => {
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -1,55 +1,86 @@
 <template>
-  <!-- Cloud mode: Learn More + Got It buttons -->
-  <div
-    v-if="isCloud"
-    class="flex w-full items-center justify-between gap-2 py-2 px-4"
-  >
-    <Button
-      variant="textonly"
-      size="sm"
-      as="a"
-      href="https://www.comfy.org/cloud"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <i class="icon-[lucide--info]"></i>
-      <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
-    </Button>
-    <Button variant="secondary" size="md" @click="handleGotItClick">{{
-      $t('missingNodes.cloud.gotIt')
-    }}</Button>
-  </div>
+  <div class="flex w-full flex-col gap-2 py-2 px-4">
+    <div class="flex flex-col gap-1 text-sm text-muted-foreground">
+      <div class="flex items-center gap-1">
+        <input
+          id="doNotAskAgainNodes"
+          v-model="doNotAskAgain"
+          type="checkbox"
+          class="h-4 w-4 cursor-pointer"
+        />
+        <label for="doNotAskAgainNodes">{{
+          $t('missingModelsDialog.doNotAskAgain')
+        }}</label>
+      </div>
+      <i18n-t
+        v-if="doNotAskAgain"
+        keypath="missingModelsDialog.reEnableInSettings"
+        tag="span"
+        class="text-sm text-muted-foreground ml-6"
+      >
+        <template #link>
+          <Button
+            variant="textonly"
+            class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+            @click="openShowMissingNodesSetting"
+          >
+            {{ $t('missingModelsDialog.reEnableInSettingsLink') }}
+          </Button>
+        </template>
+      </i18n-t>
+    </div>

-  <!-- OSS mode: Open Manager + Install All buttons -->
-  <div v-else-if="showManagerButtons" class="flex justify-end gap-1 py-2 px-4">
-    <Button variant="textonly" @click="openManager">{{
-      $t('g.openManager')
-    }}</Button>
-    <PackInstallButton
-      v-if="showInstallAllButton"
-      type="secondary"
-      size="md"
-      :disabled="
-        isLoading || !!error || missingNodePacks.length === 0 || isInstalling
-      "
-      :is-loading="isLoading"
-      :node-packs="missingNodePacks"
-      :label="
-        isLoading
-          ? $t('manager.gettingInfo')
-          : $t('manager.installAllMissingNodes')
-      "
-    />
+    <!-- Cloud mode: Learn More + Got It buttons -->
+    <div v-if="isCloud" class="flex w-full items-center justify-between gap-2">
+      <Button
+        variant="textonly"
+        size="sm"
+        as="a"
+        href="https://www.comfy.org/cloud"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <i class="icon-[lucide--info]"></i>
+        <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
+      </Button>
+      <Button variant="secondary" size="md" @click="handleGotItClick">{{
+        $t('missingNodes.cloud.gotIt')
+      }}</Button>
+    </div>
+
+    <!-- OSS mode: Open Manager + Install All buttons -->
+    <div v-else-if="showManagerButtons" class="flex justify-end gap-1">
+      <Button variant="textonly" @click="openManager">{{
+        $t('g.openManager')
+      }}</Button>
+      <PackInstallButton
+        v-if="showInstallAllButton"
+        type="secondary"
+        size="md"
+        :disabled="
+          isLoading || !!error || missingNodePacks.length === 0 || isInstalling
+        "
+        :is-loading="isLoading"
+        :node-packs="missingNodePacks"
+        :label="
+          isLoading
+            ? $t('manager.gettingInfo')
+            : $t('manager.installAllMissingNodes')
+        "
+      />
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, nextTick, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

 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 { useDialogStore } from '@/stores/dialogStore'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -60,10 +91,24 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 const dialogStore = useDialogStore()
 const { t } = useI18n()

+const doNotAskAgain = ref(false)
+
+watch(doNotAskAgain, (value) => {
+  void useSettingStore().set('Comfy.Workflow.ShowMissingNodesWarning', !value)
+})
+
 const handleGotItClick = () => {
  dialogStore.closeDialog({ key: 'global-missing-nodes' })
 }

+function openShowMissingNodesSetting() {
+  dialogStore.closeDialog({ key: 'global-missing-nodes' })
+  void useDialogService().showSettingsDialog(
+    undefined,
+    'Comfy.Workflow.ShowMissingNodesWarning'
+  )
+}
+
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1691,6 +1691,8 @@
  },
  "missingModelsDialog": {
    "doNotAskAgain": "Don't show this again",
+    "reEnableInSettings": "Re-enable in {link}",
+    "reEnableInSettingsLink": "Settings",
    "missingModels": "Missing Models",
    "missingModelsMessage": "When loading the graph, the following models were not found"
  },
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -112,7 +112,7 @@ import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, watch } from 'vue'

 import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
@@ -129,7 +129,7 @@ import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { flattenTree } from '@/utils/treeUtil'

-const { defaultPanel } = defineProps<{
+const { defaultPanel, scrollToSettingId } = defineProps<{
  defaultPanel?:
    | 'about'
    | 'keybinding'
@@ -140,6 +140,7 @@ const { defaultPanel } = defineProps<{
    | 'subscription'
    | 'workspace'
    | 'secrets'
+  scrollToSettingId?: string
 }>()

 const { flags } = useFeatureFlags()
@@ -153,7 +154,7 @@ const {
  settingCategories,
  groupedMenuTreeNodes,
  panels
-} = useSettingUI(defaultPanel)
+} = useSettingUI(defaultPanel, scrollToSettingId)

 const {
  searchQuery,
@@ -202,6 +203,31 @@ 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) => {
@@ -218,6 +244,26 @@ watch(activeCategory, (_, oldValue) => {
 .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>
--- a/src/platform/settings/components/SettingGroup.vue
+++ b/src/platform/settings/components/SettingGroup.vue
@@ -9,6 +9,7 @@
    <div
      v-for="setting in group.settings.filter((s) => !s.deprecated)"
      :key="setting.id"
+      :data-setting-id="setting.id"
      class="setting-item mb-4"
    >
      <SettingItem :setting="setting" />
--- a/src/platform/settings/composables/useSettingUI.test.ts
+++ b/src/platform/settings/composables/useSettingUI.test.ts
@@ -0,0 +1,140 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  getSettingInfo,
+  useSettingStore
+} from '@/platform/settings/settingStore'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+
+import { useSettingUI } from './useSettingUI'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (_: string, fallback: string) => fallback })
+}))
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => ({ isLoggedIn: ref(false) })
+}))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({ isActiveSubscription: ref(false) })
+}))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: { teamWorkspacesEnabled: false, userSecretsEnabled: false }
+  })
+}))
+
+vi.mock('@/composables/useVueFeatureFlags', () => ({
+  useVueFeatureFlags: () => ({ shouldRenderVueNodes: ref(false) })
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false,
+  isDesktop: false
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(),
+  getSettingInfo: vi.fn()
+}))
+
+interface MockSettingParams {
+  id: string
+  name: string
+  type: string
+  defaultValue: unknown
+  category?: string[]
+}
+
+describe('useSettingUI', () => {
+  const mockSettings: Record<string, MockSettingParams> = {
+    'Comfy.Locale': {
+      id: 'Comfy.Locale',
+      name: 'Locale',
+      type: 'combo',
+      defaultValue: 'en'
+    },
+    'LiteGraph.Zoom': {
+      id: 'LiteGraph.Zoom',
+      name: 'Zoom',
+      type: 'slider',
+      defaultValue: 1
+    },
+    'Appearance.Theme': {
+      id: 'Appearance.Theme',
+      name: 'Theme',
+      type: 'combo',
+      defaultValue: 'dark'
+    }
+  }
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+    vi.clearAllMocks()
+
+    vi.mocked(useSettingStore).mockReturnValue({
+      settingsById: mockSettings
+    } as ReturnType<typeof useSettingStore>)
+
+    vi.mocked(getSettingInfo).mockImplementation((setting) => {
+      const parts = setting.category || setting.id.split('.')
+      return {
+        category: parts[0] ?? 'Other',
+        subCategory: parts[1] ?? 'Other'
+      }
+    })
+  })
+
+  function findCategory(
+    categories: SettingTreeNode[],
+    label: string
+  ): SettingTreeNode | undefined {
+    return categories.find((c) => c.label === label)
+  }
+
+  it('defaults to first category when no params are given', () => {
+    const { defaultCategory, settingCategories } = useSettingUI()
+    expect(defaultCategory.value).toBe(settingCategories.value[0])
+  })
+
+  it('resolves category from scrollToSettingId', () => {
+    const { defaultCategory, settingCategories } = useSettingUI(
+      undefined,
+      'Comfy.Locale'
+    )
+    const comfyCategory = findCategory(settingCategories.value, 'Comfy')
+    expect(comfyCategory).toBeDefined()
+    expect(defaultCategory.value).toBe(comfyCategory)
+  })
+
+  it('resolves different category from scrollToSettingId', () => {
+    const { defaultCategory, settingCategories } = useSettingUI(
+      undefined,
+      'Appearance.Theme'
+    )
+    const appearanceCategory = findCategory(
+      settingCategories.value,
+      'Appearance'
+    )
+    expect(appearanceCategory).toBeDefined()
+    expect(defaultCategory.value).toBe(appearanceCategory)
+  })
+
+  it('falls back to first category for unknown scrollToSettingId', () => {
+    const { defaultCategory, settingCategories } = useSettingUI(
+      undefined,
+      'NonExistent.Setting'
+    )
+    expect(defaultCategory.value).toBe(settingCategories.value[0])
+  })
+
+  it('gives defaultPanel precedence over scrollToSettingId', () => {
+    const { defaultCategory } = useSettingUI('about', 'Comfy.Locale')
+    expect(defaultCategory.value.key).toBe('about')
+  })
+})
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -7,10 +7,12 @@ import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { isCloud, isDesktop } from '@/platform/distribution/types'
+import {
+  getSettingInfo,
+  useSettingStore
+} from '@/platform/settings/settingStore'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
-
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'

@@ -30,7 +32,8 @@ export function useSettingUI(
    | 'credits'
    | 'subscription'
    | 'workspace'
-    | 'secrets'
+    | 'secrets',
+  scrollToSettingId?: string
 ) {
  const { t } = useI18n()
  const { isLoggedIn } = useCurrentUser()
@@ -238,12 +241,23 @@ export function useSettingUI(
   * The default category to show when the dialog is opened.
   */
  const defaultCategory = computed<SettingTreeNode>(() => {
-    if (!defaultPanel) return settingCategories.value[0]
-    // Search through all groups in groupedMenuTreeNodes
-    for (const group of groupedMenuTreeNodes.value) {
-      const found = group.children?.find((node) => node.key === defaultPanel)
-      if (found) return found
+    if (defaultPanel) {
+      for (const group of groupedMenuTreeNodes.value) {
+        const found = group.children?.find((node) => node.key === defaultPanel)
+        if (found) return found
+      }
+      return settingCategories.value[0]
    }
+
+    if (scrollToSettingId) {
+      const setting = settingStore.settingsById[scrollToSettingId]
+      if (setting) {
+        const { category } = getSettingInfo(setting)
+        const found = settingCategories.value.find((c) => c.label === category)
+        if (found) return found
+      }
+    }
+
    return settingCategories.value[0]
  })

--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -138,7 +138,8 @@ export const useDialogService = () => {
      | 'credits'
      | 'subscription'
      | 'workspace'
-      | 'secrets'
+      | 'secrets',
+    settingId?: string
  ) {
    const [
      { default: SettingDialogHeader },
@@ -148,7 +149,15 @@ export const useDialogService = () => {
      lazySettingDialogContent()
    ])

-    const props = panel ? { props: { defaultPanel: panel } } : undefined
+    const props =
+      panel || settingId
+        ? {
+            props: {
+              defaultPanel: panel,
+              scrollToSettingId: settingId
+            }
+          }
+        : undefined

    dialogStore.showDialog({
      key: 'global-settings',