refactor: streamline ListTopInfo component and enhance category handling in marketplace for improved clarity and performance

web/app/components/plugins/marketplace/constants.ts

@@ -15,7 +15,7 @@ export const SCROLL_BOTTOM_THRESHOLD = 100
 export const CATEGORY_ALL = 'all'
 
 export const PLUGIN_TYPE_SEARCH_MAP = {
-  all: CATEGORY_ALL,
+  [CATEGORY_ALL]: CATEGORY_ALL,
   model: PluginCategoryEnum.model,
   tool: PluginCategoryEnum.tool,
   agent: PluginCategoryEnum.agent,
@@ -38,7 +38,7 @@ export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
 )
 
 export const TEMPLATE_CATEGORY_MAP = {
-  all: CATEGORY_ALL,
+  [CATEGORY_ALL]: CATEGORY_ALL,
   marketing: 'marketing',
   sales: 'sales',
   support: 'support',

web/app/components/plugins/marketplace/list/list-top-info.tsx

@@ -4,20 +4,18 @@ import { useTranslation } from '#i18n'
 import {
   useActivePluginCategory,
   useActiveTemplateCategory,
+  useCreationType,
   useFilterPluginTags,
 } from '../atoms'
 import { usePluginCategoryText, useTemplateCategoryText } from '../category-switch/category-text'
 import {
   CATEGORY_ALL,
-  TEMPLATE_CATEGORY_MAP,
 } from '../constants'
+import { CREATION_TYPE } from '../search-params'
 import SortDropdown from '../sort-dropdown'
 
-type ListTopInfoProps = {
-  variant: 'plugins' | 'templates'
-}
-
-const ListTopInfo = ({ variant }: ListTopInfoProps) => {
+const ListTopInfo = () => {
+  const [creationType] = useCreationType()
   const { t } = useTranslation()
   const [filterPluginTags] = useFilterPluginTags()
   const [activePluginCategory] = useActivePluginCategory()
@@ -25,7 +23,9 @@ const ListTopInfo = ({ variant }: ListTopInfoProps) => {
   const getPluginCategoryText = usePluginCategoryText()
   const getTemplateCategoryText = useTemplateCategoryText()
 
-  const hasTags = variant === 'plugins' && filterPluginTags.length > 0
+  const isPluginsView = creationType === CREATION_TYPE.plugins
+
+  const hasTags = isPluginsView && filterPluginTags.length > 0
 
   if (hasTags) {
     return (
@@ -38,26 +38,20 @@ const ListTopInfo = ({ variant }: ListTopInfoProps) => {
     )
   }
 
-  const isPlugins = variant === 'plugins'
-  const isAllCategory = isPlugins
+  const isAllCategory = isPluginsView
     ? activePluginCategory === CATEGORY_ALL
-    : activeTemplateCategory === TEMPLATE_CATEGORY_MAP.all
+    : activeTemplateCategory === CATEGORY_ALL
 
-  const categoryText = isPlugins
+  const categoryText = isPluginsView
     ? getPluginCategoryText(activePluginCategory)
     : getTemplateCategoryText(activeTemplateCategory)
 
-  const title = isPlugins
-    ? isAllCategory
-      ? t('marketplace.listTopInfo.pluginsTitleAll', { ns: 'plugin' })
-      : t('marketplace.listTopInfo.pluginsTitleByCategory', { ns: 'plugin', category: categoryText })
-    : isAllCategory
-      ? t('marketplace.listTopInfo.templatesTitleAll', { ns: 'plugin' })
-      : t('marketplace.listTopInfo.templatesTitleByCategory', { ns: 'plugin', category: categoryText })
-
-  const subtitleKey = isPlugins
-    ? 'marketplace.listTopInfo.pluginsSubtitle'
-    : 'marketplace.listTopInfo.templatesSubtitle'
+  const title = t(
+    `marketplace.listTopInfo.${creationType}${isAllCategory ? 'TitleAll' : 'TitleByCategory'}`,
+    isAllCategory
+      ? { ns: 'plugin' }
+      : { ns: 'plugin', category: categoryText },
+  )
 
   return (
     <div className="mb-4 flex items-center justify-between pt-3">
@@ -66,7 +60,7 @@ const ListTopInfo = ({ variant }: ListTopInfoProps) => {
           {title}
         </p>
         <p className="system-xs-regular truncate text-text-tertiary">
-          {t(subtitleKey, { ns: 'plugin' })}
+          {t(`marketplace.listTopInfo.${creationType}Subtitle`, { ns: 'plugin' })}
         </p>
       </div>
       <SortDropdown />

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Loading from '@/app/components/base/loading'
+import { useMarketplaceSearchMode } from '../atoms'
 import { isPluginsData, useMarketplaceData } from '../state'
 import FlatList from './flat-list'
 import ListTopInfo from './list-top-info'
@@ -13,16 +14,14 @@ type ListWrapperProps = {
 const ListWrapper = ({ showInstallButton }: ListWrapperProps) => {
   const marketplaceData = useMarketplaceData()
   const { isLoading, page, isFetchingNextPage } = marketplaceData
+  const isSearchMode = useMarketplaceSearchMode()
 
   const renderContent = () => {
     if (isPluginsData(marketplaceData)) {
       const { pluginCollections, pluginCollectionPluginsMap, plugins } = marketplaceData
       return plugins !== undefined
         ? (
-            <>
-              <ListTopInfo variant="plugins" />
-              <FlatList variant="plugins" items={plugins} showInstallButton={showInstallButton} />
-            </>
+            <FlatList variant="plugins" items={plugins} showInstallButton={showInstallButton} />
           )
         : (
             <ListWithCollection
@@ -37,10 +36,7 @@ const ListWrapper = ({ showInstallButton }: ListWrapperProps) => {
     const { templateCollections, templateCollectionTemplatesMap, templates } = marketplaceData
     return templates !== undefined
       ? (
-          <>
-            <ListTopInfo variant="templates" />
-            <FlatList variant="templates" items={templates} />
-          </>
+          <FlatList variant="templates" items={templates} />
         )
       : (
           <ListWithCollection
@@ -56,12 +52,15 @@ const ListWrapper = ({ showInstallButton }: ListWrapperProps) => {
       style={{ scrollbarGutter: 'stable' }}
       className="relative flex grow flex-col bg-background-default-subtle px-12 py-2"
     >
-      {isLoading && page === 1 && (
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-          <Loading />
-        </div>
-      )}
-      {(!isLoading || page > 1) && renderContent()}
+      {isSearchMode && <ListTopInfo />}
+      <div className="relative grow">
+        {isLoading && page === 1 && (
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+            <Loading />
+          </div>
+        )}
+        {(!isLoading || page > 1) && renderContent()}
+      </div>
       {isFetchingNextPage && <Loading className="my-3" />}
     </div>
   )