feat(ui): animate docked pane transitions

.changeset/sliding-panes.md

@@ -0,0 +1,5 @@
+---
+"hunkdiff": minor
+---
+
+Animate docked panes as they open and close, moving the review pane alongside them.

src/ui/App.tsx

@@ -70,6 +70,7 @@ import {
 } from "./hooks/useExtensionWorkspaceControls";
 import { useHunkSessionBridge } from "./hooks/useHunkSessionBridge";
 import { useMenuController } from "./hooks/useMenuController";
+import { usePaneSlideAnimation } from "./hooks/usePaneSlideAnimation";
 import { useThemeSelectorController } from "./hooks/useThemeSelectorController";
 import { useTimedNotice } from "./hooks/useTimedNotice";
 import { useUserNoteComposer } from "./hooks/useUserNoteComposer";
@@ -472,6 +473,13 @@ export function App({
     responsiveShowsSidebar: responsiveLayout.showSidebar,
   });
 
+  const { animating: paneLayoutAnimating, layout: presentedPaneLayout } = usePaneSlideAnimation({
+    bodyHeight,
+    bodyWidth,
+    paneLayout,
+    resizing: resizingPaneKey !== null,
+  });
+
   useEffect(() => {
     if (resizingPaneKey === null) {
       setMouseCapture(renderer, undefined);
@@ -634,8 +642,8 @@ export function App({
       selectedHunkIndex,
       themeId,
     });
-  const diffPaneWidth = paneLayout.reviewBounds.width;
-  const diffPaneHeight = paneLayout.reviewBounds.height;
+  const diffPaneWidth = presentedPaneLayout.reviewBounds.width;
+  const diffPaneHeight = presentedPaneLayout.reviewBounds.height;
   const diffContentWidth = Math.max(0, diffPaneWidth - 2);
   // Publish the live note geometry for daemon-driven markup validation; the
   // note markup width mirrors what AgentInlineNote lays STML out at.
@@ -1166,7 +1174,7 @@ export function App({
   const diffHeaderStatsWidth = maxFileHeaderStatsWidth(filteredFiles);
   const diffHeaderLabelWidth = Math.max(0, diffContentWidth - diffHeaderStatsWidth - 1);
   const diffSeparatorWidth = Math.max(0, diffContentWidth - 2);
-  const diffPaneScreenTop = (showMenuBar ? 1 : 0) + paneLayout.reviewBounds.y;
+  const diffPaneScreenTop = (showMenuBar ? 1 : 0) + presentedPaneLayout.reviewBounds.y;
 
   /** Render one pane from the exact accepted host rectangle. */
   const renderPane = (planned: PlannedPane) => {
@@ -1228,7 +1236,7 @@ export function App({
   };
 
   const renderDivider = (planned: PlannedPane) =>
-    planned.divider ? (
+    planned.divider && !paneLayoutAnimating ? (
       <box
         key={`${planned.pane.key}:divider`}
         style={{
@@ -1299,13 +1307,13 @@ export function App({
           cancelCopySelectionRef.current?.();
         }}
       >
-        {paneLayout.panes.map(renderPane)}
-        {paneLayout.panes.map(renderDivider)}
+        {presentedPaneLayout.panes.map(renderPane)}
+        {presentedPaneLayout.panes.map(renderDivider)}
         <box
           style={{
             position: "absolute",
-            left: bodyPadding / 2 + paneLayout.reviewBounds.x,
-            top: paneLayout.reviewBounds.y,
+            left: bodyPadding / 2 + presentedPaneLayout.reviewBounds.x,
+            top: presentedPaneLayout.reviewBounds.y,
             width: diffPaneWidth,
             height: diffPaneHeight,
           }}

src/ui/hooks/usePaneSlideAnimation.ts

@@ -0,0 +1,130 @@
+/**
+ * Animates one pane visibility change while semantic pane planning remains immediate.
+ *
+ * The hook retains an exiting pane only in its presentation projection and moves the other panes
+ * and review geometry in the same timeline. Terminal resize, pane resize, broader registration
+ * changes, and the first mounted layout snap directly to the semantic plan.
+ */
+
+import { useTimeline } from "@opentui/react";
+import { useLayoutEffect, useRef, useState } from "react";
+import type { ExtensionPaneLayoutPlan } from "../lib/extensionPanes";
+import {
+  interpolatePaneLayout,
+  paneLayoutGeometryEqual,
+  paneSlideAnimationDuration,
+  paneVisibilityTransitionKey,
+} from "../lib/paneSlide";
+
+interface PaneSlideAnimationOptions {
+  bodyHeight: number;
+  bodyWidth: number;
+  paneLayout: ExtensionPaneLayoutPlan;
+  resizing: boolean;
+}
+
+interface LayoutSnapshot {
+  bodyHeight: number;
+  bodyWidth: number;
+  paneLayout: ExtensionPaneLayoutPlan;
+}
+
+interface ActiveTransition {
+  from: ExtensionPaneLayoutPlan;
+  to: ExtensionPaneLayoutPlan;
+  paneKey: string;
+}
+
+interface PaneSlidePresentation {
+  animating: boolean;
+  layout: ExtensionPaneLayoutPlan;
+}
+
+/** Return the presentation pane plan and whether its geometry is still moving. */
+export function usePaneSlideAnimation({
+  bodyHeight,
+  bodyWidth,
+  paneLayout,
+  resizing,
+}: PaneSlideAnimationOptions): PaneSlidePresentation {
+  const duration = paneSlideAnimationDuration();
+  const timeline = useTimeline({
+    autoplay: false,
+    duration: Math.max(1, duration),
+  });
+  const [presentedLayout, setPresentedLayout] = useState(paneLayout);
+  const presentedLayoutRef = useRef(paneLayout);
+  const semanticSnapshotRef = useRef<LayoutSnapshot | null>(null);
+  const activeTransitionRef = useRef<ActiveTransition | null>(null);
+  const timelineConfiguredRef = useRef(false);
+
+  useLayoutEffect(() => {
+    if (timelineConfiguredRef.current) return;
+    timelineConfiguredRef.current = true;
+    timeline.add(
+      { progress: 0 },
+      {
+        progress: 1,
+        duration,
+        ease: "outQuad",
+        onUpdate: (animation) => {
+          const transition = activeTransitionRef.current;
+          if (!transition) return;
+          const nextLayout = interpolatePaneLayout(
+            transition.from,
+            transition.to,
+            transition.paneKey,
+            animation.progress,
+          );
+          if (paneLayoutGeometryEqual(presentedLayoutRef.current, nextLayout)) return;
+          presentedLayoutRef.current = nextLayout;
+          setPresentedLayout(nextLayout);
+        },
+        onComplete: () => {
+          const transition = activeTransitionRef.current;
+          if (!transition) return;
+          activeTransitionRef.current = null;
+          presentedLayoutRef.current = transition.to;
+          setPresentedLayout(transition.to);
+        },
+      },
+    );
+  }, [duration, timeline]);
+
+  useLayoutEffect(() => {
+    const previous = semanticSnapshotRef.current;
+    semanticSnapshotRef.current = { bodyHeight, bodyWidth, paneLayout };
+    const transitionKey = previous
+      ? paneVisibilityTransitionKey(previous.paneLayout, paneLayout)
+      : null;
+    const interruptedByAnotherPane =
+      activeTransitionRef.current !== null && activeTransitionRef.current.paneKey !== transitionKey;
+    const canAnimate =
+      previous !== null &&
+      transitionKey !== null &&
+      !interruptedByAnotherPane &&
+      !resizing &&
+      previous.bodyHeight === bodyHeight &&
+      previous.bodyWidth === bodyWidth;
+
+    if (!canAnimate) {
+      activeTransitionRef.current = null;
+      timeline.pause();
+      presentedLayoutRef.current = paneLayout;
+      setPresentedLayout(paneLayout);
+      return;
+    }
+
+    activeTransitionRef.current = {
+      from: presentedLayoutRef.current,
+      to: paneLayout,
+      paneKey: transitionKey,
+    };
+    timeline.restart();
+  }, [bodyHeight, bodyWidth, paneLayout, resizing, timeline]);
+
+  return {
+    animating: activeTransitionRef.current !== null,
+    layout: presentedLayout,
+  };
+}

src/ui/lib/paneSlide.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, test } from "bun:test";
+import type { ExtensionPane } from "../../extension-api/types";
+import { HUNK_FILES_PANE_KEY } from "../../extensions/extensionIds";
+import {
+  buildSessionPanes,
+  planExtensionPanes,
+  type ExtensionPaneLayoutPlan,
+  type SessionPane,
+} from "./extensionPanes";
+import {
+  interpolatePaneLayout,
+  paneLayoutGeometryEqual,
+  paneVisibilityTransitionKey,
+} from "./paneSlide";
+
+/** Build one test pane from the bundled pane's valid registration shell. */
+function createTestPane(
+  placement: SessionPane["placement"],
+  suffix: string = placement,
+): SessionPane {
+  const bundled = buildSessionPanes(undefined)[0]!;
+  const paneKey =
+    placement === "left" && suffix === placement ? HUNK_FILES_PANE_KEY : `test:${suffix}`;
+  return {
+    ...bundled,
+    key: paneKey,
+    placement,
+    registered: {
+      ...bundled.registered,
+      pane: { ...bundled.registered.pane, id: suffix, placement } as ExtensionPane,
+    },
+  };
+}
+
+/** Build matching open and closed layouts for a pane at one edge. */
+function createPaneLayouts(placement: SessionPane["placement"]): {
+  closed: ExtensionPaneLayoutPlan;
+  open: ExtensionPaneLayoutPlan;
+  paneKey: string;
+} {
+  const pane = createTestPane(placement);
+  const paneKey = pane.key;
+  const plan = (openKeys: readonly string[]) =>
+    planExtensionPanes({
+      panes: [pane],
+      openKeys,
+      sizes: { [paneKey]: placement === "left" || placement === "right" ? 30 : 8 },
+      bodyWidth: 100,
+      bodyHeight: 30,
+      minReviewWidth: 20,
+      minReviewHeight: 5,
+    });
+  return {
+    closed: plan([]),
+    open: plan([paneKey]),
+    paneKey,
+  };
+}
+
+describe("pane slide presentation", () => {
+  test("recognizes any sole pane visibility change", () => {
+    for (const placement of ["left", "right", "top", "bottom"] as const) {
+      const { closed, open, paneKey } = createPaneLayouts(placement);
+      expect(paneVisibilityTransitionKey(closed, open)).toBe(paneKey);
+      expect(paneVisibilityTransitionKey(open, closed)).toBe(paneKey);
+      expect(paneVisibilityTransitionKey(open, open)).toBeNull();
+    }
+  });
+
+  test("slides horizontal panes and review geometry together", () => {
+    for (const placement of ["left", "right"] as const) {
+      const { closed, open, paneKey } = createPaneLayouts(placement);
+      const start = interpolatePaneLayout(closed, open, paneKey, 0);
+      const middle = interpolatePaneLayout(closed, open, paneKey, 0.5);
+      const openPane = open.panes.find(({ pane }) => pane.key === paneKey)!;
+      const middlePane = middle.panes.find(({ pane }) => pane.key === paneKey)!;
+
+      const startPane = start.panes.find(({ pane }) => pane.key === paneKey)!;
+      expect(start.reviewBounds).toEqual(closed.reviewBounds);
+      expect(startPane.bounds.width).toBe(openPane.bounds.width);
+      expect(startPane.bounds.x).not.toBe(openPane.bounds.x);
+      expect(middlePane.bounds.width).toBe(openPane.bounds.width);
+      expect(middlePane.bounds.x).not.toBe(openPane.bounds.x);
+      expect(middle.reviewBounds.width).toBeGreaterThan(open.reviewBounds.width);
+      expect(middle.reviewBounds.width).toBeLessThan(closed.reviewBounds.width);
+    }
+  });
+
+  test("slides vertical panes and review geometry together", () => {
+    for (const placement of ["top", "bottom"] as const) {
+      const { closed, open, paneKey } = createPaneLayouts(placement);
+      const start = interpolatePaneLayout(closed, open, paneKey, 0);
+      const middle = interpolatePaneLayout(closed, open, paneKey, 0.5);
+      const openPane = open.panes.find(({ pane }) => pane.key === paneKey)!;
+      const middlePane = middle.panes.find(({ pane }) => pane.key === paneKey)!;
+
+      const startPane = start.panes.find(({ pane }) => pane.key === paneKey)!;
+      expect(start.reviewBounds).toEqual(closed.reviewBounds);
+      expect(startPane.bounds.height).toBe(openPane.bounds.height);
+      expect(startPane.bounds.y).not.toBe(openPane.bounds.y);
+      expect(middlePane.bounds.height).toBe(openPane.bounds.height);
+      expect(middlePane.bounds.y).not.toBe(openPane.bounds.y);
+      expect(middle.reviewBounds.height).toBeGreaterThan(open.reviewBounds.height);
+      expect(middle.reviewBounds.height).toBeLessThan(closed.reviewBounds.height);
+    }
+  });
+
+  test("starts an additional same-edge pane beyond the occupied outer edge", () => {
+    const first = createTestPane("left", "first");
+    const second = createTestPane("left", "second");
+    const plan = (openKeys: readonly string[]) =>
+      planExtensionPanes({
+        panes: [first, second],
+        openKeys,
+        sizes: { [first.key]: 20, [second.key]: 20 },
+        bodyWidth: 100,
+        bodyHeight: 30,
+        minReviewWidth: 20,
+        minReviewHeight: 5,
+      });
+    const before = plan([first.key]);
+    const after = plan([first.key, second.key]);
+    const start = interpolatePaneLayout(before, after, second.key, 0);
+    const firstBounds = start.panes.find(({ pane }) => pane.key === first.key)!.bounds;
+    const secondBounds = start.panes.find(({ pane }) => pane.key === second.key)!.bounds;
+
+    expect(secondBounds.x + secondBounds.width).toBeLessThanOrEqual(firstBounds.x);
+  });
+
+  test("keeps interpolated review edges inside the body", () => {
+    const { closed, open, paneKey } = createPaneLayouts("left");
+    for (const progress of [0.1, 0.25, 0.5, 0.75, 0.9]) {
+      const { reviewBounds } = interpolatePaneLayout(closed, open, paneKey, progress);
+      expect(reviewBounds.x + reviewBounds.width).toBe(100);
+    }
+  });
+
+  test("deduplicates timeline updates that round to the same terminal cells", () => {
+    const { closed, open, paneKey } = createPaneLayouts("top");
+    const first = interpolatePaneLayout(closed, open, paneKey, 0.1);
+    const sameCells = interpolatePaneLayout(closed, open, paneKey, 0.101);
+    const later = interpolatePaneLayout(closed, open, paneKey, 0.5);
+
+    expect(paneLayoutGeometryEqual(first, sameCells)).toBe(true);
+    expect(paneLayoutGeometryEqual(first, later)).toBe(false);
+  });
+
+  test("retains an exiting pane until the closing frame completes", () => {
+    const { closed, open, paneKey } = createPaneLayouts("bottom");
+    const middle = interpolatePaneLayout(open, closed, paneKey, 0.5);
+    const end = interpolatePaneLayout(open, closed, paneKey, 1);
+
+    expect(middle.panes.some(({ pane }) => pane.key === paneKey)).toBe(true);
+    expect(end.panes.some(({ pane }) => pane.key === paneKey)).toBe(true);
+    const openPane = open.panes.find(({ pane }) => pane.key === paneKey)!;
+    const endPane = end.panes.find(({ pane }) => pane.key === paneKey)!;
+    expect(endPane.bounds.height).toBe(openPane.bounds.height);
+    expect(endPane.bounds.y).toBeGreaterThan(openPane.bounds.y);
+    expect(end.reviewBounds).toEqual(closed.reviewBounds);
+  });
+});