From c7c1cf2552ea96cb8728e333cc12d5c1801e7a1a Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Fri, 27 Jun 2025 21:53:43 +0800
Subject: [PATCH] refactor: increase css editor height, fix EditMcpJsonPopup
 (#7535)

* refactor: increase css editor height

* fix: lint warnings

* refactor: use vh for height

* fix: editmcpjsonpopup editor unavailable after deleting all the code
---
 .../settings/DataSettings/DataSettings.tsx    |  2 +-
 .../DisplaySettings/DisplaySettings.tsx       |  4 +-
 .../settings/MCPSettings/EditMcpJsonPopup.tsx | 42 ++++++++++---------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
index 93a138f847..fece64a16a 100644
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -546,7 +546,7 @@ const DataSettings: FC = () => {
     }
 
     handleDataMigration()
-  }, [])
+  }, [t])
 
   const onSkipBackupFilesChange = (value: boolean) => {
     setSkipBackupFile(value)
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 56d09bd8dc..27453ef1cd 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -315,9 +315,9 @@ const DisplaySettings: FC = () => {
           language="css"
           placeholder={t('settings.display.custom.css.placeholder')}
           onChange={(value) => dispatch(setCustomCss(value))}
-          height="350px"
+          height="60vh"
           options={{
-            collapsible: true,
+            collapsible: false,
             wrappable: true,
             autocompletion: true,
             lineNumbers: true,
diff --git a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
index 77ad41fb54..0e505b3840 100644
--- a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
@@ -3,7 +3,7 @@ import { TopView } from '@renderer/components/TopView'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setMCPServers } from '@renderer/store/mcp'
 import { MCPServer } from '@renderer/types'
-import { Modal, Typography } from 'antd'
+import { Modal, Spin, Typography } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -16,12 +16,14 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [jsonConfig, setJsonConfig] = useState('')
   const [jsonSaving, setJsonSaving] = useState(false)
   const [jsonError, setJsonError] = useState('')
+  const [isLoading, setIsLoading] = useState(true)
   const mcpServers = useAppSelector((state) => state.mcp.servers)
 
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
 
   useEffect(() => {
+    setIsLoading(true)
     try {
       const mcpServersObj: Record<string, any> = {}
 
@@ -40,6 +42,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     } catch (error) {
       console.error('Failed to format JSON:', error)
       setJsonError(t('settings.mcp.jsonFormatError'))
+    } finally {
+      setIsLoading(false)
     }
   }, [mcpServers, t])
 
@@ -118,24 +122,24 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
           {jsonError ? <span style={{ color: 'red' }}>{jsonError}</span> : ''}
         </Typography.Text>
       </div>
-      {jsonConfig && (
-        <div style={{ marginBottom: '16px' }}>
-          <CodeEditor
-            value={jsonConfig}
-            language="json"
-            onChange={(value) => setJsonConfig(value)}
-            maxHeight="60vh"
-            options={{
-              lint: true,
-              collapsible: true,
-              wrappable: true,
-              lineNumbers: true,
-              foldGutter: true,
-              highlightActiveLine: true,
-              keymap: true
-            }}
-          />
-        </div>
+      {isLoading ? (
+        <Spin size="large" />
+      ) : (
+        <CodeEditor
+          value={jsonConfig}
+          language="json"
+          onChange={(value) => setJsonConfig(value)}
+          height="60vh"
+          options={{
+            lint: true,
+            collapsible: false,
+            wrappable: true,
+            lineNumbers: true,
+            foldGutter: true,
+            highlightActiveLine: true,
+            keymap: true
+          }}
+        />
       )}
       <Typography.Text type="secondary">{t('settings.mcp.jsonModeHint')}</Typography.Text>
     </Modal>