feat(ai-sidebar): highlight channels with unread IRC activity (v3.6.1)

Channels (and the status window) in the sidebar now highlight when a new
message arrives while you're not viewing them, and clear when you click in:
- bold name + cyan dot for any unread activity
- stronger red dot + bold-cyan name for a DM or a mention of your nick
- selecting a channel clears its highlight

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ralyodio

apps/desktop/extensions/ai-sidebar/chat.css

@@ -39,9 +39,13 @@ a { color:var(--cyan); }
   border-bottom:1px solid var(--line); font-size:12px; color:var(--green); }
 .chans-head button { background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:6px; cursor:pointer; }
 #chan-list { list-style:none; margin:0; padding:6px; overflow-y:auto; flex:1; }
-#chan-list li { padding:6px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+#chan-list li { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; cursor:pointer; }
+#chan-list li .name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 #chan-list li.active { background:#0b1530; color:var(--cyan); }
-#chan-list li .unread { color:var(--cyan); float:right; }
+#chan-list li.unread .name { color:var(--fg); font-weight:600; }
+#chan-list li.mention .name { color:var(--cyan); font-weight:700; }
+#chan-list li .dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--cyan); }
+#chan-list li.mention .dot { background:#ff5d73; box-shadow:0 0 6px #ff5d73; }
 .join { padding:8px; border-top:1px solid var(--line); }
 .join input { width:100%; background:#04060c; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px; font:inherit; }
 

apps/desktop/extensions/ai-sidebar/chat.js

@@ -27,6 +27,8 @@ const STATUS = '✻ status'; // server/system window (always present, pinned fir
 const irc = new IrcClient();
 const buffers = new Map(); // channel -> [{from,text,time,...}]
 let active = null;
+const unread = new Set();   // channels/status with new activity since last viewed
+const mentions = new Set(); // subset: a DM or a mention of our nick (stronger highlight)
 
 function logStatus(text) { appendMsg({ channel: STATUS, sys: true, text, time: Date.now() }); }
 
@@ -39,14 +41,21 @@ function ensureBuffer(chan) {
 function renderChanList() {
   const ul = $('chan-list'); ul.innerHTML = '';
   for (const chan of buffers.keys()) {
-    const li = el('li', chan === active ? 'active' : '', chan);
+    let cls = 'chan';
+    if (chan === active) cls += ' active';
+    else if (mentions.has(chan)) cls += ' unread mention';
+    else if (unread.has(chan)) cls += ' unread';
+    const li = el('li', cls);
+    li.append(el('span', 'name', chan));
+    if (chan !== active && (unread.has(chan) || mentions.has(chan))) li.append(el('span', 'dot'));
     li.addEventListener('click', () => selectChannel(chan));
     ul.appendChild(li);
   }
 }
 
 function selectChannel(chan) {
   active = chan;
+  unread.delete(chan); mentions.delete(chan); // viewing it clears the highlight
   $('chan-title').textContent = chan;
   renderChanList();
   const m = $('msgs'); m.innerHTML = '';
@@ -56,7 +65,15 @@ function selectChannel(chan) {
 }
 
 function appendMsg(line, store = true) {
-  if (store) { ensureBuffer(line.channel); buffers.get(line.channel).push(line); }
+  if (store) {
+    ensureBuffer(line.channel);
+    buffers.get(line.channel).push(line);
+    if (line.channel && line.channel !== active) {
+      unread.add(line.channel);
+      if (!line.sys && (isDM(line) || isMention(line))) mentions.add(line.channel);
+      renderChanList();
+    }
+  }
   if (line.channel !== active) return;
   const m = $('msgs');
   const div = el('div', 'msg' + (line.sys ? ' sys' : '') + (line.self ? ' self' : '') + (line.notice ? ' notice' : ''));

apps/desktop/extensions/ai-sidebar/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TronBrowser",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "description": "TronBrowser — privacy-first, AI-native. Branded new tab, private search, CoinPay login, and a bring-your-own-keys AI sidebar.",
   "icons": {
     "16": "icons/icon-16.png",

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/desktop",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "Desktop shell for the TronBrowser Chromium fork",
   "type": "module",

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/docs",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "Documentation site",
   "type": "module",

apps/extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/extensions",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "TronBrowser extension store — pay $1, list your MV3 extension (tronbrowser.dev/store)",
   "type": "module",

apps/mobile/app.json

@@ -4,7 +4,7 @@
     "slug": "tronbrowserdev",
     "owner": "profullstack",
     "scheme": "tronbrowser",
-    "version": "3.6.0",
+    "version": "3.6.1",
     "orientation": "portrait",
     "userInterfaceStyle": "dark",
     "platforms": [

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/mobile",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "TronBrowser mobile (Expo / React Native) — Phase 2",
   "type": "module",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/web",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "TronBrowser marketing site + web dashboard",
   "type": "module",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tronbrowser",
-  "version": "3.6.0",
+  "version": "3.6.1",
   "private": true,
   "description": "TronBrowser.dev — open-source, privacy-first, AI-native browser",
   "packageManager": "pnpm@9.12.0",