☰

Clean Twitter

Bring back peace on Twitter

// ==UserScript==
// @name         Clean Twitter
// @namespace    http://antfu.me/
// @version      0.5.0
// @description  Bring back peace on Twitter
// @author       Anthony Fu (https://github.com/antfu)
// @license      MIT
// @homepageURL  https://github.com/antfu/userscript-clean-twitter
// @supportURL   https://github.com/antfu/userscript-clean-twitter
// @match        https://twitter.com/**
// @match        https://x.com/**
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @run-at       document-body
// ==/UserScript==

(function () {
  'use strict'

  function useOption(key, title, defaultValue) {
    if (typeof GM_getValue === 'undefined') {
      return {
        value: defaultValue,
      }
    }

    let value = GM_getValue(key, defaultValue)
    const ref = {
      get value() {
        return value
      },
      set value(v) {
        value = v
        GM_setValue(key, v)
        location.reload()
      },
    }

    GM_registerMenuCommand(`${title}: ${value ? '✅' : '❌'}`, () => {
      ref.value = !value
    })

    return ref
  }

  const hideHomeTabs = useOption('twitter_hide_home_tabs', 'Hide Home Tabs', true)
  const hideBlueBadge = useOption('twitter_hide_blue_badge', 'Hide Blue Badges', true)
  const skipDelegateDialog = useOption('twitter_skip_delegate_dialog', 'Skip delegate account switching dialog', true)
  const expandPersonalAccounts = useOption('twitter_expand_personal_accounts', 'Expand drawer of personal accounts', true)

  const style = document.createElement('style')
  const hides = [
    // menu
    '[aria-label="Communities (New items)"], [aria-label="Communities"], [aria-label="Twitter Blue"], [aria-label="Verified"], [aria-label="Timeline: Trending now"], [aria-label="Who to follow"], [aria-label="Search and explore"], [aria-label="Verified Organizations"]',
    // submean
    '* > [href="/i/verified-orgs-signup"]',
    // sidebar
    '[aria-label="Trending"] > * > *:nth-child(3), [aria-label="Trending"] > * > *:nth-child(4), [aria-label="Trending"] > * > *:nth-child(5)',
    // "Verified" tab
    '[role="presentation"]:has(> [href="/notifications/verified"][role="tab"])',
    // "Jobs" tab
    '[href="/jobs"]',
    // verified badge
    hideBlueBadge.value && '*:has(> * > [aria-label="Verified account"])',
    // Home tabs
    hideHomeTabs.value && '[role="tablist"]:has([href="/home"][role="tab"])',
  ].filter(Boolean)

  style.innerHTML = [
    `${hides.join(',')}{ display: none !important; }`,
    // styling
    '[aria-label="Search Twitter"] { margin-top: 20px !important; }',
  ].join('')

  document.body.appendChild(style)

  function selectedFollowingTab() {
    if (hideHomeTabs.value) {
      if (window.location.pathname === '/home') {
        const tabs = document.querySelectorAll('[href="/home"][role="tab"]')
        if (tabs.length === 2 && tabs[1].getAttribute('aria-selected') === 'false')
          tabs[1].click()
      }
    }
  }

  function hideDiscoverMore() {
    const conversations = document.querySelector('[aria-label="Timeline: Conversation"]')?.children[0]
    if (!conversations)
      return

    let hide = false
    Array.from(conversations.children).forEach((el) => {
      if (hide) {
        el.style.display = 'none'
        return
      }

      const span = el.querySelector('h2 > div > span')

      if (span?.textContent.trim() === 'Discover more') {
        hide = true
        el.style.display = 'none'
      }
    })
  }

  // Select "Following" tab on home page, if not
  window.addEventListener('load', () => {
    setTimeout(() => {
      selectedFollowingTab()
      hideDiscoverMore()
    }, 500)
    // TODO: use a better way to detect the tab is loaded
    setTimeout(() => {
      hideDiscoverMore()
    }, 1500)
    hideDiscoverMore()
  })

  if (expandPersonalAccounts.value) {
    let timer
    const ob = new MutationObserver((mut) => {
      if (!mut.some(m => m.addedNodes.length))
        return
      if (timer)
        clearTimeout(timer)
      timer = setTimeout(() => {
        const personalAccount = [...document.querySelectorAll('svg')].find(i => i.parentElement.textContent?.trim() === 'Personal accounts')?.parentElement
        if (!personalAccount || !personalAccount.nextSibling)
          return
        const nextElement = personalAccount.nextSibling
        if (nextElement.tagName !== 'BUTTON') {
          personalAccount.click()
        }
      }, 200)
    })
    ob.observe(document.body, {
      childList: true,
      subtree: true,
    })
  }

  if (skipDelegateDialog.value) {
    const ob = new MutationObserver((mut) => {
      if (!mut.some(m => m.addedNodes.length))
        return
      const dialog = document.querySelector('[data-testid="sheetDialog"]')
      if (!dialog)
        return
      const text = dialog.textContent.toLowerCase()
      if (!text.includes('switch to a delegate account')) {
        // eslint-disable-next-line no-console
        console.debug('[Clean Twitter] Dialog is not detected as a "delegate account switching" dialog', dialog)
        return
      }

      const buttons = [...dialog.querySelectorAll('button')]

      const confrim = buttons.find(el => el.textContent.toLowerCase().includes('switch accounts'))

      if (!confrim) {
        // eslint-disable-next-line no-console
        console.debug('[Clean Twitter] Confirm button not found', dialog)
        return
      }

      confrim.click()
    })

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