From 2f8bbdc63611f2108e5a9ee3d65038247e658993 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 6 May 2026 19:18:07 +0200
Subject: [PATCH] fix: open plugin card on first click of a setting sub-result

---
 app/[locale]/settings/page.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index 6e2740a9..4bb68d8c 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -346,7 +346,7 @@ export default function SettingsPage() {
   const [activeTab, setActiveTab] = useState<Tab>(readPersistedTab);
   const [mobileShowContent, setMobileShowContent] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
-  const [pendingHighlight, setPendingHighlight] = useState<{ tab: Tab; label: string } | null>(null);
+  const [pendingHighlight, setPendingHighlight] = useState<{ tab: Tab; label: string; pluginId?: string } | null>(null);
   const isDesktop = useIsDesktop();
 
   const messages = useMessages() as Record<string, unknown>;
@@ -489,6 +489,18 @@ export default function SettingsPage() {
     if (pendingHighlight.tab !== activeTab) return;
     if (typeof window === 'undefined') return;
 
+    // For plugin-setting sub-results, ask the plugins tab to expand the
+    // matching card so the field becomes part of the DOM. Dispatched here
+    // (not in the click handler) because PluginsSettings only mounts after
+    // the tab switches, and its listener registers in its own useEffect —
+    // child effects run before parent effects, so by the time we get here
+    // the listener is guaranteed to be in place.
+    if (pendingHighlight.pluginId) {
+      window.dispatchEvent(
+        new CustomEvent('settings-plugin-expand', { detail: { pluginId: pendingHighlight.pluginId } })
+      );
+    }
+
     let cancelled = false;
     let retryTimer: ReturnType<typeof setTimeout> | undefined;
     let cleanupTimer: ReturnType<typeof setTimeout> | undefined;
@@ -628,12 +640,7 @@ export default function SettingsPage() {
 
   const handleSubResultSelect = (tabId: Tab, sub: SubResult) => {
     handleTabSelect(tabId);
-    if (sub.pluginId && typeof window !== 'undefined') {
-      window.dispatchEvent(
-        new CustomEvent('settings-plugin-expand', { detail: { pluginId: sub.pluginId } })
-      );
-    }
-    setPendingHighlight({ tab: tabId, label: sub.label });
+    setPendingHighlight({ tab: tabId, label: sub.label, pluginId: sub.pluginId });
   };
 
   const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';