feat: Remove successful model downloads (#1710)

* feat: Remove successful model downloads

* PR comments

---------

Co-authored-by: Oto Ciulis <oto.ciulis@gmail.com>

src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="mx-6 mb-4" v-if="downloads.length > 0">
+  <div class="mx-6 mb-4" v-if="inProgressDownloads.length > 0">
     <div class="text-lg my-4">
       {{ $t('electronFileDownload.inProgress') }}
     </div>
 
-    <template v-for="download in downloads" :key="download.url">
+    <template v-for="download in inProgressDownloads" :key="download.url">
       <DownloadItem :download="download" />
     </template>
   </div>
@@ -16,5 +16,5 @@ import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { storeToRefs } from 'pinia'
 
 const electronDownloadStore = useElectronDownloadStore()
-const { downloads } = storeToRefs(electronDownloadStore)
+const { inProgressDownloads } = storeToRefs(electronDownloadStore)
 </script>

src/hooks/sidebarTabs/modelLibrarySidebarTab.ts

@@ -18,8 +18,8 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     iconBadge: () => {
       if (isElectron()) {
         const electronDownloadStore = useElectronDownloadStore()
-        if (electronDownloadStore.downloads.length > 0) {
-          return electronDownloadStore.downloads.length.toString()
+        if (electronDownloadStore.inProgressDownloads.length > 0) {
+          return electronDownloadStore.inProgressDownloads.length.toString()
         }
       }
 

src/stores/electronDownloadStore.ts

@@ -1,8 +1,8 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { isElectron, electronAPI } from '@/utils/envUtil'
-import type {
-  DownloadState,
+import {
+  type DownloadState,
   DownloadStatus
 } from '@comfyorg/comfyui-electron-types'
 
@@ -69,6 +69,11 @@ export const useElectronDownloadStore = defineStore('downloads', () => {
     resume,
     cancel,
     findByUrl,
-    initialize
+    initialize,
+    inProgressDownloads: computed(() =>
+      downloads.value.filter(
+        ({ status }) => status !== DownloadStatus.COMPLETED
+      )
+    )
   }
 })