refactor: chagne card to client component

2025-07-08 02:01:46 +08:00 · 2024-10-17 15:06:06 +08:00 · 2024-10-17 15:06:06 +08:00 · cac04c5f3c
commit cac04c5f3c
parent 18f5f9cc37
12 changed files with 26 additions and 124 deletions
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@ -1,18 +1,16 @@
 import { handleDelete } from './actions'
-import TestClientPlugin from './test-client-plugin'
 import Card from '@/app/components/plugins/card'
 import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
+import { getLocaleOnServer } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'

 const PluginList = async () => {
  const locale = getLocaleOnServer()
  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
-  const { t: pluginI8n } = await translate(locale, 'plugin')

  return (
    <div className='pb-3 bg-white'>
@ -24,19 +22,14 @@ const PluginList = async () => {
              key={index}
              payload={plugin as any}
              onDelete={handleDelete}
-              pluginI8n={pluginI8n}
-              locale={locale}
            />
          ))}
        </div>
-        <h2>Client plugin item</h2>
-        <TestClientPlugin />

        <h2 className='my-3'>Install Plugin / Package under bundle</h2>
        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
          <Card
            payload={toolNotion as any}
-            locale={locale}
            descriptionLineRows={1}
            titleLeft={
              <Badge className='ml-1' text={toolNotion.version} />
@ -47,7 +40,6 @@ const PluginList = async () => {
        <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
          <Card
            payload={toolNotion as any}
-            locale={locale}
            descriptionLineRows={1}
            installed
          />
@ -56,7 +48,7 @@ const PluginList = async () => {
        <h3 className='my-1'>Install model provide</h3>
        <div className='grid grid-cols-2 gap-3'>
          {pluginList.map((plugin, index) => (
-            <ProviderCard key={index} locale={locale} payload={plugin as any} />
+            <ProviderCard key={index} payload={plugin as any} />
          ))}
        </div>

@ -67,7 +59,6 @@ const PluginList = async () => {
            <Card
              key={index}
              payload={plugin as any}
-              locale={locale}
              footer={
                <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Tag that has very very long name', 'Productivity', 'Tag2'] : []} />
              }
--- a/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
@ -1,21 +0,0 @@
-'use client'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
-import { extensionDallE } from '@/app/components/plugins/card/card-mock'
-import PluginItem from '@/app/components/plugins/plugin-item'
-import I18n from '@/context/i18n'
-
-const TestClientPlugin = () => {
-  const { locale } = useContext(I18n)
-  const { t } = useTranslation()
-  return (
-    <PluginItem
-      payload={extensionDallE as any}
-      onDelete={() => { }}
-      pluginI8n={t}
-      locale={locale}
-    />
-  )
-}
-export default React.memo(TestClientPlugin)
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@ -115,7 +115,7 @@ const ModelProviderPage = () => {
          'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
          defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
        )}>
-          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }}/>}
+          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
          {defaultModelNotConfigured && (
            <div className='flex items-center gap-1 text-text-primary system-xs-medium'>
              <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
@ -185,7 +185,7 @@ const ModelProviderPage = () => {
        {!collapse && (
          <div className='grid grid-cols-2 gap-2'>
            {pluginList.map((plugin, index) => (
-              <ProviderCard key={index} installed={false} locale={locale} payload={plugin as any} />
+              <ProviderCard key={index} installed={false} payload={plugin as any} />
            ))}
          </div>
        )}
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@ -1,4 +1,6 @@
+'use client'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
 import Icon from '../card/base/card-icon'
@ -8,18 +10,16 @@ import OrgInfo from './base/org-info'
 import Description from './base/description'
 import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
-import type { Locale } from '@/i18n'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
  payload: Plugin
-  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
  titleLeft?: React.ReactNode
  installed?: boolean
  hideCornerMark?: boolean
  descriptionLineRows?: number
  footer?: React.ReactNode
-  serverLocale?: Locale
  isLoading?: boolean
  loadingFileName?: string
 }
@ -32,10 +32,11 @@ const Card = ({
  hideCornerMark,
  descriptionLineRows = 2,
  footer,
-  locale,
  isLoading = false,
  loadingFileName,
 }: Props) => {
+  const { locale } = useContext(I18n)
+
  const { type, name, org, label, brief, icon } = payload

  const getLocalizedText = (obj: Record<string, string> | undefined) =>
@ -80,4 +81,4 @@ const Card = ({
  )
 }

-export default Card
+export default React.memo(Card)
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@ -69,7 +69,6 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
          <Card
            className='w-full'
-            locale={locale}
            payload={status === 'uploading' ? { name: 'notion-sync' } as any : toolNotion as any}
            isLoading={status === 'uploading'}
            loadingFileName='notion-sync.difypkg'
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@ -1,7 +1,6 @@
 'use client'

 import React, { useMemo, useState } from 'react'
-import { useContext } from 'use-context-selector'
 import { RiInformation2Line } from '@remixicon/react'
 import Card from '../../card'
 import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
@ -9,14 +8,12 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import I18n from '@/context/i18n'

 type InstallFromMarketplaceProps = {
  onClose: () => void
 }

 const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
-  const { locale } = useContext(I18n)
  const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
  const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
  const [isInstalling, setIsInstalling] = useState(false)
@ -40,7 +37,6 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
      key={index}
      installed={nextStep && !isInstalling}
      payload={plugin}
-      locale={locale}
      className='w-full'
      titleLeft={
        plugin.version === plugin.latest_version
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@ -13,35 +13,30 @@ const List = () => {
        <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -54,168 +49,144 @@ const List = () => {
        <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@ -1,6 +1,9 @@
+'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import { Github } from '../../base/icons/src/public/common'
 import Badge from '../../base/badge'
 import type { Plugin } from '../types'
@ -11,26 +14,21 @@ import OrgInfo from '../card/base/org-info'
 import Title from '../card/base/title'
 import Action from './action'
 import cn from '@/utils/classnames'
-import type { Locale } from '@/i18n'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
  payload: Plugin
-  locale: Locale
  onDelete: () => void
-  pluginI8n: any
-  isClient?: boolean
 }

 const PluginItem: FC<Props> = ({
  className,
  payload,
  onDelete,
-  locale,
-  pluginI8n,
-  isClient,
 }) => {
-  const t = (key: string, param?: object) => pluginI8n(`${isClient ? 'plugin.' : ''}${key}`, param)
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()

  const { type, name, org, label } = payload
  const hasNewVersion = payload.latest_version !== payload.version
@ -74,12 +72,12 @@ const PluginItem: FC<Props> = ({
          <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
          <div className='flex text-text-tertiary system-xs-regular space-x-1'>
            <RiLoginCircleLine className='w-4 h-4' />
-            <span>{t('endpointsEnabled', { num: 2 })}</span>
+            <span>{t('plugin.endpointsEnabled', { num: 2 })}</span>
          </div>
        </div>

        <div className='flex items-center'>
-          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('from')}</a>
+          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</a>
          <div className='flex items-center space-x-0.5 text-text-secondary'>
            <Github className='ml-1 w-3 h-3' />
            <div className='system-2xs-semibold-uppercase'>GitHub</div>
@ -91,4 +89,4 @@ const PluginItem: FC<Props> = ({
  )
 }

-export default PluginItem
+export default React.memo(PluginItem)
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@ -1,4 +1,6 @@
+'use client'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import type { FC } from 'react'
 import Link from 'next/link'
 import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
@ -9,22 +11,21 @@ import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
-import type { Locale } from '@/i18n'
 import cn from '@/utils/classnames'
+import I18n from '@/context/i18n'

 type Props = {
  className?: string
-  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
  payload: Plugin
  installed?: boolean
 }

 const ProviderCard: FC<Props> = ({
  className,
-  locale,
  payload,
  installed = true,
 }) => {
+  const { locale } = useContext(I18n)
  const { org, label } = payload

  return (
--- a/web/app/components/plugins/update-plugin/index.tsx
+++ b/web/app/components/plugins/update-plugin/index.tsx
@ -1,14 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useMemo, useState } from 'react'
-import { useContext } from 'use-context-selector'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Card from '@/app/components/plugins/card'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import I18n from '@/context/i18n'
 import { toolNotion } from '@/app/components/plugins/card/card-mock'

 const i18nPrefix = 'plugin.upgrade'
@ -26,7 +24,6 @@ enum UploadStep {
 const UpdatePluginModal: FC<Props> = ({
  onHide,
 }) => {
-  const { locale } = useContext(I18n)
  const { t } = useTranslation()
  const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
  const configBtnText = useMemo(() => {
@ -62,7 +59,6 @@ const UpdatePluginModal: FC<Props> = ({
        <Card
          installed={uploadStep === UploadStep.installed}
          payload={toolNotion as any}
-          locale={locale}
          className='w-full'
          titleLeft={
            <>
--- a/web/app/components/tools/marketplace.tsx
+++ b/web/app/components/tools/marketplace.tsx
@ -45,35 +45,30 @@ const Marketplace = ({
        <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
@ -86,168 +81,144 @@ const Marketplace = ({
        <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
        <div className='grid grid-cols-4 gap-3 mt-2'>
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
            }
          />
          <Card
-            locale={locale}
            payload={toolNotion as any}
            footer={
              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@ -112,7 +112,6 @@ const ProviderList = () => {
                  currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
                )}
                hideCornerMark
-                locale={language}
                payload={{
                  ...collection,
                  brief: collection.description,