From b83dc5ab99f95138743179d8b7878f33f2a77cde Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 7 Nov 2024 15:37:22 +0800
Subject: [PATCH] fix: marketplace

---
 .../plugins/marketplace/context.tsx           | 24 +++++++--
 .../plugins/marketplace/description/index.tsx |  4 +-
 .../plugins/marketplace/empty/index.tsx       |  2 +-
 .../components/plugins/marketplace/index.tsx  | 54 -------------------
 .../plugins/marketplace/list/list-wrapper.tsx |  2 +-
 .../marketplace/plugin-type-switch.tsx        |  2 +-
 .../plugins/marketplace/search-box/index.tsx  |  2 +-
 .../search-box/search-box-wrapper.tsx         |  2 +-
 8 files changed, 28 insertions(+), 64 deletions(-)

diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
index 692b3eb5a5..0c87e32919 100644
--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/web/app/components/plugins/marketplace/context.tsx
@@ -100,6 +100,15 @@ export const MarketplaceContextProvider = ({
     setSearchPluginText(text)
     searchPluginTextRef.current = text
 
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      queryMarketplaceCollectionsAndPlugins({
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      })
+      setPlugins(undefined)
+
+      return
+    }
+
     queryPluginsWithDebounced({
       query: text,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
@@ -107,12 +116,21 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [queryPluginsWithDebounced])
+  }, [queryPluginsWithDebounced, queryMarketplaceCollectionsAndPlugins, setPlugins])
 
   const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
     setFilterPluginTags(tags)
     filterPluginTagsRef.current = tags
 
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      queryMarketplaceCollectionsAndPlugins({
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      })
+      setPlugins(undefined)
+
+      return
+    }
+
     queryPlugins({
       query: searchPluginTextRef.current,
       category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
@@ -120,7 +138,7 @@ export const MarketplaceContextProvider = ({
       sortBy: sortRef.current.sortBy,
       sortOrder: sortRef.current.sortOrder,
     })
-  }, [queryPlugins])
+  }, [queryPlugins, setPlugins, queryMarketplaceCollectionsAndPlugins])
 
   const handleActivePluginTypeChange = useCallback((type: string) => {
     setActivePluginType(type)
@@ -130,7 +148,7 @@ export const MarketplaceContextProvider = ({
       queryMarketplaceCollectionsAndPlugins({
         category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
       })
-      setPlugins([])
+      setPlugins(undefined)
 
       return
     }
diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index 403478dfc7..3b0454c3c6 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -14,10 +14,10 @@ const Description = async ({
 
   return (
     <>
-      <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
+      <h1 className='shrink-0 mb-2 text-center title-4xl-semi-bold text-text-primary'>
         Empower your AI development
       </h1>
-      <h2 className='flex justify-center items-center text-center body-md-regular text-text-tertiary'>
+      <h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
         Discover
         <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
           {t('category.models')}
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index a6e71c9eee..cc3957d3ff 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -4,7 +4,7 @@ import Line from './line'
 const Empty = () => {
   return (
     <div
-      className='relative grid grid-cols-4 grid-rows-4 gap-3 p-2'
+      className='grow relative h-0 grid grid-cols-4 grid-rows-4 gap-3 p-2 overflow-hidden'
     >
       {
         Array.from({ length: 16 }).map((_, index) => (
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 2cd77dc038..742df86ea0 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -28,60 +28,6 @@ const Marketplace = async ({
         marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
         showInstallButton={showInstallButton}
       />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
-      <ListWrapper
-        locale={locale}
-        marketplaceCollections={marketplaceCollections}
-        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-        showInstallButton={showInstallButton}
-      />
     </MarketplaceContextProvider>
   )
 }
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 443b9ef516..50f4c5d244 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -22,7 +22,7 @@ const ListWrapper = ({
   const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
 
   return (
-    <div className='px-12 py-2 bg-background-default-subtle'>
+    <div className='flex flex-col grow px-12 py-2 bg-background-default-subtle'>
       {
         plugins && (
           <div className='flex items-center mb-4 pt-3'>
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index c1469cf6bf..6a44524a0c 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -57,7 +57,7 @@ const PluginTypeSwitch = ({
 
   return (
     <div className={cn(
-      'sticky top-[60px] flex items-center justify-center py-3 bg-background-body space-x-2 z-10',
+      'sticky top-[60px] shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2 z-10',
     )}>
       {
         options.map(option => (
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index d37f96f58c..513f8b98ad 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -41,7 +41,7 @@ const SearchBox = ({
       />
       <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
       <div className='grow flex items-center p-1 pl-2'>
-        <div className='flex items-center mr-2 py-0.5 w-full'>
+        <div className='flex items-center mr-2 w-full'>
           <input
             className={cn(
               'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
index dfdc699958..a8e5e1c980 100644
--- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
@@ -20,7 +20,7 @@ const SearchBoxWrapper = ({
   return (
     <SearchBox
       inputClassName={cn(
-        'sticky top-3 mx-auto w-[640px]',
+        'sticky top-3 mx-auto w-[640px] shrink-0',
         !intersected && 'w-[508px] transition-[width] duration-300',
       )}
       search={searchPluginText}