feat(web): group top nav, add mobile drawer and app-wide text size control

The appbar had grown to 11 flat links with no responsive behaviour, and overflowed below ~1100px. Nav is now 7 top-level entries: Inicio, Clientes, Pólizas, Propiedades, Reportes stay one click away, while the movement screens (Captura, Estado de cuenta, Chequera) and the admin screens (Catálogos, Usuarios, Operaciones) collapse into "Cobranza" and "Admin" dropdowns. Groups are ability-filtered and disappear entirely when the user can see none of their items, so VIEWER never renders an empty Admin menu. activeHref now scans the flattened link list, and a group trigger highlights while one of its children is current. Below 980px the nav collapses to a burger drawer that lists every group expanded, closing on navigation and on Escape. Text size is user-adjustable app-wide. Every font-size in globals.css is converted from px to rem (mechanically, 133 declarations) and the root size becomes calc(100% * var(--ui-scale)), so one variable on <html> rescales the whole UI. The preference persists in localStorage and is applied by a pre-hydration script in layout.tsx to avoid a flash at the default size; the Aa control lives in the appbar and, as a segmented row, in the drawer. Spacing stays in px by design, which is why 1.3 is the largest preset. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-27 22:16:30 -07:00
parent 7df928c3ab
commit 0bf97e6d2c
5 changed files with 787 additions and 161 deletions
@@ -30,6 +30,17 @@ export default function RootLayout({ children }: { children: ReactNode }) {
            __html: `window.__API_ORIGIN__=${JSON.stringify(apiOrigin)};`,
          }}
        />
+        {/* Text-size preference, applied before first paint so the page never
+            flashes at the default size. Mirrors lib/ui-scale.ts — keep the key
+            and the clamp in sync with it. */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              `try{var s=parseFloat(localStorage.getItem("jc.ui-scale"));` +
+              `if(isFinite(s))document.documentElement.style.setProperty(` +
+              `"--ui-scale",String(Math.min(1.4,Math.max(0.9,s))));}catch(e){}`,
+          }}
+        />
        {/* Google Fonts via <link> so an offline build still runs with the
            system fallback stacks defined in globals.css. */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />