refactor(code-review): extract comment filter submenu

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

Author: MattPua

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

@@ -0,0 +1,66 @@
+import {
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@posthog/quill";
+import type { CommentFileFilter } from "../commentFileFilter";
+
+interface CommentFilterSubmenuProps {
+  commentedFileCount: number;
+  unresolvedCommentedFileCount: number;
+  commentFilter: CommentFileFilter;
+  onCommentFilterChange: (filter: CommentFileFilter) => void;
+}
+
+function getCommentFilterSuffix(commentFilter: CommentFileFilter): string {
+  switch (commentFilter) {
+    case "commented":
+      return " · All";
+    case "unresolved":
+      return " · Unresolved";
+    case "none":
+      return "";
+  }
+}
+
+export function CommentFilterSubmenu({
+  commentedFileCount,
+  unresolvedCommentedFileCount,
+  commentFilter,
+  onCommentFilterChange,
+}: CommentFilterSubmenuProps) {
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        Comment filter{getCommentFilterSuffix(commentFilter)}
+      </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>
+  );
+}

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

@@ -4,16 +4,12 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@posthog/quill";
 import { useDiffViewerStore } from "@posthog/ui/features/code-editor/diffViewerStore";
 import type { CommentFileFilter } from "../commentFileFilter";
+import { CommentFilterSubmenu } from "./CommentFilterSubmenu";
 
 interface DiffSettingsMenuProps {
   commentedFileCount: number;
@@ -87,41 +83,12 @@ export function DiffSettingsMenu({
           {showReviewComments ? "Hide review comments" : "Show review comments"}
         </DropdownMenuItem>
         {showReviewComments && 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>
+          <CommentFilterSubmenu
+            commentedFileCount={commentedFileCount}
+            unresolvedCommentedFileCount={unresolvedCommentedFileCount}
+            commentFilter={commentFilter}
+            onCommentFilterChange={onCommentFilterChange}
+          />
         )}
       </DropdownMenuContent>
     </DropdownMenu>