feat: enhance marketplace components with new template card features, improved navigation options, and updated translations for better user experience

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

@@ -2,7 +2,7 @@
 
 import type { MotionValue } from 'motion/react'
 import { useTranslation } from '#i18n'
-import { motion, useMotionValue, useTransform } from 'motion/react'
+import { motion, useMotionValue, useSpring, useTransform } from 'motion/react'
 import { useEffect, useLayoutEffect, useRef } from 'react'
 import marketPlaceBg from '@/public/marketplace/hero-bg.jpg'
 import marketplaceGradientNoise from '@/public/marketplace/hero-gradient-noise.svg'
@@ -36,10 +36,10 @@ export const Description = ({
   const heroSubtitleKey = isTemplatesView ? 'marketplace.templatesHeroSubtitle' : 'marketplace.pluginsHeroSubtitle'
   const rafRef = useRef<number | null>(null)
   const lastProgressRef = useRef(0)
-  const maxScrollableRef = useRef(1)
   const titleRef = useRef<HTMLDivElement | null>(null)
   const progress = useMotionValue(0)
   const titleHeight = useMotionValue(0)
+  const smoothProgress = useSpring(progress, { stiffness: 260, damping: 34 })
 
   useLayoutEffect(() => {
     const node = titleRef.current
@@ -74,17 +74,7 @@ export const Description = ({
       rafRef.current = requestAnimationFrame(() => {
         const scrollTop = Math.round(container.scrollTop)
         const heightDelta = container.scrollHeight - container.clientHeight
-        // Keep collapse threshold stable during the same scroll session.
-        // If we recompute with shrinking scrollHeight on every frame, progress can stay stuck at 1
-        // until scrollTop reaches 0, which feels like "cannot scroll to top".
-        const observedScrollable = Math.max(1, heightDelta)
-        const shouldResetThreshold = scrollTop === 0
-        if (shouldResetThreshold)
-          maxScrollableRef.current = observedScrollable
-        else
-          maxScrollableRef.current = Math.max(maxScrollableRef.current, observedScrollable)
-
-        const effectiveMaxScroll = Math.max(1, Math.min(MAX_SCROLL, maxScrollableRef.current))
+        const effectiveMaxScroll = Math.max(1, Math.min(MAX_SCROLL, heightDelta))
         const rawProgress = Math.min(Math.max(scrollTop / effectiveMaxScroll, 0), 1)
         const snappedProgress = rawProgress >= 0.95
           ? 1
@@ -109,19 +99,19 @@ export const Description = ({
       if (rafRef.current)
         cancelAnimationFrame(rafRef.current)
     }
-  }, [progress, scrollContainerId])
+  }, [smoothProgress, scrollContainerId])
 
   // Calculate interpolated values
-  const contentOpacity = useTransform(progress, [0, 1], [1, 0])
-  const contentScale = useTransform(progress, [0, 1], [1, 0.9])
+  const contentOpacity = useTransform(smoothProgress, [0, 1], [1, 0])
+  const contentScale = useTransform(smoothProgress, [0, 1], [1, 0.9])
   const titleMaxHeight: MotionValue<number> = useTransform(
-    [progress, titleHeight],
+    [smoothProgress, titleHeight],
     (values: number[]) => values[1] * (1 - values[0]),
   )
-  const tabsMarginTop = useTransform(progress, [0, 1], [48, marketplaceNav ? 16 : 0])
-  const titleMarginTop = useTransform(progress, [0, 1], [marketplaceNav ? 80 : 0, 0])
-  const paddingTop = useTransform(progress, [0, 1], [marketplaceNav ? COLLAPSED_PADDING_TOP : EXPANDED_PADDING_TOP, COLLAPSED_PADDING_TOP])
-  const paddingBottom = useTransform(progress, [0, 1], [EXPANDED_PADDING_BOTTOM, COLLAPSED_PADDING_BOTTOM])
+  const tabsMarginTop = useTransform(smoothProgress, [0, 1], [48, marketplaceNav ? 16 : 0])
+  const titleMarginTop = useTransform(smoothProgress, [0, 1], [marketplaceNav ? 80 : 0, 0])
+  const paddingTop = useTransform(smoothProgress, [0, 1], [marketplaceNav ? COLLAPSED_PADDING_TOP : EXPANDED_PADDING_TOP, COLLAPSED_PADDING_TOP])
+  const paddingBottom = useTransform(smoothProgress, [0, 1], [EXPANDED_PADDING_BOTTOM, COLLAPSED_PADDING_BOTTOM])
 
   return (
     <motion.div
@@ -132,7 +122,6 @@ export const Description = ({
       style={{
         paddingTop,
         paddingBottom,
-        overflowAnchor: 'none',
       }}
     >
       {/* Blue base background */}

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

@@ -6,6 +6,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
 import { useCallback, useMemo } from 'react'
+import CornerMark from '@/app/components/plugins/card/base/corner-mark'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
@@ -52,7 +53,8 @@ const TemplateCardComponent = ({
   const locale = useLocale()
   const { t } = useTranslation()
   const { theme } = useTheme()
-  const { id, template_name, overview, icon, publisher_handle, usage_count, icon_background, deps_plugins } = template
+  const { id, template_name, overview, icon, publisher_handle, usage_count, icon_background, deps_plugins, kind } = template
+  const isSandbox = kind === 'sandboxed'
   const isIconUrl = !!icon && /^(?:https?:)?\/\//.test(icon)
 
   const avatarBgStyle = useMemo(() => {
@@ -92,6 +94,7 @@ const TemplateCardComponent = ({
       )}
       onClick={handleClick}
     >
+      {isSandbox && <CornerMark text="Sandbox" />}
       {/* Header */}
       <div className="flex shrink-0 items-center gap-3 px-4 pb-2 pt-4">
         {/* Avatar */}

web/app/components/plugins/plugin-page/nav-operations.tsx

@@ -1,5 +1,6 @@
 'use client'
-import { RiAddLine, RiBookOpenLine, RiGithubLine } from '@remixicon/react'
+import type { DocPathWithoutLang } from '@/types/doc-paths'
+import { RiAddLine, RiArrowRightUpLine, RiBookOpenLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,6 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { CREATION_TYPE } from '@/app/components/plugins/marketplace/search-params'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 import { useDocLink } from '@/context/i18n'
 import { cn } from '@/utils/classnames'
 import { useCreationType } from '../marketplace/atoms'
@@ -31,10 +33,33 @@ const DropdownItem = ({ href, icon, text, onClick }: DropdownItemProps) => (
     onClick={onClick}
   >
     {icon}
-    <span className="system-sm-medium">{text}</span>
+    <span className="system-sm-medium text-text-secondary">{text}</span>
+    <RiArrowRightUpLine className="ml-auto h-4 w-4 shrink-0 text-text-tertiary" />
   </Link>
 )
 
+type OptionLabelKey = 'requestAPlugin' | 'publishPlugins' | 'createPublishTemplates'
+
+const getOptions = (docLink: (path: DocPathWithoutLang) => string): { href: string, icon: React.ReactNode, labelKey: OptionLabelKey }[] => {
+  return [
+    {
+      href: 'https://github.com/langgenius/dify-plugins/issues/new?template=plugin_request.yaml',
+      icon: <Plugin className="h-4 w-4 shrink-0 text-text-tertiary" />,
+      labelKey: 'requestAPlugin',
+    },
+    {
+      href: docLink('/develop-plugin/publishing/marketplace-listing/release-to-dify-marketplace'),
+      icon: <RiBookOpenLine className="h-4 w-4 shrink-0 text-text-tertiary" />,
+      labelKey: 'publishPlugins',
+    },
+    {
+      href: MARKETPLACE_URL_PREFIX.replace('marketplace', 'creators'),
+      icon: <Playground className="h-4 w-4 shrink-0 text-text-tertiary" />,
+      labelKey: 'createPublishTemplates',
+    },
+  ]
+}
+
 export const SubmitRequestDropdown = () => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -63,18 +88,15 @@ export const SubmitRequestDropdown = () => {
       </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)}
-          />
+          {getOptions(docLink).map(option => (
+            <DropdownItem
+              key={option.href}
+              href={option.href}
+              icon={option.icon}
+              text={t(option.labelKey, { ns: 'plugin' })}
+              onClick={() => setOpen(false)}
+            />
+          ))}
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
@@ -113,7 +135,7 @@ export const CreationTypeTabs = () => {
           {t('templates', { ns: 'plugin' })}
         </span>
         <Badge className="ml-1 hidden h-4 rounded-[4px] border-none bg-saas-dify-blue-accessible px-1 text-[10px] font-bold leading-[14px] text-text-primary-on-surface md:inline-flex">
-          NEW
+          {t('badge.new', { ns: 'plugin' })}
         </Badge>
       </Link>
     </div>

web/i18n/en-US/plugin.json

@@ -63,6 +63,7 @@
   "autoUpdate.upgradeMode.partial": "Only selected",
   "autoUpdate.upgradeModePlaceholder.exclude": "Selected plugins will not auto-update",
   "autoUpdate.upgradeModePlaceholder.partial": "Only selected plugins will auto-update. No plugins are currently selected, so no plugins will auto-update.",
+  "badge.new": "NEW",
   "category.agents": "Agent Strategies",
   "category.all": "All",
   "category.allTypes": "All types",
@@ -79,6 +80,7 @@
   "categorySingle.model": "Model",
   "categorySingle.tool": "Tool",
   "categorySingle.trigger": "Trigger",
+  "createPublishTemplates": "Create / Publish templates",
   "debugInfo.title": "Debugging",
   "debugInfo.viewDocs": "View Docs",
   "deprecated": "Deprecated",

web/i18n/zh-Hans/plugin.json

@@ -63,6 +63,7 @@
   "autoUpdate.upgradeMode.partial": "仅选定",
   "autoUpdate.upgradeModePlaceholder.exclude": "选定的插件将不会自动更新",
   "autoUpdate.upgradeModePlaceholder.partial": "仅选定的插件将自动更新。目前未选择任何插件，因此不会自动更新任何插件。",
+  "badge.new": "NEW",
   "category.agents": "Agent 策略",
   "category.all": "全部",
   "category.allTypes": "所有类型",
@@ -79,6 +80,7 @@
   "categorySingle.model": "模型",
   "categorySingle.tool": "工具",
   "categorySingle.trigger": "触发器",
+  "createPublishTemplates": "创建 / 发布模板",
   "debugInfo.title": "调试",
   "debugInfo.viewDocs": "查看文档",
   "deprecated": "已弃用",

web/i18n/zh-Hant/plugin.json

@@ -78,6 +78,7 @@
   "categorySingle.model": "型",
   "categorySingle.tool": "工具",
   "categorySingle.trigger": "觸發器",
+  "createPublishTemplates": "建立 / 發佈範本",
   "debugInfo.title": "調試",
   "debugInfo.viewDocs": "查看文件",
   "deprecated": "不推薦使用的",