From 49baf07f1fda276cda91c51144526a8334cb4b27 Mon Sep 17 00:00:00 2001
From: yessenia <yessenia.contact@gmail.com>
Date: Wed, 4 Feb 2026 17:53:36 +0800
Subject: [PATCH] feat: layout opt

---
 .../plugins/marketplace/description/index.tsx          | 10 ++++++++--
 web/app/components/plugins/marketplace/index.tsx       | 10 +++++++++-
 .../plugins/marketplace/marketplace-header.tsx         |  5 +++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/marketplace/description/index.tsx b/web/app/components/plugins/marketplace/description/index.tsx
index 01e869b63d..72f612f5cf 100644
--- a/web/app/components/plugins/marketplace/description/index.tsx
+++ b/web/app/components/plugins/marketplace/description/index.tsx
@@ -12,6 +12,7 @@ import PluginTypeSwitch from '../plugin-type-switch'
 type DescriptionProps = {
   className?: string
   scrollContainerId?: string
+  marketplaceNav?: React.ReactNode
 }
 
 // Constants for collapse animation
@@ -24,6 +25,7 @@ const COLLAPSED_PADDING_BOTTOM = 12 // pb-3
 export const Description = ({
   className,
   scrollContainerId = 'marketplace-container',
+  marketplaceNav,
 }: DescriptionProps) => {
   const { t } = useTranslation('plugin')
   const rafRef = useRef<number | null>(null)
@@ -98,8 +100,9 @@ export const Description = ({
     [smoothProgress, titleHeight],
     (values: number[]) => values[1] * (1 - values[0]),
   )
-  const tabsMarginTop = useTransform(smoothProgress, [0, 1], [48, 0])
-  const paddingTop = useTransform(smoothProgress, [0, 1], [EXPANDED_PADDING_TOP, COLLAPSED_PADDING_TOP])
+  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 (
@@ -132,6 +135,8 @@ export const Description = ({
         style={{ backgroundImage: `url(${marketplaceGradientNoise.src})` }}
       />
 
+      {marketplaceNav}
+
       {/* Content */}
       <div className="relative z-10">
         {/* Title and subtitle - fade out and scale down */}
@@ -144,6 +149,7 @@ export const Description = ({
             maxHeight: titleMaxHeight,
             overflow: 'hidden',
             willChange: 'opacity, transform',
+            marginTop: titleMarginTop,
           }}
         >
           <h1 className="title-4xl-semi-bold mb-2 shrink-0 text-text-primary-on-surface">
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 190ba201b3..f7dd6cae28 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,5 +1,6 @@
 import type { SearchParams } from 'nuqs'
 import { TanstackQueryInitializer } from '@/context/query-client'
+import { cn } from '@/utils/classnames'
 import { HydrateQueryClient } from './hydration-server'
 import ListWrapper from './list/list-wrapper'
 import MarketplaceHeader from './marketplace-header'
@@ -10,16 +11,23 @@ type MarketplaceProps = {
    * Pass the search params from the request to prefetch data on the server.
    */
   searchParams?: Promise<SearchParams>
+  /**
+   * Whether the marketplace is the platform marketplace.
+   */
+  isMarketplacePlatform?: boolean
+  marketplaceNav?: React.ReactNode
 }
 
 const Marketplace = async ({
   showInstallButton = true,
   searchParams,
+  isMarketplacePlatform = false,
+  marketplaceNav,
 }: MarketplaceProps) => {
   return (
     <TanstackQueryInitializer>
       <HydrateQueryClient searchParams={searchParams}>
-        <MarketplaceHeader descriptionClassName="mx-12 mt-1" />
+        <MarketplaceHeader descriptionClassName={cn('mx-12 mt-1', isMarketplacePlatform && 'top-0 mx-0 mt-0 rounded-none')} marketplaceNav={marketplaceNav} />
         <ListWrapper
           showInstallButton={showInstallButton}
         />
diff --git a/web/app/components/plugins/marketplace/marketplace-header.tsx b/web/app/components/plugins/marketplace/marketplace-header.tsx
index f5115c1a31..008034b508 100644
--- a/web/app/components/plugins/marketplace/marketplace-header.tsx
+++ b/web/app/components/plugins/marketplace/marketplace-header.tsx
@@ -6,15 +6,16 @@ import SearchResultsHeader from './search-results-header'
 
 type MarketplaceHeaderProps = {
   descriptionClassName?: string
+  marketplaceNav?: React.ReactNode
 }
 
-const MarketplaceHeader = ({ descriptionClassName }: MarketplaceHeaderProps) => {
+const MarketplaceHeader = ({ descriptionClassName, marketplaceNav }: MarketplaceHeaderProps) => {
   const isSearchMode = useMarketplaceSearchMode()
 
   if (isSearchMode)
     return <SearchResultsHeader />
 
-  return <Description className={descriptionClassName} />
+  return <Description className={descriptionClassName} marketplaceNav={marketplaceNav} />
 }
 
 export default MarketplaceHeader