marketplace

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

@@ -1,5 +1,5 @@
 import PluginPage from '@/app/components/plugins/plugin-page'
-import PluginsPanel from '@/app/components/plugins/plugins-panel'
+import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 import Marketplace from '@/app/components/plugins/marketplace'
 
 const PluginList = async () => {

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

@@ -1,41 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { useState } from 'react'
-import {
-  createContext,
-  useContextSelector,
-} from 'use-context-selector'
-
-export type MarketplaceContextValue = {
-  scrollIntersected: boolean
-  setScrollIntersected: (scrollIntersected: boolean) => void
-}
-
-export const MarketplaceContext = createContext<MarketplaceContextValue>({
-  scrollIntersected: false,
-  setScrollIntersected: () => {},
-})
-
-type MarketplaceContextProviderProps = {
-  children: ReactNode
-}
-
-export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
-  return useContextSelector(MarketplaceContext, selector)
-}
-
-export const MarketplaceContextProvider = ({
-  children,
-}: MarketplaceContextProviderProps) => {
-  const [scrollIntersected, setScrollIntersected] = useState(false)
-
-  return (
-    <MarketplaceContext.Provider value={{
-      scrollIntersected,
-      setScrollIntersected,
-    }}>
-      {children}
-    </MarketplaceContext.Provider>
-  )
-}

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

@@ -1,14 +1,10 @@
-import SearchBox from './search-box'
-import PluginTypeSwitch from './plugin-type-switch'
-import IntersectionLine from './intersection-line'
-
-const Header = () => {
+const Description = () => {
   return (
     <>
       <h1 className='mb-2 text-center title-4xl-semi-bold text-text-primary'>
         Empower your AI development
       </h1>
-      <h2 className='flex justify-center items-center mb-4 text-center body-md-regular text-text-tertiary'>
+      <h2 className='flex justify-center items-center text-center body-md-regular text-text-tertiary'>
         Discover
         <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
           models
@@ -27,13 +23,8 @@ const Header = () => {
         </span>
         in Dify Marketplace
       </h2>
-      <IntersectionLine />
-      <div className='flex items-center justify-center mb-[15px]'>
-        <SearchBox />
-      </div>
-      <PluginTypeSwitch />
     </>
   )
 }
 
-export default Header
+export default Description

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

@@ -0,0 +1,39 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { useCallback } from 'react'
+import IntersectionLine from '../intersection-line'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
+
+type DescriptionWrapperProps = {
+  children: ReactNode
+}
+const DescriptionWrapper = ({
+  children,
+}: DescriptionWrapperProps) => {
+  const containerRef = usePluginPageContext(v => v.containerRef)
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
+  const setScrollDisabled = usePluginPageContext(v => v.setScrollDisabled)
+
+  const handleScrollIntersectionChange = useCallback((isIntersecting: boolean) => {
+    if (!isIntersecting && !scrollDisabled) {
+      setScrollDisabled(true)
+      setTimeout(() => {
+        if (containerRef && containerRef.current)
+          containerRef.current.scrollTop = 0
+      }, 100)
+    }
+  }, [containerRef, scrollDisabled, setScrollDisabled])
+
+  return !scrollDisabled && (
+    <>
+      {children}
+      <IntersectionLine
+        containerRef={containerRef}
+        intersectedCallback={handleScrollIntersectionChange}
+      />
+    </>
+  )
+}
+
+export default DescriptionWrapper

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

@@ -0,0 +1,20 @@
+import Description from '../description'
+import DescriptionWrapper from '../description/wrapper'
+import SearchBoxWrapper from '../search-box/wrapper'
+import PluginTypeSwitch from '../plugin-type-switch'
+
+const Header = () => {
+  return (
+    <>
+      <DescriptionWrapper>
+        <Description />
+      </DescriptionWrapper>
+      <div className='flex items-center justify-center mt-[15px] mb-4'>
+        <SearchBoxWrapper />
+      </div>
+      <PluginTypeSwitch />
+    </>
+  )
+}
+
+export default Header

web/app/components/plugins/marketplace/header/wrapper.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import cn from '@/utils/classnames'
 
 type HeaderWrapperProps = {
@@ -9,10 +10,13 @@ type HeaderWrapperProps = {
 const HeaderWrapper = ({
   children,
 }: HeaderWrapperProps) => {
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
+
   return (
     <div
       className={cn(
         'py-10',
+        scrollDisabled && 'absolute left-1/2 -translate-x-1/2  -top-[100px] pb-3',
       )}
     >
       {children}

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

@@ -1,20 +1,17 @@
-import { MarketplaceContextProvider } from './context'
-import HeaderWrapper from './header-wrapper'
 import Header from './header'
-import ListWrapper from './list-wrapper'
+import HeaderWrapper from './header/wrapper'
 import List from './list'
+import ListWrapper from './list/wrapper'
 
 const Marketplace = () => {
   return (
-    <div className='w-full'>
-      <MarketplaceContextProvider>
-        <HeaderWrapper>
-          <Header />
-        </HeaderWrapper>
-        <ListWrapper>
-          <List />
-        </ListWrapper>
-      </MarketplaceContextProvider>
+    <div className='grow relative flex flex-col w-full h-0'>
+      <HeaderWrapper>
+        <Header />
+      </HeaderWrapper>
+      <ListWrapper>
+        <List />
+      </ListWrapper>
     </div>
   )
 }

web/app/components/plugins/marketplace/intersection-line/hooks.ts

@@ -1,30 +1,21 @@
 import { useEffect } from 'react'
-import { useContextSelector } from 'use-context-selector'
-import { PluginPageContext } from '../../plugin-page/context'
-import { MarketplaceContext } from '../context'
 
 export const useScrollIntersection = (
+  containerRef: React.RefObject<HTMLDivElement>,
   anchorRef: React.RefObject<HTMLDivElement>,
+  callback: (isIntersecting: boolean) => void,
 ) => {
-  const containerRef = useContextSelector(PluginPageContext, v => v.containerRef)
-  const scrollIntersected = useContextSelector(MarketplaceContext, v => v.scrollIntersected)
-  const setScrollIntersected = useContextSelector(MarketplaceContext, v => v.setScrollIntersected)
-
   useEffect(() => {
     let observer: IntersectionObserver | undefined
-    if (containerRef.current && anchorRef.current) {
+    if (containerRef?.current && anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
-        console.log(entries, 'entries')
-        if (entries[0].isIntersecting && !scrollIntersected)
-          setScrollIntersected(true)
-
-        if (!entries[0].isIntersecting && scrollIntersected)
-          setScrollIntersected(false)
+        const isIntersecting = entries[0].isIntersecting
+        callback(isIntersecting)
       }, {
         root: containerRef.current,
       })
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
-  }, [containerRef, anchorRef, scrollIntersected, setScrollIntersected])
+  }, [containerRef, anchorRef, callback])
 }

web/app/components/plugins/marketplace/intersection-line/index.tsx

@@ -3,10 +3,21 @@
 import { useRef } from 'react'
 import { useScrollIntersection } from './hooks'
 
-const IntersectionLine = () => {
+type IntersectionLineProps = {
+  containerRef: React.RefObject<HTMLDivElement>
+  intersectedCallback: (isIntersecting: boolean) => void
+}
+const IntersectionLine = ({
+  containerRef,
+  intersectedCallback,
+}: IntersectionLineProps) => {
   const ref = useRef<HTMLDivElement>(null)
 
-  useScrollIntersection(ref)
+  useScrollIntersection(
+    containerRef,
+    ref,
+    intersectedCallback,
+  )
 
   return (
     <div ref={ref} className='h-[1px] bg-transparent'></div>

web/app/components/plugins/marketplace/list-wrapper.tsx

@@ -1,23 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import cn from '@/utils/classnames'
-
-type ListWrapperProps = {
-  children: ReactNode
-}
-const ListWrapper = ({
-  children,
-}: ListWrapperProps) => {
-  return (
-    <div
-      className={cn(
-        'px-12 py-2 bg-background-default-subtle',
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default ListWrapper

web/app/components/plugins/marketplace/list/wrapper.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
+import cn from '@/utils/classnames'
+
+type ListWrapperProps = {
+  children: ReactNode
+}
+const ListWrapper = ({
+  children,
+}: ListWrapperProps) => {
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
+  const setScrollDisabled = usePluginPageContext(v => v.setScrollDisabled)
+
+  return (
+    <>
+      {
+        scrollDisabled && (
+          <div className='h-[60px]'></div>
+        )
+      }
+      <div
+        className={cn(
+          'px-12 py-2 bg-background-default-subtle',
+          scrollDisabled && 'grow h-0 overflow-y-auto',
+        )}
+        onScroll={(e) => {
+          if ((e.target as HTMLElement).scrollTop <= 0)
+            setScrollDisabled(false)
+        }}
+      >
+        {children}
+      </div>
+    </>
+  )
+}
+
+export default ListWrapper

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

@@ -5,20 +5,20 @@ import {
   useState,
 } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import { useMarketplaceContext } from '../context'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
 
 type SearchBoxProps = {
   onChange?: (searchText: string, tags: string[]) => void
+  widthShouldChange?: boolean
 }
 const SearchBox = ({
   onChange,
+  widthShouldChange,
 }: SearchBoxProps) => {
   const [searchText, setSearchText] = useState('')
   const [selectedTags, setSelectedTags] = useState<string[]>([])
-  const scrollIntersected = useMarketplaceContext(v => v.scrollIntersected)
 
   const handleTagsChange = useCallback((tags: string[]) => {
     setSelectedTags(tags)
@@ -29,7 +29,7 @@ const SearchBox = ({
     <div
       className={cn(
         'flex items-center p-1.5 w-[640px] h-11 border border-components-chat-input-border bg-components-panel-bg-blur rounded-xl shadow-md',
-        !scrollIntersected && 'w-[508px] transition-[width] duration-300',
+        widthShouldChange && 'w-[508px] transition-[width] duration-300',
       )}
     >
       <TagsFilter

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

@@ -0,0 +1,14 @@
+'use client'
+
+import SearchBox from '.'
+import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
+
+const Wrapper = () => {
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
+
+  return (
+    <SearchBox widthShouldChange={scrollDisabled} />
+  )
+}
+
+export default Wrapper

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

@@ -1,29 +1,49 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { useRef } from 'react'
-import { createContext } from 'use-context-selector'
+import {
+  useRef,
+  useState,
+} from 'react'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
+  scrollDisabled: boolean
+  setScrollDisabled: (scrollDisabled: boolean) => void
 }
 
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
+  scrollDisabled: false,
+  setScrollDisabled: () => {},
 })
 
 type PluginPageContextProviderProps = {
   children: ReactNode
 }
 
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}
+
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [scrollDisabled, setScrollDisabled] = useState(false)
+
   return (
-    <PluginPageContext.Provider value={{
-      containerRef,
-    }}>
+    <PluginPageContext.Provider
+      value={{
+        containerRef,
+        scrollDisabled,
+        setScrollDisabled,
+      }}
+    >
       {children}
     </PluginPageContext.Provider>
   )

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

@@ -2,7 +2,6 @@
 
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContextSelector } from 'use-context-selector'
 import {
   RiArrowRightUpLine,
   RiBugLine,
@@ -10,8 +9,8 @@ import {
   RiEqualizer2Line,
 } from '@remixicon/react'
 import {
-  PluginPageContext,
   PluginPageContextProvider,
+  usePluginPageContext,
 } from './context'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
@@ -32,7 +31,8 @@ const PluginPage = ({
 }: PluginPageProps) => {
   const { t } = useTranslation()
   const { setShowPluginSettingModal } = useModalContext() as any
-  const containerRef = useContextSelector(PluginPageContext, v => v.containerRef)
+  const containerRef = usePluginPageContext(v => v.containerRef)
+  const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
 
   const options = useMemo(() => {
     return [
@@ -51,9 +51,14 @@ const PluginPage = ({
       className={cn('grow relative flex flex-col overflow-y-auto border-t border-divider-subtle', activeTab === 'plugins'
         ? 'rounded-t-xl bg-components-panel-bg'
         : 'bg-background-body',
+      activeTab === 'discover' && scrollDisabled && 'overflow-hidden',
       )}
     >
-      <div className='sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1'>
+      <div
+        className={cn(
+          'sticky top-0 flex min-h-[60px] px-12 pt-4 pb-2 items-center self-stretch gap-1',
+        )}
+      >
         <div className='flex justify-between items-center w-full'>
           <div className='flex-1'>
             <TabSlider