Add i18n for side tool bar tooltips (#207)

* Add npm dep

* Add i18n for side bar tooltips

Author: huchenlei

package-lock.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"
   },

package.json

@@ -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/SideBarSettingsToggleIcon.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/SideBarThemeToggleIcon.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/components/sidebar/SideToolBar.vue

@@ -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/i18n.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");
 });