feat(frontend): add resizable activity split

This commit is contained in:
User
2026-07-15 15:04:15 +02:00
parent 30e76a968d
commit d177e1c0af
5 changed files with 313 additions and 13 deletions
@@ -0,0 +1,44 @@
import { describe, expect, test } from "vitest";
import {
ACTIVITY_PANEL_DEFAULT_WIDTH,
ACTIVITY_PANEL_STORAGE_KEY,
clampActivityPanelWidth,
getActivityPanelBounds,
loadActivityPanelWidth,
resizeWidthFromKey,
saveActivityPanelWidth,
} from "./useActivityPanelResize";
describe("activity panel resize contract", () => {
test("computes desktop bounds while preserving 512px centrally", () => {
expect(getActivityPanelBounds(1200)).toEqual({ min: 288, max: 576 });
expect(getActivityPanelBounds(1024)).toEqual({ min: 288, max: 512 });
expect(getActivityPanelBounds(800)).toEqual({ min: 288, max: 288 });
});
test("clamps finite values and falls back for invalid values", () => {
const bounds = { min: 288, max: 576 };
expect(clampActivityPanelWidth(200, bounds)).toBe(288);
expect(clampActivityPanelWidth(420, bounds)).toBe(420);
expect(clampActivityPanelWidth(900, bounds)).toBe(576);
expect(clampActivityPanelWidth(Number.NaN, bounds)).toBe(ACTIVITY_PANEL_DEFAULT_WIDTH);
});
test("maps keyboard controls to exact clamped increments", () => {
const bounds = { min: 288, max: 576 };
expect(resizeWidthFromKey(384, "ArrowLeft", false, bounds)).toBe(368);
expect(resizeWidthFromKey(384, "ArrowRight", true, bounds)).toBe(432);
expect(resizeWidthFromKey(384, "Home", false, bounds)).toBe(288);
expect(resizeWidthFromKey(384, "End", false, bounds)).toBe(576);
expect(resizeWidthFromKey(384, "Enter", false, bounds)).toBeNull();
});
test("loads, persists, and rejects corrupt browser values", () => {
localStorage.clear();
expect(loadActivityPanelWidth(localStorage)).toBe(ACTIVITY_PANEL_DEFAULT_WIDTH);
localStorage.setItem(ACTIVITY_PANEL_STORAGE_KEY, "corrupt");
expect(loadActivityPanelWidth(localStorage)).toBe(ACTIVITY_PANEL_DEFAULT_WIDTH);
saveActivityPanelWidth(448, localStorage);
expect(loadActivityPanelWidth(localStorage)).toBe(448);
});
});