fix: marketplace submit button

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

@@ -8,7 +8,7 @@ const PluginList = async () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' />}
+      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' searchBoxAutoAnimate={false} />}
     />
   )
 }

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

@@ -143,3 +143,34 @@ export const useMarketplaceContainerScroll = (
     }
   }, [container, handleScroll])
 }
+
+export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => {
+  const [searchBoxCanAnimate, setSearchBoxCanAnimate] = useState(true)
+
+  const handleSearchBoxCanAnimateChange = useCallback(() => {
+    if (!searchBoxAutoAnimate) {
+      const clientWidth = document.documentElement.clientWidth
+
+      if (clientWidth < 1350)
+        setSearchBoxCanAnimate(false)
+      else
+        setSearchBoxCanAnimate(true)
+    }
+  }, [searchBoxAutoAnimate])
+
+  useEffect(() => {
+    handleSearchBoxCanAnimateChange()
+  }, [handleSearchBoxCanAnimateChange])
+
+  useEffect(() => {
+    window.addEventListener('resize', handleSearchBoxCanAnimateChange)
+
+    return () => {
+      window.removeEventListener('resize', handleSearchBoxCanAnimateChange)
+    }
+  }, [handleSearchBoxCanAnimateChange])
+
+  return {
+    searchBoxCanAnimate,
+  }
+}

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

@@ -10,6 +10,7 @@ import { TanstackQueryIniter } from '@/context/query-client'
 
 type MarketplaceProps = {
   locale: string
+  searchBoxAutoAnimate?: boolean
   showInstallButton?: boolean
   shouldExclude?: boolean
   searchParams?: SearchParams
@@ -19,6 +20,7 @@ type MarketplaceProps = {
 }
 const Marketplace = async ({
   locale,
+  searchBoxAutoAnimate = true,
   showInstallButton = true,
   shouldExclude,
   searchParams,
@@ -43,10 +45,14 @@ const Marketplace = async ({
       >
         <Description locale={locale} />
         <IntersectionLine intersectionContainerId={intersectionContainerId} />
-        <SearchBoxWrapper locale={locale} />
+        <SearchBoxWrapper
+          locale={locale}
+          searchBoxAutoAnimate={searchBoxAutoAnimate}
+        />
         <PluginTypeSwitch
           locale={locale}
           className={pluginTypeSwitchClassName}
+          searchBoxAutoAnimate={searchBoxAutoAnimate}
         />
         <ListWrapper
           locale={locale}

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

@@ -8,7 +8,10 @@ import {
 } from '@remixicon/react'
 import { PluginType } from '../types'
 import { useMarketplaceContext } from './context'
-import { useMixedTranslation } from './hooks'
+import {
+  useMixedTranslation,
+  useSearchBoxAutoAnimate,
+} from './hooks'
 import cn from '@/utils/classnames'
 
 export const PLUGIN_TYPE_SEARCH_MAP = {
@@ -22,14 +25,17 @@ export const PLUGIN_TYPE_SEARCH_MAP = {
 type PluginTypeSwitchProps = {
   locale?: string
   className?: string
+  searchBoxAutoAnimate?: boolean
 }
 const PluginTypeSwitch = ({
   locale,
   className,
+  searchBoxAutoAnimate,
 }: PluginTypeSwitchProps) => {
   const { t } = useMixedTranslation(locale)
   const activePluginType = useMarketplaceContext(s => s.activePluginType)
   const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange)
+  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
 
   const options = [
     {
@@ -66,7 +72,8 @@ const PluginTypeSwitch = ({
 
   return (
     <div className={cn(
-      'sticky top-[56px] shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2 z-10',
+      'shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2',
+      searchBoxCanAnimate && 'sticky top-[56px] z-10',
       className,
     )}>
       {

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

@@ -1,14 +1,20 @@
 'use client'
+
 import { useMarketplaceContext } from '../context'
-import { useMixedTranslation } from '../hooks'
+import {
+  useMixedTranslation,
+  useSearchBoxAutoAnimate,
+} from '../hooks'
 import SearchBox from './index'
 import cn from '@/utils/classnames'
 
 type SearchBoxWrapperProps = {
   locale?: string
+  searchBoxAutoAnimate?: boolean
 }
 const SearchBoxWrapper = ({
   locale,
+  searchBoxAutoAnimate,
 }: SearchBoxWrapperProps) => {
   const { t } = useMixedTranslation(locale)
   const intersected = useMarketplaceContext(v => v.intersected)
@@ -16,12 +22,14 @@ const SearchBoxWrapper = ({
   const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
   const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
   const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
+  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
 
   return (
     <SearchBox
       inputClassName={cn(
-        'sticky top-3 mx-auto w-[640px] shrink-0',
-        !intersected && 'w-[508px] transition-[width] duration-300',
+        'mx-auto w-[640px] shrink-0 z-[0]',
+        searchBoxCanAnimate && 'sticky top-3 z-[11]',
+        !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
       )}
       search={searchPluginText}
       onSearchChange={handleSearchPluginTextChange}

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

@@ -102,7 +102,7 @@ export const getMarketplaceListCondition = (pluginType: string) => {
     return 'category=tool'
 
   if (pluginType === PluginType.agent)
-    return 'category=agent_strategy'
+    return 'category=agent-strategy'
 
   if (pluginType === PluginType.model)
     return 'category=model'

web/app/components/plugins/plugin-page/index.tsx

@@ -2,7 +2,9 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
 import {
+  RiBookOpenLine,
   RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
@@ -158,6 +160,25 @@ const PluginPage = ({
             />
           </div>
           <div className='flex shrink-0 items-center gap-1'>
+            {
+              activeTab === 'discover' && (
+                <>
+                  <Link
+                    href='https://docs.dify.ai/plugins/publish-plugins/publish-to-dify-marketplace'
+                    target='_blank'
+                  >
+                    <Button
+                      className='px-3'
+                      variant='secondary-accent'
+                    >
+                      <RiBookOpenLine className='mr-1 w-4 h-4' />
+                      {t('plugin.submitPlugin')}
+                    </Button>
+                  </Link>
+                  <div className='mx-2 w-[1px] h-3.5 bg-divider-regular'></div>
+                </>
+              )
+            }
             <PluginTasks />
             {canManagement && (
               <InstallPluginDropdown

web/i18n/en-US/plugin.ts

@@ -198,6 +198,7 @@ const translation = {
     installedError: '{{errorLength}} plugins failed to install',
     clearAll: 'Clear all',
   },
+  submitPlugin: 'Submit plugin',
 }
 
 export default translation

web/i18n/zh-Hans/plugin.ts

@@ -198,6 +198,7 @@ const translation = {
     installedError: '{{errorLength}} 个插件安装失败',
     clearAll: '清除所有',
   },
+  submitPlugin: '上传插件',
 }
 
 export default translation