Rearrange workflow tabs (#2026)

src/components/topbar/WorkflowTabs.vue

@@ -9,36 +9,11 @@
     dataKey="value"
   >
     <template #option="{ option }">
-      <div
-        class="flex p-2 gap-2"
+      <WorkflowTab
         @contextmenu="showContextMenu($event, option)"
         @click.middle="onCloseWorkflow(option)"
-      >
-        <span
-          class="workflow-label text-sm max-w-[150px] truncate inline-block"
-          v-tooltip.bottom="option.workflow.key"
-        >
-          {{ option.workflow.filename }}
-        </span>
-        <div class="relative">
-          <span
-            class="status-indicator"
-            v-if="
-              !workspaceStore.shiftDown &&
-              (option.workflow.isModified || !option.workflow.isPersisted)
-            "
-            >•</span
-          >
-          <Button
-            class="close-button p-0 w-auto"
-            icon="pi pi-times"
-            text
-            severity="secondary"
-            size="small"
-            @click.stop="onCloseWorkflow(option)"
-          />
-        </div>
-      </div>
+        :workflow-option="option"
+      />
     </template>
   </SelectButton>
   <Button
@@ -52,6 +27,7 @@
 </template>
 
 <script setup lang="ts">
+import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
@@ -78,11 +54,6 @@ const workflowStore = useWorkflowStore()
 const rightClickedTab = ref<WorkflowOption>(null)
 const menu = ref()
 
-const showContextMenu = (event, option) => {
-  rightClickedTab.value = option
-  menu.value.show(event)
-}
-
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
   workflow
@@ -126,6 +97,10 @@ const onCloseWorkflow = (option: WorkflowOption) => {
   closeWorkflows([option])
 }
 
+const showContextMenu = (event, option) => {
+  rightClickedTab.value = option
+  menu.value.show(event)
+}
 const contextMenuItems = computed(() => {
   const tab = rightClickedTab.value as WorkflowOption
   if (!tab) return []
@@ -166,7 +141,6 @@ const contextMenuItems = computed(() => {
     }
   ]
 })
-
 const commandStore = useCommandStore()
 </script>
 
@@ -189,14 +163,6 @@ const commandStore = useCommandStore()
   @apply visible;
 }
 
-.status-indicator {
-  @apply absolute font-bold;
-  font-size: 1.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 :deep(.p-togglebutton:hover) .status-indicator {
   @apply hidden;
 }