focus-mode-fastmail.js

// ==UserScript==
// @name         Focus Mode for Fastmail
// @namespace    https://mtlynch.io/
// @version      0.2
// @description  Choose when to display new messages in Fastmail
// @author       mtlynch
// @match        https://www.fastmail.com/mail/*
// @grant        none
// @license      MIT License
// ==/UserScript==

(function() {
    'use strict';

    function addCustomStyles() {
        const focusModeStyleId = 'focus-mode-style';
        if (document.getElementById(focusModeStyleId)) {
            return;
        }
        document.head.insertAdjacentHTML("beforeend", `
<style id="${focusModeStyleId}">
.v-MailboxSource-badge {
  visibility: hidden;
}

.show-all .v-MailboxSource-badge {
  visibility: visible;
}

#btn-hide-all-emails {
  display: none;
}

.show-all #btn-show-all-emails {
  display: none;
}

.show-all #btn-hide-all-emails {
  display: block;
}

.btn-focus-mode {
  margin: 0.5rem 1rem;
}
</style>
`);
    }

    function foldersLoaded() {
        return document.querySelector('.v-Sources') !== null;
    }

    function ensureFocusButtonWrapperExists() {
        const wrapperId = 'focus-buttons';
        if (document.getElementById(wrapperId)) {
            return;
        }
        const wrapper = document.createElement('div');
        wrapper.id = wrapperId;
        document.querySelector('.v-Sources').parentElement.appendChild(wrapper);
    }

    function ensureButtonExists(id, label, onclick) {
        if (!foldersLoaded()) {
            return;
        }
        if (document.getElementById(id)) {
            return;
        }
        ensureFocusButtonWrapperExists();
        const btn = document.createElement('input');
        btn.type = 'button';
        btn.value = label;
        btn.id = id;
        btn.classList.add('v-Button');
        btn.classList.add('v-Button--standard');
        btn.classList.add('v-Button--size13');
        btn.classList.add('btn-focus-mode');
        btn.onclick = onclick;
        document.getElementById('focus-buttons').appendChild(btn);
    }

    var observer = new MutationObserver(function () {
        addCustomStyles();
        ensureButtonExists('btn-show-all-emails', 'Show Unread', () => {
            document.querySelector('.v-Sources').parentElement.classList.add('show-all');
        });
        ensureButtonExists('btn-hide-all-emails', 'Hide Unread', () => {
            document.querySelector('.v-Sources').parentElement.classList.remove('show-all');
        });
    });

    observer.observe(document, {
        childList: true,
        subtree: true
    });
})();