);
}
function Timeline({ lang, range, count, peaks, onChange }) {
const t = STR[lang];
const [open, setOpen] = React.useState(false);
const [lo, hi] = range;
const allTime = lo <= MIN_YEAR && hi >= MAX_YEAR;
const single = lo === hi ? lo : null;
const allLabel = lang === "vi" ? "Mọi thời điểm" : "All time";
const label = allTime ? allLabel : single != null ? String(single) : lo + "–" + hi;
if (!open) {
return (
{label}
{count} {t.voices}
{chips.map((c) => (
))}
{MIN_YEAR}{NOW_YEAR}{MAX_YEAR}
);
}
// Map backend column names to the shape the frontend expects.
// Backend uses text_vi/text_en/has_photo/date_label; frontend uses vi/en/photo/date.
function fromApi(r) {
return {
id: r.id,
lat: r.lat, lng: r.lng,
city: r.city, ward: r.ward,
cat: r.cat,
year: r.year, month: r.month, day: r.day,
date: r.date_label || String(r.year),
dateEn: r.date_label_en || String(r.year),
lang: r.lang,
vi: r.text_vi,
en: r.text_en || r.text_vi,
photo: !!r.has_photo,
media: r.media_type,
};
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLang] = React.useState("vi");
const [theme, setTheme] = React.useState("light");
const [basemap, setBasemap] = React.useState("streets");
const [layersOpen, setLayersOpen] = React.useState(false);
const [city, setCity] = React.useState("hanoi");
const [cityOpen, setCityOpen] = React.useState(false);
const [range, setRange] = React.useState([MIN_YEAR, MAX_YEAR]);
const [memories, setMemories] = React.useState(() => MEMORIES.slice());
// Load approved memories from backend; fall back to static seed data if empty.
React.useEffect(() => {
fetch("/api/memories")
.then((r) => r.ok ? r.json() : null)
.then((data) => {
if (data && data.memories && data.memories.length > 0)
setMemories(data.memories.map(fromApi));
})
.catch((e) => console.warn("Failed to load memories from API:", e));
}, []);
const [composing, setComposing] = React.useState(false);
const [placePoint, setPlacePoint] = React.useState(null);
const [selected, setSelected] = React.useState(null);
const [aboutOpen, setAboutOpen] = React.useState(false);
// --- research mode ---
const [research, setResearch] = React.useState(false);
const [exportOpen, setExportOpen] = React.useState(false);
const [adv, setAdv] = React.useState({
precision: "year", fM: null, fD: null, tM: null, tD: null,
query: "", cats: [], langs: [], content: [], status: "all",
});
const [queryMode, setQueryMode] = React.useState(null);
const [queryShape, setQueryShape] = React.useState(null);
const [draftCount, setDraftCount] = React.useState(0);
const drawApiRef = React.useRef({});
const wanderHist = React.useRef([]);
const S = STR[lang];
const accent = t.accent;
React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
const [lo, hi] = range;
const compiled = React.useMemo(() => compileQuery(adv.query), [adv.query]);
// ---- multi-city scope (hub-and-spoke) ----
const cityObj = city === "all" ? null : (CITY[city] || CITY.hanoi);
const zone = cityObj && cityObj.zone ? cityObj.zone : null;
const cityCounts = React.useMemo(() => {
const o = {}; CITIES.forEach((c) => (o[c.key] = 0));
memories.forEach((m) => { const k = memoryCity(m); o[k] = (o[k] || 0) + 1; });
return o;
}, [memories]);
const scopeMemories = React.useMemo(
() => (city === "all" ? memories : memories.filter((m) => memoryCity(m) === city)),
[memories, city]
);
const overview = React.useMemo(() => {
if (city !== "all") return null;
return CITIES.map((c) => ({ key: c.key, name: c[lang], lat: c.center[0], lng: c.center[1], count: cityCounts[c.key] || 0 }))
.filter((o) => o.count > 0);
}, [city, lang, cityCounts]);
// full Research-Mode result set: temporal (Y/M/D) + spatial + Boolean + facets
const results = React.useMemo(() => {
const qLo = lo * 10000 + (adv.fM || 1) * 100 + (adv.fD || 1);
const qHi = hi * 10000 + (adv.tM || 12) * 100 + (adv.tD || 31);
return scopeMemories.filter((m) => {
const [mLo, mHi] = memoryDateBounds(m);
if (!(mHi >= qLo && mLo <= qHi)) return false;
if (!inShape(m, queryShape)) return false;
if (adv.cats.length && !adv.cats.includes(m.cat)) return false;
if (adv.content.length && !adv.content.includes(memoryMedia(m))) return false;
if (adv.langs.length && !adv.langs.includes(memoryLang(m))) return false;
if (adv.status === "verified" && !isVerified(m)) return false;
if (adv.status === "unverified" && isVerified(m)) return false;
if (!compiled.test(searchHaystack(m))) return false;
return true;
});
}, [scopeMemories, lo, hi, adv, queryShape, compiled]);
const visible = results;
const showZone = hi >= 2026;
const resetResearch = () => {
onRangeReset();
setAdv({ precision: "year", fM: null, fD: null, tM: null, tD: null, query: "", cats: [], langs: [], content: [], status: "all" });
setQueryMode(null); setQueryShape(null);
};
const onRangeReset = () => setRange([MIN_YEAR, MAX_YEAR]);
// leaving Research Mode tears down any spatial draft AND committed query shape
const closeResearch = () => { setResearch(false); setQueryMode(null); setQueryShape(null); };
// Escape cancels an in-progress spatial draw (without committing a shape)
React.useEffect(() => {
if (!queryMode) return;
const onKey = (e) => { if (e.key === "Escape") setQueryMode(null); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [queryMode]);
// memory-peaks histogram — counts per year, drives the spikes on the axis
const peaks = React.useMemo(() => {
const counts = {};
scopeMemories.forEach((m) => { const y = m.year || 2026; counts[y] = (counts[y] || 0) + 1; });
return Object.keys(counts).map((y) => ({ year: +y, count: counts[y] })).sort((a, b) => a.year - b.year);
}, [scopeMemories]);
const nearby = React.useMemo(() => {
if (!placePoint) return [];
return scopeMemories.filter((m) => !m.mine)
.map((m) => ({ m, d: dist(placePoint, m) })).sort((a, b) => a.d - b.d)
.slice(0, 3).map((x) => x.m);
}, [placePoint, scopeMemories]);
const pickCity = (k) => { setCity(k); setCityOpen(false); setSelected(null); setComposing(false); setPlacePoint(null); setQueryShape(null); setQueryMode(null); };
const openCompose = () => { if (city === "all") setCity("hanoi"); setSelected(null); setAboutOpen(false); setLayersOpen(false); setComposing(true); setPlacePoint(null); };
// Map clicks only set a location while actively composing (entered via the +
// button). A click on the map never opens the form on its own.
const mapClick = (p) => { if (city === "all" || !composing) return; setSelected(null); setAboutOpen(false); setLayersOpen(false); setPlacePoint(p); };
const closeCompose = () => { setComposing(false); setPlacePoint(null); };
const submit = (mem) => {
setMemories((prev) => [...prev, mem]); // optimistic UI update
fetch("/api/memories", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(mem),
}).catch(() => {}); // silent — memory stays visible locally regardless
};
const openMemory = (m) => { setComposing(false); setPlacePoint(null); wanderHist.current = []; setSelected(m); };
const wanderNext = () => setSelected((cur) => {
if (!cur) return cur;
const others = memories.filter((x) => x.id !== cur.id);
const near = others.sort((a, b) => dist(cur, a) - dist(cur, b)).slice(0, 6);
const pick = near[Math.floor(Math.random() * Math.min(4, near.length))] || others[0];
if (pick && wanderHist.current.length < 100) wanderHist.current.push(cur);
return pick || cur;
});
const wanderPrev = () => { const p = wanderHist.current.pop(); if (p) setSelected(p); else wanderNext(); };
const appStyle = { "--quote-font": QUOTE_FONTS[t.typeVoice] || QUOTE_FONTS.serif, "--ember": accent };
return (