From 3c4bb72a82f9bbd563d2874fc189b2f738e52553 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Fri, 26 Sep 2025 00:13:13 +0800
Subject: [PATCH] refactor(AgentSettings): extract styled components to shared
 module

Move styled components from AgentSettingsPopup to shared.tsx to improve code reusability and maintainability
---
 .../AgentSettings/AgentSettingsPopup.tsx      | 59 +------------------
 .../pages/settings/AgentSettings/shared.tsx   | 57 ++++++++++++++++++
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx b/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
index 45e4490aaa..268009c725 100644
--- a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
@@ -2,16 +2,14 @@ import { Alert, Spinner } from '@heroui/react'
 import { TopView } from '@renderer/components/TopView'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
-import { Menu, Modal } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import AgentAdvancedSettings from './AgentAdvancedSettings'
 import AgentEssentialSettings from './AgentEssentialSettings'
 import AgentPromptSettings from './AgentPromptSettings'
 import AgentToolingSettings from './AgentToolingSettings'
-import { AgentLabel } from './shared'
+import { AgentLabel, LeftMenu, Settings, StyledMenu, StyledModal } from './shared'
 
 interface AgentSettingPopupShowParams {
   agentId: string
@@ -137,61 +135,6 @@ const AgentSettingPopupContainer: React.FC<AgentSettingPopupParams> = ({ tab, ag
   )
 }
 
-const LeftMenu = styled.div`
-  height: 100%;
-  border-right: 0.5px solid var(--color-border);
-`
-
-const Settings = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 16px 16px;
-`
-
-const StyledModal = styled(Modal)`
-  .ant-modal-title {
-    font-size: 14px;
-  }
-  .ant-modal-close {
-    top: 4px;
-    right: 4px;
-  }
-  .ant-menu-item {
-    height: 36px;
-    color: var(--color-text-2);
-    display: flex;
-    align-items: center;
-    border: 0.5px solid transparent;
-    border-radius: 6px;
-    .ant-menu-title-content {
-      line-height: 36px;
-    }
-  }
-  .ant-menu-item-active {
-    background-color: var(--color-background-soft) !important;
-    transition: none;
-  }
-  .ant-menu-item-selected {
-    background-color: var(--color-background-soft);
-    border: 0.5px solid var(--color-border);
-    .ant-menu-title-content {
-      color: var(--color-text-1);
-      font-weight: 500;
-    }
-  }
-`
-
-const StyledMenu = styled(Menu)`
-  width: 220px;
-  padding: 5px;
-  background: transparent;
-  margin-top: 2px;
-  .ant-menu-item {
-    margin-bottom: 7px;
-  }
-`
-
 export default class AgentSettingsPopup {
   static show(props: AgentSettingPopupShowParams) {
     return new Promise<void>((resolve) => {
diff --git a/src/renderer/src/pages/settings/AgentSettings/shared.tsx b/src/renderer/src/pages/settings/AgentSettings/shared.tsx
index 3a311eabe2..64444c6eba 100644
--- a/src/renderer/src/pages/settings/AgentSettings/shared.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/shared.tsx
@@ -2,7 +2,9 @@ import { Avatar, AvatarProps, cn } from '@heroui/react'
 import { getAgentAvatar } from '@renderer/config/agent'
 import { getAgentTypeLabel } from '@renderer/i18n/label'
 import { AgentType } from '@renderer/types'
+import { Menu, Modal } from 'antd'
 import React, { ReactNode } from 'react'
+import styled from 'styled-components'
 
 import { SettingDivider } from '..'
 
@@ -72,3 +74,58 @@ export const SettingsContainer: React.FC<React.ComponentPropsWithRef<'div'>> = (
     </div>
   )
 }
+
+export const LeftMenu = styled.div`
+  height: 100%;
+  border-right: 0.5px solid var(--color-border);
+`
+
+export const Settings = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 16px 16px;
+`
+
+export const StyledModal = styled(Modal)`
+  .ant-modal-title {
+    font-size: 14px;
+  }
+  .ant-modal-close {
+    top: 4px;
+    right: 4px;
+  }
+  .ant-menu-item {
+    height: 36px;
+    color: var(--color-text-2);
+    display: flex;
+    align-items: center;
+    border: 0.5px solid transparent;
+    border-radius: 6px;
+    .ant-menu-title-content {
+      line-height: 36px;
+    }
+  }
+  .ant-menu-item-active {
+    background-color: var(--color-background-soft) !important;
+    transition: none;
+  }
+  .ant-menu-item-selected {
+    background-color: var(--color-background-soft);
+    border: 0.5px solid var(--color-border);
+    .ant-menu-title-content {
+      color: var(--color-text-1);
+      font-weight: 500;
+    }
+  }
+`
+
+export const StyledMenu = styled(Menu)`
+  width: 220px;
+  padding: 5px;
+  background: transparent;
+  margin-top: 2px;
+  .ant-menu-item {
+    margin-bottom: 7px;
+  }
+`