Show Settings LoRA aliases in picker lists instead of filenames.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/LoraSelect.vue

@@ -31,10 +31,10 @@
             >
               <span class="block leading-none" aria-hidden="true">⋮⋮</span>
             </button>
-            <span class="min-w-0 truncate text-zinc-200">{{ loraDisplayName(item.name) }}</span>
+            <span class="min-w-0 truncate text-zinc-200">{{ labelFor(item.name) }}</span>
             <LoraTriggerTip
               :text="triggerFor(item.name)"
-              :aria-label="'Activation for ' + loraDisplayName(item.name)"
+              :aria-label="'Activation for ' + labelFor(item.name)"
               @insert="emit('insert-trigger', $event)"
               @save="saveTrigger(item.name, $event)"
             />
@@ -91,7 +91,7 @@
         v-for="name in availableNames"
         :key="name"
         :value="name"
-      >{{ loraDisplayName(name) }}</option>
+      >{{ labelFor(name) }}</option>
     </select>
   </div>
 </template>
@@ -103,7 +103,7 @@ import {
   LORA_STRENGTH_MIN,
   LORA_STRENGTH_STEP,
   clampLoraStrength,
-  loraDisplayName,
+  loraFriendlyName,
   loraIdentityKey,
   loraTriggerFor,
   makeLoraStackItem,
@@ -120,6 +120,7 @@ const props = withDefaults(defineProps<{
   disabled?: boolean
   clipStrength?: boolean
   triggers?: Record<string, string>
+  aliases?: Record<string, string>
 }>(), {
   label: 'LoRA',
   emptyLabel: 'None',
@@ -128,7 +129,8 @@ const props = withDefaults(defineProps<{
   compact: false,
   disabled: false,
   clipStrength: true,
-  triggers: () => ({})
+  triggers: () => ({}),
+  aliases: () => ({})
 })
 
 const emit = defineEmits<{
@@ -143,7 +145,10 @@ const dragOverIndex = ref<number | null>(null)
 
 const availableNames = computed(() => {
   const taken = new Set(model.value.map(item => loraIdentityKey(item.name)))
-  return props.names.filter(name => !taken.has(loraIdentityKey(name)))
+  return props.names
+    .filter(name => !taken.has(loraIdentityKey(name)))
+    .slice()
+    .sort((a, b) => labelFor(a).localeCompare(labelFor(b), undefined, { sensitivity: 'base' }))
 })
 
 const selectPlaceholder = computed(() => {
@@ -220,6 +225,10 @@ function triggerFor(name: string) {
   return loraTriggerFor(name, props.triggers)
 }
 
+function labelFor(name: string) {
+  return loraFriendlyName(name, props.aliases)
+}
+
 function saveTrigger(name: string, trigger: string) {
   emit('update-trigger', name, trigger)
 }