From 2b896a722bffe19899b3ff49cd53e7d6b61cce7f Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Sun, 15 Feb 2026 12:39:31 +0900
Subject: [PATCH] [bugfix] Restore scroll-to-setting in SettingDialog (#8833)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Restores the scroll-to-setting and highlight animation that was lost
during the BaseModalLayout migration in #8270. Originally implemented in
#8761.

## Changes
- **What**: Re-added scroll-into-view + pulse highlight logic and CSS
animation to `SettingDialog.vue`, ported from the deleted
`SettingDialogContent.vue`

Fixes #3437

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8833-bugfix-Restore-scroll-to-setting-in-SettingDialog-3056d73d36508161abeee047a40dc1e5)
by [Unito](https://www.unito.io)
---
 .../settings/components/SettingDialog.vue     | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/platform/settings/components/SettingDialog.vue b/src/platform/settings/components/SettingDialog.vue
index 20cac4991c..47fafa87dd 100644
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, provide, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
@@ -182,6 +182,31 @@ const searchResults = computed<ISettingGroup[]>(() => {
   return getSearchResults(category)
 })
 
+// Scroll to and highlight the target setting once the correct category renders.
+if (scrollToSettingId) {
+  const stopScrollWatch = watch(
+    activeCategoryKey,
+    () => {
+      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)
+}
+
 watch(activeCategoryKey, (newKey, oldKey) => {
   if (!newKey && !inSearch.value) {
     activeCategoryKey.value = oldKey
@@ -198,3 +223,25 @@ watch(activeCategoryKey, (newKey, oldKey) => {
   }
 })
 </script>
+
+<style>
+@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>