Sort personas by name.

public/index.html

@@ -3660,9 +3660,13 @@
                             <div class="flex-container marginBot10 alignitemscenter">
                                 <div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
                                     <i class="fa-solid fa-person-circle-question fa-fw"></i>
-                                    <span data-i18n="Create">Create</span>
+                                    <div data-i18n="Create">Create</div>
                                 </div>
                                 <input id="persona_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100">
+                                <select id="persona_sort_order" class="margin0">
+                                    <option value="asc">A-Z</option>
+                                    <option value="desc">Z-A</option>
+                                </select>
                                 <div id="persona_pagination_container" class="flex1"></div>
                                 <i id="persona_grid_toggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle grid view"></i>
                             </div>

public/script.js

@@ -5416,6 +5416,7 @@ export async function getUserAvatars(doRender = true, openPageAt = '') {
         }
 
         const entities = personasFilter.applyFilters(allEntities);
+        entities.sort((a, b) => power_user.persona_sort_order === 'asc' ? a.localeCompare(b) : b.localeCompare(a));
 
         const storageKey = 'Personas_PerPage';
         const listId = '#user_avatar_block';

public/scripts/personas.js

@@ -640,6 +640,11 @@ export function initPersonas() {
     $('#personas_backup').on('click', onBackupPersonas);
     $('#personas_restore').on('click', () => $('#personas_restore_input').trigger('click'));
     $('#personas_restore_input').on('change', onPersonasRestoreInput);
+    $('#persona_sort_order').val(power_user.persona_sort_order).on('input', function () {
+        power_user.persona_sort_order = String($(this).val());
+        getUserAvatars(true, user_avatar);
+        saveSettingsDebounced();
+    });
     $('#persona_grid_toggle').on('click', () => {
         const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
         localStorage.setItem(GRID_STORAGE_KEY, String(!state));

public/scripts/power-user.js

@@ -225,6 +225,7 @@ let power_user = {
     persona_description: '',
     persona_description_position: persona_description_positions.IN_PROMPT,
     persona_show_notifications: true,
+    persona_sort_order: 'asc',
 
     custom_stopping_strings: '',
     custom_stopping_strings_macro: true,

public/style.css

@@ -1525,6 +1525,10 @@ select option:not(:checked) {
     min-width: 80px;
 }
 
+#persona_sort_order {
+    max-width: 4em;
+}
+
 input[type=search]::-webkit-search-cancel-button {
     -webkit-appearance: none;
     height: 1em;