Background sort feature (#5107) * Add background sort by date added feature * reapply search after changing sort * overengineer it * use sortIgnoreCaseAndAccents * make enum for sort options

788ed3d32371da7ebd683e7019caa6c890c6b0a4

L <123923688+Vibecoder9000@users.noreply.github.com>

Signed

Parents: 300912237d0e53ae3725685b79eccc7b22765bf2

public/css/backgrounds.css+6 -0 Viewed

     font-size: calc(var(--mainFontSize) * 0.95);
+}
+#bg-sort {
+    width: auto;
+    max-width: 6em;
+    flex-shrink: 0;
+}
 /* Thumbnails */
 .bg_example:hover .BGSampleTitle {
     opacity: 1;

public/index.html+6 -0 Viewed

                     </div>
                     <div class="bg-header-row-2">
                         <input id="bg-filter" class="text_pole" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
+                        <select id="bg-sort" class="text_pole margin0" title="Sort backgrounds" data-i18n="[title]Sort backgrounds">
+                            <option value="az" data-i18n="A-Z">A-Z</option>
+                            <option value="za" data-i18n="Z-A">Z-A</option>
+                            <option value="newest" data-i18n="Newest">Newest</option>
+                            <option value="oldest" data-i18n="Oldest">Oldest</option>
+                        </select>
                     </div>
                 </div>
                 <div id="bg_tabs" class="heading-container-with-controls">

public/scripts/backgrounds.js+82 -3 Viewed

 import { openThirdPartyExtensionMenu, saveMetadataDebounced } from './extensions.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
-import { createThumbnail, flashHighlight, getBase64Async, stringFormat, debounce, setupScrollToTop, saveBase64AsFile, getFileExtension } from './utils.js';
+import { createThumbnail, flashHighlight, getBase64Async, stringFormat, debounce, setupScrollToTop, saveBase64AsFile, getFileExtension, sortIgnoreCaseAndAccents } from './utils.js';
 import { debounce_timeout } from './constants.js';
 import { t } from './i18n.js';
 import { Popup } from './popup.js';

 };
 /**
+ * Background sorting options.
+ * @readonly
+ * @enum {string}
+ */
+const BG_SORT_OPTIONS = {
+    AZ: 'az',
+    ZA: 'za',
+    NEWEST: 'newest',
+    OLDEST: 'oldest',
+};
+/**
  * Mapping of background sources to their corresponding tab IDs.
  * @readonly
  * @type {Record<string, string>}

  */
 let lazyLoadObserver = null;
+/**
+ * Cache for the current list of system background filenames.
+ * Used to re-sort backgrounds without refetching from the server.
+ * @type {string[]}
+ */
+let cachedSystemBackgrounds = [];
 export let background_settings = {
     name: '__transparent.png',
     url: generateUrlParameter('__transparent.png', false),
     fitting: 'classic',
     animation: false,
+    sortOrder: BG_SORT_OPTIONS.AZ,
 };
 /**
+ * Sorts an array of background filenames based on the current sort order.
+ * @param {string[]} backgrounds - Array of background filenames
+ * @param {boolean} isCustom - Whether these are custom (chat) backgrounds
+ * @returns {string[]} Sorted array of background filenames
+ */
+function sortBackgrounds(backgrounds, isCustom = false) {
+    const sortOrder = background_settings.sortOrder || BG_SORT_OPTIONS.AZ;
+    return [...backgrounds].sort((a, b) => {
+        switch (sortOrder) {
+            case BG_SORT_OPTIONS.AZ:
+                return sortIgnoreCaseAndAccents(a, b);
+            case BG_SORT_OPTIONS.ZA:
+                return sortIgnoreCaseAndAccents(b, a);
+            case BG_SORT_OPTIONS.NEWEST:
+            case BG_SORT_OPTIONS.OLDEST: {
+                const keyA = isCustom ? a : `backgrounds/${a}`;
+                const keyB = isCustom ? b : `backgrounds/${b}`;
+                const metaA = METADATA_CACHE.get(keyA);
+                const metaB = METADATA_CACHE.get(keyB);
+                const timestampA = metaA?.addedTimestamp ?? 0;
+                const timestampB = metaB?.addedTimestamp ?? 0;
+                // Newest first (descending) or oldest first (ascending)
+                return sortOrder === BG_SORT_OPTIONS.NEWEST
+                    ? timestampB - timestampA
+                    : timestampA - timestampB;
+            }
+            default:
+                return 0;
+        }
+    });
+}
+/**
  * Creates a single thumbnail DOM element. The CSS now handles all sizing.
  * @param {object} imageData - Data for the image (filename, isCustom).
  * @returns {HTMLElement} The created thumbnail element.

     if (!Object.hasOwn(backgroundSettings, 'animation')) {
         backgroundSettings.animation = false;
+    }
+    if (!backgroundSettings.sortOrder) {
+        backgroundSettings.sortOrder = BG_SORT_OPTIONS.AZ;
+    }
     // If a value is already saved, use it. Otherwise, determine default based on screen size.
     let columns = backgroundSettings.thumbnailColumns;

         columns = isNarrowScreen ? THUMBNAIL_COLUMNS_DEFAULT_MOBILE : THUMBNAIL_COLUMNS_DEFAULT_DESKTOP;
+    }
     background_settings.thumbnailColumns = columns;
+    background_settings.sortOrder = backgroundSettings.sortOrder;
     applyThumbnailColumns(background_settings.thumbnailColumns);
     setBackground(backgroundSettings.name, backgroundSettings.url);
     setFittingClass(backgroundSettings.fitting);
     $('#background_fitting').val(backgroundSettings.fitting);
     $('#background_thumbnails_animation').prop('checked', background_settings.animation);
+    $('#bg-sort').val(background_settings.sortOrder);
     highlightSelectedBackground();
+}

         // If it's not custom, it's a built-in background. Delete it from the server
         if (!isCustom) {
             await delBackground(bg);
+            // Remove from cache to prevent reappearing on sort change
+            const cacheIndex = cachedSystemBackgrounds.indexOf(bg);
+            if (cacheIndex !== -1) {
+                cachedSystemBackgrounds.splice(cacheIndex, 1);
+            }
         } else {
             const list = chat_metadata[LIST_METADATA_KEY] || [];
             const index = list.indexOf(bg);

     if (sourceList.length === 0) return;
-    sourceList.forEach(bg => {
+    const sortedList = sortBackgrounds(sourceList, false);
+    sortedList.forEach(bg => {
         const imageData = { filename: bg, isCustom: false };
         const thumbnail = createThumbnailElement(imageData);
         container.append(thumbnail);

     if (sourceList.length === 0) return;
-    sourceList.forEach(bg => {
+    const sortedList = sortBackgrounds(sourceList, true);
+    sortedList.forEach(bg => {
         const imageData = { filename: bg, isCustom: true };
         const thumbnail = createThumbnailElement(imageData);
         container.append(thumbnail);

         const { images, config } = await response.json();
         Object.assign(THUMBNAIL_CONFIG, config);
+        cachedSystemBackgrounds = images;
         await metadataPromise;
         renderSystemBackgrounds(images);

     $('#auto_background').on('click', autoBackgroundCommand);
     $('#add_bg_button').on('change', (e) => onBackgroundUploadSelected(e.originalEvent));
     $('#bg-filter').on('input', () => debouncedOnBackgroundFilterInput());
+    $('#bg-sort').on('change', function () {
+        background_settings.sortOrder = String($(this).val());
+        saveSettingsDebounced();
+        // Re-render both galleries with new sort order
+        renderSystemBackgrounds(cachedSystemBackgrounds);
+        renderChatBackgrounds();
+        highlightSelectedBackground();
+        highlightLockedBackground();
+        // Re-apply any active search filter
+        onBackgroundFilterInput();
+    });
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'lockbg',
         callback: () => {