Show icons next to the model folder and files in the dropdown, styling tweaks to increase padding

Author: cmdr2

ui/index.html

@@ -291,7 +291,7 @@ <h4 class="collapsible">
                     <div class="dropdown display-settings">
                         <button class="dropbtn primaryButton">
                             <i class="fa-solid fa-bars"></i>
-                            Preview options
+                            Preview settings
                             <i class="fa-solid fa-angle-down"></i>
                         </button>
                         <div class="dropdown-content">

ui/media/css/main.css

@@ -623,7 +623,6 @@ div.img-preview img {
 }
 
 #editor-settings-entries ul {
-    margin: 0px;
     padding: 0px;
 }
 

ui/media/css/searchable-models.css

@@ -16,11 +16,16 @@
 .model-list ul {
     padding-right: 20px;
     padding-inline-start: 0;
-    padding-bottom: 0px;
+    margin-top: 6pt;
 }
 
 .model-list li {
-    padding-bottom: 0px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.model-list .icon {
+    padding-right: 3pt;
 }
 
 .model-result {
@@ -31,7 +36,7 @@
     color: var(--text-color);
     list-style: none;
     padding: 3px 6px 3px 6px;
-    font-size: 10pt;
+    font-size: 9pt;
     font-style: italic;
     display: none;
 }
@@ -42,14 +47,15 @@
     padding: 6px 6px 6px 6px;
     font-size: 9pt;
     font-weight: bold;
+    border-top: 1px solid var(--background-color1);
 }
 
 .model-list li.model-file {
     color: var(--input-text-color);
     list-style: none;
     padding-left: 12px;
     padding-right:20px;
-    font-size: 9pt;
+    font-size: 10pt;
     font-weight: normal;
     transition: none;
     transition:property: none;

ui/media/js/searchable-models.js

@@ -517,7 +517,7 @@ class ModelDropdown
      * @param {Array<string>} classes
      * @returns {HTMLElement}
      */
-    createElement(tagName, attributes, classes, text) {
+    createElement(tagName, attributes, classes, text, icon) {
         const element = document.createElement(tagName)
         if (attributes) {
             Object.entries(attributes).forEach(([key, value]) => {
@@ -527,6 +527,11 @@ class ModelDropdown
         if (classes) {
             classes.forEach(className => element.classList.add(className))
         }
+        if (icon) {
+            let iconEl = document.createElement('i')
+            iconEl.className = icon + ' icon'
+            element.appendChild(iconEl)
+        }
         if (text) {
             element.appendChild(document.createTextNode(text))
         }
@@ -565,7 +570,7 @@ class ModelDropdown
                 const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
                 modelsMap.set(
                     model,
-                    this.createElement('li', { 'data-path': fullPath }, classes, model),
+                    this.createElement('li', { 'data-path': fullPath }, classes, model, 'fa-regular fa-file'),
                 )
             }
         })
@@ -579,7 +584,7 @@ class ModelDropdown
         const modelElements = modelNames.map(name => modelsMap.get(name))
 
         if (modelElements.length && folderName) {
-            listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName))
+            listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName.substring(1), 'fa-solid fa-folder-open'))
         }
 
         const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]