From 05d2cae61c5004b5eaee4320e34d9203865ffeff Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sun, 7 Dec 2025 00:48:59 -0800
Subject: [PATCH] Add close button back to queue progress overlay

---
 src/components/queue/QueueOverlayHeader.vue   | 15 ++++++++++++++
 src/components/queue/QueueProgressOverlay.vue | 20 +++++++------------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/queue/QueueOverlayHeader.vue b/src/components/queue/QueueOverlayHeader.vue
index 9b45cc57b..365f4a3d9 100644
--- a/src/components/queue/QueueOverlayHeader.vue
+++ b/src/components/queue/QueueOverlayHeader.vue
@@ -62,6 +62,18 @@
           </IconTextButton>
         </div>
       </Popover>
+      <IconButton
+        v-tooltip.top="closeTooltipConfig"
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
+        :aria-label="t('g.close')"
+        @click="onCloseClick"
+      >
+        <i
+          class="icon-[lucide--x] block size-4 leading-none text-text-secondary"
+        />
+      </IconButton>
     </div>
   </div>
 </template>
@@ -84,16 +96,19 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: 'clearHistory'): void
+  (e: 'close'): void
 }>()
 
 const { t } = useI18n()
 
 const morePopoverRef = ref<PopoverMethods | null>(null)
+const closeTooltipConfig = computed(() => buildTooltipConfig(t('g.close')))
 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 
 const onMoreClick = (event: MouseEvent) => {
   morePopoverRef.value?.toggle(event)
 }
+const onCloseClick = () => emit('close')
 const onClearHistoryFromMenu = () => {
   morePopoverRef.value?.hide()
   emit('clearHistory')
diff --git a/src/components/queue/QueueProgressOverlay.vue b/src/components/queue/QueueProgressOverlay.vue
index 63915fb61..398d2414a 100644
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -10,19 +10,16 @@
       <!-- Expanded state -->
       <QueueOverlayExpanded
         v-if="isExpanded"
-        v-model:selected-job-tab="selectedJobTab"
-        v-model:selected-workflow-filter="selectedWorkflowFilter"
-        v-model:selected-sort-mode="selectedSortMode"
         class="flex-1 min-h-0"
         :header-title="headerTitle"
         :show-concurrent-indicator="showConcurrentIndicator"
         :concurrent-workflow-count="concurrentWorkflowCount"
+        :active-jobs-count="activeJobsCount"
         :queued-count="queuedCount"
         :displayed-job-groups="displayedJobGroups"
-        :has-failed-jobs="hasFailedJobs"
-        @show-assets="openAssetsSidebar"
         @clear-history="onClearHistoryFromMenu"
         @clear-queued="cancelQueuedWorkflows"
+        @close="closeOverlay"
         @cancel-item="onCancelItem"
         @delete-item="onDeleteItem"
         @view-item="inspectJobAsset"
@@ -139,14 +136,7 @@ const showConcurrentIndicator = computed(
   () => concurrentWorkflowCount.value > 1
 )
 
-const {
-  selectedJobTab,
-  selectedWorkflowFilter,
-  selectedSortMode,
-  hasFailedJobs,
-  filteredTasks,
-  groupedJobItems
-} = useJobList()
+const { filteredTasks, groupedJobItems } = useJobList()
 
 const displayedJobGroups = computed(() => groupedJobItems.value)
 
@@ -171,6 +161,10 @@ const setExpanded = (expanded: boolean) => {
   isExpanded.value = expanded
 }
 
+const closeOverlay = () => {
+  setExpanded(false)
+}
+
 const openExpandedFromEmpty = () => {
   setExpanded(true)
 }