wip

src/renderer/src/pages/settings/AgentSettings/PluginSettings.tsx

@@ -1,8 +1,8 @@
 import { useAvailablePlugins, useInstalledPlugins, usePluginActions } from '@renderer/hooks/usePlugins'
 import type { GetAgentResponse, GetAgentSessionResponse, UpdateAgentFunctionUnion } from '@renderer/types/agent'
-import { Card, Tabs } from 'antd'
+import { Card, Segmented } from 'antd'
 import type { FC } from 'react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -17,6 +17,7 @@ interface PluginSettingsProps {
 
 const PluginSettings: FC<PluginSettingsProps> = ({ agentBase }) => {
   const { t } = useTranslation()
+  const [activeTab, setActiveTab] = useState<string>('available')
 
   // Fetch available plugins
   const { agents, commands, skills, loading: loadingAvailable, error: errorAvailable } = useAvailablePlugins()
@@ -55,13 +56,23 @@ const PluginSettings: FC<PluginSettingsProps> = ({ agentBase }) => {
     [uninstall, t]
   )
 
-  const tabItems = useMemo(() => {
+  const segmentOptions = useMemo(() => {
     return [
       {
-        key: 'available',
+        value: 'available',
-        label: t('agent.settings.plugins.available.title'),
+        label: t('agent.settings.plugins.available.title')
-        children: (
+      },
-          <div className="flex h-full flex-col overflow-y-auto pt-1 pr-2">
+      {
+        value: 'installed',
+        label: t('agent.settings.plugins.installed.title')
+      }
+    ]
+  }, [t])
+
+  const renderContent = useMemo(() => {
+    if (activeTab === 'available') {
+      return (
+        <div className="flex h-full flex-col overflow-y-auto pt-4 pr-2">
           {errorAvailable ? (
             <Card variant="borderless">
               <p className="text-danger">
@@ -82,11 +93,9 @@ const PluginSettings: FC<PluginSettingsProps> = ({ agentBase }) => {
           )}
         </div>
       )
-      },
+    }
-      {
+
-        key: 'installed',
+    return (
-        label: t('agent.settings.plugins.installed.title'),
-        children: (
       <div className="flex h-full flex-col overflow-y-auto pt-4 pr-2">
         {errorInstalled ? (
           <Card className="bg-danger-50 dark:bg-danger-900/20">
@@ -103,9 +112,8 @@ const PluginSettings: FC<PluginSettingsProps> = ({ agentBase }) => {
         )}
       </div>
     )
-      }
-    ]
   }, [
+    activeTab,
     agentBase.id,
     agents,
     commands,
@@ -123,8 +131,13 @@ const PluginSettings: FC<PluginSettingsProps> = ({ agentBase }) => {
   ])
 
   return (
-    <SettingsContainer className="pr-0">
+    <SettingsContainer className="pt-0">
-      <Tabs centered items={tabItems} />
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-center">
+          <Segmented options={segmentOptions} value={activeTab} onChange={(value) => setActiveTab(value as string)} />
+        </div>
+        {renderContent}
+      </div>
     </SettingsContainer>
   )
 }

src/renderer/src/pages/settings/AgentSettings/components/PluginBrowser.tsx

@@ -243,7 +243,6 @@ export const PluginBrowser: FC<PluginBrowserProps> = ({
           value={searchQuery}
           onChange={(e) => handleSearchChange(e.target.value)}
           prefix={<Search className="h-4 w-4 text-default-400" />}
-          size="large"
           suffix={
             <AntButton
               variant={selectedCategories.length > 0 ? 'filled' : 'text'}
@@ -267,9 +266,7 @@ export const PluginBrowser: FC<PluginBrowserProps> = ({
           menu={{ items: pluginCategoryMenuItems }}
           trigger={['click']}
           open={filterDropdownOpen}
-          onOpenChange={(nextOpen) => {
+          onOpenChange={setFilterDropdownOpen}>
-            setFilterDropdownOpen(nextOpen)
-          }}>
           <AntButton
             variant={selectedCategories.length > 0 ? 'filled' : 'text'}
             color={selectedCategories.length > 0 ? 'primary' : 'default'}
@@ -296,7 +293,6 @@ export const PluginBrowser: FC<PluginBrowserProps> = ({
           items={pluginTypeTabItems}
           className="w-full"
           size="small"
-          centered
         />
       </div>
 

src/renderer/src/pages/settings/AgentSettings/components/PluginCard.tsx

@@ -27,7 +27,6 @@ export const PluginCard: FC<PluginCardProps> = ({ plugin, installed, onInstall,
     <Card
       className="flex h-full w-full cursor-pointer flex-col"
       onClick={onClick}
-      hoverable
       styles={{
         body: { display: 'flex', flexDirection: 'column', height: '100%', padding: '16px' }
       }}>