// Header.jsx — top bar with logo, kid name, progress
// BadgeRail.jsx — badge row under progress
function Header({ kidName, onEditName, total, seen, theme, onToggleTheme, auth, onSignIn, onSignOut }) {
const pct = total > 0 ? Math.round((seen / total) * 100) : 0;
const [showSignInInfo, setShowSignInInfo] = React.useState(false);
const infoRef = React.useRef(null);
// Close popover on outside click / Escape
React.useEffect(() => {
if (!showSignInInfo) return;
const onDown = (e) => {
if (infoRef.current && !infoRef.current.contains(e.target)) setShowSignInInfo(false);
};
const onKey = (e) => { if (e.key === 'Escape') setShowSignInInfo(false); };
document.addEventListener('mousedown', onDown);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onDown);
document.removeEventListener('keydown', onKey);
};
}, [showSignInInfo]);
return (
Stars we have seen
onEditName(e.currentTarget.textContent.trim() || 'Observer')}
className="header__name"
>{kidName} · FIELD LOG
{seen}/{total}
{pct}% OF THE CATALOG SEEN
{auth?.signedIn ? (
) : (
{showSignInInfo && (
WHY SIGN IN?
Save your progress across sessions
Signing in syncs your field log — every observation, note and earned badge —
to your account, so you can pick up on another device or come back after
clearing your browser without losing a single star.
Your log is stored privately to your account.
Works across phone, tablet and desktop.
Skip it and everything stays local to this browser.
)}
)}
);
}
function BadgeRail({ badges, onOpen }) {
return (