// Shared Direction-B primitives for Marketplace + Community pages
// Spatial Cinema design language — shared tokens
const PAPER = "#1a1612"; // warm dark base (legacy name, kept: used site-wide)
const INK = "#f2ede4"; // warm cream text
const INK_DEEP = "#0b0e0c"; // true cinema base (footer / deep surfaces)
const TEAL = "#0ac5a8"; // refined cinema teal accent
const TEAL_BRIGHT = "#2ee0c4";
const RUST = "#d2693f"; // warm secondary accent
const serif = "'Fraunces', 'Instrument Serif', serif";
const sans = "'Space Grotesk', sans-serif";
const mono = "'JetBrains Mono', monospace";
function Ph({ label, ratio = "1/1", tone = "dark", style = {} }) {
const bg = tone === "dark" ? "#0f1513" : "#efece6";
const fg = tone === "dark" ? "rgba(255,255,255,0.4)" : "rgba(242,237,228,0.4)";
const stripe = tone === "dark"
? "repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10px)"
: "repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 10px)";
return (
{label}
);
}
function Logo({ variant = "black", size = 28 }) {
const src = variant === "white" ? "/shape-logo-new-white.png?v=3"
: variant === "black" ? "/shape-logo-new-black.png?v=3"
: "/shape-logo-new-white.png?v=3";
// New logo has the play-icon stacked above the SHAPE wordmark (aspect ~1.87:1), not inline like the old one.
// Scale so the overall mark reads at a comparable visual weight to the previous inline logo.
const h = Math.round(size * 1.8);
return 
;
}
function NavDropdown({ label, items, active, activeMatch }) {
const [open, setOpen] = React.useState(false);
const closeTimer = React.useRef(null);
const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } };
const scheduleClose = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpen(false), 500); };
const isActive = activeMatch.includes(active);
return (
{ cancelClose(); setOpen(true); }} onMouseLeave={scheduleClose}>
setOpen(o => !o)} style={{ fontSize: 12, letterSpacing: "0.04em", textTransform: "lowercase", color: isActive ? "#f5efe1" : "rgba(245,239,225,0.55)", fontFamily: sans, fontWeight: 300, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 5, lineHeight: 1 }}>
{label}▾
{/* Invisible hover bridge — fills the gap between trigger and panel so the
cursor never crosses dead space that could trigger mouseLeave. */}
{open &&
}
{open && (
)}
);
}
function Header({ active }) {
const [drawerOpen, setDrawerOpen] = React.useState(false);
const [authUser, setAuthUser] = React.useState(null);
const [roleMenuOpen, setRoleMenuOpen] = React.useState(false);
React.useEffect(() => {
let cancelled = false;
fetch('/api/me', { credentials: 'same-origin' })
.then(r => r.ok ? r.json() : { user: null })
.then(d => { if (!cancelled) setAuthUser(d && d.user ? d.user : null); })
.catch(() => { if (!cancelled) setAuthUser(null); });
return () => { cancelled = true; };
}, []);
async function handleLogout(e) {
e.preventDefault();
try {
await fetch('/api/auth/signout', { method: 'POST', credentials: 'same-origin' });
} catch {}
window.location.href = '/';
}
async function switchRole(nextRole) {
setRoleMenuOpen(false);
if (!authUser || nextRole === authUser.role) return;
try {
const res = await fetch('/api/me/role', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
body: JSON.stringify({ role: nextRole }),
});
const data = await res.json().catch(() => ({}));
if (res.ok && data.dashboard) {
window.location.href = data.dashboard;
} else {
alert(data.error || 'Could not switch role.');
}
} catch (err) {
console.error('[header] switchRole failed', err);
}
}
const roleLabel = (r) => r === 'trainer' ? 'Trainer' : r === 'nutritionist' ? 'Nutritionist' : 'Client';
const dashboardHref = (r) => r === 'trainer'
? '/newdesign/TrainerDashboard.html'
: r === 'nutritionist'
? '/newdesign/NutritionistDashboard.html'
: '/newdesign/ClientDashboard.html';
// Wrap plain-link nav items in the same outer container shape NavDropdown
// uses, so they share vertical-centering and any future container styles.
const link = (name, href) => (
);
return (
<>
{authUser ? (
<>
Hi, {authUser.firstName || authUser.email}
{authUser.roles && authUser.roles.length > 1 ? (
setRoleMenuOpen(true)} onMouseLeave={() => setRoleMenuOpen(false)}>
{roleMenuOpen && (
Switch profile
{authUser.roles.map(r => (
))}
)}
) : null}
Dashboard
Sign out
) : (
<>
Log in
Get started
)}
setDrawerOpen(false)} active={active} authUser={authUser} onLogout={handleLogout} />
);
}
function HeroBg() {
return (
<>
{/* Lighter gradient — let the road image breathe */}
);
}
function Footer() {
return (
);
}
function ShapeMobileStyles() {
return (
);
}
Object.assign(window, { PAPER, INK, TEAL, TEAL_BRIGHT, serif, sans, Ph, Logo, Header, Footer, HeroBg });
// -----------------------------------------------------------------------------
// Calendar overlay — shared across Client / Trainer / Nutritionist pages.
// Week + Month views. Filters by role-relevant event types.
// Usage:
// const cal = useCalendarOverlay();
// ...
// Open calendar →
//
// Event shape: { date: "2026-04-18", time: "09:00" | null, kind, title, sub, with? }
// kind ∈ WORKOUT | MEAL | CHECKIN | SESSION | CONSULT | REVIEW | PLAN | ADMIN
// -----------------------------------------------------------------------------
function useCalendarOverlay() {
const [open, setOpen] = React.useState(false);
return {
open: (e) => { if (e) e.preventDefault(); setOpen(true); },
close: () => setOpen(false),
props: { open, onClose: () => setOpen(false) },
};
}
const KIND_COLORS = {
WORKOUT: "#0ac5a8",
SESSION: "#0ac5a8",
MEAL: "#e8b54a",
PLAN: "#e8b54a",
CONSULT: "#c084e8",
CHECKIN: "#6fb5ff",
REVIEW: "#6fb5ff",
ADMIN: "rgba(242,237,228,0.5)",
};
const KIND_LABEL = { WORKOUT:"Workout", MEAL:"Meal", CHECKIN:"Check-in", SESSION:"Session", CONSULT:"Consult", REVIEW:"Review", PLAN:"Plan", ADMIN:"Admin" };
function ymd(d) { return d.toISOString().slice(0,10); }
function startOfWeek(d) {
const x = new Date(d);
const day = (x.getDay() + 6) % 7; // Mon-start
x.setDate(x.getDate() - day); x.setHours(0,0,0,0);
return x;
}
function addDays(d, n) { const x = new Date(d); x.setDate(x.getDate()+n); return x; }
function fmtMonth(d) { return d.toLocaleDateString("en-US", { month: "long", year: "numeric" }); }
function fmtWeekRange(s) {
const e = addDays(s, 6);
const sm = s.toLocaleDateString("en-US", { month: "short", day: "numeric" });
const em = e.toLocaleDateString("en-US", { month: s.getMonth()===e.getMonth() ? undefined : "short", day: "numeric" });
return `${sm} – ${em}, ${e.getFullYear()}`;
}
function CalendarOverlay({ open, onClose, role = "client", events = [], anchorDate = null }) {
// Anchor to the real today unless an explicit anchorDate is passed (kept for
// demos/tests). Normalize to local midnight so the "today" highlight is exact.
const today = React.useMemo(() => {
const d = anchorDate ? new Date(anchorDate + "T00:00:00") : new Date();
d.setHours(0, 0, 0, 0);
return d;
}, [anchorDate]);
const [view, setView] = React.useState("week"); // "week" | "month"
const [cursor, setCursor] = React.useState(() => { const d = anchorDate ? new Date(anchorDate + "T00:00:00") : new Date(); d.setHours(0,0,0,0); return d; });
const [selected, setSelected] = React.useState(null); // { event, anchor: {x,y,w,h} }
const [serverEvents, setServerEvents] = React.useState(null); // live events from /api/calendar
const [adding, setAdding] = React.useState(false);
// Load live events for a wide window around the cursor whenever the calendar
// is open. Falls back silently (keeps prop `events`) if the user is signed
// out or the API is unavailable. Keyed to the cursor's month so paging refetches.
const monthKey = `${cursor.getFullYear()}-${cursor.getMonth()}`;
const reload = React.useCallback(() => {
if (!open) return;
const from = ymd(addDays(cursor, -45));
const to = ymd(addDays(cursor, 45));
fetch(`/api/calendar?from=${from}&to=${to}`, { credentials: "same-origin" })
.then(r => (r.ok ? r.json() : null))
.then(d => { if (d && Array.isArray(d.events)) setServerEvents(d.events); })
.catch(() => {});
}, [open, monthKey]);
React.useEffect(() => { reload(); }, [reload]);
// Server events win when present; otherwise the static prop events show.
const allEvents = serverEvents != null ? serverEvents : events;
const live = serverEvents != null;
const byDate = React.useMemo(() => {
const m = {};
allEvents.forEach(e => { (m[e.date] = m[e.date] || []).push(e); });
Object.values(m).forEach(list => list.sort((a,b) => (a.time||"00:00").localeCompare(b.time||"00:00")));
return m;
}, [allEvents]);
if (!open) return null;
const shift = (dir) => {
setSelected(null);
if (view === "week") setCursor(addDays(cursor, 7*dir));
else { const x = new Date(cursor); x.setMonth(x.getMonth()+dir); setCursor(x); }
};
const setViewAndClose = (v) => { setSelected(null); setView(v); };
const goToday = () => { setSelected(null); setCursor(today); };
const roleLabel = { client: "My calendar", trainer: "Coaching calendar", nutritionist: "Nutrition calendar" }[role] || "Calendar";
return (
e.stopPropagation()}
style={{ width: "min(1200px, 100%)", background: PAPER, color: INK, border: "1px solid rgba(242,237,228,0.1)", borderRadius: 14, boxShadow: "0 40px 120px rgba(0,0,0,0.6)", fontFamily: sans, overflow: "hidden", margin: "auto" }}>
{/* Header */}
{roleLabel.toUpperCase()}
{view === "week" ? fmtWeekRange(startOfWeek(cursor)) : fmtMonth(cursor)}
{["week","month"].map(v => (
))}
{
if (!e.target.value) return;
setSelected(null);
setCursor(new Date(e.target.value + "T00:00:00"));
}}
aria-label="Jump to date"
style={{ background: "transparent", color: "rgba(242,237,228,0.8)", border: "1px solid rgba(242,237,228,0.15)", padding: "6px 12px", borderRadius: 999, fontFamily: sans, fontSize: 12, cursor: "pointer", colorScheme: "dark" }}
/>
{live && (
)}
{/* Legend */}
{legendForRole(role).map(k => (
{KIND_LABEL[k]}
))}
{/* Body */}
{view === "week" ?
:
}
{selected &&
setSelected(null)} onChanged={reload} />}
{adding && setAdding(false)} onSaved={() => { setAdding(false); reload(); }} />}
);
}
// Add-event modal — writes to /api/calendar (shared with the mobile app).
function CalAddForm({ defaultDate, onClose, onSaved }) {
const KINDS = ["WORKOUT","MEAL","CHECKIN","CONSULT","REVIEW","PLAN","REST","ADMIN"];
const KIND_ICON = { WORKOUT: "🏋", MEAL: "🍽", CHECKIN: "✅", CONSULT: "💬", REVIEW: "📋", PLAN: "🗺", REST: "😴", ADMIN: "✦" };
const [kind, setKind] = React.useState("WORKOUT");
const [title, setTitle] = React.useState("");
const [sub, setSub] = React.useState("");
const [date, setDate] = React.useState(defaultDate);
const [time, setTime] = React.useState("");
const [dur, setDur] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState("");
const save = () => {
if (!title.trim()) { setErr("Add a title."); return; }
setBusy(true); setErr("");
fetch("/api/calendar", {
method: "POST", credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ kind, title: title.trim(), sub: sub.trim() || undefined, date, time: /^\d{1,2}:\d{2}$/.test(time) ? time : undefined, durationMin: dur ? Number(dur) : undefined }),
})
.then(r => r.ok ? r.json() : r.json().then(e => Promise.reject(e)))
.then(() => onSaved())
.catch(e => { setErr((e && e.error) || "Could not save."); setBusy(false); });
};
const field = { width: "100%", background: "rgba(242,237,228,0.06)", color: INK, border: "1px solid rgba(242,237,228,0.15)", borderRadius: 10, padding: "11px 12px", fontFamily: sans, fontSize: 14, outline: "none", boxSizing: "border-box" };
return (
e.stopPropagation()} style={{ width: "min(440px, 100%)", background: PAPER, color: INK, border: "1px solid rgba(242,237,228,0.12)", borderRadius: 14, padding: 22, fontFamily: sans }}>
Type
{KINDS.map(k => {
const on = kind === k;
return (
);
})}
{err &&
{err}
}
);
}
const navArrowStyle = { background: "transparent", color: INK, border: "1px solid rgba(242,237,228,0.15)", width: 32, height: 32, borderRadius: 999, fontFamily: sans, fontSize: 16, cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", lineHeight: 1 };
function legendForRole(role) {
if (role === "trainer") return ["SESSION","CHECKIN","REVIEW","ADMIN"];
if (role === "nutritionist") return ["CONSULT","PLAN","REVIEW","ADMIN"];
return ["WORKOUT","MEAL","CHECKIN"];
}
function WeekView({ start, byDate, today, onSelect }) {
const days = Array.from({length: 7}, (_, i) => addDays(start, i));
const hours = Array.from({length: 14}, (_, i) => i + 7); // 7am – 8pm
return (
{days.map(d => {
const isToday = ymd(d) === ymd(today);
return (
{d.toLocaleDateString("en-US", { weekday: "short" }).toUpperCase()}
{d.getDate()}
);
})}
{hours.map(h => (
{h === 12 ? "12 PM" : h < 12 ? `${h} AM` : `${h-12} PM`}
{days.map(d => {
const list = (byDate[ymd(d)] || []).filter(e => e.time && Number(e.time.slice(0,2)) === h);
return (
{list.map((e, i) => (
))}
);
})}
))}
);
}
function EventChip({ e, compact, onSelect }) {
const color = KIND_COLORS[e.kind] || TEAL;
const handle = (ev) => {
ev.stopPropagation();
if (!onSelect) return;
const r = ev.currentTarget.getBoundingClientRect();
onSelect({ event: e, anchor: { x: r.left, y: r.top, w: r.width, h: r.height } });
};
return (
);
}
function MonthView({ cursor, byDate, today, onSelect }) {
const first = new Date(cursor.getFullYear(), cursor.getMonth(), 1);
const gridStart = startOfWeek(first);
const weeks = 6;
const cells = Array.from({length: weeks*7}, (_, i) => addDays(gridStart, i));
const weekdays = ["MON","TUE","WED","THU","FRI","SAT","SUN"];
return (
{cells.map((d, i) => {
const inMonth = d.getMonth() === cursor.getMonth();
const isToday = ymd(d) === ymd(today);
const list = byDate[ymd(d)] || [];
return (
{d.getDate()}
{list.slice(0,3).map((e, j) =>
)}
{list.length > 3 &&
+{list.length-3} more
}
);
})}
);
}
function actionsForEvent(role, kind) {
// Returns [{ label, primary? }]
if (role === "client") {
if (kind === "WORKOUT") return [{ label: "Start workout", primary: true }, { label: "View plan" }, { label: "Reschedule" }];
if (kind === "MEAL") return [{ label: "Log meal", primary: true }, { label: "Swap meal" }, { label: "See macros" }];
if (kind === "CHECKIN") return [{ label: "Join call", primary: true }, { label: "Message coach" }, { label: "Reschedule" }];
}
if (role === "trainer") {
if (kind === "SESSION") return [{ label: "Join session", primary: true }, { label: "Open client" }, { label: "Reschedule" }];
if (kind === "CHECKIN") return [{ label: "Join check-in", primary: true }, { label: "Open notes" }, { label: "Reschedule" }];
if (kind === "REVIEW") return [{ label: "Open review", primary: true }, { label: "Message client" }];
if (kind === "ADMIN") return [{ label: "Mark done", primary: true }, { label: "Edit" }];
}
if (role === "nutritionist") {
if (kind === "CONSULT") return [{ label: "Join consult", primary: true }, { label: "Open client" }, { label: "Reschedule" }];
if (kind === "PLAN") return [{ label: "Open plan", primary: true }, { label: "Send to client" }];
if (kind === "REVIEW") return [{ label: "Open review", primary: true }, { label: "Message client" }];
if (kind === "ADMIN") return [{ label: "Mark done", primary: true }, { label: "Edit" }];
}
return [{ label: "View details", primary: true }];
}
function fmtTimeRange(time, duration) {
if (!time) return "All day";
const [h, m] = time.split(":").map(Number);
const start = new Date(2026, 0, 1, h, m);
const end = new Date(start.getTime() + (duration || 60) * 60000);
const fmt = (d) => {
const hh = d.getHours();
const mm = d.getMinutes().toString().padStart(2, "0");
const ap = hh >= 12 ? "PM" : "AM";
const hh12 = ((hh + 11) % 12) + 1;
return `${hh12}:${mm} ${ap}`;
};
return `${fmt(start)} – ${fmt(end)}`;
}
function fmtLongDate(dateStr) {
const d = new Date(dateStr + "T00:00:00");
return d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
}
function EventPopover({ selection, role, onClose, onChanged }) {
const { event: e, anchor } = selection;
const canDelete = e && e.editable && e.source === "event";
const removeEvent = () => {
fetch("/api/calendar", { method: "DELETE", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: e.id }) })
.then(() => { onClose(); if (onChanged) onChanged(); })
.catch(() => {});
};
const popRef = React.useRef(null);
const [pos, setPos] = React.useState(() => {
// Initial guess — useLayoutEffect will refine once we know size
return { left: anchor.x + anchor.w + 10, top: anchor.y - 4 };
});
React.useEffect(() => {
const onKey = (ev) => { if (ev.key === "Escape") onClose(); };
const onClick = (ev) => { if (popRef.current && !popRef.current.contains(ev.target)) onClose(); };
window.addEventListener("keydown", onKey);
const t = setTimeout(() => window.addEventListener("mousedown", onClick), 0);
return () => { window.removeEventListener("keydown", onKey); clearTimeout(t); window.removeEventListener("mousedown", onClick); };
}, [onClose]);
React.useLayoutEffect(() => {
if (!popRef.current) return;
const r = popRef.current.getBoundingClientRect();
const vw = window.innerWidth, vh = window.innerHeight;
let left = anchor.x + anchor.w + 10;
let top = anchor.y - 4;
if (left + r.width > vw - 16) left = Math.max(16, anchor.x - r.width - 10);
if (left < 16) left = 16;
if (top + r.height > vh - 16) top = Math.max(16, vh - r.height - 16);
if (top < 16) top = 16;
setPos({ left, top });
}, [anchor.x, anchor.y, anchor.w, anchor.h]);
const color = KIND_COLORS[e.kind] || TEAL;
const actions = actionsForEvent(role, e.kind);
const node = (
ev.stopPropagation()}
onMouseDown={(ev) => ev.stopPropagation()}
style={{
position: "fixed", left: pos.left, top: pos.top,
width: 320, background: "#1a1612", color: INK,
border: "1px solid rgba(242,237,228,0.14)", borderRadius: 10,
boxShadow: "0 24px 60px rgba(0,0,0,0.55)",
zIndex: 300, overflow: "hidden", fontFamily: sans,
}}>
{(KIND_LABEL[e.kind] || e.kind || "").toUpperCase()}
{e.title}
{fmtLongDate(e.date)}
{fmtTimeRange(e.time, e.duration != null ? e.duration : e.durationMin)}
{(e.sub || e.with || e.location) && (
{e.with && (
With
{e.with}
)}
{e.location && (
Where
{e.location}
)}
{e.sub && (
Details
{e.sub}
)}
)}
{canDelete && (
)}
{actions.map((a, i) => (
a.primary ? (
) : (
)
))}
setDragType(type) : undefined}
onDragEnd={draggable ? () => { setDragType(null); setOverType(null); } : undefined}
onDragOver={draggable ? (e) => { e.preventDefault(); if (overType !== type) setOverType(type); } : undefined}
onDrop={draggable ? (e) => { e.preventDefault(); onDrop(type); } : undefined}
style={{ borderRadius: 14, marginBottom: 16, background: "rgba(242,237,228,0.04)", overflow: "hidden",
border: (overType === type && dragType && dragType !== type) ? `1.5px dashed ${accent}` : (pinned ? `1.5px solid ${accent}` : "1px solid rgba(242,237,228,0.1)"),
opacity: dragType === type ? 0.5 : 1 }}>
{draggable && ⠿}
{m.kicker}{pinned ? " · pinned" : ""}
{m.hero}
{m.unit ? {m.unit} : null}
{m.meta && m.meta.length ? (
{m.meta.filter(Boolean).map((s, i) => {i > 0 && ·}{s})}
) : null}
{m.caption ?
{m.caption}
: null}
{["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][new Date().getDay()]}.
Your stack · pin, drag, or choose cards
{menuOpen && (
<>
setMenuOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 50 }} />
Show on home
{SHAPE_CARD_TYPES.map(type => {
const on = layout.order.includes(type);
return (
);
})}
)}
{ordered.length === 0 &&
No cards. Tap Cards ▾ to choose what to show.
}
{ordered.map(card)}
);
}
function shapeCardBtn(color) { return { width: 28, height: 28, borderRadius: 7, border: 0, background: "transparent", color, fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 800, cursor: "pointer", lineHeight: 1 }; }
Object.assign(window, { ShapeHomeCards });