From 3117d0fdc1040700f5850dc0127f58d85c11a8d4 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 12 Nov 2024 22:38:29 -0500
Subject: [PATCH] Fix loading of model library in non-electron env (#1521)

---
 .../common/TreeExplorerTreeNode.vue           | 38 +++++++++----------
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 19 ++--------
 .../modelLibrary/ElectronDownloadItems.vue    | 20 ++++++++++
 3 files changed, 41 insertions(+), 36 deletions(-)
 create mode 100644 src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue

diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index 9b9ffcc5c4..d2c4f48e36 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -10,27 +10,25 @@
     ]"
     ref="container"
   >
-    <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"
+    <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>
-      <div class="node-actions">
-        <slot name="actions" :node="props.node"></slot>
-      </div>
+        <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>
 </template>
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index d5015d6cb7..b1de54833d 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -28,15 +28,7 @@
       />
     </template>
     <template #body>
-      <div class="mx-6 mb-4" v-if="downloads.length > 0">
-        <div class="text-lg my-4">
-          {{ t('electronFileDownload.inProgress') }}
-        </div>
-
-        <template v-for="download in downloads" :key="download.url">
-          <DownloadItem :download="download" />
-        </template>
-      </div>
+      <ElectronDownloadItems v-if="isElectron()" />
 
       <TreeExplorer
         class="model-lib-tree-explorer py-0"
@@ -58,7 +50,7 @@ import SearchBox from '@/components/common/SearchBox.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
-import DownloadItem from '@/components/sidebar/tabs/modelLibrary/DownloadItem.vue'
+import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import {
   ComfyModelDef,
   ModelFolder,
@@ -76,9 +68,7 @@ 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 { useI18n } from 'vue-i18n'
-import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
-import { storeToRefs } from 'pinia'
+import { isElectron } from '@/utils/envUtil'
 
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
@@ -86,9 +76,6 @@ const settingStore = useSettingStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
-const { t } = useI18n()
-const electronDownloadStore = useElectronDownloadStore()
-const { downloads } = storeToRefs(electronDownloadStore)
 
 const filteredModels = ref<ComfyModelDef[]>([])
 const handleSearch = async (query: string) => {
diff --git a/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
new file mode 100644
index 0000000000..1106a5c374
--- /dev/null
+++ b/src/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="mx-6 mb-4" v-if="downloads.length > 0">
+    <div class="text-lg my-4">
+      {{ $t('electronFileDownload.inProgress') }}
+    </div>
+
+    <template v-for="download in downloads" :key="download.url">
+      <DownloadItem :download="download" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DownloadItem from './DownloadItem.vue'
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { storeToRefs } from 'pinia'
+
+const electronDownloadStore = useElectronDownloadStore()
+const { downloads } = storeToRefs(electronDownloadStore)
+</script>