feat: Add download progress to sidebar

src/components/common/ElectronFileDownload.vue

@@ -85,6 +85,7 @@ interface ModelDownload {
   url: string
   status: 'paused' | 'in_progress' | 'cancelled'
   progress: number
+  savePath: string
 }
 
 const { t } = useI18n()
@@ -116,8 +117,8 @@ DownloadManager.onDownloadProgress((data: ModelDownload) => {
 const triggerDownload = async () => {
   await DownloadManager.startDownload(
     props.url,
-    filename.trim(),
-    savePath.trim()
+    savePath.trim(),
+    filename.trim()
   )
 }
 

src/components/common/TreeExplorerTreeNode.vue

@@ -10,25 +10,30 @@
     ]"
     ref="container"
   >
-    <div class="node-content">
-      <span class="node-label">
-        <slot name="before-label" :node="props.node"></slot>
-        <EditableText
-          :modelValue="node.label"
-          :isEditing="isEditing"
-          @edit="handleRename"
+    <div class="flex flex-col w-full">
+      <div class="node-content">
+        <span class="node-label">
+          <slot name="before-label" :node="props.node"></slot>
+          <EditableText
+            :modelValue="node.label"
+            :isEditing="isEditing"
+            @edit="handleRename"
+          />
+          <slot name="after-label" :node="props.node"></slot>
+        </span>
+        <Badge
+          v-if="showNodeBadgeText"
+          :value="nodeBadgeText"
+          severity="secondary"
+          class="leaf-count-badge"
         />
-        <slot name="after-label" :node="props.node"></slot>
-      </span>
-      <Badge
-        v-if="showNodeBadgeText"
-        :value="nodeBadgeText"
-        severity="secondary"
-        class="leaf-count-badge"
-      />
-    </div>
-    <div class="node-actions">
-      <slot name="actions" :node="props.node"></slot>
+      </div>
+      <div class="node-actions">
+        <slot name="actions" :node="props.node"></slot>
+      </div>
+      <div v-if="node.progress">
+        <Progress :value="node.progress" :showLabel="false" class="w-full" />
+      </div>
     </div>
   </div>
 </template>

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -65,12 +65,26 @@ import { computed, ref, watch, toRef, onMounted, nextTick } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { app } from '@/scripts/app'
 import { buildTree } from '@/utils/treeUtil'
+import { isElectron, electronAPI } from '@/utils/envUtil'
+import { useI18n } from 'vue-i18n'
+
+const { DownloadManager } = electronAPI()
+
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
 const settingStore = useSettingStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+const { t } = useI18n()
+
+interface ModelDownload {
+  url: string
+  status: 'paused' | 'in_progress' | 'cancelled'
+  progress: number
+  savePath: string
+  filename: string
+}
 
 const filteredModels = ref<ComfyModelDef[]>([])
 const handleSearch = async (query: string) => {
@@ -102,6 +116,8 @@ const root = computed<TreeNode>(() => {
   )
 })
 
+const downloads = ref<ModelOrFolder[]>([])
+
 const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
   const nameFormat = settingStore.get('Comfy.ModelLibrary.NameFormat')
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ModelOrFolder> => {
@@ -164,7 +180,23 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
       }
     }
   }
-  return fillNodeInfo(root.value)
+
+  const result = fillNodeInfo(root.value)
+
+  return {
+    ...result,
+    children: [
+      {
+        key: 'downloads',
+        label: 'downloads',
+        leaf: false,
+        children: downloads.value,
+        badgeText: downloads.value.length.toString(),
+        data: {}
+      },
+      ...result.children
+    ]
+  }
 })
 
 watch(
@@ -183,10 +215,61 @@ watch(
   { deep: true }
 )
 
+const getDownloadLabel = ({
+  status,
+  filename
+}: Pick<ModelDownload, 'status' | 'filename'>) => {
+  switch (status) {
+    case 'cancelled':
+      return `${filename} [${t('electronFileDownload.cancelled')}]`
+    case 'paused':
+      return `${filename} [${t('electronFileDownload.paused')}]`
+    case 'completed':
+      return `${filename} [${t('electronFileDownload.completed')}]`
+    default:
+      return filename
+  }
+}
+
+const convertDownloadToModel = ({
+  url,
+  status,
+  filename,
+  savePath,
+  progress
+}: ModelDownload) => ({
+  key: url,
+  label: getDownloadLabel({ filename, status }),
+  leaf: true,
+  children: [],
+  progress: status === 'in_progress' ? progress : undefined,
+  data: {}
+})
+
 onMounted(async () => {
   if (settingStore.get('Comfy.ModelLibrary.AutoLoadAll')) {
     await modelStore.loadModels()
   }
+
+  if (isElectron()) {
+    const allDownloads: ModelDownload[] =
+      await DownloadManager.getAllDownloads()
+
+    DownloadManager.onDownloadProgress((data: ModelDownload) => {
+      if (!downloads.value.find(({ key }) => key === data.url)) {
+        downloads.value.push(convertDownloadToModel(data))
+      }
+
+      let download = downloads.value.find(({ key }) => key === data.url)
+      download.progress =
+        data.status === 'in_progress' ? data.progress : undefined
+      download.label = getDownloadLabel(data)
+    })
+
+    for (const download of allDownloads) {
+      downloads.value.push(convertDownloadToModel(download))
+    }
+  }
 })
 </script>
 

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

@@ -73,7 +73,7 @@ const handleModelHover = async () => {
     modelPreviewStyle.value.left = `${targetRect.left - 400}px`
   }
 
-  modelDef.value.load()
+  modelDef.value.load?.()
 }
 
 const container = ref<HTMLElement | null>(null)
@@ -106,7 +106,7 @@ onMounted(() => {
   modelContentElement.value = container.value?.closest('.p-tree-node-content')
   modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
   modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
-  modelDef.value.load()
+  modelDef.value.load?.()
 })
 
 onUnmounted(() => {

src/i18n.ts

@@ -68,6 +68,7 @@ const messages = {
         sortOrder: 'Sort Order'
       },
       modelLibrary: 'Model Library',
+      downloads: 'Downloads',
       queueTab: {
         showFlatList: 'Show Flat List',
         backToAllTasks: 'Back to All Tasks',
@@ -120,8 +121,10 @@ const messages = {
     },
     electronFileDownload: {
       pause: 'Pause Download',
+      paused: 'Paused',
       resume: 'Resume Download',
-      cancel: 'Cancel Download'
+      cancel: 'Cancel Download',
+      cancelled: 'Cancelled'
     }
   },
   zh: {

src/types/treeExplorerTypes.ts

@@ -43,6 +43,7 @@ export interface TreeExplorerNode<T = any> {
   contextMenuItems?:
     | MenuItem[]
     | ((targetNode: RenderedTreeExplorerNode) => MenuItem[])
+  progress?: number
 }
 
 export interface RenderedTreeExplorerNode<T = any> extends TreeExplorerNode<T> {
@@ -53,6 +54,7 @@ export interface RenderedTreeExplorerNode<T = any> extends TreeExplorerNode<T> {
   totalLeaves: number
   /** Text to display on the leaf-count badge. Empty string means no badge. */
   badgeText?: string
+  progress?: number
 }
 
 export type TreeExplorerDragAndDropData<T = any> = {