Show Greatest inclusion reasons on catalog tiles

public/greatest.js

@@ -77,7 +77,9 @@
       item.library ? h('span', { class: 'greatest-owned', title: 'Already in your library' }, '📚 In library') : null,
       h('span', { class: 'greatest-name' }, item.title),
       h('span', { class: 'greatest-meta' }, `${item.year} · ${item.chapters == null ? 'Chapters unknown' : `${item.chapters} chapters`}`),
-      h('span', { class: 'greatest-meta' }, statusLabel(item.status)));
+      h('span', { class: 'greatest-meta' }, statusLabel(item.status)),
+      h('span', { class: 'greatest-reason-label' }, 'Why it matters'),
+      h('span', { class: 'greatest-reason' }, plainNote(item.note)));
     open.onclick = () => openDetails(item);
     return h('article', { class: 'greatest-tile' }, open, ratingButtons(item, true));
   }
@@ -85,6 +87,7 @@
   function statusLabel(status) {
     return status === 'ongoing' ? 'Ongoing' : status === 'completed' ? 'Completed' : 'Status unknown';
   }
+  function plainNote(note) { return String(note || '').replace(/\*/g, ''); }
 
   function openDetails(item) {
     dialog.textContent = '';
@@ -100,7 +103,8 @@
       h('div', { class: 'greatest-dialog-body' }, cover(item), h('div', {},
         h('h2', {}, item.title),
         h('p', { class: 'muted' }, `${item.year} · ${item.chapters == null ? 'Chapter count unknown' : `${item.chapters} chapters`} · ${statusLabel(item.status)}`),
-        h('p', {}, String(item.note || '').replace(/\*/g, '')),
+        h('h3', { class: 'greatest-reason-heading' }, 'Why it matters'),
+        h('p', {}, plainNote(item.note)),
         h('p', { class: 'muted small' }, `Community votes: 🔥 ${votes.flame || 0} · 👍 ${votes.good || 0} · ● ${votes.neutral || 0} · 💀 ${votes.skip || 0}`),
         ratingButtons(item), links,
         h('p', { class: 'muted small' }, 'Chapter counts and status come from public catalog metadata, or from your local library when present. Availability may vary by region.'))));