From d64b388920d636ef94a840fa7150a541ff865256 Mon Sep 17 00:00:00 2001
From: Shemol <shemol@163.com>
Date: Mon, 19 Jan 2026 18:49:46 +0800
Subject: [PATCH] refactor: convert nested component to render function in
 settings popups (#12508)

---
 .../AgentSettings/AgentSettingsPopup.tsx      | 50 +++++++++----------
 .../AgentSettings/SessionSettingsPopup.tsx    | 42 ++++++++--------
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx b/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
index f1507f88f8..01499d8500 100644
--- a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
@@ -44,32 +44,30 @@ const AgentSettingPopupContainer: React.FC<AgentSettingPopupParams> = ({ tab, ag
     resolve()
   }
 
-  const items = (
-    [
-      {
-        key: 'essential',
-        label: t('agent.settings.essential')
-      },
-      {
-        key: 'prompt',
-        label: t('agent.settings.prompt')
-      },
-      {
-        key: 'tooling',
-        label: t('agent.settings.tooling.tab', 'Tooling & permissions')
-      },
-      {
-        key: 'plugins',
-        label: t('agent.settings.plugins.tab', 'Plugins')
-      },
-      {
-        key: 'advanced',
-        label: t('agent.settings.advance.title', 'Advanced Settings')
-      }
-    ] as const satisfies { key: AgentSettingPopupTab; label: string }[]
-  ).filter(Boolean)
+  const items = [
+    {
+      key: 'essential',
+      label: t('agent.settings.essential')
+    },
+    {
+      key: 'prompt',
+      label: t('agent.settings.prompt')
+    },
+    {
+      key: 'tooling',
+      label: t('agent.settings.tooling.tab', 'Tooling & permissions')
+    },
+    {
+      key: 'plugins',
+      label: t('agent.settings.plugins.tab', 'Plugins')
+    },
+    {
+      key: 'advanced',
+      label: t('agent.settings.advance.title', 'Advanced Settings')
+    }
+  ] as const satisfies { key: AgentSettingPopupTab; label: string }[]
 
-  const ModalContent = () => {
+  const renderModalContent = () => {
     if (isLoading) {
       // TODO: use skeleton for better ux
       return (
@@ -146,7 +144,7 @@ const AgentSettingPopupContainer: React.FC<AgentSettingPopupParams> = ({ tab, ag
       }}
       width="min(800px, 70vw)"
       centered>
-      <ModalContent />
+      {renderModalContent()}
     </StyledModal>
   )
 }
diff --git a/src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx b/src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx
index c6c1ac451d..6353ac8eff 100644
--- a/src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx
@@ -45,28 +45,26 @@ const SessionSettingPopupContainer: React.FC<SessionSettingPopupParams> = ({ tab
     resolve()
   }
 
-  const items = (
-    [
-      {
-        key: 'essential',
-        label: t('agent.settings.essential')
-      },
-      {
-        key: 'prompt',
-        label: t('agent.settings.prompt')
-      },
-      {
-        key: 'tooling',
-        label: t('agent.settings.tooling.tab', 'Tooling & permissions')
-      },
-      {
-        key: 'advanced',
-        label: t('agent.settings.advance.title', 'Advanced Settings')
-      }
-    ] as const satisfies { key: AgentSettingPopupTab; label: string }[]
-  ).filter(Boolean)
+  const items = [
+    {
+      key: 'essential',
+      label: t('agent.settings.essential')
+    },
+    {
+      key: 'prompt',
+      label: t('agent.settings.prompt')
+    },
+    {
+      key: 'tooling',
+      label: t('agent.settings.tooling.tab', 'Tooling & permissions')
+    },
+    {
+      key: 'advanced',
+      label: t('agent.settings.advance.title', 'Advanced Settings')
+    }
+  ] as const satisfies { key: AgentSettingPopupTab; label: string }[]
 
-  const ModalContent = () => {
+  const renderModalContent = () => {
     if (isLoading) {
       // TODO: use skeleton for better ux
       return (
@@ -132,7 +130,7 @@ const SessionSettingPopupContainer: React.FC<SessionSettingPopupParams> = ({ tab
       }}
       width="min(800px, 70vw)"
       centered>
-      <ModalContent />
+      {renderModalContent()}
     </StyledModal>
   )
 }