Assets extensions visual touch-up

public/css/extensions-panel.css

@@ -103,39 +103,39 @@ input.extension_missing[type="checkbox"] {
 }
 
 /** LEFT COLUMN **/
-#extensions_settings>.expression_settings {
+#extensions_settings>#assets_ui {
     order: 1;
 }
 
-#extensions_settings>.background_settings {
+#extensions_settings>.expression_settings {
     order: 2;
 }
 
-#extensions_settings>.sd_settings {
+#extensions_settings>.background_settings {
     order: 3;
 }
 
-#extensions_settings>#tts_settings {
+#extensions_settings>.sd_settings {
     order: 4;
 }
 
-#extensions_settings>#rvc_settings {
+#extensions_settings>#tts_settings {
     order: 5;
 }
 
-#extensions_settings>.objective-settings {
+#extensions_settings>#rvc_settings {
     order: 6;
 }
 
-#extensions_settings>#speech_recognition_settings {
+#extensions_settings>.objective-settings {
     order: 7;
 }
 
-#extensions_settings>#audio_settings {
+#extensions_settings>#speech_recognition_settings {
     order: 8;
 }
 
-#extensions_settings>#assets_ui {
+#extensions_settings>#audio_settings {
     order: 9;
 }
 

public/scripts/extensions/assets/index.js

@@ -48,8 +48,10 @@ function downloadAssetsList(url) {
                 }
 
                 console.debug(DEBUG_PREFIX, "Updated available assets to", availableAssets);
+                // First extensions, then everything else
+                const assetTypes = Object.keys(availableAssets).sort((a, b) => (a === 'extension') ? -1 : (b === 'extension') ? 1 : 0);
 
-                for (const assetType in availableAssets) {
+                for (const assetType of assetTypes) {
                     let assetTypeMenu = $('<div />', { id: "assets_audio_ambient_div", class: "assets-list-div" });
                     assetTypeMenu.append(`<h3>${assetType}</h3>`)
                     for (const i in availableAssets[assetType]) {

public/scripts/extensions/assets/style.css

@@ -13,6 +13,10 @@
     padding: 5px;
 }
 
+.assets-list-div h3 {
+    text-transform: capitalize;
+}
+
 .assets-list-div i {
     display: flex;
     flex-direction: row;
@@ -22,10 +26,14 @@
     font-style: normal;
 }
 
-.assets-list-div i span{
+.assets-list-div i span {
     margin-left: 10px;
 }
 
+.assets-list-div i span:first-of-type {
+    font-weight: bold;
+}
+
 .asset-download-button {
     position: relative;
     width: 50px;
@@ -34,7 +42,7 @@
     outline: none;
     border-radius: 2px;
     cursor: pointer;
-  }
+}
 
 .asset-download-button:active {
     background: #007a63;
@@ -68,11 +76,11 @@
 }
 
 @keyframes asset-download-button-loading-spinner {
-from {
-    transform: rotate(0turn);
-}
+    from {
+        transform: rotate(0turn);
+    }
 
-to {
-    transform: rotate(1turn);
-}
+    to {
+        transform: rotate(1turn);
+    }
 }

public/scripts/extensions/assets/window.html

@@ -1,7 +1,7 @@
 <div id="assets_ui">
     <div class="inline-drawer">
         <div class="inline-drawer-toggle inline-drawer-header">
-            <b>Assets</b>
+            <b>Download Extensions & Assets</b>
             <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
         </div>
         <div class="inline-drawer-content">