/* updates-views.jsx — the Updates feed: Facebook-style status posts with a photo grid (1/2/3/4+ with "+N") and a full-screen lightbox. Data from window.UPDATES. Depends on Reveal (views.jsx) and AUTHOR/fmtDate are re-declared here to stay self-contained. */ const { useState: useUS, useEffect: useUE, useCallback: useUC } = React; const UP_AUTHOR = { name: "Muhamad Firdaus Ali", avatar: "assets/avatar.png?v=2", }; function updDate(iso) { const [y, m, d] = (iso || "").split("-").map(Number); if (!y) return iso || ""; const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; return `${months[(m || 1) - 1]} ${d}, ${y}`; } /* ---------- photo grid: FB-style tiling by count ---------- */ function PhotoGrid({ photos, onOpen }) { const n = photos.length; if (n === 0) return null; // cap visible tiles at 4; the 4th carries a "+N" overlay when there are more const tiles = photos.slice(0, 4); const extra = n - 4; const layout = n === 1 ? "one" : n === 2 ? "two" : n === 3 ? "three" : "four"; return (

{tiles.map((src, i) => { const isLast = i === 3 && extra > 0; return ( ); })}

); } /* ---------- one status post ---------- */ function UpdateCard({ update, onOpenPhoto }) { return (

{UP_AUTHOR.name} {updDate(update.date)}{update.place ? ` · ${update.place}` : ""}

{update.text &&

{update.text}

} {update.photos && update.photos.length > 0 && ( onOpenPhoto(update.photos, i)} /> )}

); } /* ---------- lightbox ---------- */ function Lightbox({ photos, index, onClose, onNav }) { useUE(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); else if (e.key === "ArrowRight") onNav(1); else if (e.key === "ArrowLeft") onNav(-1); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose, onNav]); // touch gestures: horizontal = prev/next, swipe-down = dismiss. The image follows // the finger for a native feel, then snaps or commits on release. const drag = React.useRef({ x: 0, y: 0, active: false }); const [off, setOff] = React.useState({ x: 0, y: 0 }); const onTouchStart = (e) => { const t = e.touches[0]; drag.current = { x: t.clientX, y: t.clientY, active: true }; }; const onTouchMove = (e) => { if (!drag.current.active) return; const t = e.touches[0]; setOff({ x: t.clientX - drag.current.x, y: t.clientY - drag.current.y }); }; const onTouchEnd = () => { const { x, y } = off; drag.current.active = false; if (Math.abs(y) > 90 && Math.abs(y) > Math.abs(x)) { onClose(); return; } if (Math.abs(x) > 60 && Math.abs(x) > Math.abs(y)) { onNav(x < 0 ? 1 : -1); } setOff({ x: 0, y: 0 }); }; if (index == null) return null; const many = photos.length > 1; const dragStyle = (off.x || off.y) ? { transform: `translate(${off.x}px, ${off.y}px)`, transition: "none", opacity: 1 - Math.min(Math.abs(off.y) / 400, 0.5) } : { transition: "transform .25s ease, opacity .25s ease" }; // Portal to — the feed lives inside a transformed .view-wrap, and a CSS // transform on an ancestor breaks position:fixed (it becomes relative to that // ancestor). Rendering into body keeps the overlay truly viewport-fixed & centered. const node = ( ); return ReactDOM.createPortal(node, document.body); } /* ---------- the Updates feed ---------- */ function UpdatesView() { const updates = (window.UPDATES || []).slice(); // defensive: sort newest-first by date updates.sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0)); const [box, setBox] = useUS({ photos: null, index: null }); const openPhoto = useUC((photos, index) => setBox({ photos, index }), []); const closePhoto = useUC(() => setBox({ photos: null, index: null }), []); const nav = useUC((dir) => { setBox((b) => { if (b.index == null) return b; const len = b.photos.length; return { ...b, index: (b.index + dir + len) % len }; }); }, []); return (

Updates

Occasional notes and photographs — what I've been doing, reading, and building. Posted when there's something worth saying.

{updates.length === 0 ? (

Nothing posted yet.

) : ( updates.map((u, i) => ( )) )}

了 {box.index != null && ( )}

); } Object.assign(window, { UpdatesView });