Scroll to top button (#4569) * init * implement review suggestions * remove unnecessary css variables * respect reduced motion * simplify setupScrollToTop call * power_user flag fix * simplify, more of above * remove remove button when drawer is closed logic * throttle scroll checker * Fix review comments * Make scrollToTop a shared function * Refactor logic * Replace on hover color * Prefer theme colors for button * Increase hover brightness for scroll-to-top button * Clean-up diff * Fix type annotation --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

7f9cbb04c6d1b2045f65d1fc77d94657fe3d2419

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

Signed

Parents: 873868389cf9c9f1a75596bad1bb40ddef55c740

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

     overflow-y: auto;
     overflow-x: hidden;
     padding: 0 5px 15px;
 +    position: relative;
+}
 #bg_menu_content,

     background-color: rgba(255, 255, 255, 0.2);
+}
 +/* Scroll-to-Top Button */
 +#bg-scroll-top {
 +    position: absolute;
 +    bottom: 20px;
 +    right: 20px;
 +    width: 42px;
 +    height: 42px;
 +    background: var(--SmartThemeBlurTintColor);
 +    color: var(--SmartThemeBodyColor);
 +    border: 1px solid var(--SmartThemeBorderColor);
 +    border-radius: 50%;
 +    cursor: pointer;
 +    z-index: 10;
 +    font-size: 18px;
 +    display: inline-flex;
 +    align-items: center;
 +    justify-content: center;
 +    opacity: 0;
 +    transition: opacity var(--animation-duration) ease;
 +    pointer-events: none;
 +}
++
 +#bg-scroll-top.visible {
 +    opacity: 1;
 +    pointer-events: auto;
 +}
++
 +#bg-scroll-top:hover {
 +    filter: brightness(150%);
 +    outline: 1px solid var(--interactable-outline-color);
 +}
++
 +#bg-scroll-top .fa-solid {
 +    margin: 0;
 +    padding: 0;
 +    line-height: 1;
 +}
++
 .thumbnail-clipper {
     position: absolute;
     top: -2px;

public/index.html+3 -0 Viewed

                 <form id="form_bg_upload" style="display: none;">
                     <input type="file" id="add_bg_button" name="avatar" accept="image/jpeg,image/png,image/gif,image/bmp,image/svg+xml,video/*">
                 </form>
 +                <button id="bg-scroll-top" type="button" class="menu_button menu_button_icon" title="Scroll backgrounds to top" data-i18n="[title]Scroll backgrounds to top">
 +                    <i class="fa-solid fa-chevron-up" aria-hidden="true"></i>
 +                </button>
             </div>
         </div>
         <div id="extensions-settings-button" class="drawer">

public/scripts/backgrounds.js+7 -1 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 } from './utils.js';
 import { debounce_timeout } from './constants.js';
 import { t } from './i18n.js';
 import { Popup } from './popup.js';

         await getBackgrounds();
         await onChatChanged();
     });
++
 +    setupScrollToTop({
 +        scrollContainerId: 'bg-scrollable-content',
 +        buttonId: 'bg-scroll-top',
 +        drawerId: 'Backgrounds',
 +    });
+}

public/scripts/utils.js+51 -0 Viewed

     DOMPurify,
     Readability,
     isProbablyReaderable,
 +    lodash,
 } from '../lib.js';
 import { getContext } from './extensions.js';

 export function versionCompare(srcVersion, minVersion) {
     return (srcVersion || '0.0.0').localeCompare(minVersion, undefined, { numeric: true, sensitivity: 'base' }) > -1;
+}
++
 +/**
 + * Sets up the scroll-to-top button functionality.
 + * @param {object} params Parameters object
 + * @param {string} params.scrollContainerId Scrollable container element ID
 + * @param {string} params.buttonId Button element ID
 + * @param {string} params.drawerId Drawer element ID
 + * @param {number} [params.visibilityThreshold] Scroll position (px) to show the button (default: 300)
 + * @returns {() => void} Cleanup function to remove event listeners
 + */
 +export function setupScrollToTop({ scrollContainerId, buttonId, drawerId, visibilityThreshold = 300 }) {
 +    const scrollContainer = document.getElementById(scrollContainerId);
 +    const btn = document.getElementById(buttonId);
 +    const drawer = document.getElementById(drawerId);
++
 +    if (!btn || !drawer) {
 +        // Not fatal; the drawer or button may not exist in some builds. Use debug level.
 +        console.debug('Scroll-to-top: button or drawer not found during setup.');
 +        return () => { /* noop cleanup */ };
 +    }
++
 +    if (!scrollContainer) {
 +        console.debug('Scroll-to-top: scroll container not found during setup.');
 +        return () => { /* noop cleanup */ };
 +    }
++
 +    const updateButtonVisibility = () => btn.classList.toggle('visible', scrollContainer.scrollTop > visibilityThreshold);
 +    const updateButtonVisibilityThrottled = lodash.throttle(updateButtonVisibility, debounce_timeout.standard, { leading: true, trailing: true });
 +    const onScroll = () => updateButtonVisibilityThrottled();
 +    scrollContainer.addEventListener('scroll', onScroll, { passive: true });
++
 +    // Scroll to top on click (button semantics provide keyboard activation natively)
 +    const onActivate = (/** @type {MouseEvent} */ e) => {
 +        e.preventDefault();
 +        e.stopPropagation();
++
 +        const userPrefersReduced = power_user.reduced_motion;
 +        scrollContainer.scrollTo({ top: 0, behavior: userPrefersReduced ? 'auto' : 'smooth' });
 +    };
 +    btn.addEventListener('click', onActivate);
++
 +    // Initial state check
 +    updateButtonVisibility();
++
 +    // Return cleanup function for caller to hold and invoke when appropriate
 +    return () => {
 +        scrollContainer.removeEventListener('scroll', onScroll);
 +        btn.removeEventListener('click', onActivate);
 +    };
 +}