Add i18n for side tool bar tooltips (#207)

* Add npm dep

* Add i18n for side bar tooltips

package-lock.json

@@ -20,6 +20,7 @@
         "primevue": "^4.0.0-rc.2",
         "reflect-metadata": "^0.2.2",
         "vue": "^3.4.31",
+        "vue-i18n": "^9.13.1",
         "zod": "^3.23.8",
         "zod-validation-error": "^3.3.0"
       },
@@ -2189,6 +2190,47 @@
         "node": ">=12"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.13.1.tgz",
+      "integrity": "sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.13.1",
+        "@intlify/shared": "9.13.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.13.1.tgz",
+      "integrity": "sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==",
+      "dependencies": {
+        "@intlify/shared": "9.13.1",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.13.1.tgz",
+      "integrity": "sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -9773,6 +9815,25 @@
         }
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.13.1.tgz",
+      "integrity": "sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==",
+      "dependencies": {
+        "@intlify/core-base": "9.13.1",
+        "@intlify/shared": "9.13.1",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",

package.json

@@ -58,6 +58,7 @@
     "primevue": "^4.0.0-rc.2",
     "reflect-metadata": "^0.2.2",
     "vue": "^3.4.31",
+    "vue-i18n": "^9.13.1",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   },

src/components/sidebar/SideBarSettingsToggleIcon.vue

@@ -1,5 +1,9 @@
 <template>
-  <SideBarIcon icon="pi pi-cog" @click="showSetting" tooltip="Settings" />
+  <SideBarIcon
+    icon="pi pi-cog"
+    @click="showSetting"
+    :tooltip="$t('sideToolBar.settings')"
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/SideBarThemeToggleIcon.vue

@@ -1,5 +1,9 @@
 <template>
-  <SideBarIcon :icon="icon" @click="toggleTheme" tooltip="Toggle Theme" />
+  <SideBarIcon
+    :icon="icon"
+    @click="toggleTheme"
+    :tooltip="$t('sideToolBar.themeToggle')"
+  />
 </template>
 
 <script setup lang="ts">

src/components/sidebar/SideToolBar.vue

@@ -24,12 +24,14 @@ import SideBarSettingsToggleIcon from "./SideBarSettingsToggleIcon.vue";
 import NodeDetailSideBarItem from "./items/NodeDetailSideBarItem.vue";
 import QueueSideBarItem from "./items/QueueSideBarItem.vue";
 import { markRaw, onMounted, onUnmounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const items = ref([
   // { icon: "pi pi-map", component: markRaw(NodeDetailSideBarItem) },
   {
     icon: "pi pi-history",
-    tooltip: "Queue",
+    tooltip: t("sideToolBar.queue"),
     component: markRaw(QueueSideBarItem),
   },
 ]);

src/i18n.ts

@@ -0,0 +1,27 @@
+import { createI18n } from "vue-i18n";
+
+const messages = {
+  en: {
+    sideToolBar: {
+      settings: "Settings",
+      themeToggle: "Toggle Theme",
+      queue: "Queue",
+    },
+  },
+  zh: {
+    sideToolBar: {
+      settings: "设置",
+      themeToggle: "主题切换",
+      queue: "队列",
+    },
+  },
+  // TODO: Add more languages
+};
+
+export const i18n = createI18n({
+  // Must set `false`, as Vue I18n Legacy API is for Vue 2
+  legacy: false,
+  locale: navigator.language.split("-")[0] || "en",
+  fallbackLocale: "en",
+  messages,
+});

src/main.ts

@@ -10,6 +10,7 @@ import "primeicons/primeicons.css";
 import App from "./App.vue";
 import { app as comfyApp } from "@/scripts/app";
 import { createPinia } from "pinia";
+import { i18n } from "./i18n";
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -42,5 +43,6 @@ comfyApp.setup().then(() => {
     .use(ConfirmationService)
     .use(ToastService)
     .use(pinia)
+    .use(i18n)
     .mount("#vue-app");
 });