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-20 14:54:12 +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()