Update side toolbar menu (#4946)

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>
2026-01-26 19:09:52 +00:00 · 2025-08-13 19:46:03 +01:00
parent 1784e2b5a3
commit efc0431a5e
23 changed files with 218 additions and 19 deletions
--- a/src/assets/icons/custom/ai-model.svg
+++ 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>
--- a/src/assets/icons/custom/node.svg
+++ 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>
--- a/src/assets/icons/custom/template.svg
+++ 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>
--- 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 {
--- 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);
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ 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>
--- 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: () => {
--- 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'
  }
--- 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'
  }
--- 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'
  }
--- 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": "حذف سير العمل؟",
--- 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",
--- 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?",
--- 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 ?",
--- 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": "ワークフローを削除しますか？",
--- 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": "워크플로 삭제",
--- 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": "Удалить рабочий процесс?",
--- 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": "刪除工作流程？",
--- 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": "删除工作流？",
--- 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',
--- 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 {
--- 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
--- 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',