Fix queue sidebar tab task filter (#1682)

* Fix queue sidebar tab task filter

* nit

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -118,7 +118,11 @@ import OutputFilters from './queue/OutputFilters.vue'
 import ResultGallery from './queue/ResultGallery.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import {
+  TaskItemDisplayStatus,
+  TaskItemImpl,
+  useQueueStore
+} from '@/stores/queueStore'
 import { api } from '@/scripts/api'
 import { ComfyNode } from '@/types/comfyWorkflow'
 import { useSettingStore } from '@/stores/settingStore'
@@ -170,9 +174,7 @@ const allTasks = computed(() =>
     ? folderTask.value
       ? folderTask.value.flatten()
       : []
-    : isExpanded.value
-      ? queueStore.flatTasks
-      : queueStore.tasks
+    : filterTasks(isExpanded.value ? queueStore.flatTasks : queueStore.tasks)
 )
 const allGalleryItems = computed(() =>
   allTasks.value.flatMap((task: TaskItemImpl) => {
@@ -182,30 +184,24 @@ const allGalleryItems = computed(() =>
 )
 
 const filterTasks = (tasks: TaskItemImpl[]) =>
-  tasks
-    .filter((t) => {
-      if (
-        hideCanceled.value &&
-        t.status?.messages?.at(-1)?.[0] === 'execution_interrupted'
-      ) {
-        return false
-      }
+  tasks.filter((task: TaskItemImpl) => {
+    if (
+      hideCanceled.value &&
+      task.displayStatus === TaskItemDisplayStatus.Cancelled
+    ) {
+      return false
+    }
 
-      if (
-        hideCached.value &&
-        t.flatOutputs?.length &&
-        t.flatOutputs.every((o) => o.cached)
-      ) {
-        return false
-      }
+    if (hideCached.value && task.isCached) {
+      return false
+    }
 
-      return true
-    })
-    .slice(0, ITEMS_PER_PAGE)
+    return true
+  })
 
 const loadMoreItems = () => {
   const currentLength = visibleTasks.value.length
-  const newTasks = filterTasks(allTasks.value).slice(
+  const newTasks = allTasks.value.slice(
     currentLength,
     currentLength + ITEMS_PER_PAGE
   )
@@ -240,7 +236,7 @@ useResizeObserver(scrollContainer, () => {
 })
 
 const updateVisibleTasks = () => {
-  visibleTasks.value = filterTasks(allTasks.value)
+  visibleTasks.value = allTasks.value
 }
 
 const toggleExpanded = () => {

src/stores/queueStore.ts

@@ -265,6 +265,12 @@ export class TaskItemImpl {
     }
   }
 
+  get isCached() {
+    return (
+      this.flatOutputs && _.every(this.flatOutputs, (output) => output.cached)
+    )
+  }
+
   get executionStartTimestamp() {
     const message = this.messages.find(
       (message) => message[0] === 'execution_start'