refactor(lora-cycler): remove sort by control, always use filename

Removed the sort by selection UI from the Lora Cycler widget and
hardcoded the sorting to always use filename. This simplifies the
interface while maintaining all sorting functionality.

Changes:
- Removed sort_by prop/emit from LoraCyclerSettingsView
- Removed sort tabs UI and associated styles
- Hardcoded sort_by = "filename" in backend node
- Removed sort by handling logic from LoraCyclerWidget
- Updated widget height to accommodate removal

vue-widgets/src/components/LoraCyclerWidget.vue

@@ -9,13 +9,11 @@
       :clip-strength="state.clipStrength.value"
       :use-custom-clip-range="state.useCustomClipRange.value"
       :is-clip-strength-disabled="state.isClipStrengthDisabled.value"
-      :sort-by="state.sortBy.value"
       :is-loading="state.isLoading.value"
       @update:current-index="handleIndexUpdate"
       @update:model-strength="state.modelStrength.value = $event"
       @update:clip-strength="state.clipStrength.value = $event"
       @update:use-custom-clip-range="handleUseCustomClipRangeChange"
-      @update:sort-by="handleSortByChange"
       @refresh="handleRefresh"
     />
   </div>
@@ -63,9 +61,7 @@ const handleIndexUpdate = async (newIndex: number) => {
     if (loraList.length > 0 && newIndex > 0 && newIndex <= loraList.length) {
       const currentLora = loraList[newIndex - 1]
       if (currentLora) {
-        state.currentLoraName.value = state.sortBy.value === 'filename'
-          ? currentLora.file_name
-          : (currentLora.model_name || currentLora.file_name)
+        state.currentLoraName.value = currentLora.file_name
         state.currentLoraFilename.value = currentLora.file_name
       }
     }
@@ -74,19 +70,6 @@ const handleIndexUpdate = async (newIndex: number) => {
   }
 }
 
-// Handle sort by change
-const handleSortByChange = async (newSortBy: 'filename' | 'model_name') => {
-  state.sortBy.value = newSortBy
-
-  // Refresh list with new sort order
-  try {
-    const poolConfig = getPoolConfig()
-    await state.refreshList(poolConfig)
-  } catch (error) {
-    console.error('[LoraCyclerWidget] Error changing sort:', error)
-  }
-}
-
 // Handle use custom clip range toggle
 const handleUseCustomClipRangeChange = (newValue: boolean) => {
   state.useCustomClipRange.value = newValue
@@ -184,10 +167,6 @@ onMounted(async () => {
       const val = Array.isArray(output.next_lora_filename) ? output.next_lora_filename[0] : output.next_lora_filename
       state.currentLoraFilename.value = val
     }
-    if (output?.sort_by !== undefined) {
-      const val = Array.isArray(output.sort_by) ? output.sort_by[0] : output.sort_by
-      state.sortBy.value = val
-    }
 
     // Call original onExecuted if it exists
     if (originalOnExecuted) {

vue-widgets/src/components/lora-cycler/LoraCyclerSettingsView.vue

@@ -103,33 +103,6 @@
         />
       </div>
     </div>
-
-    <!-- Sort By -->
-    <div class="setting-section">
-      <label class="setting-label">Sort By</label>
-      <div class="sort-tabs">
-        <label class="sort-tab" :class="{ active: sortBy === 'filename' }">
-          <input
-            type="radio"
-            name="sort-by"
-            value="filename"
-            :checked="sortBy === 'filename'"
-            @change="$emit('update:sortBy', 'filename')"
-          />
-          <span class="sort-tab-label">Filename</span>
-        </label>
-        <label class="sort-tab" :class="{ active: sortBy === 'model_name' }">
-          <input
-            type="radio"
-            name="sort-by"
-            value="model_name"
-            :checked="sortBy === 'model_name'"
-            @change="$emit('update:sortBy', 'model_name')"
-          />
-          <span class="sort-tab-label">Model Name</span>
-        </label>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -146,7 +119,6 @@ const props = defineProps<{
   clipStrength: number
   useCustomClipRange: boolean
   isClipStrengthDisabled: boolean
-  sortBy: 'filename' | 'model_name'
   isLoading: boolean
 }>()
 
@@ -155,7 +127,6 @@ const emit = defineEmits<{
   'update:modelStrength': [value: number]
   'update:clipStrength': [value: number]
   'update:useCustomClipRange': [value: boolean]
-  'update:sortBy': [value: 'filename' | 'model_name']
   'refresh': []
 }>()
 
@@ -432,59 +403,4 @@ const onIndexBlur = (event: Event) => {
 .toggle-switch:hover .toggle-switch__thumb {
   opacity: 1;
 }
-
-/* Sort Tabs */
-.sort-tabs {
-  display: flex;
-  background: rgba(26, 32, 44, 0.9);
-  border: 1px solid rgba(226, 232, 240, 0.2);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.sort-tab {
-  flex: 1;
-  position: relative;
-  padding: 8px 12px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.sort-tab input[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.sort-tab-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: rgba(226, 232, 240, 0.7);
-  transition: all 0.2s ease;
-}
-
-.sort-tab:hover .sort-tab-label {
-  color: rgba(226, 232, 240, 0.9);
-}
-
-.sort-tab.active .sort-tab-label {
-  color: rgba(191, 219, 254, 1);
-  font-weight: 600;
-}
-
-.sort-tab.active {
-  background: rgba(66, 153, 225, 0.2);
-}
-
-.sort-tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: rgba(66, 153, 225, 0.9);
-}
 </style>

vue-widgets/src/main.ts

@@ -12,7 +12,7 @@ const LORA_RANDOMIZER_WIDGET_MIN_WIDTH = 500
 const LORA_RANDOMIZER_WIDGET_MIN_HEIGHT = 448
 const LORA_RANDOMIZER_WIDGET_MAX_HEIGHT = LORA_RANDOMIZER_WIDGET_MIN_HEIGHT
 const LORA_CYCLER_WIDGET_MIN_WIDTH = 380
-const LORA_CYCLER_WIDGET_MIN_HEIGHT = 410
+const LORA_CYCLER_WIDGET_MIN_HEIGHT = 316
 const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
 const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
 const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200