fix: make public courses page filters responsive on mobile (#801)

* responsiveness styling * Changed plain text to use the translation * AI comment fixes * Made changes to the Theme * debug --------- Co-authored-by: Rotimi Best <best@classroomio.com>
2026-08-18 13:09:05 +01:00
parent 967e81d33f
commit 74ab74e364
33 changed files with 472 additions and 375 deletions
@@ -3967,9 +3967,12 @@
      "tags_title": "Tags",
      "types_title": "Typer",
      "search_placeholder": "Søg efter kurser...",
+      "clear_search": "Ryd søgning",
      "pricing_title": "Prissætning",
      "pricing_free": "Gratis",
-      "pricing_paid": "Betalt"
+      "pricing_paid": "Betalt",
+      "selected": "Valgt:",
+      "save_changes": "Gem ændringer"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Tags",
      "types_title": "Typen",
      "search_placeholder": "Kurse suchen...",
+      "clear_search": "Suche löschen",
      "pricing_title": "Preise",
      "pricing_free": "Kostenlos",
-      "pricing_paid": "Bezahlt"
+      "pricing_paid": "Bezahlt",
+      "selected": "Ausgewählt:",
+      "save_changes": "Änderungen speichern"
    }
  },
  "tags_admin": {
@@ -1300,7 +1300,10 @@
      "pricing_free": "Free",
      "pricing_paid": "Paid",
      "empty": "No tags available yet",
-      "search_placeholder": "Search courses..."
+      "search_placeholder": "Search courses...",
+      "clear_search": "Clear search",
+      "selected": "Selected:",
+      "save_changes": "Save Changes"
    },
    "empty": {
      "title": "No courses found",
@@ -3967,9 +3967,12 @@
      "tags_title": "Etiquetas",
      "types_title": "Tipos",
      "search_placeholder": "Buscar cursos...",
+      "clear_search": "Borrar búsqueda",
      "pricing_title": "Precios",
      "pricing_free": "Gratis",
-      "pricing_paid": "Pagado"
+      "pricing_paid": "Pagado",
+      "selected": "Seleccionado:",
+      "save_changes": "Guardar cambios"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Étiquettes",
      "types_title": "Espèces",
      "search_placeholder": "Rechercher des cours...",
+      "clear_search": "Effacer la recherche",
      "pricing_title": "Tarifs",
      "pricing_free": "Gratuit",
-      "pricing_paid": "Payé"
+      "pricing_paid": "Prix",
+      "selected": "Sélectionné :",
+      "save_changes": "Enregistrer les modifications"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "टैग",
      "types_title": "प्रकार",
      "search_placeholder": "पाठ्यक्रम खोजें...",
+      "clear_search": "खोज साफ़ करें",
      "pricing_title": "मूल्य निर्धारण",
      "pricing_free": "निःशुल्क",
-      "pricing_paid": "भुगतान किया गया"
+      "pricing_paid": "भुगतान किया गया",
+      "selected": "चयनित:",
+      "save_changes": "परिवर्तन सहेजें"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Tagi",
      "types_title": "Typy",
      "search_placeholder": "Wyszukaj kursy...",
+      "clear_search": "Wyczyść szukanie",
      "pricing_title": "Ceny",
      "pricing_free": "Bezpłatny",
-      "pricing_paid": "Płatny"
+      "pricing_paid": "Płatny",
+      "selected": "Wybrane:",
+      "save_changes": "Zapisz zmiany"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Etiquetas",
      "types_title": "Tipos",
      "search_placeholder": "Pesquisar cursos...",
+      "clear_search": "Limpar pesquisa",
      "pricing_title": "Preços",
      "pricing_free": "Grátis",
-      "pricing_paid": "Pago"
+      "pricing_paid": "Pago",
+      "selected": "Selecionado:",
+      "save_changes": "Salvar alterações"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Теги",
      "types_title": "Типы",
      "search_placeholder": "Искать курсы...",
+      "clear_search": "Очистить поиск",
      "pricing_title": "Цены",
      "pricing_free": "Бесплатно",
-      "pricing_paid": "Платный"
+      "pricing_paid": "Платный",
+      "selected": "Выбрано:",
+      "save_changes": "Сохранить изменения"
    }
  },
  "tags_admin": {
@@ -3967,9 +3967,12 @@
      "tags_title": "Thẻ",
      "types_title": "Các loại",
      "search_placeholder": "Tìm kiếm khóa học...",
+      "clear_search": "Xóa tìm kiếm",
      "pricing_title": "Định giá",
      "pricing_free": "miễn phí",
-      "pricing_paid": "Đã trả tiền"
+      "pricing_paid": "Đã trả tiền",
+      "selected": "Đã chọn:",
+      "save_changes": "Lưu thay đổi"
    }
  },
  "tags_admin": {
@@ -11,20 +11,18 @@
  import { PoweredBy } from '$features/ui';
  import LibraryBigIcon from '@lucide/svelte/icons/library-big';
  import XIcon from '@lucide/svelte/icons/x';
-  import {
-    normalizeLandingPageSettings,
-    themeHeaderShellClass,
-    themeStyle,
-    themeRendersNavInsideHero
-  } from '$features/org/utils/landing-page';
+  import FilterIcon from '@lucide/svelte/icons/filter';
+  import { normalizeLandingPageSettings, themeRendersNavInsideHero } from '$features/org/utils/landing-page';

-  import { LandingButton, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
+  import { LandingButton, LandingThemeScope, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';

  import { Checkbox } from '@cio/ui/base/checkbox';
  import { Input } from '@cio/ui/base/input';
  import { Empty } from '@cio/ui/custom/empty';
  import { Separator } from '@cio/ui/base/separator';
  import * as Pagination from '@cio/ui/base/pagination';
+  import * as Sheet from '@cio/ui/base/sheet';
+  import { Accordion } from '@cio/ui';

  let { data } = $props();

@@ -33,6 +31,10 @@
  let activeSearch = $derived(data.activeSearch || '');
  let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing);
  let searchInput = $state('');
+  let filterSheetOpen = $state(false);
+  type FilterSection = 'types' | 'pricing' | 'tags';
+  // let openFilterSection = $state<FilterSection | null>('types');
+  let openFilterSection = $state<FilterSection | string[] | undefined>('types');

  $effect(() => {
    searchInput = activeSearch;
@@ -59,8 +61,6 @@
        }
  );

-  const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
-  const shellStyle = $derived(themeStyle(landingSettings.theme));
  const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));

  const NavComponent = $derived(data.theme.Nav);
@@ -74,6 +74,8 @@
    image: ''
  });

+  const activeFilterCount = $derived(selectedTags.length + selectedTypes.length + (activePricing ? 1 : 0));
+
  async function applyFilters(next: {
    tags?: string[];
    types?: string[];
@@ -102,6 +104,42 @@
    });
  }

+  let isDesktop = $state(false);
+
+  let restoreSheetOnMobile = $state(false);
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(min-width: 1024px)');
+
+    function syncViewport(matches: boolean) {
+      isDesktop = matches;
+
+      if (matches) {
+        openFilterSection = ['types', 'pricing', 'tags'];
+
+        if (filterSheetOpen) {
+          restoreSheetOnMobile = true;
+          filterSheetOpen = false;
+        }
+      } else {
+        openFilterSection = 'types';
+
+        if (restoreSheetOnMobile) {
+          filterSheetOpen = true;
+          restoreSheetOnMobile = false;
+        }
+      }
+    }
+
+    syncViewport(mql.matches);
+
+    const onChange = (e: MediaQueryListEvent) => syncViewport(e.matches);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+  });
+
  async function goToPage(nextPage: number) {
    if (nextPage === data.pagination.page) {
      return;
@@ -203,153 +241,107 @@
  );
 </script>

-<PoweredBy />
-
-<main class={shellClass} style={shellStyle}>
-  {#if navInsideHero}
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
-      {#snippet navigation()}
-        <NavComponent
-          orgName={data.org.name}
-          logoUrl={data.org.avatarUrl ?? undefined}
-          navItems={landingSettings.navItems}
-          {authAction}
-        />
-      {/snippet}
-      {#snippet children()}
-        <div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
-          <Input
-            type="text"
-            value={searchInput}
-            oninput={(e) => onSearchInput(e.currentTarget.value)}
-            onkeydown={onSearchKeydown}
-            placeholder={$t('public_courses.filters.search_placeholder')}
-            class="ui:pr-8"
-          />
-          {#if searchInput}
-            <button
-              type="button"
-              onclick={clearSearch}
-              class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
-              aria-label="Clear search"
-            >
-              <XIcon class="ui:size-4" />
-            </button>
-          {/if}
-        </div>
-      {/snippet}
-    </HeroComponent>
-  {:else}
-    <NavComponent
-      orgName={data.org.name}
-      logoUrl={data.org.avatarUrl ?? undefined}
-      navItems={landingSettings.navItems}
-      {authAction}
+{#snippet searchField()}
+  <div class="ui:relative ui:mx-auto ui:w-full ui:max-w-xl">
+    <Input
+      type="text"
+      value={searchInput}
+      oninput={(e) => onSearchInput(e.currentTarget.value)}
+      onkeydown={onSearchKeydown}
+      placeholder={$t('public_courses.filters.search_placeholder')}
+      class="ui:pr-8"
    />
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
-      {#snippet children()}
-        <div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
-          <Input
-            type="text"
-            value={searchInput}
-            oninput={(e) => onSearchInput(e.currentTarget.value)}
-            onkeydown={onSearchKeydown}
-            placeholder={$t('public_courses.filters.search_placeholder')}
-            class="ui:pr-8"
-          />
-          {#if searchInput}
-            <button
-              type="button"
-              onclick={clearSearch}
-              class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
-              aria-label="Clear search"
-            >
-              <XIcon class="ui:size-4" />
-            </button>
-          {/if}
-        </div>
-      {/snippet}
-    </HeroComponent>
+    {#if searchInput}
+      <button
+        type="button"
+        onclick={clearSearch}
+        class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
+        aria-label={$t('public_courses.filters.clear_search')}
+      >
+        <XIcon class="ui:size-4" />
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet filtersContent(showHeader = true)}
+  {#if showHeader}
+    <div class="p-4 pb-3">
+      <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
+      <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
+    </div>
+    <Separator class="ui:bg-[var(--landing-border)]" />
  {/if}

-  <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
-    <div class="mb-6 flex items-center justify-end gap-4">
-      <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
-        {$t('public_courses.clear_filters')}
-      </LandingButton>
-    </div>
-
-    <div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
-      <aside
-        class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 flex max-h-[calc(100dvh-2rem)] flex-col self-start rounded-lg border"
-      >
-        <div class="p-4 pb-3">
-          <h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
-          <p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
-        </div>
-
-        <Separator class="ui:bg-[var(--landing-border)]" />
-
-        <div class="flex-1 overflow-y-auto p-4">
-          <div class="space-y-5">
-            <div class="space-y-2">
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.types_title')}</h3>
-              <div class="space-y-2">
-                {#each COURSE_TYPES as courseType (courseType.value)}
-                  <label
-                    class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
-                  >
-                    <Checkbox
-                      checked={selectedTypes.includes(courseType.value)}
-                      onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
-                    />
-                    <span class="text-sm">{courseType.label}</span>
-                  </label>
-                {/each}
-              </div>
+  <div class="px-2 pb-2">
+    {#key isDesktop}
+      <Accordion.Root type={isDesktop ? 'multiple' : 'single'} bind:value={openFilterSection as never} class="w-full">
+        <!-- TYPES -->
+        <Accordion.Item value="types" class="ui:border-border">
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+            {$t('public_courses.filters.types_title')}
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <div class="space-y-2 px-1 pb-2">
+              {#each COURSE_TYPES as courseType (courseType.value)}
+                <label
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
+                >
+                  <Checkbox
+                    checked={selectedTypes.includes(courseType.value)}
+                    onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
+                  />
+                  <span class="text-sm">{courseType.label}</span>
+                </label>
+              {/each}
            </div>
+          </Accordion.Content>
+        </Accordion.Item>

-            <Separator class="ui:bg-[var(--landing-border)]" />
-
-            <div class="space-y-2">
-              <h3 class="text-sm font-semibold">{$t('public_courses.filters.pricing_title')}</h3>
-              <div class="space-y-2">
-                {#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
-                  <label
-                    class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
-                  >
-                    <Checkbox
-                      checked={activePricing === option.value}
-                      onCheckedChange={(checked) =>
-                        applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
-                    />
-                    <span class="text-sm">{option.label}</span>
-                  </label>
-                {/each}
-              </div>
+        <!-- PRICING -->
+        <Accordion.Item value="pricing" class="ui:border-border">
+          <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+            {$t('public_courses.filters.pricing_title')}
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <div class="space-y-2 px-1 pb-2">
+              {#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
+                <label
+                  class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
+                >
+                  <Checkbox
+                    checked={activePricing === option.value}
+                    onCheckedChange={(checked) =>
+                      applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
+                  />
+                  <span class="text-sm">{option.label}</span>
+                </label>
+              {/each}
            </div>
+          </Accordion.Content>
+        </Accordion.Item>

-            {#if displayTagGroups.length > 0}
-              <Separator class="ui:bg-[var(--landing-border)]" />
-
-              <div class="space-y-2">
-                <h3 class="text-sm font-semibold">{$t('public_courses.filters.tags_title')}</h3>
-              </div>
-
-              <div class="space-y-5">
+        <!-- TAGS -->
+        {#if displayTagGroups.length > 0}
+          <Accordion.Item value="tags" class="ui:border-border">
+            <Accordion.Trigger class="ui:px-2 ui:text-sm ui:font-semibold ui:uppercase ui:tracking-wide">
+              {$t('public_courses.filters.tags_title')}
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <div class="space-y-5 px-1 pb-2">
                {#each displayTagGroups as group (group.id)}
                  <div class="space-y-2">
                    <div class="space-y-1">
                      <h3 class="text-sm font-semibold">{group.name}</h3>
                      {#if group.description}
-                        <p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
+                        <p class="ui:text-muted-foreground text-xs">{group.description}</p>
                      {/if}
                    </div>

                    <div class="space-y-2">
                      {#each group.tags as tag (tag.id)}
                        <label
-                          class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
+                          class="ui:border-border ui:hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
                        >
                          <div class="flex items-center gap-2">
                            <Checkbox
@@ -363,75 +355,182 @@
                            ></span>
                            <span class="text-sm">{tag.name}</span>
                          </div>
-                          <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                          <span class="ui:text-muted-foreground text-xs">{tag.courseCount}</span>
                        </label>
                      {/each}
                    </div>
                  </div>
                {/each}
              </div>
-            {/if}
-          </div>
-        </div>
-      </aside>
-
-      <div class="ui:@container space-y-4">
-        {#if data.courses.length === 0}
-          <Empty
-            icon={LibraryBigIcon}
-            title={$t('public_courses.empty.title')}
-            description={$t('public_courses.empty.description')}
-            variant="page"
-          />
-        {:else}
-          <div class={courseGridClass}>
-            {#each data.courses as course, index (course.id)}
-              <CourseCardComponent {course} {index} />
-            {/each}
-          </div>
-
-          {#if data.pagination.totalPages > 1}
-            <Pagination.Root
-              count={data.pagination.total}
-              perPage={data.pagination.perPage}
-              page={data.pagination.page}
-              onPageChange={goToPage}
-              class="mt-8"
-            >
-              {#snippet children({ pages, currentPage })}
-                <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={currentPage === pageItem.value}>
-                          {pageItem.value}
-                        </Pagination.Link>
-                      </Pagination.Item>
-                    {/if}
-                  {/each}
-                  <Pagination.Item>
-                    <Pagination.NextButton />
-                  </Pagination.Item>
-                </Pagination.Content>
-              {/snippet}
-            </Pagination.Root>
-          {/if}
+            </Accordion.Content>
+          </Accordion.Item>
        {/if}
-      </div>
-    </div>
-  </section>
+      </Accordion.Root>
+    {/key}
+  </div>
+{/snippet}

-  <OrgLandingPageFooter
-    orgName={data.org.name}
-    logoUrl={data.org.avatarUrl ?? undefined}
-    footer={landingSettings.footer}
-    variant={landingSettings.theme}
-  />
-</main>
+<PoweredBy />
+
+<LandingThemeScope theme={landingSettings.theme} class="ui:font-sans">
+  <main>
+    {#if navInsideHero}
+      <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
+        {#snippet navigation()}
+          <NavComponent
+            orgName={data.org.name}
+            logoUrl={data.org.avatarUrl ?? undefined}
+            navItems={landingSettings.navItems}
+            {authAction}
+          />
+        {/snippet}
+        {#snippet children()}
+          {@render searchField()}
+        {/snippet}
+      </HeroComponent>
+    {:else}
+      <NavComponent
+        orgName={data.org.name}
+        logoUrl={data.org.avatarUrl ?? undefined}
+        navItems={landingSettings.navItems}
+        {authAction}
+      />
+      <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
+        {#snippet children()}
+          {@render searchField()}
+        {/snippet}
+      </HeroComponent>
+    {/if}
+
+    <section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
+      <!-- Actions row -->
+      <div class="mb-6 flex items-center justify-between gap-3">
+        <!-- Mobile only -->
+        <div class="lg:hidden">
+          <LandingButton variant="secondary" onclick={() => (filterSheetOpen = true)}>
+            <FilterIcon class="ui:size-4" />
+            {$t('public_courses.filters.title')}
+            {#if activeFilterCount > 0}
+              <span
+                class="ui:bg-primary ui:text-primary-foreground ml-1 inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs"
+              >
+                {activeFilterCount}
+              </span>
+            {/if}
+          </LandingButton>
+        </div>
+
+        <div class="ml-auto">
+          <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
+            {$t('public_courses.clear_filters')}
+          </LandingButton>
+        </div>
+      </div>
+
+      <!-- Layout: 1 col mobile, sidebar + content on desktop -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
+        <!-- Desktop sidebar -->
+        <aside
+          class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 hidden max-h-[calc(100dvh-2rem)] flex-col self-start overflow-hidden rounded-lg border lg:flex"
+        >
+          <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+            {@render filtersContent(true)}
+          </div>
+        </aside>
+
+        <!-- Course list -->
+        <div class="ui:@container min-w-0 space-y-4">
+          {#if data.courses.length === 0}
+            <Empty
+              icon={LibraryBigIcon}
+              title={$t('public_courses.empty.title')}
+              description={$t('public_courses.empty.description')}
+              variant="page"
+            />
+          {:else}
+            <div class={courseGridClass}>
+              {#each data.courses as course, index (course.id)}
+                <CourseCardComponent {course} {index} />
+              {/each}
+            </div>
+
+            {#if data.pagination.totalPages > 1}
+              <Pagination.Root
+                count={data.pagination.total}
+                perPage={data.pagination.perPage}
+                page={data.pagination.page}
+                onPageChange={goToPage}
+                class="mt-8"
+              >
+                {#snippet children({ pages, currentPage })}
+                  <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={currentPage === pageItem.value}>
+                            {pageItem.value}
+                          </Pagination.Link>
+                        </Pagination.Item>
+                      {/if}
+                    {/each}
+                    <Pagination.Item>
+                      <Pagination.NextButton />
+                    </Pagination.Item>
+                  </Pagination.Content>
+                {/snippet}
+              </Pagination.Root>
+            {/if}
+          {/if}
+        </div>
+      </div>
+    </section>
+
+    <!-- Mobile filter sheet -->
+    <Sheet.Root bind:open={filterSheetOpen}>
+      <Sheet.Content
+        side="right"
+        portalProps={{ disabled: true }}
+        class="ui:flex ui:w-full ui:flex-col ui:p-0 ui:sm:max-w-md"
+      >
+        <Sheet.Header class="ui:border-b ui:px-4 ui:py-4">
+          <Sheet.Title>{$t('public_courses.filters.title')}</Sheet.Title>
+          <Sheet.Description>
+            {$t('public_courses.filters.selected')}
+            <span
+              class="ui:bg-muted ui:text-foreground ml-1 inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium"
+            >
+              {activeFilterCount}
+            </span>
+          </Sheet.Description>
+        </Sheet.Header>
+
+        <div class="ui:min-h-0 ui:flex-1 ui:overflow-y-auto">
+          {@render filtersContent(false)}
+        </div>
+
+        <div class="ui:flex ui:gap-3 ui:border-t ui:p-4">
+          <LandingButton variant="secondary" class="ui:flex-1" onclick={clearFilters}>
+            {$t('public_courses.clear_filters')}
+          </LandingButton>
+          <LandingButton class="ui:flex-1" onclick={() => (filterSheetOpen = false)}
+            >{$t('public_courses.filters.save_changes')}</LandingButton
+          >
+        </div>
+      </Sheet.Content>
+    </Sheet.Root>
+
+    <OrgLandingPageFooter
+      orgName={data.org.name}
+      logoUrl={data.org.avatarUrl ?? undefined}
+      footer={landingSettings.footer}
+      variant={landingSettings.theme}
+    />
+  </main>
+</LandingThemeScope>