Fix job details popover sticking

src/components/queue/job/JobGroupsList.vue

@@ -36,12 +36,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
 import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 
-defineProps<{ displayedJobGroups: JobGroup[] }>()
+const props = defineProps<{ displayedJobGroups: JobGroup[] }>()
+const displayedJobGroups = computed(() => props.displayedJobGroups)
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
@@ -89,4 +90,23 @@ const onDetailsLeave = (jobId: string) => {
     hideTimer.value = null
   }, 150)
 }
+
+const allJobIds = computed(() =>
+  displayedJobGroups.value.flatMap((group) =>
+    group.items.map((item) => item.id)
+  )
+)
+
+watch(allJobIds, (ids) => {
+  if (activeDetailsId.value && !ids.includes(activeDetailsId.value)) {
+    clearHideTimer()
+    clearShowTimer()
+    activeDetailsId.value = null
+  }
+})
+
+onBeforeUnmount(() => {
+  clearHideTimer()
+  clearShowTimer()
+})
 </script>

src/components/queue/job/QueueJobItem.vue

@@ -135,7 +135,7 @@
               size="sm"
               class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.delete')"
-              @click.stop="emit('delete')"
+              @click.stop="onDeleteClick"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </IconButton>
@@ -150,7 +150,7 @@
               size="sm"
               class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.cancel')"
-              @click.stop="emit('cancel')"
+              @click.stop="onCancelClick"
             >
               <i class="icon-[lucide--x] size-4" />
             </IconButton>
@@ -190,7 +190,7 @@
           size="sm"
           class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
           :aria-label="t('g.cancel')"
-          @click.stop="emit('cancel')"
+          @click.stop="onCancelClick"
         >
           <i class="icon-[lucide--x] size-4" />
         </IconButton>
@@ -355,6 +355,18 @@ const computedShowClear = computed(() => {
   return props.state !== 'completed'
 })
 
+const emitDetailsLeave = () => emit('details-leave', props.jobId)
+
+const onCancelClick = () => {
+  emitDetailsLeave()
+  emit('cancel')
+}
+
+const onDeleteClick = () => {
+  emitDetailsLeave()
+  emit('delete')
+}
+
 const onContextMenu = (event: MouseEvent) => {
   const shouldShowMenu = props.showMenu !== undefined ? props.showMenu : true
   if (shouldShowMenu) emit('menu', event)