From efc0431a5eb17a489d0d14b8cbc16e1fe5e1964b Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Wed, 13 Aug 2025 19:46:03 +0100
Subject: [PATCH] Update side toolbar menu (#4946)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Side toolbar menu UI updates

## Summary

- Currently the template modal is very hidden. Many users do not find it
- The current icons are quite aleatory

## Changes

 **What**:
- Add templates shortcut button
- Add item label in normal size
- Use custom icon

Critical design decisions or edge cases that need attention:
- Sidebar tabs registered using custom icons will have their associated
command registed with an undefined icon (currently only string icons are
accepted, not components). I couldn't see anywhere directly using this
icon, but we should consider autogenerating an icon font so we can use
classes for our custom icons (or locating and updating locations to
support both icon types)

## Screenshots (if applicable)
Normal mode:
<img width="621" height="1034" alt="image"
src="https://github.com/user-attachments/assets/c1d1cee2-004e-4ff8-b3fa-197329b0d2ae"
/>

Small mode:
<img width="176" height="325" alt="image"
src="https://github.com/user-attachments/assets/3824b8f6-bc96-4e62-aece-f0265113d2e3"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-4946-Update-side-toolbar-menu-24d6d73d365081c5b2bdc0ee8b61dc50)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
---
 src/assets/icons/custom/ai-model.svg          |  6 +++
 src/assets/icons/custom/node.svg              |  3 ++
 src/assets/icons/custom/template.svg          |  5 ++
 src/components/sidebar/SideToolbar.vue        |  6 ++-
 src/components/sidebar/SidebarIcon.vue        | 53 +++++++++++++++----
 .../sidebar/SidebarTemplatesButton.vue        | 35 ++++++++++++
 .../sidebarTabs/useModelLibrarySidebarTab.ts  |  9 +++-
 .../sidebarTabs/useNodeLibrarySidebarTab.ts   |  9 +++-
 .../sidebarTabs/useQueueSidebarTab.ts         |  1 +
 .../sidebarTabs/useWorkflowsSidebarTab.ts     |  9 +++-
 src/locales/ar/main.json                      |  8 +++
 src/locales/en/main.json                      |  8 +++
 src/locales/es/main.json                      |  8 +++
 src/locales/fr/main.json                      |  8 +++
 src/locales/ja/main.json                      |  8 +++
 src/locales/ko/main.json                      |  8 +++
 src/locales/ru/main.json                      |  8 +++
 src/locales/zh-TW/main.json                   |  8 +++
 src/locales/zh/main.json                      |  8 +++
 src/stores/workspace/sidebarTabStore.ts       |  2 +-
 src/types/extensionTypes.ts                   |  3 +-
 src/vite-env.d.ts                             | 12 +++++
 vitest.config.ts                              | 12 ++++-
 23 files changed, 218 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/custom/ai-model.svg
 create mode 100644 src/assets/icons/custom/node.svg
 create mode 100644 src/assets/icons/custom/template.svg
 create mode 100644 src/components/sidebar/SidebarTemplatesButton.vue

diff --git a/src/assets/icons/custom/ai-model.svg b/src/assets/icons/custom/ai-model.svg
new file mode 100644
index 000000000..ede8e5c7e
--- /dev/null
+++ b/src/assets/icons/custom/ai-model.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91396 12.7428L5.41396 10.7428C5.57175 10.1116 5.09439 9.50024 4.44382 9.50024H2.50538C2.04651 9.50024 1.64652 9.81253 1.53523 10.2577L1.03523 12.2577C0.877446 12.8888 1.3548 13.5002 2.00538 13.5002H3.94382C4.40269 13.5002 4.80267 13.1879 4.91396 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.91396 6.74277L6.41396 4.74277C6.57175 4.11163 6.09439 3.50024 5.44382 3.50024H3.50538C3.04651 3.50024 2.64652 3.81253 2.53523 4.2577L2.03523 6.2577C1.87745 6.88885 2.3548 7.50024 3.00538 7.50024H4.94382C5.40269 7.50024 5.80267 7.18794 5.91396 6.74277Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10.914 12.7428L11.414 10.7428C11.5718 10.1116 11.0944 9.50024 10.4438 9.50024H8.50538C8.04651 9.50024 7.64652 9.81253 7.53523 10.2577L7.03523 12.2577C6.87745 12.8888 7.3548 13.5002 8.00538 13.5002H9.94382C10.4027 13.5002 10.8027 13.1879 10.914 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M12.2342 5.46739L11.5287 7.11354C11.4248 7.35597 11.0811 7.35597 10.9772 7.11354L10.2717 5.46739C10.2414 5.39659 10.185 5.34017 10.1141 5.30983L8.468 4.60433C8.22557 4.50044 8.22557 4.15675 8.468 4.05285L10.1141 3.34736C10.185 3.31701 10.2414 3.26059 10.2717 3.18979L10.9772 1.54364C11.0811 1.30121 11.4248 1.30121 11.5287 1.54364L12.2342 3.18979C12.2645 3.26059 12.3209 3.31701 12.3918 3.34736L14.0379 4.05285C14.2803 4.15675 14.2803 4.50044 14.0379 4.60433L12.3918 5.30983C12.3209 5.34017 12.2645 5.39659 12.2342 5.46739Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/custom/node.svg b/src/assets/icons/custom/node.svg
new file mode 100644
index 000000000..3239b59bd
--- /dev/null
+++ b/src/assets/icons/custom/node.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 10L10.598 10.2577C10.4812 10.6954 10.0848 11 9.63172 11H5.30161C4.64458 11 4.16608 10.3772 4.33538 9.74234L5.40204 5.74234C5.51878 5.30458 5.91523 5 6.36828 5H10.8286C11.4199 5 11.8505 5.56051 11.6982 6.13185L11.6736 6.22389M14 8H10M4.5 8H2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/custom/template.svg b/src/assets/icons/custom/template.svg
new file mode 100644
index 000000000..2a2a75f8d
--- /dev/null
+++ b/src/assets/icons/custom/template.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1894 6.24254L13.6894 4.24254C13.8471 3.61139 13.3698 3 12.7192 3H3.78077C3.3219 3 2.92192 3.3123 2.81062 3.75746L2.31062 5.75746C2.15284 6.38861 2.63019 7 3.28077 7H12.2192C12.6781 7 13.0781 6.6877 13.1894 6.24254Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M13.1894 12.2425L13.6894 10.2425C13.8471 9.61139 13.3698 9 12.7192 9H8.78077C8.3219 9 7.92192 9.3123 7.81062 9.75746L7.31062 11.7575C7.15284 12.3886 7.6302 13 8.28077 13H12.2192C12.6781 13 13.0781 12.6877 13.1894 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.18936 12.2425L5.68936 10.2425C5.84714 9.61139 5.36978 9 4.71921 9H3.78077C3.3219 9 2.92192 9.3123 2.81062 9.75746L2.31062 11.7575C2.15284 12.3886 2.6302 13 3.28077 13H4.21921C4.67808 13 5.07806 12.6877 5.18936 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 0ef8598d1..72a451d81 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -8,10 +8,13 @@
         :icon-badge="tab.iconBadge"
         :tooltip="tab.tooltip"
         :tooltip-suffix="getTabTooltipSuffix(tab)"
+        :label="tab.label || tab.title"
+        :is-small="isSmall"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
+      <SidebarTemplatesButton />
       <div class="side-tool-bar-end">
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarHelpCenterIcon />
@@ -43,6 +46,7 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
+import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -86,7 +90,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   box-shadow: var(--bar-shadow);
 
   --sidebar-width: 4rem;
-  --sidebar-icon-size: 1.5rem;
+  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-container.small-sidebar {
diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue
index 5002d7724..f38a0aa0b 100644
--- a/src/components/sidebar/SidebarIcon.vue
+++ b/src/components/sidebar/SidebarIcon.vue
@@ -19,12 +19,29 @@
     @click="emit('click', $event)"
   >
     <template #icon>
-      <slot name="icon">
-        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-          <i :class="icon + ' side-bar-button-icon'" />
-        </OverlayBadge>
-        <i v-else :class="icon + ' side-bar-button-icon'" />
-      </slot>
+      <div class="side-bar-button-content">
+        <slot name="icon">
+          <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+            <i
+              v-if="typeof icon === 'string'"
+              :class="icon + ' side-bar-button-icon'"
+            />
+            <component :is="icon" v-else class="side-bar-button-icon" />
+          </OverlayBadge>
+          <i
+            v-else-if="typeof icon === 'string'"
+            :class="icon + ' side-bar-button-icon'"
+          />
+          <component
+            :is="icon"
+            v-else-if="typeof icon === 'object'"
+            class="side-bar-button-icon"
+          />
+        </slot>
+        <span v-if="label && !isSmall" class="side-bar-button-label">{{
+          t(label)
+        }}</span>
+      </div>
     </template>
   </Button>
 </template>
@@ -33,6 +50,7 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
+import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -41,13 +59,17 @@ const {
   selected = false,
   tooltip = '',
   tooltipSuffix = '',
-  iconBadge = ''
+  iconBadge = '',
+  label = '',
+  isSmall = false
 } = defineProps<{
-  icon?: string
+  icon?: string | Component
   selected?: boolean
   tooltip?: string
   tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
+  label?: string
+  isSmall?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -74,10 +96,23 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 <style scoped>
 .side-bar-button {
   width: var(--sidebar-width);
-  height: var(--sidebar-width);
+  height: calc(var(--sidebar-width) + 0.5rem);
   border-radius: 0;
 }
 
+.side-tool-bar-end .side-bar-button {
+  height: var(--sidebar-width);
+}
+
+.side-bar-button-content {
+  @apply flex flex-col items-center gap-2;
+}
+
+.side-bar-button-label {
+  @apply text-[10px] text-center whitespace-nowrap;
+  line-height: 1;
+}
+
 .comfyui-body-left .side-bar-button.side-bar-button-selected,
 .comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
   border-left: 4px solid var(--p-button-text-primary-color);
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
new file mode 100644
index 000000000..b2b4c09c3
--- /dev/null
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <SidebarIcon
+    :icon="TemplateIcon"
+    :tooltip="$t('sideToolbar.templates')"
+    :label="$t('sideToolbar.labels.templates')"
+    :is-small="isSmall"
+    class="templates-tab-button"
+    @click="openTemplates"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, markRaw } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+// Import the custom template icon
+const TemplateIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/template'))
+)
+
+const settingStore = useSettingStore()
+const commandStore = useCommandStore()
+
+const isSmall = computed(
+  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
+)
+
+const openTemplates = () => {
+  void commandStore.execute('Comfy.BrowseTemplates')
+}
+</script>
diff --git a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
index 5764ec579..c5f5d9099 100644
--- a/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useModelLibrarySidebarTab.ts
@@ -1,16 +1,21 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
+const AiModelIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/ai-model'))
+)
+
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
-    icon: 'pi pi-box',
+    icon: AiModelIcon,
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
+    label: 'sideToolbar.labels.models',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
diff --git a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
index bdaa94e19..5da93a1c4 100644
--- a/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
+++ b/src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts
@@ -1,14 +1,19 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const NodeIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/node'))
+)
+
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
-    icon: 'pi pi-book',
+    icon: NodeIcon,
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
+    label: 'sideToolbar.labels.nodes',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useQueueSidebarTab.ts b/src/composables/sidebarTabs/useQueueSidebarTab.ts
index 9f1501aab..753a18fb5 100644
--- a/src/composables/sidebarTabs/useQueueSidebarTab.ts
+++ b/src/composables/sidebarTabs/useQueueSidebarTab.ts
@@ -15,6 +15,7 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.queue',
     tooltip: 'sideToolbar.queue',
+    label: 'sideToolbar.labels.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }
diff --git a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
index 842d3587a..772adf4de 100644
--- a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
+++ b/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
@@ -1,16 +1,20 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const WorkflowIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/workflow'))
+)
+
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
   return {
     id: 'workflows',
-    icon: 'pi pi-folder-open',
+    icon: WorkflowIcon,
     iconBadge: () => {
       if (
         settingStore.get('Comfy.Workflow.WorkflowTabsPosition') !== 'Sidebar'
@@ -22,6 +26,7 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.workflows',
     tooltip: 'sideToolbar.workflows',
+    label: 'sideToolbar.labels.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }
diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json
index 5862980c4..1db4a4919 100644
--- a/src/locales/ar/main.json
+++ b/src/locales/ar/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "تصفح القوالب المثال",
     "downloads": "التنزيلات",
     "helpCenter": "مركز المساعدة",
+    "labels": {
+      "models": "النماذج",
+      "nodes": "العُقَد",
+      "queue": "قائمة الانتظار",
+      "templates": "القوالب",
+      "workflows": "سير العمل"
+    },
     "logout": "تسجيل الخروج",
     "modelLibrary": "مكتبة النماذج",
     "newBlankWorkflow": "إنشاء سير عمل جديد فارغ",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "عرض القائمة المسطحة"
     },
+    "templates": "القوالب",
     "workflowTab": {
       "confirmDelete": "هل أنت متأكد من رغبتك في حذف هذا السير؟",
       "confirmDeleteTitle": "حذف سير العمل؟",
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 3c933f773..185b3c366 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -437,6 +437,14 @@
     "queue": "Queue",
     "nodeLibrary": "Node Library",
     "workflows": "Workflows",
+    "templates": "Templates",
+    "labels": {
+      "queue": "Queue",
+      "nodes": "Nodes",
+      "models": "Models",
+      "workflows": "Workflows",
+      "templates": "Templates"
+    },
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
     "newBlankWorkflow": "Create a new blank workflow",
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index 647d3df74..5d1304dc3 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "helpCenter": "Centro de ayuda",
+    "labels": {
+      "models": "Modelos",
+      "nodes": "Nodos",
+      "queue": "Cola",
+      "templates": "Plantillas",
+      "workflows": "Flujos de trabajo"
+    },
     "logout": "Cerrar sesión",
     "modelLibrary": "Biblioteca de modelos",
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "Mostrar lista plana"
     },
+    "templates": "Plantillas",
     "workflowTab": {
       "confirmDelete": "¿Estás seguro de que quieres eliminar este flujo de trabajo?",
       "confirmDeleteTitle": "¿Eliminar flujo de trabajo?",
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 6a2ddcd1c..e27a59864 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "helpCenter": "Centre d'aide",
+    "labels": {
+      "models": "Modèles",
+      "nodes": "Nœuds",
+      "queue": "File d’attente",
+      "templates": "Modèles",
+      "workflows": "Flux de travail"
+    },
     "logout": "Déconnexion",
     "modelLibrary": "Bibliothèque de modèles",
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "Afficher la liste plate"
     },
+    "templates": "Modèles",
     "workflowTab": {
       "confirmDelete": "Êtes-vous sûr de vouloir supprimer ce flux de travail ?",
       "confirmDeleteTitle": "Supprimer le flux de travail ?",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index d934551c9..aeb9691d1 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "helpCenter": "ヘルプセンター",
+    "labels": {
+      "models": "モデル",
+      "nodes": "ノード",
+      "queue": "キュー",
+      "templates": "テンプレート",
+      "workflows": "ワークフロー"
+    },
     "logout": "ログアウト",
     "modelLibrary": "モデルライブラリ",
     "newBlankWorkflow": "新しい空のワークフローを作成",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "フラットリストを表示"
     },
+    "templates": "テンプレート",
     "workflowTab": {
       "confirmDelete": "このワークフローを削除してもよろしいですか？",
       "confirmDeleteTitle": "ワークフローを削除しますか？",
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 4991f338a..62c35f48d 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "helpCenter": "도움말 센터",
+    "labels": {
+      "models": "모델",
+      "nodes": "노드",
+      "queue": "대기열",
+      "templates": "템플릿",
+      "workflows": "워크플로우"
+    },
     "logout": "로그아웃",
     "modelLibrary": "모델 라이브러리",
     "newBlankWorkflow": "새 빈 워크플로 만들기",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "평면 목록 표시"
     },
+    "templates": "템플릿",
     "workflowTab": {
       "confirmDelete": "정말로 이 워크플로를 삭제하시겠습니까?",
       "confirmDeleteTitle": "워크플로 삭제",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 290bc5609..e7acf0f1c 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
     "helpCenter": "Центр поддержки",
+    "labels": {
+      "models": "Модели",
+      "nodes": "Узлы",
+      "queue": "Очередь",
+      "templates": "Шаблоны",
+      "workflows": "Воркфлоу"
+    },
     "logout": "Выйти",
     "modelLibrary": "Библиотека моделей",
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "Показать плоский список"
     },
+    "templates": "Шаблоны",
     "workflowTab": {
       "confirmDelete": "Вы уверены, что хотите удалить этот рабочий процесс?",
       "confirmDeleteTitle": "Удалить рабочий процесс?",
diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json
index 331be2a5f..8a6872ff0 100644
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "瀏覽範例模板",
     "downloads": "下載",
     "helpCenter": "說明中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型庫",
     "newBlankWorkflow": "建立新的空白工作流程",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "顯示平面清單"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您確定要刪除這個工作流程嗎？",
       "confirmDeleteTitle": "刪除工作流程？",
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 8da79e6d1..08bbd46c3 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -1197,6 +1197,13 @@
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
     "helpCenter": "帮助中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型库",
     "newBlankWorkflow": "创建空白工作流",
@@ -1234,6 +1241,7 @@
       },
       "showFlatList": "平铺结果"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您确定要删除此工作流吗？",
       "confirmDeleteTitle": "删除工作流？",
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index 876736619..2143b0e1f 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -40,7 +40,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
 
     useCommandStore().registerCommand({
       id: `Workspace.ToggleSidebarTab.${tab.id}`,
-      icon: tab.icon,
+      icon: typeof tab.icon === 'string' ? tab.icon : undefined,
       label: labelFunction,
       tooltip: tooltipFunction,
       versionAdded: '1.3.9',
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index e9d705115..1cd3e4480 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -6,9 +6,10 @@ import type { ComfyCommand } from '@/stores/commandStore'
 export interface BaseSidebarTabExtension {
   id: string
   title: string
-  icon?: string
+  icon?: string | Component
   iconBadge?: string | (() => string | null)
   tooltip?: string
+  label?: string
 }
 
 export interface BaseBottomPanelExtension {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index ad347c896..c6fdfff71 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,5 +1,17 @@
 /// <reference types="vite/client" />
 
+declare module 'virtual:icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
+declare module '~icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
 declare global {
   interface Window {
     __COMFYUI_FRONTEND_VERSION__: string
diff --git a/vitest.config.ts b/vitest.config.ts
index 648f9dfc0..a0912c561 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,8 +1,18 @@
 import vue from '@vitejs/plugin-vue'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import Icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        comfy: FileSystemIconLoader('src/assets/icons/custom')
+      }
+    })
+  ],
   test: {
     globals: true,
     environment: 'happy-dom',