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
}

What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.

This is a clear win for usability. I like it a lot.

What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.

where's the rest of your's? :P

What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.

where's the rest of your's? :P

https://github.com/bd808/userscripts

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