Translate setting categories (#1797)

* Add i18n for setting categories

* Update locales

* Translate about

* nit

* nit

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: {