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]> ---------
2026-08-20 18:03:03 +01:00
parent 4fae088626
commit 44f09bbe6b
7 changed files with 95 additions and 48 deletions
@@ -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>
@@ -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>
@@ -77,6 +77,7 @@
 <PublicCourseBottomNav
  {positionLabel}
  sublineLabel={activeItem?.title}
+  sublineComplete={activeItem?.isComplete ?? false}
  hasPrev={!isPreviousDisabled}
  hasNext={!isNextDisabled}
  onPrev={() => goToContent(previousItem)}
@@ -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)]">
@@ -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]}>
@@ -124,6 +124,25 @@
  {/snippet}
 </Story>

+<Story name="Bottom nav · completed lesson">
+  {#snippet template()}
+    <div class="ui:relative ui:min-h-[200px] ui:bg-background">
+      <PublicCourse.PublicCourseBottomNav
+        positionLabel="2 / 6"
+        sublineLabel="Delving into Data Analysis with Pandas"
+        sublineComplete
+        hasPrev
+        hasNext
+        centerVariant="ring"
+        progressPercent={33}
+        onPrev={() => console.log('prev')}
+        onNext={() => console.log('next')}
+        onOpenSheet={() => console.log('open sheet')}
+      />
+    </div>
+  {/snippet}
+</Story>
+
 <Story name="Mobile sheet · collapse + long course">
  {#snippet template()}
    {@const activeSlug = 'module-10-lesson-4'}
@@ -8,6 +8,8 @@
    /** Current position — e.g. "3 of 12" — plus a subline — e.g. "Hallucination & limitations". */
    positionLabel: string;
    sublineLabel?: string;
+    /** When true, a filled check is shown to the right of `sublineLabel`. */
+    sublineComplete?: boolean;
    hasPrev: boolean;
    hasNext: boolean;
    onPrev: () => void;
@@ -27,6 +29,7 @@
  let {
    positionLabel,
    sublineLabel,
+    sublineComplete = false,
    hasPrev,
    hasNext,
    onPrev,
@@ -98,7 +101,21 @@
        {positionLabel}
      </span>
      {#if sublineLabel}
-        <span class="ui:max-w-[55vw] ui:truncate ui:text-sm ui:font-medium ui:text-foreground">{sublineLabel}</span>
+        <span class="ui:flex ui:max-w-[55vw] ui:min-w-0 ui:items-center ui:gap-1">
+          <span class="ui:min-w-0 ui:truncate ui:text-sm ui:font-medium ui:text-foreground">{sublineLabel}</span>
+          {#if sublineComplete}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              class="ui:size-3.5 ui:shrink-0 ui:text-primary"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
+              <path d="m9 12 2 2 4-4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          {/if}
+        </span>
      {/if}
    </span>
  </button>