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)
 }

components/SettingsForm.vue

@@ -202,8 +202,11 @@
             class="flex flex-col gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3 sm:flex-row sm:items-center"
           >
             <div class="min-w-0 flex-1">
-              <p class="truncate text-sm text-zinc-200">{{ row.file }}</p>
-              <p class="text-[10px] uppercase tracking-wide text-zinc-600">{{ row.kind === 'both' ? 'Image · Video' : row.kind }}</p>
+              <p class="truncate text-sm text-zinc-200">{{ row.draft || row.file }}</p>
+              <p class="truncate text-[10px] uppercase tracking-wide text-zinc-600">
+                {{ row.kind === 'both' ? 'Image · Video' : row.kind }}
+                <span v-if="row.draft" class="normal-case tracking-normal text-zinc-500"> · {{ row.file }}</span>
+              </p>
             </div>
             <div class="flex w-full flex-col gap-2 sm:w-56">
               <input
@@ -445,7 +448,7 @@ const filteredLoraRows = computed(() => {
     if (!q) return true
     const hay = `${row.file} ${row.draft} ${row.trigger} ${row.key} ${row.placeholder}`.toLowerCase()
     return hay.includes(q)
-  })
+  }).sort((a, b) => (a.draft || a.file).localeCompare(b.draft || b.file, undefined, { sensitivity: 'base' }))
 })
 const loginUser = ref('')
 const loginCurrent = ref('')