[CLEAN] Synthetic Benchmark PR #29095 - refactor: simplify marketplace component structure by removing unused…

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} />}
     />
   )
 }

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,

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,
-  }
-}

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

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,
     )}>
       {

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}

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