{itemEntries.map(([itemId, rows])=>{
const it = s.itemById[itemId];
const heldByMe = rows.filter(r=>r.holderId===viewerId).length;
const heldByThem = rows.length - heldByMe;
const lastTransfer = Math.max(...rows.flatMap(r=>r.transfers.map(t=>t.at)));
const tints = {
rooster:['#F5D7B8','#E08A3A'],tanuki:['#EADBC0','#8C6B3D'],maneki:['#F6DCDC','#CF8080'],
torii:['#F1CFC4','#B05238'],daruma:['#F7CFC0','#B84C38'],matcha:['#DDEBC9','#6B9452'],
stolper:['#EFE1B8','#8C6E2B'],phone:['#F2C6C0','#AA3A2A'],azulejo:['#D5E3EF','#3E6E99'],
lovelock:['#E9D7C3','#8E6B3B'],tuktuk:['#F3D9B8','#C17A2A'],cat:['#E5D8C2','#5C5048'],
piano:['#E0E0E6','#5C5C7A'],
};
const [a,b] = tints[itemId] || ['#F4E7CE','#C9A66B'];
return (
onOpenItem(itemId)} className="tap" style={{
background:'#fff', borderRadius:16, padding:14,
boxShadow:'0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px var(--hair)',
display:'flex', alignItems:'center', gap:14,
}}>
{it.emoji}
{it.name}
Last spot · {fmtDaysAgo(lastTransfer)}
You {heldByMe}
{heldByThem>0 && (
Them {heldByThem}
)}
{rows.slice(0,3).map((r,i)=>(
))}
);
})}
);
}
// ─── Item Detail: bilateral list per friend ───────────────────────────
function ItemDetailScreen({ itemId, viewerId, onBack, onOpenHead, onPeek }){
const s = useStore();
const it = s.itemById[itemId];
const ipForMe = inpersonForUser(s, viewerId).filter(r=>r.itemId===itemId);
const heldByMe = ipForMe.filter(r=>r.holderId===viewerId);
return (
<>
{/* Hero */}
{heldByMe.length} {it.title}{heldByMe.length===1?'':'s'}
You hold {heldByMe.length} of {ipForMe.length} bilateral crowns for this item
onPeek(itemId)} leading={}>
Spot a {it.name.toLowerCase()} now
BY FRIEND
{ipForMe.map((r, i)=>{
const op = s.people[r.withId];
const mine = r.holderId===viewerId;
const lastT = r.transfers[0];
return (
onOpenHead(r.withId)} className="tap" style={{
padding:'12px 14px', display:'flex', alignItems:'center', gap:12,
borderBottom: i
{op.name}
{mine ? `You hold · ${fmtHeld(r.heldSince)}` : `${op.first} holds · ${fmtHeld(r.heldSince)}`}
{lastT && lastT.comment && (
"{lastT.comment}"
)}
{r.streak>1 && {r.streak}}
RECENT TRANSFERS
{ipForMe.flatMap(r=>r.transfers.map(t=>({...t, withId:r.withId}))).sort((a,b)=>b.at-a.at).slice(0,10).map((t, i, arr)=>{
const by = s.people[t.byId];
const op = s.people[t.withId];
const youDid = t.byId===viewerId;
return (
{youDid?'You':by.first} {youDid?'spotted with':'spotted while with'} {youDid?op.first:'you'}
{t.comment && (
"{t.comment}"
)}
{fmtDaysAgo(t.at)}{t.photo?' · with photo':''}
);
})}
);
}
// ─── Peek session modal (host) ────────────────────────────────────────
function PeekFlow({ viewerId, onClose, presetItemId=null }){
const s = useStore();
// 'item' picker → 'live' (showing crown + QR + waiting) → 'review' (comment+confirm) → 'done'
const [step, setStep] = React.useState(presetItemId ? 'live' : 'item');
const [itemId, setItemId] = React.useState(presetItemId || null);
const [comment, setComment] = React.useState('');
const [withPhoto, setWithPhoto] = React.useState(false);
const session = s.peekSession;
const itemRef = React.useRef(itemId);
itemRef.current = itemId;
// Start session when entering 'live'
React.useEffect(()=>{
if (step==='live' && itemRef.current && !s.peekSession){
SC.actions.startPeek(viewerId, itemRef.current);
}
}, [step]);
// Auto-advance: when at least one witness confirms, host can move to review
// But review gating: tap "Done" once witnesses confirmed.
const stepRef = React.useRef(step);
stepRef.current = step;
React.useEffect(()=>{
return ()=>{
// cancel session if user closes before finalizing
if (SC.get().peekSession && stepRef.current!=='done') SC.actions.cancelPeek();
};
}, []);
function chooseItem(id){ setItemId(id); setStep('live'); }
function endLive(){
SC.actions.setPeekComment(comment);
SC.actions.setPeekPhoto(withPhoto);
setStep('review');
}
function finalize(){
SC.actions.setPeekComment(comment);
SC.actions.setPeekPhoto(withPhoto);
SC.actions.finalizePeek();
setStep('done');
setTimeout(()=>onClose(), 2400);
}
function cancel(){
SC.actions.cancelPeek();
onClose();
}
if (step==='item'){
// Item picker — show items for which I'm in a pair, plus all catalog items
const eligibleItems = s.items;
return (
What did you spot?
Pick the item, then friends nearby will witness it.
{eligibleItems.map(it=>(
chooseItem(it.id)} className="tap" style={{
background:'#fff', borderRadius:14, padding:10, textAlign:'center',
boxShadow:'0 0 0 0.5px var(--hair), 0 1px 2px rgba(0,0,0,0.03)',
}}>
{it.name}
))}
);
}
if (step==='live' && session){
const item = s.itemById[session.itemId];
if (!item) return null;
const elapsed = Date.now() - session.startedAt;
const witnesses = session.witnesses;
const confirmed = witnesses.filter(w=>w.status==='confirmed');
return (
Live · Peek
{/* Animated crown over item */}
{item.name}
Show this to people nearby — they'll get a buzz to confirm
{/* QR code area */}
{/* Witnesses */}
{witnesses.length===0 ? 'WAITING FOR WITNESSES' : `${confirmed.length}/${witnesses.length} CONFIRMED`}
{witnesses.map((w, i)=>{
const p = s.people[w.personId];
return (
{p.name}
{w.status==='confirmed' ? (
Confirmed
) : (
Tap their phone…
)}
);
})}
}>
Done — {confirmed.length} witness{confirmed.length===1?'':'es'}
{confirmed.length===0 && (
Need at least one witness to claim
)}
);
}
if (step==='review' && session){
const item = s.itemById[session.itemId];
if (!item) return null;
const confirmed = session.witnesses.filter(w=>w.status==='confirmed');
return (
setStep('live')}/>
{item.name}
{confirmed.length} witness{confirmed.length===1?'':'es'} · {fmtDaysAgo(session.startedAt)}
{confirmed.slice(0,5).map((w,i)=>(
))}
Comment (optional)