filter only images, images without quotes

// ==UserScript==
// @name         Toggle Post Filters (Images / No Quote Backlinks)
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Toggle to hide posts without images, or posts with images but containing quotelinks in backlinks
// @match        https://boards.4chan.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=4chan.org
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const hiddenClass = 'tm-hidden';

    const style = document.createElement('style');
    style.textContent = `
        .tm-hidden {
            display: none !important;
        }
        .tm-toggle-button {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 8px 12px;
            margin-top: 5px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10000;
            font-size: 14px;
        }
        .tm-toggle-button:hover {
            background-color: #0056b3;
        }
        #toggleQuoteBtn {
            top: 50px;
        }
    `;
    document.head.appendChild(style);

    let filterNoImage = false;
    let filterImageWithQuote = false;

    function updatePosts() {
        const posts = document.querySelectorAll('.postContainer');
        posts.forEach(post => {
            const hasImage = post.querySelector('img') !== null;

            const backlinkContainer = post.querySelector('.postInfo > .backlink');
            const hasBacklinkQuote = backlinkContainer && backlinkContainer.querySelector('a.quotelink') !== null;

            let hide = false;

            if (filterNoImage && !hasImage) {
                hide = true;
            }

            if (filterImageWithQuote && hasImage && hasBacklinkQuote) {
                hide = true;
            }

            if (hide) {
                post.classList.add(hiddenClass);
            } else {
                post.classList.remove(hiddenClass);
            }
        });
    }

    function createButton(id, text, topOffset, onClick) {
        const btn = document.createElement('button');
        btn.id = id;
        btn.className = 'tm-toggle-button';
        btn.style.top = `${topOffset}px`;
        btn.textContent = text;
        btn.addEventListener('click', onClick);
        document.body.appendChild(btn);
        return btn;
    }

    const btnImage = createButton('toggleImageBtn', 'Filter: Only Images [OFF]', 10, () => {
        filterNoImage = !filterNoImage;
        btnImage.textContent = `Filter: Only Images [${filterNoImage ? 'ON' : 'OFF'}]`;
        updatePosts();
    });

    const btnQuote = createButton('toggleQuoteBtn', 'Filter: Images w/ Backlink [OFF]', 50, () => {
        filterImageWithQuote = !filterImageWithQuote;
        btnQuote.textContent = `Filter: Images w/ Backlink [${filterImageWithQuote ? 'ON' : 'OFF'}]`;
        updatePosts();
    });

    window.addEventListener('load', updatePosts);

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    const posts = node.matches('.postContainer') ? [node] : node.querySelectorAll('.postContainer');
                    posts.forEach(post => {
                        const hasImage = post.querySelector('img') !== null;

                        const backlinkContainer = post.querySelector('.postInfo > .backlink');
                        const hasBacklinkQuote = backlinkContainer && backlinkContainer.querySelector('a.quotelink') !== null;

                        let hide = false;

                        if (filterNoImage && !hasImage) hide = true;
                        if (filterImageWithQuote && hasImage && hasBacklinkQuote) hide = true;

                        if (hide) post.classList.add(hiddenClass);
                    });
                }
            });
        });
    });

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