From 157fa445c53ed40d0b75423810050ac6a7dd506c Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:03:27 +0100
Subject: [PATCH] fix: Show individual discussion threads in review sidebar
 with navigation

Discussions section was showing only aggregate counts (total/resolved/unresolved)
with no way to see or navigate to individual threads. Now lists each root comment
with file:line location, body preview, resolved status, and reply count. Clicking
a discussion scrolls to its file in the diff viewer.
---
 .../src/components/review/ReviewSidebar.tsx   | 77 ++++++++++++++-----
 1 file changed, 57 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/components/review/ReviewSidebar.tsx b/apps/web/src/components/review/ReviewSidebar.tsx
index fe8d383..cc7042e 100644
--- a/apps/web/src/components/review/ReviewSidebar.tsx
+++ b/apps/web/src/components/review/ReviewSidebar.tsx
@@ -213,29 +213,66 @@ function FilesView({
         </div>
       )}
 
-      {/* Comment summary */}
+      {/* Discussions — individual threads */}
       {comments.length > 0 && (
         <div className="space-y-1.5">
-          <h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-            Discussions
-          </h4>
-          <div className="flex items-center gap-3 text-xs">
-            <span className="flex items-center gap-1 text-muted-foreground">
-              <MessageSquare className="h-3 w-3" />
-              {comments.length}
+          <h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center justify-between">
+            <span>Discussions</span>
+            <span className="flex items-center gap-2 font-normal normal-case">
+              {unresolvedCount > 0 && (
+                <span className="flex items-center gap-0.5 text-status-warning-fg">
+                  <Circle className="h-2.5 w-2.5" />
+                  {unresolvedCount}
+                </span>
+              )}
+              {resolvedCount > 0 && (
+                <span className="flex items-center gap-0.5 text-status-success-fg">
+                  <CheckCircle2 className="h-2.5 w-2.5" />
+                  {resolvedCount}
+                </span>
+              )}
             </span>
-            {resolvedCount > 0 && (
-              <span className="flex items-center gap-1 text-status-success-fg">
-                <CheckCircle2 className="h-3 w-3" />
-                {resolvedCount}
-              </span>
-            )}
-            {unresolvedCount > 0 && (
-              <span className="flex items-center gap-1 text-status-warning-fg">
-                <Circle className="h-3 w-3" />
-                {unresolvedCount}
-              </span>
-            )}
+          </h4>
+          <div className="space-y-0.5">
+            {comments
+              .filter((c) => !c.parentCommentId)
+              .map((thread) => {
+                const replyCount = comments.filter(
+                  (c) => c.parentCommentId === thread.id,
+                ).length;
+                return (
+                  <button
+                    key={thread.id}
+                    className={`
+                      flex w-full flex-col gap-0.5 rounded px-2 py-1.5 text-left
+                      transition-colors hover:bg-accent/50
+                      ${thread.resolved ? "opacity-50" : ""}
+                    `}
+                    onClick={() => onFileClick(thread.filePath)}
+                  >
+                    <div className="flex items-center gap-1.5 w-full min-w-0">
+                      {thread.resolved ? (
+                        <CheckCircle2 className="h-3 w-3 text-status-success-fg shrink-0" />
+                      ) : (
+                        <MessageSquare className="h-3 w-3 text-status-warning-fg shrink-0" />
+                      )}
+                      <span className="text-[10px] font-mono text-muted-foreground truncate">
+                        {getFileName(thread.filePath)}:{thread.lineNumber}
+                      </span>
+                      {replyCount > 0 && (
+                        <span className="text-[9px] text-muted-foreground/70 shrink-0 ml-auto">
+                          {replyCount}
+                        </span>
+                      )}
+                    </div>
+                    <span className="text-[11px] text-foreground/80 truncate pl-[18px]">
+                      {thread.body.length > 60
+                        ? thread.body.slice(0, 57) + "..."
+                        : thread.body}
+                    </span>
+                  </button>
+                );
+              })}
           </div>
         </div>
       )}