Trello collapsible list userscript (tested with Safari)

trello-collapsible-list.md

Trello does not support collapsing lists out of the box. There are different solutions such as an extension for Chrome. But nothing that works in Safari any more, as of March 2023, so I wrote my own user script.

Use this with the Userscripts extension for Safari.

It looks like this:

Click on the ▼ icon to toggle the list.

Collapsed state is persisted across page loads.

userscript-trello-collapsible-list.js

// ==UserScript==
// @name        Trello Collapsible Lists
// @description written by @alexkli
// @match https://trello.com/b/*
// ==/UserScript==

const boardId = window.location.pathname.replace(/^\/b\/([^\/]+).*$/, '$1');

function getListKey(list) {
    const listName = list.querySelector('.list-header-name-assist').textContent;
    return `list-collapsed-${boardId}-${listName}`;
}

function toggleList(collapseButton) {
    const list = collapseButton.parentNode.parentNode;
    const listContent = list.querySelector('.list-cards');
    const listKey = getListKey(list);

    if (listContent.toggleAttribute('hidden')) {
        // hidden
        collapseButton.innerText = '▶︎';
        list.querySelector('.card-composer-container').style.display = 'none';
        localStorage.setItem(listKey, 'true');
    } else {
        // visible
        collapseButton.innerText = '▼';
        list.querySelector('.card-composer-container').style.display = 'flex';
        localStorage.removeItem(listKey);
    }
}

function init() {
    // list: .list
    // header: .list-header
    // list content: .list-cards
    document.querySelectorAll('.list').forEach((list) => {
        const listKey = getListKey(list);
        
        const listHeader = list.querySelector('.list-header');
        const collapseButton = document.createElement('div');
        collapseButton.className = 'list-collapse-button';
        collapseButton.innerText = '▼';
        collapseButton.style.position = 'absolute';
        collapseButton.style.width = '8px';
        collapseButton.style.cursor = 'pointer';
        collapseButton.addEventListener("click", (event) => {
            toggleList(event.target);
        });
        listHeader.insertBefore(collapseButton, listHeader.firstChild);
        
        const listHeaderTarget = list.querySelector('.list-header-target');
        listHeaderTarget.style.left = '25px';

        const listTitle = list.querySelector('.list-header-name');
        listTitle.style['margin-left'] = '10px';
        
        if (localStorage.getItem(listKey)) {
            toggleList(collapseButton);
        }
    });
}

function onDocumentReady() {
    // wait until we have .list elements present in the DOM
    const observer = new MutationObserver((mutationList) => {
        if (document.querySelector('.list')) {
            observer.disconnect();
            init();
        }
    });
    observer.observe(document, {
        childList: true,
        subtree: true
    });
}

if (document.readyState !== "loading") {
    onDocumentReady();
} else {
    window.addEventListener("DOMContentLoaded", onDocumentReady);
}