refactor: Enhance sorting functionality and UI for model selection, including legacy format conversion

static/css/layout.css

@@ -182,6 +182,31 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
+/* Style for optgroups */
+.control-group select optgroup {
+    font-weight: 600;
+    font-style: normal;
+    color: var(--text-color);
+    background-color: var(--card-bg);
+}
+
+.control-group select option {
+    padding: 4px 8px;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+}
+
+/* Dark theme optgroup styling */
+[data-theme="dark"] .control-group select optgroup {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .control-group select option {
+    background-color: var(--card-bg);
+    color: var(--text-color);
+}
+
 .control-group select:hover {
     border-color: var(--lora-accent);
     background-color: var(--bg-color);

static/js/components/controls/PageControls.js

@@ -1,5 +1,5 @@
 // PageControls.js - Manages controls for both LoRAs and Checkpoints pages
-import { state, getCurrentPageState, setCurrentPageType } from '../../state/index.js';
+import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
 import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
 import { showToast } from '../../utils/uiHelpers.js';
 
@@ -41,6 +41,9 @@ export class PageControls {
         this.pageState.isLoading = false;
         this.pageState.hasMore = true;
         
+        // Set default sort based on page type
+        this.pageState.sortBy = this.pageType === 'loras' ? 'name:asc' : 'name:asc';
+        
         // Load sort preference
         this.loadSortPreference();
     }
@@ -326,14 +329,36 @@ export class PageControls {
     loadSortPreference() {
         const savedSort = getStorageItem(`${this.pageType}_sort`);
         if (savedSort) {
-            this.pageState.sortBy = savedSort;
+            // Handle legacy format conversion
+            const convertedSort = this.convertLegacySortFormat(savedSort);
+            this.pageState.sortBy = convertedSort;
             const sortSelect = document.getElementById('sortSelect');
             if (sortSelect) {
-                sortSelect.value = savedSort;
+                sortSelect.value = convertedSort;
             }
         }
     }
     
+    /**
+     * Convert legacy sort format to new format
+     * @param {string} sortValue - The sort value to convert
+     * @returns {string} - Converted sort value
+     */
+    convertLegacySortFormat(sortValue) {
+        // Convert old format to new format with direction
+        switch (sortValue) {
+            case 'name':
+                return 'name:asc';
+            case 'date':
+                return 'date:desc'; // Newest first is more intuitive default
+            case 'size':
+                return 'size:desc'; // Largest first is more intuitive default
+            default:
+                // If it's already in new format or unknown, return as is
+                return sortValue.includes(':') ? sortValue : 'name:asc';
+        }
+    }
+    
     /**
      * Save sort preference to storage
      * @param {string} sortValue - The sort value to save