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

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

@@ -9,9 +9,9 @@ import Description from './base/description'
 import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getLanguage } from '@/i18n-config/language'
 import { useSingleCategories } from '../hooks'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import Partner from '../base/badges/partner'
 import Verified from '../base/badges/verified'

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}

web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { languages } from '@/i18n/language'
+import { languages } from '@/i18n-config/language'
 import { PortalSelect } from '@/app/components/base/select'
 import cn from '@/utils/classnames'
 

web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx

@@ -14,7 +14,7 @@ import Divider from '@/app/components/base/divider'
 import type {
   StrategyDetail as StrategyDetailType,
 } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'

web/app/components/plugins/plugin-detail-panel/strategy-item.tsx

@@ -4,7 +4,7 @@ import StrategyDetailPanel from './strategy-detail'
 import type {
   StrategyDetail,
 } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import cn from '@/utils/classnames'
 

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import Icon from '@/app/components/plugins/card/base/card-icon'
-import { renderI18nObject } from '@/i18n'
+import { renderI18nObject } from '@/i18n-config'
 import { useGetLanguage } from '@/context/i18n'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import Checkbox from '@/app/components/base/checkbox'

web/app/components/plugins/types.ts

@@ -1,6 +1,6 @@
 import type { CredentialFormSchemaBase } from '../header/account-setting/model-provider-page/declarations'
 import type { ToolCredential } from '@/app/components/tools/types'
-import type { Locale } from '@/i18n'
+import type { Locale } from '@/i18n-config'
 import type { AgentFeature } from '@/app/components/workflow/nodes/agent/types'
 import type { AutoUpdateConfig } from './reference-setting-modal/auto-update-setting/types'
 export enum PluginType {

web/app/components/plugins/utils.ts

@@ -1,4 +1,4 @@
-import { LanguagesSupported } from '@/i18n/language'
+import { LanguagesSupported } from '@/i18n-config/language'
 
 import {
   categoryKeys,