// Mobile app — full iPhone layout with real data // ── Top-level mobile router ── function MobileApp() { const [tab, setTab] = React.useState("today"); const [stack, setStack] = React.useState([]); const store = useNbStore(); const push = (screen) => setStack((s) => [...s, screen]); const pop = () => setStack((s) => s.slice(0, -1)); const switchTab = (t) => { setTab(t); setStack([]); }; const current = stack[stack.length - 1] || null; const renderCurrent = () => { if (!current) return null; switch (current.type) { case "hw-detail": return ; case "subject-notes":return ; case "note-detail": return ; case "quiz-take": return ; case "grades": return ; case "schedule": return ; default: return null; } }; return (
{current ? renderCurrent() : ( <> {tab === "today" && } {tab === "homework" && } {tab === "notes" && } {tab === "study" && } {tab === "more" && } )}
{!current && }
); } // ── Bottom tab bar ── function MobileTabBar({ active, onTab }) { const tabs = [ { id: "today", label: "Today", icon: }, { id: "homework", label: "Homework", icon: }, { id: "notes", label: "Notes", icon: }, { id: "study", label: "Study", icon: }, { id: "more", label: "More", icon: }, ]; return (
{tabs.map(({ id, label, icon }) => { const isActive = active === id; return ( ); })}
); } // ── Shared mobile header ── function MobileHeader({ title, subtitle, onBack, right }) { return (
{onBack && ( )}
{title}
{subtitle &&
{subtitle}
}
{right &&
{right}
}
); } // ── TODAY ── function MobileToday({ push }) { const store = useNbStore(); const profile = React.useMemo(() => { try { return JSON.parse(localStorage.getItem("nb-profile-v1") || "null"); } catch { return null; } }, []); const fbUser = useFbUser(); const name = fbUser ? fbUser.displayName?.split(" ")[0] : (profile?.name || "there"); const now = new Date(); const dayName = now.toLocaleDateString("en-US", { weekday: "long" }); const dateStr = now.toLocaleDateString("en-US", { month: "short", day: "numeric" }); const hour = now.getHours(); const greeting = hour < 12 ? "Good morning," : hour < 17 ? "Good afternoon," : "Good evening,"; const allHw = [...HOMEWORK, ...store.homework]; const dueToday = allHw.filter((h) => !h.done && (h.due === "Tonight" || h.due === "Tomorrow" || h.urgent)); const streak = nbGetStreak(); const sched = nbGetSchedule(); const todayClasses = sched ? sched.periods?.filter((p) => p.name && p.name !== "Free") : []; return (
{/* Header */}
{dayName} · {dateStr}
{greeting} {name}.
{dueToday.length > 0 ? `${dueToday.length} thing${dueToday.length !== 1 ? "s" : ""} due` : "All caught up ✓"} {todayClasses.length > 0 ? ` · ${todayClasses.length} classes today` : ""}
{/* Streak card */}
Study streak
{streak} days
{[...Array(7)].map((_, i) => (
))}
{/* Due today */} {dueToday.length > 0 && (
Due today
{dueToday.slice(0, 5).map((h, i) => { const s = subjectBy(h.subject); return (
push({ type: "hw-detail", hw: h })} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 16px", borderBottom: i < dueToday.length - 1 ? "1px solid var(--hairline)" : "none", cursor: "pointer" }}>
{h.title}
{s?.short || h.subject} · {h.est || "—"}
{h.due}
); })}
)} {/* Quizzes ahead */} {QUIZZES_UPCOMING.length > 0 && (
Quizzes ahead
{QUIZZES_UPCOMING.slice(0, 3).map((q) => { const s = subjectBy(q.subject); return (
{s?.short} · {q.when}
{q.title}
); })}
)} {/* Subjects quick access */} {SUBJECTS.length > 0 && (
Subjects
{SUBJECTS.map((s) => (
push({ type: "subject-notes", id: s.id })} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12, padding: "14px 16px", cursor: "pointer", position: "relative", overflow: "hidden" }}>
{s.name}
{s.short}
))}
)}
); } // ── HOMEWORK ── function MobileHomework({ push }) { const store = useNbStore(); const [filter, setFilter] = React.useState("all"); // all | pending | done const allHw = [...HOMEWORK, ...store.homework]; const filtered = filter === "all" ? allHw : filter === "pending" ? allHw.filter(h => !h.done) : allHw.filter(h => h.done); return (
!h.done).length} open`} right={ } /> {/* Filter pills */}
{[["all","All"],["pending","Pending"],["done","Done"]].map(([k, l]) => ( ))}
{filtered.length === 0 && (
{filter === "done" ? "Nothing completed yet." : "All caught up ✓"}
)} {filtered.map((h) => { const s = subjectBy(h.subject); return (
{ e.stopPropagation(); nbToggleHomework(h.id); }} style={{ width: 22, height: 22, borderRadius: 6, border: `1.5px solid ${h.done ? "var(--ink)" : "var(--ink-3)"}`, background: h.done ? "var(--ink)" : "transparent", display: "grid", placeItems: "center", flexShrink: 0, cursor: "pointer" }}> {h.done && }
push({ type: "hw-detail", hw: h })} style={{ flex: 1, minWidth: 0, cursor: "pointer" }}>
{h.title}
{s?.short || h.subject} · {h.est || "—"}
{h.due}
); })}
); } // ── HW DETAIL ── function MobileHWDetail({ hw, onBack }) { const store = useNbStore(); const s = subjectBy(hw.subject); const attachments = store.attachmentsFor("hw", hw.id); return (
{/* Meta */}
{[["Subject", s?.name || hw.subject], ["Due", hw.due], ["Est.", hw.est || "—"], ["Type", hw.tag || "—"]].map(([label, val]) => (
{label}
{val}
))}
{/* Notes */} {hw.dueNote && (
{hw.dueNote}
)} {/* Attachments */} {attachments.length > 0 && (
Attachments
{attachments.map((a) => ( {fileIconFor(a.type, a.name)} {a.name} {fmtFileSize(a.size)} ))}
)} {/* Toggle done */}
); } // ── NOTES ── function MobileNotes({ push }) { const store = useNbStore(); return (
{SUBJECTS.length === 0 && (
No subjects yet.
)} {SUBJECTS.map((s) => { const notes = [...(notesForSubject(s.id) || []), ...(store.notesFor(s.id) || [])]; return (
push({ type: "subject-notes", id: s.id })} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 14, padding: "16px", cursor: "pointer", position: "relative", overflow: "hidden", display: "flex", alignItems: "center", gap: 14 }}>
{s.name}
{s.teacher ? `${s.short} · ${s.teacher}` : s.short} · {notes.length} note{notes.length !== 1 ? "s" : ""}
); })}
); } // ── SUBJECT NOTES ── function MobileSubjectNotes({ subjectId, onBack }) { const store = useNbStore(); const s = subjectBy(subjectId); const builtIn = notesForSubject(subjectId) || []; const userNotes = store.notesFor(subjectId) || []; const allNotes = [...userNotes, ...builtIn]; const [push2, setPush2] = React.useState(null); if (push2) { return setPush2(null)} />; } return (
window.dispatchEvent(new CustomEvent("openQuickAdd", { detail: { type: "note", subjectId } }))} style={{ background: "var(--ink)", color: "var(--bg)", border: 0, borderRadius: 8, padding: "6px 12px", fontFamily: "var(--f-mono)", fontSize: 12, cursor: "pointer" }}> + Note } />
{allNotes.length === 0 && (
No notes yet.
)} {allNotes.map((n) => (
setPush2(n.id)} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12, padding: "14px 16px", cursor: "pointer" }}>
{n.title}
{n.when} {n.tags?.map(t => {t})}
{n.blocks?.[0]?.text && (
{n.blocks[0].text}
)}
))}
); } // ── NOTE DETAIL ── function MobileNoteDetail({ subjectId, noteId, onBack }) { const s = subjectBy(subjectId); const builtIn = notesForSubject(subjectId) || []; const store = useNbStore(); const userNotes = store.notesFor(subjectId) || []; const note = [...userNotes, ...builtIn].find(n => n.id === noteId); if (!note) return
Note not found.
; const override = nbGetNoteOverride(noteId); const blocks = (override?.blocks || note.blocks || []); return (
{note.tags?.length > 0 && (
{note.tags.map(t => {t})}
)} {blocks.map((b, i) => { if (b.type === "h1") return

{b.text}

; if (b.type === "h2") return

{b.text}

; if (b.type === "ul") return
  • {b.text}
    • ; if (b.type === "ol") return
  • {b.text}
    • ; if (b.type === "blockquote") return
    {b.text}
    ; if (b.type === "code") return 
    {b.text}
    ; return

    {b.text || " "}

    ; })}
    ); } // ── STUDY ── function MobileStudy({ push }) { const store = useNbStore(); const quizzes = [...QUIZZES_UPCOMING, ...store.notesFor ? [] : []]; const customDecks = nbGetCustomDecks(); const userQuizzes = nbGetQuizzes(); return (
    {/* Upcoming quizzes */} {QUIZZES_UPCOMING.length > 0 && (
    Upcoming quizzes
    {QUIZZES_UPCOMING.map((q) => { const s = subjectBy(q.subject); return (
    push({ type: "quiz-take", quiz: q })} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderLeft: `3px solid ${s?.color || "var(--accent)"}`, borderRadius: 12, padding: "14px 16px", cursor: "pointer", display: "flex", alignItems: "center" }}>
    {s?.short} · {q.when}
    {q.title}
    {q.cards?.length || 0} cards
    ); })}
    )} {/* Custom decks */} {customDecks.length > 0 && (
    Flashcard decks
    {customDecks.map((d) => (
    push({ type: "quiz-take", quiz: { title: d.title, cards: d.cards } })} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12, padding: "14px 16px", cursor: "pointer", display: "flex", alignItems: "center" }}>
    {d.title}
    {d.cards?.length || 0} cards
    ))}
    )} {QUIZZES_UPCOMING.length === 0 && customDecks.length === 0 && (
    No quizzes or decks yet.
    )}
    ); } // ── QUIZ TAKE (mobile flashcard) ── function MobileQuizTake({ quiz, onBack }) { const cards = quiz.cards || []; const [idx, setIdx] = React.useState(0); const [flipped, setFlipped] = React.useState(false); const [results, setResults] = React.useState([]); // "got" | "missed" const done = idx >= cards.length; const card = cards[idx]; const answer = (r) => { setResults((prev) => [...prev, r]); setFlipped(false); setIdx((i) => i + 1); }; if (cards.length === 0) return (
    No cards in this deck.
    ); if (done) { const got = results.filter(r => r === "got").length; return (
    {Math.round(got / cards.length * 100)}%
    {got} of {cards.length} correct
    ); } return (
    {/* Progress bar */}
    {/* Card */}
    setFlipped(f => !f)} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 20, padding: "40px 24px", minHeight: 220, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", cursor: "pointer" }}>
    {flipped ? "Answer" : "Question"}
    {flipped ? card.back : card.front}
    {!flipped &&
    Tap to reveal
    }
    {/* Answer buttons */} {flipped && (
    )}
    ); } // ── MORE ── function MobileMore({ push }) { const fbUser = useFbUser(); const profile = React.useMemo(() => { try { return JSON.parse(localStorage.getItem("nb-profile-v1") || "null"); } catch { return null; } }, []); const displayName = fbUser ? fbUser.displayName : (profile?.name || "Student"); const handleSignIn = () => { if (!window.__fbAuth || !window.__fbGoogleProvider) return; const provider = new window.__fbGoogleProvider(); window.__fbAuth.signInWithPopup(provider).catch(console.error); }; const handleSignOut = () => window.__fbAuth?.signOut(); const rows = [ { label: "Grades", icon: "★", onPress: () => push({ type: "grades" }) }, { label: "Schedule", icon: "📅", onPress: () => push({ type: "schedule" }) }, ]; return (
    {/* Profile card */}
    {fbUser?.photoURL ? :
    {displayName.charAt(0).toUpperCase()}
    }
    {displayName}
    {profile?.grade ? (profile.grade.charAt(0).toUpperCase() + profile.grade.slice(1)) : ""} {fbUser ? " · Synced" : " · Local only"}
    {/* Nav rows */}
    {rows.map(({ label, icon, onPress }, i) => (
    {icon} {label}
    ))}
    {/* Auth */}
    {fbUser ? (
    ↩ Sign out
    ) : (
    Sign in with Google
    )}
    ); } // ── GRADES (mobile) ── function MobileGrades({ onBack }) { const grades = nbGetPref("grades", {}); const entriesFor = (sid) => grades[sid] || []; const avgFor = (sid) => { const es = entriesFor(sid); if (!es.length) return null; const pts = es.reduce((s, e) => s + e.score, 0); const max = es.reduce((s, e) => s + e.total, 0); return max > 0 ? pts / max : null; }; const toLetterGrade = (p) => { if (p >= 0.97) return "A+"; if (p >= 0.93) return "A"; if (p >= 0.90) return "A−"; if (p >= 0.87) return "B+"; if (p >= 0.83) return "B"; if (p >= 0.80) return "B−"; if (p >= 0.77) return "C+"; if (p >= 0.73) return "C"; if (p >= 0.70) return "C−"; return p >= 0.60 ? "D" : "F"; }; const gradeColor = (p) => p >= 0.90 ? "var(--done)" : p >= 0.80 ? "var(--info)" : p >= 0.70 ? "var(--ochre)" : "var(--accent)"; return (
    {SUBJECTS.map((s) => { const avg = avgFor(s.id); const entries = entriesFor(s.id); return (
    {s.name}
    {entries.length > 0 ? `${entries.length} score${entries.length !== 1 ? "s" : ""}` : "No scores yet"}
    {avg !== null && (
    )}
    {avg !== null ? ( <>
    {toLetterGrade(avg)}
    {Math.round(avg * 100)}%
    ) :
    —
    }
    {entries.length > 0 && (
    {entries.map((e) => { const ep = e.score / e.total; return (
    {e.title}
    {e.score}/{e.total}
    {Math.round(ep * 100)}%
    ); })}
    )}
    ); })}
    ); } // ── SCHEDULE (mobile) ── function MobileSchedule({ onBack }) { const sched = nbGetSchedule(); const periods = sched?.periods || []; const now = new Date(); const timeStr = (t) => t || ""; return (
    {periods.length === 0 && (
    No schedule set.
    )} {periods.map((p, i) => { const s = p.subject ? subjectBy(p.subject) : null; const isEmpty = !p.name || p.name === "Free"; return (
    {p.start || `P${i + 1}`}
    {p.name || "Free"}
    {p.room &&
    Room {p.room}
    }
    ); })}
    ); } Object.assign(window, { MobileApp });