fix: Refactor i18n config and fix plugin search box styling issue (#22945)

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

@@ -1,7 +1,7 @@
 import {
   getLocaleOnServer,
   useTranslation as translate,
-} from '@/i18n/server'
+} from '@/i18n-config/server'
 
 type DescriptionProps = {
   locale?: string

web/app/components/plugins/marketplace/hooks.ts

@@ -17,7 +17,7 @@ import {
   getFormattedPlugin,
   getMarketplaceCollectionsAndPlugins,
 } from './utils'
-import i18n from '@/i18n/i18next-config'
+import i18n from '@/i18n-config/i18next-config'
 import {
   useMutationPluginsFromMarketplace,
 } from '@/service/use-plugins'
@@ -109,6 +109,7 @@ export const useMarketplacePlugins = () => {
 export const useMixedTranslation = (localeFromOuter?: string) => {
   let t = useTranslation().t
 
+  // !localeFromOuter only support zh-Hans and en-US for now
   if (localeFromOuter)
     t = i18n.getFixedT(localeFromOuter)
 
@@ -121,8 +122,6 @@ export const useMarketplaceContainerScroll = (
   callback: () => void,
   scrollContainerId = 'marketplace-container',
 ) => {
-  const container = document.getElementById(scrollContainerId)
-
   const handleScroll = useCallback((e: Event) => {
     const target = e.target as HTMLDivElement
     const {
@@ -135,6 +134,7 @@ export const useMarketplaceContainerScroll = (
   }, [callback])
 
   useEffect(() => {
+    const container = document.getElementById(scrollContainerId)
     if (container)
       container.addEventListener('scroll', handleScroll)
 
@@ -142,7 +142,7 @@ export const useMarketplaceContainerScroll = (
       if (container)
         container.removeEventListener('scroll', handleScroll)
     }
-  }, [container, handleScroll])
+  }, [handleScroll])
 }
 
 export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => {

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

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
 
 export const useScrollIntersection = (
-  anchorRef: React.RefObject<HTMLDivElement>,
+  anchorRef: React.RefObject<HTMLDivElement | null>,
   intersectionContainerId = 'marketplace-container',
 ) => {
   const intersected = useMarketplaceContext(v => v.intersected)

web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -4,7 +4,7 @@ import { RiArrowRightSLine } from '@remixicon/react'
 import type { MarketplaceCollection } from '../types'
 import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import cn from '@/utils/classnames'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'

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

@@ -8,6 +8,7 @@ import { RiAddLine } from '@remixicon/react'
 type SearchBoxProps = {
   search: string
   onSearchChange: (search: string) => void
+  wrapperClassName?: string
   inputClassName?: string
   tags: string[]
   onTagsChange: (tags: string[]) => void
@@ -21,6 +22,7 @@ type SearchBoxProps = {
 const SearchBox = ({
   search,
   onSearchChange,
+  wrapperClassName,
   inputClassName,
   tags,
   onTagsChange,
@@ -32,7 +34,7 @@ const SearchBox = ({
 }: SearchBoxProps) => {
   return (
     <div
-      className='z-[11] flex items-center'
+      className={cn('z-[11] flex items-center', wrapperClassName)}
     >
       <div className={
         cn('flex items-center',

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

@@ -26,11 +26,12 @@ const SearchBoxWrapper = ({
 
   return (
     <SearchBox
-      inputClassName={cn(
+      wrapperClassName={cn(
         'z-[0] mx-auto w-[640px] shrink-0',
         searchBoxCanAnimate && 'sticky top-3 z-[11]',
         !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
       )}
+      inputClassName='w-full'
       search={searchPluginText}
       onSearchChange={handleSearchPluginTextChange}
       tags={filterPluginTags}