☰

Twitter/X filter media tab

filter twitter/x media tab

// ==UserScript==
// @name                Twitter/X filter media tab
// @namespace           https://greasyfork.org/users/821661
// @match               https://x.com/*
// @grant               GM_addStyle
// @version             1.1
// @author              hdyzen
// @description         filter twitter/x media tab
// @license             GPL-3.0-only
// ==/UserScript==

function createFilterButtons() {
	const filterContainer = document.createElement("div");
	filterContainer.id = "media-filter-controls";
	filterContainer.style.cssText = `
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 12px;
            padding: 12px;
            gap: 8px;
            backdrop-filter: blur(10px);
        `;

	const buttonStyle = `
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            background: #1d9bf0;
            color: white;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s;
        `;

	const allBtn = document.createElement("button");
	allBtn.id = "all";
	allBtn.textContent = "All";
	allBtn.style.cssText = buttonStyle;
	allBtn.onclick = () => document.body.removeAttribute("filter-by");

	const imagesBtn = document.createElement("button");
	imagesBtn.id = "images";
	imagesBtn.textContent = "Images";
	imagesBtn.style.cssText = buttonStyle;
	imagesBtn.onclick = () => document.body.setAttribute("filter-by", "images");

	const videosBtn = document.createElement("button");
	videosBtn.id = "videos";
	videosBtn.textContent = "Videos";
	videosBtn.style.cssText = buttonStyle;
	videosBtn.onclick = () => document.body.setAttribute("filter-by", "videos");

	filterContainer.appendChild(allBtn);
	filterContainer.appendChild(imagesBtn);
	filterContainer.appendChild(videosBtn);

	document.body.appendChild(filterContainer);
}
createFilterButtons();

GM_addStyle(`
    [filter-by="images"] #media-filter-controls #images, [filter-by="videos"] #media-filter-controls #videos {
        background: #1a8cd8 !important;
        scale: 0.95 !important;
    }
    body:has([data-testid="primaryColumn"] [role="navigation"] [href$="/media"][aria-selected="true"]) #media-filter-controls {
        display: flex !important;
    }
    [filter-by="videos"] [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] [role="listitem"]:has(a[href*="/photo/"]) {
        display: none;
    }
    [filter-by="images"] [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] [role="listitem"]:has(a[href*="/video/"]) {
        display: none;
    }
    [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] > div {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        margin: 4px 4px 0;
    }
    [data-testid="primaryColumn"]:has([role="navigation"] [href$="/media"][aria-selected="true"]) [role="region"] > div *:not([role="listitem"], [role="listitem"] *) {
        display: contents;
    }	
    `);