old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): drive mobile layouts from useIsMobile

Browse Source
This commit is contained in:
Dmytro Stanchiev
2026-04-21 22:46:07 -04:00
parent 16bbd9ab08
commit 7a917e5c22
16 changed files with 350 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
tests/ui-shell-contract.test.ts
View File

@@ -1,30 +1,39 @@
import { describe, expect, test } from "bun:test";
import {
APP_ACTION_BAR_CLASSES,
APP_HEADER_SURFACE_CLASSES,
APP_NAV_SURFACE_CLASSES,
APP_SECTION_SURFACE_CLASSES,
getAppHeaderSurfaceClasses,
getAppNavSurfaceClasses,
getAppSectionSurfaceClasses,
getConnectionBadgeClasses,
} from "@/lib/ui-shell-contract";
import { EVENT_CARD_SURFACE_CLASSES } from "@/components/event-card";
describe("app shell surfaces", () => {
test("header surface is a thin structural bar instead of a glass panel", () => {
expect(APP_HEADER_SURFACE_CLASSES).toContain("min-h-14");
expect(APP_HEADER_SURFACE_CLASSES).toContain("shadow-[inset_0_-1px_0_0_var(--color-border)]");
expect(APP_HEADER_SURFACE_CLASSES).not.toContain("glass-surface");
const mobileHeaderClasses = getAppHeaderSurfaceClasses(true);
expect(mobileHeaderClasses).toContain("min-h-14");
expect(mobileHeaderClasses).toContain("shadow-[inset_0_-1px_0_0_var(--color-border)]");
expect(mobileHeaderClasses).not.toContain("glass-surface");
});
test("section and action surfaces use tokenized shell classes instead of frozen light-mode shadows", () => {
expect(APP_SECTION_SURFACE_CLASSES).not.toContain("glass-panel");
const mobileSectionClasses = getAppSectionSurfaceClasses(true);
const mobileNavClasses = getAppNavSurfaceClasses(true);
expect(mobileSectionClasses).not.toContain("glass-panel");
expect(APP_ACTION_BAR_CLASSES).not.toContain("glass-subtle");
expect(APP_NAV_SURFACE_CLASSES).not.toContain("glass-surface");
expect(APP_SECTION_SURFACE_CLASSES).toContain("shadow");
expect(APP_SECTION_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)");
expect(mobileNavClasses).not.toContain("glass-surface");
expect(mobileSectionClasses).toContain("shadow");
expect(mobileSectionClasses).not.toContain("rgba(0,0,0,0.08)");
expect(APP_ACTION_BAR_CLASSES).toContain("shadow-sm");
expect(APP_ACTION_BAR_CLASSES).not.toContain("rgba(0,0,0,0.08)");
expect(APP_NAV_SURFACE_CLASSES).toContain("shadow-lg");
expect(APP_NAV_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)");
expect(mobileNavClasses).toContain("shadow-lg");
expect(mobileNavClasses).not.toContain("rgba(0,0,0,0.08)");
});
test("desktop nav surface is suppressed when useIsMobile resolves false", () => {
expect(getAppNavSurfaceClasses(false)).toContain("hidden");
});
});