[i18n] g global namespace (#1843)

* Batch move global scope i18n to g. namespace

* Minor fix

* Update locale

* Update locales [skip ci]

* More moves

* Regroup icon/color

* nit

* Fix component test

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/common/ComfyImage.vue

@@ -22,7 +22,7 @@
   </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
     <i class="pi pi-image"></i>
-    <span>{{ $t('imageFailedToLoad') }}</span>
+    <span>{{ $t('g.imageFailedToLoad') }}</span>
   </div>
 </template>
 

src/components/common/CustomizationDialog.vue

@@ -1,8 +1,8 @@
 <template>
-  <Dialog v-model:visible="visible" :header="$t('customizeFolder')">
+  <Dialog v-model:visible="visible" :header="$t('g.customizeFolder')">
     <div class="p-fluid">
       <div class="field icon-field">
-        <label for="icon">{{ $t('icon') }}</label>
+        <label for="icon">{{ $t('g.icon') }}</label>
         <SelectButton
           v-model="selectedIcon"
           :options="iconOptions"
@@ -19,7 +19,7 @@
       </div>
       <Divider />
       <div class="field color-field">
-        <label for="color">{{ $t('color') }}</label>
+        <label for="color">{{ $t('g.color') }}</label>
         <div class="color-picker-container">
           <SelectButton
             v-model="selectedColor"
@@ -41,7 +41,7 @@
                 v-else
                 class="pi pi-palette"
                 :style="{ fontSize: '1.2rem' }"
-                v-tooltip="$t('customColor')"
+                v-tooltip="$t('g.customColor')"
               ></i>
             </template>
           </SelectButton>
@@ -54,13 +54,13 @@
     </div>
     <template #footer>
       <Button
-        :label="$t('reset')"
+        :label="$t('g.reset')"
         icon="pi pi-refresh"
         @click="resetCustomization"
         class="p-button-text"
       />
       <Button
-        :label="$t('confirm')"
+        :label="$t('g.confirm')"
         icon="pi pi-check"
         @click="confirmCustomization"
         autofocus
@@ -100,24 +100,24 @@ const visible = computed({
 const nodeBookmarkStore = useNodeBookmarkStore()
 
 const iconOptions = [
-  { name: t('bookmark'), value: nodeBookmarkStore.defaultBookmarkIcon },
-  { name: t('folder'), value: 'pi-folder' },
-  { name: t('star'), value: 'pi-star' },
-  { name: t('heart'), value: 'pi-heart' },
-  { name: t('file'), value: 'pi-file' },
-  { name: t('inbox'), value: 'pi-inbox' },
-  { name: t('box'), value: 'pi-box' },
-  { name: t('briefcase'), value: 'pi-briefcase' }
+  { name: t('icon.bookmark'), value: nodeBookmarkStore.defaultBookmarkIcon },
+  { name: t('icon.folder'), value: 'pi-folder' },
+  { name: t('icon.star'), value: 'pi-star' },
+  { name: t('icon.heart'), value: 'pi-heart' },
+  { name: t('icon.file'), value: 'pi-file' },
+  { name: t('icon.inbox'), value: 'pi-inbox' },
+  { name: t('icon.box'), value: 'pi-box' },
+  { name: t('icon.briefcase'), value: 'pi-briefcase' }
 ]
 
 const colorOptions = [
-  { name: t('default'), value: nodeBookmarkStore.defaultBookmarkColor },
-  { name: t('blue'), value: '#007bff' },
-  { name: t('green'), value: '#28a745' },
-  { name: t('red'), value: '#dc3545' },
-  { name: t('pink'), value: '#e83e8c' },
-  { name: t('yellow'), value: '#ffc107' },
-  { name: t('custom'), value: 'custom' }
+  { name: t('color.default'), value: nodeBookmarkStore.defaultBookmarkColor },
+  { name: t('color.blue'), value: '#007bff' },
+  { name: t('color.green'), value: '#28a745' },
+  { name: t('color.red'), value: '#dc3545' },
+  { name: t('color.pink'), value: '#e83e8c' },
+  { name: t('color.yellow'), value: '#ffc107' },
+  { name: t('color.custom'), value: 'custom' }
 ]
 
 const defaultIcon = iconOptions.find(
@@ -157,7 +157,7 @@ const resetCustomization = () => {
     selectedColor.value = defaultColor
   } else if (!colorOption) {
     customColor.value = props.initialColor.replace('#', '')
-    selectedColor.value = { name: 'Custom', value: 'custom' }
+    selectedColor.value = { name: t('color.custom'), value: 'custom' }
   } else {
     selectedColor.value = colorOption
   }

src/components/common/ElectronFileDownload.vue

@@ -14,7 +14,7 @@
       <div class="file-action">
         <Button
           class="file-action-button"
-          :label="$t('download') + ' (' + fileSize + ')'"
+          :label="$t('g.download') + ' (' + fileSize + ')'"
           size="small"
           outlined
           :disabled="props.error"

src/components/common/FileDownload.vue

@@ -12,7 +12,7 @@
     <div class="file-action">
       <Button
         class="file-action-button"
-        :label="$t('download') + ' (' + fileSize + ')'"
+        :label="$t('g.download') + ' (' + fileSize + ')'"
         size="small"
         outlined
         :disabled="props.error"

src/components/common/SystemStatsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">{{ $t('systemInfo') }}</h2>
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.systemInfo') }}</h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
           <div class="font-medium">{{ col.header }}</div>
@@ -13,7 +13,7 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">{{ $t('devices') }}</h2>
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.devices') }}</h2>
       <TabView v-if="props.stats.devices.length > 1">
         <TabPanel
           v-for="device in props.stats.devices"

src/components/common/TreeExplorer.vue

@@ -130,13 +130,13 @@ const deleteCommand = async (node: RenderedTreeExplorerNode) => {
 const menuItems = computed<MenuItem[]>(() =>
   [
     {
-      label: t('rename'),
+      label: t('g.rename'),
       icon: 'pi pi-file-edit',
       command: () => renameCommand(menuTargetNode.value),
       visible: menuTargetNode.value?.handleRename !== undefined
     },
     {
-      label: t('delete'),
+      label: t('g.delete'),
       icon: 'pi pi-trash',
       command: () => deleteCommand(menuTargetNode.value),
       visible: menuTargetNode.value?.handleDelete !== undefined,

src/components/common/__tests__/TreeExplorerTreeNode.spec.ts

@@ -128,7 +128,7 @@ describe('TreeExplorerTreeNode', () => {
     expect(handleRenameMock).toHaveBeenCalledOnce()
     expect(addToastSpy).toHaveBeenCalledWith({
       severity: 'error',
-      summary: 'error',
+      summary: 'g.error',
       detail: 'Rename failed',
       life: 3000
     })