newtab: show full favorites list (no caps) + live filter box + played ✓; v0.2.8

- removed the 12-item cap on every section; renders all favorites.
- added a 'Filter favorites…' search box that live-filters across all
  sections client-side, with per-section counts.
- podcasts show a ✓ when the latest episode is completed (from favorites
  progress data).

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

Author: ralyodio

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

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TronBrowser",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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/extensions/ai-sidebar/newtab.css

@@ -66,6 +66,16 @@ body {
 .btr-item .btr-sub { font-size: 10px; text-align: center; line-height: 1.2; color: var(--muted);
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .btr-item:hover .btr-label { color: var(--cyan); }
+.btr-item { position: relative; }
+.btr-item .btr-played { position: absolute; top: -4px; right: 8px; width: 18px; height: 18px;
+  border-radius: 50%; background: #2fd47a; color: #04060c; font-size: 11px; font-weight: 700;
+  display: grid; place-items: center; }
+.btr-filter { width: 100%; max-width: 360px; margin: 10px 0 4px; padding: 8px 12px;
+  background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 8px;
+  font: inherit; }
+.btr-filter::placeholder { color: var(--muted); }
+#btr-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
+.btr-group .btr-count { color: var(--muted); font-weight: 400; letter-spacing: 0; }
 
 .tickers { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
 .tk { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;

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

@@ -253,28 +253,53 @@ async function renderBtr() {
   sec.hidden = false;
 
   // Playable tiles carry data-player (open in a modal); the rest link out.
-  const tile = (player, url, img, ph, label, sub) =>
-    `<a class="btr-item" ${player ? `href="#" data-player="${escAttr(player)}"` : `href="${escAttr(url)}" target="_blank"`}>` +
+  // data-label drives the live filter below. ✓ marks already-played items.
+  const tile = (player, url, img, ph, label, sub, played) =>
+    `<a class="btr-item" data-label="${escAttr(String(label || '').toLowerCase())}" ${player ? `href="#" data-player="${escAttr(player)}"` : `href="${escAttr(url)}" target="_blank"`}>` +
     (img ? `<img src="${escAttr(img)}" alt="" loading="lazy" referrerpolicy="no-referrer" />` : `<span class="btr-ph">${ph}</span>`) +
+    (played ? '<span class="btr-played" title="Played">✓</span>' : '') +
     `<span class="btr-label">${escapeHtml(label)}</span>` +
     (sub ? `<span class="btr-sub">${escapeHtml(sub)}</span>` : '') + `</a>`;
   const group = (title, items) => items.length
-    ? `<div class="btr-group"><h3>${title}</h3><div class="btr-items">${items.join('')}</div></div>` : '';
+    ? `<div class="btr-group" data-group><h3>${title} <span class="btr-count">${items.length}</span></h3><div class="btr-items">${items.join('')}</div></div>` : '';
 
   if (!tv.length && !radio.length && !pods.length && !movies.length) {
     el('btr').innerHTML = '<p class="muted">Connected — add Live TV, radio, podcast or movie favorites on bittorrented.com and they’ll show up here.</p>';
     return;
   }
+  const music = movies.filter((m) => m.contentType === 'music');
+  const books = movies.filter((m) => m.contentType === 'book');
+  const shows = movies.filter((m) => !['music', 'book'].includes(m.contentType));
+  // Full list (no caps) + a live client-side filter across every section.
   el('btr').innerHTML =
-    group('Live TV', tv.slice(0, 12).map((c) => tile(c.player, c.url, c.logo, '📺', c.name))) +
-    group('Podcasts', pods.slice(0, 12).map((p) => {
+    `<input id="btr-filter" class="btr-filter" type="search" placeholder="Filter favorites…" autocomplete="off" />` +
+    `<div id="btr-groups">` +
+    group('Live TV', tv.map((c) => tile(c.player, c.url, c.logo, '📺', c.name))) +
+    group('Podcasts', pods.map((p) => {
       const ep = (p.episodes || [])[0];
-      return tile(ep?.player, p.url, p.image, '🎙', p.title, ep ? `▶ ${ep.title}` : 'no recent episodes');
+      const played = !!(ep && ep.progress && ep.progress.completed);
+      const sub = ep ? (played ? `✓ ${ep.title}` : `▶ ${ep.title}`) : 'no recent episodes';
+      return tile(ep?.player, p.url, p.image, '🎙', p.title, sub, played);
     })) +
-    group('Radio', radio.slice(0, 12).map((s) => tile(s.player, s.url, s.logo, '📻', s.name))) +
-    group('Music', movies.filter((m) => m.contentType === 'music').slice(0, 12).map((m) => tile(m.player, m.url, m.poster, '🎵', m.title))) +
-    group('Books', movies.filter((m) => m.contentType === 'book').slice(0, 12).map((m) => tile(m.player, m.url, m.poster, '📖', m.title))) +
-    group('Movies & Shows', movies.filter((m) => !['music', 'book'].includes(m.contentType)).slice(0, 12).map((m) => tile(m.player, m.url, m.poster, '🎬', m.title)));
+    group('Radio', radio.map((s) => tile(s.player, s.url, s.logo, '📻', s.name))) +
+    group('Music', music.map((m) => tile(m.player, m.url, m.poster, '🎵', m.title))) +
+    group('Books', books.map((m) => tile(m.player, m.url, m.poster, '📖', m.title))) +
+    group('Movies & Shows', shows.map((m) => tile(m.player, m.url, m.poster, '🎬', m.title))) +
+    `</div>`;
+
+  const fi = el('btr-filter');
+  if (fi) fi.addEventListener('input', () => {
+    const q = fi.value.trim().toLowerCase();
+    document.querySelectorAll('#btr-groups [data-group]').forEach((g) => {
+      let any = false;
+      g.querySelectorAll('.btr-item').forEach((it) => {
+        const show = !q || (it.getAttribute('data-label') || '').includes(q);
+        it.style.display = show ? '' : 'none';
+        if (show) any = true;
+      });
+      g.style.display = any ? '' : 'none';
+    });
+  });
 }
 
 // Open a bittorrented /api/player URL in a themed modal iframe. Append the