Open review responsively based on window width

Generated-By: PostHog Code
Task-Id: 9673d413-a977-441f-8660-553684a946d1

Author: dmarticus

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import {
+  getDefaultReviewMode,
+  REVIEW_SPLIT_MIN_WINDOW_WIDTH,
+} from "./getDefaultReviewMode";
+
+describe("getDefaultReviewMode", () => {
+  it.each([
+    [REVIEW_SPLIT_MIN_WINDOW_WIDTH - 1, "expanded"],
+    [REVIEW_SPLIT_MIN_WINDOW_WIDTH, "split"],
+    [REVIEW_SPLIT_MIN_WINDOW_WIDTH + 1, "split"],
+  ] as const)("returns the review mode for a %ipx window", (width, mode) => {
+    expect(getDefaultReviewMode(width)).toBe(mode);
+  });
+});

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

@@ -0,0 +1,9 @@
+import type { ReviewMode } from "./reviewNavigationStore";
+
+export const REVIEW_SPLIT_MIN_WINDOW_WIDTH = 1280;
+
+export function getDefaultReviewMode(
+  windowWidth = window.innerWidth,
+): ReviewMode {
+  return windowWidth >= REVIEW_SPLIT_MIN_WINDOW_WIDTH ? "split" : "expanded";
+}

packages/ui/src/features/code-review/hooks/useDiffStatsToggle.ts

@@ -1,6 +1,6 @@
 import type { Task } from "@posthog/shared/domain-types";
 import { useCallback } from "react";
-import type { ReviewMode } from "../reviewNavigationStore";
+import { getDefaultReviewMode } from "../getDefaultReviewMode";
 import { useReviewNavigationStore } from "../reviewNavigationStore";
 import { useTaskDiffSummaryStats } from "./useTaskDiffSummaryStats";
 
@@ -13,10 +13,7 @@ interface DiffStatsToggleResult {
   toggle: () => void;
 }
 
-export function useDiffStatsToggle(
-  task: Task,
-  openMode: ReviewMode = "split",
-): DiffStatsToggleResult {
+export function useDiffStatsToggle(task: Task): DiffStatsToggleResult {
   const taskId = task.id;
   const { filesChanged, linesAdded, linesRemoved } =
     useTaskDiffSummaryStats(task);
@@ -28,8 +25,9 @@ export function useDiffStatsToggle(
 
   const isOpen = reviewMode !== "closed";
   const toggle = useCallback(
-    () => setReviewMode(taskId, isOpen ? "closed" : openMode),
-    [setReviewMode, taskId, isOpen, openMode],
+    () =>
+      setReviewMode(taskId, isOpen ? "closed" : getDefaultReviewMode()),
+    [setReviewMode, taskId, isOpen],
   );
 
   return {

packages/ui/src/features/command/CommandMenu.tsx

@@ -35,6 +35,7 @@ import { channelGlyph } from "@posthog/ui/features/canvas/components/channelGlyp
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
 import { useTaskChannelMap } from "@posthog/ui/features/canvas/hooks/useTaskChannelMap";
+import { getDefaultReviewMode } from "@posthog/ui/features/code-review/getDefaultReviewMode";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { CommandKeyHints } from "@posthog/ui/features/command/CommandKeyHints";
 import { useFileSearchStore } from "@posthog/ui/features/command/fileSearchStore";
@@ -191,7 +192,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
     if (!reviewTaskId) return;
     const mode = getReviewMode(reviewTaskId);
     if (mode === "closed") {
-      setReviewMode(reviewTaskId, "split");
+      setReviewMode(reviewTaskId, getDefaultReviewMode());
     }
   }, [reviewTaskId, getReviewMode, setReviewMode]);
 

packages/ui/src/features/sessions/components/DiffStatsChip.test.tsx

@@ -23,11 +23,11 @@ vi.mock("@posthog/ui/primitives/Tooltip", () => ({
 import { DiffStatsChip } from "./DiffStatsChip";
 
 describe("DiffStatsChip", () => {
-  it("opens the diff view in split mode", () => {
+  it("uses the shared responsive diff-view toggle", () => {
     const task = { id: "task-1" } as Task;
 
     render(<DiffStatsChip task={task} />);
 
-    expect(useDiffStatsToggle).toHaveBeenCalledWith(task, "split");
+    expect(useDiffStatsToggle).toHaveBeenCalledWith(task);
   });
 });

packages/ui/src/features/sessions/components/DiffStatsChip.tsx

@@ -14,7 +14,7 @@ interface DiffStatsChipProps {
 
 export function DiffStatsChip({ task }: DiffStatsChipProps) {
   const { filesChanged, linesAdded, linesRemoved, isOpen, toggle } =
-    useDiffStatsToggle(task, "split");
+    useDiffStatsToggle(task);
 
   if (filesChanged === 0) return null;
 

packages/ui/src/shell/GlobalEventHandlers.tsx

@@ -9,6 +9,7 @@ import { useHostTRPC } from "@posthog/host-router/react";
 import { PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
 import type { Task } from "@posthog/shared/domain-types";
 import { useChannelsLayout } from "@posthog/ui/features/canvas/hooks/useChannelsLayout";
+import { getDefaultReviewMode } from "@posthog/ui/features/code-review/getDefaultReviewMode";
 import { useReviewNavigationStore } from "@posthog/ui/features/code-review/reviewNavigationStore";
 import { SHORTCUTS } from "@posthog/ui/features/command/keyboard-shortcuts";
 import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag";
@@ -189,7 +190,10 @@ export function GlobalEventHandlers({
   const handleToggleReview = useCallback(() => {
     if (!currentTaskId) return;
     const mode = getReviewMode(currentTaskId);
-    setReviewMode(currentTaskId, mode === "closed" ? "split" : "closed");
+    setReviewMode(
+      currentTaskId,
+      mode === "closed" ? getDefaultReviewMode() : "closed",
+    );
   }, [currentTaskId, getReviewMode, setReviewMode]);
 
   useHotkeys(