Translate setting categories (#1797)

* Add i18n for setting categories

* Update locales

* Translate about

* nit

* nit

scripts/collect-i18n.ts

@@ -1,7 +1,7 @@
 import * as fs from 'fs'
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
-import { normalizeI18nKey } from '../src/utils/formatUtil'
+import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
 import type { SettingParams } from '../src/types/settingTypes'
 
@@ -45,7 +45,8 @@ test('collect-i18n', async ({ comfyPage }) => {
       .map((setting) => ({
         id: setting.id,
         name: setting.name,
-        tooltip: setting.tooltip
+        tooltip: setting.tooltip,
+        category: setting.category
       }))
   })
 
@@ -59,13 +60,30 @@ test('collect-i18n', async ({ comfyPage }) => {
     ])
   )
 
+  const allSettingCategoriesLocale = Object.fromEntries(
+    settings
+      .flatMap((setting) => {
+        return (setting.category ?? setting.id.split('.')).slice(0, 2)
+      })
+      .map((category: string) => [
+        normalizeI18nKey(category),
+        formatCamelCase(category)
+      ])
+  )
+
   fs.writeFileSync(
     localePath,
     JSON.stringify(
       {
         ...locale,
         menuLabels: allLabelsLocale,
-        settingsDialog: allSettingsLocale
+        settingsDialog: allSettingsLocale,
+        // Do merge for settingsCategories as there are some manual translations
+        // for special panels like "About" and "Keybinding".
+        settingsCategories: {
+          ...(locale.settingsCategories ?? {}),
+          ...allSettingCategoriesLocale
+        }
       },
       null,
       2

src/components/dialog/content/SettingDialogContent.vue

@@ -10,7 +10,7 @@
       <Listbox
         v-model="activeCategory"
         :options="categories"
-        optionLabel="label"
+        optionLabel="translatedLabel"
         scrollHeight="100%"
         :disabled="inSearch"
         class="border-none w-full"
@@ -78,6 +78,8 @@ import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
 import CurrentUserMessage from './setting/CurrentUserMessage.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+import { useI18n } from 'vue-i18n'
 
 const KeybindingPanel = defineAsyncComponent(
   () => import('./setting/KeybindingPanel.vue')
@@ -132,13 +134,20 @@ const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
 const settingCategories = computed<SettingTreeNode[]>(
   () => settingRoot.value.children ?? []
 )
-const categories = computed<SettingTreeNode[]>(() => [
-  ...settingCategories.value,
-  keybindingPanelNode,
-  ...extensionPanelNodeList.value,
-  ...serverConfigPanelNodeList.value,
-  aboutPanelNode
-])
+const { t } = useI18n()
+const categories = computed<SettingTreeNode[]>(() =>
+  [
+    ...settingCategories.value,
+    keybindingPanelNode,
+    ...extensionPanelNodeList.value,
+    ...serverConfigPanelNodeList.value,
+    aboutPanelNode
+  ].map((node) => ({
+    ...node,
+    translatedLabel: t(`settingsCategories.${normalizeI18nKey(node.label)}`)
+  }))
+)
+
 const activeCategory = ref<SettingTreeNode | null>(null)
 const searchResults = ref<ISettingGroup[]>([])
 

src/components/dialog/content/setting/SettingGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="setting-group">
     <Divider v-if="divider" />
-    <h3>{{ formatCamelCase(group.label) }}</h3>
+    <h3>{{ $t(`settingsCategories.${normalizeI18nKey(group.label)}`) }}</h3>
     <div
       v-for="setting in group.settings"
       :key="setting.id"
@@ -16,7 +16,7 @@
 import Divider from 'primevue/divider'
 import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
 import { SettingParams } from '@/types/settingTypes'
-import { formatCamelCase } from '@/utils/formatUtil'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
   group: {

src/locales/en.json

@@ -399,6 +399,9 @@
     "Comfy_Window_UnloadConfirmation": {
       "name": "Show confirmation when closing window"
     },
+    "Comfy_Workflow_ConfirmDelete": {
+      "name": "Show confirmation when deleting workflows"
+    },
     "Comfy_Workflow_ShowMissingModelsWarning": {
       "name": "Show missing models warning"
     },
@@ -589,5 +592,46 @@
   "desktopMenu": {
     "reinstall": "Reinstall",
     "confirmReinstall": "This will clear your extra_models_config.yaml file, and begin installation again.  Are you sure?"
+  },
+  "settingsCategories": {
+    "Comfy-Desktop": "Comfy-Desktop",
+    "General": "General",
+    "Appearance": "Appearance",
+    "ColorPalette": "Color Palette",
+    "Comfy": "Comfy",
+    "Workflow": "Workflow",
+    "DevMode": "Dev Mode",
+    "LiteGraph": "Lite Graph",
+    "Node Widget": "Node Widget",
+    "Node": "Node",
+    "EditAttention": "Edit Attention",
+    "Extension": "Extension",
+    "Canvas": "Canvas",
+    "Link": "Link",
+    "Group": "Group",
+    "Menu": "Menu",
+    "Keybinding": "Keybinding",
+    "LinkRelease": "Link Release",
+    "Graph": "Graph",
+    "Locale": "Locale",
+    "Mask Editor": "Mask Editor",
+    "BrushAdjustment": "Brush Adjustment",
+    "NewEditor": "New Editor",
+    "ModelLibrary": "Model Library",
+    "NodeInputConversionSubmenus": "Node Input Conversion Submenus",
+    "NodeLibrary": "Node Library",
+    "Node Search Box": "Node Search Box",
+    "Pointer": "Pointer",
+    "Queue": "Queue",
+    "QueueButton": "Queue Button",
+    "RerouteBeta": "Reroute Beta",
+    "Server": "Server",
+    "Settings": "Settings",
+    "Sidebar": "Sidebar",
+    "Tree Explorer": "Tree Explorer",
+    "Validation": "Validation",
+    "Window": "Window",
+    "Server-Config": "Server-Config",
+    "About": "About"
   }
-}
+}

src/locales/ja.json

@@ -239,6 +239,47 @@
     "reportIssue": "問題を報告"
   },
   "settings": "設定",
+  "settingsCategories": {
+    "About": "について",
+    "Appearance": "外観",
+    "BrushAdjustment": "ブラシ調整",
+    "Canvas": "キャンバス",
+    "ColorPalette": "カラーパレット",
+    "Comfy": "Comfy",
+    "Comfy-Desktop": "Comfyデスクトップ",
+    "DevMode": "開発モード",
+    "EditAttention": "編集Attention",
+    "Extension": "拡張",
+    "General": "一般",
+    "Graph": "グラフ",
+    "Group": "グループ",
+    "Keybinding": "キー割り当て",
+    "Link": "リンク",
+    "LinkRelease": "リンク解除",
+    "LiteGraph": "Lite Graph",
+    "Locale": "ロケール",
+    "Mask Editor": "マスクエディタ",
+    "Menu": "メニュー",
+    "ModelLibrary": "モデルライブラリ",
+    "NewEditor": "新しいエディタ",
+    "Node": "ノード",
+    "Node Search Box": "ノード検索ボックス",
+    "Node Widget": "ノードウィジェット",
+    "NodeInputConversionSubmenus": "ノード入力変換サブメニュー",
+    "NodeLibrary": "ノードライブラリ",
+    "Pointer": "ポインタ",
+    "Queue": "キュー",
+    "QueueButton": "キューボタン",
+    "RerouteBeta": "ルート変更ベータ",
+    "Server": "サーバー",
+    "Server-Config": "サーバー設定",
+    "Settings": "設定",
+    "Sidebar": "サイドバー",
+    "Tree Explorer": "ツリーエクスプローラー",
+    "Validation": "検証",
+    "Window": "ウィンドウ",
+    "Workflow": "ワークフロー"
+  },
   "settingsDialog": {
     "Comfy-Desktop_AutoUpdate": {
       "name": "自動的に更新を確認する"
@@ -500,6 +541,9 @@
     "Comfy_Window_UnloadConfirmation": {
       "name": "ウィンドウを閉じるときに確認を表示"
     },
+    "Comfy_Workflow_ConfirmDelete": {
+      "name": "ワークフローを削除する際に確認を表示"
+    },
     "Comfy_Workflow_ShowMissingModelsWarning": {
       "name": "欠落しているモデルの警告を表示"
     },

src/locales/ru.json

@@ -239,6 +239,47 @@
     "reportIssue": "Сообщить о проблеме"
   },
   "settings": "Настройки",
+  "settingsCategories": {
+    "About": "О программе",
+    "Appearance": "Внешний вид",
+    "BrushAdjustment": "Настройка кисти",
+    "Canvas": "Холст",
+    "ColorPalette": "Цветовая палитра",
+    "Comfy": "Comfy",
+    "Comfy-Desktop": "Comfy рабочий стол",
+    "DevMode": "Режим разработчика",
+    "EditAttention": "Редактировать внимание",
+    "Extension": "Расширение",
+    "General": "Общие",
+    "Graph": "Граф",
+    "Group": "Группа",
+    "Keybinding": "Сочетание клавиш",
+    "Link": "Ссылка",
+    "LinkRelease": "Освобождение ссылки",
+    "LiteGraph": "Lite Graph",
+    "Locale": "Локализация",
+    "Mask Editor": "Редактор масок",
+    "Menu": "Меню",
+    "ModelLibrary": "Библиотека моделей",
+    "NewEditor": "Новый редактор",
+    "Node": "Узел",
+    "Node Search Box": "Поисковая строка узлов",
+    "Node Widget": "Виджет узла",
+    "NodeInputConversionSubmenus": "Подменю преобразования ввода узла",
+    "NodeLibrary": "Библиотека узлов",
+    "Pointer": "Указатель",
+    "Queue": "Очередь",
+    "QueueButton": "Кнопка очереди",
+    "RerouteBeta": "Бета-версия перенаправления",
+    "Server": "Сервер",
+    "Server-Config": "Настройки сервера",
+    "Settings": "Настройки",
+    "Sidebar": "Боковая панель",
+    "Tree Explorer": "Дерево проводника",
+    "Validation": "Валидация",
+    "Window": "Окно",
+    "Workflow": "Рабочий процесс"
+  },
   "settingsDialog": {
     "Comfy-Desktop_AutoUpdate": {
       "name": "Автоматически проверять обновления"
@@ -500,6 +541,9 @@
     "Comfy_Window_UnloadConfirmation": {
       "name": "Показать подтверждение при закрытии окна"
     },
+    "Comfy_Workflow_ConfirmDelete": {
+      "name": "Показать подтверждение при удалении рабочих процессов"
+    },
     "Comfy_Workflow_ShowMissingModelsWarning": {
       "name": "Показать предупреждение об отсутствующих моделях"
     },

src/locales/zh.json

@@ -239,6 +239,47 @@
     "reportIssue": "报告问题"
   },
   "settings": "设置",
+  "settingsCategories": {
+    "About": "关于",
+    "Appearance": "外观",
+    "BrushAdjustment": "画笔调整",
+    "Canvas": "画布",
+    "ColorPalette": "调色板",
+    "Comfy": "Comfy",
+    "Comfy-Desktop": "Comfy桌面版",
+    "DevMode": "开发模式",
+    "EditAttention": "编辑Attention",
+    "Extension": "扩展",
+    "General": "常规",
+    "Graph": "图",
+    "Group": "组",
+    "Keybinding": "快捷键",
+    "Link": "链接",
+    "LinkRelease": "链接释放",
+    "LiteGraph": "Lite Graph",
+    "Locale": "区域设置",
+    "Mask Editor": "遮罩编辑器",
+    "Menu": "菜单",
+    "ModelLibrary": "模型库",
+    "NewEditor": "新编辑器",
+    "Node": "节点",
+    "Node Search Box": "节点搜索框",
+    "Node Widget": "节点小部件",
+    "NodeInputConversionSubmenus": "节点输入转换子菜单",
+    "NodeLibrary": "节点库",
+    "Pointer": "指针",
+    "Queue": "队列",
+    "QueueButton": "队列按钮",
+    "RerouteBeta": "重定向测试版",
+    "Server": "服务器",
+    "Server-Config": "服务器配置",
+    "Settings": "设置",
+    "Sidebar": "侧边栏",
+    "Tree Explorer": "树形浏览器",
+    "Validation": "验证",
+    "Window": "窗口",
+    "Workflow": "工作流"
+  },
   "settingsDialog": {
     "Comfy-Desktop_AutoUpdate": {
       "name": "自动检查更新"
@@ -500,6 +541,9 @@
     "Comfy_Window_UnloadConfirmation": {
       "name": "关闭窗口时显示确认"
     },
+    "Comfy_Workflow_ConfirmDelete": {
+      "name": "删除工作流时显示确认"
+    },
     "Comfy_Workflow_ShowMissingModelsWarning": {
       "name": "显示缺失模型警告"
     },