e.stopPropagation()}>
{firstRun ? "Welcome to Whiteboard" : "About Whiteboard"}
Whiteboard is your private, local-first dashboard for the things you’re
keeping track of — work, home, health, money and travel — all in one
place. Everything lives in this browser; nothing is sent anywhere
unless you turn on sync.
Your six tabs
{CATEGORIES.map((c, i) => (
{i + 1}
{c.label}
{CATEGORY_BLURBS[c.id]}
))}
Good to know
The banners up top always surface what’s overdue and
what’s next up across every tab.
Press 1 –6 to switch tabs, ⌘F to
search, ⌘Z to undo, and ⌘⇧T for appearance
tweaks (or use the ⚙ button).
Whiteboard is built around what’s in front of you now —
it surfaces the next thing due rather than burying you in everything at
once. Use the Calendar button to export upcoming dates
as an .ics file for your calendar app.
Use Gist in the bottom bar to optionally sync across
devices through a private GitHub gist — your data and token stay in
your browser.
Reopen this guide any time from the ? button in the
corner.
{firstRun ? "Get started" : "Got it"}
);
}
// Short, friendly per-tab descriptions used in the welcome guide.
const CATEGORY_BLURBS = {
academic: "Deadlines, teaching, timetable, service, readings.",
research: "Projects, advisees, submissions, proposals, calls, reviews.",
household: "Chores, shopping lists and reminders.",
health: "Habits to keep and health reminders.",
finance: "Grants, bills, loans, savings and investments.",
travel: "Trips, packing, documents and a wishlist.",
};
// ─── useTweaks defaults ───
const TWEAK_DEFAULTS = {
__key: "whiteboard",
density: "default",
themeMode: "time", // "time" | "system" | "light" | "dark"
darkMode: false, // legacy — read only as a migration fallback
autoTheme: true, // legacy — read only as a migration fallback
font: "system",
hue: 268,
fontSize: 13,
panelRadius: 14,
panelOpacity: 82,
sidebarWidth: 260,
currency: "₹",
};
// ─── Main App ───
function App() {
const [state, setState] = useState(() => loadLocal());
const [tab, setTab] = useState("academic");
const [now, setNow] = useState(new Date());
const [profileName, setProfileNameState] = useState(() => getProfileName() || "");
const [syncConfig, setSyncConfigState] = useState(() => getSyncConfig());
const [syncStatus, setSyncStatus] = useState("");
const [lastSyncedAt, setLastSyncedAt] = useState(0);
const [searchQuery, setSearchQuery] = useState("");
const [showUndo, setShowUndo] = useState(false);
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [showSetup, setShowSetup] = useState(false);
// First-run intro shows before anything else; the name prompt waits until the
// intro is dismissed so the two modals never stack. `showHelp` reopens the
// same guide later from the help (?) button.
const [showIntro, setShowIntro] = useState(() => !getIntroSeen());
const [showHelp, setShowHelp] = useState(false);
const [showName, setShowName] = useState(() => getIntroSeen() && !profileName);
// Mobile-only slide-out menu (search + sync actions + help/tweaks). On desktop
// these live in the top bar / footer / FABs; the drawer is hidden there.
const [menuOpen, setMenuOpen] = useState(false);
// Lock background scroll while the drawer is open.
useEffect(() => {
document.body.style.overflow = menuOpen ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [menuOpen]);
const fileInputRef = useRef(null);
const searchRef = useRef(null);
const undoStackRef = useRef([]);
const undoTimerRef = useRef(null);
const hasLoadedRemoteRef = useRef(false);
const stateRef = useRef(state);
const [storageError, setStorageError] = useState("");
// Tracks the OS dark-mode preference, kept live so the "System" theme mode
// follows the user's setting without a reload.
const [systemDark, setSystemDark] = useState(
() => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
);
// ─── Clock effect ───
useEffect(() => {
const id = setInterval(() => setNow(new Date()), 30000);
return () => clearInterval(id);
}, []);
useEffect(() => { stateRef.current = state; }, [state]);
// ─── System theme preference ───
useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia("(prefers-color-scheme: dark)");
const onChange = (e) => setSystemDark(e.matches);
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, []);
// Keep every in-app form as a React-only interaction. A native submit falls
// back to navigating to the current page, which looks exactly like a reload.
useEffect(() => {
const preventNativeSubmit = (e) => e.preventDefault();
document.addEventListener("submit", preventNativeSubmit, true);
return () => document.removeEventListener("submit", preventNativeSubmit, true);
}, []);
// ─── Density class ───
useEffect(() => {
document.documentElement.dataset.density = tweaks.density || "default";
}, [tweaks.density]);
// ─── Font class ───
useEffect(() => {
document.documentElement.dataset.font = tweaks.font || "system";
}, [tweaks.font]);
// ─── Dark mode ───
// Theme has four modes: "time" follows the clock (light through the day, dark
// evening/early morning), "system" follows the OS preference, and "light" /
// "dark" are fixed. Older boards stored autoTheme/darkMode booleans; fall back
// to those so the setting migrates without a reset.
const themeMode = tweaks.themeMode
|| (tweaks.autoTheme ? "time" : (tweaks.darkMode ? "dark" : "light"));
// Resolve the effective theme once. Everything that reacts to dark/light reads this.
const isDark =
themeMode === "time" ? (now.getHours() < 7 || now.getHours() >= 19)
: themeMode === "system" ? systemDark
: themeMode === "dark";
useEffect(() => {
document.documentElement.classList.toggle("dark", isDark);
}, [isDark]);
// ─── Hue tweaks ───
useEffect(() => {
document.documentElement.style.setProperty("--hue", tweaks.hue);
document.documentElement.style.setProperty("--accent", `hsl(${tweaks.hue}, 48%, 56%)`);
document.documentElement.style.setProperty("--accent-soft", `hsla(${tweaks.hue}, 48%, 56%, 0.14)`);
}, [tweaks.hue]);
// ─── Panel surface tweaks ───
useEffect(() => {
const s = document.documentElement.style;
const alpha = (tweaks.panelOpacity || 82) / 100;
const panelBg = isDark
? `rgba(22, 22, 30, ${alpha})`
: `rgba(255, 255, 255, ${alpha})`;
s.setProperty("--panel-bg", panelBg);
s.setProperty("--panel-radius", `${tweaks.panelRadius || 14}px`);
s.setProperty("--sidebar-width", `${tweaks.sidebarWidth || 260}px`);
s.setProperty("--font-size-base", `${tweaks.fontSize || 13}px`);
}, [isDark, tweaks.panelOpacity, tweaks.panelRadius, tweaks.sidebarWidth, tweaks.fontSize]);
// ─── Initial remote sync ───
useEffect(() => {
if (!hasSyncConfig(syncConfig)) {
hasLoadedRemoteRef.current = false;
return;
}
let cancelled = false;
setSyncStatus("Syncing…");
fetchRemote(syncConfig)
.then(async (remoteState) => {
if (cancelled) return;
const localNow = stateRef.current;
if (remoteState && remoteState.academic) {
// Resolve by last-modified time rather than "did local change since
// load", so a stale local copy can't clobber newer remote data.
const remoteAt = remoteState.meta?.updatedAt || 0;
const localAt = localNow.meta?.updatedAt || 0;
if (remoteAt > localAt) {
setState(remoteState);
} else if (localAt > remoteAt) {
await pushRemote(syncConfig, localNow);
}
// Equal timestamps: already in sync, nothing to do.
} else {
await pushRemote(syncConfig, localNow);
}
if (!cancelled) {
setLastSyncedAt(Date.now());
setSyncStatus("");
}
})
.catch((err) => {
if (!cancelled) {
console.error("Initial sync failed:", err);
setSyncStatus("Sync failed");
setTimeout(() => setSyncStatus(""), 3000);
}
})
.finally(() => {
if (!cancelled) hasLoadedRemoteRef.current = true;
});
return () => { cancelled = true; };
}, [syncConfig]);
// ─── Sync on state change ───
useEffect(() => {
const ok = saveLocal(state);
if (!ok) {
setStorageError("Could not save — browser storage may be full.");
const t = setTimeout(() => setStorageError(""), 5000);
return () => clearTimeout(t);
}
setStorageError("");
}, [state]);
const debouncedSync = useMemo(
() => debounce(async (cfg, s) => {
if (!hasSyncConfig(cfg)) return;
try {
setSyncStatus("Syncing…");
await pushRemote(cfg, s);
setLastSyncedAt(Date.now());
setSyncStatus("");
} catch (err) {
console.error("Sync failed:", err);
setSyncStatus("Sync failed");
setTimeout(() => setSyncStatus(""), 3000);
}
}, 2000),
[]
);
useEffect(() => {
if (hasSyncConfig(syncConfig) && hasLoadedRemoteRef.current) debouncedSync(syncConfig, state);
}, [state, syncConfig, debouncedSync]);
// ─── safeUpdate (push undo before state change) ───
const safeUpdate = useCallback((updater) => {
const prevState = stateRef.current;
undoStackRef.current.push(structuredClone(prevState));
if (undoStackRef.current.length > 10) undoStackRef.current.shift();
const computed = typeof updater === "function" ? updater(prevState) : updater;
// Stamp the modification time so sync can resolve which side is newer.
setState({ ...computed, meta: { ...(computed.meta || {}), updatedAt: Date.now() } });
// Surface the undo toast only for discrete actions (add/remove/toggle/date),
// not character-by-character text edits.
if (!isTextOnlyChange(prevState, computed)) {
setShowUndo(true);
clearTimeout(undoTimerRef.current);
undoTimerRef.current = setTimeout(() => setShowUndo(false), 4000);
}
}, []);
// ─── updateSlice ───
// Returns a setter that replaces one list (e.g. academic.deadlines) and routes
// it through safeUpdate — so every panel's onChange is one call, not a repeated
// nested-spread that's easy to get subtly wrong.
const updateSlice = useCallback(
(catKey, listKey) => (value) =>
safeUpdate((prev) => ({ ...prev, [catKey]: { ...prev[catKey], [listKey]: value } })),
[safeUpdate]
);
// ─── Undo ───
const handleUndo = useCallback(() => {
const prev = undoStackRef.current.pop();
if (prev) {
setState(prev);
setShowUndo(false);
}
}, []);
// ─── Keyboard shortcuts ───
useEffect(() => {
const handler = (e) => {
const tag = e.target.tagName;
const isInput = tag === "INPUT" || tag === "TEXTAREA" || e.target.isContentEditable;
const key = e.key.toLowerCase();
if ((e.ctrlKey || e.metaKey) && key === "z") {
e.preventDefault();
handleUndo();
return;
}
if ((e.ctrlKey || e.metaKey) && key === "f") {
e.preventDefault();
searchRef.current?.focus();
return;
}
if (!isInput) {
if (e.key === "1") setTab("academic");
if (e.key === "2") setTab("research");
if (e.key === "3") setTab("household");
if (e.key === "4") setTab("health");
if (e.key === "5") setTab("finance");
if (e.key === "6") setTab("travel");
}
};
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, [handleUndo]);
// ─── Search filtering ───
const filteredResults = useMemo(() => {
const q = searchQuery.toLowerCase().trim();
if (!q) return null;
const results = [];
// The bulk of search: one pass over the registry, one row → one result.
for (const src of SEARCH_SOURCES) {
for (const item of src.list(state) || []) {
if (src.hay(item).toLowerCase().includes(q)) {
results.push({ cat: src.cat, type: src.type, text: src.text(item), id: item.id });
}
}
}
// Nested / fan-out cases the row→result registry can't express:
// a grant's budget heads each surface separately…
for (const g of state.finance.grants) {
for (const h of g.heads || []) {
if ((h.name || "").toLowerCase().includes(q)) results.push({ cat: "finance", type: "Budget head", text: `${h.name} · ${g.title}`, id: g.id });
}
}
// …and goals live on every tab under the same key.
for (const cat of ["academic", "research", "household", "health", "finance", "travel"]) {
for (const g of state[cat].goals || []) {
const label = `${g.text || ""} ${g.note || ""}`;
if (label.toLowerCase().includes(q)) results.push({ cat, type: "Goal", text: g.text, id: g.id });
}
}
return results;
}, [searchQuery, state]);
const goToSearchResult = useCallback((r) => {
setTab(r.cat);
setSearchQuery("");
requestAnimationFrame(() => {
const el = document.querySelector(`[data-mb-id="${r.id}"]`);
if (!el) return;
el.scrollIntoView({ behavior: "smooth", block: "center" });
el.classList.add("search-highlight");
setTimeout(() => el.classList.remove("search-highlight"), 2000);
});
}, []);
// ─── Sync actions ───
const handleSync = useCallback(async () => {
if (!hasSyncConfig(syncConfig)) return;
setSyncStatus("Pushing…");
try {
await pushRemote(syncConfig, state);
setLastSyncedAt(Date.now());
setSyncStatus("");
} catch (err) {
console.error("Push failed:", err);
setSyncStatus("Push failed");
setTimeout(() => setSyncStatus(""), 3000);
}
}, [state, syncConfig]);
// ─── Export ───
const handleExport = useCallback(() => {
const blob = new Blob([JSON.stringify(state, null, 2)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `whiteboard-${new Date().toISOString().slice(0, 10)}.json`;
a.click();
URL.revokeObjectURL(url);
}, [state]);
// ─── Calendar (.ics) export ───
//
// Every dated item across the board becomes an all-day VEVENT, so the same
// dates the banners surface can be pulled into any calendar app.
const handleIcsExport = useCallback(() => {
const pad = (n) => String(n).padStart(2, "0");
const dt = (ts) => {
const d = new Date(ts);
return `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}`;
};
const esc = (s) => String(s || "").replace(/[\\;,]/g, (m) => "\\" + m).replace(/\n/g, "\\n");
const stamp = new Date().toISOString().replace(/[-:]/g, "").slice(0, 15) + "Z";
const lines = ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Whiteboard//EN", "CALSCALE:GREGORIAN"];
let i = 0;
eachDatedItem(state, ({ ts, kind, text }) => {
const day = dt(ts);
const next = dt(ts + MS.DAY);
lines.push(
"BEGIN:VEVENT",
`UID:whiteboard-${i++}-${ts}@whiteboard`,
`DTSTAMP:${stamp}`,
`DTSTART;VALUE=DATE:${day}`,
`DTEND;VALUE=DATE:${next}`,
`SUMMARY:${esc(`[${kind}] ${text}`)}`,
"END:VEVENT"
);
});
lines.push("END:VCALENDAR");
const blob = new Blob([lines.join("\r\n")], { type: "text/calendar" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `whiteboard-${new Date().toISOString().slice(0, 10)}.ics`;
a.click();
URL.revokeObjectURL(url);
}, [state]);
// ─── Import ───
const handleImport = useCallback((e) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
try {
const data = JSON.parse(ev.target.result);
const normalized = normalizeState(data);
if (normalized) {
safeUpdate(normalized);
} else {
alert("Invalid Whiteboard data format");
}
} catch {
alert("Failed to parse file");
}
};
reader.onerror = () => {
alert("Failed to read file");
};
reader.readAsText(file);
e.target.value = "";
}, [safeUpdate]);
const triggerImport = useCallback(() => {
fileInputRef.current?.click();
}, []);
// ─── Setup done ───
const handleSetupDone = useCallback(async (config) => {
setShowSetup(false);
setSyncStatus("Syncing…");
try {
const mergedConfig = { ...syncConfig, ...config };
const connectingExisting = !!mergedConfig.gistId;
const nextConfig = connectingExisting ? mergedConfig : await createRemote(state, mergedConfig);
setSyncConfigState(nextConfig);
setSyncConfig(nextConfig);
hasLoadedRemoteRef.current = true;
// If the filename changed on an existing gist, drop the old file too.
const oldFilename = syncConfig.gistId === nextConfig.gistId ? syncConfig.filename : null;
if (connectingExisting) {
// Connecting to an existing gist: pull first and resolve by last-modified
// time so a stale/empty local copy can't clobber newer remote data.
const remoteState = await fetchRemote(nextConfig);
const localNow = stateRef.current;
if (remoteState && remoteState.academic) {
const remoteAt = remoteState.meta?.updatedAt || 0;
const localAt = localNow.meta?.updatedAt || 0;
if (remoteAt > localAt) {
setState(remoteState);
// Rewrite under the new filename / drop the old file if it was renamed.
if (oldFilename && oldFilename !== nextConfig.filename) {
await pushRemote(nextConfig, remoteState, oldFilename);
}
} else {
// Local is newer (or equal): keep local, push it up.
await pushRemote(nextConfig, localNow, oldFilename);
}
} else {
// Remote is empty or unreadable under this filename: safe to seed it.
await pushRemote(nextConfig, localNow, oldFilename);
}
} else {
// createRemote already wrote local state into the new gist.
}
setLastSyncedAt(Date.now());
setSyncStatus("");
} catch (err) {
console.error("Setup sync failed:", err);
setSyncStatus("Sync failed");
setShowSetup(true);
}
}, [state, syncConfig]);
const handleDisconnectSync = useCallback(() => {
const emptyConfig = { token: "", gistId: "", filename: "whiteboard.json" };
setSyncConfigState(emptyConfig);
setSyncConfig(emptyConfig);
hasLoadedRemoteRef.current = false;
setSyncStatus("");
setShowSetup(false);
}, []);
// ─── Name done ───
const handleNameDone = useCallback((name) => {
setProfileNameState(name);
setProfileName(name);
setShowName(false);
}, []);
// ─── Intro dismissed ───
// Remember the intro was seen, then prompt for a name if we don't have one.
const handleIntroClose = useCallback(() => {
setShowIntro(false);
setIntroSeen(true);
setShowName((prev) => prev || !getProfileName());
}, []);
// ─── Render tab panels ───
const renderPanels = (catId) => {
const s = state[catId];
switch (catId) {
case "academic":
return (
{filteredResults.map((r) => {
const cat = CATEGORIES.find((c) => c.id === r.cat);
return (
goToSearchResult(r)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); goToSearchResult(r); } }}
style={{ borderLeftColor: cat?.accent || "var(--line-2)", cursor: "pointer" }}
>
{r.cat}
{r.type}
{r.text}
);
})}
{/* Header */}
{/* Mobile-only menu trigger (top-right); opens the slide-out drawer. */}
setMenuOpen(true)}
aria-label="Open menu"
aria-expanded={menuOpen}
>
{greeting}{displayName ? <>{", "}{displayName} : ""}
{now.toLocaleDateString(undefined, { weekday: "long" })}, {now.toLocaleDateString(undefined, { month: "long", day: "numeric" })}
{(stats.overdue > 0 || stats.week > 0) && (
{stats.overdue > 0 && (
{stats.overdue} overdue
)}
{stats.week > 0 && (
{stats.week} due this week
)}
)}
{storageError &&
{storageError} }
{/* Always rendered so it reserves its slot — fades in/out instead of
mounting/unmounting, which kept reflowing the view on every sync. */}
{syncText || " "}
{/* Overdue and Next-up banners */}
{nearestOverdue && (
c.id === nearestOverdue.cat)?.accent }}
>
Overdue
{nearestOverdue.kind}
{nearestOverdue.text}
{formatNextWhen(nearestOverdue.ts)}
)}
{nextUp && (
c.id === nextUp.cat)?.accent }}
>
Next up
{nextUp.kind}
{nextUp.text}
{formatNextWhen(nextUp.ts)}
)}
{/* Tab navigation */}
{CATEGORIES.map((c, i) => {
const selected = tab === c.id;
return (
setTab(c.id)}
title={c.label}
aria-label={c.label}
onKeyDown={(e) => {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
const dir = e.key === "ArrowRight" ? 1 : -1;
const next = CATEGORIES[(i + dir + CATEGORIES.length) % CATEGORIES.length];
setTab(next.id);
requestAnimationFrame(() => document.getElementById(`tab-${next.id}`)?.focus());
}}
style={selected ? { borderBottomColor: c.accent, color: c.accent } : {}}
>
{c.label}
);
})}
{/* Search */}
{/* Panels or search results */}
{searchQuery.trim() ? renderSearchResults() : renderPanels(tab)}
{/* Sync bar (desktop; on mobile these actions live in the menu drawer) */}
{menuActions.map((a) => (
{a.label}
))}
{hasSyncConfig(syncConfig) && (
Sync Now
)}
{/* Hidden import target — kept outside the footer so it still works when
the footer is hidden on mobile (the file dialog is opened from the menu). */}
{/* Mobile menu — slides in from the right with search + sync actions +
help/tweaks. Hidden on desktop, where those live in the top bar/FABs. */}
setMenuOpen(false)}
/>
{/* Keyboard hints */}
1–6 — switch tabs
⌘F — search
⌘Z — undo
⌘⇧T — tweaks
{/* Credits */}
{/* Undo toast */}
{showUndo && (
Undo available
Undo
)}
{/* Modals */}
{showSetup && (
setShowSetup(false)}
onDone={handleSetupDone}
onDisconnect={handleDisconnectSync}
/>
)}
{showName && setShowName(false)} onDone={handleNameDone} />}
{showIntro && setShowHelp(false)} />}
{/* Help button — sits beside the settings gear, reopens the guide */}
setShowHelp(true)}
title="What is Whiteboard? (help)"
aria-label="Open the Whiteboard guide"
>
?
{/* Tweaks panel */}
setTweak("themeMode", v)}
/>
setTweak("density", v)}
/>
setTweak("font", v)}
/>
setTweak("hue", v)}
/>
setTweak("currency", v)}
/>
setTweak("fontSize", v)}
/>
setTweak("panelRadius", v)}
/>
setTweak("panelOpacity", v)}
/>
setTweak("sidebarWidth", v)}
/>
);
}
// ─── Mount ───
ReactDOM.createRoot(document.getElementById("root")).render(
);