refactor(web): remove useMixedTranslation, better resource loading (#30630)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

web/__tests__/goto-anything/search-error-handling.test.ts

@@ -14,6 +14,14 @@ import { fetchAppList } from '@/service/apps'
 import { postMarketplace } from '@/service/base'
 import { fetchDatasets } from '@/service/datasets'
 
+// Mock react-i18next before importing modules that use it
+vi.mock('react-i18next', () => ({
+  getI18n: () => ({
+    t: (key: string) => key,
+    language: 'en',
+  }),
+}))
+
 // Mock API functions
 vi.mock('@/service/base', () => ({
   postMarketplace: vi.fn(),

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

@@ -1,14 +1,12 @@
 import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
-import { getLocaleOnServer } from '@/i18n-config/server'
 
 const PluginList = async () => {
-  const locale = await getLocaleOnServer()
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace locale={locale} pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
+      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
     />
   )
 }

web/app/components/base/chat/chat-with-history/hooks.spec.tsx

@@ -17,7 +17,7 @@ vi.mock('@/hooks/use-app-favicon', () => ({
   useAppFavicon: vi.fn(),
 }))
 
-vi.mock('@/i18n-config/i18next-config', () => ({
+vi.mock('@/i18n-config/client', () => ({
   changeLanguage: vi.fn().mockResolvedValue(undefined),
 }))
 

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -25,7 +25,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import {
   delConversation,
   pinConversation,

web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx

@@ -13,7 +13,7 @@ import { shareQueryKeys } from '@/service/use-share'
 import { CONVERSATION_ID_INFO } from '../constants'
 import { useEmbeddedChatbot } from './hooks'
 
-vi.mock('@/i18n-config/i18next-config', () => ({
+vi.mock('@/i18n-config/client', () => ({
   changeLanguage: vi.fn().mockResolvedValue(undefined),
 }))
 

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -23,7 +23,7 @@ import { useToastContext } from '@/app/components/base/toast'
 import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useWebAppStore } from '@/context/web-app-context'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import { updateFeedback } from '@/service/share'
 import {
   useInvalidateShareConversations,

web/app/components/goto-anything/actions/commands/account.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiUser3Line } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Account command dependency types - no external dependencies needed
@@ -21,6 +21,7 @@ export const accountCommand: SlashCommandHandler<AccountDeps> = {
   },
 
   async search(args: string, locale: string = 'en') {
+    const i18n = getI18n()
     return [{
       id: 'account',
       title: i18n.t('account.account', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/community.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiDiscordLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Community command dependency types
@@ -22,6 +22,7 @@ export const communityCommand: SlashCommandHandler<CommunityDeps> = {
   },
 
   async search(args: string, locale: string = 'en') {
+    const i18n = getI18n()
     return [{
       id: 'community',
       title: i18n.t('userProfile.community', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/docs.tsx

@@ -1,8 +1,8 @@
 import type { SlashCommandHandler } from './types'
 import { RiBookOpenLine } from '@remixicon/react'
 import * as React from 'react'
+import { getI18n } from 'react-i18next'
 import { defaultDocBaseUrl } from '@/context/i18n'
-import i18n from '@/i18n-config/i18next-config'
 import { getDocLanguage } from '@/i18n-config/language'
 import { registerCommands, unregisterCommands } from './command-bus'
 
@@ -19,6 +19,7 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
 
   // Direct execution function
   execute: () => {
+    const i18n = getI18n()
     const currentLocale = i18n.language
     const docLanguage = getDocLanguage(currentLocale)
     const url = `${defaultDocBaseUrl}/${docLanguage}`
@@ -26,6 +27,7 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
   },
 
   async search(args: string, locale: string = 'en') {
+    const i18n = getI18n()
     return [{
       id: 'doc',
       title: i18n.t('userProfile.helpCenter', { ns: 'common', lng: locale }),
@@ -41,6 +43,7 @@ export const docsCommand: SlashCommandHandler<DocDeps> = {
   },
 
   register(_deps: DocDeps) {
+    const i18n = getI18n()
     registerCommands({
       'navigation.doc': async (_args) => {
         // Get the current language from i18n

web/app/components/goto-anything/actions/commands/forum.tsx

@@ -1,7 +1,7 @@
 import type { SlashCommandHandler } from './types'
 import { RiFeedbackLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Forum command dependency types
@@ -22,6 +22,7 @@ export const forumCommand: SlashCommandHandler<ForumDeps> = {
   },
 
   async search(args: string, locale: string = 'en') {
+    const i18n = getI18n()
     return [{
       id: 'forum',
       title: i18n.t('userProfile.forum', { ns: 'common', lng: locale }),

web/app/components/goto-anything/actions/commands/language.tsx

@@ -1,6 +1,6 @@
 import type { CommandSearchResult } from '../types'
 import type { SlashCommandHandler } from './types'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 import { registerCommands, unregisterCommands } from './command-bus'
 
@@ -14,6 +14,7 @@ const buildLanguageCommands = (query: string): CommandSearchResult[] => {
   const list = languages.filter(item => item.supported && (
     !q || item.name.toLowerCase().includes(q) || String(item.value).toLowerCase().includes(q)
   ))
+  const i18n = getI18n()
   return list.map(item => ({
     id: `lang-${item.value}`,
     title: item.name,

web/app/components/goto-anything/actions/commands/slash.tsx

@@ -2,8 +2,8 @@
 import type { ActionItem } from '../types'
 import { useTheme } from 'next-themes'
 import { useEffect } from 'react'
+import { getI18n } from 'react-i18next'
 import { setLocaleOnClient } from '@/i18n-config'
-import i18n from '@/i18n-config/i18next-config'
 import { accountCommand } from './account'
 import { executeCommand } from './command-bus'
 import { communityCommand } from './community'
@@ -14,6 +14,8 @@ import { slashCommandRegistry } from './registry'
 import { themeCommand } from './theme'
 import { zenCommand } from './zen'
 
+const i18n = getI18n()
+
 export const slashAction: ActionItem = {
   key: '/',
   shortcut: '/',

web/app/components/goto-anything/actions/commands/theme.tsx

@@ -2,7 +2,7 @@ import type { CommandSearchResult } from '../types'
 import type { SlashCommandHandler } from './types'
 import { RiComputerLine, RiMoonLine, RiSunLine } from '@remixicon/react'
 import * as React from 'react'
-import i18n from '@/i18n-config/i18next-config'
+import { getI18n } from 'react-i18next'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Theme dependency types
@@ -32,6 +32,7 @@ const THEME_ITEMS = [
 ] as const
 
 const buildThemeCommands = (query: string, locale?: string): CommandSearchResult[] => {
+  const i18n = getI18n()
   const q = query.toLowerCase()
   const list = THEME_ITEMS.filter(item =>
     !q

web/app/components/goto-anything/actions/commands/zen.tsx

@@ -1,8 +1,8 @@
 import type { SlashCommandHandler } from './types'
 import { RiFullscreenLine } from '@remixicon/react'
 import * as React from 'react'
+import { getI18n } from 'react-i18next'
 import { isInWorkflowPage } from '@/app/components/workflow/constants'
-import i18n from '@/i18n-config/i18next-config'
 import { registerCommands, unregisterCommands } from './command-bus'
 
 // Zen command dependency types - no external dependencies needed
@@ -32,6 +32,7 @@ export const zenCommand: SlashCommandHandler<ZenDeps> = {
   execute: toggleZenMode,
 
   async search(_args: string, locale: string = 'en') {
+    const i18n = getI18n()
     return [{
       id: 'zen',
       title: i18n.t('gotoAnything.actions.zenTitle', { ns: 'app', lng: locale }) || 'Zen Mode',

web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx

@@ -15,7 +15,6 @@ import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
-import { getLocaleOnClient } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -33,7 +32,6 @@ const InstallFromMarketplace = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const [collapse, setCollapse] = useState(false)
-  const locale = getLocaleOnClient()
   const {
     plugins: allPlugins,
     isLoading: isAllPluginsLoading,
@@ -70,7 +68,6 @@ const InstallFromMarketplace = ({
             marketplaceCollectionPluginsMap={{}}
             plugins={allPlugins}
             showInstallButton
-            locale={locale}
             cardContainerClassName="grid grid-cols-2 gap-2"
             cardRender={cardRender}
             emptyClassName="h-auto"

web/app/components/header/account-setting/language-page/index.tsx

@@ -2,13 +2,13 @@
 
 import type { Item } from '@/app/components/base/select'
 import type { Locale } from '@/i18n-config'
+import { useRouter } from 'next/navigation'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { SimpleSelect } from '@/app/components/base/select'
 import { ToastContext } from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
-
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
@@ -25,6 +25,7 @@ export default function LanguagePage() {
   const { notify } = useContext(ToastContext)
   const [editing, setEditing] = useState(false)
   const { t } = useTranslation()
+  const router = useRouter()
 
   const handleSelectLanguage = async (item: Item) => {
     const url = '/account/interface-language'
@@ -35,7 +36,8 @@ export default function LanguagePage() {
       await updateUserProfile({ url, body: { [bodyKey]: item.value } })
       notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
 
-      setLocaleOnClient(item.value.toString() as Locale)
+      setLocaleOnClient(item.value.toString() as Locale, false)
+      router.refresh()
     }
     catch (e) {
       notify({ type: 'error', message: (e as Error).message })

web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx

@@ -14,7 +14,6 @@ import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import ProviderCard from '@/app/components/plugins/provider-card'
-import { getLocaleOnClient } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
@@ -32,7 +31,6 @@ const InstallFromMarketplace = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const [collapse, setCollapse] = useState(false)
-  const locale = getLocaleOnClient()
   const {
     plugins: allPlugins,
     isLoading: isAllPluginsLoading,
@@ -69,7 +67,6 @@ const InstallFromMarketplace = ({
             marketplaceCollectionPluginsMap={{}}
             plugins={allPlugins}
             showInstallButton
-            locale={locale}
             cardContainerClassName="grid grid-cols-2 gap-2"
             cardRender={cardRender}
             emptyClassName="h-auto"

web/app/components/i18n-server.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { getLocaleOnServer } from '@/i18n-config/server'
-import { ToastProvider } from './base/toast'
-import I18N from './i18n'
-
-export type II18NServerProps = {
-  children: React.ReactNode
-}
-
-const I18NServer = async ({
-  children,
-}: II18NServerProps) => {
-  const locale = await getLocaleOnServer()
-
-  return (
-    <I18N {...{ locale }}>
-      <ToastProvider>{children}</ToastProvider>
-    </I18N>
-  )
-}
-
-export default I18NServer

web/app/components/i18n.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-import type { FC } from 'react'
-import type { Locale } from '@/i18n-config'
-import { usePrefetchQuery } from '@tanstack/react-query'
-import { useHydrateAtoms } from 'jotai/utils'
-import * as React from 'react'
-import { useEffect, useState } from 'react'
-import { localeAtom } from '@/context/i18n'
-import { setLocaleOnClient } from '@/i18n-config'
-import { getSystemFeatures } from '@/service/common'
-import Loading from './base/loading'
-
-export type II18nProps = {
-  locale: Locale
-  children: React.ReactNode
-}
-const I18n: FC<II18nProps> = ({
-  locale,
-  children,
-}) => {
-  useHydrateAtoms([[localeAtom, locale]])
-  const [loading, setLoading] = useState(true)
-
-  usePrefetchQuery({
-    queryKey: ['systemFeatures'],
-    queryFn: getSystemFeatures,
-  })
-
-  useEffect(() => {
-    setLocaleOnClient(locale, false).then(() => {
-      setLoading(false)
-    })
-  }, [locale])
-
-  if (loading)
-    return <div className="flex h-screen w-screen items-center justify-center"><Loading type="app" /></div>
-
-  return (
-    <>
-      {children}
-    </>
-  )
-}
-export default React.memo(I18n)

web/app/components/plugins/base/deprecation-notice.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import { useTranslation } from '#i18n'
 import { RiAlertFill } from '@remixicon/react'
 import { camelCase } from 'es-toolkit/string'
 import Link from 'next/link'
@@ -6,14 +7,12 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { Trans } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { useMixedTranslation } from '../marketplace/hooks'
 
 type DeprecationNoticeProps = {
   status: 'deleted' | 'active'
   deprecatedReason: string
   alternativePluginId: string
   alternativePluginURL: string
-  locale?: string
   className?: string
   innerWrapperClassName?: string
   iconWrapperClassName?: string
@@ -34,13 +33,12 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
   deprecatedReason,
   alternativePluginId,
   alternativePluginURL,
-  locale,
   className,
   innerWrapperClassName,
   iconWrapperClassName,
   textClassName,
 }) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
 
   const deprecatedReasonKey = useMemo(() => {
     if (!deprecatedReason)

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

@@ -502,31 +502,6 @@ describe('Card', () => {
     })
   })
 
-  // ================================
-  // Locale Tests
-  // ================================
-  describe('Locale', () => {
-    it('should use locale from props when provided', () => {
-      const plugin = createMockPlugin({
-        label: { 'en-US': 'English Title', 'zh-Hans': '中文标题' },
-      })
-
-      render(<Card payload={plugin} locale="zh-Hans" />)
-
-      expect(screen.getByText('中文标题')).toBeInTheDocument()
-    })
-
-    it('should fallback to default locale when prop locale not found', () => {
-      const plugin = createMockPlugin({
-        label: { 'en-US': 'English Title' },
-      })
-
-      render(<Card payload={plugin} locale="fr-FR" />)
-
-      expect(screen.getByText('English Title')).toBeInTheDocument()
-    })
-  })
-
   // ================================
   // Memoization Tests
   // ================================

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

@@ -1,15 +1,13 @@
 'use client'
 import type { Plugin } from '../types'
-import type { Locale } from '@/i18n-config'
+import { useTranslation } from '#i18n'
 import { RiAlertFill } from '@remixicon/react'
 import * as React from 'react'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useGetLanguage } from '@/context/i18n'
 import useTheme from '@/hooks/use-theme'
 import {
   renderI18nObject,
 } from '@/i18n-config'
-import { getLanguage } from '@/i18n-config/language'
 import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import Partner from '../base/badges/partner'
@@ -33,7 +31,6 @@ export type Props = {
   footer?: React.ReactNode
   isLoading?: boolean
   loadingFileName?: string
-  locale?: Locale
   limitedInstall?: boolean
 }
 
@@ -48,13 +45,11 @@ const Card = ({
   footer,
   isLoading = false,
   loadingFileName,
-  locale: localeFromProps,
   limitedInstall = false,
 }: Props) => {
-  const defaultLocale = useGetLanguage()
+  const locale = useGetLanguage()
-  const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
+  const { t } = useTranslation()
-  const { t } = useMixedTranslation(localeFromProps)
+  const { categoriesMap } = useCategories(true)
-  const { categoriesMap } = useCategories(t, true)
   const { category, type, name, org, label, brief, icon, icon_dark, verified, badges = [] } = payload
   const { theme } = useTheme()
   const iconSrc = theme === Theme.dark && icon_dark ? icon_dark : icon

web/app/components/plugins/hooks.ts

@@ -1,4 +1,3 @@
-import type { TFunction } from 'i18next'
 import type { CategoryKey, TagKey } from './constants'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -13,9 +12,8 @@ export type Tag = {
   label: string
 }
 
-export const useTags = (translateFromOut?: TFunction) => {
+export const useTags = () => {
-  const { t: translation } = useTranslation()
+  const { t } = useTranslation()
-  const t = translateFromOut || translation
 
   const tags = useMemo(() => {
     return tagKeys.map((tag) => {
@@ -53,9 +51,8 @@ type Category = {
   label: string
 }
 
-export const useCategories = (translateFromOut?: TFunction, isSingle?: boolean) => {
+export const useCategories = (isSingle?: boolean) => {
-  const { t: translation } = useTranslation()
+  const { t } = useTranslation()
-  const t = translateFromOut || translation
 
   const categories = useMemo(() => {
     return categoryKeys.map((category) => {

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

@@ -7,9 +7,9 @@ import Line from './line'
 // Mock external dependencies only
 // ================================
 
-// Mock useMixedTranslation hook
+// Mock i18n translation hook
-vi.mock('../hooks', () => ({
+vi.mock('#i18n', () => ({
-  useMixedTranslation: (_locale?: string) => ({
+  useTranslation: () => ({
     t: (key: string, options?: { ns?: string }) => {
       // Build full key with namespace prefix if provided
       const fullKey = options?.ns ? `${options.ns}.${key}` : key
@@ -471,36 +471,6 @@ describe('Empty', () => {
     })
   })
 
-  // ================================
-  // Locale Prop Tests
-  // ================================
-  describe('Locale Prop', () => {
-    it('should pass locale to useMixedTranslation', () => {
-      render(<Empty locale="zh-CN" />)
-
-      // Translation should still work
-      expect(screen.getByText('No plugin found')).toBeInTheDocument()
-    })
-
-    it('should handle undefined locale', () => {
-      render(<Empty locale={undefined} />)
-
-      expect(screen.getByText('No plugin found')).toBeInTheDocument()
-    })
-
-    it('should handle en-US locale', () => {
-      render(<Empty locale="en-US" />)
-
-      expect(screen.getByText('No plugin found')).toBeInTheDocument()
-    })
-
-    it('should handle ja-JP locale', () => {
-      render(<Empty locale="ja-JP" />)
-
-      expect(screen.getByText('No plugin found')).toBeInTheDocument()
-    })
-  })
-
   // ================================
   // Placeholder Cards Layout Tests
   // ================================
@@ -634,7 +604,6 @@ describe('Empty', () => {
           text="Custom message"
           lightCard
           className="custom-wrapper"
-          locale="en-US"
         />,
       )
 
@@ -695,12 +664,6 @@ describe('Empty', () => {
       expect(container.querySelector('.only-class')).toBeInTheDocument()
     })
 
-    it('should render with only locale prop', () => {
-      render(<Empty locale="zh-CN" />)
-
-      expect(screen.getByText('No plugin found')).toBeInTheDocument()
-    })
-
     it('should handle text with unicode characters', () => {
       render(<Empty text="没有找到插件 🔍" />)
 
@@ -813,7 +776,7 @@ describe('Empty and Line Integration', () => {
   })
 
   it('should render complete Empty component structure', () => {
-    const { container } = render(<Empty text="Test" lightCard className="test" locale="en-US" />)
+    const { container } = render(<Empty text="Test" lightCard className="test" />)
 
     // Container
     expect(container.querySelector('.test')).toBeInTheDocument()

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

@@ -1,6 +1,6 @@
 'use client'
+import { useTranslation } from '#i18n'
 import { Group } from '@/app/components/base/icons/src/vender/other'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { cn } from '@/utils/classnames'
 import Line from './line'
 
@@ -8,16 +8,14 @@ type Props = {
   text?: string
   lightCard?: boolean
   className?: string
-  locale?: string
 }
 
 const Empty = ({
   text,
   lightCard,
   className,
-  locale,
 }: Props) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
 
   return (
     <div

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

@@ -18,8 +18,6 @@ import {
   useEffect,
   useState,
 } from 'react'
-import { useTranslation } from 'react-i18next'
-import i18n from '@/i18n-config/i18next-config'
 import { postMarketplace } from '@/service/base'
 import { SCROLL_BOTTOM_THRESHOLD } from './constants'
 import {
@@ -218,21 +216,6 @@ export const useMarketplacePlugins = () => {
   }
 }
 
-/**
- * ! Support zh-Hans, pt-BR, ja-JP and en-US for Marketplace page
- * ! For other languages, use en-US as fallback
- */
-export const useMixedTranslation = (localeFromOuter?: string) => {
-  let t = useTranslation().t
-
-  if (localeFromOuter)
-    t = i18n.getFixedT(localeFromOuter)
-
-  return {
-    t,
-  }
-}
-
 export const useMarketplaceContainerScroll = (
   callback: () => void,
   scrollContainerId = 'marketplace-container',

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

@@ -11,7 +11,6 @@ import { PluginCategoryEnum } from '@/app/components/plugins/types'
 // Note: Import after mocks are set up
 import { DEFAULT_SORT, SCROLL_BOTTOM_THRESHOLD } from './constants'
 import { MarketplaceContext, MarketplaceContextProvider, useMarketplaceContext } from './context'
-import { useMixedTranslation } from './hooks'
 import PluginTypeSwitch, { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
 import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
 import {
@@ -602,48 +601,6 @@ describe('utils', () => {
   })
 })
 
-// ================================
-// Hooks Tests
-// ================================
-describe('hooks', () => {
-  describe('useMixedTranslation', () => {
-    it('should return translation function', () => {
-      const { result } = renderHook(() => useMixedTranslation())
-
-      expect(result.current.t).toBeDefined()
-      expect(typeof result.current.t).toBe('function')
-    })
-
-    it('should return translation key when no translation found', () => {
-      const { result } = renderHook(() => useMixedTranslation())
-
-      // The global mock returns key with namespace prefix
-      expect(result.current.t('category.all', { ns: 'plugin' })).toBe('plugin.category.all')
-    })
-
-    it('should use locale from outer when provided', () => {
-      const { result } = renderHook(() => useMixedTranslation('zh-Hans'))
-
-      expect(result.current.t).toBeDefined()
-    })
-
-    it('should handle different locale values', () => {
-      const locales = ['en-US', 'zh-Hans', 'ja-JP', 'pt-BR']
-      locales.forEach((locale) => {
-        const { result } = renderHook(() => useMixedTranslation(locale))
-        expect(result.current.t).toBeDefined()
-        expect(typeof result.current.t).toBe('function')
-      })
-    })
-
-    it('should use getFixedT when localeFromOuter is provided', () => {
-      const { result } = renderHook(() => useMixedTranslation('fr-FR'))
-      // The global mock returns key with namespace prefix
-      expect(result.current.t('search', { ns: 'plugin' })).toBe('plugin.search')
-    })
-  })
-})
-
 // ================================
 // useMarketplaceCollectionsAndPlugins Tests
 // ================================
@@ -2088,17 +2045,6 @@ describe('StickySearchAndSwitchWrapper', () => {
   })
 
   describe('Props', () => {
-    it('should accept locale prop', () => {
-      render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper locale="zh-Hans" />
-        </MarketplaceContextProvider>,
-      )
-
-      // Component should render without errors
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
-    })
-
     it('should accept showSearchParams prop', () => {
       render(
         <MarketplaceContextProvider>

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

@@ -1,6 +1,5 @@
 import type { MarketplaceCollection, SearchParams } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n-config'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { MarketplaceContextProvider } from './context'
 import Description from './description'
@@ -9,7 +8,6 @@ import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
 import { getMarketplaceCollectionsAndPlugins } from './utils'
 
 type MarketplaceProps = {
-  locale: Locale
   showInstallButton?: boolean
   shouldExclude?: boolean
   searchParams?: SearchParams
@@ -18,7 +16,6 @@ type MarketplaceProps = {
   showSearchParams?: boolean
 }
 const Marketplace = async ({
-  locale,
   showInstallButton = true,
   shouldExclude,
   searchParams,
@@ -44,12 +41,10 @@ const Marketplace = async ({
       >
         <Description />
         <StickySearchAndSwitchWrapper
-          locale={locale}
           pluginTypeSwitchClassName={pluginTypeSwitchClassName}
           showSearchParams={showSearchParams}
         />
         <ListWrapper
-          locale={locale}
           marketplaceCollections={marketplaceCollections}
           marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
           showInstallButton={showInstallButton}

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

@@ -1,6 +1,6 @@
 'use client'
 import type { Plugin } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n-config'
+import { useLocale, useTranslation } from '#i18n'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
@@ -11,34 +11,30 @@ import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useTags } from '@/app/components/plugins/hooks'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
-import { useLocale } from '@/context/i18n'
 import { getPluginDetailLinkInMarketplace, getPluginLinkInMarketplace } from '../utils'
 
 type CardWrapperProps = {
   plugin: Plugin
   showInstallButton?: boolean
-  locale?: Locale
 }
 const CardWrapperComponent = ({
   plugin,
   showInstallButton,
-  locale,
 }: CardWrapperProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
   const { theme } = useTheme()
   const [isShowInstallFromMarketplace, {
     setTrue: showInstallFromMarketplace,
     setFalse: hideInstallFromMarketplace,
   }] = useBoolean(false)
-  const localeFromLocale = useLocale()
+  const locale = useLocale()
-  const { getTagLabel } = useTags(t)
+  const { getTagLabel } = useTags()
 
   // Memoize marketplace link params to prevent unnecessary re-renders
   const marketplaceLinkParams = useMemo(() => ({
-    language: localeFromLocale,
+    language: locale,
     theme,
-  }), [localeFromLocale, theme])
+  }), [locale, theme])
 
   // Memoize tag labels to prevent recreating array on every render
   const tagLabels = useMemo(() =>
@@ -52,7 +48,6 @@ const CardWrapperComponent = ({
         <Card
           key={plugin.name}
           payload={plugin}
-          locale={locale}
           footer={(
             <CardMoreInfo
               downloadCount={plugin.install_count}
@@ -99,7 +94,6 @@ const CardWrapperComponent = ({
       <Card
         key={plugin.name}
         payload={plugin}
-        locale={locale}
         footer={(
           <CardMoreInfo
             downloadCount={plugin.install_count}

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

@@ -1,6 +1,5 @@
 import type { MarketplaceCollection, SearchParamsFromCollection } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n-config'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
@@ -12,9 +11,9 @@ import ListWrapper from './list-wrapper'
 // Mock External Dependencies Only
 // ================================
 
-// Mock useMixedTranslation hook
+// Mock i18n translation hook
-vi.mock('../hooks', () => ({
+vi.mock('#i18n', () => ({
-  useMixedTranslation: (_locale?: string) => ({
+  useTranslation: () => ({
     t: (key: string, options?: { ns?: string, num?: number }) => {
       // Build full key with namespace prefix if provided
       const fullKey = options?.ns ? `${options.ns}.${key}` : key
@@ -28,6 +27,7 @@ vi.mock('../hooks', () => ({
       return translations[fullKey] || key
     },
   }),
+  useLocale: () => 'en-US',
 }))
 
 // Mock useMarketplaceContext with controllable values
@@ -148,15 +148,15 @@ vi.mock('@/app/components/plugins/install-plugin/install-from-marketplace', () =
 
 // Mock SortDropdown component
 vi.mock('../sort-dropdown', () => ({
-  default: ({ locale }: { locale: Locale }) => (
+  default: () => (
-    <div data-testid="sort-dropdown" data-locale={locale}>Sort</div>
+    <div data-testid="sort-dropdown">Sort</div>
   ),
 }))
 
 // Mock Empty component
 vi.mock('../empty', () => ({
-  default: ({ className, locale }: { className?: string, locale?: string }) => (
+  default: ({ className }: { className?: string }) => (
-    <div data-testid="empty-component" className={className} data-locale={locale}>
+    <div data-testid="empty-component" className={className}>
       No plugins found
     </div>
   ),
@@ -233,7 +233,6 @@ describe('List', () => {
     marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
     plugins: undefined,
     showInstallButton: false,
-    locale: 'en-US' as Locale,
     cardContainerClassName: '',
     cardRender: undefined,
     onMoreClick: undefined,
@@ -351,18 +350,6 @@ describe('List', () => {
       expect(screen.getByTestId('empty-component')).toHaveClass('custom-empty-class')
     })
 
-    it('should pass locale to Empty component', () => {
-      render(
-        <List
-          {...defaultProps}
-          plugins={[]}
-          locale={'zh-CN' as Locale}
-        />,
-      )
-
-      expect(screen.getByTestId('empty-component')).toHaveAttribute('data-locale', 'zh-CN')
-    })
-
     it('should pass showInstallButton to CardWrapper', () => {
       const plugins = createMockPluginList(1)
 
@@ -508,7 +495,6 @@ describe('ListWithCollection', () => {
     marketplaceCollections: [] as MarketplaceCollection[],
     marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
     showInstallButton: false,
-    locale: 'en-US' as Locale,
     cardContainerClassName: '',
     cardRender: undefined,
     onMoreClick: undefined,
@@ -820,7 +806,6 @@ describe('ListWrapper', () => {
     marketplaceCollections: [] as MarketplaceCollection[],
     marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
     showInstallButton: false,
-    locale: 'en-US' as Locale,
   }
 
   beforeEach(() => {
@@ -901,14 +886,6 @@ describe('ListWrapper', () => {
 
       expect(screen.queryByTestId('sort-dropdown')).not.toBeInTheDocument()
     })
-
-    it('should pass locale to SortDropdown', () => {
-      mockContextValues.plugins = createMockPluginList(1)
-
-      render(<ListWrapper {...defaultProps} locale={'zh-CN' as Locale} />)
-
-      expect(screen.getByTestId('sort-dropdown')).toHaveAttribute('data-locale', 'zh-CN')
-    })
   })
 
   // ================================
@@ -1169,7 +1146,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1188,7 +1164,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1209,7 +1184,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={plugins}
-          locale="en-US"
         />,
       )
 
@@ -1231,7 +1205,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1252,7 +1225,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1274,7 +1246,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1293,7 +1264,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1310,7 +1280,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1327,7 +1296,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={true}
-          locale="en-US"
         />,
       )
 
@@ -1354,7 +1322,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={false}
-          locale="en-US"
         />,
       )
 
@@ -1375,7 +1342,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
           showInstallButton={false}
-          locale="en-US"
         />,
       )
 
@@ -1390,7 +1356,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1414,7 +1379,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1432,7 +1396,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1450,7 +1413,6 @@ describe('CardWrapper (via List integration)', () => {
           marketplaceCollections={[]}
           marketplaceCollectionPluginsMap={{}}
           plugins={[plugin]}
-          locale="en-US"
         />,
       )
 
@@ -1482,7 +1444,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1501,7 +1462,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1521,7 +1481,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1535,7 +1494,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1551,7 +1509,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1569,7 +1526,6 @@ describe('Combined Workflows', () => {
       <ListWrapper
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
-        locale="en-US"
       />,
     )
 
@@ -1601,7 +1557,6 @@ describe('Accessibility', () => {
       <ListWithCollection
         marketplaceCollections={collections}
         marketplaceCollectionPluginsMap={pluginsMap}
-        locale="en-US"
       />,
     )
 
@@ -1625,7 +1580,6 @@ describe('Accessibility', () => {
         marketplaceCollections={collections}
         marketplaceCollectionPluginsMap={pluginsMap}
         onMoreClick={onMoreClick}
-        locale="en-US"
       />,
     )
 
@@ -1642,7 +1596,6 @@ describe('Accessibility', () => {
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
         plugins={plugins}
-        locale="en-US"
       />,
     )
 
@@ -1668,7 +1621,6 @@ describe('Performance', () => {
         marketplaceCollections={[]}
         marketplaceCollectionPluginsMap={{}}
         plugins={plugins}
-        locale="en-US"
       />,
     )
     const endTime = performance.now()
@@ -1689,7 +1641,6 @@ describe('Performance', () => {
       <ListWithCollection
         marketplaceCollections={collections}
         marketplaceCollectionPluginsMap={pluginsMap}
-        locale="en-US"
       />,
     )
     const endTime = performance.now()

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

@@ -1,7 +1,6 @@
 'use client'
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
-import type { Locale } from '@/i18n-config'
 import { cn } from '@/utils/classnames'
 import Empty from '../empty'
 import CardWrapper from './card-wrapper'
@@ -12,7 +11,6 @@ type ListProps = {
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   plugins?: Plugin[]
   showInstallButton?: boolean
-  locale: Locale
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: () => void
@@ -23,7 +21,6 @@ const List = ({
   marketplaceCollectionPluginsMap,
   plugins,
   showInstallButton,
-  locale,
   cardContainerClassName,
   cardRender,
   onMoreClick,
@@ -37,7 +34,6 @@ const List = ({
             marketplaceCollections={marketplaceCollections}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
             showInstallButton={showInstallButton}
-            locale={locale}
             cardContainerClassName={cardContainerClassName}
             cardRender={cardRender}
             onMoreClick={onMoreClick}
@@ -61,7 +57,6 @@ const List = ({
                     key={`${plugin.org}/${plugin.name}`}
                     plugin={plugin}
                     showInstallButton={showInstallButton}
-                    locale={locale}
                   />
                 )
               })
@@ -71,7 +66,7 @@ const List = ({
       }
       {
         plugins && !plugins.length && (
-          <Empty className={emptyClassName} locale={locale} />
+          <Empty className={emptyClassName} />
         )
       }
     </>

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

@@ -3,9 +3,8 @@
 import type { MarketplaceCollection } from '../types'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import type { Plugin } from '@/app/components/plugins/types'
-import type { Locale } from '@/i18n-config'
+import { useLocale, useTranslation } from '#i18n'
 import { RiArrowRightSLine } from '@remixicon/react'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { getLanguage } from '@/i18n-config/language'
 import { cn } from '@/utils/classnames'
 import CardWrapper from './card-wrapper'
@@ -14,7 +13,6 @@ type ListWithCollectionProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale: Locale
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
   onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
@@ -23,12 +21,12 @@ const ListWithCollection = ({
   marketplaceCollections,
   marketplaceCollectionPluginsMap,
   showInstallButton,
-  locale,
   cardContainerClassName,
   cardRender,
   onMoreClick,
 }: ListWithCollectionProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
+  const locale = useLocale()
 
   return (
     <>
@@ -72,7 +70,6 @@ const ListWithCollection = ({
                       key={plugin.plugin_id}
                       plugin={plugin}
                       showInstallButton={showInstallButton}
-                      locale={locale}
                     />
                   )
                 })

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

@@ -1,10 +1,9 @@
 'use client'
 import type { Plugin } from '../../types'
 import type { MarketplaceCollection } from '../types'
-import type { Locale } from '@/i18n-config'
+import { useTranslation } from '#i18n'
 import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useMarketplaceContext } from '../context'
 import SortDropdown from '../sort-dropdown'
 import List from './index'
@@ -13,15 +12,13 @@ type ListWrapperProps = {
   marketplaceCollections: MarketplaceCollection[]
   marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
-  locale: Locale
 }
 const ListWrapper = ({
   marketplaceCollections,
   marketplaceCollectionPluginsMap,
   showInstallButton,
-  locale,
 }: ListWrapperProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
   const plugins = useMarketplaceContext(v => v.plugins)
   const pluginsTotal = useMarketplaceContext(v => v.pluginsTotal)
   const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient)
@@ -55,7 +52,7 @@ const ListWrapper = ({
           <div className="mb-4 flex items-center pt-3">
             <div className="title-xl-semi-bold text-text-primary">{t('marketplace.pluginsResult', { ns: 'plugin', num: pluginsTotal })}</div>
             <div className="mx-3 h-3.5 w-[1px] bg-divider-regular"></div>
-            <SortDropdown locale={locale} />
+            <SortDropdown />
           </div>
         )
       }
@@ -73,7 +70,6 @@ const ListWrapper = ({
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
             plugins={plugins}
             showInstallButton={showInstallButton}
-            locale={locale}
             onMoreClick={handleMoreClick}
           />
         )

web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useTranslation } from '#i18n'
 import {
   RiArchive2Line,
   RiBrain2Line,
@@ -12,7 +13,6 @@ import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/p
 import { cn } from '@/utils/classnames'
 import { PluginCategoryEnum } from '../types'
 import { useMarketplaceContext } from './context'
-import { useMixedTranslation } from './hooks'
 
 export const PLUGIN_TYPE_SEARCH_MAP = {
   all: 'all',
@@ -25,16 +25,14 @@ export const PLUGIN_TYPE_SEARCH_MAP = {
   bundle: 'bundle',
 }
 type PluginTypeSwitchProps = {
-  locale?: string
   className?: string
   showSearchParams?: boolean
 }
 const PluginTypeSwitch = ({
-  locale,
   className,
   showSearchParams,
 }: PluginTypeSwitchProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
   const activePluginType = useMarketplaceContext(s => s.activePluginType)
   const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange)
 

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

@@ -10,9 +10,9 @@ import ToolSelectorTrigger from './trigger/tool-selector'
 // Mock external dependencies only
 // ================================
 
-// Mock useMixedTranslation hook
+// Mock i18n translation hook
-vi.mock('../hooks', () => ({
+vi.mock('#i18n', () => ({
-  useMixedTranslation: (_locale?: string) => ({
+  useTranslation: () => ({
     t: (key: string, options?: { ns?: string }) => {
       // Build full key with namespace prefix if provided
       const fullKey = options?.ns ? `${options.ns}.${key}` : key
@@ -364,13 +364,6 @@ describe('SearchBox', () => {
       expect(container.querySelector('.custom-input-class')).toBeInTheDocument()
     })
 
-    it('should pass locale to TagsFilter', () => {
-      render(<SearchBox {...defaultProps} locale="zh-CN" />)
-
-      // TagsFilter should be rendered with locale
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
-    })
-
     it('should handle empty placeholder', () => {
       render(<SearchBox {...defaultProps} placeholder="" />)
 
@@ -449,12 +442,6 @@ describe('SearchBoxWrapper', () => {
       expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
 
-    it('should render with locale prop', () => {
-      render(<SearchBoxWrapper locale="en-US" />)
-
-      expect(screen.getByRole('textbox')).toBeInTheDocument()
-    })
-
     it('should render in marketplace mode', () => {
       const { container } = render(<SearchBoxWrapper />)
 
@@ -500,13 +487,6 @@ describe('SearchBoxWrapper', () => {
 
       expect(screen.getByPlaceholderText('Search plugins')).toBeInTheDocument()
     })
-
-    it('should pass locale to useMixedTranslation', () => {
-      render(<SearchBoxWrapper locale="zh-CN" />)
-
-      // Translation should still work
-      expect(screen.getByPlaceholderText('Search plugins')).toBeInTheDocument()
-    })
   })
 })
 
@@ -665,12 +645,6 @@ describe('MarketplaceTrigger', () => {
   })
 
   describe('Props Variations', () => {
-    it('should handle locale prop', () => {
-      render(<MarketplaceTrigger {...defaultProps} locale="zh-CN" />)
-
-      expect(screen.getByText('All Tags')).toBeInTheDocument()
-    })
-
     it('should handle empty tagsMap', () => {
       const { container } = render(
         <MarketplaceTrigger {...defaultProps} tagsMap={{}} tags={[]} />,
@@ -1251,7 +1225,6 @@ describe('Combined Workflows', () => {
         supportAddCustomTool
         onShowAddCustomCollectionModal={vi.fn()}
         placeholder="Search plugins"
-        locale="en-US"
         wrapperClassName="custom-wrapper"
         inputClassName="custom-input"
         autoFocus={false}

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

@@ -13,7 +13,6 @@ type SearchBoxProps = {
   tags: string[]
   onTagsChange: (tags: string[]) => void
   placeholder?: string
-  locale?: string
   supportAddCustomTool?: boolean
   usedInMarketplace?: boolean
   onShowAddCustomCollectionModal?: () => void
@@ -28,7 +27,6 @@ const SearchBox = ({
   tags,
   onTagsChange,
   placeholder = '',
-  locale,
   usedInMarketplace = false,
   supportAddCustomTool,
   onShowAddCustomCollectionModal,
@@ -49,7 +47,6 @@ const SearchBox = ({
                 tags={tags}
                 onTagsChange={onTagsChange}
                 usedInMarketplace
-                locale={locale}
               />
               <Divider type="vertical" className="mx-1 h-3.5" />
               <div className="flex grow items-center gap-x-2 p-1">
@@ -109,7 +106,6 @@ const SearchBox = ({
               <TagsFilter
                 tags={tags}
                 onTagsChange={onTagsChange}
-                locale={locale}
               />
             </>
           )

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

@@ -1,16 +1,11 @@
 'use client'
 
+import { useTranslation } from '#i18n'
 import { useMarketplaceContext } from '../context'
-import { useMixedTranslation } from '../hooks'
 import SearchBox from './index'
 
-type SearchBoxWrapperProps = {
+const SearchBoxWrapper = () => {
-  locale?: string
+  const { t } = useTranslation()
-}
-const SearchBoxWrapper = ({
-  locale,
-}: SearchBoxWrapperProps) => {
-  const { t } = useMixedTranslation(locale)
   const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
   const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
   const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
@@ -24,7 +19,6 @@ const SearchBoxWrapper = ({
       onSearchChange={handleSearchPluginTextChange}
       tags={filterPluginTags}
       onTagsChange={handleFilterPluginTagsChange}
-      locale={locale}
       placeholder={t('searchPlugins', { ns: 'plugin' })}
       usedInMarketplace
     />

web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useTranslation } from '#i18n'
 import { useState } from 'react'
 import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
@@ -9,7 +10,6 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useTags } from '@/app/components/plugins/hooks'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import MarketplaceTrigger from './trigger/marketplace'
 import ToolSelectorTrigger from './trigger/tool-selector'
 
@@ -17,18 +17,16 @@ type TagsFilterProps = {
   tags: string[]
   onTagsChange: (tags: string[]) => void
   usedInMarketplace?: boolean
-  locale?: string
 }
 const TagsFilter = ({
   tags,
   onTagsChange,
   usedInMarketplace = false,
-  locale,
 }: TagsFilterProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [searchText, setSearchText] = useState('')
-  const { tags: options, tagsMap } = useTags(t)
+  const { tags: options, tagsMap } = useTags()
   const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchText.toLowerCase()))
   const handleCheck = (id: string) => {
     if (tags.includes(id))
@@ -59,7 +57,6 @@ const TagsFilter = ({
               open={open}
               tags={tags}
               tagsMap={tagsMap}
-              locale={locale}
               onTagsChange={onTagsChange}
             />
           )

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

@@ -1,15 +1,14 @@
 import type { Tag } from '../../../hooks'
+import { useTranslation } from '#i18n'
 import { RiArrowDownSLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import { useMixedTranslation } from '../../hooks'
 
 type MarketplaceTriggerProps = {
   selectedTagsLength: number
   open: boolean
   tags: string[]
   tagsMap: Record<string, Tag>
-  locale?: string
   onTagsChange: (tags: string[]) => void
 }
 
@@ -18,10 +17,9 @@ const MarketplaceTrigger = ({
   open,
   tags,
   tagsMap,
-  locale,
   onTagsChange,
 }: MarketplaceTriggerProps) => {
-  const { t } = useMixedTranslation(locale)
+  const { t } = useTranslation()
 
   return (
     <div

web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx

@@ -8,7 +8,7 @@ import SortDropdown from './index'
 // Mock external dependencies only
 // ================================
 
-// Mock useMixedTranslation hook
+// Mock i18n translation hook
 const mockTranslation = vi.fn((key: string, options?: { ns?: string }) => {
   // Build full key with namespace prefix if provided
   const fullKey = options?.ns ? `${options.ns}.${key}` : key
@@ -22,8 +22,8 @@ const mockTranslation = vi.fn((key: string, options?: { ns?: string }) => {
   return translations[fullKey] || key
 })
 
-vi.mock('../hooks', () => ({
+vi.mock('#i18n', () => ({
-  useMixedTranslation: (_locale?: string) => ({
+  useTranslation: () => ({
     t: mockTranslation,
   }),
 }))
@@ -145,36 +145,6 @@ describe('SortDropdown', () => {
     })
   })
 
-  // ================================
-  // Props Testing
-  // ================================
-  describe('Props', () => {
-    it('should accept locale prop', () => {
-      render(<SortDropdown locale="zh-CN" />)
-
-      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
-    })
-
-    it('should call useMixedTranslation with provided locale', () => {
-      render(<SortDropdown locale="ja-JP" />)
-
-      // Translation function should be called for labels
-      expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortBy', { ns: 'plugin' })
-    })
-
-    it('should render without locale prop (undefined)', () => {
-      render(<SortDropdown />)
-
-      expect(screen.getByText('Sort by')).toBeInTheDocument()
-    })
-
-    it('should render with empty string locale', () => {
-      render(<SortDropdown locale="" />)
-
-      expect(screen.getByText('Sort by')).toBeInTheDocument()
-    })
-  })
-
   // ================================
   // State Management Tests
   // ================================
@@ -618,13 +588,6 @@ describe('SortDropdown', () => {
       expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.newlyReleased', { ns: 'plugin' })
       expect(mockTranslation).toHaveBeenCalledWith('marketplace.sortOption.firstReleased', { ns: 'plugin' })
     })
-
-    it('should pass locale to useMixedTranslation', () => {
-      render(<SortDropdown locale="pt-BR" />)
-
-      // Verify component renders with locale
-      expect(screen.getByTestId('portal-wrapper')).toBeInTheDocument()
-    })
   })
 
   // ================================

web/app/components/plugins/marketplace/sort-dropdown/index.tsx

@@ -1,4 +1,5 @@
 'use client'
+import { useTranslation } from '#i18n'
 import {
   RiArrowDownSLine,
   RiCheckLine,
@@ -9,16 +10,10 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useMarketplaceContext } from '../context'
 
-type SortDropdownProps = {
+const SortDropdown = () => {
-  locale?: string
+  const { t } = useTranslation()
-}
-const SortDropdown = ({
-  locale,
-}: SortDropdownProps) => {
-  const { t } = useMixedTranslation(locale)
   const options = [
     {
       value: 'install_count',

web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx

@@ -5,13 +5,11 @@ import PluginTypeSwitch from './plugin-type-switch'
 import SearchBoxWrapper from './search-box/search-box-wrapper'
 
 type StickySearchAndSwitchWrapperProps = {
-  locale?: string
   pluginTypeSwitchClassName?: string
   showSearchParams?: boolean
 }
 
 const StickySearchAndSwitchWrapper = ({
-  locale,
   pluginTypeSwitchClassName,
   showSearchParams,
 }: StickySearchAndSwitchWrapperProps) => {
@@ -25,9 +23,8 @@ const StickySearchAndSwitchWrapper = ({
         pluginTypeSwitchClassName,
       )}
     >
-      <SearchBoxWrapper locale={locale} />
+      <SearchBoxWrapper />
       <PluginTypeSwitch
-        locale={locale}
         showSearchParams={showSearchParams}
       />
     </div>

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

@@ -44,7 +44,7 @@ const PluginItem: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { theme } = useTheme()
-  const { categoriesMap } = useCategories(t, true)
+  const { categoriesMap } = useCategories(true)
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
   const { refreshPluginList } = useRefreshPluginList()

web/app/components/provider/i18n-server.tsx

@@ -0,0 +1,21 @@
+import { getLocaleOnServer, getResources } from '@/i18n-config/server'
+
+import { I18nClientProvider } from './i18n'
+
+export async function I18nServerProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const locale = await getLocaleOnServer()
+  const resource = await getResources(locale)
+
+  return (
+    <I18nClientProvider
+      locale={locale}
+      resource={resource}
+    >
+      {children}
+    </I18nClientProvider>
+  )
+}

web/app/components/provider/i18n.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import type { Resource } from 'i18next'
+import type { Locale } from '@/i18n-config'
+import { I18nextProvider } from 'react-i18next'
+import { createI18nextInstance } from '@/i18n-config/client'
+
+export function I18nClientProvider({
+  locale,
+  resource,
+  children,
+}: {
+  locale: Locale
+  resource: Resource
+  children: React.ReactNode
+}) {
+  const i18n = createI18nextInstance(locale, resource)
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      {children}
+    </I18nextProvider>
+  )
+}

web/app/components/share/text-generation/index.tsx

@@ -32,7 +32,7 @@ import { useWebAppStore } from '@/context/web-app-context'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import { AccessMode } from '@/models/access-control'
 import { fetchSavedMessage as doFetchSavedMessage, removeMessage, saveMessage } from '@/service/share'
 import { Resolution, TransferMethod } from '@/types/app'

web/app/components/tools/marketplace/index.spec.tsx

@@ -19,7 +19,6 @@ vi.mock('@/app/components/plugins/marketplace/list', () => ({
     marketplaceCollectionPluginsMap: Record<string, unknown[]>
     plugins?: unknown[]
     showInstallButton?: boolean
-    locale: string
   }) => {
     listRenderSpy(props)
     return <div data-testid="marketplace-list" />
@@ -42,10 +41,6 @@ vi.mock('@/utils/var', () => ({
   getMarketplaceUrl: vi.fn(() => 'https://marketplace.test/market'),
 }))
 
-vi.mock('@/i18n-config', () => ({
-  getLocaleOnClient: () => 'en',
-}))
-
 vi.mock('next-themes', () => ({
   useTheme: () => ({ theme: 'light' }),
 }))
@@ -148,7 +143,6 @@ describe('Marketplace', () => {
       expect(screen.getByTestId('marketplace-list')).toBeInTheDocument()
       expect(listRenderSpy).toHaveBeenCalledWith(expect.objectContaining({
         showInstallButton: true,
-        locale: 'en',
       }))
     })
   })

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

@@ -1,4 +1,5 @@
 import type { useMarketplace } from './hooks'
+import { useLocale } from '#i18n'
 import {
   RiArrowRightUpLine,
   RiArrowUpDoubleLine,
@@ -7,7 +8,6 @@ import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
-import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
 type MarketplaceProps = {
@@ -24,7 +24,7 @@ const Marketplace = ({
   showMarketplacePanel,
   marketplaceContext,
 }: MarketplaceProps) => {
-  const locale = getLocaleOnClient()
+  const locale = useLocale()
   const { t } = useTranslation()
   const { theme } = useTheme()
   const {
@@ -104,7 +104,6 @@ const Marketplace = ({
               marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
               plugins={plugins}
               showInstallButton
-              locale={locale}
             />
           )
         }

web/app/layout.tsx

@@ -8,9 +8,10 @@ import { TanstackQueryInitializer } from '@/context/query-client'
 import { getLocaleOnServer } from '@/i18n-config/server'
 import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
+import { ToastProvider } from './components/base/toast'
 import BrowserInitializer from './components/browser-initializer'
 import { ReactScanLoader } from './components/devtools/react-scan/loader'
-import I18nServer from './components/i18n-server'
+import { I18nServerProvider } from './components/provider/i18n-server'
 import SentryInitializer from './components/sentry-initializer'
 import RoutePrefixHandle from './routePrefixHandle'
 import './styles/globals.css'
@@ -104,11 +105,13 @@ const LocaleLayout = async ({
               <BrowserInitializer>
                 <SentryInitializer>
                   <TanstackQueryInitializer>
-                    <I18nServer>
+                    <I18nServerProvider>
-                      <GlobalPublicStoreProvider>
+                      <ToastProvider>
-                        {children}
+                        <GlobalPublicStoreProvider>
-                      </GlobalPublicStoreProvider>
+                          {children}
-                    </I18nServer>
+                        </GlobalPublicStoreProvider>
+                      </ToastProvider>
+                    </I18nServerProvider>
                   </TanstackQueryInitializer>
                 </SentryInitializer>
               </BrowserInitializer>

web/context/i18n.ts

@@ -1,10 +1,10 @@
 import type { Locale } from '@/i18n-config/language'
-import { atom, useAtomValue } from 'jotai'
+import { useTranslation } from '#i18n'
 import { getDocLanguage, getLanguage, getPricingPageLanguage } from '@/i18n-config/language'
 
-export const localeAtom = atom<Locale>('en-US')
 export const useLocale = () => {
-  return useAtomValue(localeAtom)
+  const { i18n } = useTranslation()
+  return i18n.language as Locale
 }
 
 export const useGetLanguage = () => {

web/i18n-config/client.ts

@@ -0,0 +1,35 @@
+'use client'
+import type { Resource } from 'i18next'
+import type { Locale } from '.'
+import type { NamespaceCamelCase, NamespaceKebabCase } from './resources'
+import { kebabCase } from 'es-toolkit/string'
+import { createInstance } from 'i18next'
+import resourcesToBackend from 'i18next-resources-to-backend'
+import { getI18n, initReactI18next } from 'react-i18next'
+import { getInitOptions } from './settings'
+
+export function createI18nextInstance(lng: Locale, resources: Resource) {
+  const instance = createInstance()
+  instance
+    .use(initReactI18next)
+    .use(resourcesToBackend((
+      language: Locale,
+      namespace: NamespaceKebabCase | NamespaceCamelCase,
+    ) => {
+      const namespaceKebab = kebabCase(namespace)
+      return import(`../i18n/${language}/${namespaceKebab}.json`)
+    }))
+    .init({
+      ...getInitOptions(),
+      lng,
+      resources,
+    })
+  return instance
+}
+
+export const changeLanguage = async (lng?: Locale) => {
+  if (!lng)
+    return
+  const i18n = getI18n()
+  await i18n.changeLanguage(lng)
+}

web/i18n-config/index.ts

@@ -2,7 +2,7 @@ import type { Locale } from '@/i18n-config/language'
 
 import Cookies from 'js-cookie'
 import { LOCALE_COOKIE_NAME } from '@/config'
-import { changeLanguage } from '@/i18n-config/i18next-config'
+import { changeLanguage } from '@/i18n-config/client'
 import { LanguagesSupported } from '@/i18n-config/language'
 
 export const i18n = {
@@ -19,10 +19,6 @@ export const setLocaleOnClient = async (locale: Locale, reloadPage = true) => {
     location.reload()
 }
 
-export const getLocaleOnClient = (): Locale => {
-  return Cookies.get(LOCALE_COOKIE_NAME) as Locale || i18n.defaultLocale
-}
-
 export const renderI18nObject = (obj: Record<string, string>, language: string) => {
   if (!obj)
     return ''

web/i18n-config/lib.client.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import type { NamespaceCamelCase } from './i18next-config'
+import type { NamespaceCamelCase } from './resources'
 import { useTranslation as useTranslationOriginal } from 'react-i18next'
 
 export function useTranslation(ns?: NamespaceCamelCase) {

web/i18n-config/lib.server.ts

@@ -1,4 +1,4 @@
-import type { NamespaceCamelCase } from './i18next-config'
+import type { NamespaceCamelCase } from './resources'
 import { use } from 'react'
 import { getLocaleOnServer, getTranslation } from './server'
 

web/i18n-config/resources.ts

@@ -1,8 +1,4 @@
-'use client'
+import { kebabCase } from 'es-toolkit/string'
-import type { Locale } from '.'
-import { camelCase, kebabCase } from 'es-toolkit/string'
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
 import appAnnotation from '../i18n/en-US/app-annotation.json'
 import appApi from '../i18n/en-US/app-api.json'
 import appDebug from '../i18n/en-US/app-debug.json'
@@ -35,7 +31,7 @@ import tools from '../i18n/en-US/tools.json'
 import workflow from '../i18n/en-US/workflow.json'
 
 // @keep-sorted
-export const resources = {
+const resources = {
   app,
   appAnnotation,
   appApi,
@@ -82,60 +78,5 @@ export type Resources = typeof resources
 export type NamespaceCamelCase = keyof Resources
 export type NamespaceKebabCase = KebabCase<NamespaceCamelCase>
 
-const requireSilent = async (lang: Locale, namespace: NamespaceKebabCase) => {
+export const namespacesCamelCase = Object.keys(resources) as NamespaceCamelCase[]
-  let res
+export const namespacesKebabCase = namespacesCamelCase.map(ns => kebabCase(ns)) as NamespaceKebabCase[]
-  try {
-    res = (await import(`../i18n/${lang}/${namespace}.json`)).default
-  }
-  catch {
-    res = (await import(`../i18n/en-US/${namespace}.json`)).default
-  }
-
-  return res
-}
-
-const NAMESPACES = Object.keys(resources).map(kebabCase) as NamespaceKebabCase[]
-
-// Load a single namespace for a language
-export const loadNamespace = async (lang: Locale, ns: NamespaceKebabCase) => {
-  const camelNs = camelCase(ns) as NamespaceCamelCase
-  if (i18n.hasResourceBundle(lang, camelNs))
-    return
-
-  const resource = await requireSilent(lang, ns)
-  i18n.addResourceBundle(lang, camelNs, resource, true, true)
-}
-
-// Load all namespaces for a language (used when switching language)
-export const loadLangResources = async (lang: Locale) => {
-  await Promise.all(
-    NAMESPACES.map(ns => loadNamespace(lang, ns)),
-  )
-}
-
-// Initial resources: load en-US namespaces for fallback/default locale
-const getInitialTranslations = () => {
-  return {
-    'en-US': resources,
-  }
-}
-
-if (!i18n.isInitialized) {
-  i18n.use(initReactI18next).init({
-    lng: undefined,
-    fallbackLng: 'en-US',
-    resources: getInitialTranslations(),
-    defaultNS: 'common',
-    ns: Object.keys(resources),
-    keySeparator: false,
-  })
-}
-
-export const changeLanguage = async (lng?: Locale) => {
-  if (!lng)
-    return
-  await loadLangResources(lng)
-  await i18n.changeLanguage(lng)
-}
-
-export default i18n

web/i18n-config/server.ts

@@ -1,15 +1,19 @@
-import type { i18n as I18nInstance } from 'i18next'
+import type { i18n as I18nInstance, Resource, ResourceLanguage } from 'i18next'
 import type { Locale } from '.'
-import type { NamespaceCamelCase, NamespaceKebabCase } from './i18next-config'
+import type { NamespaceCamelCase, NamespaceKebabCase } from './resources'
 import { match } from '@formatjs/intl-localematcher'
 import { kebabCase } from 'es-toolkit/compat'
+import { camelCase } from 'es-toolkit/string'
 import { createInstance } from 'i18next'
 import resourcesToBackend from 'i18next-resources-to-backend'
 import Negotiator from 'negotiator'
 import { cookies, headers } from 'next/headers'
+import { cache } from 'react'
 import { initReactI18next } from 'react-i18next/initReactI18next'
 import { serverOnlyContext } from '@/utils/server-only-context'
 import { i18n } from '.'
+import { namespacesKebabCase } from './resources'
+import { getInitOptions } from './settings'
 
 const [getLocaleCache, setLocaleCache] = serverOnlyContext<Locale | null>(null)
 const [getI18nInstance, setI18nInstance] = serverOnlyContext<I18nInstance | null>(null)
@@ -27,9 +31,8 @@ const getOrCreateI18next = async (lng: Locale) => {
       return import(`../i18n/${language}/${fileNamespace}.json`)
     }))
     .init({
+      ...getInitOptions(),
       lng,
-      fallbackLng: 'en-US',
-      keySeparator: false,
     })
   setI18nInstance(instance)
   return instance
@@ -76,3 +79,16 @@ export const getLocaleOnServer = async (): Promise<Locale> => {
   setLocaleCache(matchedLocale)
   return matchedLocale
 }
+
+export const getResources = cache(async (lng: Locale): Promise<Resource> => {
+  const messages = {} as ResourceLanguage
+
+  await Promise.all(
+    (namespacesKebabCase).map(async (ns) => {
+      const mod = await import(`../i18n/${lng}/${ns}.json`)
+      messages[camelCase(ns)] = mod.default
+    }),
+  )
+
+  return { [lng]: messages }
+})

web/i18n-config/settings.ts

@@ -0,0 +1,13 @@
+import type { InitOptions } from 'i18next'
+import { namespacesCamelCase } from './resources'
+
+export function getInitOptions(): InitOptions {
+  return {
+    // We do not have en for fallback
+    load: 'currentOnly',
+    fallbackLng: 'en-US',
+    partialBundledLanguages: true,
+    keySeparator: false,
+    ns: namespacesCamelCase,
+  }
+}

web/types/i18n.d.ts

@@ -1,4 +1,4 @@
-import type { NamespaceCamelCase, Resources } from '../i18n-config/i18next-config'
+import type { NamespaceCamelCase, Resources } from '../i18n-config/resources'
 import 'i18next'
 
 declare module 'i18next' {