From a1719c49b78100804766c55d6d27c9df409cfc32 Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 13 Nov 2024 16:55:43 +0800 Subject: [PATCH] feat: add internationalization support for plugin categories and update translations --- web/app/components/plugins/hooks.ts | 39 +++++++++++++++++++ .../components/plugins/plugin-item/index.tsx | 2 +- .../filter-management/category-filter.tsx | 38 ++++++------------ .../filter-management/search-box.tsx | 5 ++- .../filter-management/tag-filter.tsx | 30 ++++++-------- web/i18n/de-DE/plugin-categories.ts | 4 ++ web/i18n/en-US/plugin-categories.ts | 12 ++++++ web/i18n/en-US/plugin.ts | 1 + web/i18n/es-ES/plugin-categories.ts | 4 ++ web/i18n/fa-IR/plugin-categories.ts | 4 ++ web/i18n/fr-FR/plugin-categories.ts | 4 ++ web/i18n/hi-IN/plugin-categories.ts | 4 ++ web/i18n/i18next-config.ts | 1 + web/i18n/it-IT/plugin-categories.ts | 4 ++ web/i18n/ja-JP/plugin-categories.ts | 4 ++ web/i18n/ko-KR/plugin-categories.ts | 4 ++ web/i18n/pl-PL/plugin-categories.ts | 4 ++ web/i18n/pt-BR/plugin-categories.ts | 4 ++ web/i18n/ro-RO/plugin-categories.ts | 4 ++ web/i18n/ru-RU/plugin-categories.ts | 4 ++ web/i18n/tr-TR/plugin-categories.ts | 4 ++ web/i18n/uk-UA/plugin-categories.ts | 4 ++ web/i18n/vi-VN/plugin-categories.ts | 4 ++ web/i18n/zh-Hans/plugin-categories.ts | 12 ++++++ web/i18n/zh-Hans/plugin.ts | 1 + web/i18n/zh-Hant/plugin-categories.ts | 4 ++ 26 files changed, 159 insertions(+), 46 deletions(-) create mode 100644 web/i18n/de-DE/plugin-categories.ts create mode 100644 web/i18n/en-US/plugin-categories.ts create mode 100644 web/i18n/es-ES/plugin-categories.ts create mode 100644 web/i18n/fa-IR/plugin-categories.ts create mode 100644 web/i18n/fr-FR/plugin-categories.ts create mode 100644 web/i18n/hi-IN/plugin-categories.ts create mode 100644 web/i18n/it-IT/plugin-categories.ts create mode 100644 web/i18n/ja-JP/plugin-categories.ts create mode 100644 web/i18n/ko-KR/plugin-categories.ts create mode 100644 web/i18n/pl-PL/plugin-categories.ts create mode 100644 web/i18n/pt-BR/plugin-categories.ts create mode 100644 web/i18n/ro-RO/plugin-categories.ts create mode 100644 web/i18n/ru-RU/plugin-categories.ts create mode 100644 web/i18n/tr-TR/plugin-categories.ts create mode 100644 web/i18n/uk-UA/plugin-categories.ts create mode 100644 web/i18n/vi-VN/plugin-categories.ts create mode 100644 web/i18n/zh-Hans/plugin-categories.ts create mode 100644 web/i18n/zh-Hant/plugin-categories.ts diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts index 484a7fbb5a..9d259c738a 100644 --- a/web/app/components/plugins/hooks.ts +++ b/web/app/components/plugins/hooks.ts @@ -87,3 +87,42 @@ export const useTags = (translateFromOut?: TFunction) => { tagsMap, } } + +type Category = { + name: string + label: string +} + +export const useCategories = (translateFromOut?: TFunction) => { + const { t: translation } = useTranslation() + const t = translateFromOut || translation + + const categories = [ + { + name: 'model', + label: t('pluginCategories.categories.model'), + }, + { + name: 'tool', + label: t('pluginCategories.categories.tool'), + }, + { + name: 'extension', + label: t('pluginCategories.categories.extension'), + }, + { + name: 'bundle', + label: t('pluginCategories.categories.bundle'), + }, + ] + + const categoriesMap = categories.reduce((acc, category) => { + acc[category.name] = category + return acc + }, {} as Record) + + return { + categories, + categoriesMap, + } +} diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx index 3569ed856c..563a6bc685 100644 --- a/web/app/components/plugins/plugin-item/index.tsx +++ b/web/app/components/plugins/plugin-item/index.tsx @@ -67,7 +67,7 @@ const PluginItem: FC = ({ }} >
- + {/* Header */}
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx index 8544bef95c..fa6540c4bf 100644 --- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx +++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx @@ -13,6 +13,8 @@ import { import Checkbox from '@/app/components/base/checkbox' import cn from '@/utils/classnames' import Input from '@/app/components/base/input' +import { useCategories } from '../../hooks' +import { useTranslation } from 'react-i18next' type CategoriesFilterProps = { value: string[] @@ -22,27 +24,11 @@ const CategoriesFilter = ({ value, onChange, }: CategoriesFilterProps) => { + const { t } = useTranslation() const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState('') - const options = [ - { - value: 'model', - text: 'Model', - }, - { - value: 'tool', - text: 'Tool', - }, - { - value: 'extension', - text: 'Extension', - }, - { - value: 'bundle', - text: 'Bundle', - }, - ] - const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase())) + const { categories: options, categoriesMap } = useCategories() + const filteredOptions = options.filter(option => option.name.toLowerCase().includes(searchText.toLowerCase())) const handleCheck = (id: string) => { if (value.includes(id)) onChange(value.filter(tag => tag !== id)) @@ -70,10 +56,10 @@ const CategoriesFilter = ({ 'flex items-center p-1 system-sm-medium', )}> { - !selectedTagsLength && 'All Categories' + !selectedTagsLength && t('pluginCategories.allCategories') } { - !!selectedTagsLength && value.slice(0, 2).join(',') + !!selectedTagsLength && value.map(val => categoriesMap[val].label).slice(0, 2).join(',') } { selectedTagsLength > 2 && ( @@ -110,23 +96,23 @@ const CategoriesFilter = ({ showLeftIcon value={searchText} onChange={e => setSearchText(e.target.value)} - placeholder='Search categories' + placeholder={t('pluginCategories.searchCategories')} />
{ filteredOptions.map(option => (
handleCheck(option.value)} + onClick={() => handleCheck(option.name)} >
- {option.text} + {option.label}
)) diff --git a/web/app/components/plugins/plugin-page/filter-management/search-box.tsx b/web/app/components/plugins/plugin-page/filter-management/search-box.tsx index 1b67a9a112..ad3547e89b 100644 --- a/web/app/components/plugins/plugin-page/filter-management/search-box.tsx +++ b/web/app/components/plugins/plugin-page/filter-management/search-box.tsx @@ -1,6 +1,7 @@ 'use client' import Input from '@/app/components/base/input' +import { useTranslation } from 'react-i18next' type SearchBoxProps = { searchQuery: string onChange: (query: string) => void @@ -10,13 +11,15 @@ const SearchBox: React.FC = ({ searchQuery, onChange, }) => { + const { t } = useTranslation() + return ( { onChange(e.target.value) }} diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx index d337f17495..dd1781d9f4 100644 --- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx +++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx @@ -13,6 +13,8 @@ import { import Checkbox from '@/app/components/base/checkbox' import cn from '@/utils/classnames' import Input from '@/app/components/base/input' +import { useTags } from '../../hooks' +import { useTranslation } from 'react-i18next' type TagsFilterProps = { value: string[] @@ -22,19 +24,11 @@ const TagsFilter = ({ value, onChange, }: TagsFilterProps) => { + const { t } = useTranslation() const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState('') - const options = [ - { - value: 'search', - text: 'Search', - }, - { - value: 'image', - text: 'Image', - }, - ] - const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase())) + const { tags: options, tagsMap } = useTags() + const filteredOptions = options.filter(option => option.name.toLowerCase().includes(searchText.toLowerCase())) const handleCheck = (id: string) => { if (value.includes(id)) onChange(value.filter(tag => tag !== id)) @@ -62,10 +56,10 @@ const TagsFilter = ({ 'flex items-center p-1 system-sm-medium', )}> { - !selectedTagsLength && 'All Tags' + !selectedTagsLength && t('pluginTags.allTags') } { - !!selectedTagsLength && value.slice(0, 2).join(',') + !!selectedTagsLength && value.map(val => tagsMap[val].label).slice(0, 2).join(',') } { selectedTagsLength > 2 && ( @@ -97,23 +91,23 @@ const TagsFilter = ({ showLeftIcon value={searchText} onChange={e => setSearchText(e.target.value)} - placeholder='Search tags' + placeholder={t('pluginTags.searchTags')} />
{ filteredOptions.map(option => (
handleCheck(option.value)} + onClick={() => handleCheck(option.name)} >
- {option.text} + {option.label}
)) diff --git a/web/i18n/de-DE/plugin-categories.ts b/web/i18n/de-DE/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/de-DE/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/en-US/plugin-categories.ts b/web/i18n/en-US/plugin-categories.ts new file mode 100644 index 0000000000..6ee5b76c25 --- /dev/null +++ b/web/i18n/en-US/plugin-categories.ts @@ -0,0 +1,12 @@ +const translation = { + allCategories: 'All Categories', + searchCategories: 'Search categories', + categories: { + model: 'Model', + tool: 'Tool', + extension: 'Extension', + bundle: 'Bundle', + }, +} + +export default translation diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index 689510acca..3784309c09 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -6,6 +6,7 @@ const translation = { extensions: 'extensions', bundles: 'bundles', }, + search: 'Search', searchPlugins: 'Search plugins', from: 'From', findMoreInMarketplace: 'Find more in Marketplace', diff --git a/web/i18n/es-ES/plugin-categories.ts b/web/i18n/es-ES/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/es-ES/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/fa-IR/plugin-categories.ts b/web/i18n/fa-IR/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/fa-IR/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/fr-FR/plugin-categories.ts b/web/i18n/fr-FR/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/fr-FR/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/hi-IN/plugin-categories.ts b/web/i18n/hi-IN/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/hi-IN/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/i18next-config.ts b/web/i18n/i18next-config.ts index bbba4c7c35..9b35cd5432 100644 --- a/web/i18n/i18next-config.ts +++ b/web/i18n/i18next-config.ts @@ -30,6 +30,7 @@ const loadLangResources = (lang: string) => ({ runLog: require(`./${lang}/run-log`).default, plugin: require(`./${lang}/plugin`).default, pluginTags: require(`./${lang}/plugin-tags`).default, + pluginCategories: require(`./${lang}/plugin-categories`).default, }, }) diff --git a/web/i18n/it-IT/plugin-categories.ts b/web/i18n/it-IT/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/it-IT/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/ja-JP/plugin-categories.ts b/web/i18n/ja-JP/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/ja-JP/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/ko-KR/plugin-categories.ts b/web/i18n/ko-KR/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/ko-KR/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/pl-PL/plugin-categories.ts b/web/i18n/pl-PL/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/pl-PL/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/pt-BR/plugin-categories.ts b/web/i18n/pt-BR/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/pt-BR/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/ro-RO/plugin-categories.ts b/web/i18n/ro-RO/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/ro-RO/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/ru-RU/plugin-categories.ts b/web/i18n/ru-RU/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/ru-RU/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/tr-TR/plugin-categories.ts b/web/i18n/tr-TR/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/tr-TR/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/uk-UA/plugin-categories.ts b/web/i18n/uk-UA/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/uk-UA/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/vi-VN/plugin-categories.ts b/web/i18n/vi-VN/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/vi-VN/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation diff --git a/web/i18n/zh-Hans/plugin-categories.ts b/web/i18n/zh-Hans/plugin-categories.ts new file mode 100644 index 0000000000..fb08e8ad87 --- /dev/null +++ b/web/i18n/zh-Hans/plugin-categories.ts @@ -0,0 +1,12 @@ +const translation = { + allCategories: '所有类型', + searchCategories: '搜索类型', + categories: { + model: '模型', + tool: '工具', + extension: '扩展', + bundle: '捆绑包', + }, +} + +export default translation diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts index 25cd0ba03f..2e835bbfab 100644 --- a/web/i18n/zh-Hans/plugin.ts +++ b/web/i18n/zh-Hans/plugin.ts @@ -6,6 +6,7 @@ const translation = { extensions: '扩展', bundles: '捆绑包', }, + search: '搜索', searchPlugins: '搜索插件', from: '来自', findMoreInMarketplace: '在 Marketplace 中查找更多', diff --git a/web/i18n/zh-Hant/plugin-categories.ts b/web/i18n/zh-Hant/plugin-categories.ts new file mode 100644 index 0000000000..928649474b --- /dev/null +++ b/web/i18n/zh-Hant/plugin-categories.ts @@ -0,0 +1,4 @@ +const translation = { +} + +export default translation