From ba3e2edb8a4e9c8730ac2ed1e33c278536835196 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benceruleanlu@proton.me>
Date: Thu, 24 Apr 2025 16:41:46 -0400
Subject: [PATCH] Add unified sidebar width setting (#3605)

Co-authored-by: Benjamin Lu <templu1107@proton.me>
Co-authored-by: github-actions <github-actions@github.com>
---
 src/components/LiteGraphCanvasSplitterOverlay.vue | 12 ++++++++++--
 src/constants/coreSettings.ts                     |  8 ++++++++
 src/locales/en/settings.json                      |  3 +++
 src/locales/es/settings.json                      |  3 +++
 src/locales/fr/settings.json                      |  3 +++
 src/locales/ja/settings.json                      |  3 +++
 src/locales/ko/settings.json                      |  3 +++
 src/locales/ru/settings.json                      |  3 +++
 src/locales/zh/settings.json                      |  3 +++
 src/schemas/apiSchema.ts                          |  1 +
 10 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 60cd7a34d..6ac456cb5 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -1,9 +1,9 @@
 <template>
   <Splitter
-    :key="activeSidebarTabId ?? undefined"
+    :key="sidebarStateKey"
     class="splitter-overlay-root splitter-overlay"
     :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-    :state-key="activeSidebarTabId ?? undefined"
+    :state-key="sidebarStateKey"
     state-storage="local"
   >
     <SplitterPanel
@@ -59,6 +59,10 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
 
+const unifiedWidth = computed(() =>
+  settingStore.get('Comfy.Sidebar.UnifiedWidth')
+)
+
 const sidebarPanelVisible = computed(
   () => useSidebarTabStore().activeSidebarTab !== null
 )
@@ -68,6 +72,10 @@ const bottomPanelVisible = computed(
 const activeSidebarTabId = computed(
   () => useSidebarTabStore().activeSidebarTabId
 )
+
+const sidebarStateKey = computed(() => {
+  return unifiedWidth.value ? 'unified-sidebar' : activeSidebarTabId.value ?? ''
+})
 </script>
 
 <style scoped>
diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index 993f19da2..7dd5ec5ee 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -88,6 +88,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     // Default to small if the window is less than 1536px(2xl) wide.
     defaultValue: () => (window.innerWidth < 1536 ? 'small' : 'normal')
   },
+  {
+    id: 'Comfy.Sidebar.UnifiedWidth',
+    category: ['Appearance', 'Sidebar', 'UnifiedWidth'],
+    name: 'Unified sidebar width',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.18.1'
+  },
   {
     id: 'Comfy.TextareaWidget.FontSize',
     category: ['Appearance', 'Node Widget', 'TextareaWidget', 'FontSize'],
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index c0a45e915..23fdfbcb7 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -293,6 +293,9 @@
       "small": "small"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Unified sidebar width"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "Snap to grid size",
     "tooltip": "When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid."
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 0e627cd9a..87978e20d 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -293,6 +293,9 @@
       "small": "pequeña"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Ancho unificado de la barra lateral"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "Tamaño de la cuadrícula para ajustar",
     "tooltip": "Al arrastrar y redimensionar nodos mientras se mantiene presionada la tecla shift, se alinearán a la cuadrícula, esto controla el tamaño de esa cuadrícula."
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index d90c80d98..364828fbb 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -293,6 +293,9 @@
       "small": "petit"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Largeur unifiée de la barre latérale"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "Taille de la grille d'alignement",
     "tooltip": "Lors du déplacement et du redimensionnement des nœuds tout en maintenant shift, ils seront alignés sur la grille, cela contrôle la taille de cette grille."
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index a7e146099..7af19f9e2 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -293,6 +293,9 @@
       "small": "小"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "サイドバーの幅を統一"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "グリッドサイズにスナップ",
     "tooltip": "シフトを押しながらノードをドラッグおよびサイズ変更すると、グリッドに整列されます。これにより、そのグリッドのサイズが制御されます。"
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 6d6e6f5dd..cfa940fb6 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -293,6 +293,9 @@
       "small": "작음"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "통합 사이드바 너비"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "그리드 크기에 스냅",
     "tooltip": "Shift 키를 누른 상태에서 노드를 드래그하거나 크기를 조절하면 그리드에 맞춰 정렬됩니다. 이 설정은 그리드의 크기를 제어합니다."
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 3c3c97c48..9fcd8bd4f 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -293,6 +293,9 @@
       "small": "маленький"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Унифицированная ширина боковой панели"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "Размер сетки привязки",
     "tooltip": "При перетаскивании и изменении размера нод, удерживая shift, они будут выровнены по сетке, это контролирует размер этой сетки."
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index 09af188b1..d05955ee9 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -293,6 +293,9 @@
       "small": "小"
     }
   },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "统一侧边栏宽度"
+  },
   "Comfy_SnapToGrid_GridSize": {
     "name": "吸附网格大小",
     "tooltip": "在按住shift拖动和调整节点大小时，节点将对齐到网格，该选项控制网格。"
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 157ee7856..5d395d486 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -384,6 +384,7 @@ const zSettings = z.object({
   'Comfy.PromptFilename': z.boolean(),
   'Comfy.Sidebar.Location': z.enum(['left', 'right']),
   'Comfy.Sidebar.Size': z.enum(['small', 'normal']),
+  'Comfy.Sidebar.UnifiedWidth': z.boolean(),
   'Comfy.SwitchUser': z.any(),
   'Comfy.SnapToGrid.GridSize': z.number(),
   'Comfy.TextareaWidget.FontSize': z.number(),