feat: sort reaction emojis by count and add hover tooltip

- Add sortReactionsByCount setting (default: true): reorders the
  cat-icon emoji pills in coyo-reactions-info so the most-used
  reaction appears first instead of Haiilo's arbitrary order.
- Add showReactionCountTooltip setting (default: false): injects a
  breakdown like '👍22 💡2' into the existing (otherwise empty)
  cat-tooltip on the reactions summary button.
- Reaction types are fetched once per page load from
  /web/reaction-targets/types and cached; per-post counts are
  fetched from /web/reaction-targets/{type}?ids={id}.
- Icons are identified by the unique SVG fill color in their shadow
  DOM (each reaction type has a distinct color in the types API).
- A MutationObserver watches for [data-reaction-target-id] elements
  so the feature works on timeline infinite scroll and SPA navigation.
- Settings flow through the existing normalizeSettings/syncToCloud/
  pullFromCloud/resetSettings/export/import machinery automatically.
- Bump version to 0.5.0.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: nichu42

background.js

@@ -183,7 +183,9 @@ const DEFAULT_SETTINGS = {
   autoExpandClicksPerList: 3, // Max number of "Show more" clicks per list (0-10)
   autoExpandDelayMs: 300, // Delay between clicks in ms (100-1000)
   autoExpandScope: 'both', // Which lists to expand: 'both', 'workspaces', or 'pages'
-  cloudSync: false // Sync settings and muted users via browser account (opt-in)
+  cloudSync: false, // Sync settings and muted users via browser account (opt-in)
+  sortReactionsByCount: true, // Sort reaction emojis by count (most used first)
+  showReactionCountTooltip: false // Show reaction count breakdown on hover
 };
 
 function clampMessengerPanelWidthPercent(value) {

content.js

@@ -103,6 +103,12 @@
   let autoExpandMountObserver = null;
   let calendarActionObserver = null;
 
+  // Reaction enhancements
+  let sortReactionsByCount = true;
+  let showReactionCountTooltip = false;
+  let reactionTypesCache = null; // { TYPE: { color, unicode } }
+  let reactionEnhancerObserver = null;
+
   const MESSENGER_PANEL_WIDTH_MIN_PERCENT = 50;
   const MESSENGER_PANEL_WIDTH_MAX_PERCENT = 125;
   const MESSENGER_PANEL_WIDTH_DEFAULT_PERCENT = 100;
@@ -1215,6 +1221,193 @@
     debugLog('[AutoExpand] Mount observer installed (debounced 200ms)');
   }
 
+  // ── Reaction enhancements ──────────────────────────────────────────────────
+
+  // Fetch and cache the reaction type metadata (color fingerprint + unicode emoji).
+  async function getReactionTypes() {
+    if (reactionTypesCache) return reactionTypesCache;
+    try {
+      const res = await fetch('/web/reaction-targets/types');
+      if (!res.ok) return null;
+      const types = await res.json();
+      reactionTypesCache = {};
+      for (const t of types) {
+        reactionTypesCache[t.reactionType] = {
+          color: t.color,
+          unicode: t.fallbackUnicode
+        };
+      }
+      return reactionTypesCache;
+    } catch (e) {
+      debugLog('[Reactions] Failed to fetch reaction types:', e);
+      return null;
+    }
+  }
+
+  // Identify a cat-icon element's reaction type by matching the unique fill
+  // color from the types API against the SVG rendered in its shadow DOM.
+  function identifyReactionIcon(icon, fingerprintMap) {
+    try {
+      const shadow = icon.shadowRoot;
+      if (!shadow) return null;
+      const html = shadow.innerHTML;
+      for (const [type, info] of Object.entries(fingerprintMap)) {
+        if (html.includes(info.color)) return type;
+      }
+    } catch (e) { /* shadow DOM read error */ }
+    return null;
+  }
+
+  // Reorder the cat-icon reaction summary icons to match sortedTypes order.
+  function reorderReactionIcons(icons, sortedTypes, fingerprintMap) {
+    if (icons.length < 2) return;
+    const identified = icons.map(icon => ({
+      icon,
+      type: identifyReactionIcon(icon, fingerprintMap)
+    }));
+    // Build target order: known types first (by sortedTypes), unknowns appended
+    const targetOrder = [];
+    for (const type of sortedTypes) {
+      const match = identified.find(i => i.type === type);
+      if (match) targetOrder.push(match);
+    }
+    for (const item of identified) {
+      if (!targetOrder.includes(item)) targetOrder.push(item);
+    }
+    // Check if already in correct order
+    const alreadyCorrect = targetOrder.every((item, idx) => item.icon === icons[idx]);
+    if (alreadyCorrect) return;
+    // Re-insert in sorted order before the first icon's current position
+    const parent = icons[0].parentNode;
+    const insertBefore = icons[0];
+    for (const item of targetOrder) {
+      parent.insertBefore(item.icon, insertBefore);
+    }
+    debugLog('[Reactions] Reordered icons:', targetOrder.map(i => i.type).join(', '));
+  }
+
+  // Inject (or update) a count tooltip into the cat-tooltip of a coyo-reactions-info.
+  function injectReactionTooltip(reactionsInfo, sortedData, fingerprintMap) {
+    const tooltip = reactionsInfo.querySelector('cat-tooltip');
+    if (!tooltip) return;
+    // Remove any previously injected tooltip content
+    const existing = tooltip.querySelector('.haiilo-enhancer-reaction-tooltip');
+    if (existing) existing.remove();
+    const text = sortedData
+      .map(({ reactionType, count }) => {
+        const unicode = fingerprintMap[reactionType]?.unicode || reactionType;
+        return `${unicode}${count}`;
+      })
+      .join(' ');
+    const p = document.createElement('p');
+    p.slot = 'content';
+    p.className = 'haiilo-enhancer-reaction-tooltip';
+    p.textContent = text;
+    tooltip.appendChild(p);
+    debugLog('[Reactions] Injected tooltip:', text);
+  }
+
+  // Process a single [data-reaction-target-id] anchor element.
+  async function processReactionTarget(dataEl) {
+    if (dataEl.dataset.haiiloEnhancerReactionsDone) return;
+    dataEl.dataset.haiiloEnhancerReactionsDone = '1';
+
+    const targetId = dataEl.dataset.reactionTargetId;
+    const targetType = dataEl.dataset.reactionTargetType;
+    const count = parseInt(dataEl.dataset.reactionCount, 10);
+    if (!targetId || !targetType || count < 2) return;
+
+    const fingerprintMap = await getReactionTypes();
+    if (!fingerprintMap) return;
+
+    // Fetch the summary for this target
+    let sortedData;
+    try {
+      const res = await fetch(`/web/reaction-targets/${targetType}?ids=${targetId}`);
+      if (!res.ok) return;
+      const json = await res.json();
+      const entry = json[targetId];
+      if (!entry || !Array.isArray(entry.allReactionsByCount)) return;
+      // Sort descending by count
+      sortedData = [...entry.allReactionsByCount].sort((a, b) => b.count - a.count);
+    } catch (e) {
+      debugLog('[Reactions] Failed to fetch summary for', targetId, e);
+      return;
+    }
+
+    // Find the enclosing coyo-reactions-info
+    const reactionsInfo = dataEl.closest('coyo-reactions-info') ||
+      dataEl.parentElement?.querySelector('coyo-reactions-info') ||
+      dataEl.closest('[data-test="info-container"]')?.querySelector('coyo-reactions-info');
+    if (!reactionsInfo) return;
+
+    // Wait briefly for icons to render if they haven't yet
+    let icons = [...reactionsInfo.querySelectorAll('cat-icon[data-test="reactions-info-icon"]')];
+    if (icons.length === 0) {
+      await new Promise(r => setTimeout(r, 150));
+      icons = [...reactionsInfo.querySelectorAll('cat-icon[data-test="reactions-info-icon"]')];
+    }
+
+    const sortedTypes = sortedData.map(d => d.reactionType);
+
+    if (sortReactionsByCount && icons.length >= 2) {
+      reorderReactionIcons(icons, sortedTypes, fingerprintMap);
+    }
+
+    if (showReactionCountTooltip) {
+      injectReactionTooltip(reactionsInfo, sortedData, fingerprintMap);
+    }
+  }
+
+  function setupReactionEnhancerObserver() {
+    if (reactionEnhancerObserver) reactionEnhancerObserver.disconnect();
+
+    // Process any already-present targets on the page
+    document.querySelectorAll('[data-reaction-target-id]').forEach(el => {
+      processReactionTarget(el).catch(() => {});
+    });
+
+    reactionEnhancerObserver = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node.nodeType !== Node.ELEMENT_NODE) continue;
+          // Direct match
+          if (node.hasAttribute && node.hasAttribute('data-reaction-target-id')) {
+            processReactionTarget(node).catch(() => {});
+          }
+          // Descendants
+          if (node.querySelectorAll) {
+            node.querySelectorAll('[data-reaction-target-id]').forEach(el => {
+              processReactionTarget(el).catch(() => {});
+            });
+          }
+        }
+      }
+    });
+
+    reactionEnhancerObserver.observe(document.body, { childList: true, subtree: true });
+    debugLog('[Reactions] Observer installed');
+  }
+
+  // Re-run reaction enhancements after settings change (clear processed flags first).
+  function reapplyReactionEnhancements() {
+    if (!sortReactionsByCount && !showReactionCountTooltip) return;
+    // Clear done flags so existing elements are reprocessed
+    document.querySelectorAll('[data-reaction-target-id][data-haiilo-enhancer-reactions-done]')
+      .forEach(el => {
+        delete el.dataset.haiiloEnhancerReactionsDone;
+        // Also clear injected tooltips if feature disabled
+        if (!showReactionCountTooltip) {
+          const ri = el.closest('coyo-reactions-info') ||
+            el.closest('[data-test="info-container"]')?.querySelector('coyo-reactions-info');
+          if (ri) ri.querySelector('.haiilo-enhancer-reaction-tooltip')?.remove();
+        }
+      });
+    setupReactionEnhancerObserver();
+  }
+
+  // ── End Reaction enhancements ──────────────────────────────────────────────
+
   // Initialize
   init();
 
@@ -1325,6 +1518,7 @@
                 if (!autoExpandMountObserver) {
                   setupAutoExpandMountObserver();
                 }
+                reapplyReactionEnhancements();
                 sendResponse({ success: true });
               });
               return true;
@@ -1362,6 +1556,11 @@
       autoExpandShowMoreLists();
       setupAutoExpandMountObserver();
 
+      // Reaction enhancements (sort by count, hover tooltip)
+      if (sortReactionsByCount || showReactionCountTooltip) {
+        setupReactionEnhancerObserver();
+      }
+
       // Replace generic channel avatars and process date/times
       setTimeout(() => {
         if (isExtensionContextValid()) {
@@ -1402,6 +1601,8 @@
           const rawDelay = parseInt(settings.autoExpandDelayMs, 10);
           autoExpandDelayMs = isNaN(rawDelay) ? 300 : Math.max(100, Math.min(1000, rawDelay));
           autoExpandScope = normalizeAutoExpandScope(settings.autoExpandScope);
+          sortReactionsByCount = settings.sortReactionsByCount !== false;
+          showReactionCountTooltip = settings.showReactionCountTooltip === true;
           const messengerPanelWidthPercent = clampMessengerPanelWidthPercent(settings.messengerPanelWidthPercent);
           debugLog('[Content] keepMessengerExpanded setting:', settings.keepMessengerExpanded);
           debugLog('[Content] messengerPanelWidthPercent setting:', messengerPanelWidthPercent);
@@ -1433,6 +1634,8 @@
           autoExpandClicksPerList = 3;
           autoExpandDelayMs = 300;
           autoExpandScope = 'both';
+          sortReactionsByCount = true;
+          showReactionCountTooltip = false;
         }
       } else {
         debugLog('Cannot load settings: extension context invalid');
@@ -1452,6 +1655,8 @@
         autoExpandClicksPerList = 3;
         autoExpandDelayMs = 300;
         autoExpandScope = 'both';
+        sortReactionsByCount = true;
+        showReactionCountTooltip = false;
       }
     } catch (e) {
       console.error('Failed to load settings:', e);
@@ -1470,6 +1675,8 @@
       autoExpandClicksPerList = 3;
       autoExpandDelayMs = 300;
       autoExpandScope = 'both';
+      sortReactionsByCount = true;
+      showReactionCountTooltip = false;
     }
   }
 

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Haiilo Enhancer",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Enhance your Haiilo experience - mute users, customize your feed, and more",
   "homepage_url": "https://github.com/nichu42/haiilo-enhancer",
   "permissions": [

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Haiilo Enhancer",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Enhance your Haiilo experience - mute users, customize your feed, and more",
   "homepage_url": "https://github.com/nichu42/haiilo-enhancer",
   "permissions": [

options.html

@@ -206,7 +206,23 @@ <h2>Custom Homepage Settings</h2>
     </section>
 
     <section>
-      <h2>Auto-Expand Sidebar Lists</h2>
+      <h2>Reactions</h2>
+      <p class="description">Improve how emoji reactions are displayed on posts and comments.</p>
+      <div class="form-group checkbox-group">
+        <label>
+          <input type="checkbox" id="sortReactionsByCount">
+          <span>Sort reaction emojis by count (most used first)</span>
+        </label>
+      </div>
+      <div class="form-group checkbox-group">
+        <label>
+          <input type="checkbox" id="showReactionCountTooltip">
+          <span>Show reaction count breakdown on hover (e.g. 👍22 💡2)</span>
+        </label>
+      </div>
+    </section>
+
+    <section>
       <p class="description">Haiilo's left sidebar shows a limited number of Workspaces and Pages before hiding the rest behind a "Show more" button. Enable this to auto-click that button on page load so all entries are visible at once.</p>
       <div class="form-group checkbox-group">
         <label>

options.js

@@ -142,6 +142,8 @@ async function loadSettings() {
 
   // Auto-expand sidebar lists
   document.getElementById('autoExpandEnabled').checked = settings.autoExpandEnabled === true;
+  document.getElementById('sortReactionsByCount').checked = settings.sortReactionsByCount !== false;
+  document.getElementById('showReactionCountTooltip').checked = settings.showReactionCountTooltip === true;
   document.getElementById('autoExpandClicksPerList').value = settings.autoExpandClicksPerList !== undefined ? settings.autoExpandClicksPerList : 3;
   document.getElementById('autoExpandDelayMs').value = settings.autoExpandDelayMs !== undefined ? settings.autoExpandDelayMs : 300;
   const scope = settings.autoExpandScope;
@@ -367,6 +369,8 @@ function setupEventListeners() {
   // Auto-expand settings
   document.getElementById('autoExpandEnabled').addEventListener('change', saveSettings);
   document.getElementById('autoExpandScope').addEventListener('change', saveSettings);
+  document.getElementById('sortReactionsByCount').addEventListener('change', saveSettings);
+  document.getElementById('showReactionCountTooltip').addEventListener('change', saveSettings);
 
   // Cloud sync toggle
   const cloudSyncCheckbox = document.getElementById('cloudSync');
@@ -599,6 +603,8 @@ async function saveSettings() {
     autoExpandClicksPerList: parseInt(document.getElementById('autoExpandClicksPerList').value, 10) || 3,
     autoExpandDelayMs: parseInt(document.getElementById('autoExpandDelayMs').value, 10) || 300,
     autoExpandScope: document.getElementById('autoExpandScope').value,
+    sortReactionsByCount: document.getElementById('sortReactionsByCount').checked,
+    showReactionCountTooltip: document.getElementById('showReactionCountTooltip').checked,
     cloudSync: document.getElementById('cloudSync') ? document.getElementById('cloudSync').checked : false
   };