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;