From 57b138d866741e859c2861cc120acfbe7bc7de1e Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 14:01:00 +0900
Subject: [PATCH 01/36] basic/empty model library sidebar tab

in-progress
---
 src/App.vue                                   |   9 ++
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 113 ++++++++++++++++++
 src/i18n.ts                                   |   2 +
 3 files changed, 124 insertions(+)
 create mode 100644 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

diff --git a/src/App.vue b/src/App.vue
index b0f8755fb..23dd1f2b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@ import { useSettingStore } from './stores/settingStore'
 import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from './stores/workspaceStateStore'
 import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
+import ModelLibrarySidebarTab from './components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
 import GlobalToast from './components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from './components/dialog/UnloadWindowConfirmDialog.vue'
@@ -100,6 +101,14 @@ const init = () => {
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   })
+  app.extensionManager.registerSidebarTab({
+    id: 'model-library',
+    icon: 'pi pi-folder-open',
+    title: t('sideToolbar.modelLibrary'),
+    tooltip: t('sideToolbar.modelLibrary'),
+    component: markRaw(ModelLibrarySidebarTab),
+    type: 'vue'
+  })
 }
 
 const queuePendingTaskCountStore = useQueuePendingTaskCountStore()
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
new file mode 100644
index 000000000..578ab59c6
--- /dev/null
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -0,0 +1,113 @@
+<template>
+  <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
+    <template #tool-buttons>
+    </template>
+    <template #body>
+      <div class="flex flex-col h-full">
+        <div class="flex-shrink-0">
+          <SearchBox
+            class="model-lib-search-box mx-4 mt-4"
+            v-model:modelValue="searchQuery"
+            @search="handleSearch"
+            :placeholder="$t('searchModels') + '...'"
+          />
+        </div>
+        <div class="flex-grow overflow-y-auto">
+          <TreeExplorer
+            class="model-lib-tree-explorer mt-1"
+            :roots="renderedRoot.children"
+            v-model:expandedKeys="expandedKeys"
+            @nodeClick="handleNodeClick"
+          >
+            <template #node="{ node }">
+              <NodeTreeLeaf :node="node" /> <!-- TODO -->
+            </template>
+          </TreeExplorer>
+        </div>
+      </div>
+    </template>
+  </SidebarTabTemplate>
+</template>
+
+<script setup lang="ts">
+import SearchBox from '@/components/common/SearchBox.vue'
+import TreeExplorer from '@/components/common/TreeExplorer.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import { ComfyModelDef, useModelStore } from '@/stores/modelStore'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerNode
+} from '@/types/treeExplorerTypes'
+import { computed, nextTick, ref, Ref, type ComputedRef } from 'vue'
+import type { TreeNode } from 'primevue/treenode'
+import { buildTree } from '@/utils/treeUtil'
+
+const modelStore = useModelStore()
+const searchQuery = ref<string>('')
+const expandedKeys = ref<Record<string, boolean>>({})
+const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+
+const root: ComputedRef<TreeNode> = computed(() => {
+  const models = modelStore.modelStoreMap['checkpoints']
+  if (!models) {
+    return null
+  }
+  return buildTree(Object.values(models.models), (model: ComfyModelDef) =>
+    model.name.split('/')
+  )
+})
+
+// Trigger the async operation to fetch models
+modelStore.getModelsInFolderCached('checkpoints')
+
+const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
+  const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
+    const children = node.children?.map(fillNodeInfo)
+    const model: ComfyModelDef = node.leaf ? node.data : null
+
+    return {
+      key: node.key,
+      label: node.leaf ? model.title : node.label,
+      leaf: node.leaf,
+      data: node.data,
+      getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+        if (node.leaf) {
+          return 'pi pi-circle-fill'
+        }
+      },
+      children,
+      draggable: node.leaf
+    }
+  }
+  return fillNodeInfo(root.value)
+})
+
+const handleSearch = (query: string) => {
+  // TODO
+  nextTick(() => {
+    expandNode(renderedRoot.value)
+  })
+}
+
+const handleNodeClick = (
+  node: RenderedTreeExplorerNode<ComfyModelDef>,
+  e: MouseEvent
+) => {
+  if (node.leaf) {
+    // TODO
+  } else {
+    toggleNodeOnEvent(e, node)
+  }
+}
+</script>
+
+<style>
+/* TODO */
+</style>
+
+<style scoped>
+:deep(.comfy-vue-side-bar-body) {
+  background: var(--p-tree-background);
+}
+</style>
diff --git a/src/i18n.ts b/src/i18n.ts
index 6bd2fa3be..f60a44cad 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -37,6 +37,7 @@ const messages = {
     settings: 'Settings',
     searchSettings: 'Search Settings',
     searchNodes: 'Search Nodes',
+    searchModels: 'Search Models',
     noResultsFound: 'No Results Found',
     searchFailedMessage:
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
@@ -50,6 +51,7 @@ const messages = {
       nodeLibraryTab: {
         sortOrder: 'Sort Order'
       },
+      modelLibrary: 'Model Library',
       queueTab: {
         showFlatList: 'Show Flat List',
         backToAllTasks: 'Back to All Tasks',

From 9df8e33c6aed623774a288a6a559eb494ecf8416 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 15:28:04 +0900
Subject: [PATCH 02/36] make it actually list out models

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 13 +++++------
 .../tabs/modelLibrary/ModelTreeFolder.vue     | 18 +++++++++++++++
 .../tabs/modelLibrary/ModelTreeLeaf.vue       | 22 +++++++++++++++++++
 src/stores/modelStore.ts                      |  2 +-
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue
 create mode 100644 src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 578ab59c6..6e7b1d510 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -20,7 +20,7 @@
             @nodeClick="handleNodeClick"
           >
             <template #node="{ node }">
-              <NodeTreeLeaf :node="node" /> <!-- TODO -->
+              <ModelTreeLeaf :node="node" />
             </template>
           </TreeExplorer>
         </div>
@@ -33,6 +33,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 { ComfyModelDef, useModelStore } from '@/stores/modelStore'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import type {
@@ -50,11 +51,9 @@ const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
 const root: ComputedRef<TreeNode> = computed(() => {
   const models = modelStore.modelStoreMap['checkpoints']
-  if (!models) {
-    return null
-  }
-  return buildTree(Object.values(models.models), (model: ComfyModelDef) =>
-    model.name.split('/')
+  const modelList = models ? Object.values(models.models) : []
+  return buildTree(modelList, (model: ComfyModelDef) =>
+    model.name.replaceAll('\\', '/').split('/')
   )
 })
 
@@ -73,7 +72,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
       data: node.data,
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
         if (node.leaf) {
-          return 'pi pi-circle-fill'
+          return 'pi pi-file'
         }
       },
       children,
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue
new file mode 100644
index 000000000..b288bd772
--- /dev/null
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue
@@ -0,0 +1,18 @@
+<template>
+  <div ref="container" class="model-lib-node-container">
+    <TreeExplorerTreeNode
+      :node="node"
+    ></TreeExplorerTreeNode>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { ComfyModelDef } from '@/stores/modelStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+const props = defineProps<{
+  node: RenderedTreeExplorerNode<ComfyModelDef>
+}>()
+
+</script>
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
new file mode 100644
index 000000000..3a2ee9167
--- /dev/null
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -0,0 +1,22 @@
+<template>
+  <div ref="container" class="model-lib-node-container">
+    <TreeExplorerTreeNode :node="node">
+    </TreeExplorerTreeNode>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { ComfyModelDef } from '@/stores/modelStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+const props = defineProps<{
+  node: RenderedTreeExplorerNode<ComfyModelDef>
+}>()
+</script>
+
+<style scoped>
+.model-lib-node-container {
+  @apply h-full w-full;
+}
+</style>
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 490bad010..ccc83f241 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -45,7 +45,7 @@ export class ComfyModelDef {
 
   constructor(name: string, directory: string) {
     this.name = name
-    this.title = name
+    this.title = name.replaceAll('\\', '/').split('/').pop()
     this.directory = directory
   }
 

From 1a9e9b915ad5a44f642d3856be7d173c9b564b7b Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 15:33:10 +0900
Subject: [PATCH 03/36] extremely primitive search impl

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 6e7b1d510..13ae3dc4a 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -51,7 +51,13 @@ const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
 const root: ComputedRef<TreeNode> = computed(() => {
   const models = modelStore.modelStoreMap['checkpoints']
-  const modelList = models ? Object.values(models.models) : []
+  let modelList = models ? Object.values(models.models) : []
+  if (searchQuery.value) {
+    const search = searchQuery.value.toLocaleLowerCase()
+    modelList = modelList.filter(m => {
+      return m.name.toLocaleLowerCase().includes(search);
+    });
+  }
   return buildTree(modelList, (model: ComfyModelDef) =>
     model.name.replaceAll('\\', '/').split('/')
   )
@@ -84,9 +90,6 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
 
 const handleSearch = (query: string) => {
   // TODO
-  nextTick(() => {
-    expandNode(renderedRoot.value)
-  })
 }
 
 const handleNodeClick = (

From 2f7ff2e53dd9446bedd6777095eda3cb5327bf7f Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 15:53:24 +0900
Subject: [PATCH 04/36] list out available folders

(incomplete list atm)
---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 46 +++++++++++++++----
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 13ae3dc4a..2c26306d4 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -49,18 +49,37 @@ const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
+const rootFolders = ['checkpoints', 'loras', 'vae', 'controlnet']
+
 const root: ComputedRef<TreeNode> = computed(() => {
-  const models = modelStore.modelStoreMap['checkpoints']
-  let modelList = models ? Object.values(models.models) : []
+  let modelList: ComfyModelDef[] = []
+  for (let folder of rootFolders) {
+    const models = modelStore.modelStoreMap[folder]
+    if (models) {
+      modelList.push(...Object.values(models.models))
+    }
+  }
   if (searchQuery.value) {
     const search = searchQuery.value.toLocaleLowerCase()
-    modelList = modelList.filter(m => {
-      return m.name.toLocaleLowerCase().includes(search);
+    modelList = modelList.filter((model: ComfyModelDef) => {
+      return model.name.toLocaleLowerCase().includes(search)
     });
   }
-  return buildTree(modelList, (model: ComfyModelDef) =>
-    model.name.replaceAll('\\', '/').split('/')
-  )
+  const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
+    return [model.directory, ...model.name.replaceAll('\\', '/').split('/')]
+  })
+  for (let folder of rootFolders) {
+    if (!tree.children.some(c => c.label == folder)) {
+      const node: TreeNode = {
+        key: `root/${folder}`,
+        label: folder,
+        leaf: false,
+        children: []
+      }
+    tree.children.push(node)
+    }
+  }
+  return tree
 })
 
 // Trigger the async operation to fetch models
@@ -69,11 +88,20 @@ modelStore.getModelsInFolderCached('checkpoints')
 const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
     const children = node.children?.map(fillNodeInfo)
-    const model: ComfyModelDef = node.leaf ? node.data : null
+    const model: ComfyModelDef | null = node.leaf ? node.data : null
+    if (model && model.name.endsWith('\0')) {
+      return {
+        key: node.key,
+        label: '',
+        leaf: false,
+        data: null,
+        children: []
+      }
+    }
 
     return {
       key: node.key,
-      label: node.leaf ? model.title : node.label,
+      label: model ? model.title : node.label,
       leaf: node.leaf,
       data: node.data,
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {

From 486db95941b2c532fd799aa3b4b6d1164e1c7de7 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 15:56:03 +0900
Subject: [PATCH 05/36] load list dynamically

---
 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 2c26306d4..be09dcb2f 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -82,9 +82,6 @@ const root: ComputedRef<TreeNode> = computed(() => {
   return tree
 })
 
-// Trigger the async operation to fetch models
-modelStore.getModelsInFolderCached('checkpoints')
-
 const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
     const children = node.children?.map(fillNodeInfo)
@@ -127,6 +124,12 @@ const handleNodeClick = (
   if (node.leaf) {
     // TODO
   } else {
+    const folderPath = node.key.split('/').slice(1).join('/')
+    if (folderPath && !folderPath.includes('/')) {
+      // trigger (async) load of model data for this folder
+      // TODO: Append a temporary loading icon if needed?
+      modelStore.getModelsInFolderCached(folderPath)
+    }
     toggleNodeOnEvent(e, node)
   }
 }

From 07cacec939ca3f20020e7eeb1f331d465c754fea Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 16:02:19 +0900
Subject: [PATCH 06/36] nice lil loading icon

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 28 ++++++++-----------
 src/i18n.ts                                   |  1 +
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index be09dcb2f..5fac5e826 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 import SearchBox from '@/components/common/SearchBox.vue'
+import { useI18n } from 'vue-i18n'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
@@ -44,6 +45,7 @@ import { computed, nextTick, ref, Ref, type ComputedRef } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { buildTree } from '@/utils/treeUtil'
 
+const { t } = useI18n()
 const modelStore = useModelStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
@@ -58,6 +60,9 @@ const root: ComputedRef<TreeNode> = computed(() => {
     if (models) {
       modelList.push(...Object.values(models.models))
     }
+    else {
+      modelList.push(new ComfyModelDef('\0Loading', folder))
+    }
   }
   if (searchQuery.value) {
     const search = searchQuery.value.toLocaleLowerCase()
@@ -68,30 +73,22 @@ const root: ComputedRef<TreeNode> = computed(() => {
   const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
     return [model.directory, ...model.name.replaceAll('\\', '/').split('/')]
   })
-  for (let folder of rootFolders) {
-    if (!tree.children.some(c => c.label == folder)) {
-      const node: TreeNode = {
-        key: `root/${folder}`,
-        label: folder,
-        leaf: false,
-        children: []
-      }
-    tree.children.push(node)
-    }
-  }
   return tree
 })
 
 const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
     const children = node.children?.map(fillNodeInfo)
-    const model: ComfyModelDef | null = node.leaf ? node.data : null
-    if (model && model.name.endsWith('\0')) {
+    const model: ComfyModelDef | null = node.leaf && node.data ? node.data : null
+    if (model && model.name.startsWith('\0')) {
       return {
         key: node.key,
-        label: '',
-        leaf: false,
+        label: t('loading') + '...',
+        leaf: true,
         data: null,
+      getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+        return 'pi pi-spin pi-spinner'
+      },
         children: []
       }
     }
@@ -127,7 +124,6 @@ const handleNodeClick = (
     const folderPath = node.key.split('/').slice(1).join('/')
     if (folderPath && !folderPath.includes('/')) {
       // trigger (async) load of model data for this folder
-      // TODO: Append a temporary loading icon if needed?
       modelStore.getModelsInFolderCached(folderPath)
     }
     toggleNodeOnEvent(e, node)
diff --git a/src/i18n.ts b/src/i18n.ts
index f60a44cad..96a89a9f7 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -20,6 +20,7 @@ const messages = {
     box: 'Box',
     briefcase: 'Briefcase',
     error: 'Error',
+    loading: 'Loading',
     findIssues: 'Find Issues',
     copyToClipboard: 'Copy to Clipboard',
     openNewIssue: 'Open New Issue',

From 6ffd68537b384af54957a0231fea7a3763781946 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 16:02:51 +0900
Subject: [PATCH 07/36] that's not doing anything

---
 .../tabs/modelLibrary/ModelTreeFolder.vue      | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue

diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue
deleted file mode 100644
index b288bd772..000000000
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeFolder.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div ref="container" class="model-lib-node-container">
-    <TreeExplorerTreeNode
-      :node="node"
-    ></TreeExplorerTreeNode>
-  </div>
-</template>
-
-<script setup lang="ts">
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { ComfyModelDef } from '@/stores/modelStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
-
-const props = defineProps<{
-  node: RenderedTreeExplorerNode<ComfyModelDef>
-}>()
-
-</script>

From 45fdb394e9ff70f625295e174559b93a04908db1 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 16:03:19 +0900
Subject: [PATCH 08/36] run autoformatter

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue     | 17 ++++++++---------
 .../sidebar/tabs/modelLibrary/ModelTreeLeaf.vue |  3 +--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 5fac5e826..da10578b2 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -1,7 +1,6 @@
 <template>
   <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
-    <template #tool-buttons>
-    </template>
+    <template #tool-buttons> </template>
     <template #body>
       <div class="flex flex-col h-full">
         <div class="flex-shrink-0">
@@ -59,8 +58,7 @@ const root: ComputedRef<TreeNode> = computed(() => {
     const models = modelStore.modelStoreMap[folder]
     if (models) {
       modelList.push(...Object.values(models.models))
-    }
-    else {
+    } else {
       modelList.push(new ComfyModelDef('\0Loading', folder))
     }
   }
@@ -68,7 +66,7 @@ const root: ComputedRef<TreeNode> = computed(() => {
     const search = searchQuery.value.toLocaleLowerCase()
     modelList = modelList.filter((model: ComfyModelDef) => {
       return model.name.toLocaleLowerCase().includes(search)
-    });
+    })
   }
   const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
     return [model.directory, ...model.name.replaceAll('\\', '/').split('/')]
@@ -79,16 +77,17 @@ const root: ComputedRef<TreeNode> = computed(() => {
 const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
   const fillNodeInfo = (node: TreeNode): TreeExplorerNode<ComfyModelDef> => {
     const children = node.children?.map(fillNodeInfo)
-    const model: ComfyModelDef | null = node.leaf && node.data ? node.data : null
+    const model: ComfyModelDef | null =
+      node.leaf && node.data ? node.data : null
     if (model && model.name.startsWith('\0')) {
       return {
         key: node.key,
         label: t('loading') + '...',
         leaf: true,
         data: null,
-      getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
-        return 'pi pi-spin pi-spinner'
-      },
+        getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+          return 'pi pi-spin pi-spinner'
+        },
         children: []
       }
     }
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 3a2ee9167..dceae70f4 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,7 +1,6 @@
 <template>
   <div ref="container" class="model-lib-node-container">
-    <TreeExplorerTreeNode :node="node">
-    </TreeExplorerTreeNode>
+    <TreeExplorerTreeNode :node="node"> </TreeExplorerTreeNode>
   </div>
 </template>
 

From d8c641c0a33e18a25b13de04133e85ecd5faad7f Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 16:31:44 +0900
Subject: [PATCH 09/36] fix up some absolute vue shenanigans

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index da10578b2..bc8e8728d 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -40,7 +40,7 @@ import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { computed, nextTick, ref, Ref, type ComputedRef } from 'vue'
+import { computed, ref, type ComputedRef, watch, toRef } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { buildTree } from '@/utils/treeUtil'
 
@@ -48,7 +48,7 @@ const { t } = useI18n()
 const modelStore = useModelStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
-const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
 const rootFolders = ['checkpoints', 'loras', 'vae', 'controlnet']
 
@@ -120,14 +120,25 @@ const handleNodeClick = (
   if (node.leaf) {
     // TODO
   } else {
-    const folderPath = node.key.split('/').slice(1).join('/')
-    if (folderPath && !folderPath.includes('/')) {
-      // trigger (async) load of model data for this folder
-      modelStore.getModelsInFolderCached(folderPath)
-    }
     toggleNodeOnEvent(e, node)
   }
 }
+
+watch(
+  toRef(expandedKeys, 'value'),
+  (newExpandedKeys) => {
+    Object.entries(newExpandedKeys).forEach(([key, isExpanded]) => {
+      if (isExpanded) {
+        const folderPath = key.split('/').slice(1).join('/')
+        if (folderPath && !folderPath.includes('/')) {
+          // Trigger (async) load of model data for this folder
+          modelStore.getModelsInFolderCached(folderPath)
+        }
+      }
+    })
+  },
+  { deep: true }
+)
 </script>
 
 <style>

From 773b4cc2ae2ab52bb4afc2305cf51f3eda4e8f43 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 17:59:31 +0900
Subject: [PATCH 10/36] swap to pi-box

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 23dd1f2b1..36837ed75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -103,7 +103,7 @@ const init = () => {
   })
   app.extensionManager.registerSidebarTab({
     id: 'model-library',
-    icon: 'pi pi-folder-open',
+    icon: 'pi pi-box',
     title: t('sideToolbar.modelLibrary'),
     tooltip: t('sideToolbar.modelLibrary'),
     component: markRaw(ModelLibrarySidebarTab),

From d0731d8461242e83eee9946966a7b5b345666eff Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 18:13:09 +0900
Subject: [PATCH 11/36] is_fake_object

---
 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue | 6 ++++--
 src/stores/modelStore.ts                               | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index bc8e8728d..8d8f7ee44 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -59,7 +59,9 @@ const root: ComputedRef<TreeNode> = computed(() => {
     if (models) {
       modelList.push(...Object.values(models.models))
     } else {
-      modelList.push(new ComfyModelDef('\0Loading', folder))
+      const fakeModel = new ComfyModelDef('Loading', folder)
+      fakeModel.is_fake_object = true
+      modelList.push(fakeModel)
     }
   }
   if (searchQuery.value) {
@@ -79,7 +81,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
     const children = node.children?.map(fillNodeInfo)
     const model: ComfyModelDef | null =
       node.leaf && node.data ? node.data : null
-    if (model && model.name.startsWith('\0')) {
+    if (model?.is_fake_object) {
       return {
         key: node.key,
         label: t('loading') + '...',
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index ccc83f241..ab739eefa 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -42,6 +42,8 @@ export class ComfyModelDef {
   image: string = ''
   /** Whether the model metadata has been loaded from the server, used for `load()` */
   has_loaded_metadata: boolean = false
+  /** If true, this is a fake model object used as a placeholder for something (eg a loading icon) */
+  is_fake_object: boolean = false
 
   constructor(name: string, directory: string) {
     this.name = name

From c192818de7d5d3f3f8680759cbeaa6ad155335aa Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 15 Sep 2024 22:28:59 +0900
Subject: [PATCH 12/36] i think apply the tailwind thingo

---
 .../sidebar/tabs/modelLibrary/ModelTreeLeaf.vue           | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index dceae70f4..5d372a027 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="model-lib-node-container">
+  <div ref="container" class="model-lib-node-container h-full w-full">
     <TreeExplorerTreeNode :node="node"> </TreeExplorerTreeNode>
   </div>
 </template>
@@ -13,9 +13,3 @@ const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyModelDef>
 }>()
 </script>
-
-<style scoped>
-.model-lib-node-container {
-  @apply h-full w-full;
-}
-</style>

From 4163af361c3a3287eb49809b2b7358c409856096 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 13:49:17 +0900
Subject: [PATCH 13/36] trim '.safetensors' from end of display title

---
 src/stores/modelStore.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index ab739eefa..f3237eab9 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -48,6 +48,9 @@ export class ComfyModelDef {
   constructor(name: string, directory: string) {
     this.name = name
     this.title = name.replaceAll('\\', '/').split('/').pop()
+    if (this.title.endsWith('.safetensors')) {
+      this.title = this.title.slice(0, -'.safetensors'.length);
+    }
     this.directory = directory
   }
 

From 6dd9491ccb9a05bccf2124fce12223027e11fe1f Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 13:50:31 +0900
Subject: [PATCH 14/36] oop

---
 src/stores/modelStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index f3237eab9..898625693 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -49,7 +49,7 @@ export class ComfyModelDef {
     this.name = name
     this.title = name.replaceAll('\\', '/').split('/').pop()
     if (this.title.endsWith('.safetensors')) {
-      this.title = this.title.slice(0, -'.safetensors'.length);
+      this.title = this.title.slice(0, -'.safetensors'.length)
     }
     this.directory = directory
   }

From 036bfc27507c74b9d67397be53e312695c6cfb97 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:08:05 +0900
Subject: [PATCH 15/36] after load, retain title if no new title is given

---
 src/stores/modelStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 898625693..1f696a4c3 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -70,7 +70,7 @@ export class ComfyModelDef {
         'title',
         'display_name',
         'name'
-      ) || this.name
+      ) || this.title
     this.architecture_id =
       _findInMetadata(metadata, 'modelspec.architecture', 'architecture') || ''
     this.author = _findInMetadata(metadata, 'modelspec.author', 'author') || ''

From d9bae3b8f821f4ab3a608a12adca360d37c3a387 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:08:14 +0900
Subject: [PATCH 16/36] is_load_requested to prevent duplication

---
 src/stores/modelStore.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 1f696a4c3..68cb237ea 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -42,6 +42,8 @@ export class ComfyModelDef {
   image: string = ''
   /** Whether the model metadata has been loaded from the server, used for `load()` */
   has_loaded_metadata: boolean = false
+  /** If true, a metadata load request has been triggered, but may or may not yet have finished loading */
+  is_load_requested: boolean = false
   /** If true, this is a fake model object used as a placeholder for something (eg a loading icon) */
   is_fake_object: boolean = false
 
@@ -56,9 +58,10 @@ export class ComfyModelDef {
 
   /** Loads the model metadata from the server, filling in this object if data is available */
   async load(): Promise<void> {
-    if (this.has_loaded_metadata) {
+    if (this.has_loaded_metadata || this.is_load_requested) {
       return
     }
+    this.is_load_requested = true
     const metadata = await api.viewMetadata(this.directory, this.name)
     if (!metadata) {
       return

From d2cd56c5686baa5e148389a7cab30c13092c142e Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:08:48 +0900
Subject: [PATCH 17/36] dirty initial model metadata load & preview

based on node preview code
---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   |  1 +
 .../tabs/modelLibrary/ModelPreview.vue        | 40 +++++++++++
 .../tabs/modelLibrary/ModelTreeLeaf.vue       | 72 +++++++++++++++++++
 3 files changed, 113 insertions(+)
 create mode 100644 src/components/sidebar/tabs/modelLibrary/ModelPreview.vue

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 8d8f7ee44..0d4ef350f 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -26,6 +26,7 @@
       </div>
     </template>
   </SidebarTabTemplate>
+  <div id="model-library-model-preview-container" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
new file mode 100644
index 000000000..3f611dc67
--- /dev/null
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="model_preview">
+    <div class="model_preview_title">
+      {{ modelDef.title }}
+    </div>
+    <div class="model_preview_descript">
+      {{ modelDef.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComfyModelDef } from '@/stores/modelStore'
+
+const props = defineProps({
+  modelDef: {
+    type: ComfyModelDef,
+    required: true
+  }
+})
+
+const modelDef = props.modelDef
+</script>
+<style scoped>
+.model_preview {
+  background-color: var(--comfy-menu-bg);
+  font-family: 'Open Sans', sans-serif;
+  font-size: small;
+  color: var(--descrip-text);
+  border: 1px solid var(--descrip-text);
+  min-width: 300px;
+  width: min-content;
+  height: fit-content;
+  z-index: 9999;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+</style>
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 5d372a027..a4fd78474 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,15 +1,87 @@
 <template>
   <div ref="container" class="model-lib-node-container h-full w-full">
     <TreeExplorerTreeNode :node="node"> </TreeExplorerTreeNode>
+
+    <teleport v-if="isHovered" to="#model-library-model-preview-container">
+      <div class="model-lib-model-preview" :style="modelPreviewStyle">
+        <ModelPreview ref="previewRef" :modelDef="modelDef"></ModelPreview>
+      </div>
+    </teleport>
   </div>
 </template>
 
 <script setup lang="ts">
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import ModelPreview from './ModelPreview.vue'
 import { ComfyModelDef } from '@/stores/modelStore'
 import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import {
+  computed,
+  CSSProperties,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref
+} from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode<ComfyModelDef>
 }>()
+
+const modelDef = computed(() => props.node.data)
+
+const previewRef = ref<InstanceType<typeof ModelPreview> | null>(null)
+const modelPreviewStyle = ref<CSSProperties>({
+  position: 'absolute',
+  top: '0px',
+  left: '0px'
+})
+
+const settingStore = useSettingStore()
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
+)
+
+const handleModelHover = async () => {
+  const hoverTarget = modelContentElement.value
+  const targetRect = hoverTarget.getBoundingClientRect()
+
+  const previewHeight = previewRef.value?.$el.offsetHeight || 0
+  const availableSpaceBelow = window.innerHeight - targetRect.bottom
+
+  modelPreviewStyle.value.top =
+    previewHeight > availableSpaceBelow
+      ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px`
+      : `${targetRect.top - 40}px`
+  if (sidebarLocation.value === 'left') {
+    modelPreviewStyle.value.left = `${targetRect.right}px`
+  } else {
+    modelPreviewStyle.value.left = `${targetRect.left - 400}px`
+  }
+
+  modelDef.value.load()
+}
+
+const container = ref<HTMLElement | null>(null)
+const modelContentElement = ref<HTMLElement | null>(null)
+const isHovered = ref(false)
+const handleMouseEnter = async () => {
+  isHovered.value = true
+  await nextTick()
+  handleModelHover()
+}
+const handleMouseLeave = () => {
+  isHovered.value = false
+}
+onMounted(() => {
+  modelContentElement.value = container.value?.closest('.p-tree-node-content')
+  modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
+  modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
+})
+
+onUnmounted(() => {
+  modelContentElement.value?.removeEventListener('mouseenter', handleMouseEnter)
+  modelContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
+})
 </script>

From 9d9d776cfa0a610abed327e729a1c3d82a705139 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:19:03 +0900
Subject: [PATCH 18/36] update model store tests

---
 tests-ui/tests/store/modelStore.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests-ui/tests/store/modelStore.test.ts b/tests-ui/tests/store/modelStore.test.ts
index d488f2ddd..8d6d5c2ae 100644
--- a/tests-ui/tests/store/modelStore.test.ts
+++ b/tests-ui/tests/store/modelStore.test.ts
@@ -69,7 +69,8 @@ describe('useModelStore', () => {
     const folderStore = await store.getModelsInFolderCached('checkpoints')
     const model = folderStore.models['noinfo.safetensors']
     await model.load()
-    expect(model.title).toBe('noinfo.safetensors')
+    expect(model.name).toBe('noinfo.safetensors')
+    expect(model.title).toBe('noinfo')
     expect(model.architecture_id).toBe('')
     expect(model.author).toBe('')
     expect(model.description).toBe('')

From f3a4e61a5dd28f1a19c010f1b44a91871c8af462 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 14:59:08 +0900
Subject: [PATCH 19/36] initial image icon for model lib

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   |  3 ++
 .../tabs/modelLibrary/ModelTreeLeaf.vue       | 37 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 0d4ef350f..e01a3b2ab 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -102,6 +102,9 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
       data: node.data,
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
         if (node.leaf) {
+          if (node.data && node.data.image) {
+            return ''
+          }
           return 'pi pi-file'
         }
       },
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index a4fd78474..edf255aec 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,6 +1,17 @@
 <template>
   <div ref="container" class="model-lib-node-container h-full w-full">
-    <TreeExplorerTreeNode :node="node"> </TreeExplorerTreeNode>
+    <TreeExplorerTreeNode :node="node">
+      <template #before-label>
+        <span class="model-lib-model-icon-container">
+          <span
+            v-if="modelDef && modelDef.image"
+            class="model-lib-model-icon"
+            :style="{ backgroundImage: `url(${modelDef.image})` }"
+          >
+          </span>
+        </span>
+      </template>
+    </TreeExplorerTreeNode>
 
     <teleport v-if="isHovered" to="#model-library-model-preview-container">
       <div class="model-lib-model-preview" :style="modelPreviewStyle">
@@ -85,3 +96,27 @@ onUnmounted(() => {
   modelContentElement.value?.removeEventListener('mouseleave', handleMouseLeave)
 })
 </script>
+
+<style scoped>
+.model-lib-model-icon-container {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  height: 1.5rem;
+  vertical-align: top;
+  width: 0;
+}
+.model-lib-model-icon {
+  background-size: cover;
+  background-position: center;
+  display: inline-block;
+  position: relative;
+  left: -2rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  vertical-align: top;
+}
+.editable-text {
+  display: inline-block;
+}
+</style>

From 9b3f8ab5d579106a138cbedf0d9e458f20c1ee64 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 15:00:53 +0900
Subject: [PATCH 20/36] i hate this

---
 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index e01a3b2ab..ffd94a8f7 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -103,7 +103,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
         if (node.leaf) {
           if (node.data && node.data.image) {
-            return ''
+            return ' ' // hacky - empty value, but a space to be truthy
           }
           return 'pi pi-file'
         }

From 82ec4b2c1658875e7758b86cd3c967aa24e121ae Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Tue, 17 Sep 2024 15:15:31 +0900
Subject: [PATCH 21/36] better empty spacer

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue           |  7 +++++--
 .../sidebar/tabs/modelLibrary/ModelTreeLeaf.vue       | 11 +++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index ffd94a8f7..919298876 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -103,7 +103,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
       getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
         if (node.leaf) {
           if (node.data && node.data.image) {
-            return ' ' // hacky - empty value, but a space to be truthy
+            return 'pi pi-fake-spacer'
           }
           return 'pi pi-file'
         }
@@ -148,7 +148,10 @@ watch(
 </script>
 
 <style>
-/* TODO */
+.pi-fake-spacer {
+  height: 1px;
+  width: 16px;
+}
 </style>
 
 <style scoped>
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index edf255aec..e40e22ee7 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -2,9 +2,11 @@
   <div ref="container" class="model-lib-node-container h-full w-full">
     <TreeExplorerTreeNode :node="node">
       <template #before-label>
-        <span class="model-lib-model-icon-container">
+        <span
+          v-if="modelDef && modelDef.image"
+          class="model-lib-model-icon-container"
+        >
           <span
-            v-if="modelDef && modelDef.image"
             class="model-lib-model-icon"
             :style="{ backgroundImage: `url(${modelDef.image})` }"
           >
@@ -104,7 +106,7 @@ onUnmounted(() => {
   left: 0;
   height: 1.5rem;
   vertical-align: top;
-  width: 0;
+  width: 0px;
 }
 .model-lib-model-icon {
   background-size: cover;
@@ -116,7 +118,4 @@ onUnmounted(() => {
   width: 1.5rem;
   vertical-align: top;
 }
-.editable-text {
-  display: inline-block;
-}
 </style>

From b2ff7b47638a62f184e993200a6e0be389d9dd64 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:20:30 +0900
Subject: [PATCH 22/36] add api handler for '/models'

---
 src/scripts/api.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index e53a67c8a..2b64cf631 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -331,6 +331,18 @@ class ComfyApi extends EventTarget {
     return await res.json()
   }
 
+  /**
+   * Gets a list of model folder keys (eg ['checkpoints', 'loras', ...])
+   * @returns The list of model folder keys
+   */
+  async getModelFolders(): Promise<string[]> {
+    const res = await this.fetchApi(`/models`)
+    if (res.status === 404) {
+      return null
+    }
+    return await res.json()
+  }
+
   /**
    * Gets a list of models in the specified folder
    * @param {string} folder The folder to list models from, such as 'checkpoints'

From 600c08738c5fe2dda888f6ad808dd23372253664 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:32:54 +0900
Subject: [PATCH 23/36] load model folders list instead of hardcoding

---
 src/components/sidebar/tabs/ModelLibrarySidebarTab.vue |  7 ++++---
 src/stores/modelStore.ts                               | 10 +++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 919298876..0b7c49c2e 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -51,11 +51,12 @@ const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 
-const rootFolders = ['checkpoints', 'loras', 'vae', 'controlnet']
-
 const root: ComputedRef<TreeNode> = computed(() => {
   let modelList: ComfyModelDef[] = []
-  for (let folder of rootFolders) {
+  if (!modelStore.modelFolders.length) {
+    modelStore.getModelFolders()
+  }
+  for (let folder of modelStore.modelFolders) {
     const models = modelStore.modelStoreMap[folder]
     if (models) {
       modelList.push(...Object.values(models.models))
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 68cb237ea..67f15444e 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -118,10 +118,13 @@ export class ModelStore {
   }
 }
 
+const folderBlacklist = ['configs', 'custom_nodes']
+
 /** Model store handler, wraps individual per-folder model stores */
 export const useModelStore = defineStore('modelStore', {
   state: () => ({
-    modelStoreMap: {} as Record<string, ModelStore>
+    modelStoreMap: {} as Record<string, ModelStore>,
+    modelFolders: [] as string[]
   }),
   actions: {
     async getModelsInFolderCached(folder: string): Promise<ModelStore> {
@@ -139,6 +142,11 @@ export const useModelStore = defineStore('modelStore', {
     },
     clearCache() {
       this.modelStoreMap = {}
+    },
+    async getModelFolders() {
+      this.modelFolders = (await api.getModelFolders()).filter(
+        (folder) => !folderBlacklist.includes(folder)
+      )
     }
   }
 })

From 1ab37ef6371cad06d417616573fa2d8c1a0df939 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:33:14 +0900
Subject: [PATCH 24/36] add a 'no content' placeholder for empty folders

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 31 ++++++++++++++++---
 .../tabs/modelLibrary/ModelTreeLeaf.vue       |  6 ++++
 src/i18n.ts                                   |  1 +
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 0b7c49c2e..fb3e529d7 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -44,7 +44,7 @@ import type {
 import { computed, ref, type ComputedRef, watch, toRef } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { buildTree } from '@/utils/treeUtil'
-
+import { api } from '@/scripts/api'
 const { t } = useI18n()
 const modelStore = useModelStore()
 const searchQuery = ref<string>('')
@@ -59,7 +59,14 @@ const root: ComputedRef<TreeNode> = computed(() => {
   for (let folder of modelStore.modelFolders) {
     const models = modelStore.modelStoreMap[folder]
     if (models) {
-      modelList.push(...Object.values(models.models))
+      if (Object.values(models.models).length) {
+        modelList.push(...Object.values(models.models))
+      }
+      else {
+        const fakeModel = new ComfyModelDef('(No Content)', folder)
+        fakeModel.is_fake_object = true
+        modelList.push(fakeModel)
+      }
     } else {
       const fakeModel = new ComfyModelDef('Loading', folder)
       fakeModel.is_fake_object = true
@@ -84,17 +91,31 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
     const model: ComfyModelDef | null =
       node.leaf && node.data ? node.data : null
     if (model?.is_fake_object) {
-      return {
-        key: node.key,
+      if (model.name === '(No Content)') {
+        return {
+          key: node.key,
+          label: t('noContent'),
+          leaf: true,
+          data: node.data,
+          getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+            return 'pi pi-file'
+          },
+          children: []
+        }
+      }
+      else {
+        return {
+          key: node.key,
         label: t('loading') + '...',
         leaf: true,
-        data: null,
+        data: node.data,
         getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
           return 'pi pi-spin pi-spinner'
         },
         children: []
       }
     }
+  }
 
     return {
       key: node.key,
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index e40e22ee7..6b7f79d13 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -57,6 +57,9 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
 )
 
 const handleModelHover = async () => {
+  if (modelDef.value.is_fake_object) {
+    return
+  }
   const hoverTarget = modelContentElement.value
   const targetRect = hoverTarget.getBoundingClientRect()
 
@@ -80,6 +83,9 @@ const container = ref<HTMLElement | null>(null)
 const modelContentElement = ref<HTMLElement | null>(null)
 const isHovered = ref(false)
 const handleMouseEnter = async () => {
+  if (modelDef.value.is_fake_object) {
+    return
+  }
   isHovered.value = true
   await nextTick()
   handleModelHover()
diff --git a/src/i18n.ts b/src/i18n.ts
index 96a89a9f7..05c4d7893 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -42,6 +42,7 @@ const messages = {
     noResultsFound: 'No Results Found',
     searchFailedMessage:
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
+    noContent: '(No Content)',
     noTasksFound: 'No Tasks Found',
     noTasksFoundMessage: 'There are no tasks in the queue.',
     newFolder: 'New Folder',

From 2926b306c0630975836b4e55470edf6ea61ef426 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:33:54 +0900
Subject: [PATCH 25/36] autoformat

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index fb3e529d7..c5425e8a7 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -44,7 +44,6 @@ import type {
 import { computed, ref, type ComputedRef, watch, toRef } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import { buildTree } from '@/utils/treeUtil'
-import { api } from '@/scripts/api'
 const { t } = useI18n()
 const modelStore = useModelStore()
 const searchQuery = ref<string>('')
@@ -61,8 +60,7 @@ const root: ComputedRef<TreeNode> = computed(() => {
     if (models) {
       if (Object.values(models.models).length) {
         modelList.push(...Object.values(models.models))
-      }
-      else {
+      } else {
         const fakeModel = new ComfyModelDef('(No Content)', folder)
         fakeModel.is_fake_object = true
         modelList.push(fakeModel)
@@ -102,20 +100,19 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
           },
           children: []
         }
-      }
-      else {
+      } else {
         return {
           key: node.key,
-        label: t('loading') + '...',
-        leaf: true,
-        data: node.data,
-        getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
-          return 'pi pi-spin pi-spinner'
-        },
-        children: []
+          label: t('loading') + '...',
+          leaf: true,
+          data: node.data,
+          getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+            return 'pi pi-spin pi-spinner'
+          },
+          children: []
+        }
       }
     }
-  }
 
     return {
       key: node.key,

From 32c249bf9a96d90fe23042d9aad589bf89506ead Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:42:11 +0900
Subject: [PATCH 26/36] autoload model metadata

---
 src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 6b7f79d13..72a38ae1f 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -97,6 +97,9 @@ onMounted(() => {
   modelContentElement.value = container.value?.closest('.p-tree-node-content')
   modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
   modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
+  if (!modelDef.value.is_fake_object) {
+    modelDef.value.load()
+  }
 })
 
 onUnmounted(() => {

From b8ff73a00de817651fb55a34d72ba0e456d745e7 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 15:46:04 +0900
Subject: [PATCH 27/36] error handling on metadata loading

---
 src/scripts/api.ts       | 17 ++++++++-
 src/stores/modelStore.ts | 79 ++++++++++++++++++++++------------------
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index 2b64cf631..6bc7c0c09 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -366,7 +366,22 @@ class ComfyApi extends EventTarget {
     const res = await this.fetchApi(
       `/view_metadata/${folder}?filename=${encodeURIComponent(model)}`
     )
-    return await res.json()
+    const rawResponse = await res.text()
+    if (!rawResponse) {
+      return null
+    }
+    try {
+      return JSON.parse(rawResponse)
+    } catch (error) {
+      console.error(
+        'Error viewing metadata',
+        res.status,
+        res.statusText,
+        rawResponse,
+        error
+      )
+      return null
+    }
   }
 
   /**
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 67f15444e..33233da16 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -62,42 +62,51 @@ export class ComfyModelDef {
       return
     }
     this.is_load_requested = true
-    const metadata = await api.viewMetadata(this.directory, this.name)
-    if (!metadata) {
-      return
+    try {
+      const metadata = await api.viewMetadata(this.directory, this.name)
+      if (!metadata) {
+        return
+      }
+      this.title =
+        _findInMetadata(
+          metadata,
+          'modelspec.title',
+          'title',
+          'display_name',
+          'name'
+        ) || this.title
+      this.architecture_id =
+        _findInMetadata(metadata, 'modelspec.architecture', 'architecture') ||
+        ''
+      this.author =
+        _findInMetadata(metadata, 'modelspec.author', 'author') || ''
+      this.description =
+        _findInMetadata(metadata, 'modelspec.description', 'description') || ''
+      this.resolution =
+        _findInMetadata(metadata, 'modelspec.resolution', 'resolution') || ''
+      this.usage_hint =
+        _findInMetadata(metadata, 'modelspec.usage_hint', 'usage_hint') || ''
+      this.trigger_phrase =
+        _findInMetadata(
+          metadata,
+          'modelspec.trigger_phrase',
+          'trigger_phrase'
+        ) || ''
+      this.image =
+        _findInMetadata(
+          metadata,
+          'modelspec.thumbnail',
+          'thumbnail',
+          'image',
+          'icon'
+        ) || ''
+      const tagsCommaSeparated =
+        _findInMetadata(metadata, 'modelspec.tags', 'tags') || ''
+      this.tags = tagsCommaSeparated.split(',').map((tag) => tag.trim())
+      this.has_loaded_metadata = true
+    } catch (error) {
+      console.error('Error loading model metadata', this.name, this, error)
     }
-    this.title =
-      _findInMetadata(
-        metadata,
-        'modelspec.title',
-        'title',
-        'display_name',
-        'name'
-      ) || this.title
-    this.architecture_id =
-      _findInMetadata(metadata, 'modelspec.architecture', 'architecture') || ''
-    this.author = _findInMetadata(metadata, 'modelspec.author', 'author') || ''
-    this.description =
-      _findInMetadata(metadata, 'modelspec.description', 'description') || ''
-    this.resolution =
-      _findInMetadata(metadata, 'modelspec.resolution', 'resolution') || ''
-    this.usage_hint =
-      _findInMetadata(metadata, 'modelspec.usage_hint', 'usage_hint') || ''
-    this.trigger_phrase =
-      _findInMetadata(metadata, 'modelspec.trigger_phrase', 'trigger_phrase') ||
-      ''
-    this.image =
-      _findInMetadata(
-        metadata,
-        'modelspec.thumbnail',
-        'thumbnail',
-        'image',
-        'icon'
-      ) || ''
-    const tagsCommaSeparated =
-      _findInMetadata(metadata, 'modelspec.tags', 'tags') || ''
-    this.tags = tagsCommaSeparated.split(',').map((tag) => tag.trim())
-    this.has_loaded_metadata = true
   }
 }
 

From c72a0af44e46f03bc4eef16a7efa9df43c23bbb2 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 16:11:51 +0900
Subject: [PATCH 28/36] larger model icons

---
 src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 72a38ae1f..58957dda0 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -122,9 +122,9 @@ onUnmounted(() => {
   background-position: center;
   display: inline-block;
   position: relative;
-  left: -2rem;
-  height: 1.5rem;
-  width: 1.5rem;
+  left: -2.5rem;
+  height: 2rem;
+  width: 2rem;
   vertical-align: top;
 }
 </style>

From 2c42e528c8a91c13bc945d022f26e3e8d631a691 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 16:59:44 +0900
Subject: [PATCH 29/36] click a model to spawn a node for it

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   | 24 +++++-
 src/stores/modelToNodeStore.ts                | 86 +++++++++++++++++++
 2 files changed, 109 insertions(+), 1 deletion(-)
 create mode 100644 src/stores/modelToNodeStore.ts

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index c5425e8a7..7a4e43379 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -36,6 +36,7 @@ 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 { ComfyModelDef, useModelStore } from '@/stores/modelStore'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import type {
   RenderedTreeExplorerNode,
@@ -43,9 +44,11 @@ import type {
 } from '@/types/treeExplorerTypes'
 import { computed, ref, type ComputedRef, watch, toRef } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
+import { app } from '@/scripts/app'
 import { buildTree } from '@/utils/treeUtil'
 const { t } = useI18n()
 const modelStore = useModelStore()
+const modelToNodeStore = useModelToNodeStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
@@ -128,7 +131,26 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
         }
       },
       children,
-      draggable: node.leaf
+      draggable: node.leaf,
+      handleClick: (
+        node: RenderedTreeExplorerNode<ComfyModelDef>,
+        e: MouseEvent
+      ) => {
+        if (node.leaf) {
+          const provider = modelToNodeStore.getNodeProvider(model.directory)
+          if (provider) {
+            const node = app.addNodeOnGraph(provider.nodeDef, {
+              pos: app.getCanvasCenter()
+            })
+            const widget = node.widgets.find(
+              (widget) => widget.name === provider.key
+            )
+            if (widget) {
+              widget.value = model.name
+            }
+          }
+        }
+      }
     }
   }
   return fillNodeInfo(root.value)
diff --git a/src/stores/modelToNodeStore.ts b/src/stores/modelToNodeStore.ts
new file mode 100644
index 000000000..038d5ec6a
--- /dev/null
+++ b/src/stores/modelToNodeStore.ts
@@ -0,0 +1,86 @@
+import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { defineStore } from 'pinia'
+import { toRaw } from 'vue'
+
+/** Helper class that defines how to construct a node from a model. */
+export class ModelNodeProvider {
+  /** The node definition to use for this model. */
+  public nodeDef: ComfyNodeDefImpl
+
+  /** The node input key for where to inside the model name. */
+  public key: string
+
+  constructor(nodeDef: ComfyNodeDefImpl, key: string) {
+    this.nodeDef = nodeDef
+    this.key = key
+  }
+}
+
+/** Service for mapping model types (by folder name) to nodes. */
+export const useModelToNodeStore = defineStore('modelToNode', {
+  state: () => ({
+    modelToNodeMap: {} as Record<string, ModelNodeProvider>,
+    nodeDefStore: useNodeDefStore(),
+    haveDefaultsLoaded: false
+  }),
+  actions: {
+    /**
+     * Get the node provider for the given model type name.
+     * @param modelType The name of the model type to get the node provider for.
+     * @returns The node provider for the given model type name.
+     */
+    getNodeProvider(modelType: string): ModelNodeProvider {
+      this.registerDefaults()
+      return this.modelToNodeMap[modelType]
+    },
+
+    /**
+     * Register a node provider for the given model type name.
+     * @param modelType The name of the model type to register the node provider for.
+     * @param nodeProvider The node provider to register.
+     */
+    registerNodeProvider(modelType: string, nodeProvider: ModelNodeProvider) {
+      this.registerDefaults()
+      this.modelToNodeMap[modelType] = nodeProvider
+    },
+
+    registerDefaults() {
+      if (this.haveDefaultsLoaded) {
+        return
+      }
+      if (Object.keys(this.nodeDefStore.nodeDefsByName).length === 0) {
+        return
+      }
+      this.haveDefaultsLoaded = true
+      this.registerNodeProvider(
+        'checkpoints',
+        new ModelNodeProvider(
+          this.nodeDefStore.nodeDefsByName['CheckpointLoaderSimple'],
+          'ckpt_name'
+        )
+      )
+      this.registerNodeProvider(
+        'loras',
+        new ModelNodeProvider(
+          this.nodeDefStore.nodeDefsByName['LoraLoader'],
+          'lora_name'
+        )
+      )
+      this.registerNodeProvider(
+        'vae',
+        new ModelNodeProvider(
+          this.nodeDefStore.nodeDefsByName['VAELoader'],
+          'vae_name'
+        )
+      )
+      this.registerNodeProvider(
+        'controlnet',
+        new ModelNodeProvider(
+          this.nodeDefStore.nodeDefsByName['ControlNetLoader'],
+          'control_net_name'
+        )
+      )
+    }
+  }
+})

From 2b47da01b84dc605c56310694910bb6965e8375c Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 17:10:43 +0900
Subject: [PATCH 30/36] draggable model nodes

---
 src/components/graph/GraphCanvas.vue          | 20 ++++++++++++++++++-
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   |  1 +
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 6cacc803f..630b1da2c 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -42,6 +42,8 @@ import {
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { ComfyModelDef } from '@/stores/modelStore'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -49,7 +51,7 @@ const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
-
+const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -132,6 +134,22 @@ onMounted(async () => {
             loc.clientY
           ])
           comfyApp.addNodeOnGraph(nodeDef, { pos })
+        } else if (node.data instanceof ComfyModelDef) {
+          const model = node.data
+          const provider = modelToNodeStore.getNodeProvider(model.directory)
+          if (provider) {
+            const pos = comfyApp.clientPosToCanvasPos([
+              loc.clientX - 20,
+              loc.clientY
+            ])
+            const node = comfyApp.addNodeOnGraph(provider.nodeDef, { pos })
+            const widget = node.widgets.find(
+              (widget) => widget.name === provider.key
+            )
+            if (widget) {
+              widget.value = model.name
+            }
+          }
         }
       }
     }
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 7a4e43379..288062086 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -39,6 +39,7 @@ import { ComfyModelDef, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import type {
+  TreeExplorerDragAndDropData,
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'

From ab8ed3306cef1c79823fcbfe7ea89164767ec148 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 17:23:41 +0900
Subject: [PATCH 31/36] add a setting for whether to autoload or not

---
 .../sidebar/tabs/ModelLibrarySidebarTab.vue   |  8 ++++++-
 src/stores/coreSettings.ts                    |  7 ++++++
 src/stores/modelStore.ts                      | 22 +++++++++++++------
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 288062086..a0a24d3a0 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -37,9 +37,9 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import { ComfyModelDef, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useTreeExpansion } from '@/hooks/treeHooks'
 import type {
-  TreeExplorerDragAndDropData,
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
@@ -50,6 +50,7 @@ import { buildTree } from '@/utils/treeUtil'
 const { t } = useI18n()
 const modelStore = useModelStore()
 const modelToNodeStore = useModelToNodeStore()
+const settingStore = useSettingStore()
 const searchQuery = ref<string>('')
 const expandedKeys = ref<Record<string, boolean>>({})
 const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
@@ -59,6 +60,11 @@ const root: ComputedRef<TreeNode> = computed(() => {
   if (!modelStore.modelFolders.length) {
     modelStore.getModelFolders()
   }
+  if (settingStore.get('Comfy.ModelLibrary.AutoLoadAll')) {
+    for (let folder of modelStore.modelFolders) {
+      modelStore.getModelsInFolderCached(folder)
+    }
+  }
   for (let folder of modelStore.modelFolders) {
     const models = modelStore.modelStoreMap[folder]
     if (models) {
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index f9bf4e613..11530cbda 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -243,6 +243,13 @@ export const CORE_SETTINGS: SettingParams[] = [
       step: 1
     }
   },
+  {
+    id: 'Comfy.ModelLibrary.AutoLoadAll',
+    name: 'Automatically load all model folders',
+    tooltip: 'If true, all folders will load as soon as you open the model library (this may cause delays while it loads). If false, root level model folders will only load once you click on them.',
+    type: 'boolean',
+    defaultValue: false
+  },
   {
     id: 'Comfy.Locale',
     name: 'Locale',
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 33233da16..875e32b2a 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -133,6 +133,7 @@ const folderBlacklist = ['configs', 'custom_nodes']
 export const useModelStore = defineStore('modelStore', {
   state: () => ({
     modelStoreMap: {} as Record<string, ModelStore>,
+    isLoading: {} as Record<string, Promise<ModelStore>>,
     modelFolders: [] as string[]
   }),
   actions: {
@@ -140,14 +141,21 @@ export const useModelStore = defineStore('modelStore', {
       if (folder in this.modelStoreMap) {
         return this.modelStoreMap[folder]
       }
-      // TODO: needs a lock to avoid overlapping calls
-      const models = await api.getModels(folder)
-      if (!models) {
-        return null
+      if (this.isLoading[folder]) {
       }
-      const store = new ModelStore(folder, models)
-      this.modelStoreMap[folder] = store
-      return store
+      const promise = new Promise<ModelStore>(async (resolve, reject) => {
+        const models = await api.getModels(folder)
+        if (!models) {
+          resolve(null)
+          return
+        }
+        const store = new ModelStore(folder, models)
+        this.modelStoreMap[folder] = store
+        this.isLoading[folder] = false
+        resolve(store)
+      });
+      this.isLoading[folder] = promise
+      return promise
     },
     clearCache() {
       this.modelStoreMap = {}

From 120dc7fee7515c8dfadd399a28fd41103a6690fe Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 17:26:14 +0900
Subject: [PATCH 32/36] autoformat will be the death of me

---
 src/stores/coreSettings.ts | 3 ++-
 src/stores/modelStore.ts   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index 11530cbda..537755a21 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -246,7 +246,8 @@ export const CORE_SETTINGS: SettingParams[] = [
   {
     id: 'Comfy.ModelLibrary.AutoLoadAll',
     name: 'Automatically load all model folders',
-    tooltip: 'If true, all folders will load as soon as you open the model library (this may cause delays while it loads). If false, root level model folders will only load once you click on them.',
+    tooltip:
+      'If true, all folders will load as soon as you open the model library (this may cause delays while it loads). If false, root level model folders will only load once you click on them.',
     type: 'boolean',
     defaultValue: false
   },
diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 875e32b2a..36a2d94c7 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -153,7 +153,7 @@ export const useModelStore = defineStore('modelStore', {
         this.modelStoreMap[folder] = store
         this.isLoading[folder] = false
         resolve(store)
-      });
+      })
       this.isLoading[folder] = promise
       return promise
     },

From 305cc8203d106f2806b944f1dd7a1e338cc40c4a Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 17:28:23 +0900
Subject: [PATCH 33/36] cleanup promise code

---
 src/stores/modelStore.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/stores/modelStore.ts b/src/stores/modelStore.ts
index 36a2d94c7..5b76c54d6 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -142,17 +142,16 @@ export const useModelStore = defineStore('modelStore', {
         return this.modelStoreMap[folder]
       }
       if (this.isLoading[folder]) {
+        return this.isLoading[folder]
       }
-      const promise = new Promise<ModelStore>(async (resolve, reject) => {
-        const models = await api.getModels(folder)
+      const promise = api.getModels(folder).then((models) => {
         if (!models) {
-          resolve(null)
-          return
+          return null
         }
         const store = new ModelStore(folder, models)
         this.modelStoreMap[folder] = store
         this.isLoading[folder] = false
-        resolve(store)
+        return store
       })
       this.isLoading[folder] = promise
       return promise

From a1a5e0ddc2e025473fe112fd4ea54dfe27d574c5 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sat, 21 Sep 2024 17:51:51 +0900
Subject: [PATCH 34/36] make the model preview actually half-decent

---
 .../tabs/modelLibrary/ModelPreview.vue        | 57 +++++++++++++++++--
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
index 3f611dc67..5b02843c8 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
@@ -3,7 +3,29 @@
     <div class="model_preview_title">
       {{ modelDef.title }}
     </div>
-    <div class="model_preview_descript">
+    <div class="model_preview_top_container">
+      <div class="model_preview_architecture" v-if="modelDef.architecture_id">
+        <span class="model_preview_prefix">Architecture: </span>
+        {{ modelDef.architecture_id }}
+      </div>
+      <div class="model_preview_author" v-if="modelDef.author">
+        <span class="model_preview_prefix">Author: </span>
+        {{ modelDef.author }}
+      </div>
+    </div>
+    <div class="model_preview_image" v-if="modelDef.image">
+      <img :src="modelDef.image" />
+    </div>
+    <div class="model_preview_usage_hint" v-if="modelDef.usage_hint">
+      <span class="model_preview_prefix">Usage hint: </span>
+      {{ modelDef.usage_hint }}
+    </div>
+    <div class="model_preview_trigger_phrase" v-if="modelDef.trigger_phrase">
+      <span class="model_preview_prefix">Trigger phrase: </span>
+      {{ modelDef.trigger_phrase }}
+    </div>
+    <div class="model_preview_description" v-if="modelDef.description">
+      <span class="model_preview_prefix">Description: </span>
       {{ modelDef.description }}
     </div>
   </div>
@@ -25,16 +47,43 @@ const modelDef = props.modelDef
 .model_preview {
   background-color: var(--comfy-menu-bg);
   font-family: 'Open Sans', sans-serif;
-  font-size: small;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);
   min-width: 300px;
-  width: min-content;
+  max-width: 500px;
+  width: fit-content;
   height: fit-content;
   z-index: 9999;
   border-radius: 12px;
   overflow: hidden;
   font-size: 12px;
-  padding-bottom: 10px;
+  padding: 10px;
+}
+.model_preview_image {
+  margin: auto;
+  width: fit-content;
+}
+.model_preview_image img {
+  max-width: 100%;
+  max-height: 150px;
+  object-fit: contain;
+}
+.model_preview_title {
+  font-weight: bold;
+  text-align: center;
+  font-size: 14px;
+}
+.model_preview_top_container {
+  text-align: center;
+}
+.model_preview_author,
+.model_preview_architecture {
+  display: inline-block;
+  text-align: center;
+  margin: 5px;
+  font-size: 10px;
+}
+.model_preview_prefix {
+  font-weight: bold;
 }
 </style>

From 270868886d78343b98c559b1e88ddb4e07a24c16 Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Sun, 22 Sep 2024 22:25:49 +0900
Subject: [PATCH 35/36] revert bad unchecked change

---
 src/components/common/TreeExplorerTreeNode.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TreeExplorerTreeNode.vue b/src/components/common/TreeExplorerTreeNode.vue
index b8da42bb0..82e5ba04d 100644
--- a/src/components/common/TreeExplorerTreeNode.vue
+++ b/src/components/common/TreeExplorerTreeNode.vue
@@ -10,8 +10,8 @@
     ]"
     ref="container"
   >
-    <div class="node-content truncate">
-      <span class="node-label text-sm">
+    <div class="node-content">
+      <span class="node-label">
         <slot name="before-label" :node="props.node"></slot>
         <EditableText
           :modelValue="node.label"

From 7ebe10f416772bc5a732f99fb80efc3c8900fbea Mon Sep 17 00:00:00 2001
From: "Alex \"mcmonkey\" Goodwin" <git_commits@alexgoodwin.dev>
Date: Mon, 23 Sep 2024 18:43:12 +0900
Subject: [PATCH 36/36] put registration back

---
 src/views/GraphView.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 9fa92f20c..1a492e7d1 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -34,6 +34,7 @@ import {
 } from '@/stores/workflowStore'
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
+import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
@@ -126,6 +127,14 @@ const init = () => {
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   })
+  app.extensionManager.registerSidebarTab({
+    id: 'model-library',
+    icon: 'pi pi-box',
+    title: t('sideToolbar.modelLibrary'),
+    tooltip: t('sideToolbar.modelLibrary'),
+    component: markRaw(ModelLibrarySidebarTab),
+    type: 'vue'
+  })
   app.extensionManager.registerSidebarTab({
     id: 'workflows',
     icon: 'pi pi-folder-open',