Merge pull request #16 from OpenKnots/okcode/diffs-panel-gap

Add mutually exclusive panel functionality

Author: BunsDev

apps/web/src/mutuallyExclusivePanels.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveExclusivePanelAction } from "./mutuallyExclusivePanels";
+
+describe("resolveExclusivePanelAction", () => {
+  // ─── Diff opens while code viewer is already open ──────────────────
+  it("returns 'close-code-viewer' when diff transitions open while code viewer is open", () => {
+    const result = resolveExclusivePanelAction(
+      /* prevDiffOpen */ false,
+      /* diffOpen */ true,
+      /* prevCodeViewerOpen */ true,
+      /* codeViewerOpen */ true,
+    );
+    expect(result).toBe("close-code-viewer");
+  });
+
+  // ─── Code viewer opens while diff is already open ──────────────────
+  it("returns 'close-diff' when code viewer transitions open while diff is open", () => {
+    const result = resolveExclusivePanelAction(
+      /* prevDiffOpen */ true,
+      /* diffOpen */ true,
+      /* prevCodeViewerOpen */ false,
+      /* codeViewerOpen */ true,
+    );
+    expect(result).toBe("close-diff");
+  });
+
+  // ─── No-op cases ──────────────────────────────────────────────────
+  it("returns null when neither panel is open", () => {
+    expect(resolveExclusivePanelAction(false, false, false, false)).toBeNull();
+  });
+
+  it("returns null when only diff is open (no transition)", () => {
+    expect(resolveExclusivePanelAction(true, true, false, false)).toBeNull();
+  });
+
+  it("returns null when only code viewer is open (no transition)", () => {
+    expect(resolveExclusivePanelAction(false, false, true, true)).toBeNull();
+  });
+
+  it("returns null when diff opens but code viewer is closed", () => {
+    expect(resolveExclusivePanelAction(false, true, false, false)).toBeNull();
+  });
+
+  it("returns null when code viewer opens but diff is closed", () => {
+    expect(resolveExclusivePanelAction(false, false, false, true)).toBeNull();
+  });
+
+  it("returns null when diff closes (code viewer still closed)", () => {
+    expect(resolveExclusivePanelAction(true, false, false, false)).toBeNull();
+  });
+
+  it("returns null when code viewer closes (diff still closed)", () => {
+    expect(resolveExclusivePanelAction(false, false, true, false)).toBeNull();
+  });
+
+  // ─── Edge: both were already open (no transition) ─────────────────
+  it("returns null when both were already open (no transition)", () => {
+    expect(resolveExclusivePanelAction(true, true, true, true)).toBeNull();
+  });
+
+  // ─── Edge: both transition open simultaneously ────────────────────
+  it("prefers closing code viewer when both open simultaneously (diff wins)", () => {
+    // Both transition false → true in the same tick. Diff check runs first,
+    // so code viewer gets closed.
+    const result = resolveExclusivePanelAction(false, true, false, true);
+    expect(result).toBe("close-code-viewer");
+  });
+});

apps/web/src/mutuallyExclusivePanels.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Given previous and current open states for the diff panel and code viewer,
+ * returns which panel should be closed to enforce mutual exclusivity, or `null`
+ * if no action is needed.
+ *
+ * The rule is: whichever panel just transitioned from closed → open wins; the
+ * other panel is closed.
+ */
+export function resolveExclusivePanelAction(
+  prevDiffOpen: boolean,
+  diffOpen: boolean,
+  prevCodeViewerOpen: boolean,
+  codeViewerOpen: boolean,
+): "close-code-viewer" | "close-diff" | null {
+  // Diff just opened while code viewer is already open → close code viewer
+  if (diffOpen && !prevDiffOpen && codeViewerOpen) {
+    return "close-code-viewer";
+  }
+
+  // Code viewer just opened while diff is already open → close diff
+  if (codeViewerOpen && !prevCodeViewerOpen && diffOpen) {
+    return "close-diff";
+  }
+
+  return null;
+}
+
+/**
+ * Ensures that the diff panel and code viewer are never open simultaneously.
+ * When one panel transitions from closed → open while the other is already open,
+ * the previously-open panel is closed. This prevents overlapping fixed-position
+ * sidebars and the phantom gap that results from two sidebar gap divs reserving
+ * layout space while the fixed containers stack at `right: 0`.
+ */
+export function useMutuallyExclusivePanels(
+  diffOpen: boolean,
+  codeViewerOpen: boolean,
+  closeDiff: () => void,
+  closeCodeViewer: () => void,
+) {
+  const prevDiffOpen = useRef(diffOpen);
+  const prevCodeViewerOpen = useRef(codeViewerOpen);
+
+  useEffect(() => {
+    const wasDiffOpen = prevDiffOpen.current;
+    const wasCodeViewerOpen = prevCodeViewerOpen.current;
+    prevDiffOpen.current = diffOpen;
+    prevCodeViewerOpen.current = codeViewerOpen;
+
+    const action = resolveExclusivePanelAction(wasDiffOpen, diffOpen, wasCodeViewerOpen, codeViewerOpen);
+    if (action === "close-code-viewer") {
+      closeCodeViewer();
+    } else if (action === "close-diff") {
+      closeDiff();
+    }
+  }, [diffOpen, codeViewerOpen, closeDiff, closeCodeViewer]);
+}

apps/web/src/routes/_chat.$threadId.tsx

@@ -25,6 +25,7 @@ import {
   stripDiffSearchParams,
 } from "../diffRouteSearch";
 import { useCodeViewerStore } from "../codeViewerStore";
+import { useMutuallyExclusivePanels } from "../mutuallyExclusivePanels";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { useStore } from "../store";
 import { Sheet, SheetPopup } from "../components/ui/sheet";
@@ -308,6 +309,9 @@ function ChatThreadRouteView() {
     // No-op — code viewer opens when files are added via the store
   }, []);
 
+  // Enforce mutual exclusivity: only one right-side panel open at a time.
+  useMutuallyExclusivePanels(diffOpen, codeViewerOpen, closeDiff, closeCodeViewer);
+
   useEffect(() => {
     if (diffOpen) {
       setHasOpenedDiff(true);