Accent
{ACCENT_OPTIONS.map((a) => (
Density
{["cozy", "comfortable"].map((d) => (
))}
Layout
{[
{ id: "stack", label: "Stack" },
{ id: "scroll", label: "Horizontal" },
].map((l) => (
))}
Theme
{["light", "dark"].map((t) => (
))}
);
}
// ---------- App ----------
function App() {
const lessons = window.LESSONS;
const total = lessons.length;
const [groupIdx, setGroupIdx] = useState(() => {
const v = localStorage.getItem("ai30.group");
return v ? Number(v) : 0;
});
const [expandedDay, setExpandedDay] = useState(() => {
const v = localStorage.getItem("ai30.expanded");
return v ? Number(v) : null;
});
const [completed, setCompleted] = useState(() => {
try {
return new Set(
JSON.parse(localStorage.getItem("ai30.completed") || "[]")
);
} catch {
return new Set();
}
});
const tweakDefaults = /*EDITMODE-BEGIN*/ {
"accent": "indigo",
"density": "comfortable",
"theme": "light",
"layout": "stack"
} /*EDITMODE-END*/;
const [tweaks, setTweaks] = useState(tweakDefaults);
const [tweaksVisible, setTweaksVisible] = useState(false);
const [openResource, setOpenResource] = useState(null);
// Persist
useEffect(() => localStorage.setItem("ai30.group", String(groupIdx)), [groupIdx]);
useEffect(
() =>
localStorage.setItem(
"ai30.expanded",
expandedDay == null ? "" : String(expandedDay)
),
[expandedDay]
);
useEffect(
() => localStorage.setItem("ai30.completed", JSON.stringify([...completed])),
[completed]
);
// Apply tweaks
useEffect(() => {
applyAccent(tweaks.accent);
applyDensity(tweaks.density);
document.documentElement.dataset.theme = tweaks.theme;
window.parent.postMessage(
{ type: "__edit_mode_set_keys", edits: tweaks },
"*"
);
}, [tweaks]);
// Edit mode hookup
useEffect(() => {
const onMsg = (e) => {
if (e.data?.type === "__activate_edit_mode") setTweaksVisible(true);
if (e.data?.type === "__deactivate_edit_mode") setTweaksVisible(false);
};
window.addEventListener("message", onMsg);
window.parent.postMessage({ type: "__edit_mode_available" }, "*");
return () => window.removeEventListener("message", onMsg);
}, []);
const group = GROUPS[groupIdx];
const visible = lessons.filter((l) => l.day >= group.start && l.day <= group.end);
const completedCount = completed.size;
const toggleExpand = (day) =>
setExpandedDay((cur) => (cur === day ? null : day));
const toggleComplete = (day) =>
setCompleted((prev) => {
const next = new Set(prev);
if (next.has(day)) next.delete(day);
else next.add(day);
return next;
});
const reset = () => {
if (!confirm("Reset all progress?")) return;
setCompleted(new Set());
setExpandedDay(null);
setGroupIdx(0);
};
return (
{
setGroupIdx(i);
setExpandedDay(null);
}}
completedSet={completed}
/>
{tweaks.layout === "scroll" ? (
{visible.map((lesson) => (
toggleExpand(lesson.day)}
onComplete={() => toggleComplete(lesson.day)}
onOpenResource={(r) => setOpenResource(r)}
/>
))}
Swipe to explore
{visible.length} cards
) : (
{visible.map((lesson) => (
toggleExpand(lesson.day)}
onComplete={() => toggleComplete(lesson.day)}
onOpenResource={(r) => setOpenResource(r)}
/>
))}
)}
setOpenResource(null)} />
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(