PacketStation/frontend/src/components/Layout.tsx

import { useEffect, useRef } from "react";
import { Link, Outlet, useLocation } from "react-router";
import { SCREEN_LABELS, firstScreen, isScreen, orderScreens, type Screen } from "../auth/roles";
import { useAuth } from "../auth/useAuth";
import { LockScreen } from "./LockScreen";
import { RoleSwitcher } from "./RoleSwitcher";
import { TopBar } from "./TopBar";

function chipClass(s: Screen): string {
  if (s === "admin") return "rchip admin";
  if (s === "supervisor") return "rchip supervisor";
  return "rchip";
}

/** Page frame: the top bar, then the routed page inside main.wrap, and the lock screen over both. */
export function Layout() {
  const auth = useAuth();
  const { pathname } = useLocation();
  const mainRef = useRef<HTMLElement>(null);
  const locked = auth.status === "locked";
  const me = auth.status === "ready" || locked ? auth.me : null;

  const screens = me ? orderScreens(me.screens) : [];
  const seg = pathname.split("/")[1];
  const active = isScreen(seg) && screens.includes(seg) ? seg : null;
  const shown = active ?? firstScreen(screens);

  // Keep the page mounted behind the lock, but out of reach of the keyboard and screen readers.
  useEffect(() => {
    mainRef.current?.toggleAttribute("inert", locked);
  }, [locked]);

  return (
    <>
      <TopBar nav={me && !locked ? <RoleSwitcher screens={screens} active={active} /> : null}>
        {me ? (
          <>
            <b className="uname">{me.user.display_name}</b>
            {shown ? <span className={chipClass(shown)}>{SCREEN_LABELS[shown]}</span> : null}
            <Link className="btn sm ghost" to="/account">
              Account
            </Link>
            <button className="btn sm ghost" type="button" onClick={() => void auth.signOut()}>
              Sign out
            </button>
          </>
        ) : (
          <span className="proto">Rebuild preview</span>
        )}
      </TopBar>
      <div className={locked ? "blur-hidden" : undefined}>
        <main className="wrap" id="main" ref={mainRef} aria-hidden={locked ? true : undefined}>
          <Outlet />
        </main>
      </div>
      {locked ? <LockScreen key={auth.me?.user.id ?? "unknown"} /> : null}
    </>
  );
}