From 6a99fab92f8686becaec1c2d4ddeab77077b1c71 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 7 Nov 2024 15:06:55 +0800
Subject: [PATCH] fix: marketplace

---
 .../components/plugins/marketplace/index.tsx  | 54 +++++++++++++++++++
 .../marketplace/intersection-line/hooks.ts    |  9 ++--
 .../components/plugins/plugin-page/index.tsx  |  1 +
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 742df86ea0..2cd77dc038 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -28,6 +28,60 @@ const Marketplace = async ({
         marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
         showInstallButton={showInstallButton}
       />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
+      <ListWrapper
+        locale={locale}
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+        showInstallButton={showInstallButton}
+      />
     </MarketplaceContextProvider>
   )
 }
diff --git a/web/app/components/plugins/marketplace/intersection-line/hooks.ts b/web/app/components/plugins/marketplace/intersection-line/hooks.ts
index 2ebc7842df..79ee764edf 100644
--- a/web/app/components/plugins/marketplace/intersection-line/hooks.ts
+++ b/web/app/components/plugins/marketplace/intersection-line/hooks.ts
@@ -1,17 +1,16 @@
 import { useEffect } from 'react'
-import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
 
 export const useScrollIntersection = (
   anchorRef: React.RefObject<HTMLDivElement>,
 ) => {
-  const containerRef = usePluginPageContext(v => v.containerRef)
   const intersected = useMarketplaceContext(v => v.intersected)
   const setIntersected = useMarketplaceContext(v => v.setIntersected)
 
   useEffect(() => {
+    const container = document.getElementById('marketplace-container')
     let observer: IntersectionObserver | undefined
-    if (containerRef?.current && anchorRef.current) {
+    if (container && anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
         const isIntersecting = entries[0].isIntersecting
 
@@ -21,10 +20,10 @@ export const useScrollIntersection = (
         if (!isIntersecting && intersected)
           setIntersected(false)
       }, {
-        root: containerRef.current,
+        root: container,
       })
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
-  }, [containerRef, anchorRef, intersected, setIntersected])
+  }, [anchorRef, intersected, setIntersected])
 }
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 50723b580b..f7b4f4ef74 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -121,6 +121,7 @@ const PluginPage = ({
 
   return (
     <div
+      id='marketplace-container'
       ref={containerRef}
       className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
         ? 'rounded-t-xl bg-components-panel-bg'