feat: improve LMS course discovery and enrollment UX

- Add paginated recommended courses to LMS dashboard (top 3, list view) and explore page (12 per page); exclude courses blocking new students - Polish course preview modal: remove padding, render requirements as HTML, round banner image, secondary close button - Redirect to course start page after successful enrollment instead of /lms; keep spinner active until navigation completes - Auto-enable "allow new students" when a course is published - Move Explore after My Learning in LMS sidebar nav - Move Certificates after Content in course sidebar - Add hiddenColumns prop to CourseListRow; show "Learn more" button instead of actions menu in LMS explore context
2026-06-11 14:22:18 +01:00
parent 4e24e3cb63
commit c8154409f5
15 changed files with 465 additions and 194 deletions
@@ -21,6 +21,9 @@ export class CoursesApi extends BaseApiWithErrors {
  orgCoursesPagination = $state<OrgCoursesPagination | null>(null);
  enrolledCourses = $state<UserEnrolledCourses>([]);
  recommendedCourses = $state<RecommendedCourses>([]);
+  recommendedCoursesPagination = $state<{ page: number; limit: number; total: number; totalPages: number } | null>(
+    null
+  );
  private activeOrgCoursesRequestController: AbortController | null = null;

  cancelOrgCoursesRequest() {
@@ -135,17 +138,24 @@ export class CoursesApi extends BaseApiWithErrors {
   * Fetches recommended courses (published courses user isn't enrolled in) for the current organization
   * Org ID is automatically added from currentOrg store
   */
-  async getRecommendedCourses(options?: { limit?: number }) {
+  async getRecommendedCourses(options?: { limit?: number; page?: number }) {
+    const query: Record<string, string> = {};
+    if (options?.limit) query.limit = String(options.limit);
+    if (options?.page) query.page = String(options.page);
+
    await this.execute<GetRecommendedCoursesRequest>({
      requestFn: () =>
        classroomio.organization.courses.recommended.$get({
-          query: options?.limit ? { limit: String(options.limit) } : {}
+          query
        }),
      logContext: 'fetching recommended courses',
      onSuccess: (response) => {
        if (response.data) {
          this.recommendedCourses = response.data;
        }
+        if ('pagination' in response && response.pagination) {
+          this.recommendedCoursesPagination = response.pagination as typeof this.recommendedCoursesPagination;
+        }
        this.errors = {};
      },
      onError: (result) => {
@@ -26,6 +26,18 @@
    color?: string | null;
  }

+  type ColumnKey = 'published' | 'tags' | 'students' | 'actions';
+
+  const COLUMN_TRACKS: [string, string][] = [
+    ['banner', '7rem'],
+    ['title', 'minmax(0, 2fr)'],
+    ['published', '5.5rem'],
+    ['tags', 'minmax(0, 2fr)'],
+    ['content', '4.5rem'],
+    ['students', '6rem'],
+    ['actions', '7rem']
+  ];
+
  interface Props {
    id: string;
    slug?: string;
@@ -41,6 +53,8 @@
    tags?: Tag[];
    isExplore?: boolean;
    isLMS?: boolean;
+    hiddenColumns?: ColumnKey[];
+    onExploreClick?: () => void;
  }

  let {
@@ -57,7 +71,9 @@
    updatedAt,
    tags = [],
    isExplore = false,
-    isLMS = false
+    isLMS = false,
+    hiddenColumns = [],
+    onExploreClick
  }: Props = $props();

  const titleInitial = $derived(title.trim().charAt(0).toUpperCase() || 'C');
@@ -66,12 +82,20 @@

  const showPublicCourseLinks = $derived(isPublished && type === 'PUBLIC' && slug.trim().length > 0);

-  const showActionsColumn = $derived(!isLMS || (isLMS && showPublicCourseLinks));
+  const hidden = $derived(new Set<string>(hiddenColumns));
+
+  const showActionsColumn = $derived(
+    !hidden.has('actions') && (!isLMS || (isLMS && showPublicCourseLinks) || (isLMS && isExplore))
+  );

  const gridTemplateColumns = $derived(
-    showActionsColumn
-      ? '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem 2.5rem'
-      : '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem'
+    COLUMN_TRACKS.filter(([key]) => {
+      if (hidden.has(key)) return false;
+      if (key === 'actions') return showActionsColumn;
+      return true;
+    })
+      .map(([, track]) => track)
+      .join(' ')
  );

  const studentPlaceholderAvatarUrls = $derived.by(() => [
@@ -91,6 +115,10 @@
  });

  function handleRowClick() {
+    if (isExplore && onExploreClick) {
+      onExploreClick();
+      return;
+    }
    if (isExplore) {
      goto(resolve(`/course/${slug}`, {}));
      return;
@@ -161,35 +189,39 @@
    </div>

    <!-- Published badge -->
-    <div>
-      {#if isPublished}
-        <Badge variant="success" class="whitespace-nowrap">
-          {$t('courses.course_card.published')}
-        </Badge>
-      {:else}
-        <Badge variant="secondary" class="whitespace-nowrap">
-          {$t('courses.course_card.unpublished')}
-        </Badge>
-      {/if}
-    </div>
+    {#if !hidden.has('published')}
+      <div>
+        {#if isPublished}
+          <Badge variant="success" class="whitespace-nowrap">
+            {$t('courses.course_card.published')}
+          </Badge>
+        {:else}
+          <Badge variant="secondary" class="whitespace-nowrap">
+            {$t('courses.course_card.unpublished')}
+          </Badge>
+        {/if}
+      </div>
+    {/if}

    <!-- Tags -->
-    <div class="flex min-w-0 flex-wrap items-center gap-1">
-      {#if tags.length === 0}
-        <span class="ui:text-muted-foreground text-xs">—</span>
-      {:else}
-        {#each tags as tag (tag.id)}
-          <Badge variant="outline" class="max-w-[140px] truncate">
-            <span
-              class="ui:bg-primary/60 inline-block h-1.5 w-1.5 shrink-0 rounded-full"
-              style={tag.color ? `background-color: ${tag.color}` : undefined}
-              aria-hidden="true"
-            ></span>
-            {tag.name}
-          </Badge>
-        {/each}
-      {/if}
-    </div>
+    {#if !hidden.has('tags')}
+      <div class="flex min-w-0 flex-wrap items-center gap-1">
+        {#if tags.length === 0}
+          <span class="ui:text-muted-foreground text-xs">—</span>
+        {:else}
+          {#each tags as tag (tag.id)}
+            <Badge variant="outline" class="max-w-[140px] truncate">
+              <span
+                class="ui:bg-primary/60 inline-block h-1.5 w-1.5 shrink-0 rounded-full"
+                style={tag.color ? `background-color: ${tag.color}` : undefined}
+                aria-hidden="true"
+              ></span>
+              {tag.name}
+            </Badge>
+          {/each}
+        {/if}
+      </div>
+    {/if}

    <!-- Lessons / exercises -->
    <div class="flex flex-col gap-1 tabular-nums">
@@ -204,97 +236,112 @@
    </div>

    <!-- Students -->
-    <div class="flex items-center gap-1">
-      {#if totalStudents > 0}
-        {#if totalStudents < 3}
-          <div class="flex items-center gap-1">
-            <Avatar.Root class="ui:border-background size-6 border-2">
-              <Avatar.Image src={studentPlaceholderAvatarUrls[0]} alt="" loading="lazy" decoding="async" />
-              <Avatar.Fallback aria-hidden="true">
-                {titleInitial}
-              </Avatar.Fallback>
-            </Avatar.Root>
-            <p class="text-xs tabular-nums">{totalStudents}</p>
-          </div>
-        {:else}
-          <div class="flex -space-x-2">
-            {#each studentPlaceholderAvatarUrls as avatarUrl, slotIndex (slotIndex)}
+    {#if !hidden.has('students')}
+      <div class="flex items-center gap-1">
+        {#if totalStudents > 0}
+          {#if totalStudents < 3}
+            <div class="flex items-center gap-1">
              <Avatar.Root class="ui:border-background size-6 border-2">
-                <Avatar.Image src={avatarUrl} alt="" loading="lazy" decoding="async" />
+                <Avatar.Image src={studentPlaceholderAvatarUrls[0]} alt="" loading="lazy" decoding="async" />
                <Avatar.Fallback aria-hidden="true">
                  {titleInitial}
                </Avatar.Fallback>
              </Avatar.Root>
-            {/each}
-            <Avatar.Root class="ui:border-background size-6 border-2">
-              <Avatar.Fallback class="text-[10px]">+{totalStudents - 2}</Avatar.Fallback>
-            </Avatar.Root>
-          </div>
+              <p class="text-xs tabular-nums">{totalStudents}</p>
+            </div>
+          {:else}
+            <div class="flex -space-x-2">
+              {#each studentPlaceholderAvatarUrls as avatarUrl, slotIndex (slotIndex)}
+                <Avatar.Root class="ui:border-background size-6 border-2">
+                  <Avatar.Image src={avatarUrl} alt="" loading="lazy" decoding="async" />
+                  <Avatar.Fallback aria-hidden="true">
+                    {titleInitial}
+                  </Avatar.Fallback>
+                </Avatar.Root>
+              {/each}
+              <Avatar.Root class="ui:border-background size-6 border-2">
+                <Avatar.Fallback class="text-[10px]">+{totalStudents - 2}</Avatar.Fallback>
+              </Avatar.Root>
+            </div>
+          {/if}
+        {:else}
+          <Avatar.Root class="size-6">
+            <Avatar.Image src={emptyStateAvatarUrl} alt="" loading="lazy" decoding="async" />
+            <Avatar.Fallback aria-hidden="true">
+              {titleInitial}
+            </Avatar.Fallback>
+          </Avatar.Root>
+          <p class="text-xs">0</p>
        {/if}
-      {:else}
-        <Avatar.Root class="size-6">
-          <Avatar.Image src={emptyStateAvatarUrl} alt="" loading="lazy" decoding="async" />
-          <Avatar.Fallback aria-hidden="true">
-            {titleInitial}
-          </Avatar.Fallback>
-        </Avatar.Root>
-        <p class="text-xs">0</p>
-      {/if}
-    </div>
+      </div>
+    {/if}

    <!-- Actions -->
    {#if showActionsColumn}
      <div class="flex justify-end">
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            {#snippet child({ props })}
-              <Button
-                {...props}
-                variant="ghost"
-                size="icon"
-                class="size-8"
-                aria-label={$t('courses.course_card.actions_menu_aria')}
-                onclick={(e) => e.stopPropagation()}
-              >
-                <EllipsisVerticalIcon class="size-4" />
-              </Button>
-            {/snippet}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end">
-            {#if showPublicCourseLinks}
-              <DropdownMenu.Item
-                onclick={() =>
-                  openCoursePreview({
-                    courseId: id,
-                    courseSlug: slug,
-                    currentOrgDomain: $currentOrgDomain
-                  })}
-              >
-                <ExternalLinkIcon class="mr-2 size-4" />
-                {$t('courses.course_card.context_menu.open_public_course')}
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
-                <CopyIcon class="mr-2 size-4" />
-                {$t('courses.course_card.context_menu.copy_course_url')}
-              </DropdownMenu.Item>
-            {/if}
-            {#if !isLMS}
+        {#if isLMS && isExplore}
+          <Button
+            variant="outline"
+            size="sm"
+            onclick={(e) => {
+              e.stopPropagation();
+              onExploreClick?.();
+            }}
+          >
+            {$t('courses.course_card.learn_more')}
+          </Button>
+        {:else}
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="ghost"
+                  size="icon"
+                  class="size-8"
+                  aria-label={$t('courses.course_card.actions_menu_aria')}
+                  onclick={(e) => e.stopPropagation()}
+                >
+                  <EllipsisVerticalIcon class="size-4" />
+                </Button>
+              {/snippet}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
              {#if showPublicCourseLinks}
-                <DropdownMenu.Separator />
+                <DropdownMenu.Item
+                  onclick={() =>
+                    openCoursePreview({
+                      courseId: id,
+                      courseSlug: slug,
+                      currentOrgDomain: $currentOrgDomain
+                    })}
+                >
+                  <ExternalLinkIcon class="mr-2 size-4" />
+                  {$t('courses.course_card.context_menu.open_public_course')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+                  <CopyIcon class="mr-2 size-4" />
+                  {$t('courses.course_card.context_menu.copy_course_url')}
+                </DropdownMenu.Item>
              {/if}
-              <DropdownMenu.Item onclick={handleOpen}>
-                {$t('courses.course_card.context_menu.open')}
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onclick={handleClone}>
-                {$t('courses.course_card.context_menu.clone')}
-              </DropdownMenu.Item>
-              <DropdownMenu.Separator />
-              <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
-                {$t('courses.course_card.context_menu.delete')}
-              </DropdownMenu.Item>
-            {/if}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
+              {#if !isLMS}
+                {#if showPublicCourseLinks}
+                  <DropdownMenu.Separator />
+                {/if}
+                <DropdownMenu.Item onclick={handleOpen}>
+                  {$t('courses.course_card.context_menu.open')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onclick={handleClone}>
+                  {$t('courses.course_card.context_menu.clone')}
+                </DropdownMenu.Item>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
+                  {$t('courses.course_card.context_menu.delete')}
+                </DropdownMenu.Item>
+              {/if}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        {/if}
      </div>
    {/if}
  </div>
@@ -89,6 +89,19 @@
        isLesson: true,
        icon: getNavIcon(NAV_IDS.LESSONS)
      },
+      {
+        id: NAV_IDS.CERTIFICATES,
+        title: $t('course.navItems.nav_certificates'),
+        url: getNavItemRoute(id, 'certificates'),
+        isActive: (path || page.url.pathname) === getNavItemRoute(id, 'certificates'),
+        show() {
+          if (isStudent && $isFreePlan) {
+            return false;
+          }
+          return true;
+        },
+        icon: getNavIcon(NAV_IDS.CERTIFICATES)
+      },
      {
        id: NAV_IDS.ANALYTICS,
        title: $t('course.navItems.nav_analytics'),
@@ -144,19 +157,6 @@
        },
        icon: getNavIcon(NAV_IDS.COMPLIANCE)
      },
-      {
-        id: NAV_IDS.CERTIFICATES,
-        title: $t('course.navItems.nav_certificates'),
-        url: getNavItemRoute(id, 'certificates'),
-        isActive: (path || page.url.pathname) === getNavItemRoute(id, 'certificates'),
-        show() {
-          if (isStudent && $isFreePlan) {
-            return false;
-          }
-          return true;
-        },
-        icon: getNavIcon(NAV_IDS.CERTIFICATES)
-      },
      {
        id: NAV_IDS.LANDING_PAGE,
        title: $t('course.navItems.nav_landing_page'),
@@ -158,7 +158,8 @@
        grading: $settings.grading,
        lessonDownload: $settings.lessonDownload,
        allowNewStudent: $settings.allowNewStudents ?? false,
-        isContentGroupingEnabled: $settings.isContentGroupingEnabled
+        isContentGroupingEnabled: $settings.isContentGroupingEnabled,
+        progressionMode: $settings.progressionMode
      } as NonNullable<Course['metadata']>;

      const updatedCourse = {
@@ -222,6 +223,7 @@
        isPublished: !!course.isPublished,
        allowNewStudents: !!course.metadata?.allowNewStudent,
        isContentGroupingEnabled: course.metadata?.isContentGroupingEnabled ?? true,
+        progressionMode: course.metadata?.progressionMode ?? 'free',
        callout: normalizeCallout(course.callout)
      });
    });
@@ -522,6 +524,35 @@

  <Field.Separator />

+  <Field.Set>
+    <Field.Legend>{$t('course.navItem.settings.progression_mode_title')}</Field.Legend>
+    <Field.Description>{$t('course.navItem.settings.progression_mode_description')}</Field.Description>
+    <Field.Field>
+      <RadioGroup.Root
+        value={$settings.progressionMode}
+        onValueChange={(value) => {
+          if (value === 'free' || value === 'sequential') {
+            $settings.progressionMode = value;
+            hasUnsavedChanges = true;
+          }
+        }}
+      >
+        <div class="flex flex-col gap-3">
+          <div class="flex items-center gap-2">
+            <RadioGroup.Item value="free" id="progression-free" />
+            <Label for="progression-free">{$t('course.navItem.settings.progression_mode_free')}</Label>
+          </div>
+          <div class="flex items-center gap-2">
+            <RadioGroup.Item value="sequential" id="progression-sequential" />
+            <Label for="progression-sequential">{$t('course.navItem.settings.progression_mode_sequential')}</Label>
+          </div>
+        </div>
+      </RadioGroup.Root>
+    </Field.Field>
+  </Field.Set>
+
+  <Field.Separator />
+
  <Field.Set>
    <Field.Legend>{$t('course.navItem.settings.lesson_download')}</Field.Legend>
    <Field.Description>{$t('course.navItem.settings.available')}</Field.Description>
@@ -737,6 +768,7 @@
        checked={$settings.isPublished}
        onCheckedChange={(checked) => {
          $settings.isPublished = checked;
+          if (checked) $settings.allowNewStudents = true;
          hasUnsavedChanges = true;
        }}
      />
@@ -3,7 +3,10 @@
  import * as Dialog from '@cio/ui/base/dialog';
  import { Button } from '@cio/ui/base/button';
  import { DEFAULT_COURSE_BANNER_IMAGE } from '@cio/ui';
+  import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
+  import HTMLRender from '$features/ui/html-render.svelte';
  import BookOpenIcon from '@lucide/svelte/icons/book-open';
+  import XIcon from '@lucide/svelte/icons/x';
  import { t } from '$lib/utils/functions/translations';
  import { calcCourseDiscount, isCourseFree } from '$lib/utils/functions/course';
  import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
@@ -44,12 +47,22 @@
 </script>

 <Dialog.Root bind:open>
-  <Dialog.Content class="overflow-hidden p-0 sm:max-w-2xl">
-    <div class="aspect-video w-full overflow-hidden">
-      <img src={course.logo || DEFAULT_COURSE_BANNER_IMAGE} alt={course.title} class="h-full w-full object-cover" />
+  <Dialog.Content class="ui:p-0 overflow-hidden sm:max-w-2xl" showCloseButton={false}>
+    <div class="relative overflow-hidden rounded-md">
+      <img
+        src={course.logo || DEFAULT_COURSE_BANNER_IMAGE}
+        alt={course.title}
+        class="aspect-video w-full object-cover"
+      />
+      <Dialog.Close
+        class="ui:absolute ui:top-3 ui:right-3 ui:inline-flex ui:size-8 ui:items-center ui:justify-center ui:rounded-md ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80 ui:transition-colors ui:cursor-pointer"
+      >
+        <XIcon class="ui:size-4" />
+        <span class="ui:sr-only">Close</span>
+      </Dialog.Close>
    </div>

-    <div class="max-h-80 overflow-y-auto px-6 py-4">
+    <div class="max-h-72 overflow-y-auto px-6 py-4">
      <h2 class="text-xl font-semibold tracking-tight">{course.title}</h2>

      {#if course.description}
@@ -70,12 +83,14 @@
      {#if requirements}
        <div class="mt-4">
          <h3 class="text-sm font-semibold">{$t('course.navItem.landing_page.requirement')}</h3>
-          <p class="ui:text-muted-foreground mt-1 text-sm leading-relaxed">{requirements}</p>
+          <HTMLRender className="text-sm mt-1" disableMaxWidth={true}>
+            <SafeHtmlContent content={requirements} />
+          </HTMLRender>
        </div>
      {/if}
    </div>

-    <div class="ui:border-t ui:bg-card sticky bottom-0 flex items-center justify-between px-6 py-4">
+    <div class="ui:border-t ui:bg-card sticky bottom-0 flex items-center justify-between px-6 py-4" data-sticky="true">
      <div>
        {#if allowNewStudent}
          <p class="text-lg font-bold">
@@ -17,7 +17,8 @@
  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
  import { profile } from '$lib/utils/store/user';
  import { coursesApi } from '$features/course/api';
-  import { CourseCard } from '$features/course/components';
+  import * as ResourceListRow from '@cio/ui/custom/resource-list-row';
+  import { CourseListRow } from '$features/course/components';
  import CoursePublicBadge from '$features/course/components/course-public-badge.svelte';
  import CoursePreviewModal from '$features/lms/components/course-preview-modal.svelte';
  import type { RecommendedCourses } from '$features/course/types';
@@ -63,7 +64,7 @@
    if (!$profile.id || !$currentOrg.id) return;

    coursesApi.getEnrolledCourses();
-    coursesApi.getRecommendedCourses({ limit: 6 });
+    coursesApi.getRecommendedCourses({ limit: 3 });
  });

  $effect(() => {
@@ -103,7 +104,7 @@

        return getStudentCourseProgressPercent(rightCourse) - getStudentCourseProgressPercent(leftCourse);
      })
-      .slice(0, 3);
+      .slice(0, 2);
  }

  async function loadLoginStreak() {
@@ -261,9 +262,14 @@

  <div class="grid items-stretch gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,0.72fr)]">
    <section class="flex h-full flex-col space-y-4">
-      <h2 class="ui:text-muted-foreground text-sm font-semibold tracking-[0.14em] uppercase">
-        {$t('dashboard.currently_learning')}
-      </h2>
+      <div class="flex items-center justify-between">
+        <h2 class="ui:text-muted-foreground text-sm font-semibold tracking-[0.14em] uppercase">
+          {$t('dashboard.currently_learning')}
+        </h2>
+        <Button variant="outline" size="sm" onclick={() => goto('/lms/mylearning')}>
+          {$t('dashboard.view_more')}
+        </Button>
+      </div>

      <div class="flex flex-1 flex-col space-y-3">
        {#if coursesApi.isLoading}
@@ -418,19 +424,28 @@
          <Spinner class="size-6" />
        </div>
      {:else}
-        <div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <ResourceListRow.Group>
          {#each coursesApi.recommendedCourses as course (course.id)}
-            <CourseCard
-              {course}
+            <CourseListRow
+              id={course.id}
+              slug={course.slug ?? ''}
+              title={course.title}
+              logo={course.logo}
+              type={course.type}
+              description={course.description ?? ''}
+              isPublished={course.isPublished ?? false}
+              lessonCount={course.lessonCount}
+              exerciseCount={course.exerciseCount}
              isExplore={true}
              isLMS={true}
+              hiddenColumns={['published', 'tags', 'students']}
              onExploreClick={() => {
                selectedCourse = course;
                previewOpen = true;
              }}
            />
          {/each}
-        </div>
+        </ResourceListRow.Group>
      {/if}
    </section>
  {/if}
@@ -10,11 +10,15 @@
  import type { RecommendedCourses } from '$features/course/types';
  import { CourseSortBy, DEFAULT_COURSE_SORT, parseCourseSortValue } from '$features/course/utils/constants';
  import CoursePreviewModal from '$features/lms/components/course-preview-modal.svelte';
+  import * as Pagination from '@cio/ui/base/pagination';
+
+  const EXPLORE_LIMIT = 12;

  let searchValue = $state('');
  let sortKey = $state<CourseSortBy>(DEFAULT_COURSE_SORT);
  let selectedCourse = $state<RecommendedCourses[number] | null>(null);
  let previewOpen = $state(false);
+  let currentPage = $state(1);

  $effect(() => {
    if (!browser) return;
@@ -44,6 +48,19 @@
    return coursesFiltered;
  });

+  const pagination = $derived(coursesApi.recommendedCoursesPagination);
+
+  function fetchPage(page: number) {
+    currentPage = page;
+    coursesApi.getRecommendedCourses({ limit: EXPLORE_LIMIT, page });
+  }
+
+  $effect(() => {
+    if (searchValue) {
+      currentPage = 1;
+    }
+  });
+
  onMount(() => {
    const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;

@@ -57,7 +74,7 @@
  $effect(() => {
    if (!$profile.id || !$currentOrg.id) return;

-    coursesApi.getRecommendedCourses();
+    coursesApi.getRecommendedCourses({ limit: EXPLORE_LIMIT, page: currentPage });
  });
 </script>

@@ -76,6 +93,40 @@
  }}
 />

+{#if pagination && pagination.totalPages > 1}
+  <Pagination.Root
+    count={pagination.total}
+    perPage={pagination.limit}
+    page={currentPage}
+    onPageChange={fetchPage}
+    class="mt-6"
+  >
+    {#snippet children({ pages, currentPage: activePage })}
+      <Pagination.Content>
+        <Pagination.Item>
+          <Pagination.PrevButton />
+        </Pagination.Item>
+        {#each pages as pageItem (pageItem.key)}
+          {#if pageItem.type === 'ellipsis'}
+            <Pagination.Item>
+              <Pagination.Ellipsis />
+            </Pagination.Item>
+          {:else}
+            <Pagination.Item>
+              <Pagination.Link page={pageItem} isActive={activePage === pageItem.value}>
+                {pageItem.value}
+              </Pagination.Link>
+            </Pagination.Item>
+          {/if}
+        {/each}
+        <Pagination.Item>
+          <Pagination.NextButton />
+        </Pagination.Item>
+      </Pagination.Content>
+    {/snippet}
+  </Pagination.Root>
+{/if}
+
 {#if selectedCourse}
  <CoursePreviewModal course={selectedCourse} bind:open={previewOpen} />
 {/if}
@@ -57,6 +57,12 @@ export const baseNavConfig: NavItemConfig[] = [
    icon: CourseIcon,
    matchPattern: '^/lms/mylearning(/.*)?$'
  },
+  {
+    titleKey: 'lms_navigation.explore',
+    path: '/explore',
+    icon: ExploreIcon,
+    matchPattern: '^/lms/explore(/.*)?$'
+  },
  {
    titleKey: 'lms_navigation.programs',
    path: '/programs',
@@ -76,20 +82,14 @@ export const baseNavConfig: NavItemConfig[] = [
    icon: CommunityIcon,
    matchPattern: '^/lms/community(/.*)?$',
    show: (currentOrg) => currentOrg?.customization?.dashboard?.community === true,
-    supportsDynamicSegment: true, // Supports /community/[slug]
+    supportsDynamicSegment: true,
    nestedRoutes: [
      {
        path: 'ask',
-        titleKey: 'Ask Question' // Could be translated
+        titleKey: 'Ask Question'
      }
    ]
  },
-  {
-    titleKey: 'lms_navigation.explore',
-    path: '/explore',
-    icon: ExploreIcon,
-    matchPattern: '^/lms/explore(/.*)?$'
-  },
  {
    titleKey: 'lms_navigation.settings',
    path: '/settings',
@@ -2201,6 +2201,38 @@
        "no_lesson": "No lessons yet",
        "content_locked_title": "This content is locked",
        "content_locked_description": "Your instructor has not unlocked this content yet. Complete previous content or check back later.",
+        "content_progression_locked_title": "Complete previous content first",
+        "content_progression_locked_description": "This content unlocks after you finish the previous required item in the course.",
+        "content_progression_locked_description_lesson": "This lesson unlocks after you finish the previous required item in the course.",
+        "content_progression_locked_description_exercise": "This exercise unlocks after you finish the previous required item in the course.",
+        "completion_policy": {
+          "label": "Completion rule",
+          "manual_label": "Manual",
+          "manual_description": "Students mark the lesson complete themselves.",
+          "video_watch_label": "Video watch",
+          "video_watch_description": "The lesson completes automatically after students watch the selected videos.",
+          "none_label": "None",
+          "none_description": "This lesson does not block course progression.",
+          "watch_threshold": "Watch threshold (%)"
+        },
+        "settings": {
+          "progression": {
+            "heading": "Progression",
+            "intro": "Choose how students complete this lesson and move through the course.",
+            "option_guide_heading": "What each option means",
+            "watch_videos_heading": "Videos to enforce",
+            "watch_videos_helper": "Only uploaded videos can be enforced. YouTube and external embeds cannot be tracked.",
+            "watch_videos_empty": "Add an uploaded video in the Video tab to use watch enforcement.",
+            "watch_videos_required": "Select at least one video when using video watch.",
+            "students_only_note": "These rules apply to students only. You can preview and navigate freely while teaching."
+          }
+        },
+        "watch_progress": {
+          "status": "Watched {percent}% of the video content",
+          "videos_complete": "Watched {percent}% of the required video content ({complete} of {required} videos)",
+          "seek_blocked": "You cannot skip ahead on this video",
+          "complete_via_watch": "This lesson completes when you watch enough of the video"
+        },
        "share_your_knowledge": "Share your knowledge with the world by creating engaging lessons. Start by clicking on the Add button.",
        "section_prompt": {
          "cta": "Enable Sections",
@@ -2297,6 +2329,9 @@
              "slide_link": "Slide Link",
              "helper_message": "You can embed Google Slides or Canva Presentation"
            },
+            "settings": {
+              "title": "Settings"
+            },
            "video": {
              "title": "Video",
              "embed_link": "Embed Link",
@@ -2362,13 +2397,15 @@
              "generate_1080_unavailable": "1080p unavailable for this source video",
              "playback_error": "Loading this video failed.",
              "playback_reload": "Reload video",
+              "loading": "Loading video…",
              "simple_card": {
                "kind_youtube": "YouTube",
                "kind_upload": "Upload",
                "kind_google_drive": "Google Drive",
                "kind_generic": "Embedded",
                "course_fallback": "Course",
-                "menu_aria": "Video options"
+                "menu_aria": "Video options",
+                "transcription_in_progress": "(Transcript generation in progress)"
              },
              "transcript": {
                "title": "Transcript",
@@ -2471,6 +2508,10 @@
            "settings": "Settings",
            "settings_allow_multiple": "Allow multiple attempts",
            "settings_allow_multiple_helper": "Students can submit more than once and review past attempts on the results screen.",
+            "settings_completion_policy": "Completion rule",
+            "settings_completion_submitted": "Submitted — any submission counts",
+            "settings_completion_passed": "Passed — minimum score required",
+            "settings_pass_threshold": "Pass threshold (%)",
            "settings_save": "Save settings",
            "submissions": "Submissions",
            "save": "Save",
@@ -3297,6 +3338,13 @@
          "signatory_one_role": "Signatory 1 role",
          "signatory_two_name": "Signatory 2 name",
          "signatory_two_role": "Signatory 2 role",
+          "signatory_one_toggle": "Show signatory 1",
+          "signatory_two_toggle": "Show signatory 2",
+          "signature_upload": "Signature image",
+          "signature_upload_hint": "Upload a signature image (optional)",
+          "signature_dont_crop": "Don't Crop",
+          "signature_upload_in_progress": "Wait for the signature upload to finish before saving.",
+          "save_failed": "Could not save the certificate design. Check the form and try again.",
          "id_format": "Certificate ID format",
          "id_format_hint": "Use '{'seq'}' for the last four digits, '{'year'}' for the issue year, '{'month'}' for the month.",
          "accent_hint": "Accent color appears on the recipient rule, stamps, and the template's headline highlight.",
@@ -3486,6 +3534,10 @@
        "drag": "Drag and drop the labels to re-order your material tabs",
        "content_grouping_title": "Content grouping",
        "content_grouping_description": "Group lessons and exercises by section in the content list.",
+        "progression_mode_title": "Student progression",
+        "progression_mode_description": "Control whether students can access all unlocked content or must complete items in order.",
+        "progression_mode_free": "Free — unlocked content is accessible",
+        "progression_mode_sequential": "Sequential — complete prior items to unlock next",
        "lesson_download": "Lessons DownLoad",
        "available": "Make the Lesson available for Download in pdf for registered students",
        "course_download": "Course Downlaod",
@@ -3985,6 +4037,7 @@
      "thumbnail_regen_failed": "Failed to regenerate thumbnails",
      "transcription_started": "Transcription started",
      "transcription_start_failed": "Could not start transcription",
+      "transcription_already_running": "A transcription job is already in progress for this video",
      "transcription_completed": "Transcription finished",
      "transcript_fetch_failed": "Could not load transcript",
      "transcript_saved": "Transcript updated",