refactor(code-review): move comment filter to settings

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

Author: MattPua

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

@@ -4,12 +4,31 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@posthog/quill";
 import { useDiffViewerStore } from "@posthog/ui/features/code-editor/diffViewerStore";
 
-export function DiffSettingsMenu() {
+export type CommentFileFilter = "none" | "commented" | "unresolved";
+
+interface DiffSettingsMenuProps {
+  commentedFileCount: number;
+  unresolvedCommentedFileCount: number;
+  commentFilter: CommentFileFilter;
+  onCommentFilterChange?: (filter: CommentFileFilter) => void;
+}
+
+export function DiffSettingsMenu({
+  commentedFileCount,
+  unresolvedCommentedFileCount,
+  commentFilter,
+  onCommentFilterChange,
+}: DiffSettingsMenuProps) {
   const wordWrap = useDiffViewerStore((s) => s.wordWrap);
   const toggleWordWrap = useDiffViewerStore((s) => s.toggleWordWrap);
   const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
@@ -31,7 +50,12 @@ export function DiffSettingsMenu() {
         render={
           <Button
             size="icon-sm"
-            aria-label="Diff settings"
+            variant={commentFilter === "none" ? "default" : "primary"}
+            aria-label={
+              commentFilter === "none"
+                ? "Diff settings"
+                : `Diff settings, ${commentFilter} comment filter active`
+            }
             className="rounded-xs"
           >
             <DotsThree size={16} weight="bold" />
@@ -57,6 +81,43 @@ export function DiffSettingsMenu() {
         <DropdownMenuItem onClick={toggleShowReviewComments}>
           {showReviewComments ? "Hide review comments" : "Show review comments"}
         </DropdownMenuItem>
+        {onCommentFilterChange && (
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              Comment filter
+              {commentFilter === "commented"
+                ? " · All"
+                : commentFilter === "unresolved"
+                  ? " · Unresolved"
+                  : ""}
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent side="right" sideOffset={4}>
+              <DropdownMenuRadioGroup
+                value={commentFilter === "none" ? "" : commentFilter}
+                onValueChange={(value) =>
+                  onCommentFilterChange(value as CommentFileFilter)
+                }
+              >
+                <DropdownMenuRadioItem value="commented">
+                  All comments ({commentedFileCount})
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="unresolved">
+                  Unresolved comments ({unresolvedCommentedFileCount})
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+              {commentFilter !== "none" && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => onCommentFilterChange("none")}
+                  >
+                    Clear comment filter
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );

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

@@ -31,8 +31,9 @@ import {
 } from "../reviewShellParts";
 import { ReviewViewedContext } from "../reviewViewedContext";
 import { useReviewViewedStore } from "../reviewViewedStore";
+import type { CommentFileFilter } from "./DiffSettingsMenu";
 import { PendingReviewBar } from "./PendingReviewBar";
-import { type CommentFileFilter, ReviewToolbar } from "./ReviewToolbar";
+import { ReviewToolbar } from "./ReviewToolbar";
 
 // Pure helpers, hooks, types, and presentational sub-components live in
 // ../reviewShellParts. Re-exported here so consumers can import everything

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

@@ -1,24 +1,12 @@
 import {
   ArrowCounterClockwise,
   ArrowsClockwise,
-  CaretDown,
-  ChatCircle,
   Columns,
   Rows,
   X,
 } from "@phosphor-icons/react";
 import type { ResolvedDiffSource } from "@posthog/core/code-review/resolveDiffSource";
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  MenuLabel,
-} from "@posthog/quill";
+import { Button } from "@posthog/quill";
 import { useDiffViewerStore } from "@posthog/ui/features/code-editor/diffViewerStore";
 import {
   type ReviewMode,
@@ -28,7 +16,7 @@ import { Tooltip } from "@posthog/ui/primitives/Tooltip";
 import { Flex, Separator, Text } from "@radix-ui/themes";
 import { FoldVertical, Maximize, Minimize, UnfoldVertical } from "lucide-react";
 import { memo } from "react";
-import { DiffSettingsMenu } from "./DiffSettingsMenu";
+import { type CommentFileFilter, DiffSettingsMenu } from "./DiffSettingsMenu";
 import { DiffSourceSelector } from "./DiffSourceSelector";
 
 interface ReviewToolbarProps {
@@ -52,8 +40,6 @@ interface ReviewToolbarProps {
   defaultBranch?: string | null;
 }
 
-export type CommentFileFilter = "none" | "commented" | "unresolved";
-
 function formatFileCount(count: number, suffix: string): string {
   const noun = count === 1 ? "file" : "files";
   return `${count} ${noun} ${suffix}`;
@@ -139,58 +125,6 @@ export const ReviewToolbar = memo(function ReviewToolbar({
       </Flex>
 
       <Flex align="center" gap="1" ml="auto">
-        {onCommentFilterChange && (
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  size="sm"
-                  variant={commentFilter === "none" ? "default" : "primary"}
-                  aria-label="Filter files by review comments"
-                  className="rounded-xs"
-                >
-                  <ChatCircle
-                    size={14}
-                    weight={commentFilter === "none" ? "regular" : "fill"}
-                  />
-                  <CaretDown size={10} weight="bold" />
-                </Button>
-              }
-            />
-            <DropdownMenuContent
-              align="end"
-              side="bottom"
-              sideOffset={6}
-              className="min-w-[220px]"
-            >
-              <MenuLabel>Comment filter</MenuLabel>
-              <DropdownMenuRadioGroup
-                value={commentFilter === "none" ? "" : commentFilter}
-                onValueChange={(value) =>
-                  onCommentFilterChange(value as CommentFileFilter)
-                }
-              >
-                <DropdownMenuRadioItem value="commented">
-                  All comments ({commentedFileCount})
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="unresolved">
-                  Unresolved comments ({unresolvedCommentedFileCount})
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-              {commentFilter !== "none" && (
-                <>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={() => onCommentFilterChange("none")}
-                  >
-                    Clear comment filter
-                  </DropdownMenuItem>
-                </>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-
         {onRefresh && (
           <Tooltip content="Refresh diff">
             <Button size="icon-sm" onClick={onRefresh} className="rounded-xs">
@@ -256,7 +190,12 @@ export const ReviewToolbar = memo(function ReviewToolbar({
 
         <Separator orientation="vertical" size="1" />
 
-        <DiffSettingsMenu />
+        <DiffSettingsMenu
+          commentedFileCount={commentedFileCount}
+          unresolvedCommentedFileCount={unresolvedCommentedFileCount}
+          commentFilter={commentFilter}
+          onCommentFilterChange={onCommentFilterChange}
+        />
 
         <Tooltip content="Close review">
           <Button size="icon-sm" onClick={handleClose} className="rounded-xs">