Layout Update (#4514) * init * mostly working messy version * css layout, mobile is fixed * revert changes * more of the above * cleanup * revert breaking fixes, cleanup dead code * dead code * delete fallback * spacing * css tweaks and removed getChatBackgroundsList * mobile sizing * revert unrelated changes * use name instead of context * debounce from constants.js * replace if/else * pass images directly * more of the above * buttons * buttons functionality * add default column counts * remove .mobile-only-menu-toggle when clicked (layering fix) * lint * universal column default of 3 * sacrifice firefox for chrome * Restore media query This reverts commit 295a5a81908e58c0bfa5e01fd90fcd62c05471b4. * Add disabled attribute styles for menu_button * use opacity 0, pointer events none instead of display:none * Format styles * Fix type errors * Add blur event handler to close mobile menu when focus is lost --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

eec837cee60d97f69dc0bdbade1720bf0cdb7a37

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

Signed

Parents: 33458b86b01fccfc881d8e4ee5aa85055a5f356b

public/css/backgrounds.css+53 -27 Viewed

     gap: 5px;
+}
+/* Control buttons in header */
+.heading-container-with-controls {
+    position: relative;
+}
+.heading-container-with-controls .heading-text {
+    margin: 10px 0;
+}
+.heading-container-with-controls .heading-controls {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    gap: 5px;
+}
 #bg-scrollable-content {
     flex-grow: 1;
     overflow-y: auto;

     padding: 0 5px 15px;
+}
+#bg_menu_content,
+#bg_custom_content {
+    display: grid;
+    gap: 5px;
+    width: 100%;
+    grid-template-columns: repeat(var(--bg-thumb-columns, 5), 1fr);
+}
 #bg-filter {
     font-size: calc(var(--mainFontSize) * 0.95);
+}
-/* Thumbnail Menu & Buttons */
+/* Thumbnails */
+.bg_example:hover .BGSampleTitle {
+    opacity: 1;
+}
 .bg_example .mobile-only-menu-toggle {
     display: none;
+}
-.bg_example.flex-container {
+.bg_example {
-    width: 30%;
-    max-width: 200px;
-    margin: 5px;
-    aspect-ratio: 16/9;
     cursor: pointer;
     box-shadow: 0 0 7px var(--black50a);
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     border: 0px solid transparent;
     outline: 2px solid var(--SmartThemeBorderColor);
     outline-offset: -1px;
-}
-.bg_example.flex-container:focus-visible {
+    height: auto;
-    outline-offset: inherit;
+    aspect-ratio: 16 / 9;
+}
-.bg_example_img {
+.bg_example:focus-visible {
-    position: absolute;
+    outline-offset: inherit;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    bottom: -2px;
-    background-image: inherit;
-    background-size: cover;
-    background-position: center;
+}
 .bg_example .jg-menu {

     top: 2px;
     right: 2px;
     background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 8px;
+    border-radius: 5px;
-    gap: 3px;
+    padding: 3px 3px;
-    padding: 3px 5px;
     z-index: 3;
     backdrop-filter: blur(4px);
     border: 1px solid var(--SmartThemeBorderColor);

 .bg_example .jg-button {
     display: flex;
-    width: 30px;
+    width: 24px;
-    height: 30px;
+    height: 24px;
     align-items: center;
     justify-content: center;
     color: white;
     padding: 5px;
     font-size: 1.1em;
-    border-radius: 6px;
+    border-radius: 5px;
     transition: background-color var(--animation-duration) ease;
+}

     display: flex;
+}
+.thumbnail-clipper {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    overflow: hidden;
+    border-radius: inherit;
+    background-size: cover;
+    background-position: center;
+}
 .bg_example:not([custom="true"]) .jg-copy,
 .bg_example[custom="true"] .jg-edit {
     display: none;

public/css/mobile-styles.css+18 -4 Viewed

         display: none;
+    }
+    #bg_menu_content, #bg_custom_content {
+        grid-template-columns: repeat(var(--bg-thumb-columns, 3), 1fr);
+    }
+    .bg_list {
+        width: unset;
+    }
     .bg_button {
         font-size: 15px;
+    }

         z-index: 4;
+    }
+    .bg_example.mobile-menu-open .mobile-only-menu-toggle {
+        opacity: 0;
+        pointer-events: none;
+    }
     .bg_example .mobile-only-menu-toggle {
         display: flex;
         align-items: center;

         backdrop-filter: blur(2px);
+    }
+    .bg_example .jg-button {
+        width: 30px;
+        height: 30px;
+    }
     #bg-header-controls {
         flex-wrap: wrap;
         row-gap: 10px;

@@ -429,10 +447,6 @@
429	.horde_multiple_hint {	447	.horde_multiple_hint {
430	display: none;	448	display: none;
431	}	449	}
432
433	.bg_list {
434	width: unset;
435	}
436	}	450	}
437		451
438	/landscape mode phones and ipads/	452	/landscape mode phones and ipads/

public/index.html+11 -1 Viewed

                     </div>
                 </div>
                 <div id="bg-scrollable-content">
-                    <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">
+                    <div class="heading-container-with-controls">
+                        <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter heading-text">
                             System Backgrounds
                         </h3>
+                        <div class="heading-controls">
+                            <button id="bg_thumb_zoom_out" class="menu_button menu_button_icon" title="Make thumbnails smaller" data-i18n="[title]Make thumbnails smaller">
+                                <i class="fa-solid fa-minus"></i>
+                            </button>
+                            <button id="bg_thumb_zoom_in" class="menu_button menu_button_icon" title="Make thumbnails larger" data-i18n="[title]Make thumbnails larger">
+                                <i class="fa-solid fa-plus"></i>
+                            </button>
+                        </div>
+                    </div>
                     <div id="bg_menu_content" class="bg_list">
                     </div>
                     <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">

public/scripts/backgrounds.js+149 -70 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 } from './utils.js';
+import { createThumbnail, flashHighlight, getBase64Async, stringFormat, debounce } from './utils.js';
+import { debounce_timeout } from './constants.js';
 import { t } from './i18n.js';
 import { Popup } from './popup.js';

 const PNG_PIXEL_BLOB = new Blob([Uint8Array.from(atob(PNG_PIXEL), c => c.charCodeAt(0))], { type: 'image/png' });
 const PLACEHOLDER_IMAGE = `url('data:image/png;base64,${PNG_PIXEL}')`;
+const THUMBNAIL_COLUMNS_MIN = 2;
+const THUMBNAIL_COLUMNS_MAX = 8;
+const THUMBNAIL_COLUMNS_DEFAULT_DESKTOP = 5;
+const THUMBNAIL_COLUMNS_DEFAULT_MOBILE = 3;
 /**
  * Storage for frontend-generated background thumbnails.
  * This is used to store thumbnails for backgrounds that cannot be generated on the server.

     animation: false,
 };
+/**
+ * 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.
+ */
+function createThumbnailElement(imageData) {
+    const bg = imageData.filename;
+    const isCustom = imageData.isCustom;
+    const thumbnail = $('#background_template .bg_example').clone();
+    const clipper = document.createElement('div');
+    clipper.className = 'thumbnail-clipper lazy-load-background';
+    clipper.style.backgroundImage = PLACEHOLDER_IMAGE;
+    const titleElement = thumbnail.find('.BGSampleTitle');
+    clipper.appendChild(titleElement.get(0));
+    thumbnail.append(clipper);
+    const url = generateUrlParameter(bg, isCustom);
+    const title = isCustom ? bg.split('/').pop() : bg;
+    const friendlyTitle = title.slice(0, title.lastIndexOf('.'));
+    thumbnail.attr('title', title);
+    thumbnail.attr('bgfile', bg);
+    thumbnail.attr('custom', String(isCustom));
+    thumbnail.data('url', url);
+    titleElement.text(friendlyTitle);
+    return thumbnail.get(0);
+}
+/**
+ * Applies the thumbnail column count to the CSS and updates button states.
+ * @param {number} count - The number of columns to display.
+ */
+function applyThumbnailColumns(count) {
+    const newCount = Math.max(THUMBNAIL_COLUMNS_MIN, Math.min(count, THUMBNAIL_COLUMNS_MAX));
+    background_settings.thumbnailColumns = newCount;
+    document.documentElement.style.setProperty('--bg-thumb-columns', newCount.toString());
+    $('#bg_thumb_zoom_in').prop('disabled', newCount <= THUMBNAIL_COLUMNS_MIN);
+    $('#bg_thumb_zoom_out').prop('disabled', newCount >= THUMBNAIL_COLUMNS_MAX);
+    saveSettingsDebounced();
+}
 export function loadBackgroundSettings(settings) {
     let backgroundSettings = settings.background;
     if (!backgroundSettings || !backgroundSettings.name || !backgroundSettings.url) {

     if (!Object.hasOwn(backgroundSettings, 'animation')) {
         backgroundSettings.animation = false;
+    }
+    // If a value is already saved, use it. Otherwise, determine default based on screen size.
+    let columns = backgroundSettings.thumbnailColumns;
+    if (!columns) {
+        const isNarrowScreen = window.matchMedia('(max-width: 480px)').matches;
+        columns = isNarrowScreen ? THUMBNAIL_COLUMNS_DEFAULT_MOBILE : THUMBNAIL_COLUMNS_DEFAULT_DESKTOP;
+    }
+    background_settings.thumbnailColumns = columns;
+    applyThumbnailColumns(background_settings.thumbnailColumns);
     setBackground(backgroundSettings.name, backgroundSettings.url);
     setFittingClass(backgroundSettings.fitting);
     $('#background_fitting').val(backgroundSettings.fitting);

     list.push(bg);
     chat_metadata[LIST_METADATA_KEY] = list;
     saveMetadataDebounced();
-    await getChatBackgroundsList();
+    renderChatBackgrounds();
     highlightNewBackground(bg);
     highlightLockedBackground();
+}

         unsetCustomBackground();
+    }
-    await getChatBackgroundsList();
+    renderChatBackgrounds();
     highlightLockedBackground();
+}
-async function getChatBackgroundsList() {
-    const list = chat_metadata[LIST_METADATA_KEY];
-    const listEmpty = !Array.isArray(list) || list.length === 0;
-    $('#bg_custom_content').empty();
-    $('#bg_chat_hint').toggle(listEmpty);
-    if (listEmpty) {
-        return;
-    }
-    for (const bg of list) {
-        const template = await getBackgroundFromTemplate(bg, true);
-        $('#bg_custom_content').append(template);
-    }
-    activateLazyLoader();
-}
 function getBackgroundPath(fileUrl) {
     return `backgrounds/${encodeURIComponent(fileUrl)}`;
+}

     const index = list.indexOf(bgNames.oldBg);
     list.splice(index, 1);
     saveMetadataDebounced();
-    await getChatBackgroundsList();
+    renderChatBackgrounds();
+}
 /**

             list.splice(index, 1);
+        }
-        const siblingSelector = '.bg_example:not(#form_bg_download)';
+        if (bg === background_settings.name) {
+            const siblingSelector = '.bg_example';
             const nextBg = bgToDelete.next(siblingSelector);
             const prevBg = bgToDelete.prev(siblingSelector);
-        const anyBg = $(siblingSelector);
             if (nextBg.length > 0) {
                 nextBg.trigger('click');
             } else if (prevBg.length > 0) {
                 prevBg.trigger('click');
             } else {
-            $(anyBg[Math.floor(Math.random() * anyBg.length)]).trigger('click');
+                const anyOtherBg = $('.bg_example').not(bgToDelete).first();
+                if (anyOtherBg.length > 0) {
+                    anyOtherBg.trigger('click');
+                }
+            }
+        }
         bgToDelete.remove();

@@ -404,7 +453,7 @@ async function onDeleteBackgroundClick(e) {
404	}	453	}
405		454
406	if (isCustom) {	455	if (isCustom) {
407	await getChatBackgroundsList();	456	renderChatBackgrounds();
408	saveMetadataDebounced();	457	saveMetadataDebounced();
409	}	458	}
410	}	459	}

     return '';
+}
+/**
+ * Renders the system backgrounds gallery.
+ * @param {string[]} [backgrounds] - Optional filtered list of backgrounds.
+ */
+function renderSystemBackgrounds(backgrounds) {
+    const sourceList = backgrounds || [];
+    const container = $('#bg_menu_content');
+    container.empty();
+    if (sourceList.length === 0) return;
+    sourceList.forEach(bg => {
+        const imageData = { filename: bg, isCustom: false };
+        const thumbnail = createThumbnailElement(imageData);
+        container.append(thumbnail);
+    });
+    activateLazyLoader();
+}
+/**
+ * Renders the chat-specific (custom) backgrounds gallery.
+ * @param {string[]} [backgrounds] - Optional filtered list of backgrounds.
+ */
+function renderChatBackgrounds(backgrounds) {
+    const sourceList = backgrounds ?? (chat_metadata[LIST_METADATA_KEY] || []);
+    const container = $('#bg_custom_content');
+    container.empty();
+    $('#bg_chat_hint').toggle(!sourceList.length);
+    if (sourceList.length === 0) return;
+    sourceList.forEach(bg => {
+        const imageData = { filename: bg, isCustom: true };
+        const thumbnail = createThumbnailElement(imageData);
+        container.append(thumbnail);
+    });
+    activateLazyLoader();
+}
 export async function getBackgrounds() {
     const response = await fetch('/api/backgrounds/all', {
         method: 'POST',

     if (response.ok) {
         const { images, config } = await response.json();
         Object.assign(THUMBNAIL_CONFIG, config);
-        $('#bg_menu_content').children('div').remove();
+        renderSystemBackgrounds(images);
-        for (const bg of images) {
-            const template = await getBackgroundFromTemplate(bg, false);
-            $('#bg_menu_content').append(template);
-        }
-        activateLazyLoader();
+    }
+}

     lazyLoadObserver = new IntersectionObserver((entries, observer) => {
         entries.forEach(entry => {
             if (entry.target instanceof HTMLElement && entry.isIntersecting) {
-                const target = entry.target;
+                const clipper = entry.target;
-                const bg = target.getAttribute('bgfile');
+                const parentThumbnail = clipper.closest('.bg_example');
-                const isCustom = target.getAttribute('custom') === 'true';
+                if (parentThumbnail) {
+                    const bg = parentThumbnail.getAttribute('bgfile');
+                    const isCustom = parentThumbnail.getAttribute('custom') === 'true';
                     resolveImageUrl(bg, isCustom)
-                    .then(url => { target.style.backgroundImage = url; })
+                        .then(url => { clipper.style.backgroundImage = url; })
-                    .catch(() => { target.style.backgroundImage = PLACEHOLDER_IMAGE; });
+                        .catch(() => { clipper.style.backgroundImage = PLACEHOLDER_IMAGE; });
-                target.classList.remove('lazy-load-background');
+                }
-                observer.unobserve(target);
+                clipper.classList.remove('lazy-load-background');
+                observer.unobserve(clipper);
+            }
         });
     }, options);

     return `url("${thumbnailUrl}")`;
+}
-/**
- * Instantiates a background template
- * @param {string} bg Path to background
- * @param {boolean} isCustom Whether the background is custom
- * @returns {Promise<JQuery<HTMLElement>>} Background template
- */
-async function getBackgroundFromTemplate(bg, isCustom) {
-    const template = $('#background_template .bg_example').clone();
-    const url = generateUrlParameter(bg, isCustom);
-    const title = isCustom ? bg.split('/').pop() : bg;
-    const friendlyTitle = title.slice(0, title.lastIndexOf('.'));
-    template.attr('title', title);
-    template.attr('bgfile', bg);
-    template.attr('custom', String(isCustom));
-    template.data('url', url);
-    template.addClass('lazy-load-background');
-    template.css('background-image', PLACEHOLDER_IMAGE);
-    template.find('.BGSampleTitle').text(friendlyTitle);
-    return template;
-}
 async function setBackground(bg, url) {
     $('#bg1').css('background-image', url);
     background_settings.name = bg;

+}
 function onBackgroundFilterInput() {
-    const filterValue = String($(this).val()).toLowerCase();
+    const filterValue = String($('#bg-filter').val()).toLowerCase();
-    $('#bg_menu_content > div').each(function () {
+    $('#bg_menu_content > .bg_example, #bg_custom_content > .bg_example').each(function () {
-        const $bgContent = $(this);
+        const $bg = $(this);
-        if ($bgContent.attr('title').toLowerCase().includes(filterValue)) {
+        const title = $bg.attr('title') || '';
-            $bgContent.show();
+        const hasMatch = title.toLowerCase().includes(filterValue);
-        } else {
+        $bg.toggle(hasMatch);
-            $bgContent.hide();
-        }
     });
+}
+const debouncedOnBackgroundFilterInput = debounce(onBackgroundFilterInput, debounce_timeout.standard);
 export function initBackgrounds() {
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
     eventSource.on(event_types.FORCE_SET_BACKGROUND, forceSetBackground);

                 $context.addClass('mobile-menu-open');
+            }
         })
+        .off('blur', '.bg_example.mobile-menu-open').on('blur', '.bg_example.mobile-menu-open', function () {
+            if (!$(this).is(':focus-within')) {
+                $(this).removeClass('mobile-menu-open');
+            }
+        })
         .off('click', '.jg-button').on('click', '.jg-button', function (e) {
             e.stopPropagation();
             const action = $(this).data('action');

+            }
         });
+    $('#bg_thumb_zoom_in').on('click', () => {
+        applyThumbnailColumns(background_settings.thumbnailColumns - 1);
+    });
+    $('#bg_thumb_zoom_out').on('click', () => {
+        applyThumbnailColumns(background_settings.thumbnailColumns + 1);
+    });
     $('#auto_background').on('click', autoBackgroundCommand);
     $('#add_bg_button').on('change', onBackgroundUploadSelected);
-    $('#bg-filter').on('input', onBackgroundFilterInput);
+    $('#bg-filter').on('input', () => debouncedOnBackgroundFilterInput());
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'lockbg',
         callback: () => onLockBackgroundClick(new CustomEvent('click')),

public/style.css+3 -2 Viewed

     text-align: center;
+}
+.menu_button[disabled],
 .menu_button.disabled {
     filter: brightness(75%) grayscale(1);
     opacity: 0.5;

@@ -3675,8 +3676,8 @@ grammarly-extension {
3675	min-width: calc(1.25em + 12px);	3676	min-width: calc(1.25em + 12px);
3676	}	3677	}
3677		3678
3678	.menu_button:not(.disabled):hover,	3679	.menu_button:not(.disabled):not([disabled]):hover,
3679	.menu_button:not(.disabled).active {	3680	.menu_button:not(.disabled):not([disabled]).active {
3680	background-color: var(--white30a);	3681	background-color: var(--white30a);
3681	}	3682	}
3682		3683