Collapse repeated unread notifications in phabricator

README.md

Group and collapse phabricator notifications per task

See it in action (disabled vs enabled)

Apply the userscript using greasemonkey or similar to urls like https://phabricator.wikimedia.org/notification/query/unread/

phab-collapse-notifos.user.js

// ==UserScript==
// @name        phab unread grouping
// @namespace   joaquin
// @include     https://phabricator.wikimedia.org/notification/*
// @version     1
// @grant       none
// ==/UserScript==

const notifos = Array.from(document.querySelectorAll('.phabricator-notification-list .phabricator-notification'))
  .map((el) => ({
    el,
    task: el.querySelector('.phui-handle:not(.phui-link-person)')
  }))

const groups = notifos.reduce((gs, n) => {
  let key = n.task.href
  gs[key] = gs[key] || {
    title: n.task.textContent,
    href: key,
    children: []
  }
  gs[key].children.push(n)
  return gs
}, {})

const notifoList = document.querySelector('.phabricator-notification-list')

notifoList.innerHTML = ''

Object.keys(groups).forEach((k) => {
  let group = groups[k]
  notifoList.appendChild(renderGroup(group))
})

function renderGroup(group) {
  var container = document.createElement('div')
  container.style.padding = '0.5em 1em'
  container.innerHTML = `
    <h3 class='phui-header-header'>
      <span style='float: right;'>
        <span class="read visual-only phui-icon-view phui-font-fa fa-eye-slash" aria-hidden="true" style='cursor:pointer'></span>
        <span class='toggle' style='min-width: 40px; text-align: right; display: inline-block; cursor: pointer; font-weight: bold;'>&lt; ${group.children.length}</span>
      </span>
      <a href='${group.href}'>${group.title}</a>
    </h3>
    <div class='grouped-notifos' style='display: none; font-size: 0.8em;'>
    </div>
  `
  var toggle = container.querySelector('.toggle')
  var read = container.querySelector('.read')
  var grouped = container.querySelector('.grouped-notifos')

  read.addEventListener('click', () => {
    var i = document.createElement('img')
    i.src = group.href
    container.remove()
  })
  
  toggle.addEventListener('click', () => {
    if (toggle.textContent.slice(0,1) === '<') {
      toggle.textContent='v'+toggle.textContent.slice(1)
      grouped.style.display = 'block'
    } else {
      toggle.textContent='<'+toggle.textContent.slice(1)
      grouped.style.display = 'none'
    }
  })
  
  group.children.forEach((n) =>
    grouped.appendChild(n.el.cloneNode(true)))
  
  return container
}

Btw, @20after4 made https://addons.mozilla.org/en-US/firefox/addon/phabricatornotificationgroups/ out of this gist