/* ============================================================================ board.jsx — toolbar, layouts (mosaic / grid / scatter), filters, focus mode, and the Tweaks panel. Depends on cards.jsx (Card, Icon, AudioEngine). ========================================================================== */ const { useState: uS, useRef: uR, useEffect: uE, useMemo, useCallback: uCB } = React; const COL_W = 340; // mosaic column / scatter card width (px) const TILE = 308; // uniform grid tile size (px) const TYPE_ORDER = ["audio", "quote", "photo", "video", "podcast", "note", "link"]; const FONTS = { grotesk: { ui: "'Space Grotesk'", body: "'Hanken Grotesk'", quote: "'Newsreader'" }, editorial: { ui: "'Space Grotesk'", body: "'Newsreader'", quote: "'Newsreader'" }, mono: { ui: "'Space Mono'", body: "'Hanken Grotesk'", quote: "'Space Mono'" }, }; const GAP = { cozy: 14, regular: 22, roomy: 34 }; const ACCENTS = [ "oklch(0.72 0.11 66)", // amber (default) "oklch(0.64 0.12 32)", // clay "oklch(0.66 0.07 168)", // sage "oklch(0.62 0.09 250)", // slate-blue ]; const EMPTY = []; function normalizeItems(arr) { return (Array.isArray(arr) ? arr : []).map((it, i) => ({ ...it, id: it.id || (it.type || "item") + "-" + i, note: it.comment != null ? it.comment : it.note, year: it.year != null ? it.year : (parseInt(it.date, 10) || 0), tags: it.tags || [], })); } function searchText(it) { return [it.note, it.text, it.title, it.excerpt, it.piece, it.performer, it.author, it.work, it.transcript, it.show, it.episode, it.alt, (it.tags || []).join(" ")].filter(Boolean).join(" ").toLowerCase(); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "paper", "accent": "oklch(0.72 0.11 66)", "typeset": "grotesk", "texture": "grain", "cardStyle": "hairline", "density": "regular" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // ---- product state ---- const [data, setData] = uS(null); // null = loading const [loadErr, setLoadErr] = uS(false); const [dragOver, setDragOver] = uS(false); const fileRef = uR(null); const ALL = data || EMPTY; const [query, setQuery] = uS(""); const [types, setTypes] = uS([]); // active type filters (empty = all) const [tag, setTag] = uS(null); // active hashtag const [sort, setSort] = uS("added"); // added | newest | oldest | shuffle const [shuffleSeed, setShuffleSeed] = uS(0); const [layout, setLayout] = uS("mosaic"); // mosaic | grid | scatter const [focus, setFocus] = uS(null); // index into visible[] const [gen, setGen] = uS(0); // bump to replay entrance anim // load items.json (works when served over http; see local-preview fallback) uE(() => { let alive = true; fetch("items.json", { cache: "no-store" }) .then((r) => { if (!r.ok) throw new Error("http " + r.status); return r.json(); }) .then((d) => { if (alive) setData(normalizeItems(d)); }) .catch(() => { if (alive) setLoadErr(true); }); return () => { alive = false; }; }, []); const loadFromFile = (file) => { if (!file) return; const fr = new FileReader(); fr.onload = () => { try { setData(normalizeItems(JSON.parse(fr.result))); setLoadErr(false); } catch (err) { alert("Couldn't parse that JSON:\n" + err.message); } }; fr.readAsText(file); }; // apply design tweaks to uE(() => { const r = document.documentElement; r.dataset.theme = t.theme; r.dataset.texture = t.texture; r.dataset.cardstyle = t.cardStyle; r.style.setProperty("--accent", t.accent); r.style.setProperty("--accent-ink", t.accent); const f = FONTS[t.typeset] || FONTS.grotesk; r.style.setProperty("--font-ui", f.ui + ", system-ui, sans-serif"); r.style.setProperty("--font-body", f.body + ", system-ui, sans-serif"); r.style.setProperty("--font-quote", f.quote + ", Georgia, serif"); r.style.setProperty("--gap", (GAP[t.density] || 22) + "px"); }, [t]); // ---- pipeline: filter -> sort ---- const visible = useMemo(() => { let list = ALL.slice(); if (types.length) list = list.filter((i) => types.includes(i.type)); if (tag) list = list.filter((i) => (i.tags || []).includes(tag)); if (query.trim()) { const q = query.toLowerCase(); list = list.filter((i) => searchText(i).includes(q)); } if (sort === "newest") list.sort((a, b) => b.year - a.year); else if (sort === "oldest") list.sort((a, b) => a.year - b.year); else if (sort === "shuffle") { const r = seedRand("s" + shuffleSeed); list = list.map((x) => [x, r()]).sort((a, b) => a[1] - b[1]).map((x) => x[0]); } return list; }, [ALL, types, tag, query, sort, shuffleSeed]); // type counts for chips const counts = useMemo(() => { const c = {}; ALL.forEach((i) => { c[i.type] = (c[i.type] || 0) + 1; }); return c; }, [ALL]); // bump entrance animation when the set/order changes uE(() => { setGen((g) => g + 1); }, [types, tag, query, sort, shuffleSeed, layout]); // ---- scatter positions ---- const boardRef = uR(null); const [pos, setPos] = uS({}); uE(() => { if (layout !== "scatter") return; const wEl = boardRef.current; const W = (wEl ? wEl.clientWidth : 1200) - 52; const cw = COL_W; const cols = Math.max(1, Math.floor(W / (cw + 28))); const colH = new Array(cols).fill(30); const next = {}; visible.forEach((it, idx) => { const r = seedRand(it.id + "p"); const col = idx % cols; const x = 26 + col * (cw + 28) + (r() - 0.5) * 30; const y = colH[col] + (r() - 0.5) * 16; next[it.id] = { x, y, rot: (r() - 0.5) * 4 }; colH[col] = y + 250 + r() * 160; }); setPos(next); }, [layout, visible]); const scatterHeight = useMemo(() => { if (layout !== "scatter") return undefined; let max = 800; Object.values(pos).forEach((p) => { if (p.y > max) max = p.y; }); return max + 420; }, [pos, layout]); // ---- handlers ---- const toggleType = (ty) => setTypes((p) => p.includes(ty) ? p.filter((x) => x !== ty) : [...p, ty]); const onTag = (tg) => setTag((cur) => cur === tg ? null : tg); const cycleSort = () => setSort((s) => s === "added" ? "newest" : s === "newest" ? "oldest" : "added"); const doShuffle = () => { setSort("shuffle"); setShuffleSeed((s) => s + 1); }; const sortLabel = { added: "Recent", newest: "Newest", oldest: "Oldest", shuffle: "Shuffled" }[sort]; // ---- focus mode ---- const openFocus = (id) => { const i = visible.findIndex((x) => x.id === id); if (i >= 0) setFocus(i); }; const closeFocus = () => { setFocus(null); AudioEngine.stop(); }; const step = uCB((d) => setFocus((f) => f == null ? f : (f + d + visible.length) % visible.length), [visible.length]); uE(() => { if (focus == null) return; const onKey = (e) => { if (e.key === "Escape") closeFocus(); else if (e.key === "ArrowRight") { AudioEngine.stop(); step(1); } else if (e.key === "ArrowLeft") { AudioEngine.stop(); step(-1); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [focus, step]); // scatter drag const dragRef = uR(null); const onScatterDown = (e, id) => { if (layout !== "scatter") return; if (window.matchMedia("(max-width: 720px), (pointer: coarse)").matches) return; if (e.target.closest("button,a,input,iframe")) return; const start = { mx: e.clientX, my: e.clientY, ...(pos[id] || { x: 0, y: 0 }) }; dragRef.current = id; const card = e.currentTarget; card.classList.add("dragging"); const move = (ev) => { setPos((p) => ({ ...p, [id]: { ...p[id], x: start.x + (ev.clientX - start.mx), y: Math.max(10, start.y + (ev.clientY - start.my)) } })); }; const up = () => { card.classList.remove("dragging"); dragRef.current = null; window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); }; const cw = COL_W, tile = TILE; return (
{/* ---------- top bar ---------- */}

Inspiration Board
setQuery(e.target.value)} placeholder="Search notes, tags, sources…" />
{/* ---------- filter rail ---------- */}
Type
{TYPE_ORDER.filter((ty) => counts[ty] > 0).map((ty) => ( ))}
{(tag || types.length || query) &&
} {tag && (
#{tag}
)} {(types.length > 0) && ( )}
{/* ---------- board ---------- */}
{ e.preventDefault(); setDragOver(true); } : undefined} onDragLeave={loadErr ? () => setDragOver(false) : undefined} onDrop={loadErr ? (e) => { e.preventDefault(); setDragOver(false); loadFromFile(e.dataTransfer.files && e.dataTransfer.files[0]); } : undefined}> {data === null && !loadErr && (
loading items.json…
)} {loadErr && (

Preview your board locally

Opened straight from your disk, the browser won't let the page read items.json. Drop the file anywhere here — or pick it — to preview now. Once this folder is served over http (your live site, or a dev server) the board loads on its own.

loadFromFile(e.target.files[0])} />
or run this in the folder, then refresh
python3 -m http.server 8000
)}
{data && !loadErr && visible.length === 0 && (
nothing matches — try clearing a filter
)} {visible.map((it) => { const p = pos[it.id]; return (
onScatterDown(e, it.id)}>
); })}
{/* ---------- focus / gallery ---------- */} {focus != null && visible[focus] && (
e.stopPropagation()}> {String(focus + 1).padStart(2, "0")} / {String(visible.length).padStart(2, "0")} focus mode · {TYPE_META[visible[focus].type].label}
e.stopPropagation()}>
{ setTag(tg); closeFocus(); }} />
e.stopPropagation()}> ← → browse esc close
)} {/* ---------- tweaks ---------- */} setTweak("theme", v)} /> setTweak("accent", v)} /> setTweak("texture", v)} /> setTweak("typeset", v)} /> setTweak("cardStyle", v)} /> setTweak("density", v)} />
); } function layoutBtn(active) { return active ? { color: "var(--bg)", background: "var(--text)" } : undefined; } ReactDOM.createRoot(document.getElementById("root")).render();