// Anna's Wall — DESKTOP. Two-pane reader for a normal desktop browser. // Reuses canonical kit primitives (H, HCard, HAnnaAvatar, HealifyMark, HChevron, // HPrimaryButton) + Wall components (wall-components.jsx) + detail sub-parts from // wall-screens.jsx (WallDetailHero, VoicePlayerBar, WallReactionBar, WallCitations). // // Layout: top app bar (logo · nav · search · notifications · account) // └ body: post-list pane (fixed) + detail reading pane (fluid), each scrolls. const { useState: useS, useRef: useR, useEffect: useE, useMemo: useM, useCallback: useC } = React; const PAGE_SIZE_D = 4; // ════════════════════════════════════════════════════════════════════════ // Store — fakes wall.service with latency (mirrors the mobile prototype). // ════════════════════════════════════════════════════════════════════════ function useWallStoreD(feedState, forceReactError, onToast) { const seed = () => WALL_POSTS.map(p => ({ ...p, reactions: { ...p.reactions } })); const [posts, setPosts] = useS([]); const [userReactions, setUserReactions] = useS({}); const [loading, setLoading] = useS(true); const [refreshing, setRefreshing] = useS(false); const [loadingMore, setLoadingMore] = useS(false); const [error, setError] = useS(false); const [hasMore, setHasMore] = useS(true); const timers = useR([]); const after = (ms, fn) => { const id = setTimeout(fn, ms); timers.current.push(id); }; useE(() => { timers.current.forEach(clearTimeout); timers.current = []; setUserReactions({}); if (feedState === 'loaded') { setLoading(false); setError(false); setRefreshing(false); setPosts(seed()); setHasMore(false); } else if (feedState === 'loading') { setLoading(true); setError(false); setPosts([]); setHasMore(true); } else if (feedState === 'empty') { setLoading(true); setError(false); setPosts([]); setHasMore(false); after(900, () => { setLoading(false); setPosts([]); }); } else if (feedState === 'error') { setLoading(true); setError(false); setPosts([]); setHasMore(false); after(850, () => { setLoading(false); setError(true); }); } else { setLoading(true); setError(false); setPosts([]); setHasMore(true); after(950, () => { setLoading(false); setPosts(seed().slice(0, PAGE_SIZE_D)); setHasMore(true); }); } return () => { timers.current.forEach(clearTimeout); timers.current = []; }; }, [feedState]); const refresh = useC(() => { if (refreshing) return; setRefreshing(true); setError(false); after(800, () => { setRefreshing(false); if (feedState === 'empty') { setPosts([]); setHasMore(false); } else if (feedState === 'error') { setError(true); } else { setPosts(seed().slice(0, PAGE_SIZE_D)); setHasMore(true); } }); }, [refreshing, feedState]); const loadMore = useC(() => { setLoadingMore(true); after(700, () => { setLoadingMore(false); setPosts(prev => { const all = seed(); const next = all.slice(prev.length, prev.length + PAGE_SIZE_D); const merged = [...prev, ...next.filter(n => !prev.some(p => p.id === n.id))]; setHasMore(merged.length < all.length); return merged; }); }); }, []); const markRead = useC((postId) => { setPosts(prev => prev.map(p => p.id === postId ? { ...p, readAt: new Date().toISOString() } : p)); }, []); const react = useC((postId, key) => { const prevReaction = userReactions[postId]; let snapPosts, snapRx; setPosts(prev => { snapPosts = prev; return prev.map(p => { if (p.id !== postId) return p; const r = { ...p.reactions }; if (prevReaction === key) r[key] = Math.max(0, r[key] - 1); else { if (prevReaction) r[prevReaction] = Math.max(0, r[prevReaction] - 1); r[key] = r[key] + 1; } return { ...p, reactions: r }; }); }); setUserReactions(prev => { snapRx = prev; const n = { ...prev }; if (prevReaction === key) delete n[postId]; else n[postId] = key; return n; }); if (forceReactError) setTimeout(() => { setPosts(snapPosts); setUserReactions(snapRx); onToast && onToast("Couldn't save your reaction"); }, 450); }, [userReactions, forceReactError, onToast]); return { posts, userReactions, loading, refreshing, loadingMore, error, hasMore, refresh, loadMore, markRead, react }; } // ════════════════════════════════════════════════════════════════════════ // Top app bar // ════════════════════════════════════════════════════════════════════════ function DeskNavItem({ label, active, onClick }) { return ( ); } function DeskTopBar({ activeNav, onNav, unread, notifOpen, setNotifOpen, latestPost, onOpenNotif, onSimulate }) { return (
{/* brand */}
Healify
{/* primary nav */}
{/* search */}
Search your wall
{/* notifications (desktop deep-link demo) */}
{notifOpen && ( setNotifOpen(false)} /> )}
{/* account */}
K
); } function NotifPanel({ latestPost, unread, onOpenNotif, onSimulate, onClose }) { return ( <>
Notifications {unread} unread
{latestPost ? (
{ onOpenNotif(latestPost.id); onClose(); }} style={{ display: 'flex', gap: 11, padding: '12px 16px', cursor: 'pointer', borderTop: '0.5px solid ' + H.border, background: latestPost.readAt === null ? 'linear-gradient(180deg, rgba(255,244,240,0.6), #fff)' : '#fff', }}>
New insight from Anna
{latestPost.caption}
{relativeTime(latestPost.createdAt)}
{latestPost.readAt === null && }
) : (
No notifications yet.
)}
); } // ════════════════════════════════════════════════════════════════════════ // List pane // ════════════════════════════════════════════════════════════════════════ function DeskListItem({ post, active, selected, userReaction, unreadStyle, density, onSelect }) { const p = pillarOf(post); const unread = post.readAt === null; const compact = density === 'compact'; const tint = unread && unreadStyle === 'tint'; const accent = unread && unreadStyle === 'accent'; const total = Object.values(post.reactions).reduce((a, b) => a + b, 0); return ( ); } function DeskListSkeleton() { const Bar = ({ w, h = 12, r = 6, mt = 0 }) =>
; return (
); } function DeskListPane({ store, settings, selectedId, onSelect }) { const { posts, loading, error, refreshing, loadingMore, hasMore, refresh, loadMore, userReactions } = store; const scrollRef = useR(null); const unread = posts.filter(p => p.readAt === null).length; const onScroll = () => { const el = scrollRef.current; if (!el || loadingMore || !hasMore || loading || error) return; if (el.scrollHeight - (el.scrollTop + el.clientHeight) < el.clientHeight * 0.35) loadMore(); }; // keep the selected row visible when navigating via keyboard (no scrollIntoView) useE(() => { const el = scrollRef.current; if (!el || !selectedId) return; const item = el.querySelector('[data-post-id="' + selectedId + '"]'); if (!item) return; const ir = item.getBoundingClientRect(), cr = el.getBoundingClientRect(); if (ir.top < cr.top + 8) el.scrollTop -= (cr.top + 8 - ir.top); else if (ir.bottom > cr.bottom - 8) el.scrollTop += (ir.bottom - (cr.bottom - 8)); }, [selectedId]); return ( ); } // ════════════════════════════════════════════════════════════════════════ // Detail reading pane // ════════════════════════════════════════════════════════════════════════ function DeskDetailPane({ post, store, onAskAnna }) { const [toast, setToast] = useS(null); const scrollRef = useR(null); useE(() => { if (post && post.readAt === null) store.markRead(post.id); }, [post && post.id]); // reset reading position when switching posts useE(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [post && post.id]); if (!post) { return (
Select an insight
Pick a post from your wall to read Anna's full note, sources, and react.
); } const p = pillarOf(post); const share = () => { setToast('Link copied to clipboard'); setTimeout(() => setToast(null), 1800); }; return (
{/* sticky action header */}
{/* article */}

{post.caption}

{/* byline */}
Anna
Anna
Your AI health coach · {relativeTime(post.createdAt)}
{post.mediaUrl &&
}
{post.annaCommentary.split('\n').filter(Boolean).map((para, i) => (

{para}

))}
{/* reactions */}
How does this land?
{post.citationUrls && post.citationUrls.length > 0 && (
)}
Anna
Have a question about this?
Anna can go deeper on anything in this note.
For educational purposes only. Not medical advice. Anna's notes draw on peer-reviewed literature and your own data.
{toast && (
{toast}
)}
); } // ════════════════════════════════════════════════════════════════════════ // Mobile collapse — reuses the canonical mobile WallScreen / PostDetailScreen // (from wall-screens.jsx) full-bleed, with a compact bottom tab bar. Shares the // SAME store instance so read-state + reactions persist across a resize. // ════════════════════════════════════════════════════════════════════════ function MobileTabBar({ active, unread, onSelect }) { const Icon = ({ k, on }) => { const c = on ? 'var(--brand-orange-vibey)' : H.fg2; const sw = on ? 2.2 : 1.8; const common = { width: 23, height: 23, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (k === 'home') return ; if (k === 'fitness') return ; if (k === 'wall') return ; if (k === 'menu') return ; return null; }; const Tab = ({ k }) => { const on = active === k; return ( ); }; return (
); } function MobileChatStub({ onBack }) { return (
Anna
Chat with Anna
The full Anna chat lives in the main app. This view focuses on the Wall.
); } function WallMobileApp({ store, settings }) { const [stack, setStack] = useS([{ name: 'wall', params: {} }]); const top = stack[stack.length - 1]; const push = (name, params = {}) => setStack(s => [...s, { name, params }]); const pop = () => setStack(s => s.length > 1 ? s.slice(0, -1) : s); const navigate = (route, params = {}) => { if (route === 'wall') { setStack([{ name: 'wall', params: {} }]); return; } push(route, params); }; const unread = store.posts.filter(p => p.readAt === null).length; const screen = top.name; const hideTab = screen === 'post-detail' || screen === 'chat'; return (
{screen === 'wall' && } {screen === 'post-detail' && } {screen === 'chat' && }
{!hideTab && { if (k === 'wall') setStack([{ name: 'wall', params: {} }]); else if (k === 'chat') push('chat'); }} />}
); } Object.assign(window, { useWallStoreD, DeskTopBar, NotifPanel, DeskNavItem, DeskListItem, DeskListSkeleton, DeskListPane, DeskDetailPane, MobileTabBar, MobileChatStub, WallMobileApp, });