From eeb537048bd4349f6e4fb21942394d3dca4161f4 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Fri, 28 Mar 2025 15:08:24 +0800
Subject: [PATCH] refactor(mcp settings): enhance NpxSearch component layout
 and styling (#4053)

* refactor: mcp setting ui refactor

* refactor(mcp settings): enhance NpxSearch component layout and styling
---
 .../pages/settings/MCPSettings/NpxSearch.tsx  | 107 +++++++++++-------
 src/renderer/src/pages/settings/index.tsx     |   4 +-
 2 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
index 13c95b9e..12c1a6b1 100644
--- a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
@@ -8,6 +8,7 @@ import { Button, Card, Flex, Input, Space, Spin, Tag, Typography } from 'antd'
 import { npxFinder } from 'npx-scope-finder'
 import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import styled, { css } from 'styled-components'
 
 import { SettingDivider, SettingGroup, SettingTitle } from '..'
 
@@ -27,7 +28,7 @@ let _searchResults: SearchResult[] = []
 const NpxSearch: FC = () => {
   const { theme } = useTheme()
   const { t } = useTranslation()
-  const { Paragraph, Text, Link } = Typography
+  const { Text, Link } = Typography
 
   // Add new state variables for npm scope search
   const [npmScope, setNpmScope] = useState('@modelcontextprotocol')
@@ -87,42 +88,44 @@ const NpxSearch: FC = () => {
   }
 
   return (
-    <SettingGroup theme={theme}>
-      <SettingTitle>{t('settings.mcp.npx_list.title')}</SettingTitle>
-      <SettingDivider />
-      <Paragraph type="secondary" style={{ margin: '0 0 10px 0' }}>
-        {t('settings.mcp.npx_list.desc')}
-      </Paragraph>
+    <SettingGroup theme={theme} css={SettingGroupCss}>
+      <div>
+        <SettingTitle>
+          {t('settings.mcp.npx_list.title')} <Text type="secondary">{t('settings.mcp.npx_list.desc')}</Text>
+        </SettingTitle>
+        <SettingDivider />
 
-      <Space direction="vertical" style={{ width: '100%' }}>
-        <Space.Compact style={{ width: '100%', marginBottom: 10 }}>
-          <Input
-            placeholder={t('settings.mcp.npx_list.scope_placeholder')}
-            value={npmScope}
-            onChange={(e) => setNpmScope(e.target.value)}
-            onPressEnter={handleNpmSearch}
-          />
-          <Button icon={<SearchOutlined />} onClick={handleNpmSearch} disabled={searchLoading}>
-            {t('settings.mcp.npx_list.search')}
-          </Button>
-        </Space.Compact>
-
-        <HStack alignItems="center" mt="-5px" mb="5px">
-          {npmScopes.map((scope) => (
-            <Tag
-              key={scope}
-              onClick={() => {
-                if (!searchLoading) {
-                  setNpmScope(scope)
-                  setTimeout(handleNpmSearch, 100)
-                }
-              }}
-              style={{ cursor: searchLoading ? 'not-allowed' : 'pointer' }}>
-              {scope}
-            </Tag>
-          ))}
-        </HStack>
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Space.Compact style={{ width: '100%', marginBottom: 10 }}>
+            <Input
+              placeholder={t('settings.mcp.npx_list.scope_placeholder')}
+              value={npmScope}
+              onChange={(e) => setNpmScope(e.target.value)}
+              onPressEnter={handleNpmSearch}
+            />
+            <Button icon={<SearchOutlined />} onClick={handleNpmSearch} disabled={searchLoading}>
+              {t('settings.mcp.npx_list.search')}
+            </Button>
+          </Space.Compact>
+          <HStack alignItems="center" mt="-5px" mb="5px">
+            {npmScopes.map((scope) => (
+              <Tag
+                key={scope}
+                onClick={() => {
+                  if (!searchLoading) {
+                    setNpmScope(scope)
+                    setTimeout(handleNpmSearch, 100)
+                  }
+                }}
+                style={{ cursor: searchLoading ? 'not-allowed' : 'pointer' }}>
+                {scope}
+              </Tag>
+            ))}
+          </HStack>
+        </Space>
+      </div>
 
+      <ResultList>
         {searchLoading ? (
           <div style={{ textAlign: 'center', padding: '20px' }}>
             <Spin />
@@ -139,7 +142,7 @@ const NpxSearch: FC = () => {
               }
               extra={
                 <Flex>
-                  <Tag bordered={false} color="magenta">
+                  <Tag bordered={false} color="processing">
                     v{record.version}
                   </Tag>
                   <Button
@@ -162,22 +165,38 @@ const NpxSearch: FC = () => {
                 </Flex>
               }>
               <Space direction="vertical" size="small">
-                <Text ellipsis={{ tooltip: true }}>{record.description}</Text>
-                <Text ellipsis={{ tooltip: true }} type="secondary">
+                <Text>{record.description}</Text>
+                <Text type="secondary">
                   {t('settings.mcp.npx_list.usage')}: {record.usage}
                 </Text>
-                <Text ellipsis={{ tooltip: true }}>
-                  <Link href={record.npmLink} target="_blank" rel="noopener noreferrer">
-                    {record.npmLink}
-                  </Link>
-                </Text>
+                <Link href={record.npmLink} target="_blank" rel="noopener noreferrer">
+                  {record.npmLink}
+                </Link>
               </Space>
             </Card>
           ))
         ) : null}
-      </Space>
+      </ResultList>
     </SettingGroup>
   )
 }
 
+const SettingGroupCss = css`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 0;
+`
+
+const ResultList = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: calc(100% + 10px);
+  padding-right: 4px;
+  overflow-y: scroll;
+`
+
 export default NpxSearch
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index 20bda18e..55d32988 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -1,7 +1,7 @@
 import { ThemeMode } from '@renderer/types'
 import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'
-import styled from 'styled-components'
+import styled, { CSSProp } from 'styled-components'
 
 export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
   display: flex;
@@ -80,7 +80,7 @@ export const SettingHelpLink = styled(Link)`
   margin: 0 5px;
 `
 
-export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
+export const SettingGroup = styled.div<{ theme?: ThemeMode; css?: CSSProp }>`
   margin-bottom: 20px;
   border-radius: 8px;
   border: 0.5px solid var(--color-border);