Customizable sorting order for characters list

public/index.html

@@ -1362,6 +1362,15 @@
                     </div>
                     <form id="form_character_search_form" action="javascript:void(null);">
                         <input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." />
+                        <select id="character_sort_order" title="Characters sorting order">
+                            <option data-field="name" data-order="asc">Name, A-Z</option>
+                            <option data-field="name" data-order="desc">Name, Z-A</option>
+                            <option data-field="date_added" data-order="desc">Date added, newer first</option>
+                            <option data-field="date_added" data-order="asc">Date added, older first</option>
+                            <option data-field="date_last_chat" data-order="desc">Recently chatted</option>
+                            <option data-field="chat_size" data-order="desc">Most chatted</option>
+                            <option data-field="chat_size" data-order="asc">Least chatted</option>
+                        </select>
                     </form>
                     <div id="rm_print_characters_block"></div>
                 </div>

public/script.js

@@ -42,6 +42,7 @@ import {
     collapseNewlines,
     loadPowerUserSettings,
     playMessageSound,
+    sortCharactersList,
     power_user,
 } from "./scripts/power-user.js";
 
@@ -609,7 +610,7 @@ function printCharacters() {
         //console.log('printcharacters() -- printing -- ChID '+i+' ('+item.name+')');
     });
     printGroups();
-    sortCharactersList('name', 'asc');
+    sortCharactersList();
 }
 
 async function getCharacters() {
@@ -3066,14 +3067,6 @@ function setGenerationProgress(progress) {
     }
 }
 
-function sortCharactersList(field, order) {
-    let orderedList = characters.slice().sort((a, b) => order == 'asc' ? a[field].localeCompare(b[field]) : b[field].localeCompare(a[field]));
-
-    for (let i = 0; i < characters.length; i++) {
-        $(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
-    }
-}
-
 function isHordeGenerationNotAllowed() {
     if (main_api == "kobold" && horde_settings.use_horde && preset_settings == "gui") {
         callPopup('GUI Settings preset is not supported for Horde. Please select another preset.', 'text');

public/scripts/power-user.js

@@ -1,9 +1,10 @@
-import { saveSettingsDebounced } from "../script.js";
+import { saveSettingsDebounced, characters } from "../script.js";
 
 export {
     loadPowerUserSettings,
     collapseNewlines,
     playMessageSound,
+    sortCharactersList,
     power_user,
 };
 
@@ -38,6 +39,8 @@ let power_user = {
     sheld_width: sheld_width.DEFAULT,
     play_message_sound: false,
     play_sound_unfocused: true,
+    sort_field: 'name',
+    sort_order: 'asc',
 };
 
 const storage_keys = {
@@ -156,6 +159,25 @@ function loadPowerUserSettings(settings) {
     $(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
     $(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
     $(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
+    $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
+    sortCharactersList();
+}
+
+function sortCharactersList() {
+    const sortFunc = (a, b) => power_user.sort_order == 'asc' ? compareFunc(a, b) : compareFunc(b, a);
+    const compareFunc = (first, second) => typeof first[power_user.sort_field] == "string"
+        ? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
+        : first[power_user.sort_field] - second[power_user.sort_field];
+
+    if (power_user.sort_field == undefined || characters.length === 0) {
+        return;
+    }
+
+    let orderedList = characters.slice().sort(sortFunc);
+
+    for (let i = 0; i < characters.length; i++) {
+        $(`.character_select[chid="${i}"]`).css({ 'order': orderedList.indexOf(characters[i]) });
+    }
 }
 
 $(document).ready(() => {
@@ -241,6 +263,13 @@ $(document).ready(() => {
         saveSettingsDebounced();
     });
 
+    $("#character_sort_order").on('change', function () {
+        power_user.sort_field = $(this).find(":selected").data('field');
+        power_user.sort_order = $(this).find(":selected").data('order');
+        sortCharactersList();
+        saveSettingsDebounced();
+    });
+
     $(window).on('focus', function() {
         browser_has_focus = true;
     });

public/style.css

@@ -859,17 +859,20 @@ img[src="img/load.svg"] {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 10px;
+    margin: 10px 5px;
-    padding-left: 5px;
+    column-gap: 10px;
+}
+
+#character_sort_order {
+    margin: 0;
+    flex: 1;
 }
 
 #character_search_bar {
     flex: 1;
     font-size: 1em;
     padding-left: 0.75em;
-    margin-left: 0;
+    margin: 0;
-    margin-right: 0.5rem;
-    margin-bottom: 0;
 }
 
 input[type=search]::-webkit-search-cancel-button {

server.js

@@ -739,6 +739,36 @@ app.post("/getcharacters", jsonParser, function (request, response) {
                 //console.log(jsonObject);
                 characters[i] = {};
                 characters[i] = jsonObject;
+
+                try {
+                    const charStat = fs.statSync(path.join(charactersPath, item));
+                    characters[i]['date_added'] = charStat.birthtimeMs;
+                    const char_dir = path.join(chatsPath, item.replace('.png', ''));
+    
+                    let chat_size = 0;
+                    let date_last_chat = 0;
+    
+                    if (fs.existsSync(char_dir)) { 
+                        const chats = fs.readdirSync(char_dir);
+    
+                        if (Array.isArray(chats) && chats.length) {
+                            for (const chat of chats) {
+                                const chatStat = fs.statSync(path.join(char_dir, chat));
+                                chat_size += chatStat.size;
+                                date_last_chat = Math.max(date_last_chat, chatStat.mtimeMs);
+                            }
+                        }
+                    }
+    
+                    characters[i]['date_last_chat'] = date_last_chat;
+                    characters[i]['chat_size'] = chat_size;
+                }
+                catch {
+                    characters[i]['date_added'] = 0;
+                    characters[i]['date_last_chat'] = 0;
+                    characters[i]['chat_size'] = 0;
+                }
+                
                 i++;
             } catch (error) {
                 console.log(`Could not read character: ${item}`);