Tampermonkey/UserJS&CSS script to enhance github notifications

github-notifications.user.js

// ==UserScript==
// @name         github-notifications
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://github.com/notifications
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==


const styles = `
.notification-unread.notification-severity-danger {
  border-left: 2px solid var(--color-danger-emphasis) !important;
}
.notification-unread.notification-severity-danger .notification-list-item-unread-indicator {
  background-color: var(--color-danger-emphasis);
}
.notification-severity-danger .notification-label {
  color: var(--color-danger-emphasis);
}


.notification-unread.notification-severity-attention {
  border-left: 2px solid var(--color-attention-emphasis) !important;
}
.notification-unread.notification-severity-attention .notification-list-item-unread-indicator {
  background-color: var(--color-attention-emphasis);
}
.notification-severity-attention .notification-label {
  color: var(--color-attention-emphasis);
}
`

const severityByLabel = {
    'mention':      'danger',
    'team mention': 'danger',
    'author':       'attention',
    'commented':    'attention',
}

setupNotifications()
document.addEventListener('DOMContentLoaded', setupNotifications)

function setupNotifications() {
    const sheet = document.createElement('style')
    sheet.innerText = styles
    document.head.appendChild(sheet)

    const node = document.querySelector('[data-hpc] > ul')

    const config = { childList: true }
    const observer = new MutationObserver(updateNotifications)
    observer.observe(node, config)

    updateNotifications()
}

function updateNotifications() {
    const labels =
          Array.from(
              document.querySelectorAll(
                  '[data-notification-id] > div > div:nth-child(2) > span'))

    labels.forEach(label => {
        const text = label.textContent.trim().replaceAll(' ', '-')
        const severity = severityByLabel[text]

        const item = label.closest('.notifications-list-item')
        item.classList.add(`notification-severity-${severity}`)
        label.classList.add('notification-label')
    })
}