marketplace

web/app/(commonLayout)/plugins/Container.tsx

@@ -6,7 +6,6 @@ import {
   RiArrowRightUpLine,
   RiBugLine,
   RiClipboardLine,
-  RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
 import InstallPluginDropdown from './InstallPluginDropdown'
@@ -16,12 +15,18 @@ import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import Marketplace from '@/app/components/plugins/marketplace'
 import cn from '@/utils/classnames'
 
-const Container = () => {
+type ContainerWrapperProps = {
+  plugins: React.ReactNode
+  marketplace: React.ReactNode
+}
+const ContainerWrapper = ({
+  plugins,
+  marketplace,
+}: ContainerWrapperProps) => {
   const { t } = useTranslation()
-  const { setShowPluginSettingModal } = useModalContext()
+  const { setShowPluginSettingModal } = useModalContext() as any
 
   const options = useMemo(() => {
     return [
@@ -104,31 +109,13 @@ const Container = () => {
         </div>
       </div>
       {
-        activeTab === 'plugins' && (
-          <>
-            <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
-              <div className='h-px self-stretch bg-divider-subtle'></div>
-              <div className='flex items-center gap-2 self-stretch'>
-                {/* Filter goes here */}
-              </div>
-            </div>
-            <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
-              {/* Plugin cards go here */}
-            </div>
-            <div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
-              <RiDragDropLine className='w-4 h-4' />
-              <span className='system-xs-regular'>Drop plugin package here to install</span>
-            </div>
-          </>
-        )
+        activeTab === 'plugins' && plugins
       }
       {
-        activeTab === 'discover' && (
-          <Marketplace />
-        )
+        activeTab === 'discover' && marketplace
       }
     </div>
   )
 }
 
-export default Container
+export default ContainerWrapper

web/app/(commonLayout)/plugins/page.tsx

@@ -1,10 +1,13 @@
-import Container from './Container'
+import PluginsPanel from './plugins-panel'
+import Container from './container'
+import Marketplace from '@/app/components/plugins/marketplace'
 
 const PluginList = async () => {
   return (
-    <>
-      <Container />
-    </>
+    <Container
+      plugins={<PluginsPanel />}
+      marketplace={<Marketplace />}
+    />
   )
 }
 

web/app/(commonLayout)/plugins/plugins-panel.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { RiDragDropLine } from '@remixicon/react'
+
+const PluginsPanel = () => {
+  return (
+    <>
+      <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
+        <div className='h-px self-stretch bg-divider-subtle'></div>
+        <div className='flex items-center gap-2 self-stretch'>
+          {/* Filter goes here */}
+        </div>
+      </div>
+      <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
+        {/* Plugin cards go here */}
+      </div>
+      <div className='flex items-center justify-center py-4 gap-2 text-text-quaternary'>
+        <RiDragDropLine className='w-4 h-4' />
+        <span className='system-xs-regular'>Drop plugin package here to install</span>
+      </div>
+    </>
+  )
+}
+
+export default PluginsPanel

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

@@ -1,12 +1,41 @@
-import MarketplaceWrapper from './marketplace-wrapper'
-import Marketplace from './marketplace'
+import SearchBox from './search-box'
+import PluginTypeSwitch from './plugin-type-switch'
+import List from './list'
 
-const MarketplacePage = () => {
+const Marketplace = () => {
   return (
-    <MarketplaceWrapper>
-      <Marketplace />
-    </MarketplaceWrapper>
+    <div className='w-full'>
+      <div className='py-10'>
+        <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
+          Empower your AI development
+        </h1>
+        <h2 className='flex justify-center items-center mb-4 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">
+            models
+          </span>
+          ,
+          <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">
+            tools
+          </span>
+          ,
+          <span className="relative ml-1 mr-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">
+            extensions
+          </span>
+          and
+          <span className="relative ml-1 mr-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">
+            bundles
+          </span>
+          in Dify Marketplace
+        </h2>
+        <div className='flex items-center justify-center mb-4'>
+          <SearchBox />
+        </div>
+        <PluginTypeSwitch />
+      </div>
+      <List />
+    </div>
   )
 }
 
-export default MarketplacePage
+export default Marketplace

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

@@ -1,8 +1,11 @@
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { toolNotion } from '@/app/components/plugins/card/card-mock'
+import { getLocaleOnServer } from '@/i18n/server'
 
 const List = () => {
+  const locale = getLocaleOnServer()
+
   return (
     <div className='px-12 py-2 bg-background-default-subtle'>
       <div className='py-3'>
@@ -10,30 +13,35 @@ const List = () => {
         <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
         <div className='grid grid-cols-4 gap-3 mt-2'>
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@@ -46,36 +54,42 @@ const List = () => {
         <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
         <div className='grid grid-cols-4 gap-3 mt-2'>
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
             }
           />
           <Card
+            locale={locale}
             payload={toolNotion as any}
             footer={
               <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />

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

@@ -1,12 +0,0 @@
-'use client'
-
-type WrapperProps = {
-  children: React.ReactNode
-}
-const MarketplaceWrapper = ({
-  children,
-}: WrapperProps) => {
-  return children
-}
-
-export default MarketplaceWrapper

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

@@ -1,41 +0,0 @@
-import SearchBox from './search-box'
-import PluginTypeSwitch from './plugin-type-switch'
-import List from './list'
-
-const Marketplace = () => {
-  return (
-    <div className='w-full'>
-      <div className='py-10'>
-        <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
-          Empower your AI development
-        </h1>
-        <h2 className='flex justify-center items-center mb-4 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">
-            models
-          </span>
-          ,
-          <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">
-            tools
-          </span>
-          ,
-          <span className="relative ml-1 mr-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">
-            extensions
-          </span>
-          and
-          <span className="relative ml-1 mr-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">
-            bundles
-          </span>
-          in Dify Marketplace
-        </h2>
-        <div className='flex items-center justify-center mb-4'>
-          <SearchBox onChange={() => {}} />
-        </div>
-        <PluginTypeSwitch onChange={() => {}} />
-      </div>
-      <List />
-    </div>
-  )
-}
-
-export default Marketplace

web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -8,7 +8,7 @@ import {
 import cn from '@/utils/classnames'
 
 type PluginTypeSwitchProps = {
-  onChange: (type: string) => void
+  onChange?: (type: string) => void
 }
 const options = [
   {
@@ -54,7 +54,7 @@ const PluginTypeSwitch = ({
             )}
             onClick={() => {
               setActiveType(option.value)
-              onChange(option.value)
+              onChange?.(option.value)
             }}
           >
             {option.icon}

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -9,7 +9,7 @@ import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
 
 type SearchBoxProps = {
-  onChange: (searchText: string, tags: string[]) => void
+  onChange?: (searchText: string, tags: string[]) => void
 }
 const SearchBox = ({
   onChange,
@@ -19,7 +19,7 @@ const SearchBox = ({
 
   const handleTagsChange = useCallback((tags: string[]) => {
     setSelectedTags(tags)
-    onChange(searchText, tags)
+    onChange?.(searchText, tags)
   }, [searchText, onChange])
 
   return (
@@ -36,7 +36,7 @@ const SearchBox = ({
             value={searchText}
             onChange={(e) => {
               setSearchText(e.target.value)
-              onChange(e.target.value, selectedTags)
+              onChange?.(e.target.value, selectedTags)
             }}
           />
           {