feat: Add dropdown list for additional tabs (#5046)

* feat: Add dropdown list for additional tabs

* fix: workflow menu and tabs styles

Author: ssidharth010

src/components/topbar/WorkflowOverflowMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <Button
+      v-tooltip="{ value: $t('g.moreWorkflows'), showDelay: 300 }"
+      class="rounded-none"
+      icon="pi pi-ellipsis-h"
+      text
+      severity="secondary"
+      :aria-label="$t('g.moreWorkflows')"
+      @click="menu?.toggle($event)"
+    />
+    <Menu
+      ref="menu"
+      :model="menuItems"
+      :popup="true"
+      class="max-h-[40vh] overflow-auto"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Menu from 'primevue/menu'
+import { computed, ref } from 'vue'
+
+import { useWorkflowService } from '@/services/workflowService'
+import type { ComfyWorkflow } from '@/stores/workflowStore'
+
+const props = defineProps<{
+  workflows: ComfyWorkflow[]
+  activeWorkflow: ComfyWorkflow | null
+}>()
+
+const menu = ref<InstanceType<typeof Menu> | null>(null)
+const workflowService = useWorkflowService()
+
+const menuItems = computed(() =>
+  props.workflows.map((workflow: ComfyWorkflow) => ({
+    label: workflow.filename,
+    icon:
+      props.activeWorkflow?.key === workflow.key ? 'pi pi-check' : undefined,
+    command: () => {
+      void workflowService.openWorkflow(workflow)
+    }
+  }))
+)
+</script>

src/components/topbar/WorkflowTabs.vue

@@ -16,7 +16,7 @@
       ref="scrollPanelRef"
       class="overflow-hidden no-drag"
       :pt:content="{
-        class: 'p-0 w-full',
+        class: 'p-0 w-full flex',
         onwheel: handleWheel
       }"
       pt:bar-x="h-1"
@@ -48,6 +48,11 @@
       :disabled="!rightArrowEnabled"
       @mousedown="whileMouseDown($event, () => scroll(1))"
     />
+    <WorkflowOverflowMenu
+      v-if="showOverflowArrows"
+      :workflows="workflowStore.openWorkflows"
+      :active-workflow="workflowStore.activeWorkflow"
+    />
     <Button
       v-tooltip="{ value: $t('sideToolbar.newBlankWorkflow'), showDelay: 300 }"
       class="new-blank-workflow-button flex-shrink-0 no-drag rounded-none"
@@ -85,6 +90,8 @@ import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
+import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
+
 interface WorkflowOption {
   value: string
   workflow: ComfyWorkflow

src/locales/en/main.json

@@ -148,7 +148,8 @@
     "micPermissionDenied": "Microphone permission denied",
     "noAudioRecorded": "No audio recorded",
     "nodesRunning": "nodes running",
-    "duplicate": "Duplicate"
+    "duplicate": "Duplicate",
+    "moreWorkflows": "More workflows"
   },
   "manager": {
     "title": "Custom Nodes Manager",