the-sunken-reach/frontend/src/components/Layout.tsx

import { Link, Outlet } from 'react-router-dom';
import { useAuth } from '../auth/AuthContext';
import { DiceRoller } from './DiceRoller';

export function Layout() {
  const { user, logout } = useAuth();

  return (
    <div className="app-shell">
      <header className="topbar">
        <Link to="/campaigns" className="topbar-brand">
          <span className="die" aria-hidden>
            ⚄
          </span>
          The Sunken Reach
        </Link>
        <nav className="topbar-nav">
          {user && (
            <div className="topbar-user">
              <Link to="/account" title="Account settings">
                {user.displayName}
              </Link>
              <button className="btn btn-ghost" onClick={logout}>
                Log out
              </button>
            </div>
          )}
        </nav>
      </header>
      <main className="page">
        <Outlet />
      </main>
      <DiceRoller />
    </div>
  );
}