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, 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: () => {