From 3fcfa619149786d4f9903ee5eb28cb43f60850ab Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Fri, 6 Mar 2026 11:09:07 +0100
Subject: [PATCH] fix: Scroll to exact comment location when clicking sidebar
 discussions

Adds data-comment-id attributes to comment thread rows so clicking a
discussion in the sidebar scrolls directly to the comment, not just the
file card. Includes a brief ring highlight on the target row.
---
 apps/web/src/components/review/LineWithComments.tsx |  2 +-
 apps/web/src/components/review/ReviewSidebar.tsx    |  7 ++++++-
 apps/web/src/components/review/ReviewTab.tsx        | 11 +++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/review/LineWithComments.tsx b/apps/web/src/components/review/LineWithComments.tsx
index 57d58cf..579db1b 100644
--- a/apps/web/src/components/review/LineWithComments.tsx
+++ b/apps/web/src/components/review/LineWithComments.tsx
@@ -134,7 +134,7 @@ export function LineWithComments({
 
       {/* Existing comments on this line */}
       {lineComments.length > 0 && (
-        <tr>
+        <tr data-comment-id={lineComments.find((c) => !c.parentCommentId)?.id}>
           <td
             colSpan={3}
             className="px-3 py-2 bg-muted/20 border-y border-border/50"
diff --git a/apps/web/src/components/review/ReviewSidebar.tsx b/apps/web/src/components/review/ReviewSidebar.tsx
index cc7042e..4e344d1 100644
--- a/apps/web/src/components/review/ReviewSidebar.tsx
+++ b/apps/web/src/components/review/ReviewSidebar.tsx
@@ -18,6 +18,7 @@ interface ReviewSidebarProps {
   files: FileDiff[];
   comments: ReviewComment[];
   onFileClick: (filePath: string) => void;
+  onCommentClick?: (commentId: string) => void;
   selectedCommit: string | null;
   activeFiles: FileDiff[];
   commits: CommitInfo[];
@@ -29,6 +30,7 @@ export function ReviewSidebar({
   files,
   comments,
   onFileClick,
+  onCommentClick,
   selectedCommit,
   activeFiles,
   commits,
@@ -63,6 +65,7 @@ export function ReviewSidebar({
             files={files}
             comments={comments}
             onFileClick={onFileClick}
+            onCommentClick={onCommentClick}
             selectedCommit={selectedCommit}
             activeFiles={activeFiles}
             viewedFiles={viewedFiles}
@@ -172,6 +175,7 @@ function FilesView({
   files,
   comments,
   onFileClick,
+  onCommentClick,
   selectedCommit,
   activeFiles,
   viewedFiles,
@@ -179,6 +183,7 @@ function FilesView({
   files: FileDiff[];
   comments: ReviewComment[];
   onFileClick: (filePath: string) => void;
+  onCommentClick?: (commentId: string) => void;
   selectedCommit: string | null;
   activeFiles: FileDiff[];
   viewedFiles: Set<string>;
@@ -248,7 +253,7 @@ function FilesView({
                       transition-colors hover:bg-accent/50
                       ${thread.resolved ? "opacity-50" : ""}
                     `}
-                    onClick={() => onFileClick(thread.filePath)}
+                    onClick={() => onCommentClick ? onCommentClick(thread.id) : onFileClick(thread.filePath)}
                   >
                     <div className="flex items-center gap-1.5 w-full min-w-0">
                       {thread.resolved ? (
diff --git a/apps/web/src/components/review/ReviewTab.tsx b/apps/web/src/components/review/ReviewTab.tsx
index fbeb072..164ec52 100644
--- a/apps/web/src/components/review/ReviewTab.tsx
+++ b/apps/web/src/components/review/ReviewTab.tsx
@@ -259,6 +259,16 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
     }
   }, []);
 
+  const handleCommentClick = useCallback((commentId: string) => {
+    const el = document.querySelector(`[data-comment-id="${commentId}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      // Brief highlight flash
+      el.classList.add("ring-2", "ring-primary/50");
+      setTimeout(() => el.classList.remove("ring-2", "ring-primary/50"), 1500);
+    }
+  }, []);
+
   const handlePhaseSelect = useCallback((id: string) => {
     setSelectedPhaseId(id);
     setSelectedCommit(null);
@@ -331,6 +341,7 @@ export function ReviewTab({ initiativeId }: ReviewTabProps) {
               files={allFiles}
               comments={comments}
               onFileClick={handleFileClick}
+              onCommentClick={handleCommentClick}
               selectedCommit={selectedCommit}
               activeFiles={files}
               commits={commits}