Properly show empty folder in model sidebar tab (#1242)

* Properly show empty folder in model sidebar tab

* nit

* nit

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -68,7 +68,8 @@ const root: ComputedRef<TreeNode> = computed(() => {
       if (Object.values(models.models).length) {
         modelList.push(...Object.values(models.models))
       } else {
-        const fakeModel = new ComfyModelDef('(No Content)', folder)
+        // ModelDef with key 'folder/a/b/c/' is treated as empty folder
+        const fakeModel = new ComfyModelDef('', folder)
         fakeModel.is_fake_object = true
         modelList.push(fakeModel)
       }
@@ -84,12 +85,9 @@ const root: ComputedRef<TreeNode> = computed(() => {
       return model.searchable.includes(search)
     })
   }
-  const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) => {
-    return [
-      model.directory,
-      ...model.file_name.replaceAll('\\', '/').split('/')
-    ]
-  })
+  const tree: TreeNode = buildTree(modelList, (model: ComfyModelDef) =>
+    model.key.split('/')
+  )
   return tree
 })
 
@@ -100,18 +98,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
     const model: ComfyModelDef | null =
       node.leaf && node.data ? node.data : null
     if (model?.is_fake_object) {
-      if (model.file_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 {
+      if (model.file_name === 'Loading') {
         return {
           key: node.key,
           label: t('loading') + '...',
@@ -149,9 +136,7 @@ const renderedRoot = computed<TreeExplorerNode<ComfyModelDef>>(() => {
         if (node.children?.length === 1) {
           const onlyChild = node.children[0]
           if (onlyChild.data?.is_fake_object) {
-            if (onlyChild.data.file_name === '(No Content)') {
-              return '0'
-            } else if (onlyChild.data.file_name === 'Loading') {
+            if (onlyChild.data.file_name === 'Loading') {
               return ''
             }
           }

src/i18n.ts

@@ -49,7 +49,6 @@ 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',

src/stores/modelStore.ts

@@ -19,13 +19,17 @@ function _findInMetadata(metadata: any, ...keys: string[]): string | null {
 /** Defines and holds metadata for a model */
 export class ComfyModelDef {
   /** Proper filename of the model */
-  file_name: string = ''
+  readonly file_name: string
+  /** Normalized filename of the model, with all backslashes replaced with forward slashes */
+  readonly normalized_file_name: string
   /** Directory containing the model, eg 'checkpoints' */
-  directory: string = ''
+  readonly directory: string
   /** Simplified copy of name, used as a default title. Excludes the directory and the '.safetensors' file extension */
-  simplified_file_name: string = ''
+  readonly simplified_file_name: string
+  /** Key for the model, used to uniquely identify the model. */
+  readonly key: string
   /** Title / display name of the model, sometimes same as the name but not always */
-  title: string = ''
+  title: string
   /** Metadata: architecture ID for the model, such as 'stable-diffusion-xl-v1-base' */
   architecture_id: string = ''
   /** Metadata: author of the model */
@@ -53,8 +57,8 @@ export class ComfyModelDef {
 
   constructor(name: string, directory: string) {
     this.file_name = name
-    this.simplified_file_name =
-      name.replaceAll('\\', '/').split('/').pop() ?? ''
+    this.normalized_file_name = name.replaceAll('\\', '/')
+    this.simplified_file_name = this.normalized_file_name.split('/').pop() ?? ''
     if (this.simplified_file_name.endsWith('.safetensors')) {
       this.simplified_file_name = this.simplified_file_name.slice(
         0,
@@ -63,6 +67,7 @@ export class ComfyModelDef {
     }
     this.title = this.simplified_file_name
     this.directory = directory
+    this.key = `${directory}/${this.normalized_file_name}`
     this.updateSearchable()
   }