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

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:
2026-06-28 12:25:04 +02:00
parent 6734e9815e
commit f706726eeb
12 changed files with 203 additions and 12 deletions
+54
View File
@@ -128,3 +128,57 @@ describe("PUT /api/auth/password (self-service)", () => {
expect(res.statusCode).toBe(400);
});
});
describe("PUT /api/auth/font-scale (self-service)", () => {
it("persists a valid scale and returns it on the next session", async () => {
const { username, password } = await seedUser(db, { username: "f1", roleId: "viewer", permissions: [] });
const { cookie, csrf } = await login(app, username, password);
const res = await app.inject({
method: "PUT", url: "/api/auth/font-scale",
headers: { cookie, "x-csrf-token": csrf },
payload: { fontScale: 120 },
});
expect(res.statusCode).toBe(200);
expect(res.json().fontScale).toBe(120);
// Persisted to the caller's row…
expect(db.select().from(users).where(eq(users.username, "f1")).get()?.fontScale).toBe(120);
// …and surfaced on /me (the session bootstrap).
const me = await app.inject({ method: "GET", url: "/api/auth/me", headers: { cookie } });
expect(me.json().fontScale).toBe(120);
});
it("clamps + snaps out-of-band / off-step values", async () => {
const { username, password } = await seedUser(db, { username: "f2", roleId: "viewer", permissions: [] });
const { cookie, csrf } = await login(app, username, password);
const tooBig = await app.inject({
method: "PUT", url: "/api/auth/font-scale",
headers: { cookie, "x-csrf-token": csrf },
payload: { fontScale: 999 },
});
expect(tooBig.json().fontScale).toBe(160); // clamped to max
const offStep = await app.inject({
method: "PUT", url: "/api/auth/font-scale",
headers: { cookie, "x-csrf-token": csrf },
payload: { fontScale: 113 },
});
expect(offStep.json().fontScale).toBe(110); // snapped to the 10-step
});
it("rejects a non-numeric scale (400)", async () => {
const { username, password } = await seedUser(db, { username: "f3", roleId: "viewer", permissions: [] });
const { cookie, csrf } = await login(app, username, password);
const res = await app.inject({
method: "PUT", url: "/api/auth/font-scale",
headers: { cookie, "x-csrf-token": csrf },
payload: { fontScale: "big" },
});
expect(res.statusCode).toBe(400);
});
it("defaults to 100 for a fresh user", async () => {
const { username, password } = await seedUser(db, { username: "f4", roleId: "viewer", permissions: [] });
const { cookie } = await login(app, username, password);
const me = await app.inject({ method: "GET", url: "/api/auth/me", headers: { cookie } });
expect(me.json().fontScale).toBe(100);
});
});