// Main app — wires everything together with state for theme, search, filter. const { useState, useMemo, useEffect, useCallback } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accentHue": 0, "density": "default", "width": "default" }/*EDITMODE-END*/; function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const [q, setQ] = useState(""); const [activeTag, setActiveTag] = useState("all"); // apply theme/density/width/accent to useEffect(() => { const r = document.documentElement; r.dataset.theme = tweaks.theme; r.dataset.density = tweaks.density; r.dataset.width = tweaks.width; // Override accent only when user moves slider away from default red (0) if (tweaks.accentHue !== 0) { const lc = tweaks.theme === "dark" ? "0.62 0.22" : "0.50 0.20"; r.style.setProperty("--accent", `oklch(${lc} ${tweaks.accentHue})`); r.style.setProperty("--accent-soft", `oklch(${lc} ${tweaks.accentHue} / 0.16)`); r.style.setProperty("--accent-line", `oklch(${lc} ${tweaks.accentHue} / 0.50)`); } else { r.style.removeProperty("--accent"); r.style.removeProperty("--accent-soft"); r.style.removeProperty("--accent-line"); } }, [tweaks]); const toggleTheme = useCallback(() => { setTweak("theme", tweaks.theme === "dark" ? "light" : "dark"); }, [tweaks.theme, setTweak]); // keyboard: '/' focuses search, 't' toggles theme useEffect(() => { const onKey = (e) => { const tag = (e.target && e.target.tagName) || ""; const typing = tag === "INPUT" || tag === "TEXTAREA"; if (e.key === "/" && !typing) { e.preventDefault(); const el = document.querySelector(".searchbar input"); el && el.focus(); } else if (e.key === "Escape" && typing) { e.target.blur(); setQ(""); } else if (e.key === "t" && !typing) { toggleTheme(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [toggleTheme]); const featured = window.POSTS.find(p => p.featured); const filtered = useMemo(() => { const ql = q.trim().toLowerCase(); return window.POSTS .filter(p => !p.featured || ql || activeTag !== "all") // only hide featured when no search/filter .filter(p => activeTag === "all" || p.tag === activeTag) .filter(p => !ql || ( p.title.toLowerCase().includes(ql) || p.summary.toLowerCase().includes(ql) || p.tag.toLowerCase().includes(ql) || p.sev.toLowerCase().includes(ql) )) .sort((a, b) => b.date.localeCompare(a.date)); }, [q, activeTag]); const counts = useMemo(() => { const c = { all: window.POSTS.length }; for (const t of window.TAGS) { if (t.id === "all") continue; c[t.id] = window.POSTS.filter(p => p.tag === t.id).length; } return c; }, []); return ( <>