const groups = new Map();
let n = 1, active = null;

const hue = s => {
  let h = 0;
  for (const c of s) h = c.charCodeAt(0) + ((h << 5) - h);
  h = Math.abs(h) % 360;
  return h >= 40 && h <= 70 ? (h + 120) % 360 : h;
};

document.querySelectorAll('article.post').forEach(a => {
  const i = a.querySelector('i.icon-trash');
  if (!i?.title) return (a.style.display = 'none');
  a.style.display = '';

  const t = i.title;
  if (!groups.has(t)) groups.set(t, n++);
  const id = groups.get(t);

  if (i.nextElementSibling?.classList.contains('trash-title-info')) return;

  const s = document.createElement('span');
  s.className = 'trash-title-info';
  s.style.cssText = `font-size:12px;color:hsl(${hue(t)},65%,38%);cursor:pointer`;

  s.innerHTML =
    `<span style="font-weight:bold;font-style:normal"> [${id}]</span>` +
    `<span style="font-style:oblique"> ${t}</span>`;

  s.onclick = () => {
    active = active === id ? null : id;

    document.querySelectorAll('article.post').forEach(p => {
      const ti = p.querySelector('i.icon-trash')?.title;
      if (!ti) return;
      p.style.display =
        !active || groups.get(ti) === active ? '' : 'none';
    });
  };

  i.insertAdjacentElement('afterend', s);
});