From 021bc57cd4f6d6076af1569ddcd711d8138ded69 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 21 Nov 2024 12:43:18 +0800
Subject: [PATCH] empty of tool list

---
 .../plugins/marketplace/empty/index.tsx       | 19 +++--
 web/app/components/tools/provider-list.tsx    | 70 +++++++++----------
 web/i18n/en-US/tools.ts                       |  1 +
 web/i18n/zh-Hans/tools.ts                     |  1 +
 4 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 25f8efc504..32b706a291 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -4,12 +4,22 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 import Line from './line'
 import cn from '@/utils/classnames'
 
-const Empty = () => {
+type Props = {
+  text?: string
+  lightCard?: boolean
+  className?: string
+}
+
+const Empty = ({
+  text,
+  lightCard,
+  className,
+}: Props) => {
   const { t } = useTranslation()
 
   return (
     <div
-      className='grow relative h-0 flex flex-wrap p-2 overflow-hidden'
+      className={cn('grow relative h-0 flex flex-wrap p-2 overflow-hidden', className)}
     >
       {
         Array.from({ length: 16 }).map((_, index) => (
@@ -19,6 +29,7 @@ const Empty = () => {
               'mr-3 mb-3  h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
               index % 4 === 3 && 'mr-0',
               index > 11 && 'mb-0',
+              lightCard && 'bg-background-default-lighter',
             )}
           >
           </div>
@@ -28,7 +39,7 @@ const Empty = () => {
         className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
       ></div>
       <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] flex flex-col items-center'>
-        <div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-divider-subtle bg-components-card-bg shadow-lg'>
+        <div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
           <Group className='w-5 h-5' />
           <Line className='absolute -right-[1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute -left-[1px] top-1/2 -translate-y-1/2' />
@@ -36,7 +47,7 @@ const Empty = () => {
           <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
         </div>
         <div className='text-center system-md-regular text-text-tertiary'>
-          {t('plugin.marketplace.noPluginFound')}
+          {text || t('plugin.marketplace.noPluginFound')}
         </div>
       </div>
     </div>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 4ebd70dc56..2c0d52b0ba 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Collection } from './types'
 import Marketplace from './marketplace'
@@ -9,7 +9,7 @@ import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
 import Input from '@/app/components/base/input'
 import ProviderDetail from '@/app/components/tools/provider/detail'
-import Empty from '@/app/components/tools/add-tool-modal/empty'
+import Empty from '@/app/components/plugins/marketplace/empty'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
@@ -50,12 +50,6 @@ const ProviderList = () => {
   }, [activeTab, tagFilterValue, keywords, collectionList])
 
   const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
-  useEffect(() => {
-    if (currentProvider && collectionList.length > 0) {
-      const newCurrentProvider = collectionList.find(collection => collection.id === currentProvider.id)
-      setCurrentProvider(newCurrentProvider)
-    }
-  }, [collectionList, currentProvider])
 
   return (
     <div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
@@ -88,34 +82,38 @@ const ProviderList = () => {
             />
           </div>
         </div>
-        <div className={cn(
-          'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
-        )}>
-          {filteredCollectionList.map(collection => (
-            <div
-              key={collection.id}
-              onClick={() => setCurrentProvider(collection)}
-            >
-              <Card
-                className={cn(
-                  'border-[1.5px] border-transparent cursor-pointer',
-                  currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
-                )}
-                hideCornerMark
-                payload={{
-                  ...collection,
-                  brief: collection.description,
-                } as any}
-                footer={
-                  <CardMoreInfo
-                    tags={collection.labels}
-                  />
-                }
-              />
-            </div>
-          ))}
-          {!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty /></div>}
-        </div>
+        {filteredCollectionList.length > 0 && (
+          <div className={cn(
+            'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
+          )}>
+            {filteredCollectionList.map(collection => (
+              <div
+                key={collection.id}
+                onClick={() => setCurrentProvider(collection)}
+              >
+                <Card
+                  className={cn(
+                    'border-[1.5px] border-transparent cursor-pointer',
+                    currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
+                  )}
+                  hideCornerMark
+                  payload={{
+                    ...collection,
+                    brief: collection.description,
+                  } as any}
+                  footer={
+                    <CardMoreInfo
+                      tags={collection.labels}
+                    />
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {!filteredCollectionList.length && (
+          <Empty lightCard text={t('tools.noTools')} className='px-12' />
+        )}
         {
           enable_marketplace && (
             <Marketplace
diff --git a/web/i18n/en-US/tools.ts b/web/i18n/en-US/tools.ts
index 37250473d6..6bc11fdd2c 100644
--- a/web/i18n/en-US/tools.ts
+++ b/web/i18n/en-US/tools.ts
@@ -154,6 +154,7 @@ const translation = {
     placeholder: 'Select a tool...',
     auth: 'AUTHORIZATION',
   },
+  noTools: 'No tools found',
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/tools.ts b/web/i18n/zh-Hans/tools.ts
index f3ec76aa97..1da5430c37 100644
--- a/web/i18n/zh-Hans/tools.ts
+++ b/web/i18n/zh-Hans/tools.ts
@@ -153,6 +153,7 @@ const translation = {
     label: '工具',
     placeholder: '选择一个工具...',
   },
+  noTools: '没有工具',
 }
 
 export default translation