From 31481581e8dbf126796802e1e8076b710e4a49f3 Mon Sep 17 00:00:00 2001
From: zhsama <torvalds@linux.do>
Date: Wed, 3 Dec 2025 21:30:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20simplify=20marketplace=20component?=
 =?UTF-8?q?=20structure=20by=20removing=20unused=E2=80=A6=20(#29095)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/(commonLayout)/plugins/page.tsx       |  2 +-
 .../plugins/marketplace/context.tsx           |  7 ----
 .../components/plugins/marketplace/hooks.ts   | 31 ----------------
 .../components/plugins/marketplace/index.tsx  | 18 ++-------
 .../marketplace/intersection-line/hooks.ts    | 30 ---------------
 .../marketplace/intersection-line/index.tsx   | 21 -----------
 .../marketplace/plugin-type-switch.tsx        |  9 +----
 .../search-box/search-box-wrapper.tsx         | 16 +-------
 .../sticky-search-and-switch-wrapper.tsx      | 37 +++++++++++++++++++
 9 files changed, 44 insertions(+), 127 deletions(-)
 delete mode 100644 web/app/components/plugins/marketplace/intersection-line/hooks.ts
 delete mode 100644 web/app/components/plugins/marketplace/intersection-line/index.tsx
 create mode 100644 web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx

diff --git a/web/app/(commonLayout)/plugins/page.tsx b/web/app/(commonLayout)/plugins/page.tsx
index d07c4307ad..ad61b16ba2 100644
--- a/web/app/(commonLayout)/plugins/page.tsx
+++ b/web/app/(commonLayout)/plugins/page.tsx
@@ -8,7 +8,7 @@ const PluginList = async () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' searchBoxAutoAnimate={false} showSearchParams={false} />}
+      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName='top-[60px]' showSearchParams={false} />}
     />
   )
 }
diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
index fca8085271..78f452452a 100644
--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/web/app/components/plugins/marketplace/context.tsx
@@ -41,8 +41,6 @@ import { useInstalledPluginList } from '@/service/use-plugins'
 import { debounce, noop } from 'lodash-es'
 
 export type MarketplaceContextValue = {
-  intersected: boolean
-  setIntersected: (intersected: boolean) => void
   searchPluginText: string
   handleSearchPluginTextChange: (text: string) => void
   filterPluginTags: string[]
@@ -67,8 +65,6 @@ export type MarketplaceContextValue = {
 }
 
 export const MarketplaceContext = createContext<MarketplaceContextValue>({
-  intersected: true,
-  setIntersected: noop,
   searchPluginText: '',
   handleSearchPluginTextChange: noop,
   filterPluginTags: [],
@@ -121,7 +117,6 @@ export const MarketplaceContextProvider = ({
   const hasValidTags = !!tagsFromSearchParams.length
   const hasValidCategory = getValidCategoryKeys(searchParams?.category)
   const categoryFromSearchParams = hasValidCategory || PLUGIN_TYPE_SEARCH_MAP.all
-  const [intersected, setIntersected] = useState(true)
   const [searchPluginText, setSearchPluginText] = useState(queryFromSearchParams)
   const searchPluginTextRef = useRef(searchPluginText)
   const [filterPluginTags, setFilterPluginTags] = useState<string[]>(tagsFromSearchParams)
@@ -300,8 +295,6 @@ export const MarketplaceContextProvider = ({
   return (
     <MarketplaceContext.Provider
       value={{
-        intersected,
-        setIntersected,
         searchPluginText,
         handleSearchPluginTextChange,
         filterPluginTags,
diff --git a/web/app/components/plugins/marketplace/hooks.ts b/web/app/components/plugins/marketplace/hooks.ts
index 49b07d7af6..93891511e4 100644
--- a/web/app/components/plugins/marketplace/hooks.ts
+++ b/web/app/components/plugins/marketplace/hooks.ts
@@ -259,34 +259,3 @@ export const useMarketplaceContainerScroll = (
     }
   }, [handleScroll])
 }
-
-export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => {
-  const [searchBoxCanAnimate, setSearchBoxCanAnimate] = useState(true)
-
-  const handleSearchBoxCanAnimateChange = useCallback(() => {
-    if (!searchBoxAutoAnimate) {
-      const clientWidth = document.documentElement.clientWidth
-
-      if (clientWidth < 1400)
-        setSearchBoxCanAnimate(false)
-      else
-        setSearchBoxCanAnimate(true)
-    }
-  }, [searchBoxAutoAnimate])
-
-  useEffect(() => {
-    handleSearchBoxCanAnimateChange()
-  }, [handleSearchBoxCanAnimateChange])
-
-  useEffect(() => {
-    window.addEventListener('resize', handleSearchBoxCanAnimateChange)
-
-    return () => {
-      window.removeEventListener('resize', handleSearchBoxCanAnimateChange)
-    }
-  }, [handleSearchBoxCanAnimateChange])
-
-  return {
-    searchBoxCanAnimate,
-  }
-}
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 800c096639..952a9db90f 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,8 +1,6 @@
 import { MarketplaceContextProvider } from './context'
 import Description from './description'
-import IntersectionLine from './intersection-line'
-import SearchBoxWrapper from './search-box/search-box-wrapper'
-import PluginTypeSwitch from './plugin-type-switch'
+import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
 import ListWrapper from './list/list-wrapper'
 import type { MarketplaceCollection, SearchParams } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
@@ -11,23 +9,19 @@ import { TanstackQueryInitializer } from '@/context/query-client'
 
 type MarketplaceProps = {
   locale: string
-  searchBoxAutoAnimate?: boolean
   showInstallButton?: boolean
   shouldExclude?: boolean
   searchParams?: SearchParams
   pluginTypeSwitchClassName?: string
-  intersectionContainerId?: string
   scrollContainerId?: string
   showSearchParams?: boolean
 }
 const Marketplace = async ({
   locale,
-  searchBoxAutoAnimate = true,
   showInstallButton = true,
   shouldExclude,
   searchParams,
   pluginTypeSwitchClassName,
-  intersectionContainerId,
   scrollContainerId,
   showSearchParams = true,
 }: MarketplaceProps) => {
@@ -48,15 +42,9 @@ const Marketplace = async ({
         showSearchParams={showSearchParams}
       >
         <Description locale={locale} />
-        <IntersectionLine intersectionContainerId={intersectionContainerId} />
-        <SearchBoxWrapper
+        <StickySearchAndSwitchWrapper
           locale={locale}
-          searchBoxAutoAnimate={searchBoxAutoAnimate}
-        />
-        <PluginTypeSwitch
-          locale={locale}
-          className={pluginTypeSwitchClassName}
-          searchBoxAutoAnimate={searchBoxAutoAnimate}
+          pluginTypeSwitchClassName={pluginTypeSwitchClassName}
           showSearchParams={showSearchParams}
         />
         <ListWrapper
diff --git a/web/app/components/plugins/marketplace/intersection-line/hooks.ts b/web/app/components/plugins/marketplace/intersection-line/hooks.ts
deleted file mode 100644
index 0104cc6269..0000000000
--- a/web/app/components/plugins/marketplace/intersection-line/hooks.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect } from 'react'
-import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
-
-export const useScrollIntersection = (
-  anchorRef: React.RefObject<HTMLDivElement | null>,
-  intersectionContainerId = 'marketplace-container',
-) => {
-  const intersected = useMarketplaceContext(v => v.intersected)
-  const setIntersected = useMarketplaceContext(v => v.setIntersected)
-
-  useEffect(() => {
-    const container = document.getElementById(intersectionContainerId)
-    let observer: IntersectionObserver | undefined
-    if (container && anchorRef.current) {
-      observer = new IntersectionObserver((entries) => {
-        const isIntersecting = entries[0].isIntersecting
-
-        if (isIntersecting && !intersected)
-          setIntersected(true)
-
-        if (!isIntersecting && intersected)
-          setIntersected(false)
-      }, {
-        root: container,
-      })
-      observer.observe(anchorRef.current)
-    }
-    return () => observer?.disconnect()
-  }, [anchorRef, intersected, setIntersected, intersectionContainerId])
-}
diff --git a/web/app/components/plugins/marketplace/intersection-line/index.tsx b/web/app/components/plugins/marketplace/intersection-line/index.tsx
deleted file mode 100644
index c495d7f507..0000000000
--- a/web/app/components/plugins/marketplace/intersection-line/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import { useScrollIntersection } from './hooks'
-
-type IntersectionLineProps = {
-  intersectionContainerId?: string
-}
-const IntersectionLine = ({
-  intersectionContainerId,
-}: IntersectionLineProps) => {
-  const ref = useRef<HTMLDivElement>(null)
-
-  useScrollIntersection(ref, intersectionContainerId)
-
-  return (
-    <div ref={ref} className='mb-4 h-px shrink-0 bg-transparent'></div>
-  )
-}
-
-export default IntersectionLine
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 249be1ef83..e63ecfe591 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -12,10 +12,7 @@ import {
 import { useCallback, useEffect } from 'react'
 import { PluginCategoryEnum } from '../types'
 import { useMarketplaceContext } from './context'
-import {
-  useMixedTranslation,
-  useSearchBoxAutoAnimate,
-} from './hooks'
+import { useMixedTranslation } from './hooks'
 
 export const PLUGIN_TYPE_SEARCH_MAP = {
   all: 'all',
@@ -30,19 +27,16 @@ export const PLUGIN_TYPE_SEARCH_MAP = {
 type PluginTypeSwitchProps = {
   locale?: string
   className?: string
-  searchBoxAutoAnimate?: boolean
   showSearchParams?: boolean
 }
 const PluginTypeSwitch = ({
   locale,
   className,
-  searchBoxAutoAnimate,
   showSearchParams,
 }: PluginTypeSwitchProps) => {
   const { t } = useMixedTranslation(locale)
   const activePluginType = useMarketplaceContext(s => s.activePluginType)
   const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange)
-  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
 
   const options = [
     {
@@ -105,7 +99,6 @@ const PluginTypeSwitch = ({
   return (
     <div className={cn(
       'flex shrink-0 items-center justify-center space-x-2 bg-background-body py-3',
-      searchBoxCanAnimate && 'sticky top-[56px] z-10',
       className,
     )}>
       {
diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
index e73a23f6ad..cca72f657a 100644
--- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
@@ -1,36 +1,24 @@
 'use client'
 
 import { useMarketplaceContext } from '../context'
-import {
-  useMixedTranslation,
-  useSearchBoxAutoAnimate,
-} from '../hooks'
+import { useMixedTranslation } from '../hooks'
 import SearchBox from './index'
-import cn from '@/utils/classnames'
 
 type SearchBoxWrapperProps = {
   locale?: string
-  searchBoxAutoAnimate?: boolean
 }
 const SearchBoxWrapper = ({
   locale,
-  searchBoxAutoAnimate,
 }: SearchBoxWrapperProps) => {
   const { t } = useMixedTranslation(locale)
-  const intersected = useMarketplaceContext(v => v.intersected)
   const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
   const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
   const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
   const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
-  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
 
   return (
     <SearchBox
-      wrapperClassName={cn(
-        'z-[0] mx-auto w-[640px] shrink-0',
-        searchBoxCanAnimate && 'sticky top-3 z-[11]',
-        !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
-      )}
+      wrapperClassName='z-[11] mx-auto w-[640px] shrink-0'
       inputClassName='w-full'
       search={searchPluginText}
       onSearchChange={handleSearchPluginTextChange}
diff --git a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
new file mode 100644
index 0000000000..cca8876f09
--- /dev/null
+++ b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import SearchBoxWrapper from './search-box/search-box-wrapper'
+import PluginTypeSwitch from './plugin-type-switch'
+import cn from '@/utils/classnames'
+
+type StickySearchAndSwitchWrapperProps = {
+  locale?: string
+  pluginTypeSwitchClassName?: string
+  showSearchParams?: boolean
+}
+
+const StickySearchAndSwitchWrapper = ({
+  locale,
+  pluginTypeSwitchClassName,
+  showSearchParams,
+}: StickySearchAndSwitchWrapperProps) => {
+  const hasCustomTopClass = pluginTypeSwitchClassName?.includes('top-')
+
+  return (
+    <div
+      className={cn(
+        'mt-4 bg-background-body',
+        hasCustomTopClass && 'sticky z-10',
+        pluginTypeSwitchClassName,
+      )}
+    >
+      <SearchBoxWrapper locale={locale} />
+      <PluginTypeSwitch
+        locale={locale}
+        showSearchParams={showSearchParams}
+      />
+    </div>
+  )
+}
+
+export default StickySearchAndSwitchWrapper