refactor(code-review): simplify PR comment badges

Generated-By: PostHog Code
Task-Id: 2e4a7ce2-5055-4c59-99c9-6daed60688c4

Author: MattPua

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

@@ -3,7 +3,6 @@ import type { PrCommentThread } from "@posthog/core/code-review/types";
 import { isBinaryFile } from "@posthog/shared";
 import type { ChangedFile } from "@posthog/shared/domain-types";
 import { type ReactNode, useMemo } from "react";
-import { countPrCommentsForFile } from "../prCommentThreads";
 import { DeferredDiffPlaceholder, DiffFileHeader } from "../reviewShellParts";
 import type { DiffOptions } from "../types";
 import { InteractiveFileDiff } from "./InteractiveFileDiff";
@@ -106,3 +105,19 @@ export function PatchedFileDiff({
     />
   );
 }
+
+function countPrCommentsForFile(
+  threads: Map<number, PrCommentThread> | undefined,
+  file: Pick<ChangedFile, "path" | "originalPath">,
+): number {
+  let count = 0;
+  for (const thread of threads?.values() ?? []) {
+    if (
+      thread.filePath === file.path ||
+      (file.originalPath != null && thread.filePath === file.originalPath)
+    ) {
+      count += thread.comments.length;
+    }
+  }
+  return count;
+}

packages/ui/src/features/code-review/prCommentThreads.test.ts

@@ -14,6 +14,7 @@ import {
   splitFilePath,
   sumHunkStats,
 } from "@posthog/core/code-review/reviewShellGeometry";
+import { Badge } from "@posthog/quill";
 import type { ChangedFile, Task } from "@posthog/shared/domain-types";
 import { type ReactNode, useCallback, useMemo, useState } from "react";
 import { FileIcon } from "../../primitives/FileIcon";
@@ -385,13 +386,14 @@ export function DeferredDiffPlaceholder({
 function PrCommentCountBadge({ count }: { count: number }) {
   const label = `${count} comment${count === 1 ? "" : "s"}`;
   return (
-    <span
+    <Badge
+      variant="info"
       title={label}
-      className="inline-flex shrink-0 items-center gap-[3px] rounded-full bg-(--accent-3) px-[6px] py-[2px] text-(--accent-11) text-[11px] tabular-nums"
+      className="shrink-0 gap-[3px] text-[11px] tabular-nums"
     >
       <ChatCircle size={12} weight="fill" />
       {count}
       <span className="sr-only"> comment{count === 1 ? "" : "s"}</span>
-    </span>
+    </Badge>
   );
 }

packages/ui/src/features/code-review/prCommentThreads.ts

@@ -1,12 +1,19 @@
 import { useHostTRPC } from "@posthog/host-router/react";
+import type { PrReviewThread } from "@posthog/shared";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { mapPrCommentThreads } from "../code-review/prCommentThreads";
+import type { PrCommentThread } from "../code-review/prCommentAnnotations";
 
 interface UsePrDetailsOptions {
   includeComments?: boolean;
 }
 
+function mapPrCommentThreads(
+  threads: PrReviewThread[],
+): Map<number, PrCommentThread> {
+  return new Map(threads.map((thread) => [thread.rootId, thread]));
+}
+
 export interface PrStateDetails {
   state: string;
   merged: boolean;