Merge pull request #320 from raifdmueller/feat/feedback-comments

feat: show comments in modal and remove badge links

Author: rdmueller

scripts/fetch-discussion-votes.js

@@ -36,7 +36,14 @@ function fetchAllDiscussions() {
             body
             url
             upvoteCount
-            comments { totalCount }
+            comments(first: 10) {
+              totalCount
+              nodes {
+                author { login avatarUrl }
+                body
+                createdAt
+              }
+            }
           }
           pageInfo { hasNextPage endCursor }
         }
@@ -74,11 +81,22 @@ function main() {
       continue
     }
 
-    feedback[anchorId] = {
+    const entry = {
       upvotes: d.upvoteCount,
       comments: d.comments.totalCount,
       url: d.url,
     }
+
+    if (d.comments.nodes && d.comments.nodes.length > 0) {
+      entry.recentComments = d.comments.nodes.map((c) => ({
+        author: c.author ? c.author.login : 'ghost',
+        avatar: c.author ? c.author.avatarUrl : '',
+        body: c.body,
+        date: c.createdAt,
+      }))
+    }
+
+    feedback[anchorId] = entry
     mapped++
   }
 

website/public/data/feedback.json

@@ -2,7 +2,15 @@
   "socratic-method": {
     "upvotes": 2,
     "comments": 1,
-    "url": "https://github.com/LLM-Coding/Semantic-Anchors/discussions/291"
+    "url": "https://github.com/LLM-Coding/Semantic-Anchors/discussions/291",
+    "recentComments": [
+      {
+        "author": "rdmueller",
+        "avatar": "https://avatars.githubusercontent.com/u/1856308?u=2c7443f52b575e8b3aefbc3007aea8b3cccac00f&v=4",
+        "body": "works best for me to clarify requirements",
+        "date": "2026-03-18T12:25:31Z"
+      }
+    ]
   },
   "yagni": {
     "upvotes": 1,

website/src/components/anchor-modal.js

@@ -277,8 +277,30 @@ export async function loadAnchorContent(anchorId) {
         ? fb.url
         : null
     if (safeFeedbackUrl) {
+      const commentsHtml =
+        fb.recentComments && fb.recentComments.length > 0
+          ? `
+          <div class="feedback-comments">
+            ${fb.recentComments
+              .map(
+                (c) => `
+              <div class="feedback-comment">
+                <img src="${escapeHtml(c.avatar)}" alt="${escapeHtml(c.author)}" class="feedback-avatar" width="24" height="24" />
+                <div class="feedback-comment-body">
+                  <span class="feedback-author">${escapeHtml(c.author)}</span>
+                  <p class="feedback-text">${escapeHtml(c.body)}</p>
+                </div>
+              </div>
+            `
+              )
+              .join('')}
+          </div>
+        `
+          : ''
+
       const feedbackHtml = `
         <div class="feedback-section">
+          ${commentsHtml}
           <div class="feedback-actions">
             <a href="${escapeHtml(safeFeedbackUrl)}" target="_blank" rel="noopener noreferrer" class="feedback-btn feedback-btn-vote">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

website/src/components/card-grid.js

@@ -190,25 +190,25 @@ function renderAnchorCard(anchor, categoryColor) {
         ${
           fb && fb.upvotes > 1
             ? `
-          <a href="${escapeHtml(fb.url)}" target="_blank" rel="noopener noreferrer" class="meta-badge feedback-badge" title="Upvotes" onclick="event.stopPropagation()">
+          <span class="meta-badge">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
             </svg>
             <span>${fb.upvotes}</span>
-          </a>
+          </span>
         `
             : ''
         }
 
         ${
           fb && fb.comments > 0
             ? `
-          <a href="${escapeHtml(fb.url)}" target="_blank" rel="noopener noreferrer" class="meta-badge feedback-badge" title="Discussion" onclick="event.stopPropagation()">
+          <span class="meta-badge">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
             </svg>
             <span>${fb.comments}</span>
-          </a>
+          </span>
         `
             : ''
         }

website/src/styles/main.css

@@ -196,6 +196,30 @@ body {
   @apply dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700;
 }
 
+.feedback-comments {
+  @apply mb-4 space-y-3;
+}
+
+.feedback-comment {
+  @apply flex gap-3 items-start;
+}
+
+.feedback-avatar {
+  @apply rounded-full flex-shrink-0;
+}
+
+.feedback-comment-body {
+  @apply min-w-0;
+}
+
+.feedback-author {
+  @apply text-sm font-medium text-[var(--color-text)];
+}
+
+.feedback-text {
+  @apply text-sm text-[var(--color-text-secondary)] mt-0.5 mb-0;
+}
+
 .feedback-hint {
   @apply mt-2 text-xs text-gray-400 dark:text-gray-500;
 }