// ── Meditate — together (live) ──────────────────────────────────────────── // Wires the EXISTING design components (timeline strip, streak grid, chat) to // a real Supabase backend: email+password auth (persistent), live check-ins & // chat, and editable profile name + photo. No UI reinvented — the habit screen // is the prototype's HabitDetailScreen, fed real data. const CFG = window.HABIT_CONFIG; const ACCENT = (CFG.HABIT && CFG.HABIT.accent) || GREEN; const sb = window.supabase.createClient(CFG.SUPABASE_URL, CFG.SUPABASE_ANON_KEY, { auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: false }, realtime: { params: { eventsPerSecond: 5 } }, }); // Expose the authed client so the DEV feedback toolbar can send bundles with the // user's session (read-only handle; no effect on app behaviour). try { window.__APP_SB = sb; } catch (_) {} // ── Install-as-app: capture the browser's install event as EARLY as possible ─ // `beforeinstallprompt` can fire before React mounts, so we stash the event at // module scope and let the Home banner pick it up (via a custom event). On // Android/Chrome this enables the native install; elsewhere (iOS/Safari) the // event never fires and the banner shows manual instructions instead. let __deferredInstallPrompt = null; try { window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); __deferredInstallPrompt = e; try { window.dispatchEvent(new Event('habitbuddy:installable')); } catch (_) {} }); window.addEventListener('appinstalled', () => { __deferredInstallPrompt = null; try { localStorage.setItem('habitbuddy:install-dismissed', '1'); } catch (_) {} try { window.dispatchEvent(new Event('habitbuddy:installed')); } catch (_) {} }); } catch (_) {} // True when the app is already running as an installed PWA (so we hide the banner). function isStandaloneApp() { try { return (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone === true; } catch (_) { return false; } } // ── helpers copied verbatim from screen.jsx so behaviour matches the design ── // CADENCE CONVENTION (canonical, whole app): weekdays are Mon=0,Tue=1,…,Sun=6. // This matches dates.jsx DAY_LETTER (['M','T','W','T','F','S','S'] // Mon..Sun), // cells.jsx buildSetDayCells (mon = (getDay()+6)%7), and buildWeeklyCells // (targetDate = weekStart+weekday, weekStart is Monday). We STORE // groups.cadence_days and groups.cadence_target_day in this same Mon=0 order, // so create → store → grid render → this header label all agree. (The old // 001_groups.sql comment "0=Sun..6=Sat" is stale; the app uses Mon=0.) const CADENCE_WD = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; // Map a group row's DB cadence columns → the cadence object the grid/timeline expect. function cadenceFromGroup(g) { switch (g && g.cadence_kind) { case 'set-days': return { kind: 'set-days', weekdays: g.cadence_days || [] }; case 'n-per-week': return { kind: 'n-per-week', n: g.cadence_n || 1 }; case 'weekly': return { kind: 'weekly', weekday: g.cadence_target_day || 0 }; default: return { kind: 'daily' }; } } function cadenceLabel(c) { if (c.kind === 'daily') return 'Daily'; if (c.kind === 'weekly') return 'Weekly · ' + CADENCE_WD[c.weekday || 0]; if (c.kind === 'n-per-week') return `${c.n}× per week`; if (c.kind === 'set-days') return (c.weekdays || []).map((d) => CADENCE_WD[d]).join(', '); return ''; } function markActionLabel(cadence, done) { return done ? 'Done for today' : 'Mark today as done'; } // ── streak (canonical) ────────────────────────────────────────────────────── // A member's CURRENT streak = consecutive scheduled occurrences (cells) they // completed, counting back from the most recent one. Every cell buildCells // produces IS a scheduled occurrence (daily → each day; set-days → each listed // day; weekly / n-per-week → each week), so an occurrence with no completion is // a MISS and BREAKS the streak — it must NOT be skipped (the old code skipped // null statuses, which silently jumped over missed days and inflated the streak // e.g. showing "2-day streak" when recent days weren't done). Today (or the // current week) that isn't done yet is "pending": it neither counts nor breaks. function computeMemberStreak(cells, member) { let streak = 0, started = false; for (let i = cells.length - 1; i >= 0; i--) { const c = cells[i]; if (c.isFuture) continue; const status = c.getStatus(member); // 'done' | 'miss' | 'today' | 'future' | null if (!started && c.isToday && status !== 'done') continue; // pending today/this-week started = true; if (status === 'done') streak++; else break; // 'miss', null (missed scheduled day), or anything not done ends it } return streak; } // ── web push helpers ─────────────────────────────────────────────────────── function urlBase64ToUint8Array(base64String) { const padding = '='.repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); const raw = atob(base64); const arr = new Uint8Array(raw.length); for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i); return arr; } async function enablePush(uid) { if (!('serviceWorker' in navigator) || !('PushManager' in window)) throw new Error('Push isn’t supported on this browser.'); const perm = await Notification.requestPermission(); if (perm !== 'granted') throw new Error('Notifications are blocked — allow them in your browser’s site settings.'); const reg = await navigator.serviceWorker.ready; let sub = await reg.pushManager.getSubscription(); if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(CFG.VAPID_PUBLIC) }); const { error } = await sb.from('push_subscriptions').upsert({ endpoint: sub.endpoint, user_id: uid, subscription: sub.toJSON() }, { onConflict: 'endpoint' }); if (error) throw error; // Instant confirmation so you can see notifications actually display. try { await reg.showNotification('Nakama', { body: 'Notifications are on ✓', icon: 'icons/icon-192.png', badge: 'icons/icon-192.png' }); } catch (_) {} } // ── back-gesture handling ─────────────────────────────────────────────────── // When a full-screen overlay (profile settings, person history, a story) is // open, push a history entry so the phone's back gesture / swipe closes THAT // overlay instead of exiting the app. All closes go through history.back() → // popstate → onClose. // // IMPORTANT (fixes the "story X returns to the wrong place" bug): overlays can // STACK — e.g. a story opened from a person's timeline sits on top of that // timeline. Every open overlay registers a popstate listener, and a single // browser Back fires ALL of them at once. The old code closed every overlay on // one Back, so closing the story also closed the timeline underneath and dumped // you back to the habit/chat screen. We keep a shared stack and let ONLY the // top-most overlay respond to a given Back — so each Back unwinds exactly one // level, and closing the story returns to whatever it was opened from. const __overlayStack = []; function useBackClose(open, onClose) { React.useEffect(() => { if (!open) return; const entry = { onClose }; __overlayStack.push(entry); window.history.pushState({ mtOverlay: true }, ''); const onPop = () => { // Only the current top overlay closes; anything beneath stays put. if (__overlayStack[__overlayStack.length - 1] !== entry) return; __overlayStack.pop(); onClose(); }; window.addEventListener('popstate', onPop); return () => { window.removeEventListener('popstate', onPop); const idx = __overlayStack.indexOf(entry); if (idx !== -1) __overlayStack.splice(idx, 1); }; }, [open]); } // ── header (from screen.jsx, back button dropped for the single-screen POC) ── function Header({ habitName, habitIcon, cadenceLabel, memberCount, accent, onMore, onBack }) { return (
{onBack ? ( ) :
} {habitIcon && ( )}
{habitName}
{cadenceLabel} · {memberCount} member{memberCount === 1 ? '' : 's'}
); } // ── the live habit screen (data → the design's grids + chat) ──────────────── function LiveHabitScreen({ uid, gid, group, roster, onOpenSettings, onReloadProfiles, onBack }) { const today = React.useMemo(() => new Date(), []); const todayStr = ymd(today); const habit = group; const accent = group.accent || ACCENT; const cadence = React.useMemo(() => cadenceFromGroup(group), [group]); const [checkins, setCheckins] = React.useState(null); const [msgs, setMsgs] = React.useState(null); const [goals, setGoals] = React.useState({}); // user_id -> goal text (C2) const [storyViews, setStoryViews] = React.useState([]); // my seen stories (Phase 2 ring) const [collapsed, setCollapsed] = React.useState(true); const [justMarked, setJustMarked] = React.useState(false); // Stories (Phase 1): signed thumbnail URLs, the check-in sheet, the viewer. const [mediaUrls, setMediaUrls] = React.useState({}); // media_path -> signed URL const [checkinSheet, setCheckinSheet] = React.useState(null); // { day, done } const [story, setStory] = React.useState(null); // full-screen viewer payload const loadCheckins = React.useCallback(async () => { const since = ymd(addDays(today, -160)); const { data } = await sb.from('checkins').select('user_id,day,note,done,created_at,media_path,media_type').eq('group_id', gid).gte('day', since); setCheckins(data || []); }, [today, gid]); const loadMsgs = React.useCallback(async () => { const { data } = await sb.from('messages').select('*').eq('group_id', gid).eq('kind', 'user').order('created_at', { ascending: true }).limit(1000); setMsgs(data || []); }, [gid]); const loadGoals = React.useCallback(async () => { const { data } = await sb.from('group_members').select('user_id, goal').eq('group_id', gid); const map = {}; (data || []).forEach((r) => { if (r.goal) map[r.user_id] = r.goal; }); setGoals(map); }, [gid]); // Which stories I've already seen (one query; RLS scopes rows to viewer_id=me). // Drives the "unseen story" pulse on the did-it ring. const loadStoryViews = React.useCallback(async () => { const { data } = await sb.from('story_views').select('subject_user, day').eq('group_id', gid); setStoryViews(data || []); }, [gid]); React.useEffect(() => { loadCheckins(); loadMsgs(); loadGoals(); loadStoryViews(); const ch = sb.channel('room-' + gid) .on('postgres_changes', { event: '*', schema: 'public', table: 'checkins', filter: 'group_id=eq.' + gid }, loadCheckins) .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: 'group_id=eq.' + gid }, (p) => { const r = p.new; setMsgs((prev) => (prev && prev.some((m) => m.id === r.id)) ? prev : [...(prev || []), { ...r, _fresh: true }]); }) .on('postgres_changes', { event: '*', schema: 'public', table: 'profiles' }, () => onReloadProfiles && onReloadProfiles()) .subscribe(); const onVis = () => { if (!document.hidden) { loadCheckins(); loadMsgs(); loadGoals(); loadStoryViews(); } }; document.addEventListener('visibilitychange', onVis); window.addEventListener('focus', onVis); return () => { sb.removeChannel(ch); document.removeEventListener('visibilitychange', onVis); window.removeEventListener('focus', onVis); }; }, [loadCheckins, loadMsgs, loadGoals, loadStoryViews, onReloadProfiles]); // Batch-sign the media paths so chat blocks + history rows can show thumbnails // without an async call per leaf. Private bucket → RLS lets a member read its // group's media; the signed URL is a short-lived read grant. React.useEffect(() => { const paths = [...new Set((checkins || []).filter((c) => c.media_path).map((c) => c.media_path))]; if (!paths.length) { setMediaUrls((prev) => (Object.keys(prev).length ? {} : prev)); return; } let alive = true; sb.storage.from('checkin-media').createSignedUrls(paths, 3600).then(({ data }) => { if (!alive || !data) return; const map = {}; data.forEach((d) => { if (d.signedUrl && !d.error) map[d.path] = d.signedUrl; }); setMediaUrls(map); }); return () => { alive = false; }; }, [checkins]); // Build the design's `members` shape from real profiles + check-ins. Each gets // a stable per-person colour (B5) and their personal goal (C2). const members = React.useMemo(() => roster.map((p, i) => { const entries = {}; (checkins || []).forEach((c) => { if (c.user_id === p.id) entries[c.day] = (c.done === false ? 'miss' : 'done'); }); if (i === 0 && !entries[todayStr]) entries[todayStr] = 'today'; return { id: i === 0 ? 'you' : p.id, name: p.name, variant: i, entries, color: i === 0 ? GREEN : colorForUser(p.id), goal: goals[p.id] || null }; }), [roster, checkins, todayStr, goals]); const cells = React.useMemo(() => buildCells({ today, cadence, daysBack: 160 }), [today, cadence]); // ── "Did it for the current period" green ring — cadence-based, LOCAL time ─── // The avatar ring is ALWAYS green (never the habit accent). It means "did it // for the current period" and stays green from the moment they check in until // the period resets at 00:00 in the USER'S LOCAL timezone (all dates here are // the client's own local Date). periodInfo describes that window as a half-open // range of local day-strings [startDay, resetDay): // • daily → green today only; resets 00:00 tomorrow. // • n-per-week → treated like daily (green the day you check in; resets // 00:00 tomorrow). Weekly progress is shown on Home. // • set-days → green from the scheduled day you did it until 00:00 of // the NEXT scheduled weekday (so it stays green through // the non-scheduled days in between). // • weekly (target) → like a 1-day set-days: green from the target weekday // until 00:00 of the next occurrence of that weekday. // A check-in on any day d with startDay <= d <= today counts as "did it this // period". The pulse (unseen-story ping) shares this exact lifetime. const periodInfo = React.useMemo(() => { const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()); const wdOf = (d) => (d.getDay() + 6) % 7; // Mon=0 … Sun=6 if (cadence.kind === 'set-days' || cadence.kind === 'weekly') { const wanted = cadence.kind === 'weekly' ? new Set([cadence.weekday || 0]) : new Set((cadence.weekdays && cadence.weekdays.length) ? cadence.weekdays : [0, 1, 2, 3, 4, 5, 6]); // most recent scheduled day on/before today = start of the current window let start = startOfToday; for (let i = 0; i <= 14; i++) { const d = addDays(startOfToday, -i); if (wanted.has(wdOf(d))) { start = d; break; } } // next scheduled day strictly after today = the 00:00 reset boundary let reset = addDays(startOfToday, 1); for (let i = 1; i <= 14; i++) { const d = addDays(startOfToday, i); if (wanted.has(wdOf(d))) { reset = d; break; } } return { active: true, startDay: ymd(start), resetDay: ymd(reset) }; } // daily & n-per-week → green today only, resets at 00:00 tomorrow. return { active: true, startDay: todayStr, resetDay: ymd(addDays(startOfToday, 1)) }; }, [cadence, today, todayStr]); // A check-in day is inside the current green window when it's on/after the // window start and not in the future. (resetDay > today always, so an upper // cap of "today" is exactly the half-open [startDay, resetDay) intersected with // the past — future check-ins never count.) const inGreenWindow = React.useCallback( (day) => !!day && day >= periodInfo.startDay && day <= todayStr, [periodInfo, todayStr]); // Set of "|" I've already viewed → the pulse turns off. const seenSet = React.useMemo(() => { const s = new Set(); (storyViews || []).forEach((v) => s.add(v.subject_user + '|' + v.day)); return s; }, [storyViews]); const enrichedMembers = members.map((m, i) => { const realUid = i === 0 ? uid : m.id; // member 0 is "you"; carry the real id const vals = Object.values(m.entries); const relevant = vals.filter((v) => v === 'done' || v === 'miss' || v === 'today'); const allDone = relevant.length > 0 && relevant.every((v) => v === 'done' || v === 'today'); const personalStreak = computeMemberStreak(cells, m); // did-it this period = a done (done !== false) check-in inside the green window. let didThisPeriod = false, hasStory = false, storyDay = null, pulse = false; if (periodInfo.active) { const mine = (checkins || []).filter((c) => c.user_id === realUid && c.done !== false && inGreenWindow(c.day)); didThisPeriod = mine.length > 0; // The story = the most recent in-window check-in that has media. const withMedia = mine.filter((c) => c.media_path).sort((a, b) => (a.day < b.day ? 1 : -1))[0]; if (withMedia) { hasStory = true; storyDay = withMedia.day; // Pulse for exactly the green lifetime: green + media + not yet seen. pulse = !seenSet.has(realUid + '|' + storyDay); } } return { ...m, realUid, allDone, personalStreak, didThisPeriod, hasStory, storyDay, pulse }; }); const allDoneByCell = React.useMemo(() => { const map = new Map(); for (const cell of cells) { const statuses = members.map((m) => cell.getStatus(m)); const anyRelevant = statuses.some((s) => s != null); map.set(cell.key, anyRelevant && statuses.every((s) => s === 'done')); } return map; }, [cells, members]); const streak = React.useMemo(() => { let s = 0, endIdx = -1; for (let i = cells.length - 1; i >= 0; i--) { const c = cells[i]; if (c.isFuture) continue; if (allDoneByCell.get(c.key)) { endIdx = i; break; } if (c.isToday) continue; break; } if (endIdx >= 0) for (let i = endIdx; i >= 0 && allDoneByCell.get(cells[i].key); i--) s++; return s; }, [cells, allDoneByCell]); const [selectedDay, setSelectedDay] = React.useState(null); const [historyMember, setHistoryMember] = React.useState(null); useBackClose(!!historyMember, () => setHistoryMember(null)); const isTodaySelected = selectedDay === todayStr; const todayDone = members[0] && members[0].entries[todayStr] === 'done'; // Tapping a day (or the streak badge) unfolds the timeline to the per-person // view; tapping the same day again folds it back. const selectDay = (d) => setSelectedDay((prev) => { if (prev === d) { setCollapsed(true); return null; } setCollapsed(false); return d; }); const prettyShort = (ds) => { const [y, m, d] = ds.split('-').map(Number); return `${['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m - 1]} ${d}`; }; // Mark/unmark a specific day for the current user (optionally with a note). // No chat spam — the "done" state is rendered from the check-in itself, so // undoing simply removes the block. // Set / clear a day's state for the current user. state ∈ 'done' | 'miss' | null. const setDayState = async (day, state, note) => { setJustMarked(true); setTimeout(() => setJustMarked(false), 800); if (state === null) { setCheckins((prev) => (prev || []).filter((c) => !(c.user_id === uid && c.day === day))); await sb.from('checkins').delete().eq('group_id', gid).eq('user_id', uid).eq('day', day); return; } const done = state === 'done'; const row = { group_id: gid, user_id: uid, day, done, note: note || null, created_at: new Date().toISOString() }; setCheckins((prev) => [...(prev || []).filter((c) => !(c.user_id === uid && c.day === day)), row]); await sb.from('checkins').upsert({ group_id: gid, user_id: uid, day, done, note: note || null }, { onConflict: 'group_id,user_id,day' }); }; const markDay = (day, note) => setDayState(day, 'done', note); // used by the expanded "today" circle // Stories: merge a check-in row saved by the CheckinSheet into local state // (realtime will also refresh). Preserve any existing media if the save didn't // include a new upload. const onCheckinSaved = (row) => { setJustMarked(true); setTimeout(() => setJustMarked(false), 800); setCheckins((prev) => { const arr = prev || []; const existing = arr.find((c) => c.user_id === row.user_id && c.day === row.day); const merged = { ...(existing || {}), ...row }; return [...arr.filter((c) => !(c.user_id === row.user_id && c.day === row.day)), merged]; }); }; // Open the full-screen story viewer for a given person+day (from a chat // thumbnail or a history row). No-op if that check-in has no media. const openStory = (subjectUser, day) => { const c = (checkins || []).find((x) => x.user_id === subjectUser && x.day === day); if (!c || !c.media_path) return; const isYou = subjectUser === uid; const mem = members.find((m) => (isYou ? m.id === 'you' : m.id === subjectUser)); setStory({ name: isYou ? 'You' : (mem ? mem.name : 'Someone'), variant: mem ? mem.variant : 0, color: isYou ? GREEN : (mem ? mem.color : GREEN), actionWord: group.action_word, done: c.done !== false, gid, subjectUser, day, dayLabel: day === todayStr ? 'Today' : prettyShort(day), createdAt: c.created_at, note: c.note || '', media_path: c.media_path, media_type: c.media_type, url: mediaUrls[c.media_path] || null, }); }; useBackClose(!!story, () => setStory(null)); // Tapping any member avatar (grid row OR chat sender): open the story viewer // ONLY if that avatar is currently PULSING (did-it + media + unseen + in-window). // Marks it seen → the ring stops pulsing. Otherwise (no story / already seen / // no media) fall back to their check-in history, as before. const handleAvatarTap = (m) => { if (m && m.pulse && m.hasStory && m.storyDay) openStory(m.realUid || (m.id === 'you' ? uid : m.id), m.storyDay); else setHistoryMember(m); }; // Per-message unseen-story check (chat blocks): true when THIS check-in has // media the current viewer hasn't seen yet AND it falls inside the current // green window — the SAME cadence-based rule the row/chat-avatar ring uses, // keyed to a specific day. Keeps the chat-avatar pulse consistent with the // unfolded-row avatar pulse. const storyUnseen = (subjectUser, day) => { if (!inGreenWindow(day)) return false; return !seenSet.has(subjectUser + '|' + day); }; // Story viewer → person timeline: tapping the name/avatar in the viewer header // closes the viewer and opens that person's PersonHistory. const openHistoryFromStory = () => { if (!story) return; const su = story.subjectUser; const isYou = su === uid; const mem = enrichedMembers.find((m) => (isYou ? m.id === 'you' : m.id === su)); setStory(null); if (mem) setHistoryMember(mem); }; // A story was just viewed → record it locally so the pulse stops immediately // (the DB upsert happens inside StoryViewer; this keeps the UI in sync now). const markStorySeen = (subjectUser, day) => { setStoryViews((prev) => (prev || []).some((v) => v.subject_user === subjectUser && v.day === day) ? prev : [...(prev || []), { subject_user: subjectUser, day }]); }; const sendMessage = async (text) => { const optimistic = { id: 'tmp' + Date.now(), group_id: gid, user_id: uid, text, kind: 'user', created_at: new Date().toISOString(), _fresh: true }; setMsgs((prev) => [...(prev || []), optimistic]); const { data } = await sb.from('messages').insert({ group_id: gid, user_id: uid, text }).select().single(); if (data) setMsgs((prev) => (prev || []).map((m) => m.id === optimistic.id ? data : m)); }; // Current record for the selected day. selState ∈ null (unset) | 'done' | 'miss'. const selRec = selectedDay ? (checkins || []).find((c) => c.user_id === uid && c.day === selectedDay) : null; const selState = !selRec ? null : (selRec.done === false ? 'miss' : 'done'); // Stories Phase 1: the bottom bar is ALWAYS plain chat now. Marking a day // done/not-done happens in the check-in sheet (opened from the strip buttons). const onComposerSend = async (text) => { if (text && text.trim()) await sendMessage(text.trim()); }; // Chat thread = messages + one block per check-in (green "done" or grey // "missed"), merged by time. Blocks come from the check-ins, so undo removes them. const chatMessages = React.useMemo(() => { const msgItems = (msgs || []).map((r) => ({ id: r.id, from: r.user_id === uid ? 'you' : r.user_id, text: r.text, kind: 'user', ts: new Date(r.created_at).getTime(), fresh: r._fresh })); const doneItems = (checkins || []).map((c) => ({ id: 'chk-' + c.user_id + '-' + c.day, from: c.user_id === uid ? 'you' : c.user_id, text: c.note || '', kind: c.done === false ? 'missed' : 'done', dayLabel: c.day === todayStr ? '' : prettyShort(c.day), ts: c.created_at ? new Date(c.created_at).getTime() : new Date(c.day + 'T12:00:00').getTime(), fresh: false, // Stories: carry media + identity so the block can show a thumbnail and open the viewer. media_path: c.media_path || null, media_type: c.media_type || null, day: c.day, subjectUser: c.user_id, })); return [...msgItems, ...doneItems].sort((a, b) => a.ts - b.ts); }, [msgs, checkins, uid, todayStr]); const loading = checkins === null || msgs === null; const dayWord = selectedDay === todayStr ? 'today' : (selectedDay ? prettyShort(selectedDay) : ''); return ( <>
{loading ? (
) : ( )} {selectedDay && !loading && (
{selState === null ? ( <> ) : ( )}
)}
{loading ?
: }
{historyMember && ( window.history.back()} mediaUrls={mediaUrls} onOpenStory={openStory} /> )} {checkinSheet && ( setCheckinSheet(null)} /> )} {story && window.history.back()} onSeen={markStorySeen} onOpenHistory={openHistoryFromStory} />} ); } // ── per-person history: every day as a row (status + note), newest first ──── function PersonHistory({ member, personUid, checkins, today, onClose, accent = ACCENT, mediaUrls = {}, onOpenStory, cadence }) { const DOW = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; const MON = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; const cad = cadence || { kind: 'daily' }; const isWeek = cad.kind === 'weekly' || cad.kind === 'n-per-week'; // The person's own entries (day -> 'done'|'miss') + per-day note/media records. const entries = {}, recByDay = {}; (checkins || []).forEach((c) => { if (c.user_id !== personUid) return; entries[c.day] = (c.done === false ? 'miss' : 'done'); recByDay[c.day] = { done: c.done !== false, note: c.note, media_path: c.media_path, media_type: c.media_type }; }); const personObj = { entries }; // Build the rows from the SAME cells the combined group timeline uses, so a // "done" row here is exactly a done cell there, non-scheduled days (weekends // for set-days / weekly) don't appear as misleading empty gaps, and the streak // (consecutive done cells) equals the count of consecutive done rows shown. // Fixes the "9-day streak but the rows don't show those days done" mismatch: // previously the streak counted cadence PERIODS (weeks) while the rows were raw // calendar days, so the two disagreed for weekly / n-per-week / set-days habits. const cells = buildCells({ today, cadence: cad, daysBack: 63 }); const rows = []; for (let i = cells.length - 1; i >= 0; i--) { const cell = cells[i]; if (cell.isFuture) continue; let status = cell.getStatus(personObj); // 'done' | 'miss' | 'today' | null if (cell.isToday && status !== 'done' && status !== 'miss') status = 'today'; else if (status == null) status = 'empty'; const kind = (cell.meta && cell.meta.kind) || 'day'; let label, sub = null, note = null, media = null, openDay = null; if (kind === 'day') { const ds = cell.meta.dateStr; const d = dateFromYmd(ds); label = cell.isToday ? 'Today' : `${DOW[d.getDay()]} · ${MON[d.getMonth()]} ${d.getDate()}`; const rec = recByDay[ds]; note = rec ? rec.note : null; if (rec && rec.media_path) media = { media_path: rec.media_path, media_type: rec.media_type }; openDay = ds; } else { // week / week-n cell — aggregate the person's in-week check-ins. const ws = cell.meta.weekStart; const weekDays = cell.meta.weekDateStrs || Array.from({ length: 7 }, (_, k) => ymd(addDays(ws, k))); const first = dateFromYmd(weekDays[0]); label = cell.isToday ? 'This week' : `Week of ${MON[first.getMonth()]} ${first.getDate()}`; if (kind === 'week-n') { const doneCnt = weekDays.reduce((a, ds) => a + (entries[ds] === 'done' ? 1 : 0), 0); sub = `${doneCnt} of ${cell.meta.n} this week`; } else { const last = dateFromYmd(weekDays[6]); sub = `${MON[first.getMonth()]} ${first.getDate()}–${MON[last.getMonth()]} ${last.getDate()}`; } // Surface the most recent in-week media + first note found. for (let k = weekDays.length - 1; k >= 0; k--) { const rec = recByDay[weekDays[k]]; if (rec && rec.media_path && !media) { media = { media_path: rec.media_path, media_type: rec.media_type }; openDay = weekDays[k]; } if (rec && rec.note && !note) note = rec.note; } } rows.push({ key: cell.key, isToday: cell.isToday, status, label, sub, note, media, openDay }); } const Chip = ({ status }) => { if (status === 'done') return ✓ Done; if (status === 'miss') return ✕ Not done; if (status === 'today') return {isWeek ? 'In progress' : 'Today'}; return —; }; const doneCount = rows.filter((r) => r.status === 'done').length; const streak = computeMemberStreak(cells, personObj); const StatBox = ({ label, value, sub, gold }) => (
{gold && } {value}{sub && {sub}}
{label}
); return (
{/* hero — matches member-profile.jsx */}
{member.name}{member.id === 'you' ? ' (you)' : ''}
Their check-in history
{member.goal && (
🎯
{member.id === 'you' ? 'Your goal' : 'Their goal'}
{member.goal}
)}
{/* stats */}
Recent activity
{/* Variant B media layout: a row WITH media is taller and shows a big (~76px) thumbnail on the right; rows without media stay compact. */} {rows.map((r) => { const hasMedia = !!r.media; return (
{r.label}
{r.sub &&
{r.sub}
}
{r.note ?
{r.note}
:
} {hasMedia && ( onOpenStory && onOpenStory(personUid, r.openDay)} /> )}
); })}
); } // ── Stories: check-in sheet (note + optional photo/video) ─────────────────── // Opened from the day strip's "Mark as done" / "Not done" buttons. Upserts the // check-in (done/not-done + note) and, if a media file is chosen, uploads it to // the private checkin-media bucket at //. and points // the check-in at it. const CHK_MAX_IMAGE = 10 * 1024 * 1024; // 10 MB photos const CHK_MAX_VIDEO = 30 * 1024 * 1024; // 30 MB video const CHK_MAX_VIDEO_SECS = 20; // guide ~15s; hard cap 20s function CheckinSheet({ gid, uid, day, done, dayWord, actionWord = 'did it', accent = ACCENT, onSaved, onClose }) { useBackClose(true, onClose); const [note, setNote] = React.useState(''); const [file, setFile] = React.useState(null); const [preview, setPreview] = React.useState(null); // { url, type: 'image'|'video' } const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(null); const fileRef = React.useRef(null); React.useEffect(() => () => { if (preview) URL.revokeObjectURL(preview.url); }, [preview]); const pickFile = (e) => { const f = e.target.files && e.target.files[0]; if (e.target) e.target.value = ''; if (!f) return; setErr(null); const isVideo = (f.type || '').startsWith('video/'); const isImage = (f.type || '').startsWith('image/'); if (!isVideo && !isImage) { setErr('Please choose a photo or a video.'); return; } const max = isVideo ? CHK_MAX_VIDEO : CHK_MAX_IMAGE; if (f.size > max) { setErr(`That ${isVideo ? 'video' : 'photo'} is too large (max ${Math.round(max / 1024 / 1024)} MB). Please pick a smaller one.`); return; } const url = URL.createObjectURL(f); if (isVideo) { // Guide toward short clips: reject anything much longer than ~15s. const v = document.createElement('video'); v.preload = 'metadata'; v.onloadedmetadata = () => { if (v.duration && v.duration > CHK_MAX_VIDEO_SECS) { setErr(`Keep videos short — about 15s max (this one is ${Math.round(v.duration)}s).`); URL.revokeObjectURL(url); } else { setPreview((p) => { if (p) URL.revokeObjectURL(p.url); return { url, type: 'video' }; }); setFile(f); } }; v.onerror = () => { // can't read metadata → allow (size already capped) setPreview((p) => { if (p) URL.revokeObjectURL(p.url); return { url, type: 'video' }; }); setFile(f); }; v.src = url; } else { setPreview((p) => { if (p) URL.revokeObjectURL(p.url); return { url, type: 'image' }; }); setFile(f); } }; const removeMedia = () => { setPreview((p) => { if (p) URL.revokeObjectURL(p.url); return null; }); setFile(null); setErr(null); }; const save = async () => { setBusy(true); setErr(null); try { let media_path = null, media_type = null; if (file) { const isVideo = (file.type || '').startsWith('video/'); const ext = ((file.name || '').split('.').pop() || (isVideo ? 'mp4' : 'jpg')).toLowerCase().replace(/[^a-z0-9]/g, '') || (isVideo ? 'mp4' : 'jpg'); media_path = `${gid}/${uid}/${day}.${ext}`; media_type = isVideo ? 'video' : 'image'; const up = await sb.storage.from('checkin-media').upload(media_path, file, { upsert: true, contentType: file.type }); if (up.error) throw up.error; } const payload = { group_id: gid, user_id: uid, day, done, note: note.trim() || null }; if (media_path) { payload.media_path = media_path; payload.media_type = media_type; } const { error } = await sb.from('checkins').upsert(payload, { onConflict: 'group_id,user_id,day' }); if (error) throw error; onSaved && onSaved({ user_id: uid, day, done, note: note.trim() || null, created_at: new Date().toISOString(), ...(media_path ? { media_path, media_type } : {}) }); onClose(); } catch (e) { setErr(e.message || String(e)); setBusy(false); } }; const titleColor = done ? GREEN : INK_SOFT; return (
e.stopPropagation()} style={{ background: '#fff', width: '100%', borderRadius: '22px 22px 0 0', padding: '16px 18px calc(20px + env(safe-area-inset-bottom))', animation: 'slideUp 0.28s cubic-bezier(.2,.8,.2,1)', maxHeight: '90%', overflowY: 'auto' }}>
{done ? ( ) : ( )}
{done ? `You ${actionWord}` : 'Not done'} · {dayWord}
{done ? 'How did it go? Add a note or a photo/video.' : 'What got in the way? (optional)'}