From 6b29860788c742e53c40b2e394ee130fcbba1c8f Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 9 Oct 2024 18:12:14 +0800
Subject: [PATCH] feat: add installed

---
 .../(commonLayout)/plugins/test/card/page.tsx | 35 ++++++++++++++-----
 web/app/components/plugins/card-mock.ts       |  4 +--
 web/app/components/plugins/card.tsx           | 11 ++++--
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index ac85164412..952660feea 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -3,15 +3,34 @@ import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/
 
 const PluginList = async () => {
   return (
-    <>
-      <div className='mx-3 grid grid-cols-4 gap-3'>
-        <Card payload={toolNotion as any} />
-        <Card payload={extensionDallE as any} />
-        <Card payload={modelGPT4 as any} />
-        <Card payload={toolNotion as any} />
-        <Card payload={toolNotion as any} />
+    <div className='pb-3 bg-white'>
+      <div className='mx-3 '>
+        <h2 className='my-3'>Dify Plugin list</h2>
+        <div className='grid grid-cols-4 gap-3'>
+          <Card payload={toolNotion as any} />
+          <Card payload={extensionDallE as any} />
+          <Card payload={modelGPT4 as any} />
+          <Card payload={toolNotion as any} />
+          <Card payload={toolNotion as any} />
+        </div>
+
+        <h2 className='my-3'>Install Plugin / Package under bundle</h2>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+          />
+        </div>
+        <h3 className='my-1'>Installed</h3>
+        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
+          <Card
+            payload={toolNotion as any}
+            descriptionLineRows={1}
+            installed
+          />
+        </div>
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/web/app/components/plugins/card-mock.ts b/web/app/components/plugins/card-mock.ts
index f054afb855..27f7fd5386 100644
--- a/web/app/components/plugins/card-mock.ts
+++ b/web/app/components/plugins/card-mock.ts
@@ -11,8 +11,8 @@ export const toolNotion = {
     'zh-Hans': 'Notion 页面搜索',
   },
   brief: {
-    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.',
-    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。',
+    'en-US': 'Description: Search Notion pages and open visited ones faster. No admin access required.More and more info...More and more info...More and more info...',
+    'zh-Hans': '搜索 Notion 页面并更快地打开已访问的页面。无需管理员访问权限。More and more info...More and more info...More and more info...',
   },
 }
 
diff --git a/web/app/components/plugins/card.tsx b/web/app/components/plugins/card.tsx
index 30885961ea..291b7b1a84 100644
--- a/web/app/components/plugins/card.tsx
+++ b/web/app/components/plugins/card.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { RiVerifiedBadgeLine } from '@remixicon/react'
+import { RiCheckLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import type { FC } from 'react'
 import { LeftCorner } from '../base/icons/src/vender/plugin'
 import type { Plugin } from './types'
@@ -31,6 +31,13 @@ export const Icon = ({
         backgroundImage: `url(${src})`,
       }}
     >
+      {installed
+        && <div className='p-0.5 absolute bottom-[-4px] right-[-4px] w-3 h-3 rounded-full bg-white '>
+          <div className='h-full rounded-full bg-state-success-solid'>
+            <RiCheckLine className='w-full h-full text-text-primary-on-surface' />
+          </div>
+        </div>
+      }
     </div>
   )
 }
@@ -108,7 +115,7 @@ const Card = ({
 
   const { type, name, org, label } = payload
   return (
-    <div className={cn('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')}>
+    <div className={cn('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)}>
       <CornerMark text={type} />
       {/* Header */}
       <div className="flex">