mca/parking_solution
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(prefs): per-user UI font scale (A−/A+), saved to the profile

Browse Source 
A header A−/value/A+ control scales the whole UI, persisted per user and
restored on login from any booth — cloning the theme-pref pattern end to end.

- DB: users.font_scale (migration 0014; percent, 100 = base, NOT NULL default).
- Server: PUT /api/auth/font-scale (auth-guarded; clamps to 80–160, snaps to a
  10-step); fontScale flows through sessionView → login + /me.
- Client: setFontScalePref + applyFontScale; applied in App alongside theme;
  FontScaleToggle in the header; i18n sq+en.

Scaling uses CSS `zoom` on the root, NOT root font-size: the app's type is pinned
in px (text-[12px] etc., ~230 spots), which a font-size change would not scale —
so the dense Active-sessions / Live-feed logs stayed tiny. `zoom` scales
everything uniformly (text, spacing, icons) like the browser's Ctrl+/−, which is
the readability win for operators who need larger text.

Tests: 4 font-scale auth-route cases (persist + /me, clamp/snap, 400, default-100).
Full workspace build/lint/test green.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
This commit is contained in:
Julian Çuni
2026-06-28 12:25:04 +02:00
parent 6734e9815e
commit f706726eeb
12 changed files with 203 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/lib/theme.ts
+17 -6
View File
@@ -1,14 +1,25 @@
import type { Theme } from "../api.js";
import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../api.js";
// Theme application. The whole UI reads colour through the --color-term-* tokens;
// the light palette lives in index.css under `html.theme-light`. Applying a theme is
// just toggling that class on <html>. The active theme is the LOGGED-IN USER's stored
// preference (users.theme), applied via applyTheme() after auth resolves — mirroring
// how language works. Dark is the default before auth resolves. Printed tickets are
// unaffected (always Albanian, dark-agnostic).
// Theme + font-scale application. The whole UI reads colour through the --color-term-*
// tokens; the light palette lives in index.css under `html.theme-light`. Applying a theme
// is just toggling that class on <html>. Both are the LOGGED-IN USER's stored preferences
// (users.theme / users.font_scale), applied after auth resolves — mirroring how language
// works. Defaults (dark, 100%) apply before auth resolves. Printed tickets are unaffected.
/** Apply a theme by toggling `theme-light` on <html>. Dark is the absence of the
* class (the base tokens). No-op-safe to call repeatedly. */
export function applyTheme(theme: Theme): void {
document.documentElement.classList.toggle("theme-light", theme === "light");
}
/** Apply a font scale as a whole-UI ZOOM (`pct`% on the root). The app's type is pinned in
* px (`text-[12px]` etc.), which a root font-size would NOT scale — `zoom` scales everything
* uniformly (text, spacing, icons), exactly like the browser's Ctrl+/−, so the feed/session
* logs grow too. Clamped to the allowed band; no-op-safe to call repeatedly. */
export function applyFontScale(pct: number): void {
const clamped = Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, Math.round(pct)));
// `zoom` is supported in all the booth's target browsers (Chromium/WebKit/modern FF).
// 1 = 100%. Reset to "" at base so we don't leave an inline override lying around.
document.documentElement.style.zoom = clamped === 100 ? "" : String(clamped / 100);
}