fix(course): restore mobile mark complete and outline progress card (#942)

* fix(course): pass progress into mobile outline sheet card

The outline sheet bound CourseProgressCard with {courseProgress}, which
sets a courseProgress prop the card does not read. progress was
undefined, so opening the sheet crashed on progress.percent. Pass
progress={courseProgress} and treat missing progress as zeros.

Co-authored-by: Rotimi Best <[email protected]>

* fix(course): keep mark complete on mobile student lessons

The mobile bottom nav hid the whole lesson action row, so students had no way to mark a lesson complete. Hide only prev/next when the bottom bar is shown.

Co-authored-by: Rotimi Best <[email protected]>

* fix(course): show a check on the right of a completed lesson title

When a student marks a lesson complete, hide the disabled Mark as Complete
button and place a filled check icon on the right of the lesson title.

Co-authored-by: Rotimi Best <[email protected]>

* fix(course): show completion check on mobile bottom-nav title

Move the filled check from the lesson page heading to the right of
the active lesson title in the mobile bottom bar.

Co-authored-by: Rotimi Best <[email protected]>

---------

apps/dashboard/src/lib/features/course/components/course-progress-card.svelte

@@ -4,27 +4,33 @@
   import type { ContentProgress } from '$features/course/utils/content';
 
   interface Props {
-    progress: ContentProgress;
+    progress?: ContentProgress;
     class?: string;
   }
 
   let { progress, class: className = '' }: Props = $props();
+
+  const percent = $derived(progress?.percent ?? 0);
+  const lessonsComplete = $derived(progress?.lessonsComplete ?? 0);
+  const lessonsTotal = $derived(progress?.lessonsTotal ?? 0);
+  const exercisesComplete = $derived(progress?.exercisesComplete ?? 0);
+  const exercisesTotal = $derived(progress?.exercisesTotal ?? 0);
 </script>
 
 <div class={className}>
   <div class="flex items-baseline justify-between gap-2">
     <span class="text-xs font-medium">{$t('course.sidebar.progress.title')}</span>
-    <span class="ui:text-primary text-xs font-semibold tabular-nums">{progress.percent}%</span>
+    <span class="ui:text-primary text-xs font-semibold tabular-nums">{percent}%</span>
   </div>
-  <Progress value={progress.percent} max={100} class="ui:h-1.5 mt-2" />
+  <Progress value={percent} max={100} class="ui:h-1.5 mt-2" />
   <p class="ui:text-muted-foreground mt-2 truncate text-[11px]">
     {$t('course.sidebar.progress.lessons', {
-      completed: progress.lessonsComplete,
-      total: progress.lessonsTotal
-    })}{#if progress.exercisesTotal > 0}
+      completed: lessonsComplete,
+      total: lessonsTotal
+    })}{#if exercisesTotal > 0}
       · {$t('course.sidebar.progress.exercises', {
-        completed: progress.exercisesComplete,
-        total: progress.exercisesTotal
+        completed: exercisesComplete,
+        total: exercisesTotal
       })}{/if}
   </p>
 </div>

apps/dashboard/src/lib/features/course/components/lesson/content-navigation-actions.svelte

@@ -29,9 +29,11 @@
     courseId: string;
     /** When on an exercise page, pass this to show prev/next content in content order (no mark-complete). */
     exerciseId?: string;
+    /** When false, hide prev/next chevrons (mobile bottom nav already has them). */
+    showPrevNext?: boolean;
   }
 
-  let { lessonId, courseId, exerciseId }: Props = $props();
+  let { lessonId, courseId, exerciseId, showPrevNext = true }: Props = $props();
 
   let isMarkingComplete = $state(false);
 
@@ -229,7 +231,7 @@
           {watchProgressTooltip}
         </Tooltip.Content>
       </Tooltip.Root>
-    {:else if showMarkComplete && lessonId && !isLessonLocked && (showVideoWatchCompleteState || !isVideoWatchLesson)}
+    {:else if showMarkComplete && lessonId && !isLessonLocked && !isLessonComplete && !isVideoWatchLesson}
       <Button
         size="sm"
         variant="secondary"
@@ -242,40 +244,42 @@
       </Button>
     {/if}
 
-    <div class="flex items-center gap-1">
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          <Button
-            size="icon-sm"
-            variant="outline"
-            onclick={() => goToContent(prevNextContent.prev)}
-            disabled={isPrevDisabled || isPrevNavBlocked}
-            aria-label={$t('course.navItem.lessons.prev')}
-          >
-            <ChevronLeftIcon size={14} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side="bottom" sideOffset={4}>
-          {prevNavTooltip}
-        </Tooltip.Content>
-      </Tooltip.Root>
+    {#if showPrevNext}
+      <div class="flex items-center gap-1">
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <Button
+              size="icon-sm"
+              variant="outline"
+              onclick={() => goToContent(prevNextContent.prev)}
+              disabled={isPrevDisabled || isPrevNavBlocked}
+              aria-label={$t('course.navItem.lessons.prev')}
+            >
+              <ChevronLeftIcon size={14} />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom" sideOffset={4}>
+            {prevNavTooltip}
+          </Tooltip.Content>
+        </Tooltip.Root>
 
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          <Button
-            size="icon-sm"
-            variant="outline"
-            onclick={() => goToContent(prevNextContent.next)}
-            disabled={isNextDisabled || isNextNavBlocked}
-            aria-label={$t('course.navItem.lessons.next')}
-          >
-            <ChevronRightIcon size={14} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side="bottom" sideOffset={4}>
-          {nextNavTooltip}
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </div>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <Button
+              size="icon-sm"
+              variant="outline"
+              onclick={() => goToContent(prevNextContent.next)}
+              disabled={isNextDisabled || isNextNavBlocked}
+              aria-label={$t('course.navItem.lessons.next')}
+            >
+              <ChevronRightIcon size={14} />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom" sideOffset={4}>
+            {nextNavTooltip}
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    {/if}
   </Tooltip.Provider>
 </div>

apps/dashboard/src/lib/features/course/components/mobile/course-mobile-bottom-nav.svelte

@@ -77,6 +77,7 @@
 <PublicCourseBottomNav
   {positionLabel}
   sublineLabel={activeItem?.title}
+  sublineComplete={activeItem?.isComplete ?? false}
   hasPrev={!isPreviousDisabled}
   hasNext={!isNextDisabled}
   onPrev={() => goToContent(previousItem)}

apps/dashboard/src/lib/features/course/components/mobile/course-mobile-outline-sheet.svelte

@@ -52,7 +52,7 @@
       </Drawer.Header>
 
       <div class="shrink-0 px-3 pb-2">
-        <CourseProgressCard {courseProgress} class="rounded-lg border p-3" />
+        <CourseProgressCard progress={courseProgress} class="rounded-lg border p-3" />
       </div>
 
       <div bind:this={scrollContainer} class="flex-1 overflow-y-auto px-2 pb-[max(env(safe-area-inset-bottom),1rem)]">

apps/dashboard/src/lib/features/course/pages/lesson.svelte

@@ -433,8 +433,8 @@
   </Page.HeaderContent>
   <Page.Action>
     <div class="flex items-center gap-2">
-      {#if mode === MODES.view && $isCourseLearnerView && !showMobileBottomNav}
-        <ContentNavigationActions {lessonId} {courseId} />
+      {#if mode === MODES.view && $isCourseLearnerView}
+        <ContentNavigationActions {lessonId} {courseId} showPrevNext={!showMobileBottomNav} />
       {/if}
 
       <RoleBasedSecurity allowedRoles={[1, 2]}>