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>
This commit is contained in:
Claude Opus 5
+386
-130
File diff suppressed because it is too large
Load Diff
@@ -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" />
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { logout, me } from "@/lib/api";
|
||||
import { AuthContext, can } from "@/lib/abilities";
|
||||
import { ROLE_LABEL } from "@/lib/labels";
|
||||
import { FontScaleControl } from "./FontScaleControl";
|
||||
import type { AuthUser, Ability } from "@/lib/types";
|
||||
|
||||
/**
|
||||
@@ -14,23 +15,66 @@ import type { AuthUser, Ability } from "@/lib/types";
|
||||
* content. Provides the AuthContext so any page can read the user's
|
||||
* abilities. Used by every authenticated page.
|
||||
*/
|
||||
const NAV: { href: string; label: string; ability?: Ability; exact?: boolean }[] = [
|
||||
{ href: "/inicio", label: "Inicio", exact: true },
|
||||
{ href: "/clientes", label: "Clientes" },
|
||||
{ href: "/servicios", label: "Propiedades" },
|
||||
{ href: "/polizas", label: "Pólizas" },
|
||||
{ href: "/estado-cuenta", label: "Estado de cuenta" },
|
||||
// Daily data-entry screen (the legacy "Editor"), so it earns a top-level
|
||||
// entry rather than living one click inside the Movimientos tab. Hidden from
|
||||
// VIEWER, who can't capture anyway — the page itself also refuses.
|
||||
|
||||
type NavLink = { href: string; label: string; ability?: Ability; exact?: boolean };
|
||||
type NavEntry =
|
||||
| ({ kind: "link" } & NavLink)
|
||||
| { kind: "group"; label: string; items: NavLink[] };
|
||||
|
||||
/**
|
||||
* Top nav. Daily screens stay one click away; the movement screens and the
|
||||
* admin screens are grouped behind menus so the bar doesn't saturate as the
|
||||
* app grows. A group disappears entirely when the user can't see any of its
|
||||
* items (gating here is cosmetic — the API enforces every write).
|
||||
*/
|
||||
const NAV: NavEntry[] = [
|
||||
{ kind: "link", href: "/inicio", label: "Inicio", exact: true },
|
||||
{ kind: "link", href: "/clientes", label: "Clientes" },
|
||||
{ kind: "link", href: "/polizas", label: "Pólizas" },
|
||||
{ kind: "link", href: "/servicios", label: "Propiedades" },
|
||||
{
|
||||
kind: "group",
|
||||
label: "Cobranza",
|
||||
items: [
|
||||
// Daily data-entry screen (the legacy "Editor"). Hidden from VIEWER, who
|
||||
// can't capture anyway — the page itself also refuses.
|
||||
{ href: "/estado-cuenta/lote", label: "Captura", ability: "ledger:create" },
|
||||
{ href: "/estado-cuenta", label: "Estado de cuenta" },
|
||||
{ href: "/banco", label: "Chequera" },
|
||||
{ href: "/reportes", label: "Reportes" },
|
||||
],
|
||||
},
|
||||
{ kind: "link", href: "/reportes", label: "Reportes" },
|
||||
{
|
||||
kind: "group",
|
||||
label: "Admin",
|
||||
items: [
|
||||
{ href: "/catalogos", label: "Catálogos", ability: "lookup:manage" },
|
||||
{ href: "/usuarios", label: "Usuarios", ability: "user:manage" },
|
||||
{ href: "/operaciones", label: "Operaciones", ability: "db:manage" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
/** Every nav destination, flattened out of the groups. */
|
||||
const NAV_LINKS: NavLink[] = NAV.flatMap((entry) =>
|
||||
entry.kind === "link" ? [entry] : entry.items,
|
||||
);
|
||||
|
||||
/** The nav the given user may see, with empty groups dropped. */
|
||||
function visibleNav(user: AuthUser | null): NavEntry[] {
|
||||
const allowed = (item: NavLink) => !item.ability || can(user, item.ability);
|
||||
const out: NavEntry[] = [];
|
||||
for (const entry of NAV) {
|
||||
if (entry.kind === "link") {
|
||||
if (allowed(entry)) out.push(entry);
|
||||
continue;
|
||||
}
|
||||
const items = entry.items.filter(allowed);
|
||||
if (items.length > 0) out.push({ ...entry, items });
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Which nav entry is highlighted for a path. Longest matching href wins, so a
|
||||
* nested route (`/estado-cuenta/lote`) highlights its own entry instead of also
|
||||
@@ -40,7 +84,7 @@ const NAV: { href: string; label: string; ability?: Ability; exact?: boolean }[]
|
||||
function activeHref(pathname: string | null): string | null {
|
||||
if (!pathname) return null;
|
||||
let best: string | null = null;
|
||||
for (const item of NAV) {
|
||||
for (const item of NAV_LINKS) {
|
||||
const match = item.exact
|
||||
? pathname === item.href
|
||||
: pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||
@@ -51,13 +95,89 @@ function activeHref(pathname: string | null): string | null {
|
||||
return best;
|
||||
}
|
||||
|
||||
/**
|
||||
* One collapsible group in the desktop bar. Opens on click, closes on outside
|
||||
* click, Escape, or navigation. The trigger stays highlighted while any of its
|
||||
* children is the current page.
|
||||
*/
|
||||
function NavMenu({
|
||||
label,
|
||||
items,
|
||||
current,
|
||||
pathname,
|
||||
}: {
|
||||
label: string;
|
||||
items: NavLink[];
|
||||
current: string | null;
|
||||
pathname: string | null;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const holdsCurrent = items.some((item) => item.href === current);
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(event: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="appbar-menu" ref={ref}>
|
||||
<button
|
||||
type="button"
|
||||
className={`appbar-link appbar-menu-trigger${holdsCurrent ? " active" : ""}`}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{label}
|
||||
<span className="appbar-caret" aria-hidden="true" />
|
||||
</button>
|
||||
{open && (
|
||||
<div className="appbar-dropdown" role="menu">
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
role="menuitem"
|
||||
className={`appbar-dropdown-link${current === item.href ? " active" : ""}`}
|
||||
aria-current={current === item.href ? "page" : undefined}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [user, setUser] = useState<AuthUser | null>(null);
|
||||
const [checking, setChecking] = useState(true);
|
||||
const [loggingOut, setLoggingOut] = useState(false);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const current = activeHref(pathname);
|
||||
const nav = visibleNav(user);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
@@ -76,6 +196,21 @@ export function AppShell({ children }: { children: ReactNode }) {
|
||||
};
|
||||
}, [router]);
|
||||
|
||||
// Navigating away closes the mobile drawer — the route change is the only
|
||||
// "done" signal we get from a <Link>.
|
||||
useEffect(() => {
|
||||
setDrawerOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!drawerOpen) return;
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") setDrawerOpen(false);
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [drawerOpen]);
|
||||
|
||||
async function handleLogout() {
|
||||
setLoggingOut(true);
|
||||
try {
|
||||
@@ -117,24 +252,30 @@ export function AppShell({ children }: { children: ReactNode }) {
|
||||
</span>
|
||||
</Link>
|
||||
<nav className="appbar-nav" aria-label="Principal">
|
||||
{NAV.filter((item) => !item.ability || can(user, item.ability)).map(
|
||||
(item) => {
|
||||
const active = current === item.href;
|
||||
return (
|
||||
{nav.map((entry) =>
|
||||
entry.kind === "link" ? (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`appbar-link${active ? " active" : ""}`}
|
||||
aria-current={active ? "page" : undefined}
|
||||
key={entry.href}
|
||||
href={entry.href}
|
||||
className={`appbar-link${current === entry.href ? " active" : ""}`}
|
||||
aria-current={current === entry.href ? "page" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
{entry.label}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
) : (
|
||||
<NavMenu
|
||||
key={entry.label}
|
||||
label={entry.label}
|
||||
items={entry.items}
|
||||
current={current}
|
||||
pathname={pathname}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
<span className="appbar-spacer" />
|
||||
<div className="appbar-user">
|
||||
<FontScaleControl />
|
||||
{user && (
|
||||
<span className="appbar-user-name">
|
||||
{user.name}
|
||||
@@ -150,7 +291,52 @@ export function AppShell({ children }: { children: ReactNode }) {
|
||||
{loggingOut ? "Saliendo…" : "Cerrar sesión"}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="appbar-burger"
|
||||
aria-label={drawerOpen ? "Cerrar menú" : "Abrir menú"}
|
||||
aria-expanded={drawerOpen}
|
||||
onClick={() => setDrawerOpen((v) => !v)}
|
||||
>
|
||||
<span className={`burger-icon${drawerOpen ? " open" : ""}`} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
{drawerOpen && (
|
||||
<nav className="appbar-drawer" aria-label="Principal (móvil)">
|
||||
{nav.map((entry) =>
|
||||
entry.kind === "link" ? (
|
||||
<Link
|
||||
key={entry.href}
|
||||
href={entry.href}
|
||||
className={`appbar-drawer-link${current === entry.href ? " active" : ""}`}
|
||||
aria-current={current === entry.href ? "page" : undefined}
|
||||
>
|
||||
{entry.label}
|
||||
</Link>
|
||||
) : (
|
||||
<div key={entry.label} className="appbar-drawer-group">
|
||||
<span className="appbar-drawer-heading">{entry.label}</span>
|
||||
{entry.items.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`appbar-drawer-link${current === item.href ? " active" : ""}`}
|
||||
aria-current={current === item.href ? "page" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<FontScaleControl variant="inline" />
|
||||
{user && (
|
||||
<div className="appbar-drawer-user">
|
||||
{user.name} · {ROLE_LABEL[user.role]}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
<main className="shell-main">{children}</main>
|
||||
</AuthContext.Provider>
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
UI_SCALES,
|
||||
applyUiScale,
|
||||
readUiScale,
|
||||
saveUiScale,
|
||||
} from "@/lib/ui-scale";
|
||||
|
||||
/**
|
||||
* Text-size picker. Writes --ui-scale on <html>; because every font-size in
|
||||
* globals.css is in rem, that rescales the whole app at once.
|
||||
*
|
||||
* `variant="menu"` is the compact appbar popover; `variant="inline"` is the
|
||||
* flat row used inside the mobile drawer, where a popover inside a popover
|
||||
* would be awkward.
|
||||
*/
|
||||
export function FontScaleControl({
|
||||
variant = "menu",
|
||||
}: {
|
||||
variant?: "menu" | "inline";
|
||||
}) {
|
||||
const [scale, setScale] = useState<number | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Read after mount only: localStorage doesn't exist during SSR, and rendering
|
||||
// a guessed value would mismatch the pre-hydration script's.
|
||||
useEffect(() => {
|
||||
setScale(readUiScale());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onPointerDown(event: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onPointerDown);
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onPointerDown);
|
||||
document.removeEventListener("keydown", onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
function choose(value: number) {
|
||||
setScale(value);
|
||||
applyUiScale(value);
|
||||
saveUiScale(value);
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const options = UI_SCALES.map((option) => ({
|
||||
...option,
|
||||
selected: scale !== null && Math.abs(scale - option.value) < 0.001,
|
||||
}));
|
||||
|
||||
if (variant === "inline") {
|
||||
return (
|
||||
<div className="scale-inline" role="radiogroup" aria-label="Tamaño de texto">
|
||||
<span className="appbar-drawer-heading">Tamaño de texto</span>
|
||||
<div className="scale-inline-options">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={option.selected}
|
||||
className={`scale-chip${option.selected ? " active" : ""}`}
|
||||
style={{ fontSize: `${option.value}em` }}
|
||||
onClick={() => choose(option.value)}
|
||||
>
|
||||
{option.short}
|
||||
<span className="sr-only"> {option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="appbar-menu" ref={ref}>
|
||||
<button
|
||||
type="button"
|
||||
className="appbar-scale-trigger"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
aria-label="Tamaño de texto"
|
||||
title="Tamaño de texto"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
A<span className="appbar-scale-big">A</span>
|
||||
</span>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="appbar-dropdown appbar-dropdown-right" role="menu">
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="menuitemradio"
|
||||
aria-checked={option.selected}
|
||||
className={`appbar-dropdown-link scale-option${option.selected ? " active" : ""}`}
|
||||
onClick={() => choose(option.value)}
|
||||
>
|
||||
<span style={{ fontSize: `${option.value}em` }}>{option.short}</span>
|
||||
<span className="scale-option-label">{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// App-wide text size. Every font-size in globals.css is in rem and the root
|
||||
// size is `calc(100% * var(--ui-scale))`, so writing one variable on <html>
|
||||
// rescales the entire UI — no per-component work, and the browser's own base
|
||||
// font size still applies underneath.
|
||||
//
|
||||
// The value lives in localStorage (per browser, per machine) and is applied by
|
||||
// a pre-hydration script in app/layout.tsx so the page never paints at the
|
||||
// wrong size first. Keep UI_SCALE_KEY and the bounds in sync with that script.
|
||||
|
||||
export const UI_SCALE_KEY = "jc.ui-scale";
|
||||
export const DEFAULT_UI_SCALE = 1;
|
||||
export const MIN_UI_SCALE = 0.9;
|
||||
export const MAX_UI_SCALE = 1.4;
|
||||
|
||||
export const UI_SCALES: { value: number; label: string; short: string }[] = [
|
||||
{ value: 0.9, label: "Compacto", short: "A" },
|
||||
{ value: 1, label: "Normal", short: "A" },
|
||||
{ value: 1.15, label: "Grande", short: "A" },
|
||||
{ value: 1.3, label: "Muy grande", short: "A" },
|
||||
];
|
||||
|
||||
/** Clamp to the supported range; anything unparseable falls back to default. */
|
||||
export function normalizeUiScale(value: unknown): number {
|
||||
const n = typeof value === "number" ? value : Number.parseFloat(String(value));
|
||||
if (!Number.isFinite(n)) return DEFAULT_UI_SCALE;
|
||||
return Math.min(MAX_UI_SCALE, Math.max(MIN_UI_SCALE, n));
|
||||
}
|
||||
|
||||
export function readUiScale(): number {
|
||||
if (typeof window === "undefined") return DEFAULT_UI_SCALE;
|
||||
try {
|
||||
const raw = window.localStorage.getItem(UI_SCALE_KEY);
|
||||
return raw === null ? DEFAULT_UI_SCALE : normalizeUiScale(raw);
|
||||
} catch {
|
||||
// Private mode / storage disabled — the default is still usable.
|
||||
return DEFAULT_UI_SCALE;
|
||||
}
|
||||
}
|
||||
|
||||
export function applyUiScale(scale: number): void {
|
||||
if (typeof document === "undefined") return;
|
||||
document.documentElement.style.setProperty("--ui-scale", String(scale));
|
||||
}
|
||||
|
||||
export function saveUiScale(scale: number): void {
|
||||
try {
|
||||
window.localStorage.setItem(UI_SCALE_KEY, String(scale));
|
||||
} catch {
|
||||
/* ignore — the setting just won't survive a reload */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user