// Anna's Wall — components. Requires components.jsx + wall-data.jsx loaded first. // Globals used from the kit: H, HCard, HAnnaAvatar, HPrimaryButton, HChevron. // ── helpers ────────────────────────────────────────────────────────────── function pillarOf(post) { return PILLARS[post.pillarTag] || PILLARS.physical; } // hex -> rgba function rgba(hex, a) { const h = hex.replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`; } // ── Pillar chip ──────────────────────────────────────────────────────────── function WallPillarChip({ tag }) { const p = PILLARS[tag]; if (!p) return null; return ( {p.label} ); } // ── Type badge (subtle, top-right) ─────────────────────────────────────────── function WallTypeBadge({ type }) { const meta = TYPE_META[type] || { label: type }; const icon = { CHART: , INSIGHT: , VOICE_NOTE: , ACHIEVEMENT: , }[type]; return ( {icon} {meta.label} ); } // ── Mini line chart (sparkline + full) ─────────────────────────────────────── const CHART_DATA = { 'chart://resting-hr': { pts: [62, 61, 63, 60, 59, 58, 57], unit: 'bpm', kind: 'line', last: '57 bpm' }, 'chart://weight-trend': { pts: [70.4, 70.1, 69.6, 69.5, 69.4, 69.5, 69.4], unit: 'kg', kind: 'line', last: '69.4 kg' }, }; function WallLineChart({ src, color, height = 150, pad = 14, showAxis = true }) { const d = CHART_DATA[src] || CHART_DATA['chart://resting-hr']; const pts = d.pts; const W = 320, H_ = height; const min = Math.min(...pts), max = Math.max(...pts); const range = (max - min) || 1; const x = i => pad + (i / (pts.length - 1)) * (W - pad * 2); const y = v => pad + (1 - (v - min) / range) * (H_ - pad * 2); const linePts = pts.map((v, i) => `${x(i)},${y(v)}`).join(' '); const area = `M ${x(0)},${H_ - pad} L ` + pts.map((v, i) => `${x(i)},${y(v)}`).join(' L ') + ` L ${x(pts.length - 1)},${H_ - pad} Z`; const gid = 'wlc-' + src.replace(/[^a-z]/gi, ''); return ( {showAxis && [0.25, 0.5, 0.75].map(f => ( ))} ); } // ── Achievement badge art ───────────────────────────────────────────────── function WallBadgeArt({ color, size = 'lg' }) { const big = size === 'lg'; const s = big ? 96 : 44; return (
); } // ── Voice waveform / player ────────────────────────────────────────────── function WallVoiceArt({ color, full = false }) { const bars = full ? 38 : 9; const heights = Array.from({ length: bars }, (_, i) => 0.28 + 0.72 * Math.abs(Math.sin(i * 1.3) * Math.cos(i * 0.4))); return (
{heights.map((h, i) => ( ))}
); } // ── Card media thumbnail (64×64) ─────────────────────────────────────────── function WallMiniMedia({ post }) { const p = pillarOf(post); if (!post.mediaUrl) return null; let inner; if (post.type === 'CHART') inner = (
); else if (post.type === 'ACHIEVEMENT') inner = ; else if (post.type === 'VOICE_NOTE') inner = ; return (
{inner} {post.type === 'VOICE_NOTE' && (
)}
); } // ── Reaction summary (card, read-only) ────────────────────────────────────── function WallReactionSummary({ reactions, userReaction }) { const shown = REACTIONS.filter(r => reactions[r.key] > 0 || r.key === userReaction); const total = Object.values(reactions).reduce((a, b) => a + b, 0); if (total === 0) return ( Be the first to react ); return (
{shown.slice(0, 4).map(r => { const mine = r.key === userReaction; return ( {r.emoji} {reactions[r.key]} ); })}
); } // ── Unread dot ────────────────────────────────────────────────────────────── function UnreadDot() { return ; } // ── PostCard ───────────────────────────────────────────────────────────────── function WallPostCard({ post, onOpen, userReaction, unreadStyle = 'tint', density = 'comfortable' }) { const p = pillarOf(post); const unread = post.readAt === null; const compact = density === 'compact'; const pad = compact ? 14 : 16; const preview = (post.annaCommentary || '').replace(/\n+/g, ' '); const tint = unread && unreadStyle === 'tint'; const accent = unread && unreadStyle === 'accent'; return ( {accent && }
{/* byline row */}
Anna {unread && unreadStyle !== 'none' && }
{/* content row */}
{post.caption}
{!compact && (
{preview}
)}
{post.mediaUrl && }
{/* footer */}
{relativeTime(post.createdAt)}
); } // ── Skeleton ─────────────────────────────────────────────────────────────── function WallPostCardSkeleton() { const Bar = ({ w, h = 12, r = 6, mt = 0 }) => (
); return (
); } // ── Empty state ────────────────────────────────────────────────────────────── function WallEmptyState() { return (
Anna
Anna is preparing your first health insight
She reviews your data twice a week and writes you a personal note. Your wall fills in as the insights land — no action needed.
Next insight expected in ~2 days
); } // ── Error state ────────────────────────────────────────────────────────────── function WallErrorState({ onRetry }) { return (
Couldn't load your wall
We had trouble reaching Anna just now. Check your connection and try again.
}>Try again
); } // ── Loading footer (infinite scroll) ──────────────────────────────────────── function WallLoadingFooter({ done }) { if (done) return (
You're all caught up
); return (
); } Object.assign(window, { pillarOf, rgba, WallPillarChip, WallTypeBadge, WallLineChart, WallBadgeArt, WallVoiceArt, WallMiniMedia, WallReactionSummary, UnreadDot, WallPostCard, WallPostCardSkeleton, WallEmptyState, WallErrorState, WallLoadingFooter, CHART_DATA, });