Group add to background folder (#5237) * group add * make button not wide * make single and batch add to folder use the same style popup * prevent stuck UI, allow scrolling, prevent ::after conflicts * extremely large commit, beware * clear everything after performing bulk actions * Unify bulk selection design language --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

90892fd2367363ff1211ffbc6656e8cac79d56a2

Lucas Scala <123923688+Vibecoder9000@users.noreply.github.com>

Signed

Parents: 764e9ddec0a0294f4ebb8548fa94a47d86e40d59

public/css/backgrounds.css+39 -15 Viewed

     outline-offset: 0;
+}
 .bg_example.locked-background::after {,
 -    content: '\f023';
 +.bg_example.selected-background::before,
 +#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
+-
     position: absolute;
 +    z-index: 4;
 +    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
 +    pointer-events: none;
 +}
++
 +.bg_example.selected-background::before,
 +#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
 +    content: '\f00c';
 +    top: 5px;
 +    color: var(--white100);
 +    font-size: calc(var(--mainFontSize) * 0.9);
 +}
++
 +.bg_example.locked-background::after {
 +    content: '\f023';
     bottom: 5px;
     right: 5px;
 -    z-index: 4;
     color: var(--golden);
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
     font-size: calc(var(--mainFontSize) * 0.8);
 -    pointer-events: none;
+}
 .bg_example:not(.locked-background) .jg-unlock,

+}
 .bg_example.selected-background::before {
 -    content: '\f00c';
 -    font-family: 'Font Awesome 6 Free';
 -    font-weight: 900;
 -    position: absolute;
 -    top: 5px;
     left: 5px;
 -    z-index: 4;
 +}
 -    color: var(--white100);
++
 -    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
 +#bg_selection_mode_button.active {
     font-sizecolor: calc(var(--mainFontSize) * 0.9golden);
 -    pointer-events: none;
 +}
++
 +#bg_group_select_count {
 +    font-weight: 700;
 +}
++
 +#Backgrounds.bg-selection-mode #bg_menu_content .bg_example .jg-menu {
 +    display: none;
 +}
++
 +#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected {
 +    outline: 2px solid var(--interactable-outline-color);
 +    outline-offset: 0;
 +}
++
 +#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
 +    right: 5px;
+}
 .bg_example .jg-menu {

public/css/mobile-styles.css+21 -1 Viewed

     #add_background_button_top>span,
     #auto_background>span,
     #bg_add_folder_button>span {,
 +    #bg_selection_mode_button>span:not(#bg_group_select_count),
 +    #bg_group_add_to_folder_button>span,
 +    #bg_folder_remove_selected_button>span {
         display: none;
+    }
 +    #bg_group_select_count:not(:empty) {
 +        display: inline !important;
 +    }
++
 +    .bg_folder_breadcrumb {
 +        gap: 5px;
 +    }
++
 +    .bg_folder_breadcrumb .expander {
 +        min-width: 0;
 +    }
++
 +    #bg_current_folder_name {
 +        min-width: 0;
 +        flex: 1 1 auto;
 +    }
++
     #extensions_settings,
     #extensions_settings2 {
         width: 100% !important;

public/index.html+13 -0 Viewed

                             <a href="#bg_chat_tab" data-i18n="Chat">Chat</a>
                         </li>
                         <div class="heading-controls">
 +                            <button id="bg_group_add_to_folder_button" class="menu_button menu_button_icon" style="display:none;" data-i18n="[title]Add selected backgrounds to folder" title="Add selected backgrounds to folder">
 +                                <i class="fa-solid fa-folder-tree"></i>
 +                                <span data-i18n="Add to Folder">Add to Folder</span>
 +                            </button>
 +                            <button id="bg_selection_mode_button" class="menu_button menu_button_icon" data-i18n="[title]Select backgrounds for bulk folder actions" title="Select backgrounds for bulk folder actions">
 +                                <i class="fa-solid fa-edit"></i>
 +                                <span id="bg_group_select_count" style="display:none;"></span>
 +                            </button>
                             <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>

                                 <span data-i18n="Back">Back</span>
                             </button>
                             <span id="bg_current_folder_name" class="bg_current_folder_name"></span>
 +                            <span class="expander"></span>
 +                            <button id="bg_folder_remove_selected_button" class="menu_button menu_button_icon" style="display:none;" data-i18n="[title]Remove selected backgrounds from this folder" title="Remove selected backgrounds from this folder">
 +                                <i class="fa-solid fa-folder-minus"></i>
 +                                <span data-i18n="Remove from Folder">Remove from Folder</span>
 +                            </button>
                         </div>
                         <div id="bg_folder_grid" class="bg_list bg_folder_grid"></div>
                         <div id="bg_menu_content" class="bg_list"></div>

public/scripts/backgrounds.js+279 -32 Viewed

 let imageFolderMap = {};
 /** @type {string|null} Currently active folder drill-in, or null for root */
 let activeFolderId = null;
 +/** @type {Set<string>} Selected system backgrounds for group folder actions */
 +const selectedSystemBackgroundFiles = new Set();
 +/** @type {boolean} Whether click-to-select mode is active for system backgrounds */
 +let isBackgroundSelectionMode = false;
 // A single transparent PNG pixel used as a placeholder for errored backgrounds
 const PNG_PIXEL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

 function onSelectBackgroundClick(e) {
     const bgFile = $(this).attr('bgfile');
     const isCustom = $(this).attr('custom') === 'true';
 +    if (isBackgroundSelectionMode && !isCustom) {
 +        toggleBackgroundGroupSelection(bgFile);
 +        return;
 +    }
++
     const backgroundCssUrl = getUrlParameter(this);
     const bypassGlobalLock = !isCustom && e.shiftKey;

         if (deletedBg) {
             const cachedIdx = cachedSystemBackgrounds.findIndex(img => img.filename === deletedBg);
             if (cachedIdx !== -1) cachedSystemBackgrounds.splice(cachedIdx, 1);
 +            selectedSystemBackgroundFiles.delete(deletedBg);
             // Update folder map and clear folder thumbnail if it referenced this image
             if (imageFolderMap[deletedBg]) {

@@ -605,6 +615,7 @@ async function onDeleteBackgroundClick(e) {
605	615
606	616	highlightLockedBackground();
607	617	highlightSelectedBackground();
	618	+ syncGroupSelectionUi();
608	619	}
609	620	}
610	621

     const container = $('#bg_menu_content');
     container.empty();
     if (sourceList.length === 0) return;{
 +        syncGroupSelectionUi();
 +        return;
 +    }
     const sortedList = sortBackgrounds(sourceList.map(bg => bg.filename), false);
     const metadataByFilename = new Map(sourceList.map(bg => [bg.filename, bg]));

         container.append(thumbnail);
     });
 +    syncGroupSelectionUi();
     activateLazyLoader();
+}

         const { images, config } = await response.json();
         Object.assign(THUMBNAIL_CONFIG, config);
         cachedSystemBackgrounds = images;
 +        const existingFiles = new Set(images.map(x => x.filename));
 +        for (const selectedFile of selectedSystemBackgroundFiles) {
 +            if (!existingFiles.has(selectedFile)) {
 +                selectedSystemBackgroundFiles.delete(selectedFile);
 +            }
 +        }
         // Load folders first so getFilteredImages() works correctly in folder view
         await loadFolders();

     const folder = folderList.find(f => f.id === folderId);
     if (!folder) return;
 +    clearBackgroundGroupSelection();
     activeFolderId = folderId;
     $('#Backgrounds').addClass('in-folder-view');

  * Returns to the root folder overview.
  */
 function onBackToFolders() {
 +    clearBackgroundGroupSelection();
     activeFolderId = null;
     $('#Backgrounds').removeClass('in-folder-view');

+}
 /**
 + * Refreshes click-to-select and group action UI state.
 + */
 +function syncGroupSelectionUi() {
 +    const selectedCount = selectedSystemBackgroundFiles.size;
 +    const isGlobalTab = getActiveBackgroundTab() === BG_SOURCES.GLOBAL;
 +    const showAddButton = isGlobalTab && isBackgroundSelectionMode && selectedCount > 0;
 +    const showRemoveFromCurrentFolderButton = isGlobalTab && Boolean(activeFolderId) && isBackgroundSelectionMode && selectedCount > 0;
++
 +    $('#Backgrounds').toggleClass('bg-selection-mode', isBackgroundSelectionMode);
 +    $('#bg_selection_mode_button').toggleClass('active', isBackgroundSelectionMode);
 +    $('#bg_group_select_count').text(selectedCount > 0 ? ` (${selectedCount})` : '').toggle(selectedCount > 0);
++
 +    $('#bg_group_add_to_folder_button').toggle(showAddButton);
 +    $('#bg_folder_remove_selected_button').toggle(showRemoveFromCurrentFolderButton);
++
 +    $('#bg_menu_content .bg_example').each(function () {
 +        const bgFile = String($(this).attr('bgfile') || '');
 +        $(this).toggleClass('folder-group-selected', selectedSystemBackgroundFiles.has(bgFile));
 +    });
 +}
++
 +/**
 + * Enables/disables click-to-select mode for system backgrounds.
 + * @param {boolean} enabled
 + */
 +function setBackgroundSelectionMode(enabled) {
 +    isBackgroundSelectionMode = enabled;
 +    if (!enabled) {
 +        selectedSystemBackgroundFiles.clear();
 +    }
 +    // Clear any open mobile menus
 +    $('#bg_menu_content .bg_example.mobile-menu-open').removeClass('mobile-menu-open');
 +    syncGroupSelectionUi();
 +}
++
 +/**
 + * Toggles selected state of a system background for group folder actions.
 + * @param {string} bgFile
 + */
 +function toggleBackgroundGroupSelection(bgFile) {
 +    if (!bgFile) return;
 +    if (selectedSystemBackgroundFiles.has(bgFile)) {
 +        selectedSystemBackgroundFiles.delete(bgFile);
 +    } else {
 +        selectedSystemBackgroundFiles.add(bgFile);
 +    }
 +    syncGroupSelectionUi();
 +}
++
 +/**
 + * Clears all selected system backgrounds for group folder actions.
 + */
 +function clearBackgroundGroupSelection() {
 +    selectedSystemBackgroundFiles.clear();
 +    syncGroupSelectionUi();
 +}
++
 +/**
 + * Updates selection/folder action control visibility for the active tab.
 + */
 +function updateGroupFolderControlsVisibility() {
 +    const isGlobalTab = getActiveBackgroundTab() === BG_SOURCES.GLOBAL;
 +    $('#bg_selection_mode_button').toggle(isGlobalTab);
++
 +    if (!isGlobalTab && isBackgroundSelectionMode) {
 +        setBackgroundSelectionMode(false);
 +        return;
 +    }
 +    syncGroupSelectionUi();
 +}
++
 +/**
 + * Shows a folder selection popup and returns the selected folder id.
 + * @param {string} headingText
 + * @returns {Promise<string[]|null>} Array of selected folder IDs, or null if cancelled
 + */
 +async function selectFoldersForGroupAction(headingText) {
 +    if (folderList.length === 0) {
 +        toastr.info(t`Create a folder first`);
 +        return null;
 +    }
++
 +    const contentEl = document.createElement('div');
 +    const heading = document.createElement('h3');
 +    heading.textContent = headingText;
 +    contentEl.appendChild(heading);
++
 +    for (const folder of folderList) {
 +        const label = document.createElement('label');
 +        label.className = 'checkbox_label flexGap5';
 +        label.style.margin = '4px 0';
++
 +        const checkbox = document.createElement('input');
 +        checkbox.type = 'checkbox';
 +        checkbox.dataset.folderId = folder.id;
++
 +        const span = document.createElement('span');
 +        span.textContent = folder.name;
++
 +        label.appendChild(checkbox);
 +        label.appendChild(span);
 +        contentEl.appendChild(label);
 +    }
++
 +    const content = $(contentEl);
 +    const result = await callGenericPopup(content, POPUP_TYPE.CONFIRM, '', {
 +        okButton: t`Apply`,
 +        cancelButton: t`Cancel`,
 +        allowVerticalScrolling: true,
 +        leftAlign: true,
 +    });
 +    if (!result) return null;
++
 +    const selectedIds = [];
 +    content.find('input[type="checkbox"]:checked').each(function () {
 +        selectedIds.push($(this).data('folderId'));
 +    });
 +    return selectedIds.length > 0 ? selectedIds : null;
 +}
++
 +/**
 + * Sends a folder assign/unassign request and updates local imageFolderMap state.
 + * @param {string[]} bgFiles - Background filenames to update
 + * @param {string} folderId - Target folder ID
 + * @param {boolean} isRemove - Whether to remove (unassign) or add (assign)
 + */
 +async function updateFolderAssignments(bgFiles, folderId, isRemove) {
 +    const paths = bgFiles.map(getBackgroundRelativePath);
 +    const endpoint = isRemove ? '/api/image-metadata/folders/unassign' : '/api/image-metadata/folders/assign';
++
 +    const response = await fetch(endpoint, {
 +        method: 'POST',
 +        headers: getRequestHeaders(),
 +        body: JSON.stringify({ id: folderId, paths }),
 +    });
++
 +    if (!response.ok) {
 +        throw new Error(`Folder ${isRemove ? 'unassign' : 'assign'} failed: ${response.status}`);
 +    }
++
 +    for (const bgFile of bgFiles) {
 +        const currentFolderIds = imageFolderMap[bgFile] || [];
 +        if (isRemove) {
 +            const nextFolderIds = currentFolderIds.filter(id => id !== folderId);
 +            if (nextFolderIds.length > 0) {
 +                imageFolderMap[bgFile] = nextFolderIds;
 +            } else {
 +                delete imageFolderMap[bgFile];
 +            }
 +        } else if (!currentFolderIds.includes(folderId)) {
 +            imageFolderMap[bgFile] = [...currentFolderIds, folderId];
 +        }
 +    }
 +}
++
 +/**
 + * Adds selected system backgrounds to a chosen folder.
 + */
 +async function onAddSelectedToFolder() {
 +    if (getActiveBackgroundTab() !== BG_SOURCES.GLOBAL) {
 +        toastr.warning(t`Folder actions are only available in the Global tab`);
 +        return;
 +    }
++
 +    const bgFiles = Array.from(selectedSystemBackgroundFiles);
 +    if (bgFiles.length === 0) {
 +        toastr.info(t`Select one or more backgrounds first`);
 +        return;
 +    }
++
 +    const folderIds = await selectFoldersForGroupAction(t`Add selected backgrounds to folders`);
 +    if (!folderIds) return;
++
 +    try {
 +        let totalAdded = 0;
 +        for (const folderId of folderIds) {
 +            const actionableBgFiles = bgFiles.filter(bgFile => {
 +                const currentFolderIds = imageFolderMap[bgFile] || [];
 +                return !currentFolderIds.includes(folderId);
 +            });
 +            if (actionableBgFiles.length > 0) {
 +                await updateFolderAssignments(actionableBgFiles, folderId, false);
 +                totalAdded += actionableBgFiles.length;
 +            }
 +        }
++
 +        renderFolderGrid();
++
 +        if (activeFolderId) {
 +            renderSystemBackgrounds(getFilteredImages());
 +            highlightSelectedBackground();
 +        }
++
 +        setBackgroundSelectionMode(false);
 +        if (totalAdded > 0) {
 +            toastr.success(t`Added backgrounds to ${folderIds.length} folder(s)`);
 +        } else {
 +            toastr.info(t`Selected backgrounds are already in the chosen folders`);
 +        }
 +    } catch (error) {
 +        console.error('Error adding selected backgrounds to folder:', error);
 +        toastr.error(t`Failed to update folder assignment`);
 +    }
 +}
++
 +/**
 + * Removes selected system backgrounds from the currently drilled-in folder.
 + */
 +async function onRemoveSelectedFromCurrentFolder() {
 +    if (getActiveBackgroundTab() !== BG_SOURCES.GLOBAL) {
 +        toastr.warning(t`Folder actions are only available in the Global tab`);
 +        return;
 +    }
++
 +    if (!activeFolderId) {
 +        toastr.info(t`Open a folder first`);
 +        return;
 +    }
++
 +    const bgFiles = Array.from(selectedSystemBackgroundFiles);
 +    if (bgFiles.length === 0) {
 +        toastr.info(t`Select one or more backgrounds first`);
 +        return;
 +    }
++
 +    try {
 +        await updateFolderAssignments(bgFiles, activeFolderId, true);
 +        renderFolderGrid();
 +        renderSystemBackgrounds(getFilteredImages());
 +        highlightSelectedBackground();
 +        setBackgroundSelectionMode(false);
 +        toastr.success(t`Removed ${bgFiles.length} background(s) from folder`);
 +    } catch (error) {
 +        console.error('Error removing selected backgrounds from current folder:', error);
 +        toastr.error(t`Failed to update folder assignment`);
 +    }
 +}
++
 +/**
  * Creates a new folder via API.
  */
 async function onCreateFolder() {

         if (!isChecked && wasChecked) toUnassign.push(fid);
     });
 -    const relativePath = getBackgroundRelativePath(bgFile);
+-
     try {
         for (const fid of toAssign) {
 -            const resp = await fetch('/api/image-metadata/folders/assign', {
 +            await updateFolderAssignments([bgFile], fid, false);
 -                method: 'POST',
 -                headers: getRequestHeaders(),
 -                body: JSON.stringify({ id: fid, paths: [relativePath] }),
 -            });
 -            if (!resp.ok) throw new Error(`Assign to folder ${fid} failed: ${resp.status}`);
+        }
         for (const fid of toUnassign) {
 -            const resp = await fetch('/api/image-metadata/folders/unassign', {
 +            await updateFolderAssignments([bgFile], fid, true);
 -                method: 'POST',
 -                headers: getRequestHeaders(),
 -                body: JSON.stringify({ id: fid, paths: [relativePath] }),
 -            });
 -            if (!resp.ok) throw new Error(`Unassign from folder ${fid} failed: ${resp.status}`);
 -        }
+-
 -        // Update local state
 -        const newFolderIds = folderList
 -            .filter(f => {
 -                const wasIn = currentFolderIds.includes(f.id);
 -                if (toAssign.includes(f.id)) return true;
 -                if (toUnassign.includes(f.id)) return false;
 -                return wasIn;
 -            })
 -            .map(f => f.id);
+-
 -        if (newFolderIds.length > 0) {
 -            imageFolderMap[bgFile] = newFolderIds;
 -        } else {
 -            delete imageFolderMap[bgFile];
+        }
         renderFolderGrid();

  * @returns {BG_SOURCES} Active background tab source
  */
 export function getActiveBackgroundTab() {
     returnconst tabs = $('#bg_tabs').tabs('option', 'active');
 +    if (!tabs.length || !tabs.data('ui-tabs')) {
 +        return BG_SOURCES.GLOBAL;
 +    }
 +    return tabs.tabs('option', 'active');
+}
 export function initBackgrounds() {

         })
         .off('click', '.jg-button').on('click', '.jg-button', function (e) {
             e.stopPropagation();
 +            if (isBackgroundSelectionMode && $(this).closest('#bg_menu_content').length) {
 +                return;
 +            }
             const action = $(this).data('action');
             switch (action) {

         applyThumbnailColumns(background_settings.thumbnailColumns + 1);
     });
     $('#auto_background').on('click', autoBackgroundCommand);
 +    $('#bg_selection_mode_button').on('click', () => setBackgroundSelectionMode(!isBackgroundSelectionMode));
 +    $('#bg_group_add_to_folder_button').on('click', onAddSelectedToFolder);
 +    $('#bg_folder_remove_selected_button').on('click', onRemoveSelectedFromCurrentFolder);
     $('#add_bg_button').on('change', (e) => onBackgroundUploadSelected(e.originalEvent));
     $('#bg-filter').on('input', () => debouncedOnBackgroundFilterInput());
     $('#bg-sort').on('change', function () {

     });
     $('#bg_tabs').tabs();
 +    $('#bg_tabs').on('tabsactivate', () => updateGroupFolderControlsVisibility());
 +    updateGroupFolderControlsVisibility();
 +    syncGroupSelectionUi();
+}