feat: plugin button

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

@@ -2,13 +2,11 @@
 
 import type { Dependency, PluginDeclaration, PluginManifestInMarket } from '../types'
 import {
-  RiBookOpenLine,
   RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
-import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -17,12 +15,10 @@ import Tooltip from '@/app/components/base/tooltip'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal'
 import { MARKETPLACE_API_PREFIX, SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import { useDocLink } from '@/context/i18n'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { usePluginInstallation } from '@/hooks/use-query-params'
 import { fetchBundleInfoFromMarketPlace, fetchManifestFromMarketPlace } from '@/service/plugins'
 import { sleep } from '@/utils'
-import { cn } from '@/utils/classnames'
 import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
@@ -35,6 +31,7 @@ import {
 import DebugInfo from './debug-info'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import PluginTasks from './plugin-tasks'
+import SubmitRequestDropdown from './submit-request-dropdown'
 import useReferenceSetting from './use-reference-setting'
 import { useUploader } from './use-uploader'
 
@@ -47,7 +44,6 @@ const PluginPage = ({
   marketplace,
 }: PluginPageProps) => {
   const { t } = useTranslation()
-  const docLink = useDocLink()
   useDocumentTitle(t('metadata.title', { ns: 'plugin' }))
 
   // Use nuqs hook for installation state
@@ -154,36 +150,7 @@ const PluginPage = ({
             {!isPluginsTab && <SearchBoxWrapper wrapperClassName="w-[360px] mx-0" inputClassName="p-0" />}
           </div>
           <div className="flex shrink-0 items-center gap-1">
-            {
-              isExploringMarketplace && (
-                <>
-                  <Link
-                    href="https://github.com/langgenius/dify-plugins/issues/new?template=plugin_request.yaml"
-                    target="_blank"
-                  >
-                    <Button
-                      variant="ghost"
-                      className="text-text-tertiary"
-                    >
-                      {t('requestAPlugin', { ns: 'plugin' })}
-                    </Button>
-                  </Link>
-                  <Link
-                    href={docLink('/develop-plugin/publishing/marketplace-listing/release-to-dify-marketplace')}
-                    target="_blank"
-                  >
-                    <Button
-                      className="px-3"
-                      variant="secondary-accent"
-                    >
-                      <RiBookOpenLine className="mr-1 h-4 w-4" />
-                      {t('publishPlugins', { ns: 'plugin' })}
-                    </Button>
-                  </Link>
-                  <div className="mx-1 h-3.5 w-[1px] shrink-0 bg-divider-regular"></div>
-                </>
-              )
-            }
+            {isExploringMarketplace && <SubmitRequestDropdown />}
             <PluginTasks />
             {canManagement && (
               <InstallPluginDropdown

web/app/components/plugins/plugin-page/submit-request-dropdown.tsx

@@ -0,0 +1,80 @@
+'use client'
+import { RiBookOpenLine, RiGithubLine } from '@remixicon/react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useDocLink } from '@/context/i18n'
+import { cn } from '@/utils/classnames'
+
+type DropdownItemProps = {
+  href: string
+  icon: React.ReactNode
+  text: string
+  onClick: () => void
+}
+
+const DropdownItem = ({ href, icon, text, onClick }: DropdownItemProps) => (
+  <Link
+    href={href}
+    target="_blank"
+    className="flex items-center gap-2 rounded-lg px-3 py-2 text-text-secondary hover:bg-state-base-hover hover:text-text-primary"
+    onClick={onClick}
+  >
+    {icon}
+    <span className="system-sm-medium">{text}</span>
+  </Link>
+)
+
+const SubmitRequestDropdown = () => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const docLink = useDocLink()
+
+  return (
+    <PortalToFollowElem
+      placement="bottom-start"
+      offset={4}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'flex items-center gap-1 px-3 py-2 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+            open && 'bg-state-base-hover text-text-secondary',
+          )}
+        >
+          <span className="system-sm-medium">
+            {t('requestSubmitPlugin', { ns: 'plugin' })}
+          </span>
+          {/* <RiArrowDownSLine className={cn("h-4 w-4 transition-transform", open && "rotate-180")} /> */}
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className="z-[1000]">
+        <div className="min-w-[200px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-sm">
+          <DropdownItem
+            href="https://github.com/langgenius/dify-plugins/issues/new?template=plugin_request.yaml"
+            icon={<RiGithubLine className="h-4 w-4 shrink-0" />}
+            text={t('requestAPlugin', { ns: 'plugin' })}
+            onClick={() => setOpen(false)}
+          />
+          <DropdownItem
+            href={docLink('/develop-plugin/publishing/marketplace-listing/release-to-dify-marketplace')}
+            icon={<RiBookOpenLine className="h-4 w-4 shrink-0" />}
+            text={t('publishPlugins', { ns: 'plugin' })}
+            onClick={() => setOpen(false)}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default SubmitRequestDropdown

web/i18n/en-US/plugin.json

@@ -240,6 +240,7 @@
   "readmeInfo.noReadmeAvailable": "No README available",
   "readmeInfo.title": "README",
   "requestAPlugin": "Request a plugin",
+  "requestSubmitPlugin": "Request / Submit",
   "search": "Search",
   "searchCategories": "Search Categories",
   "searchInMarketplace": "Search in Marketplace",

web/i18n/zh-Hans/plugin.json

@@ -240,6 +240,7 @@
   "readmeInfo.noReadmeAvailable": "README 文档不可用",
   "readmeInfo.title": "README",
   "requestAPlugin": "申请插件",
+  "requestSubmitPlugin": "申请并发布插件",
   "search": "搜索",
   "searchCategories": "搜索类别",
   "searchInMarketplace": "在 Marketplace 中搜索",