From 45a2c9f7ef025edbd3e732ef2aea816afa7cd39e Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Thu, 23 Feb 2023 22:11:53 +0530
Subject: [PATCH] Show icons next to the model folder and files in the
 dropdown, styling tweaks to increase padding

---
 ui/index.html                      |  2 +-
 ui/media/css/main.css              |  1 -
 ui/media/css/searchable-models.css | 14 ++++++++++----
 ui/media/js/searchable-models.js   | 11 ++++++++---
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index ba96c501..b0277517 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -291,7 +291,7 @@
                     <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">
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 38b31f1a..0ca28a59 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -623,7 +623,6 @@ div.img-preview img {
 }
 
 #editor-settings-entries ul {
-    margin: 0px;
     padding: 0px;
 }
 
diff --git a/ui/media/css/searchable-models.css b/ui/media/css/searchable-models.css
index 8cd6c9e8..8d12d732 100644
--- a/ui/media/css/searchable-models.css
+++ b/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,6 +47,7 @@
     padding: 6px 6px 6px 6px;
     font-size: 9pt;
     font-weight: bold;
+    border-top: 1px solid var(--background-color1);
 }
 
 .model-list li.model-file {
@@ -49,7 +55,7 @@
     list-style: none;
     padding-left: 12px;
     padding-right:20px;
-    font-size: 9pt;
+    font-size: 10pt;
     font-weight: normal;
     transition: none;
     transition:property: none;
diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index 69a104f3..11ee85d7 100644
--- a/ui/media/js/searchable-models.js
+++ b/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]