feat: enhance MCPSettings with server table and clean up NpxSearch component

- Added a debug log for MCP servers in MCPSettings.
- Refactored the MCPSettings component to streamline the server table rendering.
- Removed unnecessary styles from the NpxSearch component for cleaner layout.

src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx

@@ -67,7 +67,7 @@ const NpxSearch: FC = () => {
   }
 
   return (
-    <SettingGroup theme={theme} style={{ marginTop: 15 }}>
+    <SettingGroup theme={theme}>
       <SettingTitle>{t('settings.mcp.npx_list.title')}</SettingTitle>
       <SettingDivider />
       <Paragraph type="secondary" style={{ margin: '0 0 10px 0' }}>

src/renderer/src/pages/settings/MCPSettings/index.tsx

@@ -19,6 +19,8 @@ const MCPSettings: FC = () => {
   const { Paragraph, Text } = Typography
   const mcpServers = useAppSelector((state) => state.mcp.servers)
 
+  console.debug(mcpServers)
+
   const handleDelete = (serverName: string) => {
     window.modal.confirm({
       title: t('settings.mcp.confirmDelete'),
@@ -145,7 +147,6 @@ const MCPSettings: FC = () => {
             {t('settings.mcp.editJson')}
           </Button>
         </HStack>
-      </SettingGroup>
         <Table
           dataSource={mcpServers}
           columns={columns}
@@ -154,15 +155,10 @@ const MCPSettings: FC = () => {
           size="small"
           locale={{ emptyText: t('settings.mcp.noServers') }}
           rowClassName={(record) => (!record.isActive ? 'inactive-row' : '')}
-        onRow={(record) => ({
+          onRow={(record) => ({ style: !record.isActive ? inactiveRowStyle : {} })}
-          style: !record.isActive ? inactiveRowStyle : {}
+          style={{ marginTop: 15 }}
-        })}
-        style={{
-          borderRadius: '8px',
-          overflow: 'hidden',
-          border: '0.5px solid var(--color-border)'
-        }}
         />
+      </SettingGroup>
       <NpxSearch />
     </SettingContainer>
   )