interaction of plugin detail panel

web/app/(commonLayout)/plugins/test/card/actions.ts

@@ -7,3 +7,8 @@ export async function handleDelete() {
   // revalidatePath only invalidates the cache when the included path is next visited.
   revalidatePath('/')
 }
+
+export async function fetchPluginDetail(id: string) {
+  // Fetch plugin detail TODO
+  return { id }
+}

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -5,6 +5,7 @@ import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/
 import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import ProviderCard from '@/app/components/plugins/provider-card'
+import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'
 const PluginList = async () => {
@@ -72,6 +73,9 @@ const PluginList = async () => {
           ))}
         </div>
       </div>
+      <PluginDetailPanel
+        locale={locale}
+      />
     </div>
   )
 }

web/app/components/plugins/card/card-mock.ts

@@ -1,6 +1,7 @@
 import { PluginType } from '../types'
 
 export const toolNotion = {
+  id: 'tool-notion',
   type: PluginType.tool,
   org: 'Notion',
   name: 'notion page search',
@@ -18,6 +19,7 @@ export const toolNotion = {
 }
 
 export const extensionDallE = {
+  id: 'extension-dalle',
   type: PluginType.extension,
   org: 'OpenAI',
   name: 'DALL-E',
@@ -36,6 +38,7 @@ export const extensionDallE = {
 }
 
 export const modelGPT4 = {
+  id: 'model-gpt4',
   type: PluginType.model,
   org: 'OpenAI',
   name: 'GPT-4',

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -0,0 +1,109 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { RiVerifiedBadgeLine } from '@remixicon/react'
+import Badge from '../../base/badge'
+import type { Plugin } from '../types'
+import Description from '../card/base/description'
+import Icon from '../card/base/card-icon'
+import Title from '../card/base/title'
+import DownloadCount from '../card/base/download-count'
+import type { Locale } from '@/i18n'
+import { fetchPluginDetail } from '@/app/(commonLayout)/plugins/test/card/actions'
+import Drawer from '@/app/components/base/drawer'
+import Loading from '@/app/components/base/loading'
+import cn from '@/utils/classnames'
+import {
+  // extensionDallE,
+  // modelGPT4,
+  toolNotion,
+} from '@/app/components/plugins/card/card-mock'
+
+type Props = {
+  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
+}
+
+const PluginDetailPanel: FC<Props> = ({
+  locale,
+}) => {
+  const searchParams = useSearchParams()
+  const pluginID = searchParams.get('pluginID')
+  const router = useRouter()
+  const pathname = usePathname()
+  const [loading, setLoading] = useState(true)
+  const [pluginDetail, setPluginDetail] = useState<Plugin>()
+
+  const getPluginDetail = async (pluginID: string) => {
+    setLoading(true)
+    const detail = await fetchPluginDetail(pluginID)
+    setPluginDetail({
+      ...detail,
+      ...toolNotion,
+    } as any)
+    setLoading(false)
+  }
+
+  const handleClose = () => {
+    setPluginDetail(undefined)
+    router.replace(pathname)
+  }
+
+  useEffect(() => {
+    if (pluginID)
+      getPluginDetail(pluginID)
+  }, [pluginID])
+
+  if (!pluginID)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!pluginDetail}
+      clickOutsideNotOpen={false}
+      onClose={handleClose}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('mt-[65px] !w-[405px] !max-w-[405px]')}
+    >
+      {loading && <Loading type='area' />}
+      {!loading && pluginDetail && (
+        <div
+          className={cn('w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl')}
+          style={{
+            height: 'calc(100vh - 65px)',
+          }}
+        >
+          <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs')}>
+            {/* Header */}
+            <div className="flex">
+              <Icon src={pluginDetail.icon} />
+              <div className="ml-3 w-0 grow">
+                <div className="flex items-center h-5">
+                  <Title title={pluginDetail.label[locale]} />
+                  <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+                </div>
+                <div className='mb-1 flex justify-between items-center h-4'>
+                  <div className='flex items-center'>
+                    <div className='text-text-tertiary system-xs-regular'>{pluginDetail.org}</div>
+                    <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+                    <DownloadCount downloadCount={pluginDetail.install_count || 0} />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Description className='mt-3' text={pluginDetail.brief[locale]} descriptionLineRows={2}></Description>
+            <div className='mt-3 flex space-x-0.5'>
+              {['LLM', 'text embedding', 'speech2text'].map(tag => (
+                <Badge key={tag} text={tag} />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </Drawer>
+  )
+}
+
+export default PluginDetailPanel

web/app/components/plugins/provider-card.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { FC } from 'react'
+import Link from 'next/link'
 import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import Badge from '../base/badge'
 import type { Plugin } from './types'
@@ -26,6 +27,7 @@ const ProviderCard: FC<Props> = ({
 
   return (
     <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+      <Link href={`/plugins/test/card?pluginID=${payload.id}`}>
         {/* Header */}
         <div className="flex">
           <Icon src={payload.icon} />
@@ -67,6 +69,7 @@ const ProviderCard: FC<Props> = ({
             <RiArrowRightUpLine className='w-4 h-4' />
           </Button>
         </div>
+      </Link>
     </div>
   )
 }

web/app/components/plugins/types.ts

@@ -8,6 +8,7 @@ export enum PluginType {
 }
 
 export type Plugin = {
+  id: string
   'type': PluginType
   'org': string
   'name': string