fix: marketplace

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
     }

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')}

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) => (

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>
   )
 }

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'>

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 => (

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',

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}