feat: make explore more visible in lms

apps/dashboard/src/lib/features/course/api/courses.svelte.ts

@@ -135,9 +135,12 @@ 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() {
+  async getRecommendedCourses(options?: { limit?: number }) {
     await this.execute<GetRecommendedCoursesRequest>({
-      requestFn: () => classroomio.organization.courses.recommended.$get({}),
+      requestFn: () =>
+        classroomio.organization.courses.recommended.$get({
+          query: options?.limit ? { limit: String(options.limit) } : {}
+        }),
       logContext: 'fetching recommended courses',
       onSuccess: (response) => {
         if (response.data) {

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

@@ -2,15 +2,16 @@
   import * as Item from '@cio/ui/base/item';
   import Card, { type Props as CardProps } from './card.svelte';
 
-  type Props = Omit<CardProps, 'course'> & {
+  type Props = Omit<CardProps, 'course' | 'onExploreClick'> & {
     courses: CardProps['course'][];
+    onCardClick?: (course: CardProps['course']) => void;
   };
 
-  let { courses, ...rest }: Props = $props();
+  let { courses, onCardClick, ...rest }: Props = $props();
 </script>
 
 <Item.Group class="grid! w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
   {#each courses as course (course.id)}
-    <Card {course} {...rest} />
+    <Card {course} {...rest} onExploreClick={onCardClick ? () => onCardClick(course) : undefined} />
   {/each}
 </Item.Group>

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

@@ -38,9 +38,10 @@
     isExplore?: boolean;
     href?: string;
     actions?: Snippet;
+    onExploreClick?: () => void;
   }
 
-  let { course, isOnLandingPage, isLMS, isExplore, href, actions }: Props = $props();
+  let { course, isOnLandingPage, isLMS, isExplore, href, actions, onExploreClick }: Props = $props();
 
   let {
     bannerImage,
@@ -141,6 +142,10 @@
   let cost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost ?? 0, !!pricingData.showDiscount));
 
   let courseUrl = $derived.by(() => {
+    if (onExploreClick && isLMS && isExplore) {
+      return undefined;
+    }
+
     if (href) {
       return href;
     }
@@ -299,7 +304,7 @@
       </div>
 
       {#if isLMS}
-        <Button variant="outline">
+        <Button variant="outline" onclick={isExplore && onExploreClick ? onExploreClick : undefined}>
           {isExplore ? $t('courses.course_card.learn_more') : $t('courses.course_card.continue_course')}
 
           <ArrowRightIcon class="custom" />

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

@@ -38,6 +38,8 @@
     isLoading?: boolean;
     showSortSelect?: boolean;
     filterControls?: Snippet;
+    onCardClick?: (course: (OrgCourses | UserEnrolledCourses)[number]) => void;
+    emptyAction?: Snippet;
   }
 
   let {
@@ -50,7 +52,9 @@
     sortKey = $bindable(DEFAULT_COURSE_SORT),
     isLoading = false,
     showSortSelect = true,
-    filterControls
+    filterControls,
+    onCardClick,
+    emptyAction
   }: Props = $props();
 
   const filterOptions = $derived(
@@ -123,10 +127,12 @@
     <Empty title={emptyTitle} description={emptyDescription} icon={LibraryBigIcon} variant="page">
       {#if !isLMS}
         <CreateCourseButton isResponsive />
+      {:else if emptyAction}
+        {@render emptyAction()}
       {/if}
     </Empty>
   {:else if isLMS || $courseMetaDeta.view === 'grid'}
-    <CourseCardList {courses} {isExplore} {isLMS} />
+    <CourseCardList {courses} {isExplore} {isLMS} {onCardClick} />
   {:else}
     <ResourceListRow.Group>
       {#each courses as courseData (courseData.id)}