[Draft] Model library sidebar tab

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()

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -0,0 +1,152 @@
+<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 }">
+              <ModelTreeLeaf :node="node" />
+            </template>
+          </TreeExplorer>
+        </div>
+      </div>
+    </template>
+  </SidebarTabTemplate>
+</template>
+
+<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'
+import { ComfyModelDef, useModelStore } from '@/stores/modelStore'
+import { useTreeExpansion } from '@/hooks/treeHooks'
+import type {
+  RenderedTreeExplorerNode,
+  TreeExplorerNode
+} from '@/types/treeExplorerTypes'
+import { computed, ref, type ComputedRef, watch, toRef } 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>>({})
+const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
+
+const rootFolders = ['checkpoints', 'loras', 'vae', 'controlnet']
+
+const root: ComputedRef<TreeNode> = computed(() => {
+  let modelList: ComfyModelDef[] = []
+  for (let folder of rootFolders) {
+    const models = modelStore.modelStoreMap[folder]
+    if (models) {
+      modelList.push(...Object.values(models.models))
+    } else {
+      modelList.push(new ComfyModelDef('\0Loading', folder))
+    }
+  }
+  if (searchQuery.value) {
+    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('/')]
+  })
+  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 ? 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'
+        },
+        children: []
+      }
+    }
+
+    return {
+      key: node.key,
+      label: model ? model.title : node.label,
+      leaf: node.leaf,
+      data: node.data,
+      getIcon: (node: TreeExplorerNode<ComfyModelDef>) => {
+        if (node.leaf) {
+          return 'pi pi-file'
+        }
+      },
+      children,
+      draggable: node.leaf
+    }
+  }
+  return fillNodeInfo(root.value)
+})
+
+const handleSearch = (query: string) => {
+  // TODO
+}
+
+const handleNodeClick = (
+  node: RenderedTreeExplorerNode<ComfyModelDef>,
+  e: MouseEvent
+) => {
+  if (node.leaf) {
+    // TODO
+  } else {
+    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>
+/* TODO */
+</style>
+
+<style scoped>
+:deep(.comfy-vue-side-bar-body) {
+  background: var(--p-tree-background);
+}
+</style>

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

@@ -0,0 +1,21 @@
+<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>

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',
@@ -37,6 +38,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 +52,7 @@ const messages = {
       nodeLibraryTab: {
         sortOrder: 'Sort Order'
       },
+      modelLibrary: 'Model Library',
       queueTab: {
         showFlatList: 'Show Flat List',
         backToAllTasks: 'Back to All Tasks',

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
   }