detail drawer

web/app/components/tools/mcp/index.tsx

@@ -2,6 +2,7 @@
 import { useMemo, useState } from 'react'
 import NewMCPCard from './create-card'
 import MCPCard from './provider-card'
+import MCPDetailPanel from './provider-detail'
 import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
 import type { MCPProvider } from '@/app/components/tools/types'
 import cn from '@/utils/classnames'
@@ -10,22 +11,6 @@ type Props = {
   searchText: string
 }
 
-const MCPList = ({
-  searchText,
-}: Props) => {
-  const { data: list = [] } = useAllMCPTools()
-  const invalidateMCPList = useInvalidateAllMCPTools()
-
-  const filteredList = useMemo(() => {
-    return list.filter((collection) => {
-      if (searchText)
-        return Object.values(collection.name).some(value => (value as string).toLowerCase().includes(searchText.toLowerCase()))
-      return true
-    })
-  }, [list, searchText])
-
-  const [currentProvider, setCurrentProvider] = useState<MCPProvider>()
-
 function renderDefaultCard() {
   const defaultCards = Array.from({ length: 36 }, (_, index) => (
     <div
@@ -44,6 +29,22 @@ const MCPList = ({
   return defaultCards
 }
 
+const MCPList = ({
+  searchText,
+}: Props) => {
+  const { data: list = [] } = useAllMCPTools()
+  const invalidateMCPList = useInvalidateAllMCPTools()
+
+  const filteredList = useMemo(() => {
+    return list.filter((collection) => {
+      if (searchText)
+        return Object.values(collection.name).some(value => (value as string).toLowerCase().includes(searchText.toLowerCase()))
+      return true
+    })
+  }, [list, searchText])
+
+  const [currentProvider, setCurrentProvider] = useState<MCPProvider>()
+
   return (
     <>
       <div
@@ -63,6 +64,13 @@ const MCPList = ({
         ))}
         {!list.length && renderDefaultCard()}
       </div>
+      {currentProvider && (
+        <MCPDetailPanel
+          detail={currentProvider}
+          onHide={() => setCurrentProvider(undefined)}
+          onUpdate={() => invalidateMCPList()}
+        />
+      )}
     </>
   )
 }

web/app/components/tools/mcp/provider-detail.tsx

@@ -0,0 +1,50 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import Drawer from '@/app/components/base/drawer'
+import type { MCPProvider } from '@/app/components/tools/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: MCPProvider
+  onUpdate: () => void
+  onHide: () => void
+}
+
+const MCPDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+}) => {
+  const handleUpdate = (isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      {detail && (
+        <>
+          <div>HEADER</div>
+          <div className='grow overflow-y-auto'>
+            TOOL list
+          </div>
+        </>
+      )}
+    </Drawer>
+  )
+}
+
+export default MCPDetailPanel