// ============================================================
// shell.jsx — the app frame from the approved mockup: top bar,
// left menu (a pill row on phones), bottom tab bar on phones,
// and the hash router. Every page is an empty state in Phase 1.
// ============================================================
const R = window.AreteRoutes;
// ---- router ----
function useRoute() {
// state always holds the fixed (canonical) hash, so every bad hash is
// fixed, even two in a row
const [hash, setHash] = React.useState(() => R.normalize(window.location, window.history).href);
React.useEffect(() => {
const onHash = () => setHash(R.normalize(window.location, window.history).href);
window.addEventListener("hashchange", onHash);
onHash(); // catch a change between first render and this effect
return () => window.removeEventListener("hashchange", onHash);
}, []);
return R.parse(hash);
}
// ---- top bar ----
function initials(email) {
const name = (email || "").split("@")[0].replace(/[^a-z]/gi, " ").trim();
if (!name) return "?";
const parts = name.split(/\s+/);
return (parts.length > 1 ? parts[0][0] + parts[1][0] : name.slice(0, 2)).toUpperCase();
}
function firstName(email) {
const n = (email || "").split("@")[0].replace(/[^a-z]+.*$/i, "");
return n ? n[0].toUpperCase() + n.slice(1).toLowerCase() : "";
}
// The display name comes from the sign-in account (Google sets full_name),
// never from a list of emails: this file is public on GitHub Pages.
function displayName(fullName, email) {
const parts = String(fullName || "").trim().split(/\s+/).filter(Boolean);
if (!parts.length) return [firstName(email), initials(email)];
return [parts[0], (parts.length > 1 ? parts[0][0] + parts[parts.length - 1][0] : parts[0].slice(0, 2)).toUpperCase()];
}
function AccountMenu({ email, fullName }) {
const [open, setOpen] = React.useState(false);
const box = React.useRef(null);
const btn = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
const esc = (e) => { if (e.key === "Escape") { setOpen(false); btn.current && btn.current.focus(); } };
document.addEventListener("mousedown", away);
document.addEventListener("keydown", esc);
return () => { document.removeEventListener("mousedown", away); document.removeEventListener("keydown", esc); };
}, [open]);
const [name, mark] = displayName(fullName, email);
return (
{name && {name}}
{open && (
{email}
)}
);
}
function TopBar({ top, email, fullName }) {
return (
AAreteThe Charlotte Social
);
}
function TabBar({ top }) {
return (
);
}
// ---- left menu ----
function SideMenu({ top, sub }) {
const m = R.MENUS[top];
const extra = R.SECONDARY[top] || [];
return (
);
}
// ---- pages (Phase 1: every page is an empty state) ----
function EmptyPage({ item }) {
return (
<>
Coming in Phase {item.phase}
Nothing here yet
{item.blurb}
);
}
function Shell({ email, fullName, preview }) {
const route = useRoute();
const title = React.useRef(null);
const first = React.useRef(true);
React.useEffect(() => {
document.title = route.item.label + " · Arete";
if (first.current) { first.current = false; return; }
// on a page change: back to the top, focus the new page title
window.scrollTo(0, 0);
title.current && title.current.focus();
}, [route.top, route.sub]);
return (
<>
{ e.preventDefault(); title.current && title.current.focus(); }}>Skip to content