feat(courses): add type, search, and pricing filters to org landing page

- Add Types section to the Filter sidebar with all 4 course types - Add full-text search input centered in the hero (title + description) - Add Pricing section (Free / Paid) based on course cost - Compact hero prop across all 10 themes to halve vertical padding - Children snippet support in all hero themes for the search input - All filters are URL-driven (?types=, ?search=, ?tags=, ?pricing=) - Full-stack: validation schema, DB queries, service, API route, server load, UI
2026-07-01 10:36:53 +01:00
parent 8d2f2a6d2d
commit 78a2b85ad3
27 changed files with 464 additions and 97 deletions
@@ -383,15 +383,21 @@ export const organizationRouter = new Hono()
   */
  .get('/courses/public', zValidator('query', ZGetCoursesBySiteName), async (c) => {
    try {
-      const { siteName, tags, page, limit } = c.req.valid('query');
-      const tagSlugs = tags
-        ?.split(',')
-        .map((value) => value.trim())
-        .filter(Boolean);
+      const { siteName, tags, types, search, pricing, page, limit } = c.req.valid('query');
+      const splitParam = (param: string | undefined) =>
+        param
+          ?.split(',')
+          .map((v) => v.trim())
+          .filter(Boolean);
+      const tagSlugs = splitParam(tags);
+      const courseTypes = splitParam(types);
      const pagination = page !== undefined || limit !== undefined ? { page, limit } : undefined;
      const courses = await getPublicCourses(
        siteName,
-        tagSlugs && tagSlugs.length > 0 ? tagSlugs : undefined,
+        tagSlugs?.length ? tagSlugs : undefined,
+        courseTypes?.length ? courseTypes : undefined,
+        search || undefined,
+        pricing || undefined,
        pagination
      );

@@ -256,6 +256,9 @@ export async function removeAudienceMember(orgId: string, memberId: number, remo
 export async function getPublicCourses(
  siteName: string,
  tagSlugs?: string[],
+  courseTypes?: string[],
+  search?: string,
+  pricing?: 'free' | 'paid',
  pagination?: { page?: number; limit?: number }
 ) {
  try {
@@ -286,8 +289,22 @@ export async function getPublicCourses(
      }
    }

-    const totalCourses = await countPublishedCoursesBySiteName(siteName, filteredCourseIds);
-    const courses = await getPublishedCoursesBySiteName(siteName, filteredCourseIds, limit, offset);
+    const totalCourses = await countPublishedCoursesBySiteName(
+      siteName,
+      filteredCourseIds,
+      courseTypes,
+      search,
+      pricing
+    );
+    const courses = await getPublishedCoursesBySiteName(
+      siteName,
+      filteredCourseIds,
+      courseTypes,
+      search,
+      pricing,
+      limit,
+      offset
+    );
    const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
      org.id,
      courses.map((course) => course.id)
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Filtrer efter tags",
      "help": "Vælg et eller flere tags for at filtrere kurser",
-      "empty": "Ingen tags tilgængelige endnu"
+      "empty": "Ingen tags tilgængelige endnu",
+      "tags_title": "Tags",
+      "types_title": "Typer",
+      "search_placeholder": "Søg efter kurser...",
+      "pricing_title": "Prissætning",
+      "pricing_free": "Gratis",
+      "pricing_paid": "Betalt"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Nach Tags filtern",
      "help": "Wählen Sie einen oder mehrere Tags aus, um Kurse zu filtern",
-      "empty": "Noch keine Tags verfügbar"
+      "empty": "Noch keine Tags verfügbar",
+      "tags_title": "Schlagworte",
+      "types_title": "Typen",
+      "search_placeholder": "Kurse suchen...",
+      "pricing_title": "Preise",
+      "pricing_free": "Kostenlos",
+      "pricing_paid": "Bezahlt"
    }
  },
  "tags_admin": {
@@ -1218,9 +1218,15 @@
    "subtitle": "Browse all published courses",
    "clear_filters": "Clear Filters",
    "filters": {
-      "title": "Filter by Tags",
-      "help": "Select one or more tags to filter courses",
-      "empty": "No tags available yet"
+      "title": "Filter",
+      "help": "Filter courses by type, tags, or search by name",
+      "tags_title": "Tags",
+      "types_title": "Types",
+      "pricing_title": "Pricing",
+      "pricing_free": "Free",
+      "pricing_paid": "Paid",
+      "empty": "No tags available yet",
+      "search_placeholder": "Search courses..."
    },
    "empty": {
      "title": "No courses found",
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Filtrar por etiquetas",
      "help": "Seleccione una o más etiquetas para filtrar cursos",
-      "empty": "Aún no hay etiquetas disponibles"
+      "empty": "Aún no hay etiquetas disponibles",
+      "tags_title": "Etiquetas",
+      "types_title": "Tipos",
+      "search_placeholder": "Buscar cursos...",
+      "pricing_title": "Precios",
+      "pricing_free": "Gratis",
+      "pricing_paid": "Pagado"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Filtrer par balises",
      "help": "Sélectionnez une ou plusieurs balises pour filtrer les cours",
-      "empty": "Aucun tag disponible pour l'instant"
+      "empty": "Aucun tag disponible pour l'instant",
+      "tags_title": "Balises",
+      "types_title": "Espèces",
+      "search_placeholder": "Rechercher des cours...",
+      "pricing_title": "Tarifs",
+      "pricing_free": "Gratuit",
+      "pricing_paid": "Payé"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "टैग द्वारा फ़िल्टर करें",
      "help": "पाठ्यक्रमों को फ़िल्टर करने के लिए एक या अधिक टैग चुनें",
-      "empty": "अभी तक कोई टैग उपलब्ध नहीं है"
+      "empty": "अभी तक कोई टैग उपलब्ध नहीं है",
+      "tags_title": "टैग",
+      "types_title": "प्रकार",
+      "search_placeholder": "पाठ्यक्रम खोजें...",
+      "pricing_title": "मूल्य निर्धारण",
+      "pricing_free": "निःशुल्क",
+      "pricing_paid": "भुगतान किया गया"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Filtruj według tagów",
      "help": "Wybierz jeden lub więcej tagów, aby filtrować kursy",
-      "empty": "Brak dostępnych tagów"
+      "empty": "Brak dostępnych tagów",
+      "tags_title": "Tagi",
+      "types_title": "Typy",
+      "search_placeholder": "Wyszukaj kursy...",
+      "pricing_title": "Ceny",
+      "pricing_free": "Bezpłatny",
+      "pricing_paid": "Płatny"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Filtrar por tags",
      "help": "Selecione uma ou mais tags para filtrar cursos",
-      "empty": "Nenhuma tag disponível ainda"
+      "empty": "Nenhuma tag disponível ainda",
+      "tags_title": "Etiquetas",
+      "types_title": "Tipos",
+      "search_placeholder": "Pesquisar cursos...",
+      "pricing_title": "Preços",
+      "pricing_free": "Grátis",
+      "pricing_paid": "Pago"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Фильтровать по тегам",
      "help": "Выберите один или несколько тегов, чтобы отфильтровать курсы.",
-      "empty": "Тегов пока нет"
+      "empty": "Тегов пока нет",
+      "tags_title": "Теги",
+      "types_title": "Типы",
+      "search_placeholder": "Искать курсы...",
+      "pricing_title": "Цены",
+      "pricing_free": "Бесплатно",
+      "pricing_paid": "Платный"
    }
  },
  "tags_admin": {
@@ -3741,7 +3741,13 @@
    "filters": {
      "title": "Lọc theo thẻ",
      "help": "Chọn một hoặc nhiều thẻ để lọc các khóa học",
-      "empty": "Chưa có thẻ nào"
+      "empty": "Chưa có thẻ nào",
+      "tags_title": "Thẻ",
+      "types_title": "Các loại",
+      "search_placeholder": "Tìm kiếm khóa học...",
+      "pricing_title": "Định giá",
+      "pricing_free": "miễn phí",
+      "pricing_paid": "Đã trả tiền"
    }
  },
  "tags_admin": {
@@ -32,6 +32,14 @@ export const load = async ({ parent, url }) => {
  const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
  const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;

+  const normalizedTypes = normalizeTagsParam(url.searchParams.get('types'));
+  const normalizedTypesQuery = normalizedTypes.length > 0 ? normalizedTypes.join(',') : undefined;
+
+  const activeSearch = url.searchParams.get('search')?.trim() ?? '';
+
+  const rawPricing = url.searchParams.get('pricing');
+  const activePricing = rawPricing === 'free' || rawPricing === 'paid' ? rawPricing : undefined;
+
  const requestedPage = Number(url.searchParams.get('page'));
  const currentPage = Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;

@@ -41,7 +49,10 @@ export const load = async ({ parent, url }) => {
        query: {
          siteName,
          page: String(currentPage),
-          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
+          ...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {}),
+          ...(normalizedTypesQuery ? { types: normalizedTypesQuery } : {}),
+          ...(activeSearch ? { search: activeSearch } : {}),
+          ...(activePricing ? { pricing: activePricing } : {})
        }
      })
    ),
@@ -89,6 +100,9 @@ export const load = async ({ parent, url }) => {
    courses: courseData.courses,
    tagGroups: tagsResult.ok ? tagsResult.body.data : [],
    activeTags: normalizedTags,
+    activeTypes: normalizedTypes,
+    activeSearch,
+    activePricing,
    pagination: {
      page: courseData.page,
      perPage: courseData.limit,
@@ -10,6 +10,7 @@

  import { PoweredBy } from '$features/ui';
  import LibraryBigIcon from '@lucide/svelte/icons/library-big';
+  import XIcon from '@lucide/svelte/icons/x';
  import {
    normalizeLandingPageSettings,
    themeHeaderShellClass,
@@ -20,6 +21,7 @@
  import { LandingButton, 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';
@@ -27,6 +29,21 @@
  let { data } = $props();

  let selectedTags = $derived<string[]>(data.activeTags || []);
+  let selectedTypes = $derived<string[]>(data.activeTypes || []);
+  let activeSearch = $derived(data.activeSearch || '');
+  let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing);
+  let searchInput = $state('');
+
+  $effect(() => {
+    searchInput = activeSearch;
+  });
+
+  const COURSE_TYPES = [
+    { value: 'SELF_PACED', label: t.get('analytics.popularTypes.types.SELF_PACED') },
+    { value: 'LIVE_CLASS', label: t.get('analytics.popularTypes.types.LIVE_CLASS') },
+    { value: 'COMPLIANCE', label: t.get('analytics.popularTypes.types.COMPLIANCE') },
+    { value: 'PUBLIC', label: t.get('analytics.popularTypes.types.PUBLIC') }
+  ] as const;

  const landingSettings = $derived(normalizeLandingPageSettings(data.org.landingpage));

@@ -57,15 +74,22 @@
    image: ''
  });

-  async function applyTagFilters(nextTags: string[]) {
+  async function applyFilters(next: {
+    tags?: string[];
+    types?: string[];
+    search?: string;
+    pricing?: 'free' | 'paid' | null;
+  }) {
    const params = new SvelteURLSearchParams(page.url.searchParams);
+    const nextTags = next.tags ?? selectedTags;
+    const nextTypes = next.types ?? selectedTypes;
+    const nextSearch = next.search !== undefined ? next.search : activeSearch;
+    const nextPricing = 'pricing' in next ? next.pricing : activePricing;

-    if (nextTags.length > 0) {
-      params.set('tags', nextTags.join(','));
-    } else {
-      params.delete('tags');
-    }
-
+    nextTags.length ? params.set('tags', nextTags.join(',')) : params.delete('tags');
+    nextTypes.length ? params.set('types', nextTypes.join(',')) : params.delete('types');
+    nextSearch ? params.set('search', nextSearch) : params.delete('search');
+    nextPricing ? params.set('pricing', nextPricing) : params.delete('pricing');
    params.delete('page');

    const query = params.toString();
@@ -105,15 +129,47 @@
      next.delete(tagSlug);
    }

-    applyTagFilters(Array.from(next));
+    applyFilters({ tags: Array.from(next) });
+  }
+
+  function toggleType(typeValue: string, checked: boolean) {
+    const next = new SvelteSet(selectedTypes);
+    if (checked) {
+      next.add(typeValue);
+    } else {
+      next.delete(typeValue);
+    }
+
+    applyFilters({ types: Array.from(next) });
  }

  function clearFilters() {
-    if (selectedTags.length === 0) {
+    if (selectedTags.length === 0 && selectedTypes.length === 0 && !activeSearch && !activePricing) {
      return;
    }

-    applyTagFilters([]);
+    searchInput = '';
+    applyFilters({ tags: [], types: [], search: '', pricing: null });
+  }
+
+  let searchDebounce: ReturnType<typeof setTimeout>;
+  function onSearchInput(value: string) {
+    searchInput = value;
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => applyFilters({ search: value }), 300);
+  }
+
+  function onSearchKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      clearTimeout(searchDebounce);
+      applyFilters({ search: searchInput });
+    }
+  }
+
+  function clearSearch() {
+    searchInput = '';
+    clearTimeout(searchDebounce);
+    applyFilters({ search: '' });
  }

  function isTagSelected(tagSlug: string) {
@@ -141,13 +197,17 @@
      tags: tagsByGroupId[group.id] ?? []
    }));
  });
+
+  const hasActiveFilters = $derived(
+    selectedTags.length > 0 || selectedTypes.length > 0 || !!activeSearch || !!activePricing
+  );
 </script>

 <PoweredBy />

 <main class={shellClass} style={shellStyle}>
  {#if navInsideHero}
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
+    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
      {#snippet navigation()}
        <NavComponent
          orgName={data.org.name}
@@ -156,6 +216,28 @@
          {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
@@ -164,12 +246,35 @@
      navItems={landingSettings.navItems}
      {authAction}
    />
-    <HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
+    <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}

  <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={selectedTags.length === 0}>
+      <LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
        {$t('public_courses.clear_filters')}
      </LandingButton>
    </div>
@@ -186,44 +291,87 @@
        <Separator class="ui:bg-[var(--landing-border)]" />

        <div class="flex-1 overflow-y-auto p-4">
-          {#if displayTagGroups.length === 0}
-            <p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
-          {:else}
-            <div class="space-y-5">
-              {#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>
-                    {/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"
-                      >
-                        <div class="flex items-center gap-2">
-                          <Checkbox
-                            checked={isTagSelected(tag.slug)}
-                            onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
-                          />
-                          <span
-                            class="inline-block h-2.5 w-2.5 rounded-full border"
-                            style={`background-color: ${tag.color}`}
-                            aria-hidden="true"
-                          ></span>
-                          <span class="text-sm">{tag.name}</span>
-                        </div>
-                        <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
-                      </label>
-                    {/each}
-                  </div>
-                </div>
-              {/each}
+          <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>
-          {/if}
+
+            <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>
+            </div>
+
+            {#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">
+                {#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>
+                      {/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"
+                        >
+                          <div class="flex items-center gap-2">
+                            <Checkbox
+                              checked={isTagSelected(tag.slug)}
+                              onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
+                            />
+                            <span
+                              class="inline-block h-2.5 w-2.5 rounded-full border"
+                              style={`background-color: ${tag.color}`}
+                              aria-hidden="true"
+                            ></span>
+                            <span class="text-sm">{tag.name}</span>
+                          </div>
+                          <span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
+                        </label>
+                      {/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
        </div>
      </aside>