← QuranFlow — the redesign

QuranFlow iOS App — Product Specification

Screen-by-screen functional specification for the redesigned QuranFlow app, derived from the finalized Sakīna mockup (../mockup/). This document describes behavior — purpose, data, states, actions, navigation, and role gating — not implementation. It is the handoff artifact for engineering.

Sources: ../mockup/src/main.jsx (screen inventory), AUDIT.md (design rules and per-screen audit log), REVIEW.md (adjudicated design decisions — binding where old and new mockup sections conflicted), FEEDBACK-SYNTHESIS.md (stakeholder requirements that motivated the F1–F5 screens).

1. Overview

Product. QuranFlow is a Qur'anic recitation app built around a 15-week semester. Each week a Year-1 student watches a lesson video, records a recitation submission, receives audio feedback from an assigned coach, and (depending on level) attends live sessions. Year-2 students watch the same weekly lesson but do not record weekly submissions — a weekly one-to-one appointment with a coach replaces the submission, and feedback arrives as the coach's post-appointment notes. Coaches use a companion Coach app to review submissions, track student history, and manage their own live-session schedule.

Revised Jul 26 2026 (product review with Lejla, Jul 24): the earlier model — "Year 2 = everything Year 1 has, plus a recurring 1:1" — was wrong. Year 2 has no weekly submissions at all; appointments replace them (up to three per week, any coach on the team, included in tuition — superseded Jul 27 2026: the count is plan-based, bought at checkout, never a universal cap; see the next note, point (5), and Section F5 "Book your one-to-one"). New students now enter through a web checkout → email sign-in → first-assessment → placement flow before they see any Year-1 screen. See the new "Account status and entry flow" subsection below, the new Section E (entry) and Section Y2 (Year 2) screen groups in §3, and the revised F1 / F5 / Coach screens. Working defaults for the details Lejla has not yet confirmed are marked "default, pending Lejla (Qn)" against the questions in ../../explorations/flow-map/QUESTIONS-FOR-LEJLA.md.

Revised Jul 27 2026 (Lejla review). A screen-by-screen review with Lejla on Jul 27 (decision record: ../../reviews/App-Review-Jul27-Lejla.md) overturned five defaults the Jul-24 pass had encoded and reshaped the entry lane. The load-bearing corrections: (1) the first assessment is a recorded recitation, not a booked 1:1 — the student records themselves reading through four graded stages (letter recognition → words → a short surah everyone knows → a more technical ayah), and the recording routes like a normal submission to a pooled first-assessment coach team, who place the level from it. The student-facing surface avoids the word "assessment" (PROPOSED rename "your first recitation", pending Lejla — Q16; the coach side keeps "first assessment"). (2) Level 0 (signed up, not yet placed) is a real, full-featured status — the whole app minus lessons, with assigned live classes and level-0 resources, the pending recording shown as a submission awaiting feedback; waiting is student-paced (days to ~3 weeks), and a never-submitter is auto-placed into Level 2. (3) the script-choice onboarding screen and the font-picker settings feature are both cut — one Madani-compatible web font renders ~98% of cases, so there is no script choice to offer (the feature exists, hidden and unusable, in the current app). (4) sign-in is email + password from the welcome email — no magic-link primary, no in-app registration — and the almaghrib.org enrollment pointer is removed (App Store anti-steering; compliance flag: any sales-pointing copy needs a compliance check). (5) Year-2 appointment counts are purchased per plan at checkout (default 1/week; only the Tajweed Practice elective sells 2–3), so the UI states the student's own plan ("Your plan includes N appointments a week"), never a universal cap. Year-2 lessons are per-elective (only Tajweed Practice has none); the sole universal Y1→Y2 difference is the feedback format. Scope caveat: the Jul 27 walkthrough reached ~screen 13–14 before moving off-topic — screens 16–39 (Today, the recording/submission states, the Year-2 loop, the coach side, the shared surfaces) were not reviewed, so no changes to them are inferred beyond the cross-cutting copy corrections annotated per-screen below. Program brand names ("Mastery" / "Essentials", "Advanced Tajweed Rules", "Tajweed Practice") and all pricing are internal only — never in student-facing UI.

Roles.

Role Description App surface
Level 0 — new / not yet placed (Revised Jul 27) Enters by web checkout or auto-enrollment; signs in with email + password from a welcome email. Records a first recitation (a submission to a pooled first-assessment coach) and stays Level 0 until placed — the full app minus lessons (the pending recitation shows as a submission; assigned Level-0 live classes + resources). Never sees the weekly lesson loop until placed. Placement is student-paced; never-submitters auto-place into Level 2. Student app, entry lane + full-app-minus-lessons (Sign in, Your first recitation, Level 0 waiting, Placement result)
Year 1 student Submission-centric. No 1:1 appointments. Live sessions are group circles (QRC, Level Class, Office Hours). Student app, Year-1 view
Year 2 student Appointment-centric. No submissions/recording — one-to-one appointments replace them. Revised Jul 27: appointment count is plan-based, purchased at checkout (1/week default; Tajweed Practice 2–3), and lessons are per-elective (each elective has its own syllabus; Tajweed Practice has none). The one universal Y1→Y2 difference is the feedback format: per-appointment teacher's notes. Student app, Year-2 view (Today — Year 2, appointment booking, teacher's notes)
Coach Reviews submissions, replies with audio feedback, manages a personal schedule (group sessions + 1:1s), summarizes appointments into teacher's notes, keeps shared student notes. One coach per student for Year-1 review routing; Year-2 appointments may be with any coach on the team; Revised Jul 27: first-assessment recitations route to a shared pooled queue (the proposed replacement for today's shared-login hack — coach screens were not re-reviewed, so this ships as a proposal). Coach app

Revised Jul 26 2026 (product review with Lejla, Jul 24): the "New student" row and the corrected Year-2 row are new. A student's account status — new / Year 1 / Year 2 / coach — is the top-level gate that decides which screens they see; see "Account status and entry flow" below.

Revised Jul 27 2026 (Lejla review): the "New student" app-surface list above is corrected — the entry lane is Sign in → two-to-three supportive screens → your first recitation (recorded, not booked) → Level 0 / waiting → placement result, not "Book your first assessment". A new student in Level 0 sees the full app minus lessons (assigned live classes, level-0 resources, the pending recording as a submission awaiting feedback), not a bare entry lane. See the corrected entry flow below and Section E.

The mockup's reference student is Sarah — Level II, Week 8 of 15, coach Ustadha Amina (audio feedback).

Organizing principle: Weekly Rhythm. Every core screen orients the student inside a fifteen-week arc — "Week 8 of 15" — rather than as a flat list of content or an isolated task. This solves the disorientation identified in the original audit (NN/g HEART methodology, Nov 2025): students lost track of where they stood in the semester. The week strip (SakStrip total={15} done={7} current) is the single recurring visual anchor for this; per AUDIT.md Rule R1, it appears once per screen, never duplicated as a second caption or footer.

Account status and entry flow

Revised Jul 27 2026 (app review with Lejla, Jul 27; supersedes the Jul 26 draft of this subsection). A student's account status is the top-level gate that decides which screens they ever see:

Status How they arrive What they see
Level 0 (new / not yet placed) Web checkout, or auto-enrollment (a level graduate rolling forward); signs in with email + password from a welcome email. The full app minus lessons: the first recitation shows as a pending submission, plus assigned Level-0 live classes and resources. Never the weekly lesson loop until placed.
Year 1 Placed into a Year-1 level from the first recitation. The submission loop (this document's default student view).
Year 2 A Level-4 graduate auto-enrolled into the mandatory first semester, or a returning student who chose an elective at checkout. The appointment loop — per-elective lessons (Tajweed Practice has none), no submissions.
Coach Admin-granted role. The Coach app surface (§3 Section C).

Entry flow for a new (Level 0) student (screens in §3 Section E):

  1. Arrival — off-app. Nobody registers in the app. Two ways in: web checkout (almaghrib.org — new students, Year-2 elective sign-ups, repeats) or auto-enrollment with auto-billing (level graduates roll into the next level; a Level-4 graduate auto-enrolls into Year 2's mandatory first semester, read as "Advanced Tajweed Rules" — name to confirm, Q15). Auto-enrollees get an email, no checkout. The app never sells (App Store rules); any sales-pointing copy needs a compliance check.
  2. Sign in — email + password from the welcome email (the ten-year-old system; the magic-link default is dropped). The screen doesn't mention enrollment, carries no external-enrollment footer, and offers a quiet "Need help signing in?" (resend credentials).
  3. Arriving screens — two or three supportive screens between sign-in and the first recitation, in the register of habit/onboarding apps ("you made it; this was the hardest step"). The audience skews toward perfectionism and assessment-anxiety; a process-walkthrough video is a candidate here (parked). Copy is placeholder register pending Yasmeen's pass.
  4. Your first recitation — Revised Jul 27: a recorded submission, not a booking (Q1). A short series of graded reading screens (letter recognition → words → a short surah → a technical ayah) that the student records; it routes like a weekly submission to a pooled first-assessment coach, who places the level. Rehearsal-first: the reading is viewable without recording, re-record freely, nothing is sent until "send." Proposed student-facing name "Your first recitation" (coach side keeps "First assessment") — rename to confirm, Q16.
  5. Level 0 (waiting) — Revised Jul 27: not a quiet hold. The student sees the full app minus lessons; the pending recitation appears as a submission awaiting feedback; the state actively offers the next Level-0 live session ("come sit in on a live circle first — you won't be asked to read"). Placement is student-paced — days to ~3 weeks — with no 48-hour SLA (Q2). Students who never submit get reminder emails after the semester starts, then are auto-placed into Level 2.
  6. Placement result — hands into onboarding. New students place into a Year-1 level only; the only route into Year 2 is graduating Level 4 (Q3). Two variants: a normal placed-from-recitation result, and an auto-placed variant for never-submitters that does not celebrate a grading that never happened ("We've placed you in Level II to get you started; your coach fine-tunes from your first weekly recitation" — tone to confirm, pending Lejla).

Auto-enrollment / re-entry. Level graduates roll into the next level on auto-billing and re-enter through the welcome → your level → weekly rhythm onboarding screens, which double as the re-entry flow (no separate returning-student variant). A Level-4 graduate auto-enrolled into Year 2's mandatory first semester gets a celebratory hype sequence (they can unenroll; historically only ~20% continued), while returning Year-2 students who chose an elective at checkout arrive already sold — no hype. Source: the Jul 27 review, ../../reviews/App-Review-Jul27-Lejla.md, and the flow map, ../../explorations/flow-map/.

2. Navigation map

Student app — four root tabs

Revised Jul 26 2026: these four tabs are the placed-student view. A new student sees only the entry lane (§1 "Account status and entry flow") until placement; a Year-2 student's Today is a variant (Today — Year 2, §3 Section Y2) with an appointment hero and no record CTA. Coaches see the coach tab bar — Queue / Students / Schedule / You (§3 Section C).

Revised Jul 27 2026: a not-yet-placed student is Level 0 and sees these four tabs too — the full app minus lessons (Learn is empty/locked; the first recitation shows as a pending submission), not a separate held lane. The lesson loop unlocks only at placement.

  1. Today — the daily landing screen: date, current lesson status, today's live sessions (inline expanding rows), submission deadline reminder.
  2. Learn — the syllabus: current lesson hero, part list, lesson history.
  3. Sessions — the weekly live-session timeline (day-strip + Tuesday-focused view by default), with a Recordings sister-state reached via a segmented control, and a calendar icon in the header that opens Week at a glance (a lower-density, full-week overview — see B2 below).
  4. You — identity, coach panel, submissions archive, settings, subscription, support.

Drill hierarchy (screens reached by tapping into a tab, not tabs themselves)

Notification deep-link targets

Per REVIEW.md C4, SakSessionDetail / SakSessionDetailQRC (full session detail pages) are not reached by any on-canvas tap — they exist solely as the destination when a student taps a session-reminder push notification. Other deep-link targets:

Coach app — four root tabs

The coach tab bar defines four tabs — Queue, Students, Schedule, You — and all four are designed destinations. The walkthrough (../walkthrough/QuranFlow-Walkthrough.html) is the source of truth for how they behave as a shell: each tab roots its own navigation stack, and the coach set is rendered by the same tab-bar component as the student set, so the two are one shell with two tab sets rather than two apps.

  1. Queue — the coach's oldest-pending-first review queue, carrying a count badge of submissions waiting (5 in the demo world, 4 once the demonstrated review is sent — the badge tracks the list rather than restating a constant). Rows → Review a submission.
  2. Students — the full roster for her cohort, with search and status filters. Rows → Student record.
  3. Schedule — the coach's own calendar in her own timezone: group sessions + 1:1 rows, each labeled Recurring or This week only (REVIEW.md D1).
  4. You — the coach's own corner: identity, her auto-logged hours for the week, notification settings, and the labelled way back to her student app.

Entering and leaving. The coach app is a role-gated section of the one app, not a separate app, so there is no mode switch in the chrome: a coach reaches it from a "View the coach app" row in the student You tab's Support group, which re-roots onto Queue, and leaves it from "Switch to your student app" on the coach You screen, which re-roots onto the student You tab. Coaches are students too — the round trip is the reason the You tab exists.

Drill screens: Review queue row → Review a submission (assignment text + audio + annotation + reply, the "unified workspace" from the coach questionnaire). Student record is reached from a roster row, a queue row, or a 1:1 row on Schedule, and carries shared notes visible to any coach who has taught that student (cross-coach visit history — REVIEW.md A4's Ust. Rania shared-note example). A completed 1:1 row on Schedule → Coach — appointment notes.

3. Screen-by-screen specification

Organized in main.jsx artboard order. Each entry: purpose, key content/data, states, actions and destinations, role gating.

Dates. Entries quote whichever day their source screen shows. The artboard's demo day is Tue · 17 Apr; the walkthrough's canonical demo day is Tue 25 Mar (../walkthrough/build-notes/design-sources/FIXTURES.md). Neither is wrong — where a date is load-bearing because two screens must agree on the same appointment, the entry quotes the walkthrough's.

Section 00 — The four tabs

Today (SakToday)

Purpose. Daily landing screen; answers "what do I do today?"

Key content. Header eyebrow "Tue · 17 Apr" + greeting "Good morning, Sarah." Hero card (ink, the screen's one anchor): "Today's lesson" eyebrow, lesson title ("Idghām with ghunnah"), meta line "1 video · 1 recording · about 12 min," the week strip (SakStrip total={15} done={7} current), "Week 8 of 15" label, and a single primary CTA "Continue" → enters Lesson. Below the hero: Sessions today section listing the day's live sessions (SessionRow) — e.g. 2:00 PM QRC "Sisters' Reading Circle" with Ust. Radwa (live now, showing "Join"), 7:00 PM "Idghām review & practice" (also Ust. Radwa). A verse closer (Arabic + citation only, no translation) closes the screen.

States. Live session row shows a "Join" pill instead of a chevron. Non-live rows are tappable to expand an inline shelf (see Actions).

Actions / destinations.

Role gating. This SakToday is the Year-1 Today. Revised Jul 26 2026: Year-2 students see a distinct Today — Year 2 (§3 Section Y2) — appointment hero, no record CTA — not this screen. (The prior claim that Today was identical for Year 1 and Year 2 no longer holds now that submissions are Year-1-only.)

Learn — syllabus (SakLearn)

Purpose. The syllabus: current lesson + full 15-week structure grouped into three parts.

Key content. Header "Spring 2026 · Level II" eyebrow, title "Your syllabus." "Current lesson" paper hero card: title "Idghām with ghunnah," week strip, CTA "Open lesson." Below: three collapsible Parts (flat tappable rows, not cards) — "1 · Foundations" (3 lessons, all done), "2 · Tajweed rules" (6 lessons, lesson 8 current, 9 next), "3 · Application & review" (6 lessons, all upcoming). The part containing the current lesson is expanded by default; opening a part reveals its lesson rows in a quiet card. Closing panel: "By June 22, you'll" — one sentence stating the term's outcome ("Read short sūrahs aloud with steady tajweed, and submit a final recital of Al-Mulk to your coach").

States. Each lesson row is done (checkmark, struck through), current (open-book icon, highlighted), next, or soon. Each Part's collapsed summary line reads differently depending on progress: "N lessons · all done," "X of N done · in progress," or "N lessons · starts Wk N."

Actions. Tapping "Current lesson" hero or a lesson row → Lesson. Tapping a Part row toggles expand/collapse (no navigation).

Role gating. None.

Sessions — Tuesday timeline (SakSchedule)

Purpose. The week's live-session schedule, timeline-style, defaulting to the current day.

Key content. Header eyebrow "Tue · 17 Apr," title "Sessions," calendar icon action. Segmented control: Upcoming / Recordings (Upcoming selected here — see 00a for the Recordings state). A 7-day day-strip (Sat 22 → Fri 28, Tuesday selected/today). A quiet zone banner: "All times shown in Toronto (EDT)" (REVIEW.md B3). Below, a vertical timeline for the selected day with a gold "now" thread. Canonical Tuesday items (REVIEW.md A3): 9:20 AM "One-to-one — recitation" with Ustadha Amina (type chip "1:1," state ended — Year 2 only, see Role gating), 2:00 PM "Sisters' Reading Circle" (QRC) with Ust. Radwa (state soon, countdown "in 12 min," shows a live "Join" pill), 7:00 PM "Idghām review & practice" (Level Class) with Ust. Radwa (state upcoming).

States. Each timeline row is ended (dimmed, play icon instead of chevron), soon/live (gold "Join" pill, no expand), or upcoming (tappable, expands an inline shelf identical to Today's — coach, what's covered, Open Zoom / Remind me). A deadline row type exists in the component (dashed border, "Due today · Submission deadline") for weeks where a deadline falls on the viewed day.

Actions / destinations.

Role gating. The 1:1 / "One-to-one" row appears only for Year 2 accounts. Year 1 accounts never see it (REVIEW.md C2). Entry to booking: Sessions ▸ calendar icon ▸ "Book your one-to-one" (also surfaced during Year-2 enrollment).

Revised Jul 26 2026 (product review with Lejla, Jul 24): a Year-2 week may now hold more than one appointment row (up to three, default pending Lejla (Q5)), and those appointments may be with different coaches — the single fixed 9:20 AM recurring row shown in the canonical Tuesday layout is illustrative, not a constraint. The recurring "same slot every week" model is dropped pending Q13 (see Book your one-to-one, Section F5). Year-2 students primarily reach their appointments from Today — Year 2 (§3 Section Y2); this Sessions row remains available. Revised Jul 27 2026 (Lejla review): how many appointment rows a week can hold reflects the student's purchased plan (default 1; 2–3 only on a Tajweed Practice plan), not a universal cap of three — see Book your one-to-one, Section F5 (Q5 corrected). Q13 itself remains open.

Profile (SakProfile)

Naming. SakProfile is the artboard's component id and is kept as written — it names code. The tab it renders is called You in the product (tab bar, screen title, walkthrough), which is why the prose throughout this spec says You. The same holds for SakProfileFirstWeek (Section 06). Not a drift to re-open.

Purpose. Identity, coach relationship, account/settings/support menus.

Key content. Frontispiece card: avatar (with camera/edit affordance), full name "Sarah Ahmed," "Level II · Reading with fluency," three stats (7 weeks done, 6 submissions, 85% attendance). Your Quran coach panel (ink card): "Ustadha Amina al-Qārī," "Certified · Level I–II · Cairo," a mini waveform line ("1 note"), primary CTA "Message" (REVIEW.md B5 — standardized verb) → Message thread. Three menu groups:

Actions / destinations. Each menu row is a drill (chevron) to its named destination, except Sign out (destructive, no chevron).

Role gating. None on this screen itself (Year 2's appointment surfaces live under Sessions, not the You tab).

Section 00a — Tab states

Sessions — Recordings (SakScheduleRecordings)

Purpose. Sister-state of the Sessions tab: past sessions that have a recording, in place of the Upcoming timeline.

Key content. Same header/segmented control/day-strip chrome as Upcoming, with "Recordings" selected. Rows grouped by week ("This week," "Week 7 · Apr 8–14," "Week 6 · Apr 1–7"), each row showing a video thumbnail (partial-watch progress bar if in progress), type chip, title, coach, date, and duration (e.g. "Tue · 9 Apr · 10:00 AM · Level Class · Idghām — practice patterns · Ust. Radwa · 52:04"). Watched state is labeled "watched" (fully seen) or "N% in" (partial).

Actions. Tapping a recording row plays it (implementation detail: opens video playback; no separate screen defined in this mockup).

Role gating. None.

Section E — Entry & placement (new Jul 26 2026)

Revised Jul 26 2026 (product review with Lejla, Jul 24). Four new screens a new student sees before any Year-1 screen — designed in the shared Sakīna kit; source persona in ../walkthrough/build-notes/design-sources/FIXTURES.md (Sarah Ahmed, just enrolled). A new student must never reach the weekly loop until placement (see §1 "Account status and entry flow"). Working defaults are marked "default, pending Lejla (Qn)".

Sign in (entry-sign-in)

Purpose. First app touchpoint. The account already exists from web checkout, so this is sign-in, not sign-up.

Key content. QuranFlow seal, "Sign in to QuranFlow," an email field, and a primary sign-in action. Default, pending Lejla (Q4): the primary path is a passwordless magic link emailed after web checkout ("We'll email you a sign-in link"), with a password field as fallback.

Actions. Sign in → routes by account status: new → your first recitation (Jul 27; was "Book your first assessment"); Year 1 → Today; Year 2 → Year 2 orientation (first run) or Today — Year 2; coach → Coach app.

Role gating. Shown to any signed-out account; the destination is status-dependent.

Revised Jul 27 2026 (Lejla review): sign-in is email + password against credentials from the welcome email — the ten-year-old system that works. The magic-link-primary default is dropped (Q4 answered). The footer "New to QuranFlow? Enrollment happens at almaghrib.org" is removed (App Store anti-steering); a quiet "Need help signing in?" affordance (resend credentials) takes its place. The copy does not mention enrollment. No in-app registration — every account already exists from off-app checkout or auto-enrollment.

Your first recitation (entry-book-assessment)

Renamed Jul 27 2026 (Lejla review): was "Book your first assessment". The screen is not a booking — see the correction block below. The artboard id is unchanged for now.

Purpose. A new student books the live 1:1 that will place them in a level.

Key content. Eyebrow "Welcome to QuranFlow," title "Book your first assessment," short "what this is" copy, and the appointment slot-grid (the same pattern as F5's booking). Persona state: Ustadha Amina · Thursday 29 January · 4:30 PM local · 20 min. Default, pending Lejla (Q1): the assessment is a live 1:1 on the existing live-session surface, graded against the First Assessment rubric; there is no separate assessment screen beyond this booking and the live session itself.

Actions. Confirm a slot → Waiting for placement.

Role gating. New students only.

Revised Jul 27 2026 (Lejla review). The whole screen above is overturned (Q1 answered). The first assessment is a recorded recitation, not a booked 1:1 — there is no slot-grid here.

Waiting for placement (entry-waiting)

Purpose. A held Today for the window between booking the assessment and being placed. The new student has no lessons and no recording yet.

Key content. Assessment date and time, a short "what happens next" ("After your assessment, your coach places you in a level — usually within 48 hours"), and nothing else: no lesson hero, no record CTA, no week strip. Default, pending Lejla (Q2): the 48-hour placement promise mirrors the coach-feedback SLA.

States. Before the assessment (upcoming date shown); after the assessment, awaiting the result ("Your coach is placing you").

Actions. None required — a waiting state. May offer "Add to calendar" for the assessment.

Role gating. New students only.

Revised Jul 27 2026 (Lejla review). This is Level 0 — a real status, not a quiet hold (Q2 answered). Level 0 = signed up, not yet placed (recitation not sent, or sent and awaiting placement). The interface is the full app minus lessons: assigned live classes intended for Level-0 students, level-0 resources, and the pending recording shown as a submission awaiting feedback. Waiting is student-paced — days to ~3 weeks, not a 48-hour SLA (the old default is dropped). The screen actively offers the next Level-0 live session — the documented anxiety medicine: sitting in on a circle lets a student see others reading imperfectly and loosen up ("Come sit in on a live circle first — you won't be asked to read"). A student who never submits gets reminder emails after the semester starts, then is auto-placed into Level 2 (see the quieter placement-result variant below).

Placement result (entry-placement)

Purpose. Delivers the level and hands into onboarding.

Key content. Roman-numeral medallion, "You're placed in Level II," "Reading with fluency," a warm one-line orientation, and a primary CTA into the six-step onboarding. Default, pending Lejla (Q3): a new student is placed into a Year-1 level only, never directly into Year 2.

Actions. Continue → Onboarding (Section 05). After onboarding the account is a Year-1 student and sees the standard four tabs.

Role gating. New students only; shown once, on placement.

Revised Jul 27 2026 (Lejla review). Two variants (proposals, pending Lejla):

Expectation-setting (design note): placement complaints ("I'm placed too low") trace to unrehearsed takes — the supportive screens set the expectation (rehearse first; placement reflects this recording), and the result carries a quiet "questions about your level?" affordance.

Section F1 — Feedback loop

Submission — feedback ready (SakSubmissionFeedback)

Purpose. The unified feedback object: assignment text with the coach's marks, the coach's audio note, timestamped corrections, the student's own recording, and the loop-closing actions — replacing the fragmented notebook/printout/spreadsheet workflow coaches reported (top convergent finding in FEEDBACK-SYNTHESIS.md).

Key content. Eyebrow "Week 7 · Reviewed" (see REVIEW.md A2 — week 7 is the canonical "reviewed" state; week 8 is "in review," tracked by SakSubmissionPending). Assignment passage with the coach's word-anchored marks — a gold underline and a superscript number badge on each marked word. The shipped screen (walkthrough/app/src/screens/submission-feedback.tsx) marks two words of Al-Mulk 67:1–2, numbered 1–2; the artboard's five marks across three āyāt, toned danger (correction needed) and warm (praised), are that artboard's own fixture. Coach feedback card (ink, the squint anchor): "Ustadha Amina," "2 days ago · 2:54," playable waveform, captioned "One note, start to finish — her word notes sit below" — one conversational note played end to end, with the per-word notes beneath it as separate recordings rather than markers inside it. "What to work on" — one card per marked word, and the card is the anatomy: the warm number badge, the word (تَبَارَكَ, "67:1"; ٱلْمَوْتَ, "67:2"), and one voice-note row labelled "Her note on this word" carrying that note's length ("0:14," "0:11"). A point holds no typed instruction and no clipped audio — the word says where, her spoken note says everything else, and the only text on the card is the ayah reference we derive from the word's position. "Your recording" card (2:41, playable). Primary CTA "Practice the corrections" (does not burn an attempt) → Practice the corrections, with sub-copy "Record a corrected take for each point." Two secondary actions: "Mark as heard" and "Voice reply." (Those last three — the "Your recording" card and both secondary actions — are artboard content the walkthrough's revised fb-02 drops by design; the passage, the one note, the point cards and the practice CTA are the shipped screen.)

States. One state: both point cards are always visible. The artboard's collapse-at-3 notes list (SakFeedbackNotes, "Show N more notes") belongs to the superseded structured-marks design — with a point reduced to a word and a voice note, two cards do not need truncating.

Actions / destinations.

Role gating. Student-only screen.

Revised Jul 26 2026 (product review with Lejla, Jul 24): the feedback format is now one conversational voice note as the default — a single spoken pass, not five separate clip-per-mark notes — and, for each point the coach raises, an optional playback of the student's own excerpt for contrast ("here's what you said → here's how it should sound"). This restores the contrast feature coaches valued in the old app. Word-anchored snippets remain available but are now optional refinements layered on the conversational note, not the required structure. The screen still owns the assignment passage, the playable coach note, and the loop-closing actions; only the note's shape and the added per-point contrast playback change.

Corrected Aug 4 2026 (Kamran) — the contrast pair is not the product. The per-point contrast playback the note above mechanizes ("you said → how it should sound": the student's clipped excerpt against a reference recitation) is retracted. It was a design elaboration of a two-word phrase on the coach questionnaire's wishlist — "comparison clips," ask #2, 5/11 coaches (FEEDBACK-SYNTHESIS.md) — and the wishlist phrase never specified the mechanism the spec then drew. "Comparison clips" moves to the v2 wishlist, alongside the makharij diagrams named in the same ask and never modeled either (§5 Backlog).

The canonical anatomy of the coach's feedback, on both seats of the loop:

  1. One long conversational voice note — unchanged, the default and the whole of a minimal review. Played start to finish, like the session.
  2. Optional per-word voice notes — the coach taps a word and records a short note onto it. The word carries the number and the tone; the note carries the content.

Coaches speak, they don't type. A point therefore has no title, no body, no instruction text and no clipped audio — only the word, the ayah reference derived from where it sits, and the recording. The student's side of this is the "What to work on" cards above; the coach's side is Coach — review a submission (Section C).

Submission — in review · revoke window (SakSubmissionPending)

Purpose. State of a just-submitted recording still inside its revoke window — the sole owner of revoke-window UI (REVIEW.md A1; do not duplicate this countdown on the Submitted confirmation screen).

Key content. Eyebrow "Week 8 · In review." "Your recording" card, "sent 3 min ago," 2:41 duration, playable. Revoke window card (dashed border): "Changed your mind?" with a live countdown ("6:52 left"), body copy "Take it back and re-record — it won't count as one of your two weekly attempts," and a "Revoke & re-record" button. "What happens next" card: "Ustadha Amina will listen next · Feedback within 48 hours."

States. Only one state shown (countdown ticking down); the countdown reaching zero is the transition to a closed submission (not separately modeled in the mockup — an engineering-defined transition, not a design one).

Actions. "Revoke & re-record" → discards the submission and returns to Recording — Ready without decrementing the attempt count.

Role gating. Student-only.

Practice the corrections (SakRecPractice)

Purpose. Records a corrected take against one coach note at a time — free of the two-submission weekly limit (REVIEW.md C3).

Key content. Eyebrow "Week 7 · Practice," title "Corrections." Stepper: "Correction 1 of 3" + dot progress. The flagged passage fragment only (e.g. "تَبَارَكَ" underlined) with the coach's correction text ("Stretch the madd — four counts, not two"). A "Hear Ustadha Amina's note" reference-clip card ("from 0:41 · 18 sec"). A breathing accent-colored mic button (visually distinct from the recording flow's red mic — accent/plum signals "practice," not "graded"), with prompt "Record your corrected take" and sub-copy "It attaches to this week's feedback — Ustadha Amina will check it against her notes."

States. Steps through corrections one at a time (this artboard shows step 1 of 3); implies the same screen re-renders for corrections 2 and 3.

Actions. Recording → Practice — review take.

Role gating. Student-only.

Practice — review take (SakRecPracticeReview)

Purpose. Review screen for a practice take — reuses SakRecReview's chrome without modifying that component (REVIEW.md C3); the missing "next state" the practice loop lacked before this addition.

Key content. Eyebrow "Week 7 · Practice," title "Your take." Verse card (compact). "Your recording" duration (0:19), waveform playback card, Play + Re-record buttons. Primary CTA "Attach to feedback" (not "Submit to coach") with sub-copy "Practice takes don't use your weekly attempts." No attempt dots are shown anywhere on this screen — practice takes are exempt from the two-submission limit.

Actions. "Attach to feedback" → attaches this take to the current week's feedback thread (returns to Submission — feedback ready with the new take visible, per the surrounding narrative — exact return screen is an implementation choice). "Re-record" → re-enters recording for this correction.

Role gating. Student-only.

Section F2 — Time & schedule

Week at a glance (SakWeekAtGlance)

Purpose. The full week's schedule on one screen, entirely in local time — answers "what's on this week?" at a lower zoom level than the Sessions tab's day-focused timeline (REVIEW.md B2's "two density levels of one surface").

Key content. Eyebrow "Week 8 · Your local time," title "This week," a calendar-plus header action. Zone banner: "All times shown in Toronto (EDT)." Canonical Week 8 layout (REVIEW.md A3): Monday 23 Apr — 10:00 AM "Idghām with ghunnah" (Class, Ust. Radwa, reminder on); Tuesday 24 Apr — 2:00 PM "Sisters' Reading Circle" (QRC, Ust. Radwa, reminder on) + 7:00 PM "Idghām review & practice" (Class, Ust. Radwa, reminder off); Thursday 26 Apr — 9:00 PM "Drop-in Q&A" (Office Hours, Ustadha Amina, reminder off); Sunday 29 Apr — 11:59 PM "Week 8 submission deadline" (Due, reminder on). Each row shows a bell icon (filled/tinted when a reminder is set). Whole-week action: "Add the week to my calendar." Footer: "Reminders arrive 15 minutes before each session."

Actions. Header calendar-plus icon and the "Add the week to my calendar" row both add calendar entries. Individual row bell icons toggle that item's reminder.

Role gating. None for the shared session/deadline rows. Revised Jul 26 2026: a Year-2 week shows its booked appointments in this list — up to three (default pending Lejla (Q5)), possibly with different coaches — in place of a submission deadline; Year 1 shows the submission deadline and no appointments. (Not shown as a distinct row type in the current mock data, but logically part of the same day-grouped structure.) Revised Jul 27 2026 (Lejla review): the number of appointment rows in a week reflects the student's purchased plan (default 1; 2–3 only on a Tajweed Practice plan), not a universal cap of three — see Book your one-to-one above (Q5).

Section F3 — Communication

Announcements (SakAnnouncements)

Purpose. One-way, audience-filtered board replacing the old community board (FEEDBACK-SYNTHESIS.md decision #2); this is the notification sheet's deep-link target for announcement-type rows (REVIEW.md B4c/C1a).

Key content. Title "Announcements," bell icon. Filter chips: "All" (default, active) / "My level" / "Schedule." Pinned post card (paper, gold hairline): audience "Everyone," "Eid break — no sessions May 4–6," body, "QF Team · 2 days ago." "This week" list: e.g. "Thursday's Level Class moved to 11:00 AM" (Level II audience, from Ust. Radwa — same copy as the notification-sheet row per REVIEW.md B4b), "Running 5 minutes late to tonight's QRC" (Everyone, Ust. Amina), "Week 9 recordings posted" (Level II, QF Team). Footer note: "Announcements are one-way. To reach your coach, send her a message" (links to Message thread).

States. Unread rows show a gold dot indicator.

Actions. Footer "send her a message" link → Message thread.

Role gating. Audience filtering ("My level," "Schedule") implies posts are tagged by year/level and filtered per FEEDBACK-SYNTHESIS.md decision #2; no coach/admin authoring UI is defined in this mockup (out of scope — presumably an admin/coach-side tool).

Messages — Ustadha Amina (SakMessageThread)

Purpose. Guarded 1:1 text/voice thread between student and coach — replacing the peer community board's messaging function (FEEDBACK-SYNTHESIS.md decision #2).

Key content. Eyebrow "Usually replies within a day," title "Ustadha Amina." Date divider ("Tue · 17 Apr"). Message bubbles: student text (right-aligned, accent color, "I can't make tomorrow's appointment. Can I move to Thursday?"), coach text reply (left, panel color, "Thursday 2 PM is open, I've moved you"), coach voice-note bubble (playable, 0:22, timestamp "2:14 PM"). Composer: a voice-first row ("Write to your coach…" placeholder text field + a prominent mic button for voice messages), with a gentle weekly-limit line: "2 of 3 messages left this week" — the guardrail from FEEDBACK-SYNTHESIS.md's messaging decision (weekly caps), surfaced as information, not a hard wall in this mock.

Actions. Mic button → records and sends a voice message. Text field → sends a typed message (implementation detail; no distinct compose screen).

Role gating. Both roles, one screen. The coach side is the same thread in its coach point of view, reached from the header action on Coach — student record (the coach tab bar has no Messages tab of its own, per §2, and does not need one): the sides swap so her reply and voice note are the outgoing bubbles and Sarah's ask arrives on the left, the header names the student ("Sarah M.," "Level II · Week 8"), the composer reads "Write to Sarah…", and the two student-only elements are dropped — the weekly message allowance (a student guardrail, never shown to staff) and the coach-profile drill. No turn is reworded; each line already reads correctly from either side.

Section F4 — Support & pre-semester

Report an issue — sheet (SakReportIssue)

Purpose. Bottom sheet, reachable from any screen, capturing context automatically so the user only has to describe what happened (FEEDBACK-SYNTHESIS.md top-5 finding #5).

Key content. Presented over the current screen (dimmed/blurred backdrop — mockup shows it over Today, but it can open from anywhere). Title "Report an issue," eyebrow "Something's off?" Auto-attached-context row (dashed border, checkmark icon): "Screen, app version and account attach automatically" with the live example "Today · 2.0.1" shown at right — no user action required to populate this. A free-text field ("What happened? What did you expect instead?"). Two submission modes: "Narrate it instead" (voice) and "Send" (text).

Actions. "Send" or a completed narration submits the report with the auto-attached context (current screen name, app version, account ID).

Role gating. Available from any screen, any role (student or coach — the coach questionnaire specifically requested a narrate-instead option).

Today — state: pre-semester (SakTodayCountdown)

Purpose. Named state of Today (REVIEW.md B1) for the window before a semester begins, so Today has a purposeful screen instead of sitting empty.

Key content. Eyebrow "Sat · 12 Sep," greeting "Salaam, Sarah." Countdown hero (ink): "Fall 2026 · Level II" eyebrow, "Class begins in nine days," date "Monday · 21 September," action "Add start date to calendar." "While you wait" checklist card: "Meet your coach" (Ustadha Amina audio welcome, 1 min — done), "Choose your Qur'an script" (done), "Watch the welcome lesson" (not done, chevron). Revised Jul 27 2026 (Lejla review): drop the "Choose your Qur'an script" checklist row — the script/font feature is cut (Section 05 step 3). Replace it with another prep item (e.g. "Set your availability" for a placed student) or remove the row.

Actions. "Add start date to calendar" adds the term start to the device calendar. Unfinished checklist rows are tappable (chevron) to their respective tasks (coach intro, font picker, welcome video).

Role gating. None — applies to any account before their semester start date.

Section F5 — Year 2 appointments

Book your one-to-one (SakBookAppointment)

Purpose. Hybrid booking flow for the Year-2 1:1 (FEEDBACK-SYNTHESIS.md decision: pre-book a fixed weekly slot for the whole booking window, or book week-to-week — the "midnight slot-camping" problem this design solves).

Key content. Eyebrow "Fall 2026 · Year 2," title "Book your one-to-one." Two mode cards: "Same time weekly" ("Lock one slot for all 15 weeks", default selected) vs. "Pick each week" ("Choose a fresh time every week"). Coach card: "Ustadha Amina · Your coach" with a quiet "Change" link (REVIEW.md A4 — changing coach is a legitimate affordance, not a bug). Slot grid, "Tuesdays · 20 min," zone label "Toronto (EDT)": 8:40 AM (taken), 9:00 AM (free), 9:20 AM (free, selected), 9:40 AM (free), 10:00 AM (taken), 10:20 AM (free). Confirm CTA: "Book Tuesdays 9:20 AM · all 15 weeks" (fixed mode) or "Book Tue 24 Apr · 9:20 AM" (flex mode), with mode-specific reassurance copy ("Travelling one week? You can swap any single session later" / "Book up to two in one week to catch up on a missed one").

States. Mode toggle (fixed/flex) changes the slot-grid semantics, CTA label, and footer copy, but not the grid itself in this mock.

Actions. Confirm CTA → Appointment detail. "Change" (coach) → implies a coach-reassignment flow (not designed here).

Role gating. Year 2 only. Entry points: Sessions tab ▸ calendar icon ▸ "Book your one-to-one," and during Year-2 enrollment/onboarding.

Revised Jul 26 2026 (product review with Lejla, Jul 24): booking is now per week. The "Same time weekly · lock one slot for all 15 weeks" recurring mode described above was dropped — a Year-2 student books each appointment for a specific week, and a week may hold 2–3 appointments (soft cap 3, included in tuition — default pending Lejla (Q5)), not necessarily with the same coach. The slot grid therefore spans the team's availability, not one assigned coach's, and the screen shows the week's remaining allowance (e.g. "This week: 2 booked · 1 more available"). Whether to reintroduce an optional "same time weekly" convenience is open — Q13, pending Lejla. Treat the two-mode toggle and the "all 15 weeks" CTA copy above as historical until Q13 resolves.

Revised Jul 27 2026 (Lejla review). The weekly allowance is plan-based, not a universal soft cap of 3. The count a student can book comes from the plan they bought at checkout — default 1/week for every elective, and only Tajweed Practice sells 2–3/week today. The screen states the student's own plan ("Your plan includes N appointments a week"), never a blanket "up to three." Lejla floated opening a 1/2/3 choice to all electives at checkout; Kamran pushed back on checkout friction and she conceded — the copy fix survives, the checkout redesign is not adopted (Q5 corrected). This is documented, not rebuilt (screen not walked through Jul 27).

Appointment — recurring weekly (SakAppointmentDetail)

Purpose. Detail screen for a booked 1:1: join, prepare, reminders, calendar, and the three "quiet management" actions coaches and students both asked for (swap, message, cancel without guilt).

Key content. Chips "One-to-one" + "Recurring · Week 8 of 15." Title "Recitation with Ustadha Amina." Meta row: Time "Tue · 9:20 AM," Duration "20 min," Where "Zoom." "Prepare" section: this week's passage card ("THIS WEEK · Al-Mulk 67:1–5," compact). Primary "Join Zoom" + secondary "Calendar" buttons. Reminder line: "Reminder 15 minutes before · every week." Quiet action card: "Swap this week's time" (keeps the recurring slot for other weeks), "Message Ustadha Amina" ("Running late, or a question before class"), "Can't make it? Cancel this week" ("Even a minute before is fine — it frees the slot" — the guilt-free cancellation from FEEDBACK-SYNTHESIS.md's no-show-anecdote finding).

Actions / destinations. "Join Zoom" → Live class (or the 1:1's Zoom session). "Calendar" → adds this occurrence to the device calendar. "Swap this week's time" → opens a reschedule flow (not separately designed). "Message Ust. Amina" → Message thread. "Cancel this week" → cancels this occurrence only, keeping the recurring booking intact.

Role gating. Year 2 only.

Revised Jul 26 2026 (product review with Lejla, Jul 24): with the recurring model dropped (see Book your one-to-one above, and Q13), this detail describes a single week's appointment, and the coach shown is the coach booked for that appointment — not necessarily the student's Year-1 review coach. The "Recurring · Week N of 15" chip no longer applies pending Q13; treat it as "This week." After the session, the coach's summarized notes attach to this appointment and surface on the new Appointment — teacher's notes screen (§3 Section Y2). Guilt-free cancellation and the swap action carry unchanged (confirm for multi-coach weeks, Q7).

Availability — asked during Year-2 booking (SakOnbAvailability)

Purpose. Collects when a Year-2 student can join live sessions, so the live schedule can be shaped around students rather than the reverse (FEEDBACK-SYNTHESIS.md: "hybrid teacher-first/student-exception scheduling"). Per REVIEW.md C5, this is not part of first-run onboarding — it is asked during the Year-2 booking/enrollment context, header converted to SakNavDrill ("Fall 2026 · Year 2" eyebrow, "Availability" title, no onboarding dots).

Key content. Prompt "When could you join a live circle?" with sub-copy "Pick every time that could work — even odd hours. We shape the live schedule around these answers." A 7-day × 5-time-band grid (Early/Morning/Midday/Evening/Late × Mon–Sun), tappable cells. Demo state has 6 cells picked (Tue Evening/Late, Thu Evening, Sat Morning/Midday, Sun Morning). Footer: "6 windows picked · your local time." Primary CTA "Continue."

Actions. Tapping a grid cell toggles that availability window. "Continue" submits the availability set and proceeds in the booking/enrollment flow.

Role gating. Year 2 only, asked during booking — not during core (6-step) onboarding.

Revised Jul 27 2026 (Lejla review). This becomes an onboarding step for every placed student — Year 1 levels 1–4 and Year 2, but not Level 0 — reversing the Year-2-booking-only framing above (and REVIEW.md C5). The role gating is now "any placed student, during onboarding." What it collects is general availability data consumed by circle, QRC, class, and 1:1 scheduling (modeled once — see DATA-MODEL); the UI surfaces it only as the circles ask. Student-facing prompt stays "When could you join a live circle?" — "Quran reading circle" is the formal internal name and does not surface in copy.

Section Y2 — Year 2 (new Jul 26 2026)

Revised Jul 26 2026 (product review with Lejla, Jul 24). Three new screens for the Year-2 appointment loop. Year 2 watches the same weekly lessons as Year 1 (Learn, Lesson, Video player are shared) but records no submissions — appointments replace them, and feedback arrives as per-appointment teacher's notes. Persona: Hana Yusuf, returning, auto-placed into Year 2, Week 8 of 15 (../walkthrough/build-notes/design-sources/FIXTURES.md).

Year 2 orientation (y2-orientation)

Purpose. A short returning-student series, shown once, explaining what changes in Year 2.

Key content. A few frontispiece steps: appointments replace weekly submissions; how many to book (1/week baseline, up to 3 — default pending Lejla (Q5)); where feedback now lives (per-appointment teacher's notes, not a submission thread). Auto-placement is stated ("You're returning — you're in Year 2").

Actions. Continue through the steps → Today — Year 2. Availability (SakOnbAvailability, F5) is asked here or during first booking, as in Year-1 booking.

Role gating. Year-2 students, first run.

Revised Jul 27 2026 (Lejla review). Corrections:

Today — Year 2 (y2-today)

Purpose. The Year-2 daily landing screen: appointment-centric, no recording.

Key content. Header greeting + week strip ("Week 8 of 15"). The hero is the next appointment, not a lesson-record card: e.g. "Thu 27 Mar · 6:00 PM · Ustadh Kareem," with Join/Prepare and a "Book another" affordance showing the week's remaining allowance ("This week: 2 booked · 1 more available"). The shared lesson row (this week's lesson → Lesson → Video player) is present so Year 2 still watches the lesson. No record CTA anywhere on the screen — the single most important difference from Year-1 Today. A verse closer closes the screen as on Year-1 Today.

States. Appointment done (shows "notes sent," links to teacher's notes) vs. upcoming (shows Join/Prepare).

Actions. Appointment hero → Appointment — teacher's notes (if past) or the live session (if imminent). "Book another" → Book your one-to-one (per-week, F5 revised). Lesson row → Lesson.

Role gating. Year-2 accounts only. Year-1 accounts see the standard SakToday.

Revised Jul 27 2026 (Lejla review). Two corrections (both documented, not built — screen 16+ wasn't walked through on Jul 27):

Appointment — teacher's notes (y2-appointment-notes)

Purpose. The Year-2 feedback object — where the coach's post-appointment summary lands, attached to that appointment/week. Replaces the submission-feedback object for Year 2 (a Year-2 student otherwise keeps no record of a 20-minute session).

Key content. Appointment header (coach, date, week). The coach's summary points (the edited output of the notes pipeline — see Coach — appointment notes, Section C), e.g. the three points from FIXTURES.md: madd lengths in ayah 2, the qalqalah letters, and pace. An optional voice note from the coach (~1:40) plays inline. Written in the copy canon (no diacritics: "Surah al-Mulk").

States. Notes sent (populated) vs. pending (appointment done, coach hasn't sent yet — "Your notes are on the way").

Actions. Play the voice note; tap a point to expand detail. May offer "Message [coach]."

Role gating. Year-2 students only.

Section C — Coach app

The coach tab bar (SakCoachTabBar) defines four tabs: Queue, Students, Schedule, You — each the root of its own navigation stack, all four designed. The artboard mockup draws Queue, Students (the co-05 roster) and Schedule; the walkthrough adds Coach — you, and is the source of truth for how the four behave as one shell (§2, "Coach app — four root tabs").

Revised Aug 3 2026 (coach shell pass). Two standing instructions in this section are superseded. "You" no longer has to be treated as a gap for engineering to fill by analogy with the student You tab — the walkthrough builds that analogy as a designed screen (Coach — you, below). Students is no longer reached contextually only; it is a first-class tab with its own roster screen.

Revised Aug 3 2026 (coach clarity pass). Three changes run through every screen below. 1. The status vocabulary now speaks from the coach's seat. One status value, two labels: "In review" / "Needs review," "Feedback ready" / "Feedback sent" — and the colors never flip, so the pill stays learnable when a coach crosses into her own student app (DESIGN-SYSTEM §5, SubStatusPill pov). Revised Aug 18 2026 (U-435): the pair that used to describe the student's own act ("Heard," "Practiced") is retired; what remains reading the same to both seats is "In review," "Returned" and "Taken back." Where a coach label names a move that isn't hers, the screen says whose (the student record's legend line). 2. A review is taught in two beats, not one. Coach — review a submission now ships the state it opens in as well as the finished one, so word-tap anchoring, the recording gesture and the gated Send are demonstrated rather than described. The audience toggle coaches asked for is restored, with a private branch that sends nothing. 3. The feedback seam is joined. Send is one write across four surfaces: the queue row retires, the Queue tab badge drops, the roster pill flips to "Feedback sent," and the student's own Week 8 becomes "Feedback ready." The board's open question about the review's return route is answered in the queue entry below.

Coach — review queue (SakCoachQueue)

Purpose. Oldest-pending-first queue of submissions awaiting review — the filter coaches explicitly asked for.

Key content. Header: eyebrow "Coach · Ustadha Amina," title "Review queue" — the screen names where she is, rather than greeting her as the artboard's "Salaam, Ust. Amina." header did, since a coach arriving at a queue wants to know where she is. Stat hero: "5 submissions to review." over "Oldest is Sarah's — 2 days. Your 48-hour promise holds." The headline names the work rather than the wait ("to review," not "waiting," which left the number ambiguous about whose move it was) and it counts the rows the screen actually renders, so the number and the list cannot disagree. Filter chips: "Oldest first" (default), "By level," "Least submitted first" (renamed from "Fewest submissions" — it sorts the students who submit least to the top, and the coaches' ask was to find the quiet ones, so the label says which end of the list they land at). Queue rows (avatar-initial, name, level chip, week, duration, waiting time) — Sarah M. (Lvl II, Week 8, 2:41, 2d), Khadija R. (Lvl II, Week 8, 1:58, 1d), Noor A. (Lvl IV, Week 8, 3:05, 22h), Hafsa T. (Lvl I, Week 7, 0:52, 20h), Maryam S. (Lvl II, Week 8, 2:12, 16h). The waiting figure is compact ("2d," "22h") under a small "waiting" label, and turns warm gold on the row nearing the 48-hour window (Sarah's) — a nudge, never a red alarm.

The Queue tab itself carries the waiting count as a badge (5, mirroring these rows) — the one place in the coach app that states the backlog without being asked. The header carries no trailing overflow action: there is nothing behind one.

States. Three. Default (five rows, as above). Sent — after the demonstrated review is sent, the headline reads "4 submissions to review.", the subline becomes "Sent to Sarah just now. Oldest is Khadija's — 1 day.", Sarah's row leaves the list, and the Queue tab badge drops to 4: one write, four surfaces. Clear (?state=empty) — stat card only, no filters and no rows: "Queue clear." over "Nothing waiting on your review. New submissions land here."

Actions. Tapping a queue row → Coach — review a submission, opened unstarted (a review begun from the queue has not been listened to yet). The three filter chips set the queue's sort; they do not change which submissions are in it.

This screen is the review's return route. The board's open question — "'Send feedback' on Review has no stated return route (presumably back to Queue with the row cleared — the spec should say so)" — is answered here, and stated: Send pops back to the queue, and the queue is what acknowledges the send. The acknowledgment lives on the destination rather than in a toast, so the confirmation and the changed list are the same glance.

Role gating. Coach-only.

Revised Jul 27 2026 (Lejla review). Proposal (coach screens were not walked through Jul 27, so this ships as a proposal, not a rebuild): a role-gated shared "Placements" queue is the redesign's replacement for today's shared-login first-assessment account. First-recitation recordings route into one pool (§3 Section E, "Your first recitation"); rotating coaches claim from the pool and set the placement level. This is a queue filter over the same submission-review workspace, not a new coach surface — model it as a pooled/unassigned variant of this queue. See DATA-MODEL (FirstAssessment as a Submission subtype routed to a placement pool).

Coach — review a submission (SakCoachReview)

Purpose. The unified review workspace — assignment text visible while listening (the #1 gap coaches reported), one conversational voice note with optional word-anchored points, the private-vs-student-facing note split, and side-effect hour logging.

Key content. Eyebrow "Sarah M. · Week 8," title "Review," trailing person icon to her record. Assignment passage stays up while she listens (cite "Al-Mulk 67:1–2," hint "Tap a word to anchor a note"). Student's recording as a scrubbing waveform with a gold marker bar at the anchored word. "Your note" — one long conversational voice note (2:54, "Recorded just now," with "Re-record"), the screen's default output. Note-audience segmented toggle: "For Sarah" (student-facing) vs. "Private — just me" (coach-only) — the split coaches asked for; the caption under it changes with the choice ("One note, like the session — Sarah plays it start to finish." / "Just for you — not sent to Sarah."). "Anchored to a word" — the optional extra layered on that note, and its anatomy is the feature: a warm number badge ("1"), the anchored word تَبَارَكَ, the derived ayah reference "67:1" set right and muted, and beneath them one voice-note row (play/pause, waveform, "0:14") — the note she spoke onto that word. Nothing typed: she talks to the word the way she talks in the session. Then "Anchor another word." Footer: "Your review hours log themselves." — hours accrue as a side effect of using the screen, replacing the manual Time Clock Wizard, and the footer states the promise rather than counting the minutes back at her.

States — a review is taught in two beats. A screen that only ever renders the end of a review teaches none of the sequence, so both ends ship:

Actions. Tapping a word in the passage places the word-anchored mark — demonstrated on the fresh beat, not merely asserted. The mic records the coach's note; Send is gated on a note existing (no note, no CTA — the screen never offers to send nothing). With "For Sarah" chosen, "Send to Sarah" submits the review and returns to the queue. That is one write with four visible effects, all in the same beat: her queue row retires, the Queue tab badge drops 5 → 4, her roster pill on Coach — my students flips to "Feedback sent," and her own Week 8 submission becomes "Feedback ready" on the student side (review → reviewed). With "Private — just me" chosen, the CTA becomes "Save private note" (check glyph) and sends nothing: the student's side does not move and the submission stays in the queue. Two remaining affordances — "Anchor another word" and "Re-record" — are design communication, not wired behavior.

Role gating. Coach-only.

Revised Jul 26 2026 (product review with Lejla, Jul 24): the coach's default output is now one conversational voice note recorded in a single pass, mirroring the student's revised Submission — feedback ready screen. Word-anchored marks become optional per-point anchors rather than the required structure, and the coach can attach a contrast snippet of the student's own audio to any point ("you said → it should sound"). "Record feedback," passage marking, and automatic hour-logging are unchanged; only the note's default shape and the optional contrast snippets are added.

Corrected Aug 4 2026 (Kamran) — an anchor is a word and a spoken note. The contrast snippet the note above adds is retracted: it mechanized "comparison clips," a two-word phrase from coach questionnaire ask #2 (5/11 coaches, FEEDBACK-SYNTHESIS.md), into a UI the coaches never described, and it now sits on the v2 wishlist (see the matching addendum under Section F1's Submission — feedback ready, and §5 Backlog). What the coach builds on this screen is one long conversational note plus, optionally, a short voice note recorded onto each word she taps. She types nothing — no title, no instruction, no clipping UI to operate — and there is no reference recitation on the screen. Everything else on this entry (the audience split, the gated Send, hour logging) is unaffected.

Coach — my students (co-05 roster)

Purpose. The Students tab's root — the coach's whole cohort in one honest list, and the "find a student in two taps" promise.

Key content. Eyebrow "Spring 2026," title "Students," a search action in the header. Filter chips: "All" (default), "Needs review," "Behind." Seven roster rows (avatar-initial, name, level badge, last-submission line, and a "Needs review" status pill where one applies): Sarah M. (Lvl II, "Last submission Mar 25," needs review), Khadija R. (Lvl II, Mar 24, needs review), Noor A. (Lvl IV, Mar 23, needs review), Hafsa T. (Lvl I, "Nothing submitted this week" — the calm empty-week state, hollow ring and deliberately muted rather than red, since a missed week is not an error — and needs review, because her Week 7 take is still in the queue), Maryam S. (Lvl II, Mar 22, needs review), Aisha K. (Lvl II, Mar 20), Zaynab O. (Lvl I, "Joined this week — no submissions yet").

The pill set is exactly the queue's rows (Sarah, Khadija, Noor, Hafsa, Maryam) — the roster and the queue speak the same vocabulary, so they must name the same students; keep the two lists in step in either direction. Hafsa is deliberately in two states at once and matches both the "Needs review" and "Behind" chips: a coach's list has to be able to say "she missed this week and I owe her a note." Zaynab is a third state, not a lapse: a solid accent dot rather than Hafsa's hollow ring, reachable from All but never from Behind — a student with nothing to submit yet is not behind on anything.

States. Search closed (default) vs. open — tapping the header action opens an inline field between the header and the chips; name matching is case-insensitive and composes with the active chip; closing the field clears the query. Both controls really narrow the list, and an over-narrow combination renders "No students match." After the demonstrated review is sent, Sarah's pill flips to "Feedback sent" and she leaves the "Needs review" chip — the same single row the queue and the tab badge retire.

Actions. Any row → Coach — student record; Zaynab's row opens that screen's brand-new-student state (an opened new student has to look like a new student, not like Sarah with the data missing).

Role gating. Coach-only.

Coach — student record (SakCoachStudent)

Purpose. Per-student history and notes visible to every coach who has taught that student — the cross-coach continuity feature (REVIEW.md A4).

Key content. Identity strip: "Sarah M.," "Level II · Week 8 · 3rd semester." "Working on" tag row (AI-collated from the coach's last 3 notes): "Madd length," "Ghunnah hold," "Pace under nerves." "Submissions" history — the same state model students see, in the coach's words: Week 8 "Al-Mulk 67:1–3" "In review," Week 7 "Al-Mulk 67:1" "Feedback sent," Week 6 "At-Tahrim 66:8" "Returned" (revised Aug 18 2026, U-435) — this week open on her desk, last week waiting on Sarah, the week before back with Sarah and still open. Because one of those labels names someone else's next move, a muted legend sits under the card saying whose: "Feedback sent — she has your note. Returned — it came back with your written reason, and it never counts against that week. The receipt on each feedback row says whether she has played it." "Coach notes" — visible to all coaches: a note from Ustadha Amina (Week 7) and, notably, one from "Ustadha Rania · Week 6 · one-to-one" (REVIEW.md A4 — this is the one legitimate cross-coach reference remaining in the mockup, demonstrating a substitute coach's note is visible to Sarah's primary coach; it is not evidence of a two-coach assignment model).

States. Two. Default: Sarah, mid-term, three weeks of history. Brand-new student (?state=new, opened from Zaynab's roster row): "Zaynab O.," "Level I · Week 8 · 1st semester" — the Week-N line tracks the term, not her tenure — with every section deliberately empty and captioned rather than absent ("Nothing yet — themes gather here from the notes you write." / "Nothing submitted yet — this is her first week." / "No notes yet.") and the note composer intact, because a coach's first act with a new student is to write down what the others should know. The status legend goes with the history it explains.

Actions. Header action icon → the Message thread in its coach point of view. The Week 8 "Needs review" row → Coach — review a submission (the finished beat; an unstarted review begins from the queue); the completed weeks are display-only and carry no chevron. "Add note" is the last row of the Coach notes card and expands into an inline composer ("What should her other coaches know?"), appending an attributed note to the feed above it — on Zaynab's empty record too.

Role gating. Coach-only.

Coach — my schedule (SakCoachSchedule)

Purpose. The coach's own calendar — group sessions and 1:1s in one place, in the coach's own timezone, replacing the prior workaround of coaches logging into student accounts to find their own class times.

Key content. Eyebrow "Tue · 25 Mar · Cairo (EEST)," title "My schedule." Rows: 9:20 AM "Hana Y. — recitation" (1:1, "Done · Summary drafted" — the day's already-finished appointment, its time cell recessed); 2:00 PM "Sisters' Reading Circle" (QRC, "8 registered," live, "in 12 min," "Join" button); 4:20 PM "Sarah M. — recitation" (1:1, "Recurring · Week 8"); 4:40 PM "Khadija R. — recitation" (1:1, "This week only") — the exact two-word vocabulary locked by REVIEW.md D1; 7:00 PM "Level II — Idghām review" (Class, "23 registered"). Footer: "Attendance + hours log from Zoom automatically."

Actions. The live row's "Join" pill joins that Zoom session — the label is "Join," not "Start," because joining is what the coach does here; host controls are a later pass. Both upcoming 1:1 rows → Coach — student record. The completed 9:20 AM row → Coach — appointment notes. The group-class row is display-only and carries no chevron: there is no circle-detail screen behind it.

Role gating. Coach-only. Confirms REVIEW.md A5's timezone math: the student's 9:20 AM Tuesday booking in Toronto (EDT) is this coach's 4:20 PM Tuesday in Cairo (EEST) — a 7-hour offset, computed from the same UTC instant. (Hana's 9:20 AM row is the coach's own Cairo morning — a different appointment with a different student, not Sarah's booking seen twice.)

Coach — appointment notes (SakCoachApptNotes)

Purpose. New Jul 26 2026 (product review with Lejla, Jul 24). The coach's tool for turning a just-finished 1:1 into the summary a Year-2 student receives — record → transcribe → auto-summary → coach edits → send. Cuts a ~20-minute post-session write-up to about five.

Key content. Appointment header: "1:1" chip, "Hana Yusuf," "Tue 25 Mar · 9:20 AM · 20 min." The pipeline state is visible as a three-node flow — Recorded → Summarized → Your edit — with the coach's own step current. Below it, the auto-generated summary as three numbered point cards, each with its own edit affordance; a "Full transcript" disclosure row ("From the 20-minute recording"); and an optional voice note (1:40) with a "Re-record" affordance. A pinned "Send to Hana" bar sits over the scroll.

States. Each point card is either at rest or in edit — the pencil opens that point's body in place, the card takes an accent border, and the pencil becomes "Done" (committing on Done or blur). The transcript row is collapsed by default and expands to timestamped lines of the recording.

Actions. The coach edits any point (and/or keeps a voice note) → Send delivers them to the student's Appointment — teacher's notes screen (§3 Section Y2). Confirm, pending Lejla (Q12): the coach's edit is the approval — there is no second approver.

Role gating. Coach-only. Reached from the completed 9:20 AM appointment row on Coach — my schedule.

Coach — you (coach-you)

Purpose. The fourth coach destination: who she is, what her hours came to, the one setting a coach changes, and the labelled way back to her student app. Deliberately lean — the student You tab's analogy followed structurally, not decoratively.

Key content. Eyebrow "Spring 2026 · 7 students" (her cohort and its size, the coach's equivalent of the student's "Spring 2026 · Level 2" — the count is the roster's length on Coach — my students, so adding a student there moves this number; keep the two in step), title "You." Paper frontispiece: plum-gradient monogram, "Ustadha Amina," her credential line "Cairo · ijaza in Hafs from Asim," the 15-week strip and the screen's single "Week 8 of 15" reference (R1). "Your hours" card: 6.5 hrs this week, with "Logged automatically from your Zoom sessions and feedback reviews. Nothing to fill in." Account card: "Notification settings," then "Switch to your student app."

States. One state. The hours figure is display-only by design — coach hours are derived from Zoom duration and feedback-review time, never entered (DATA-MODEL; FEEDBACK-SYNTHESIS coach ask #4, the retired Time Clock Wizard), so the screen carries no edit affordance and no manual-entry row.

Actions. "Notification settings" → Notification settings, the same screen students use, rendered in its coach point of view: identical layout, rows, toggles and defaults, with the row copy pointing at her own surfaces ("New submission in your queue," "Review window — when a submission nears 48 hours," her students' weekly digest, quiet hours in Cairo). "Switch to your student app" re-roots onto the student You tab.

Role gating. Coach-only. Deliberately absent, and why: no avatar edit pencil (a coach's credential line is not hers to retype in the app), no availability editor (availability is a student-side object — DATA-MODEL windows), and no messaging or Support rows (both already live on the student side of the same account, one tap away through the exit row).

Section 01 — Lesson & recording

Lesson — Idghām with ghunnah (SakLesson)

Purpose. The weekly lesson's three-step loop: Watch → Record → Feedback, one āyah at the center.

Key content. Title "Idghām with ghunnah" + one-sentence description. Āyah focal card (Al-Mulk 67:1, single verse, generous type). Step 1 — Watch: video list with progressive disclosure — the current "Up next" video gets a hero card ("Practice reading aloud," 5 min); the two already-watched videos ("What is Idghām?," "Ghunnah letters — ي ن م و") collapse behind a "2 watched · Show" toggle. Step 2 — Record: a recital "plate" (dormant waveform hint), primary CTA "Begin recording," attempt dots (0 of 2 used), deadline line "Due Sunday · 11:59 PM" (REVIEW.md A3 — corrected from a hardcoded "tonight"/EST string). Step 3 — Feedback: the most recent coach note as an inline playable card (Ustadha Amina, "Week 7 · 2 days ago," waveform, quoted text).

States. Step 1's watched-videos list is collapsed by default (progressive disclosure); Step 3 only appears once feedback exists for a prior submission.

Actions. Tapping "Up next" video or a row in the expanded watched list → Video player. "Begin recording" → Recording — Ready. Tapping the Step 3 feedback card → Submission — feedback ready.

Role gating. Student-only.

Video player — chapter complete (SakVideoPlayer)

Purpose. In-lesson video playback with a chapter (video-list) sidesheet and a completion banner.

Key content. Video stage (dark plum) with a "Video 3 of 3" chip, center play/pause glass button, and a scrubber. Shown state: 92% progress (just past the 90% completion threshold), so the "Marked as watched" banner is visible. Title block: "Week 8 · Idghām with ghunnah" eyebrow, "Practice & examples" title, "Recite alongside Ustadha Amina · 4:00." "In this chapter" video list (all 3 videos, current one highlighted "Now"). Primary CTA "Record submission" + secondary "Lesson." A collapsed transcript teaser with "Read full transcript."

States. Mid-watch (any progress <90%) vs. completed (≥90%, banner shown).

Actions. "Record submission" → Recording — Ready. "Lesson" (secondary) → back to Lesson. Video list rows → play that video (same screen, different video loaded).

Role gating. Student-only.

Recording — Ready (SakRecReady)

Purpose. Entry state before recording begins.

Key content. Shared recording header (SakRecHeader): title "Submission," close (x) action, attempts indicator ("Attempts this week" + dots, default 2 of 2 remaining). Verse card (full). Center: a breathing red mic button, prompt "Tap to begin recording."

Actions. Tapping the mic button → Recording — In progress. Close (x) → exits back to Lesson without starting a recording.

Role gating. Student-only.

Recording — In progress (SakRecRecording)

Purpose. Live recording state.

Key content. Same header (attempts unchanged since nothing has been submitted yet). Compact verse card. Live indicator: blinking red dot, "Recording," elapsed time (e.g. "0:23"). Animated live waveform. Center: red stop button (square icon), prompt "Tap to stop," sub-copy "You can re-record after listening back."

Actions. Tapping stop → Recording — Review.

Role gating. Student-only.

Recording — Review (SakRecReview)

Purpose. Playback and decision point before submitting: keep or re-record.

Key content. Header + compact verse card. "Your recording" duration (0:47). Waveform playback card with elapsed/total time. Play button (FbPlayBtn — per REVIEW.md D2, replacing a prior bespoke 54px play circle) + "Re-record" button. Primary CTA "Submit to Ustadha Amina" with footer "Feedback within 48 hours."

Actions. "Re-record" → back to Recording — In progress (does not decrement attempts — only an actual submission does). "Submit to Ustadha Amina" → Recording — Submitted, decrements attempts by one and starts the revoke window.

Role gating. Student-only.

Recording — Submitted (SakRecSubmitted)

Purpose. Confirmation state immediately after submitting.

Key content. Header shows attempts now at 1 of 2 remaining (post-decrement). Animated check medallion. "Recording submitted," body "Your coach Ustadha Amina will listen and send notes within 48 hours." Primary CTA "View my submission." Per REVIEW.md A1, this screen carries no revoke countdown — that UI lives solely on SakSubmissionPending.

Actions. "View my submission" → Submission — in review · revoke window (SakSubmissionPending) — i.e., this is not a dead end; it routes into the submission detail where the actual revoke window lives.

Role gating. Student-only.

Recording — No attempts (SakRecNoAttempts)

Purpose. Terminal state once both weekly attempts are used without a passing/accepted result.

Key content. Header shows 0 of 2 attempts remaining (danger-tinted). Compact verse card. Crossed-out mic icon. "Both attempts used," body "You've recorded twice this week. Your next attempt opens on" + date pill ("Monday · 9 March"). Reassurance copy: "Rest is part of the practice. Listen to your coach's notes while you wait." Secondary action "Hear coach's notes."

Actions. "Hear coach's notes" → Submission — feedback ready (or whichever submission detail holds the most recent feedback).

Role gating. Student-only.

Section 02 — Identity sub-pages

Coach detail (SakCoach)

Purpose. Destination from the You tab's coach panel / "Message" CTA — coach identity, feedback history, and upcoming sessions with that coach.

Key content. Hero card: portrait initial, "Ustadha Amina," "Cairo · ijāza in Hafs from 'Āsim," three inline stats (6 reviewed, 48h reply window, L1–2 levels). Primary CTAs: "Message Ustadha Amina" (REVIEW.md B5) + secondary "Office hours." "Recent feedback" list — time-grouped, playable audio-note previews with quoted excerpts; 2 shown by default, "Show N earlier notes" reveals the rest (progressive disclosure). "Upcoming" section: sessions with this coach (e.g. Tue Feb 25, 2:00 PM QRC; 9:00 PM Office hours).

Actions. "Message Ustadha Amina" → Message thread. "Show N earlier notes" expands the feedback history in place.

Role gating. Student-only.

Submissions archive (SakSubmissions)

Purpose. Full history of weekly submissions this term, flat and dated.

Key content. A "Spring 2026" eyebrow over one flat card of six week rows, newest first — the approved design (fb-05) drops the earlier stat hero ("Since September," "7 submissions, 1 in review"), the week strip, the "This month"/"Earlier" grouping and the "Show 3 earlier submissions" disclosure, so the whole term reads in one scroll: the eyebrow and the rows are the screen. Week 8 "Al-Mulk 67:1–3" · Mar 25 — awaiting, then inreview once the coach opens it (the in-flight submission SakSubmissionPending tracks); Week 7 "Al-Mulk 67:1" · Mar 18 — reviewed ("Feedback ready," REVIEW.md A2's canonical week-7 state, and the same record the coach's "Feedback sent" describes); Week 6 "At-Tahrim 66:8" · Mar 11 — rejected (the returned week); Week 5 "At-Talaq 65:11" · Mar 4, Week 4 "At-Taghabun 64:3" · Feb 25 and Week 3 "Al-Munafiqun 63:9" · Feb 18 — all reviewed (revised Aug 18 2026, U-435: a finished week is reviewed, and the note's length is what the row adds). Only weeks 8–7 are Al-Mulk: the āyah numbers walk back through late juz 28 as the cohort approaches it, so each row carries its own surah.

States/status vocabulary (SubStatusPill, recut Aug 18 2026 by U-435, colors still per REVIEW.md A2): awaiting = "Awaiting review" (gold) → inreview = "In review" (gold outline) → reviewed = "Feedback ready" (plum), with rejected = "Returned" (deep gold) and revoked = "Taken back" (muted) as exits. Unsubmitted has no pill. Coach-side, awaiting reads "Needs review" and reviewed reads "Feedback sent" in the same colors; the rest read the same to both (DESIGN-SYSTEM §5). The retired heard and practiced greens described the student rather than the submission. An empty archive (?state=empty) is the first-week treatment: "Your recitations will live here."

Actions. In the walkthrough, tapping any row opens Submission — feedback ready — the one worked example. That is deliberate, not a wiring gap: the row's status is passed and the screen ignores it (submission-feedback.tsx), because the demonstration is better served by one fully-marked review than by six thinner variants of it. A row's pill and the screen it opens can therefore disagree in the walkthrough. In the built app, route by status: awaiting/inreview → Submission — in review, reviewed → Submission — feedback ready, rejected → Submission — returned, revoked → the recorder, each rendering that week's own marks, note and passage. (The walkthrough now routes this way too, from a status-to-screen map rather than one destination.)

Role gating. Student-only.

Personal details (SakPersonalDetails)

Purpose. Read-mostly account/identity form.

Key content. Nameplate (avatar + "Sarah Ahmed" + "Joined · Sep 2024"). Identity group: Full name, Pronunciation (optional phonetic hint), Date of birth. Contact group: Email, Phone, Timezone: "Toronto · Eastern (EDT)" (REVIEW.md B3 — one canonical city per account). Class group (both rows readonly, locked-pill): Level ("II · Reading with fluency"), Cohort ("Tuesday 2 PM local" — REVIEW.md B3's normalized cohort copy). Footer note: "Class details are managed by your coach."

Actions. Editable rows (Identity, Contact) → per-field edit (chevron). Class rows are locked (not editable by the student).

Role gating. Student-only.

Qur'an font picker (SakFontPicker)

CUT Jul 27 2026 (Lejla review). This feature is removed, together with the onboarding script-choice step (Section 05 step 3) — they are the same feature in two incarnations. There is no font/script choice to offer: one Madani-compatible web font renders ~98% of cases and is used everywhere; the rest fail on the Madani script's specialized diacritics. The current app ships this picker but keeps it hidden because it's unusable. The You → Settings "Qur'an font" row that points here is removed with it. The rest of this entry is retained for history only.

Purpose. Live-preview font selection for Qur'anic text rendering, plus size control.

Key content. Three font cards (Amiri Quran / Amiri / Naskh), each rendering a live preview verse in its own face; selected card shows a check badge. Size slider (18–36pt) with "Smaller"/"Larger" labels. A live preview card at the bottom reflecting the currently selected font + size.

Actions. Tapping a font card selects it (updates the preview immediately). Dragging the slider updates size across all previews live.

Role gating. Student-only (implied also available to coaches for their own reading preference, though not designed separately here).

Notifications sheet (SakNotifSheet)

Purpose. The notification inbox.

Key content. Title "Notifications," "Mark all" action. Pinned row: "Announcements · 1 pinned" (megaphone icon) — deep-links to the Announcements board (REVIEW.md C1a), sitting above "New" so it reads as a fixture, not a transient note. "New · 2" section: "Feedback ready — Week 7" (unread), "QRC starts in 15 min" (unread). "Earlier" section: "Submission due today," "Schedule change — Week 9" (announcement type — copy matches the board exactly per REVIEW.md B4b: "Thursday's Level Class moved to 11:00 AM"), "Feedback ready — Week 6." Footer: "That's all from this fortnight."

States. Unread rows show bold title + gold dot + tinted background.

Actions / destinations.

Role gating. None (student view shown; a coach-side equivalent is implied but not designed).

Notification settings (SakNotifSettings)

Purpose. Per-type push/email notification preferences.

Key content. Master switch card: "Push notifications," "On · 4 types," toggle on. Types group (each with its own toggle, all default on): "Session reminders" ("15 min before a live session"), "Feedback alerts" ("When your coach replies"), "Deadline reminders" ("Submission due dates"), "Announcements" ("Schedule changes & program updates") — default ON per REVIEW.md B4a, a change from the prior default-off behavior. Email group: "Weekly digest" ("Your progress, every Sunday morning") — default off. Footer: "You can fine-tune sounds and previews in your device's Settings app."

Actions. Each toggle sets that notification type's on/off state independently; the master switch is a convenience toggle for all push types together.

Role gating. Both roles, one screen. A coach reaches it from Coach — you and gets the same layout, rows, icons, toggles and defaults with the copy pointing at her own surfaces: "New submission in your queue" ("When a recitation arrives for review"), "Appointment reminders" ("15 min before a one-to-one"), "Review window" ("When a submission nears 48 hours"), Announcements unchanged, a weekly digest of her students' week, and quiet hours named in her own zone (Cairo). Nothing is duplicated — one screen, two points of view.

Section 03 — Live class

Live class — Sisters' QRC (SakLiveClass)

Purpose. In-session live-class screen, reached by tapping "Join" on any live session row across the app.

Key content. Dark (ink) full-bleed screen — deliberately no tab bar (a focused screen, back chevron only). Header: live indicator + elapsed time ("Live · 14:22"), title "Sisters' Reading Circle." Speaking-coach hero card: "Ust. Radwa" with an animated speaking ring around her avatar (indicates who is currently talking). "In the circle" participants strip (horizontal scroll, "8 of 12," "You" highlighted first). "Currently reading" card: live verse text (Al-Mulk 67:3) synced to what the coach is reading aloud. Bottom control row: Mute, Camera, Raise hand (warm-tinted), Leave (danger-tinted, red).

Actions. "Leave" exits the live class (returns to the screen that launched it — Today, Sessions, or Appointment detail). Mute/Camera toggle local AV state. "Raise hand" signals the coach.

Role gating. Available to whichever role joined the session — student for group circles and 1:1s, and the same screen serves a coach arriving from her own schedule's "Join" pill. Host controls (starting a session, admitting, ending for all) are not designed: the coach affordance is "Join," not "Start," so a coach in a live class sees the participant screen.

Section 04 — Enrollment

Subscription & billing (SakSubscription)

Purpose. Current-semester enrollment status as a "passport," not a paywall — reframing subscription management around the semester's identity rather than transactional billing.

Key content. Passport card (ink): "Current semester · Active," "Level II / Spring 2026," term ledger (Term: "Jan 12 – Jun 22," Paid: "$149.00"), progress ribbon ("Week 8 of 15," 53%). "Next semester" quiet dashed card: "Level III · Fall 2026," pill "Opens Sept," copy "You'll receive an email to review and confirm before any charge." "Payment method" card (Visa •••• 4242, expires 08/27). "Ledger" — payment history (3 rows, all "paid"). CTA "Manage subscription."

Actions. "Manage subscription" → Manage subscription. Payment method row → update card (implementation detail).

Role gating. Student-only.

Manage subscription (SakManageSub)

Purpose. Deeper billing controls, framed so the destructive "cancel" action feels considered rather than casual (a deliberate design choice, per the component's own code comments).

Key content. "Current plan" summary (Level II, Spring 2026, "Week 8 of 15 · ends June 22, 2026," Paid $149.00). "Next semester" card with pricing options when enrollment opens ("$149 once" or "$55/mo three months") and pill "Not yet open." "Billing" group: Auto-renewal (on, "Confirmation required before each charge"), Update payment method, "Stripe billing portal" (invoices, receipts, tax info — REVIEW.md-adjacent audit note: the duplicate Stripe portal link elsewhere was dropped, this is the sole entry point). Contemplative cancel area, set apart with generous whitespace and an italic epigraph ("Rest is part of the practice. Pause is a choice, not a loss."), with a quiet outlined "Cancel enrollment" button (danger-tinted text only, not a filled destructive button — deliberately de-emphasized).

Actions. "Stripe billing portal" → hands off to Stripe's hosted portal. "Cancel enrollment" → begins the cancellation flow (confirmation step implied, not designed).

Role gating. Student-only.

Section 05 — Onboarding

Six steps, each a "frontispiece" page inside a shared OnboardingShell (back chevron + step-dot progress + "Skip," a primary "Continue"/"Begin" pill at the foot of each step).

  1. Welcome (SakOnb1) — QuranFlow seal, "Sarah, welcome to QuranFlow," one sentence ("A quiet, weekly rhythm for learning to read the Qur'ān well"). CTA: "Begin."
  2. Your level (SakOnb2) — Roman-numeral medallion ("II"), "Level II · Reading with fluency," reassurance line ("you begin here — neither at the start nor the end, but at the right page").
  3. Choose script (SakOnb3) — three font cards (Amiri Quran / Amiri / Naskh) with live Bismillah preview in each; Amiri Quran pre-selected. Footnote: "You can change this any time in Settings." CUT Jul 27 2026 (Lejla review). There is no script choice to offer: submissions are text-based, the Madani source script has specialized diacritic scenarios (multiple sukun forms, positioned kasra) that web fonts don't render, and of ~60 fonts Lejla and Yasmeen tested exactly one renders ~98% of cases. That one font is used everywhere; the picker and its twin settings feature (Qur'an font picker, Section 02) are both removed. The current app has this feature built but hidden because it's unusable.
  4. Your coach (SakOnb4) — coach medallion with a verified checkmark badge, "Ustadha Amina," "Cairo · ijāza in Hafs from 'Āsim," two bullet facts: she listens weekly and replies with 1–3 min audio; she answers follow-up messages within 48 hours.
  5. The weekly rhythm (SakOnb5) — three numbered steps on a connecting thread: 1 Watch your lesson (2–3 short videos, ~12 min total), 2 Recite the āyah (record once, two attempts), 3 Feedback from your coach (a short voice note from her, within two days). Copy revised — "Hear back" is retired vocabulary (REVIEW copy pass, 2026-07-16: removed everywhere), and the reply window reads "within two days" rather than promising 48 hours.
  6. Live circles (SakOnb6) — three session-type cards: Reading Circle (QRC — small-group real-time coaching), Level class (group lesson, whole Level II cohort), Office hours (1-on-1 coach drop-in). Reassurance: "Can't make it? Every circle is recorded." CTA: "Begin your week."

Role gating. Core onboarding is 6 steps for every student, Year 1 or Year 2 (per REVIEW.md C5, the Year-2 Availability step is asked separately, during booking — not inserted into this sequence). Revised Jul 26 2026 (product review with Lejla, Jul 24): a new student reaches this 6-step onboarding only after placement (entry lane → Placement result → onboarding, §3 Section E). A returning student is auto-placed into Year 2 and sees Year 2 orientation (§3 Section Y2) in place of — or alongside — this sequence; treat "every student" here as "every newly-placed Year-1 student."

Revised Jul 27 2026 (Lejla review). Lejla approved onboarding as designed except step 3. Corrections to the sequence:

Section 06 — States

Edge/empty variants of screens already specified above — same chrome, different content, so they read as states of one screen rather than separate designs.

Today — state: rest day (SakTodayRest)

A quiet (paper, not ink) variant of Today for a day with nothing due — shown here as the Sunday after Week 8's submission. Hero: "Rest the eye today," body explaining the last submission's status ("with Ustadha Amina — feedback usually comes by Tuesday"), week strip (done=8, no "current" marker since nothing is due today). "If you have ten minutes" optional suggestions: "Re-read this week's verse" (2 min), "Listen to last week's circle" (48 min). Quieter verse closer. No primary CTA — the absence of one is itself the message.

Profile — first week (SakProfileFirstWeek)

Minimal frontispiece variant for a brand-new student ("Week 1 · Day 2," "The beginning is dignified," seat reservation copy). "Next steps" checklist: "Meet Ustadha Amina" (done, 5 min audio), "Record your first verse" (current, Al-Fatiha, due Friday), "Attend a live circle" (Tuesday 9am, not started). Quiet stat row shows em-dashes for streak/submitted counts rather than zeros — framed as a beginning, not a deficit.

Submissions — empty archive (SakSubmissionsEmpty)

Same nav/eyebrow ("Archive," "Your submissions") as the populated archive. Empty-state card: "No recordings yet," explanatory copy, CTA "Record your first." A quiet schematic list ("What lives here"): Audio attempt, Coach response, Notes & corrections — previewing the archive's eventual structure before it has content.

Notifications — all caught up (SakNotifEmpty)

Same nav as the populated Notifications sheet. Empty-state card: "All caught up," "Nothing new since Tuesday's office hours." "Earlier this week" section retains one dimmed, already-read row so the shape of the list persists even when there's nothing new.

Recording — mic permission (SakRecPermission)

Bridges Ready state with the OS-level microphone permission prompt, framed as an invitation ("Open the microphone") rather than a warning. Reuses the recording header (2 of 2 attempts) and compact verse card. Broken-halo mic glyph (dashed rings, not the solid breathing red of Ready). Primary CTA "Allow microphone"; secondary text link "Open Settings instead" for a previously denied permission.

Deep-link-only screens (not on the canvas; notification destinations)

Per REVIEW.md C4, these two screens exist in the codebase (sak-schedule.jsx) but have no on-canvas entry point — they exist solely as the destination when a student taps a session-reminder push notification.

Session detail — Class variant (SakSessionDetail)

Example instance: "Fluency drills," "Today · 12:00 PM," Ust. Radwa, 45 min, Zoom. Sections: "What we'll cover" (3 numbered rows — Idghām review, paired reading, live correction), "Bring with you" (reading passage + a short pre-watch video), "Cohort" (avatar stack, "6 of 8 confirmed"). Primary CTA "Open Zoom" + secondary "Remind me."

Session detail — QRC variant (SakSessionDetailQRC)

Example instance: "Sisters' Reading Circle," "Today · 6:00 AM · Live," Ust. Radwa, 60 min, Zoom. Sections: "This week's reading" (verse card, Al-Mulk 67:1–10), "How the circle runs" (3 numbered rows — opening recitation, round-robin recitation, coach's notes), "Sisters here" (avatar stack, "8 of 10 joined"). Primary CTA "Join Zoom" + secondary "Remind me."

Both share a common SessionDetailFrame (title block, meta row, coach card, body sections, primary/secondary CTA pair) so a third session type can be added later as a content change, not a new design pass.

4. Business rules

These rules are drawn from the coach-feedback synthesis (FEEDBACK-SYNTHESIS.md) and locked by REVIEW.md's adjudicated resolutions. They apply across every screen that touches the relevant object — an engineer should treat them as constraints on the data model, not just copy.

5. Open questions / deliberately unresolved

Documented here rather than in the mockup, per REVIEW.md's "Out of scope for the mockup" list — these need a product/engineering decision before or during build, not a mockup screen.