☰

WhatsApp Web - Clean UI

Fix & debloat WhatsApp Web's interface

// ==UserScript==
// @name         WhatsApp Web - Clean UI
// @description  Fix & debloat WhatsApp Web's interface
// @author       Gamba
// @version      1.4
// @license      MIT
// @namespace    http://tampermonkey.net/
// @match        https://web.whatsapp.com/*
// @icon         https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://web.whatsapp.com/&size=256
// @grant        none
// @run-at       document-idle
// ==/UserScript==

"use strict";

// Prevent Ctrl+Delete shortcut (delete chat)
{
    document.addEventListener("keydown", onKeyboard, true);

    function onKeyboard(input)
    {
        if (input.ctrlKey && input.key == "Delete")
        {
            input.stopImmediatePropagation();
        }
    }
}

// Fix chat exit on change tab
{
    document.addEventListener("click", onClick, true);

    function onClick(event)
    {
        const button = event.target.closest("button");

        if (button)
        {
            const header = button.closest("header");

            if (header && header.parentElement.hasAttribute("tabindex"))
            {
                button.blur();

                document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
            }
        }
    }
}

// Apply CSS
{
    const css =
    `
    /*Viewport*/
    #app > div > div > div[tabindex]
    {
        top: 0;

        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
    }

    /*Desktop app advertisement*/
    #app > div > div > div[tabindex] > div:nth-child(5) > div:not(#main) > div
    {
        > div:nth-child(1),
        > div:nth-child(2)
        {
            display: none;
        }
    }

    #side > div:last-child *
    {
        display: none;
    }

    /*Channels & communities*/
    #app > div > div > div[tabindex] > header > div > div > div > div > span > div > div:first-child
    {
        > div:nth-child(3),
        > div:nth-child(4)
        {
            display: none;
        }
    }

    /*Video call button*/
    #main > header > div:last-child > div > div:first-child
    {
        display: none;
    }

    /*Chat lists*/
    #side > [role="tablist"]
    {
        display: none;
    }

    /*Chat separators*/
    #pane-side
    {
        > div.xh8yej3.x150wa6m,
        > div:last-child
        {
            display: none;
        }

        > div:nth-last-child(2) > div > div > div:first-child > div > div > div > div:last-child
        {
            border-top: 0;
        }
    }

    /*Chat dropdowns arrows*/
    #pane-side > div:nth-last-child(2) > div > div > div > div > div > div:not(:hover) > div:last-child > div:last-child > div:last-child > span:last-child
    {
        display: none;
    }

    /*Popover tooltips*/
    #wa-popovers-bucket *
    {
        display: none;
    }

    /*Scrollbar*/
    *
    {
        scrollbar-width: unset !important;
        scrollbar-color: unset !important;
    }

    div
    {
        ::-webkit-scrollbar
        {
            width: 14px !important;
        }

        ::-webkit-scrollbar-button
        {
            display: none !important;
        }

        ::-webkit-scrollbar-track,
        ::-webkit-scrollbar-track-piece
        {
            background-color: transparent !important;
        }

        ::-webkit-scrollbar-thumb
        {
            height: 50px !important;

            border: 3px solid transparent !important;
            border-radius: 100px;
            background-clip: padding-box !important;

            background-color: rgba(var(--black-rgb), 20%) !important;
        }
    }

    .dark div ::-webkit-scrollbar-thumb
    {
        background-color: rgba(var(--white-rgb), 16%) !important;
    }
    `;

    const style = document.createElement("style");
    style.textContent = css;
    document.head.appendChild(style);
}