// app.jsx — Recuerdas (multi-tenant) // ───────────────────────────────────────────────────────────────────── // Casa M Recuerdas room — a hosted, multi-tenant rituals layer. // Each HOUSE is a private tenant. People belong to many houses. The // brand chip top-right is a HOUSE × PERSON switcher. // // Architectural decisions are documented in HANDOFF.md alongside this // file. This file is the prototype that demonstrates them. // // Components, top → bottom: // tokens · colors, fonts, T context, langStyle helper // atoms · Dot, Eyebrow, Hair, ListGlyph, HouseSeal, Candle, Bi // chrome · top bar + House×Person switcher dropdown // rail · left rail (Mis casas, bins, lists, invitar) // pane · main pane (single-house view + Mis casas pan view) // aside · right column (Las llamadas, Rituales, Libro, Quién) // invite · invitation drawer (sketch) // app · root component, state, Tweaks panel // ───────────────────────────────────────────────────────────────────── (function () { const { useState, useMemo, useEffect } = React; const { PEOPLE, HOUSES, LIST_TYPES, BINS, SNOOZE, LIFE_EVENTS, NOTIF_CHANNELS, NOTIF_DEFAULTS, personById, houseById, listsForHouse, listForHouse, membersForHouse, visibleRemindersFor, housesForPerson, subjectById, lifeEventById, } = window.RECUERDAS; // ═════════════════════════════════════════════════════════════════ // TOKENS · colors, fonts, language modes // ═════════════════════════════════════════════════════════════════ const SERIF = "'Cormorant Garamond', 'EB Garamond', Georgia, serif"; const SANS = "'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif"; const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace"; const P = { bg: '#1A120C', bgWarm: '#221710', bgSoft: '#251A12', paper: '#2A1D14', paperEdge: '#3A2A1E', ink: '#F1E6D0', inkSoft: '#D8C9AC', inkMid: '#A89880', inkFaint: '#7A6E5A', gold: '#D4B07A', goldDeep: '#A87B2C', goldHi: '#E8D4A8', wine: '#7E1F1F', wineDeep: '#5B1313', ember: '#C04A2A', sage: '#5C6B4A', cellar: '#7E1F1F', cocina: '#B5651D', line: '#48372A', lineSoft: '#3A2A1E', lineFaint: '#2F2118', }; // Persisted tweaks. The host rewrites this JSON block on disk when // the user changes a value, so the change survives reload. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "language": "es-en", "density": "cómoda", "ledger": true, "rituals": true, "llamadas": true }/*EDITMODE-END*/; const TweaksCtx = React.createContext({ t: TWEAK_DEFAULTS, setTweak: () => {} }); // Language mode helper. See HANDOFF.md §Voice for the rationale. // en → English only // es → Español only // en-es → EN primary + ES secondary // es-en → ES primary + EN secondary [default] // ambas → Both at equal weight function langStyle(mode) { switch (mode) { case 'en': return { primary: 'en', secondary: null, equal: false }; case 'es': return { primary: 'es', secondary: null, equal: false }; case 'en-es': return { primary: 'en', secondary: 'es', equal: false }; case 'ambas': return { primary: 'es', secondary: 'en', equal: true }; case 'es-en': default: return { primary: 'es', secondary: 'en', equal: false }; } } // ═════════════════════════════════════════════════════════════════ // ATOMS // ═════════════════════════════════════════════════════════════════ function Bi({ es, en, sep = ' · ', style = {} }) { const T = React.useContext(TweaksCtx); const { primary, secondary, equal } = langStyle(T.t.language); if (!secondary) { return {primary === 'es' ? es : en}; } if (equal) { return ( {es} {sep} {en} ); } const p = primary === 'es' ? es : en; const s = secondary === 'es' ? es : en; return ( {p} {sep} {s} ); } function Dot({ id, size = 22, ring = false, title }) { const m = personById(id); return ( {m.initial} ); } // Each House has a seal — a small wax-stamp circle in the house color. function HouseSeal({ houseId, size = 24, title }) { const h = houseById(houseId); const initial = h.name.replace(/^Casa\s+/, '').charAt(0); return ( {initial} ); } function Eyebrow({ children, color = P.gold, size = 9.5, ls = 2.4, style = {} }) { return {children}; } function Hair({ mt = 14, mb = 14, color = P.lineSoft, dashed = false }) { return
; } function ListGlyph({ which, size = 14, color = 'currentColor' }) { const s = { fill: 'none', stroke: color, strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (which === 'cocina') return ( ); if (which === 'cava') return ( ); if (which === 'casa') return ( ); if (which === 'familia') return ( ); if (which === 'jardin') return ( ); if (which === 'demos') return ( ); if (which === 'carinos') return ( ); if (which === 'libros') return ( ); if (which === 'viajes') return ( ); if (which === 'meds') return ( ); if (which === 'salud') return ( ); if (which === 'mascotas') return ( ); if (which === 'vehiculos') return ( ); if (which === 'hogar') return ( ); if (which === 'ninos') return ( ); if (which === 'cuentas') return ( ); if (which === 'trabajo') return ( ); if (which === 'hobby') return ( ); return null; } // Subject avatar (pet / vehicle / kid) — emoji-led, in subject hex. function SubjectAvatar({ subject, size = 22 }) { if (!subject) return null; return ( {subject.emoji || subject.name[0]} ); } function Candle({ done, onClick, accent = P.gold, size = 22 }) { return ( ); } // ─── Time helpers ───────────────────────────────────────────────── function fmtTime(iso, tz) { return new Date(iso).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true, timeZone: tz, }).replace(/\u202f/g, ' '); } function fmtDay(iso) { const d = new Date(iso); const n = new Date(); const dayMs = 1000 * 60 * 60 * 24; const diff = Math.round((d.setHours(0,0,0,0) - n.setHours(0,0,0,0)) / dayMs); if (diff === 0) return 'Hoy'; if (diff === 1) return 'Mañana'; if (diff === -1) return 'Ayer'; if (diff > 1 && diff < 7) return new Date(iso).toLocaleDateString('en-US', { weekday: 'long' }); return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); } function isToday(iso) { const d = new Date(iso); const n = new Date(); return d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate(); } function timeOfDay(iso) { const h = new Date(iso).getHours(); if (h < 11) return 'mañana'; if (h < 17) return 'tarde'; return 'noche'; } // ═════════════════════════════════════════════════════════════════ // CHROME · top bar + House × Person switcher // ═════════════════════════════════════════════════════════════════ function Chrome({ personId, houseId, onSwitch, onSetup, onAjustes, children }) { const [open, setOpen] = useState(false); const me = personById(personId); const house = houseById(houseId); const myHouses = housesForPerson(personId); const role = house.memberships.find(m => m.personId === personId)?.role; // Close switcher when clicking outside useEffect(() => { if (!open) return; const handler = (e) => { if (!e.target.closest('[data-switcher]')) setOpen(false); }; window.addEventListener('mousedown', handler); return () => window.removeEventListener('mousedown', handler); }, [open]); return (
{/* still-life ambient gradient — house accent tints the corner */}
{/* paper grain */}
{/* Top brand bar */}
Casa M multi-tenant rituals {/* Room name */} Recuerdas? · {house.name} {/* room peers — these live in every house, externally */} {/* House × Person switcher */}
{open && ( { onSwitch(nextPersonId, nextHouseId); setOpen(false); }} onSetup={() => { setOpen(false); onSetup(); }} onAjustes={() => { setOpen(false); onAjustes(); }} /> )}
{children}
); } function SwitcherPanel({ personId, currentHouseId, myHouses, onPick, onSetup, onAjustes }) { const me = personById(personId); return (
Signed in as · Como
{me.name}
{me.city} · {me.tz.split('/').pop().replace('_', ' ')}
Switch house · Cambiar de casa
{myHouses.map(h => { const role = h.memberships.find(m => m.personId === personId)?.role; const active = h.id === currentHouseId; return ( ); })}
Demo · view as
{PEOPLE.filter(p => p.id !== 'casa').map(p => ( ))}
); } // ═════════════════════════════════════════════════════════════════ // RAIL · left sidebar (Mis casas, bins, lists, invitar) // ═════════════════════════════════════════════════════════════════ function LeftRail({ house, viewerPersonId, active, setActive, counts, onInvite }) { const T = React.useContext(TweaksCtx); const lists = listsForHouse(house, viewerPersonId); return ( ); } function RailRow({ active, onClick, count, accent, icon, labelEs, labelEn, dot, scopeLabel, prominent }) { const T = React.useContext(TweaksCtx); const { secondary, primary } = langStyle(T.t.language); return ( ); } // ═════════════════════════════════════════════════════════════════ // PANE · main area (single-house view + Mis casas pan view) // ═════════════════════════════════════════════════════════════════ function ReminderRow({ r, house, viewerPersonId, onToggle, density, showHouseBadge }) { const T = React.useContext(TweaksCtx); const m = personById(r.who); const list = listForHouse(house, r.list, viewerPersonId); const giver = r.from ? personById(r.from) : null; const originHouse = r.originHouse ? houseById(r.originHouse) : null; const subject = r.subjectId ? subjectById(house, r.subjectId) : null; const isTravelAware = r.tz_priority === 'current'; const pad = density === 'compacta' ? '8px 0' : '13px 0'; const isSecret = r.secret && r.who === viewerPersonId && !r.done; const { primary, secondary } = langStyle(T.t.language); const pickTitle = (which) => which === 'es' ? (r.titleEs || r.title) : r.title; const titleStr = isSecret ? '· · · un cariño en camino · · ·' : pickTitle(primary); const showSubtitle = !isSecret && secondary && r.title && r.titleEs && r.title !== r.titleEs; return (
onToggle(r.id)} size={22} />
{isSecret && ( ✦ )} {titleStr} {showSubtitle && ( · {pickTitle(secondary)} )}
{/* Meta row */}
{/* House badge — shows in Mis casas pan view */} {showHouseBadge && ( {house.name.replace(/^Casa\s+/, '')} )} {list.label} {r.due && ( {fmtDay(r.due)} · {fmtTime(r.due, m.tz)}{' '} {m.id !== 'casa' && ( {m.city} )} )} {r.recur && ( ↻ {primary === 'en' ? r.recur.labelEn : r.recur.label} )} {r.streak != null && r.streak > 0 && ( ✦ {r.streak}× )} {r.tied && ( {r.tied.verb} {r.tied.label} ↗ )} {/* Subject (pet/vehicle/kid) chip beside the title */} {subject && !isSecret && ( {subject.name} )} {/* tz_priority badge — safety-critical when traveling */} {isTravelAware && !r.done && ( ⚛ local · travels with you )} {/* Cariño · "from" giver (with origin house if cross-house) */} {giver && !isSecret && ( de {giver.name} {originHouse && ( <> · from {originHouse.name.replace(/^Casa\s+/, '')} )} )} {isSecret && ( ✉ sellado · sealed {originHouse && ( <> {' · '} )} )}
{r.note && !isSecret && density !== 'compacta' && (
{r.note}
)}
{/* Assignee */}
{m.name}
); } function QuickAdd({ house, viewerPersonId, onAdd, defaultList = 'casa' }) { const T = React.useContext(TweaksCtx); const { primary } = langStyle(T.t.language); const [val, setVal] = useState(''); const lists = listsForHouse(house, viewerPersonId); const [list, setList] = useState( lists.find(l => l.id === defaultList)?.id || lists[0]?.id); function submit() { const v = val.trim(); if (!v) return; onAdd({ title: v, titleEs: v, list, who: viewerPersonId, due: null, recur: null }); setVal(''); } const l = listForHouse(house, list, viewerPersonId); return (
setVal(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && submit()} placeholder={primary === 'en' ? 'Jot something for the house' : 'Anota algo nuevo para la casa'} style={{ flex: 1, minWidth: 140, background: 'transparent', border: 'none', outline: 'none', fontFamily: SERIF, fontStyle: 'italic', fontSize: 18, color: P.ink, }} />
); } function EmptyState({ title, sub }) { return (
{title}
{sub}
); } function MainPane({ house, viewerPersonId, active, reminders, onToggle, onAdd }) { const T = React.useContext(TweaksCtx); const { primary } = langStyle(T.t.language); // Pan-house mode if (active.kind === 'bin' && active.id === 'mis-casas') { return ; } // Header let title, subtitle; if (active.kind === 'bin') { const b = BINS.find(x => x.id === active.id); title = b.label; subtitle = b.en; } else { const l = listForHouse(house, active.id, viewerPersonId); title = l.label; subtitle = l.en; } const heading = active.kind === 'bin' && active.id === 'today' ? '¿Recuerdas?' : title; const subhead = active.kind === 'bin' && active.id === 'today' ? { es: `Hoy en ${house.name}`, en: `Today in ${house.name}` } : { es: title, en: subtitle }; const filtered = useMemo(() => { if (active.kind === 'list') { return reminders.filter(r => r.list === active.id && !r.done); } switch (active.id) { case 'today': return reminders.filter(r => !r.done && r.due && isToday(r.due)); case 'tomorrow': return reminders.filter(r => { if (r.done || !r.due) return false; const d = new Date(r.due); const t = new Date(); t.setDate(t.getDate() + 1); return d.toDateString() === t.toDateString(); }); case 'week': { const now = new Date(); const end = new Date(now); end.setDate(end.getDate() + 7); return reminders.filter(r => !r.done && r.due && new Date(r.due) <= end); } case 'scheduled': return reminders.filter(r => !r.done && r.due); case 'rituals': return reminders.filter(r => !r.done && r.recur); case 'assigned': return reminders.filter(r => !r.done && r.who === viewerPersonId); case 'done': return reminders.filter(r => r.done); default: return reminders; } }, [active, reminders, viewerPersonId]); const grouped = useMemo(() => { if (active.kind !== 'bin' || active.id !== 'today') { return [{ key: '', items: filtered }]; } const order = ['mañana', 'tarde', 'noche']; const buckets = { 'mañana': [], 'tarde': [], 'noche': [] }; filtered.forEach(r => { if (!r.due) return; buckets[timeOfDay(r.due)].push(r); }); return order.filter(k => buckets[k].length).map(k => ({ key: k, items: buckets[k].sort((a, b) => new Date(a.due) - new Date(b.due)), })); }, [filtered, active]); return (

{heading}

{filtered.length}{' '} {' · '} {reminders.filter(r => r.done).length}{' '}
{filtered.length === 0 ? : grouped.map((g) => (
{g.key && ( )} {g.items.map(r => ( ))}
))}
); } // ─── Mis casas — pan-house digest of today ─────────────────────── function MisCasasPane({ personId, onToggle }) { const T = React.useContext(TweaksCtx); const me = personById(personId); const houses = housesForPerson(personId); const sections = useMemo(() => houses.map(h => { const rems = visibleRemindersFor(h, personId) .filter(r => !r.done && r.due && isToday(r.due)) .sort((a, b) => new Date(a.due) - new Date(b.due)); return { house: h, rems }; }), [houses, personId]); const total = sections.reduce((s, x) => s + x.rems.length, 0); return (

Mis casas

{total}
You belong to {houses.length} houses. Each one keeps its own rituals, its own ledger, its own seal. Cariños can cross between them. Nothing else does.
{sections.map(({ house: h, rems }) => (
{h.name}
{h.tagline}
{rems.length}
{rems.length === 0 ? (
— Nada pendiente hoy.
) : rems.map(r => ( onToggle(id, h.id)} showHouseBadge={false} /> ))}
))}
); } // ═════════════════════════════════════════════════════════════════ // ASIDE · right column (Las llamadas + Rituales + Libro + Quién) // ═════════════════════════════════════════════════════════════════ function SectionHead({ es, en }) { const T = React.useContext(TweaksCtx); const { secondary, primary } = langStyle(T.t.language); return (

{primary === 'en' ? en : es}

{secondary && ( · {primary === 'es' ? en : es} )}
); } function RightCol({ house, viewerPersonId, reminders }) { const T = React.useContext(TweaksCtx); const members = membersForHouse(house); const rituals = reminders.filter(r => r.recur && r.streak && !r.done) .sort((a, b) => b.streak - a.streak).slice(0, 6); const ledger = reminders.filter(r => r.done) .sort((a, b) => new Date(b.doneAt || 0) - new Date(a.doneAt || 0)) .slice(0, 5); const ROOM_META = { cellar: { label: 'Cellar', es: 'La Cava', hex: P.wine }, cocina: { label: 'Cocina', es: 'La Cocina', hex: P.cocina }, demos: { label: 'Demos', es: 'En Vivo', hex: '#6FA67A' }, shop: { label: 'Shop', es: 'La Tienda', hex: P.ember }, 'la-casa':{ label: 'La Casa', es: 'manual', hex: P.gold }, }; const wires = useMemo(() => { const buckets = { cellar: [], cocina: [], demos: [], shop: [], 'la-casa': [] }; reminders.filter(r => !r.done).forEach(r => { const k = r.tied?.room || 'la-casa'; if (buckets[k]) buckets[k].push(r); }); return Object.entries(buckets) .map(([k, items]) => ({ k, items })) .filter(b => b.items.length); }, [reminders]); return ( ); } // ═════════════════════════════════════════════════════════════════ // INVITE · invitation drawer (sketch — token shape lives in HANDOFF) // ═════════════════════════════════════════════════════════════════ function InviteDrawer({ open, onClose, house, viewerPersonId }) { const [email, setEmail] = useState(''); const [role, setRole] = useState('inner'); const lists = listsForHouse(house, viewerPersonId); const [scope, setScope] = useState('house-wide'); if (!open) return null; const token = email ? `cm-inv-${house.id}-${role}-${Math.random().toString(36).slice(2,10)}` : '—'; const link = `https://recuerdas.casam.me/accept?token=${token}`; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 540, background: P.bgWarm, border: `1px solid ${P.line}`, borderRadius: 10, padding: 28, boxShadow: '0 24px 60px rgba(0,0,0,0.6)', }}>
Invitar a · invite to

{house.name}

setEmail(e.target.value)} placeholder="manny.hernandez.brother@example.com" style={inputStyle} />
Invite link · expires in 7 days
{link}
); } const inputStyle = { width: '100%', background: 'rgba(0,0,0,0.24)', color: P.ink, border: `1px solid ${P.lineSoft}`, borderRadius: 4, padding: '10px 12px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 16, outline: 'none', }; function Field({ label, children }) { return (
{label}
{children}
); } // ═════════════════════════════════════════════════════════════════ // SETUP · life-events picker (onboarding spine) // ═════════════════════════════════════════════════════════════════ function SetupDrawer({ open, onClose, house, onApply }) { const T = React.useContext(TweaksCtx); const [picked, setPicked] = useState({}); // id → boolean const [expanded, setExpanded] = useState(null); if (!open) return null; const completed = new Set(house.completedLifeEvents || []); function toggle(id) { setPicked(p => ({ ...p, [id]: !p[id] })); } function apply() { const ids = Object.entries(picked).filter(([, v]) => v).map(([k]) => k); onApply(ids); setPicked({}); onClose(); } const pickedCount = Object.values(picked).filter(Boolean).length; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 880, maxHeight: '90vh', background: P.bgWarm, border: `1px solid ${P.line}`, borderRadius: 10, boxShadow: '0 24px 60px rgba(0,0,0,0.6)', display: 'flex', flexDirection: 'column', }}>
Setup · Configurar {house.name}

What does this house remember?

Pick the life events that apply. Each one adds the right lists, subjects, and reminders — no setup grammar required.
{/* Import banner — Apple, Google, Todoist, paste */}
Import from Apple Reminders, Google Tasks, Todoist, Things, Microsoft To Do, or paste plain text — the mayordomo parses each line.
{(window.RECUERDAS.IMPORT_SOURCES || []).map(src => ( ))}
ⓘ Import flow lives at /import — see HANDOFF §24
{/* Life events grid */}
{LIFE_EVENTS.map(e => { const isCompleted = completed.has(e.id); const isPicked = picked[e.id]; const isExpanded = expanded === e.id; const listLabels = (e.addsLists || []) .map(k => LIST_TYPES[k]?.label).filter(Boolean); return (
!isCompleted && toggle(e.id)}>
{isCompleted && ( ✓ )} {!isCompleted && ( {isPicked && ( )} )}
{listLabels.length > 0 && (
{listLabels.map(l => ( {l} ))}
)} {isExpanded && (
{(e.reminders || []).map((r, i) => (
· {r.titleEs || r.title} {r.recur && ( ↻ {r.recur.label} )} {r.tz_priority === 'current' && ( ⚛ local )}
))}
)}
); })}
{/* Footer · apply */}
{pickedCount === 0 ? 'Pick one or more to add. Nothing happens until you apply.' : `${pickedCount} event${pickedCount === 1 ? '' : 's'} selected.`}
); } // ═════════════════════════════════════════════════════════════════ // AJUSTES · notification preferences (per-channel × per-list) // ═════════════════════════════════════════════════════════════════ function AjustesDrawer({ open, onClose, house, viewerPersonId }) { const [prefs, setPrefs] = useState(() => { const seed = {}; listsForHouse(house, viewerPersonId).forEach(l => { seed[l.id] = { ...(NOTIF_DEFAULTS[l.type] || { inapp:true, desktop:false, mobile:false, email:false, sms:false }) }; }); return seed; }); const me = personById(viewerPersonId); const deviceTz = Intl.DateTimeFormat().resolvedOptions().timeZone; const traveling = deviceTz !== me.tz; if (!open) return null; function toggle(listId, channel) { setPrefs(p => ({ ...p, [listId]: { ...p[listId], [channel]: !p[listId][channel] }})); } return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 840, maxHeight: '90vh', background: P.bgWarm, border: `1px solid ${P.line}`, borderRadius: 10, boxShadow: '0 24px 60px rgba(0,0,0,0.6)', display: 'flex', flexDirection: 'column', }}>
⚭
Ajustes · Notifications & travel

How should the mayordomo reach you?

Channels per list. Defaults are conservative — meds and health get every channel; cariños whisper only.
{/* Travel mode banner */}
{traveling ? '⚛ Travel mode active' : 'Travel mode · standby'}
{traveling ? `You are in ${deviceTz.split('/').pop().replace('_', ' ')}, away from your home tz (${me.tz.split('/').pop().replace('_', ' ')}). Reminders flagged ⚛ local will fire on device time.` : `You are at home in ${me.tz.split('/').pop().replace('_', ' ')}. When you travel, reminders flagged ⚛ local will follow you automatically.`}
{/* Channel × list matrix */}
{/* corner */} {NOTIF_CHANNELS.map(c => (
{c.label}
))} {listsForHouse(house, viewerPersonId).map(l => (
{l.label}
{NOTIF_CHANNELS.map(c => (
))} ))}
{/* Quiet hours sketch */}
Quiet hours · Horas de silencio
10 pm – 6 am local. Meds, salud, niños override this. (editable in v1.1)
); } // ═════════════════════════════════════════════════════════════════ // TWEAKS PANEL // ═════════════════════════════════════════════════════════════════ function Panel() { const T = React.useContext(TweaksCtx); const { TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakToggle } = window; return ( T.setTweak('language', v)} options={[ { value: 'es-en', label: 'ES 1st · EN secondary' }, { value: 'en-es', label: 'EN 1st · ES secondary' }, { value: 'ambas', label: 'Ambas · EN + ES equal' }, { value: 'es', label: 'Sólo Español' }, { value: 'en', label: 'English only' }, ]} /> T.setTweak('density', v)} options={[ { value: 'cómoda', label: 'Cómoda' }, { value: 'compacta', label: 'Compacta' }, ]} /> T.setTweak('llamadas', v)} /> T.setTweak('rituals', v)} /> T.setTweak('ledger', v)} /> ); } // ═════════════════════════════════════════════════════════════════ // APP · root component, state, persistence // ═════════════════════════════════════════════════════════════════ function App() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const T = useMemo(() => ({ t: tweaks, setTweak }), [tweaks, setTweak]); // Identity + current tenant const [personId, setPersonId] = useState('mike'); const myHouses = useMemo(() => housesForPerson(personId), [personId]); const [houseId, setHouseId] = useState('casa-m'); const [active, setActive] = useState({ kind: 'bin', id: 'today' }); const [inviteOpen, setInviteOpen] = useState(false); const [setupOpen, setSetupOpen] = useState(false); const [ajustesOpen, setAjustesOpen] = useState(false); // Per-house reminders, held in state so toggles + adds work in-prototype. // Production: each house's data is fetched from /api/houses/:id/reminders. const [housesState, setHousesState] = useState(() => { const s = {}; HOUSES.forEach(h => { s[h.id] = h.reminders.map(r => ({ ...r })); }); return s; }); // The current house, with its reminders patched in from local state. const currentHouse = useMemo(() => { const base = houseById(houseId); return { ...base, reminders: housesState[base.id] }; }, [houseId, housesState]); const reminders = useMemo(() => visibleRemindersFor(currentHouse, personId), [currentHouse, personId]); // Drop the right column under ~1080px const [wide, setWide] = useState(() => typeof window !== 'undefined' && window.innerWidth >= 1080); useEffect(() => { const onR = () => setWide(window.innerWidth >= 1080); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); // Counts const counts = useMemo(() => { const open = reminders.filter(r => !r.done); const lists = {}; listsForHouse(currentHouse, personId).forEach(l => { lists[l.id] = open.filter(r => r.list === l.id).length; }); // Pan-house mis-casas count let misCasas = 0; myHouses.forEach(h => { misCasas += visibleRemindersFor( { ...h, reminders: housesState[h.id] }, personId) .filter(r => !r.done && r.due && isToday(r.due)).length; }); return { bins: { 'mis-casas': misCasas, today: open.filter(r => r.due && isToday(r.due)).length, tomorrow: open.filter(r => { if (!r.due) return false; const d = new Date(r.due); const t = new Date(); t.setDate(t.getDate() + 1); return d.toDateString() === t.toDateString(); }).length, week: open.filter(r => { if (!r.due) return false; const end = new Date(); end.setDate(end.getDate() + 7); return new Date(r.due) <= end; }).length, scheduled: open.filter(r => r.due).length, rituals: open.filter(r => r.recur).length, assigned: open.filter(r => r.who === personId).length, done: reminders.filter(r => r.done).length, }, lists, }; }, [reminders, currentHouse, personId, myHouses, housesState]); function onToggle(id, scopeHouseId) { const hid = scopeHouseId || houseId; setHousesState(prev => ({ ...prev, [hid]: prev[hid].map(r => r.id === id ? { ...r, done: !r.done, doneAt: !r.done ? new Date().toISOString() : null, } : r), })); } function onAdd(partial) { const id = 'r-' + Math.random().toString(36).slice(2, 8); setHousesState(prev => ({ ...prev, [houseId]: [{ id, ...partial, done: false }, ...prev[houseId]], })); } function applyLifeEvents(ids) { // Materialize each picked life event into the current house's // lists, subjects, and reminders. In production this becomes a // single POST /api/houses/{id}/life-events/apply call. const baseHouse = houseById(houseId); const newLists = [...baseHouse.lists]; const newSubjects = [...(baseHouse.subjects || [])]; const newReminders = [...housesState[houseId]]; ids.forEach((eid) => { const ev = lifeEventById(eid); if (!ev) return; (ev.addsLists || []).forEach((lt) => { if (!newLists.some(l => l.id === lt)) { newLists.push({ id: lt, type: lt }); } }); (ev.addsSubjects || []).forEach((sub, i) => { const id = `subj-${eid}-${i}-${Math.random().toString(36).slice(2, 6)}`; newSubjects.push({ id, kind: sub.kind, species: sub.species || null, name: sub.kind === 'pet' ? `New ${sub.species || 'pet'}` : sub.kind === 'vehicle' ? 'New vehicle' : 'New subject', hex: P.gold, emoji: sub.kind === 'pet' ? '🐾' : sub.kind === 'vehicle' ? '🚗' : '✦', }); }); (ev.reminders || []).forEach((r, i) => { newReminders.push({ id: `r-${eid}-${i}-${Math.random().toString(36).slice(2, 6)}`, list: r.list, who: 'casa', title: r.title, titleEs: r.titleEs, note: r.note || null, recur: r.recur || null, streak: 0, due: null, tz_priority: r.tz_priority || 'home', done: false, }); }); }); // Prototype: mutate the seed in place so the new lists/subjects // become visible without a re-render of the whole HOUSES array. baseHouse.lists = newLists; baseHouse.subjects = newSubjects; baseHouse.completedLifeEvents = [ ...(baseHouse.completedLifeEvents || []), ...ids, ]; setHousesState(prev => ({ ...prev, [houseId]: newReminders })); } function onSwitch(nextPersonId, nextHouseId) { setPersonId(nextPersonId); // If the new person isn't a member of the current house, jump them // to their first house. const stillIn = houseById(nextHouseId)?.memberships ?.some(m => m.personId === nextPersonId && m.state === 'active'); if (stillIn) { setHouseId(nextHouseId); } else { const fallback = housesForPerson(nextPersonId)[0]; if (fallback) setHouseId(fallback.id); } } return ( setSetupOpen(true)} onAjustes={() => setAjustesOpen(true)}>
setInviteOpen(true)} /> {wide && active.id !== 'mis-casas' && ( )}
setInviteOpen(false)} house={currentHouse} viewerPersonId={personId} /> setSetupOpen(false)} house={currentHouse} onApply={applyLifeEvents} /> setAjustesOpen(false)} house={currentHouse} viewerPersonId={personId} /> ); } // Keyframes for the pulse dot const style = document.createElement('style'); style.textContent = ` @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 ${P.gold}80; } 50% { box-shadow: 0 0 0 6px ${P.gold}00; } } `; document.head.appendChild(style); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); })();