Fix mobile sidebar reset after theme switch (#152)

packages/app/src/utils/sidebar-animation-state.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import {
+  getLeftSidebarAnimationTargets,
+  getRightSidebarAnimationTargets,
+  shouldSyncSidebarAnimation,
+} from "./sidebar-animation-state";
+
+describe("sidebar-animation-state", () => {
+  it("requests a sync when the open state changes", () => {
+    expect(
+      shouldSyncSidebarAnimation({
+        previousIsOpen: false,
+        nextIsOpen: true,
+        previousWindowWidth: 390,
+        nextWindowWidth: 390,
+      }),
+    ).toBe(true);
+  });
+
+  it("requests a sync when the viewport width changes", () => {
+    expect(
+      shouldSyncSidebarAnimation({
+        previousIsOpen: false,
+        nextIsOpen: false,
+        previousWindowWidth: 390,
+        nextWindowWidth: 430,
+      }),
+    ).toBe(true);
+  });
+
+  it("keeps the left sidebar fully off-screen when closed", () => {
+    expect(getLeftSidebarAnimationTargets({ isOpen: false, windowWidth: 430 })).toEqual({
+      translateX: -430,
+      backdropOpacity: 0,
+    });
+  });
+
+  it("keeps the right sidebar fully off-screen when closed", () => {
+    expect(getRightSidebarAnimationTargets({ isOpen: false, windowWidth: 430 })).toEqual({
+      translateX: 430,
+      backdropOpacity: 0,
+    });
+  });
+});

packages/app/src/utils/sidebar-animation-state.ts

@@ -0,0 +1,41 @@
+interface SidebarAnimationSyncInput {
+  previousIsOpen: boolean;
+  nextIsOpen: boolean;
+  previousWindowWidth: number;
+  nextWindowWidth: number;
+}
+
+interface SidebarAnimationTargetInput {
+  isOpen: boolean;
+  windowWidth: number;
+}
+
+interface SidebarAnimationTargets {
+  translateX: number;
+  backdropOpacity: number;
+}
+
+export function shouldSyncSidebarAnimation(input: SidebarAnimationSyncInput): boolean {
+  return (
+    input.previousIsOpen !== input.nextIsOpen ||
+    input.previousWindowWidth !== input.nextWindowWidth
+  );
+}
+
+export function getLeftSidebarAnimationTargets(
+  input: SidebarAnimationTargetInput,
+): SidebarAnimationTargets {
+  return {
+    translateX: input.isOpen ? 0 : -input.windowWidth,
+    backdropOpacity: input.isOpen ? 1 : 0,
+  };
+}
+
+export function getRightSidebarAnimationTargets(
+  input: SidebarAnimationTargetInput,
+): SidebarAnimationTargets {
+  return {
+    translateX: input.isOpen ? 0 : input.windowWidth,
+    backdropOpacity: input.isOpen ? 1 : 0,
+  };
+}