feat(code-review): filter files with comments

Generated-By: PostHog Code
Task-Id: 199c1147-fca6-415b-9ea1-00a45d9b7267

Author: MattPua

packages/ui/src/features/code-review/components/CloudReviewPage.tsx

@@ -11,6 +11,7 @@ import { useReviewNavigationStore } from "../reviewNavigationStore";
 import { PatchedFileDiff } from "./PatchedFileDiff";
 import {
   buildItemIndex,
+  getCommentedFilePaths,
   type ReviewListItem,
   ReviewShell,
   useReviewState,
@@ -37,8 +38,12 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
     isLoading,
   } = useCloudChangedFiles(taskId, task, isReviewOpen);
   const { commentThreads } = usePrDetails(prUrl, {
-    includeComments: isReviewOpen && showReviewComments,
+    includeComments: isReviewOpen,
   });
+  const commentedFilePaths = useMemo(
+    () => (prUrl ? getCommentedFilePaths(commentThreads) : undefined),
+    [commentThreads, prUrl],
+  );
 
   const allPaths = useMemo(() => reviewFiles.map((f) => f.path), [reviewFiles]);
 
@@ -83,6 +88,9 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
       return {
         key: file.path,
         scrollKey: file.path,
+        filePaths: [file.path, file.originalPath].filter(
+          (path): path is string => !!path,
+        ),
         node: (
           <PatchedFileDiff
             file={file}
@@ -147,6 +155,7 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) {
       onCollapseFiles={collapseFiles}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      commentedFilePaths={commentedFilePaths}
       currentSignatures={currentSignatures}
       viewedRecord={viewedRecord}
       onToggleViewed={toggleViewed}

packages/ui/src/features/code-review/components/ReviewPage.tsx

@@ -25,6 +25,7 @@ import { useReviewNavigationStore } from "../reviewNavigationStore";
 import type { DiffOptions } from "../types";
 import {
   buildItemIndex,
+  getCommentedFilePaths,
   type ReviewListItem,
   ReviewShell,
   useReviewState,
@@ -110,11 +111,15 @@ export function ReviewPage({ task }: ReviewPageProps) {
 
   const showReviewComments = useDiffViewerStore((s) => s.showReviewComments);
   const { commentThreads } = usePrDetails(prUrl, {
-    includeComments: isReviewOpen && showReviewComments,
+    includeComments: isReviewOpen,
   });
   const effectiveCommentThreads = showReviewComments
     ? commentThreads
     : undefined;
+  const commentedFilePaths = useMemo(
+    () => (prUrl ? getCommentedFilePaths(commentThreads) : undefined),
+    [commentThreads, prUrl],
+  );
 
   const isLocalActive = isReviewOpen && effectiveSource === "local";
 
@@ -173,6 +178,7 @@ export function ReviewPage({ task }: ReviewPageProps) {
         branchSourceAvailable={branchSourceAvailable}
         prSourceAvailable={prSourceAvailable}
         commentThreads={effectiveCommentThreads}
+        commentedFilePaths={commentedFilePaths}
       />
     );
   }
@@ -206,6 +212,7 @@ export function ReviewPage({ task }: ReviewPageProps) {
       untrackedFiles={untrackedFiles}
       stagedPathSet={stagedPathSet}
       commentThreads={effectiveCommentThreads}
+      commentedFilePaths={commentedFilePaths}
       effectiveSource={effectiveSource}
       branchSourceAvailable={branchSourceAvailable}
       prSourceAvailable={prSourceAvailable}
@@ -242,6 +249,7 @@ function LocalReviewContent({
   untrackedFiles,
   stagedPathSet,
   commentThreads,
+  commentedFilePaths,
   effectiveSource,
   branchSourceAvailable,
   prSourceAvailable,
@@ -274,6 +282,7 @@ function LocalReviewContent({
   untrackedFiles: ChangedFile[];
   stagedPathSet: Set<string>;
   commentThreads?: Map<number, PrCommentThread>;
+  commentedFilePaths?: ReadonlySet<string>;
   effectiveSource: ResolvedDiffSource;
   branchSourceAvailable: boolean;
   prSourceAvailable: boolean;
@@ -437,6 +446,7 @@ function LocalReviewContent({
       defaultBranch={defaultBranch}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      commentedFilePaths={commentedFilePaths}
       currentSignatures={currentSignatures}
       viewedRecord={viewedRecord}
       onToggleViewed={toggleViewed}
@@ -455,6 +465,7 @@ function RemoteReviewPage({
   branchSourceAvailable,
   prSourceAvailable,
   commentThreads,
+  commentedFilePaths,
 }: {
   task: Task;
   repoPath: string | null;
@@ -466,6 +477,7 @@ function RemoteReviewPage({
   branchSourceAvailable: boolean;
   prSourceAvailable: boolean;
   commentThreads?: Map<number, PrCommentThread>;
+  commentedFilePaths?: ReadonlySet<string>;
 }) {
   const taskId = task.id;
   const isBranch = effectiveSource === "branch";
@@ -548,6 +560,7 @@ function RemoteReviewPage({
       defaultBranch={defaultBranch}
       items={items}
       itemIndexByFilePath={itemIndexByFilePath}
+      commentedFilePaths={commentedFilePaths}
       currentSignatures={currentSignatures}
       viewedRecord={reviewState.viewedRecord}
       onToggleViewed={reviewState.toggleViewed}

packages/ui/src/features/code-review/components/ReviewShell.tsx

@@ -5,7 +5,14 @@ import { useArchivedTaskIds } from "@posthog/ui/features/archive/useArchivedTask
 import { useCloudPrUrl } from "@posthog/ui/features/git-interaction/useCloudPrUrl";
 import { useTaskPrStatus } from "@posthog/ui/features/sidebar/useTaskPrStatus";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { VList, type VListHandle } from "virtua";
 import {
   REVIEW_LIST_BUFFER_PX,
@@ -16,6 +23,8 @@ import { REVIEW_HOST, type ReviewHost } from "../reviewHost";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import type { ReviewListItem, ReviewShellProps } from "../reviewShellParts";
 import {
+  buildItemIndex,
+  filterReviewItemsByFilePaths,
   findActiveScrollKey,
   findRenderedScrollAnchor,
   isFileViewed,
@@ -113,6 +122,7 @@ export function ReviewShell({
   isEmpty,
   items,
   itemIndexByFilePath,
+  commentedFilePaths,
   currentSignatures,
   viewedRecord,
   onToggleViewed,
@@ -135,6 +145,26 @@ export function ReviewShell({
   const lastActiveRef = useRef<string | null>(null);
   const pendingNavigationRef = useRef<string | null>(null);
   const navigationFrameRef = useRef<number | null>(null);
+  const [showCommentedFilesOnly, setShowCommentedFilesOnly] = useState(false);
+  const isCommentFilterActive =
+    showCommentedFilesOnly && commentedFilePaths !== undefined;
+
+  const commentedItems = useMemo(
+    () =>
+      commentedFilePaths
+        ? filterReviewItemsByFilePaths(items, commentedFilePaths)
+        : [],
+    [commentedFilePaths, items],
+  );
+  const visibleItems = isCommentFilterActive ? commentedItems : items;
+  const visibleItemIndexByFilePath = useMemo(
+    () => buildItemIndex(visibleItems),
+    [visibleItems],
+  );
+  const commentedFileCount = useMemo(
+    () => commentedItems.filter((item) => item.filePaths).length,
+    [commentedItems],
+  );
 
   const workerFactory = useCallback(
     () => reviewHost.diffWorkerFactory(),
@@ -147,12 +177,20 @@ export function ReviewShell({
   const isExpanded = reviewMode === "expanded";
 
   const viewedCount = useMemo(() => {
+    const visibleKeys = isCommentFilterActive
+      ? new Set(
+          visibleItems.flatMap((item) =>
+            item.scrollKey ? [item.scrollKey] : [],
+          ),
+        )
+      : null;
     let count = 0;
     for (const [key, sig] of currentSignatures) {
+      if (visibleKeys && !visibleKeys.has(key)) continue;
       if (isFileViewed(viewedRecord[key], sig)) count++;
     }
     return count;
-  }, [currentSignatures, viewedRecord]);
+  }, [currentSignatures, isCommentFilterActive, viewedRecord, visibleItems]);
 
   // Collapse already-viewed files on first open per task (mirrors GitHub).
   // Skips on re-opens: seededTaskRef prevents re-collapsing files the user
@@ -219,8 +257,13 @@ export function ReviewShell({
 
   useEffect(() => {
     if (!scrollRequest) return;
-    const targetIndex = itemIndexByFilePath.get(scrollRequest);
-    if (targetIndex === undefined) return;
+    const targetIndex = visibleItemIndexByFilePath.get(scrollRequest);
+    if (targetIndex === undefined) {
+      if (isCommentFilterActive && itemIndexByFilePath.has(scrollRequest)) {
+        setShowCommentedFilesOnly(false);
+      }
+      return;
+    }
 
     const currentSignature = currentSignatures.get(scrollRequest);
     const viewed =
@@ -264,7 +307,9 @@ export function ReviewShell({
     onUncollapseFile,
     scrollRequest,
     setActiveFilePath,
+    isCommentFilterActive,
     taskId,
+    visibleItemIndexByFilePath,
     viewedRecord,
   ]);
 
@@ -293,6 +338,40 @@ export function ReviewShell({
     [],
   );
 
+  let reviewContent: ReactNode;
+  if (isLoading) {
+    reviewContent = (
+      <Flex align="center" justify="center" className="min-h-0 flex-1">
+        <Spinner size="2" />
+      </Flex>
+    );
+  } else if (isEmpty || visibleItems.length === 0) {
+    reviewContent = (
+      <Flex align="center" justify="center" className="min-h-0 flex-1">
+        <Text color="gray" className="text-sm">
+          {isCommentFilterActive
+            ? "No files with comments"
+            : "No file changes to review"}
+        </Text>
+      </Flex>
+    );
+  } else {
+    reviewContent = (
+      <VList
+        ref={listRef}
+        bufferSize={REVIEW_LIST_BUFFER_PX}
+        itemSize={REVIEW_LIST_ESTIMATED_ITEM_SIZE}
+        className="pierre-scroll-root scrollbar-overlay-y min-h-0 flex-1 overflow-auto bg-(--gray-2)"
+        shift={false}
+        style={{ scrollbarGutter: "stable" }}
+        onScroll={handleScroll}
+        data={visibleItems}
+      >
+        {renderItem}
+      </VList>
+    );
+  }
+
   return (
     <WorkerPoolContextProvider
       // poolSize: each highlighter worker is a full V8 isolate with shiki
@@ -325,6 +404,13 @@ export function ReviewShell({
             taskId={taskId}
             fileCount={fileCount}
             viewedCount={viewedCount}
+            commentedFileCount={commentedFileCount}
+            showCommentedFilesOnly={isCommentFilterActive}
+            onToggleCommentedFilesOnly={
+              commentedFilePaths
+                ? () => setShowCommentedFilesOnly((current) => !current)
+                : undefined
+            }
             linesAdded={linesAdded}
             linesRemoved={linesRemoved}
             allExpanded={allExpanded}
@@ -343,38 +429,7 @@ export function ReviewShell({
               direction="column"
               className="min-w-0 flex-1"
             >
-              {isLoading ? (
-                <Flex
-                  align="center"
-                  justify="center"
-                  className="min-h-0 flex-1"
-                >
-                  <Spinner size="2" />
-                </Flex>
-              ) : isEmpty ? (
-                <Flex
-                  align="center"
-                  justify="center"
-                  className="min-h-0 flex-1"
-                >
-                  <Text color="gray" className="text-sm">
-                    No file changes to review
-                  </Text>
-                </Flex>
-              ) : (
-                <VList
-                  ref={listRef}
-                  bufferSize={REVIEW_LIST_BUFFER_PX}
-                  itemSize={REVIEW_LIST_ESTIMATED_ITEM_SIZE}
-                  className="pierre-scroll-root scrollbar-overlay-y min-h-0 flex-1 overflow-auto bg-(--gray-2)"
-                  shift={false}
-                  style={{ scrollbarGutter: "stable" }}
-                  onScroll={handleScroll}
-                  data={items}
-                >
-                  {renderItem}
-                </VList>
-              )}
+              {reviewContent}
               <PendingReviewBar taskId={taskId} />
             </Flex>