Support 2nd row location for workflow tabs (#2193)

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

src/components/graph/GraphCanvas.vue

@@ -13,6 +13,9 @@
         <BottomPanel />
       </template>
       <template #graph-canvas-panel>
+        <SecondRowWorkflowTabs
+          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
+        />
         <GraphCanvasMenu v-if="canvasMenuEnabled" />
       </template>
     </LiteGraphCanvasSplitterOverlay>
@@ -48,6 +51,7 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
+import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { usePragmaticDroppable } from '@/hooks/dndHooks'
 import { api } from '@/scripts/api'
@@ -83,6 +87,9 @@ const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
+const workflowTabsPosition = computed(() =>
+  settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
+)
 const canvasMenuEnabled = computed(() =>
   settingStore.get('Comfy.Graph.CanvasMenu')
 )

src/components/topbar/SecondRowWorkflowTabs.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="absolute top-0 left-0 w-auto pointer-events-auto">
+    <WorkflowTabs />
+  </div>
+</template>
+
+<script setup lang="ts">
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+</script>
+
+<style scoped>
+:deep(.workflow-tabs) {
+  background-color: var(--comfy-menu-bg);
+}
+</style>

src/components/topbar/WorkflowTabs.vue

@@ -178,10 +178,14 @@ const handleWheel = (event: WheelEvent) => {
 }
 
 :deep(.p-togglebutton.p-togglebutton-checked) {
-  @apply border-b-2;
+  border-bottom-width: 1px;
   border-bottom-color: var(--p-button-text-primary-color);
 }
 
+:deep(.p-togglebutton:not(.p-togglebutton-checked)) {
+  opacity: 0.75;
+}
+
 :deep(.p-togglebutton-checked) .close-button,
 :deep(.p-togglebutton:hover) .close-button {
   @apply visible;

src/constants/coreSettings.ts

@@ -85,7 +85,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Sidebar size',
     type: 'combo',
     options: ['normal', 'small'],
-    defaultValue: () => (window.innerWidth < 1600 ? 'small' : 'normal')
+    // Default to small if the window is less than 1536px(2xl) wide.
+    defaultValue: () => (window.innerWidth < 1536 ? 'small' : 'normal')
   },
   {
     id: 'Comfy.TextareaWidget.FontSize',
@@ -399,8 +400,10 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.Workflow.WorkflowTabsPosition',
     name: 'Opened workflows position',
     type: 'combo',
-    options: ['Sidebar', 'Topbar'],
-    defaultValue: 'Topbar'
+    options: ['Sidebar', 'Topbar', 'Topbar (2nd-row)'],
+    // Default to topbar (2nd-row) if the window is less than 1536px(2xl) wide.
+    defaultValue: () =>
+      window.innerWidth < 1536 ? 'Topbar (2nd-row)' : 'Topbar'
   },
   {
     id: 'Comfy.Graph.CanvasMenu',

src/locales/en/settings.json

@@ -293,7 +293,8 @@
     "name": "Opened workflows position",
     "options": {
       "Sidebar": "Sidebar",
-      "Topbar": "Topbar"
+      "Topbar": "Topbar",
+      "Topbar (2nd-row)": "Topbar (2nd-row)"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/locales/fr/settings.json

@@ -293,7 +293,8 @@
     "name": "Position des flux de travail ouverts",
     "options": {
       "Sidebar": "Barre latérale",
-      "Topbar": "Barre supérieure"
+      "Topbar": "Barre supérieure",
+      "Topbar (2nd-row)": "Barre supérieure (2ème rangée)"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/locales/ja/settings.json

@@ -293,7 +293,8 @@
     "name": "開いているワークフローの位置",
     "options": {
       "Sidebar": "サイドバー",
-      "Topbar": "トップバー"
+      "Topbar": "トップバー",
+      "Topbar (2nd-row)": "トップバー（2行目）"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/locales/ko/settings.json

@@ -293,7 +293,8 @@
     "name": "열린 워크플로 위치",
     "options": {
       "Sidebar": "사이드바",
-      "Topbar": "상단바"
+      "Topbar": "상단바",
+      "Topbar (2nd-row)": "상단바 (2번째 행)"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/locales/ru/settings.json

@@ -293,7 +293,8 @@
     "name": "Положение открытых рабочих процессов",
     "options": {
       "Sidebar": "Боковая панель",
-      "Topbar": "Верхняя панель"
+      "Topbar": "Верхняя панель",
+      "Topbar (2nd-row)": "Топбар (2-й ряд)"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/locales/zh/settings.json

@@ -293,7 +293,8 @@
     "name": "已打开工作流的位置",
     "options": {
       "Sidebar": "侧边栏",
-      "Topbar": "顶部栏"
+      "Topbar": "顶部栏",
+      "Topbar (2nd-row)": "顶部栏 (第二行)"
     }
   },
   "LiteGraph_Canvas_MaximumFps": {

src/types/apiTypes.ts

@@ -535,7 +535,11 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Validation.NodeDefs': z.boolean(),
       'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),
       'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
-      'Comfy.Workflow.WorkflowTabsPosition': z.enum(['Sidebar', 'Topbar']),
+      'Comfy.Workflow.WorkflowTabsPosition': z.enum([
+        'Sidebar',
+        'Topbar',
+        'Topbar (2nd-row)'
+      ]),
       'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
       'Comfy.WidgetControlMode': z.enum(['before', 'after']),
       'Comfy.Window.UnloadConfirmation': z.boolean(),