/* ─────────────────────────────────────────────────────────── Peak Athlete · Performance Lab v03 prototype Web shell — sidebar + topbar + PageShell wrapper Persona-aware: athlete vs coach swaps nav groups, user card, and the home page label (The Deck vs Squad Overview). Pure presentation. Profile/role are passed in as props — no data fetching here. ─────────────────────────────────────────────────────────── */ // ── Nav groupings ──────────────────────────────────────────── // v01.21 — Translation-driven. Each nav item carries an `i18nKey` // instead of a hardcoded `name`; group labels carry a `labelKey`. // Sidebar reads them through useT() so EN ↔ ES toggles re-render // the entire nav stack instantly. // // `id` is the route key (matches App's active state). `icon` is // the shared.jsx Icon name. `i18nKey` resolves through PA_I18N. // v03.24 — Sessions added to the Analysis group, between races // and the rankings/team blocks. Video Sessions feature Phase 1 // (read-only shell, empty state for users with no sessions yet). const NAV_ATHLETE = [ { labelKey: 'pages.subHome', items: [{ id: 'deck', icon: 'home', i18nKey: 'pages.home.athlete' }] }, { labelKey: 'pages.subAnalysis', items: [ { id: 'starts', icon: 'starts', i18nKey: 'pages.starts' }, { id: 'turns', icon: 'turns', i18nKey: 'pages.turns' }, { id: 'races', icon: 'races', i18nKey: 'pages.races' }, { id: 'sessions', icon: 'video', i18nKey: 'pages.sessions' }, ]}, { labelKey: 'pages.subRankings', items: [{ id: 'board', icon: 'board', i18nKey: 'pages.board' }] }, { labelKey: 'pages.subTeam', items: [{ id: 'team', icon: 'team', i18nKey: 'pages.team.athlete' }] }, ]; const NAV_COACH = [ { labelKey: 'pages.subHome', items: [{ id: 'deck', icon: 'home', i18nKey: 'pages.home.coach' }] }, { labelKey: 'pages.subAnalysis', items: [ { id: 'starts', icon: 'starts', i18nKey: 'pages.starts' }, { id: 'turns', icon: 'turns', i18nKey: 'pages.turns' }, { id: 'races', icon: 'races', i18nKey: 'pages.races' }, { id: 'sessions', icon: 'video', i18nKey: 'pages.sessions' }, ]}, { labelKey: 'pages.subTeam', items: [{ id: 'team', icon: 'team', i18nKey: 'pages.team.coach' }] }, { labelKey: 'pages.subRankings', items: [{ id: 'board', icon: 'board', i18nKey: 'pages.board' }] }, ]; // ── Utilities ──────────────────────────────────────────────── function initialsFrom(profile, role, fallbackEmail) { if (role === 'coach') { const n = profile?.coach_name || ''; const parts = n.trim().split(/\s+/).filter(Boolean); if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase(); } else { const f = profile?.first_name?.[0] || ''; const l = profile?.last_name?.[0] || ''; if (f || l) return (f + l).toUpperCase(); } return (fallbackEmail || '?').slice(0, 2).toUpperCase(); } // ── SupportLink (v03.75) ───────────────────────────────────── // Click-to-reveal support contact. Avoids a mailto: (which, inside // the GitHub-Pages iframe, makes the browser show an "open your mail // app?" prompt naming the eric4vv.github.io origin — off-brand). // Click toggles a small panel with the address + a Copy button. // // v03.75 — support@mypeakathlete.com is a live alias of // eric@mypeakathlete.com (created 2026-06-11), so mail to support@ // lands in Eric's inbox. PA_SUPPORT_EMAIL override still wins if set. const SUPPORT_ADDR = (typeof window !== 'undefined' && window.PA_SUPPORT_EMAIL) || 'support@mypeakathlete.com'; function SupportLink({ label }) { const Hooks = (window.React || React); const [open, setOpen] = Hooks.useState(false); const [copied, setCopied] = Hooks.useState(false); const copy = async () => { try { if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(SUPPORT_ADDR); } else { // Fallback for older / insecure-context browsers. const ta = document.createElement('textarea'); ta.value = SUPPORT_ADDR; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch (_) {} document.body.removeChild(ta); } setCopied(true); window.setTimeout(() => setCopied(false), 1800); } catch (_) { /* clipboard blocked — user can still read + type the address */ } }; return (
{open && (
{SUPPORT_ADDR}
)}
); } function displayNameFrom(profile, role, fallbackEmail) { if (role === 'coach') return profile?.coach_name || fallbackEmail || 'Coach'; if (role === 'athlete') { const n = `${profile?.first_name || ''} ${profile?.last_name || ''}`.trim(); return n || fallbackEmail || 'Athlete'; } return fallbackEmail || '—'; } // v01.21 — `roleSublabelFrom` now returns a translated string. Takes // `t` (the translation function from useT()) so callers control the // active language. Falls back to English-ish defaults if t isn't // passed (e.g. early boot before the dict loads). function roleSublabelFrom(profile, role, t) { const _t = t || ((k) => k); if (role === 'coach') { return profile?.role_label || _t('roles.headCoach'); } if (role === 'athlete') { const code = profile?.athlete_code ? '· ' + profile.athlete_code : ''; return (_t('roles.athlete') + ' ' + code).trim(); } return ''; } // ── Sidebar ────────────────────────────────────────────────── // v01.06 — When `mobile` is true, the sidebar repositions as a // fixed slide-in drawer (left edge, full height) controlled by // `mobileOpen`. When `mobile` is false, sticky 240px column // behaves exactly as before. Same component, same children — // only the positioning shell flips. const Sidebar = ({ active, onNav, persona, profile, role, fallbackEmail, version, onSignOut, mobile, mobileOpen, onCloseMobile, onOpenAccount, isPro, badges, // v01.27 — extraGroups appended to the persona's nav stack (e.g. // an Admin group for users with isRaceAdmin or isSuperAdmin). // Each group is the same shape as NAV_ATHLETE entries: // { labelKey, items: [{ id, icon, i18nKey }] } extraGroups, }) => { // v01.21 — useT() bridges PA_I18N into render. Belt-and-suspenders // fallback so the Sidebar doesn't break if shared.jsx hasn't // compiled before web-shell.jsx mounts (rare race during boot). const t = (window.useT || (() => (k) => k))(); const baseGroups = persona === 'coach' ? NAV_COACH : NAV_ATHLETE; const groups = extraGroups && extraGroups.length ? [...baseGroups, ...extraGroups] : baseGroups; const initials = initialsFrom(profile, role, fallbackEmail); const name = displayNameFrom(profile, role, fallbackEmail); const sub = roleSublabelFrom(profile, role, t); // Esc closes drawer when open on mobile. React.useEffect(() => { if (!mobile || !mobileOpen) return undefined; const onKey = (e) => { if (e.key === 'Escape') onCloseMobile?.(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [mobile, mobileOpen, onCloseMobile]); // Wrap nav clicks so mobile auto-closes the drawer after picking. const handleNav = (id) => { if (onNav) onNav(id); if (mobile) onCloseMobile?.(); }; const positioning = mobile ? { position: 'fixed', top: 0, left: 0, bottom: 0, width: 280, maxWidth: '85vw', zIndex: 1100, transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)', transition: 'transform 0.22s ease', boxShadow: mobileOpen ? '0 0 40px color-mix(in oklch, var(--ink) 40%, transparent)' : 'none', height: '100vh', } : { width: 240, flexShrink: 0, position: 'sticky', top: 0, height: '100vh', alignSelf: 'flex-start', }; return ( ); }; // ── Topbar ─────────────────────────────────────────────────── // v01.06 — On mobile (<768px): hamburger appears on the left, // search field hides (it was placeholder-only anyway — global // search palette is post-cutover work), title font scales down, // horizontal padding tightens. On desktop: identical to v01.05. const Topbar = ({ title, sub, scope, onToggleScope, impersonating, mobile, onOpenDrawer, trialDays, onOpenAccount }) => { const t = (window.useT || (() => (k) => k))(); return (
{/* Hamburger — mobile only, leftmost */} {mobile && ( )}
{sub &&
{sub}
}
{title}
{/* v01.15 — Trial countdown chip. Shown when trialDays is a positive integer (i.e. user is on a Pro trial). Click opens the Account modal so the user can review/extend. Hidden on mobile to keep the topbar uncluttered; the Account modal's Subscription tab still surfaces the same info there. */} {!mobile && trialDays != null && trialDays >= 0 && ( )} {/* Search — hidden in v03.06 until the cmd-K palette is wired. Shipping a non-functional input on a live dashboard is worse than shipping no search at all. Restore this block when the palette + global search API exist. */} {false && !mobile && (
{t('topbar.search')} ⌘K
)} {/* Scope toggle */} {/* Bell — hidden in v03.06. The Batch 9 lock comment said this was already hidden but the `&&` gate was missing, so it was rendering as a non-functional decoration on a live build. Restore when a real notification source exists (coach notes, analysis-ready events, etc). */} {false && !mobile && (
)}
); }; // ── PageShell — wraps sidebar + topbar + content ───────────── // v01.06 — Below 768px (`useIsMobile` flips true), Sidebar // becomes a fixed slide-in drawer triggered by the Topbar // hamburger; backdrop overlay closes on click; content padding // tightens. Above 768px, layout is identical to v01.05. // // v01.65 — Threshold bumped from 768 → 1024 so iPad (portrait + // landscape) and half-screen desktop browsers also get the drawer // sidebar + hamburger topbar. At 1024+ the persistent sidebar fits // comfortably alongside the content; below it, the sidebar steals // too much horizontal room and forces the analysis grids into // cramped layouts. Single threshold for everything (sidebar mode, // drawer backdrop, topbar hamburger, content padding) so they flip // together — partial states (drawer-only or hamburger-only) confuse // users. // v01.66 — Bumped 1024 → 1100. iPad Pro 12.9" portrait is exactly // 1024 CSS pixels and was being missed by the strict less-than // check. 1100 captures it plus buffer for orientation rotations // where Safari reports off-by-one values. const PageShell = ({ active, onNav, title, sub, scope, onToggleScope, persona, profile, role, fallbackEmail, version, onSignOut, impersonating, // v01.15 — Batch 2 props onOpenAccount, isPro, trialDays, // v01.16 — Batch 3 nav badge map (e.g. { races: 2 }) badges, // v01.27 — extra nav groups (admin, etc.) extraGroups, children, }) => { const mobile = (window.useIsMobile || (() => false))(1100); const [drawerOpen, setDrawerOpen] = React.useState(false); // Whenever the breakpoint flips back to desktop, force-close // any in-flight drawer state so the next mobile rotation // starts fresh. React.useEffect(() => { if (!mobile) setDrawerOpen(false); }, [mobile]); return (
setDrawerOpen(false)} onOpenAccount={onOpenAccount} isPro={isPro} badges={badges} extraGroups={extraGroups} /> {/* Mobile drawer backdrop — only renders when drawer open */} {mobile && drawerOpen && (
setDrawerOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 1090, background: 'color-mix(in oklch, var(--ink) 55%, transparent)', backdropFilter: 'blur(2px)', }} /> )} {/* v03.22 — overflowX:hidden on the content column so a page whose content momentarily runs wide (admin bar, a chart, a wide grid at an awkward breakpoint) clips here instead of dragging a horizontal scrollbar across the whole dashboard. minWidth:0 lets the flex child shrink; a nested element with its own overflow-x:auto still scrolls internally. */}
setDrawerOpen(true)} trialDays={trialDays} onOpenAccount={onOpenAccount} />
{/* v01.50 — Preview Pro banner. Renders only when PA_PREVIEW.isOn() (subscribes via the usePreview hook inside the component). Sticky position above any page content. The banner's Upgrade CTA fires onOpenAccount which opens the Account modal subscription tab — same path the rest of the app uses. */} {window.PreviewBanner && ( )} {children}
); }; // ── Expose ─────────────────────────────────────────────────── Object.assign(window, { NAV_ATHLETE, NAV_COACH, Sidebar, Topbar, PageShell, });