julian
f706726eeb
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
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { RouterProvider } from "@tanstack/react-router";
|
|
import { fetchMe, type SessionUser } from "./api.js";
|
|
import { Login } from "./Login.js";
|
|
import { queryClient } from "./lib/query.js";
|
|
import { setLanguage } from "./lib/i18n/index.js";
|
|
import { applyTheme, applyFontScale } from "./lib/theme.js";
|
|
import { router } from "./router.js";
|
|
|
|
// App root: bootstraps the session (cookie-based, from /api/auth/me), then hands
|
|
// off to TanStack Router inside the QueryClient provider. The router renders the
|
|
// terminal chrome + screens; auth gating stays here (Login until signed in), and
|
|
// the signed-in user flows into the router context for role-based route guards.
|
|
// See wiki/entities/react-vite-spa.md and local-jwt-auth.md.
|
|
|
|
export function App() {
|
|
const [user, setUser] = useState<SessionUser | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchMe()
|
|
.then(setUser)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
// Apply the signed-in user's preferred language + theme + font scale whenever they
|
|
// resolve/change (login, bootstrap, or a toggle). Albanian + dark + 100% are the defaults
|
|
// before auth resolves; on logout, fall back so the Login screen is consistent.
|
|
useEffect(() => {
|
|
if (user) {
|
|
setLanguage(user.language);
|
|
applyTheme(user.theme);
|
|
applyFontScale(user.fontScale);
|
|
} else {
|
|
applyTheme("dark");
|
|
applyFontScale(100);
|
|
}
|
|
}, [user]);
|
|
|
|
if (loading) {
|
|
return <div className="flex h-screen items-center justify-center text-term-muted">loading…</div>;
|
|
}
|
|
if (!user) {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<Login onLoggedIn={setUser} />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} context={{ user, setUser }} />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|