From 5e1dc915a09a434d39c07704f323e71302a3723d Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 6 Dec 2025 22:19:20 -0800
Subject: [PATCH] Extract to own component file

---
 src/components/TopMenuSection.vue            | 23 ++------------
 src/components/queue/QueueInlineProgress.vue | 33 ++++++++++++++++++++
 2 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 src/components/queue/QueueInlineProgress.vue

diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index d9832c7aa..9197a7f67 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -59,20 +59,7 @@
         >
           <i class="icon-[lucide--panel-right] size-4" />
         </IconButton>
-        <div
-          v-if="showInlineProgress"
-          aria-hidden="true"
-          class="pointer-events-none absolute inset-x-0 bottom-0 h-[3px]"
-        >
-          <div
-            class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
-            :style="{ width: `${totalPercent}%` }"
-          />
-          <div
-            class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
-            :style="{ width: `${currentNodePercent}%` }"
-          />
-        </div>
+        <QueueInlineProgress :hidden="isQueueOverlayExpanded" />
       </div>
       <QueueProgressOverlay
         v-model:expanded="isQueueOverlayExpanded"
@@ -91,12 +78,12 @@ import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
+import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
@@ -129,12 +116,6 @@ const queueHistoryTooltipConfig = computed(() =>
 const cancelJobTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.interrupt'))
 )
-const { totalPercent, currentNodePercent } = useQueueProgress()
-const showInlineProgress = computed(
-  () =>
-    !isQueueOverlayExpanded.value &&
-    (totalPercent.value > 0 || currentNodePercent.value > 0)
-)
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
diff --git a/src/components/queue/QueueInlineProgress.vue b/src/components/queue/QueueInlineProgress.vue
new file mode 100644
index 000000000..2cb7e3176
--- /dev/null
+++ b/src/components/queue/QueueInlineProgress.vue
@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="shouldShow"
+    aria-hidden="true"
+    class="pointer-events-none absolute inset-x-0 bottom-0 h-[3px]"
+  >
+    <div
+      class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
+      :style="{ width: `${totalPercent}%` }"
+    />
+    <div
+      class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
+      :style="{ width: `${currentNodePercent}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+
+const props = defineProps<{
+  hidden?: boolean
+}>()
+
+const { totalPercent, currentNodePercent } = useQueueProgress()
+
+const shouldShow = computed(
+  () =>
+    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+)
+</script>