Function
The lesson whose completion is being shown
A client island by necessity: completion lives in localStorage, which
the server cannot read. Dropping this into a Server Component's row keeps
that row server-rendered — only the mark itself crosses to the client.
It renders nothing for an uncompleted lesson, and that is deliberate, not an omission. Marks can only appear after hydration, so the first frame necessarily shows none; if the component also drew a "not completed" state, that frame would assert something false about the learner's progress. Absence is the neutral state, so hydration only ever adds a mark.
The check icon is decorative and the meaning is carried by a localized accessible name, so the distinction never rests on colour or glyph alone.
Completion has two producers — the Mark as complete button and playback
reaching the end of the video — and this reads both through
useLessonWatchState. A caller that passes the lesson's runtime therefore
marks a lesson the learner watched to the end but never pressed the button
on; a caller that cannot supply one falls back to the stored mark alone.
The "you have taken this lesson" indicator.