feat: marketplace sort

web/app/components/plugins/marketplace/index.tsx

@@ -6,7 +6,12 @@ import PluginTypeSwitch from './plugin-type-switch'
 import ListWrapper from './list/list-wrapper'
 import { getMarketplaceCollectionsAndPlugins } from './utils'
 
-const Marketplace = async () => {
+type MarketplaceProps = {
+  showInstallButton?: boolean
+}
+const Marketplace = async ({
+  showInstallButton = true,
+}: MarketplaceProps) => {
   const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins()
 
   return (
@@ -18,6 +23,7 @@ const Marketplace = async () => {
       <ListWrapper
         marketplaceCollections={marketplaceCollections}
         marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
       />
     </MarketplaceContextProvider>
   )

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

@@ -0,0 +1,50 @@
+'use client'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import Card from '@/app/components/plugins/card'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import type { Plugin } from '@/app/components/plugins/types'
+import Button from '@/app/components/base/button'
+
+type CardWrapperProps = {
+  plugin: Plugin
+  showInstallButton?: boolean
+}
+const CardWrapper = ({
+  plugin,
+  showInstallButton,
+}: CardWrapperProps) => {
+  return (
+    <div className='group relative rounded-xl cursor-pointer'>
+      <Card
+        key={plugin.name}
+        payload={plugin}
+        footer={
+          <CardMoreInfo
+            downloadCount={plugin.install_count}
+            tags={['Search', 'Productivity']}
+          />
+        }
+      />
+      {
+        showInstallButton && (
+          <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-[#f9fafb] to-[rgba(249,250,251,0)] rounded-b-xl'>
+            <Button
+              variant='primary'
+              className='flex-1'
+            >
+              Install
+            </Button>
+            <Button
+              className='flex-1'
+            >
+              Details
+              <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+            </Button>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default CardWrapper

web/app/components/plugins/marketplace/list/index.tsx

@@ -2,18 +2,19 @@
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
 import ListWithCollection from './list-with-collection'
-import Card from '@/app/components/plugins/card'
+import CardWrapper from './card-wrapper'
-import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 
 type ListProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   plugins?: Plugin[]
+  showInstallButton?: boolean
 }
 const List = ({
   marketplaceCollections,
   marketplaceCollectionPluginsMap,
   plugins,
+  showInstallButton,
 }: ListProps) => {
   return (
     <>
@@ -22,6 +23,7 @@ const List = ({
           <ListWithCollection
             marketplaceCollections={marketplaceCollections}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+            showInstallButton={showInstallButton}
           />
         )
       }
@@ -30,15 +32,10 @@ const List = ({
           <div className='grid grid-cols-4 gap-3'>
             {
               plugins.map(plugin => (
-                <Card
+                <CardWrapper
                   key={plugin.name}
-                  payload={plugin}
+                  plugin={plugin}
-                  footer={
+                  showInstallButton={showInstallButton}
-                    <CardMoreInfo
-                      downloadCount={plugin.install_count}
-                      tags={['Search', 'Productivity']}
-                    />
-                  }
                 />
               ))
             }

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -1,16 +1,17 @@
 'use client'
 import type { MarketplaceCollection } from '../types'
+import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
-import Card from '@/app/components/plugins/card'
-import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 
 type ListWithCollectionProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  showInstallButton?: boolean
 }
 const ListWithCollection = ({
   marketplaceCollections,
   marketplaceCollectionPluginsMap,
+  showInstallButton,
 }: ListWithCollectionProps) => {
   return (
     <>
@@ -25,15 +26,10 @@ const ListWithCollection = ({
             <div className='grid grid-cols-4 gap-3 mt-2'>
               {
                 marketplaceCollectionPluginsMap[collection.name].map(plugin => (
-                  <Card
+                  <CardWrapper
                     key={plugin.name}
-                    payload={plugin}
+                    plugin={plugin}
-                    footer={
+                    showInstallButton={showInstallButton}
-                      <CardMoreInfo
-                        downloadCount={plugin.install_count}
-                        tags={['Search', 'Productivity']}
-                      />
-                    }
                   />
                 ))
               }

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

@@ -8,10 +8,12 @@ import SortDropdown from '../sort-dropdown'
 type ListWrapperProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  showInstallButton?: boolean
 }
 const ListWrapper = ({
   marketplaceCollections,
   marketplaceCollectionPluginsMap,
+  showInstallButton,
 }: ListWrapperProps) => {
   const plugins = useMarketplaceContext(s => s.plugins)
 
@@ -26,6 +28,7 @@ const ListWrapper = ({
         marketplaceCollections={marketplaceCollections}
         marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
         plugins={plugins}
+        showInstallButton={showInstallButton}
       />
     </div>
   )

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

@@ -15,7 +15,12 @@ export const getMarketplaceCollectionsAndPlugins = async () => {
     await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
       const marketplaceCollectionPluginsData = await globalThis.fetch(`${MARKETPLACE_API_PREFIX}/collections/${collection.name}/plugins`)
       const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
-      const plugins = marketplaceCollectionPluginsDataJson.data.plugins
+      const plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
+        return {
+          ...plugin,
+          icon: `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`,
+        }
+      })
 
       marketplaceCollectionPluginsMap[collection.name] = plugins
     }))
@@ -54,7 +59,12 @@ export const getMarketplacePlugins = async (query: PluginsSearchParams) => {
       },
     )
     const marketplacePluginsDataJson = await marketplacePluginsData.json()
-    marketplacePlugins = marketplacePluginsDataJson.data.plugins
+    marketplacePlugins = marketplacePluginsDataJson.data.plugins.map((plugin: Plugin) => {
+      return {
+        ...plugin,
+        icon: `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`,
+      }
+    })
   }
   // eslint-disable-next-line unused-imports/no-unused-vars
   catch (e) {

web/app/components/tools/marketplace/index.tsx

@@ -55,6 +55,7 @@ const Marketplace = ({
           <List
             marketplaceCollections={marketplaceCollections}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+            showInstallButton
           />
         )
       }