// Anna's Wall — screens: WallScreen (feed) + PostDetailScreen.
// Requires components.jsx, wall-data.jsx, wall-components.jsx loaded first.
const { useState: useStateW, useRef: useRefW, useEffect: useEffectW, useCallback: useCbW } = React;
// ── Recency grouping (brand ALL-CAPS section rhythm) ────────────────────────
function groupByRecency(posts) {
const now = Date.now();
const buckets = [
{ key: 'today', label: 'Today', items: [] },
{ key: 'week', label: 'This week', items: [] },
{ key: 'earlier', label: 'Earlier', items: [] },
];
posts.forEach(p => {
const h = (now - new Date(p.createdAt).getTime()) / 3600000;
if (h < 24) buckets[0].items.push(p);
else if (h < 24 * 7) buckets[1].items.push(p);
else buckets[2].items.push(p);
});
return buckets.filter(b => b.items.length);
}
function WallGroupLabel({ children }) {
return (
{children}
);
}
// ── Feed header ──────────────────────────────────────────────────────────────
function WallHeader({ unreadCount }) {
return (
Your Wall
Curated by Anna · twice a week
{unreadCount > 0 && (
{unreadCount} new
)}
);
}
// ── WallScreen ───────────────────────────────────────────────────────────────
function WallScreen({ onNavigate, store, settings }) {
const { posts, loading, refreshing, loadingMore, error, hasMore, refresh, loadMore, userReactions } = store;
const scrollRef = useRefW(null);
const [pull, setPull] = useStateW(0); // current pull distance
const dragRef = useRefW({ active: false, startY: 0 });
const unreadCount = posts.filter(p => p.readAt === null).length;
// infinite scroll
const onScroll = () => {
const el = scrollRef.current;
if (!el || loadingMore || !hasMore || loading || error) return;
const remaining = el.scrollHeight - (el.scrollTop + el.clientHeight);
if (remaining < el.clientHeight * 0.3) loadMore();
};
// pull-to-refresh (pointer based; works for touch + mouse drag)
const startDrag = (y) => {
const el = scrollRef.current;
if (el && el.scrollTop <= 0 && !refreshing) { dragRef.current = { active: true, startY: y }; }
};
const moveDrag = (y, e) => {
if (!dragRef.current.active) return;
const dist = y - dragRef.current.startY;
if (dist > 0) {
if (e && e.cancelable) e.preventDefault();
setPull(Math.min(90, dist * 0.55));
} else { setPull(0); }
};
const endDrag = () => {
if (!dragRef.current.active) return;
dragRef.current.active = false;
if (pull > 52) refresh();
setPull(0);
};
const ptrThreshold = pull > 52;
return (
startDrag(e.touches[0].clientY)}
onTouchMove={(e) => moveDrag(e.touches[0].clientY, e)}
onTouchEnd={endDrag}
onMouseDown={(e) => startDrag(e.clientY)}
onMouseMove={(e) => dragRef.current.active && moveDrag(e.clientY, e)}
onMouseUp={endDrag}
onMouseLeave={endDrag}
style={{ flex: 1, overflowY: 'auto', padding: '0 20px 150px' }}
>
{/* pull-to-refresh indicator */}
{(pull > 0 || refreshing) && (
)}
{loading ? (
{[0, 1, 2].map(i => )}
) : error ? (
) : posts.length === 0 ? (
) : (
{(() => { let gi = 0; return groupByRecency(posts).map(group => (
{group.label}
{group.items.map(post => {
const delay = Math.min(gi++, 7) * 45;
return (
onNavigate('post-detail', { postId: post.id })}
/>
);
})}
)); })()}
{(loadingMore || !hasMore) &&
}
For educational purposes only. Not medical advice. Anna's notes draw on peer-reviewed literature and your own data.
)}
);
}
// ── Interactive reaction bar (detail) ────────────────────────────────────────
function WallReactionBar({ post, userReaction, onReact }) {
const [popKey, setPopKey] = useStateW(null);
const tap = (key) => {
setPopKey(key);
setTimeout(() => setPopKey(null), 380);
onReact(post.id, key);
};
return (
{REACTIONS.map(r => {
const mine = userReaction === r.key;
const count = post.reactions[r.key];
return (
);
})}
);
}
// ── Citations ────────────────────────────────────────────────────────────────
function hostOf(url) { try { return new URL(url).hostname.replace('www.', ''); } catch { return url; } }
function WallCitations({ urls }) {
if (!urls || urls.length === 0) return null;
return (
);
}
// ── Detail hero ──────────────────────────────────────────────────────────────
function WallDetailHero({ post }) {
const p = pillarOf(post);
if (!post.mediaUrl) return null;
const D = CHART_DATA[post.mediaUrl];
return (
{post.type === 'CHART' && (
)}
{post.type === 'ACHIEVEMENT' &&
}
{post.type === 'VOICE_NOTE' &&
}
{post.type === 'CHART' && D && (
)}
{post.type === 'VOICE_NOTE' &&
}
);
}
function VoicePlayerBar({ color }) {
const [playing, setPlaying] = useStateW(false);
const [t, setT] = useStateW(0);
useEffectW(() => {
if (!playing) return;
const id = setInterval(() => setT(v => (v >= 100 ? (clearInterval(id), setPlaying(false), 0) : v + 1.6)), 80);
return () => clearInterval(id);
}, [playing]);
const total = 96; const cur = Math.round((t / 100) * total);
const fmt = s => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
return (
{fmt(cur)} / {fmt(total)}
);
}
// ── PostDetailScreen ─────────────────────────────────────────────────────────
function PostDetailScreen({ onNavigate, onBack, postId, store, settings }) {
const post = store.posts.find(p => p.id === postId);
const [toast, setToast] = useStateW(null);
// mark read on open
useEffectW(() => { if (post && post.readAt === null) store.markRead(post.id); }, [post && post.id]);
if (!post) {
return (
This post is no longer available.
);
}
const p = pillarOf(post);
const share = () => {
setToast('Shared with Healify ❤️');
setTimeout(() => setToast(null), 1900);
};
const ShareBtn = (
);
return (
{post.caption}
{post.annaCommentary.split('\n').filter(Boolean).map((para, i) => (
{para}
))}
{post.citationUrls && post.citationUrls.length > 0 && (
)}
{/* reaction bar */}
{/* byline */}
Anna
Your AI health coach · {relativeTime(post.createdAt)}
onNavigate('chat')} role="button" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '8px 13px', borderRadius: 999, background: H.bgSecondary, cursor: 'pointer' }}>
Ask Anna
{/* share toast */}
{toast && (
)}
);
}
Object.assign(window, { WallHeader, WallScreen, WallReactionBar, WallCitations, WallDetailHero, VoicePlayerBar, PostDetailScreen, hostOf });