/* app.jsx — root: state, routing, header, footer, tweaks wiring (React hooks come from window globals set in shared.jsx) */ const LANG_KEY = "siam_lang"; const CART_KEY = "siam_cart"; const ADMIN_KEY = "siam_admin"; const MYORD_KEY = "siam_myorders"; const DEFAULT_TWEAKS = { theme: "navy", mode: "light", font: "sarabun", density: "comfortable", radius: 4, }; const FONT_SETS = { sarabun: { display: '"TH Sarabun New", "TH SarabunPSK", "Sarabun", "Noto Sans Thai", system-ui, sans-serif', body: '"TH Sarabun New", "TH SarabunPSK", "Sarabun", "Noto Sans Thai", system-ui, sans-serif', }, garamond: { display: '"Cormorant Garamond", "Noto Serif Thai", Georgia, serif', body: '"Sarabun", "Noto Sans Thai", system-ui, sans-serif', }, playfair: { display: '"Playfair Display", "Noto Serif Thai", Georgia, serif', body: '"Sarabun", "Noto Sans Thai", system-ui, sans-serif', }, spectral: { display: '"Spectral", "Noto Serif Thai", Georgia, serif', body: '"IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif', }, modern: { display: '"Fraunces", "Noto Serif Thai", Georgia, serif', body: '"Noto Sans Thai", system-ui, sans-serif', }, }; function App() { const [lang, setLang] = useState(() => localStorage.getItem(LANG_KEY) || "th"); const [route, setRoute] = useState({ name: "home" }); const [cart, setCart] = useState(() => { try { return JSON.parse(localStorage.getItem(CART_KEY)) || []; } catch { return []; } }); const [dbState, setDbState] = useState(DB.getState()); const [admin, setAdmin] = useState(() => !!DB.getToken()); const [tweaks, setTweaks] = useState(DEFAULT_TWEAKS); const [toast, setToast] = useState(null); // subscribe to the data layer + hydrate from the API on mount useEffect(() => { const unsub = DB.subscribe(setDbState); setDbState(DB.getState()); DB.refreshPublic().catch(() => {}); // Validate any stored admin session; drop it if expired/invalid. DB.validateSession().then((ok) => { if (!ok) setAdmin(false); else DB.refreshOrders().catch(() => {}); }); return unsub; }, []); // persist useEffect(() => localStorage.setItem(LANG_KEY, lang), [lang]); useEffect(() => localStorage.setItem(CART_KEY, JSON.stringify(cart)), [cart]); // Wrap admin toggle: clear the session token on sign-out, load orders on sign-in. const handleSetAdmin = useCallback((v) => { if (!v) DB.adminLogout(); else DB.refreshOrders().catch(() => {}); setAdmin(v); }, []); // apply tweaks to useEffect(() => { const r = document.documentElement; r.setAttribute("data-theme", tweaks.theme); r.setAttribute("data-mode", tweaks.mode); const f = FONT_SETS[tweaks.font] || FONT_SETS.garamond; r.style.setProperty("--font-display", f.display); r.style.setProperty("--font-body", f.body); r.style.setProperty("--radius", tweaks.radius + "px"); const d = tweaks.density; r.style.setProperty("--pad-card", d === "compact" ? "15px" : d === "roomy" ? "28px" : "22px"); r.style.setProperty("--gap-grid", d === "compact" ? "18px" : d === "roomy" ? "36px" : "28px"); }, [tweaks]); const t = useCallback((k) => I18N.t(k, lang), [lang]); const L = useCallback((obj, key) => (lang === "th" ? obj[key + "_th"] || obj[key + "_en"] : obj[key + "_en"]), [lang]); const showToast = useCallback((msg) => { setToast(msg); clearTimeout(showToast._t); showToast._t = setTimeout(() => setToast(null), 2600); }, []); const nav = useCallback((name, params) => { setRoute({ name, ...(params || {}) }); window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); }, []); // ----- cart ops ----- const addToCart = useCallback((product) => { setCart((c) => { const ex = c.find((x) => x.id === product.id); if (ex) return c.map((x) => x.id === product.id ? { ...x, qty: Math.min(x.qty + 1, product.qty) } : x); return [...c, { id: product.id, qty: 1 }]; }); showToast(lang === "th" ? "เพิ่มลงตะกร้าแล้ว" : "Added to cart"); }, [lang, showToast]); const setCartQty = useCallback((id, qty) => setCart((c) => qty <= 0 ? c.filter((x) => x.id !== id) : c.map((x) => x.id === id ? { ...x, qty } : x)), []); const removeFromCart = useCallback((id) => setCart((c) => c.filter((x) => x.id !== id)), []); const clearCart = useCallback(() => setCart([]), []); const cartCount = cart.reduce((n, x) => n + x.qty, 0); const recordMyOrder = useCallback((number) => { try { const list = JSON.parse(localStorage.getItem(MYORD_KEY)) || []; if (!list.includes(number)) { list.unshift(number); localStorage.setItem(MYORD_KEY, JSON.stringify(list.slice(0, 12))); } } catch {} }, []); const ctx = { lang, setLang, t, L, route, nav, cart, setCart, addToCart, setCartQty, removeFromCart, clearCart, cartCount, db: dbState, DB, admin, setAdmin: handleSetAdmin, showToast, recordMyOrder, tweaks, setTweaks, }; return (

{route.name.startsWith("admin") ? null :

}

{route.name.startsWith("admin") ? null :

); } function Router() { const { route } = useApp(); switch (route.name) { case "home": return ; case "shop": return ; case "product": return ; case "cart": return ; case "checkout": return ; case "payment": return ; case "track": return ; case "about": return ; case "admin": return ; default: return ; } } /* ---------------- Header ---------------- */ function Header() { const { t, lang, setLang, nav, route, cartCount } = useApp(); const items = [ { k: "shop", label: t("nav_shop") }, { k: "track", label: t("nav_orders") }, { k: "about", label: t("nav_about") }, ]; return (

nav("home")}> SIAM HERITAGE {lang === "th" ? "ธนบัตรและเหรียญสะสม" : "Rare Notes & Coins · Bangkok"}

); } /* ---------------- Footer ---------------- */ function Footer() { const { lang, nav, db } = useApp(); const s = db.settings; return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();