@datagouv/components-next 0.2.0 → 1.0.1

package/src/components/Search/GlobalSearch.vue

@@ -0,0 +1,707 @@
+<template>
+  <form
+    class="group/form"
+    data-input-color="blue"
+    @submit.prevent
+  >
+    <div
+      ref="search"
+      class="flex flex-wrap items-center justify-between"
+      data-cy="search"
+    >
+      <SearchInput
+        v-model="q"
+        :placeholder="placeholder || typesMeta[currentType].placeholder"
+      />
+    </div>
+    <div class="grid grid-cols-12 mt-2 md:mt-5">
+      <div
+        v-if="showSidebar"
+        class="col-span-12 md:col-span-4 lg:col-span-3 md:space-y-8"
+      >
+        <div v-if="config.length > 1">
+          <Sidemenu :button-text="t('Type')">
+            <template #title>
+              {{ t('Type') }}
+            </template>
+            <RadioGroup
+              v-model="currentType"
+              name="search-type"
+            >
+              <RadioInput
+                v-for="typeConfig in config"
+                :key="typeConfig.class"
+                :value="typeConfig.class"
+                :count="typesMeta[typeConfig.class].results.value?.total"
+                :loading="typesMeta[typeConfig.class].status.value === 'pending' || typesMeta[typeConfig.class].status.value === 'idle'"
+                :icon="typesMeta[typeConfig.class].icon"
+              >
+                {{ typeConfig.name || typesMeta[typeConfig.class].name }}
+              </RadioInput>
+            </RadioGroup>
+          </Sidemenu>
+        </div>
+
+        <div v-if="activeFilters.length > 0">
+          <Sidemenu :button-text="t('Filtres')">
+            <template #title>
+              {{ t('Filtres') }}
+            </template>
+            <BasicAndAdvancedFilters
+              v-slot="{ isEnabled, getOrder }"
+              :basic-filters="activeBasicFilters"
+              :advanced-filters="activeAdvancedFilters"
+            >
+              <OrganizationSelect
+                v-if="isEnabled('organization')"
+                v-model:id="organizationId"
+                :style="{ order: getOrder('organization') }"
+              />
+              <OrganizationTypeSelect
+                v-if="isEnabled('organization_badge')"
+                v-model="organizationType"
+                :style="{ order: getOrder('organization_badge') }"
+              />
+              <TagSelect
+                v-if="isEnabled('tag')"
+                v-model:id="tag"
+                :style="{ order: getOrder('tag') }"
+              />
+              <FormatSelect
+                v-if="isEnabled('format')"
+                v-model:id="format"
+                :style="{ order: getOrder('format') }"
+              />
+              <LicenseSelect
+                v-if="isEnabled('license')"
+                v-model:id="license"
+                :style="{ order: getOrder('license') }"
+              />
+              <SchemaSelect
+                v-if="isEnabled('schema')"
+                v-model:id="schema"
+                :style="{ order: getOrder('schema') }"
+              />
+              <GeozoneSelect
+                v-if="isEnabled('geozone')"
+                v-model:id="geozone"
+                :style="{ order: getOrder('geozone') }"
+              />
+              <GranularitySelect
+                v-if="isEnabled('granularity')"
+                v-model:id="granularity"
+                :style="{ order: getOrder('granularity') }"
+              />
+              <ReuseTopicSelect
+                v-if="isEnabled('topic')"
+                v-model:id="topic"
+                :style="{ order: getOrder('topic') }"
+              />
+              <FormatFamilyFilter
+                v-if="isEnabled('format_family')"
+                v-model="formatFamily"
+                :facets="getFacets('format_family')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('format_family') }"
+              />
+              <AccessTypeFilter
+                v-if="isEnabled('access_type')"
+                v-model="accessType"
+                :facets="getFacets('access_type')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('access_type') }"
+              />
+              <LastUpdateRangeFilter
+                v-if="isEnabled('last_update_range')"
+                v-model="lastUpdateRange"
+                :facets="getFacets('last_update')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('last_update_range') }"
+              />
+              <ProducerTypeFilter
+                v-if="isEnabled('producer_type')"
+                v-model="producerType"
+                :facets="getFacets('producer_type')"
+                :loading="searchResultsStatus === 'pending'"
+                :exclude="currentType === 'organizations' ? ['user'] : []"
+                :style="{ order: getOrder('producer_type') }"
+              />
+              <DatasetBadgeFilter
+                v-if="isEnabled('badge')"
+                v-model="badge"
+                :facets="getFacets('badge')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('badge') }"
+              />
+              <ReuseTypeFilter
+                v-if="isEnabled('type')"
+                v-model="reuseType"
+                :facets="getFacets('type')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('type') }"
+              />
+              <slot
+                name="filters"
+                :is-enabled="isEnabled"
+                :get-order="getOrder"
+              />
+            </BasicAndAdvancedFilters>
+            <div
+              v-if="hasFilters"
+              class="mt-6 text-center"
+            >
+              <BrandedButton
+                color="secondary"
+                :icon="RiCloseCircleLine"
+                class="w-full justify-center"
+                type="button"
+                @click="resetFilters"
+              >
+                {{ t('Réinitialiser les filtres') }}
+              </BrandedButton>
+            </div>
+          </Sidemenu>
+        </div>
+      </div>
+      <section
+        ref="results"
+        class="col-span-12 mt-4 md:mt-0 search-results"
+        :class="showSidebar ? 'md:col-span-8 lg:col-span-9 md:pl-8' : ''"
+      >
+        <div
+          v-if="searchResults?.total"
+          class="flex flex-wrap gap-4 items-center justify-between pb-2"
+        >
+          <p
+            class="fr-col-auto my-0"
+            role="status"
+          >
+            {{ t("{count} résultats | {count} résultat | {count} résultats", searchResults.total) }}
+          </p>
+          <div class="fr-col-auto fr-grid-row fr-grid-row--middle gap-4">
+            <div class="flex items-center">
+              <label
+                for="sort-search"
+                class="fr-col-auto text-sm m-0 mr-2"
+              >
+                {{ t('Trier par :') }}
+              </label>
+              <div class="fr-col">
+                <select
+                  id="sort-search"
+                  v-model="sort"
+                  class="fr-select text-sm shadow-input-blue!"
+                >
+                  <option :value="undefined">
+                    {{ t('Pertinence') }}
+                  </option>
+                  <option
+                    v-for="option in allSortOptions"
+                    :key="option.value"
+                    :value="option.value"
+                    :hidden="!activeSortValues.has(option.value)"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <BrandedButton
+              v-if="rssUrl"
+              :href="rssUrl"
+              :title="t('Flux RSS')"
+              color="secondary"
+              size="sm"
+              :icon="RiRssLine"
+              icon-only
+              target="_blank"
+            />
+          </div>
+        </div>
+        <transition mode="out-in">
+          <LoadingBlock
+            v-slot="{ data: results }"
+            :status="searchResultsStatus"
+            :data="searchResults"
+          >
+            <div v-if="results && results.data.length">
+              <ul class="space-y-4 mt-2 p-0 relative z-2 list-none">
+                <li
+                  v-for="result in results.data"
+                  :key="result.id"
+                  class="p-0"
+                >
+                  <template v-if="currentType === 'datasets'">
+                    <slot
+                      name="dataset"
+                      :dataset="result"
+                    >
+                      <DatasetCard :dataset="(result as Dataset)" />
+                    </slot>
+                  </template>
+                  <template v-else-if="currentType === 'dataservices'">
+                    <slot
+                      name="dataservice"
+                      :dataservice="result"
+                    >
+                      <DataserviceCard :dataservice="(result as Dataservice)" />
+                    </slot>
+                  </template>
+                  <template v-else-if="currentType === 'reuses'">
+                    <slot
+                      name="reuse"
+                      :reuse="result"
+                    >
+                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
+                    </slot>
+                  </template>
+                  <template v-else-if="currentType === 'organizations'">
+                    <slot
+                      name="organization"
+                      :organization="result"
+                    >
+                      <OrganizationHorizontalCard :organization="(result as Organization)" />
+                    </slot>
+                  </template>
+                </li>
+              </ul>
+              <Pagination
+                v-if="results && results.total > pageSize"
+                :page
+                :page-size
+                :total-results="results.total"
+                class="mt-4"
+                :link="getLink"
+                @change="changePage"
+              />
+            </div>
+            <div
+              v-else
+              class="mt-4"
+            >
+              <slot
+                name="no-results"
+                :has-filters="hasFilters"
+                :reset-filters="resetFilters"
+              >
+                <div class="rounded p-6 flex flex-wrap gap-4 bg-blue-light text-datagouv">
+                  <div class="flex-none">
+                    <img
+                      class="w-20"
+                      :src="magnifyingGlassSrc"
+                      alt=""
+                    >
+                  </div>
+                  <div class="flex-1 min-w-48">
+                    <p class="font-bold mb-2">
+                      {{ t(`Vous n'avez pas trouvé ce que vous cherchez ?`) }}
+                    </p>
+                    <p class="mt-1 mb-3">
+                      {{ t("Essayez de réinitialiser les filtres pour élargir votre recherche.") }}
+                      <template v-if="showForumLink">
+                        <br>
+                        {{ t("Vous pouvez aussi regarder les demandes en cours et soumettre la vôtre sur notre forum dédié à la recherche et à l'ouverture de données.") }}
+                      </template>
+                    </p>
+                    <div class="flex flex-wrap gap-2">
+                      <BrandedButton
+                        color="secondary"
+                        type="button"
+                        @click="resetFilters"
+                      >
+                        {{ t("Réinitialiser les filtres") }}
+                      </BrandedButton>
+                      <BrandedButton
+                        v-if="showForumLink"
+                        color="tertiary"
+                        :href="componentsConfig.forumUrl"
+                        :icon="RiLightbulbLine"
+                        keep-margins-even-without-borders
+                      >
+                        {{ t("Voir le forum") }}
+                      </BrandedButton>
+                    </div>
+                  </div>
+                </div>
+              </slot>
+            </div>
+          </LoadingBlock>
+        </transition>
+      </section>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, useTemplateRef, type Ref } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+import { RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
+import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
+import { useTranslation } from '../../composables/useTranslation'
+import { useDebouncedRef } from '../../composables/useDebouncedRef'
+import { useStableQueryParams } from '../../composables/useStableQueryParams'
+import { useComponentsConfig } from '../../config'
+import { useFetch } from '../../functions/api'
+import { getLink } from '../../functions/pagination'
+import type { Dataset } from '../../types/datasets'
+import type { Dataservice } from '../../types/dataservices'
+import type { Organization } from '../../types/organizations'
+import type { Reuse } from '../../types/reuses'
+import type { GlobalSearchConfig, SearchType, SortOption, DatasetSearchResponse, DataserviceSearchResponse, ReuseSearchResponse, OrganizationSearchResponse, FacetItem } from '../../types/search'
+import { getDefaultGlobalSearchConfig } from '../../types/search'
+import BrandedButton from '../BrandedButton.vue'
+import LoadingBlock from '../LoadingBlock.vue'
+import Pagination from '../Pagination.vue'
+import RadioGroup from '../RadioGroup.vue'
+import RadioInput from '../RadioInput.vue'
+import DatasetCard from '../DatasetCard.vue'
+import DataserviceCard from '../DataserviceCard.vue'
+import OrganizationHorizontalCard from '../OrganizationHorizontalCard.vue'
+import ReuseHorizontalCard from '../ReuseHorizontalCard.vue'
+import SearchInput from './SearchInput.vue'
+import Sidemenu from './Sidemenu.vue'
+import BasicAndAdvancedFilters from './BasicAndAdvancedFilters.vue'
+import OrganizationSelect from '../Form/OrganizationSelect.vue'
+import OrganizationTypeSelect from '../Form/OrganizationTypeSelect.vue'
+import TagSelect from '../Form/TagSelect.vue'
+import FormatSelect from '../Form/FormatSelect.vue'
+import LicenseSelect from '../Form/LicenseSelect.vue'
+import SchemaSelect from '../Form/SchemaSelect.vue'
+import GeozoneSelect from '../Form/GeozoneSelect.vue'
+import GranularitySelect from '../Form/GranularitySelect.vue'
+import ReuseTopicSelect from '../Form/ReuseTopicSelect.vue'
+import FormatFamilyFilter from './Filter/FormatFamilyFilter.vue'
+import AccessTypeFilter from './Filter/AccessTypeFilter.vue'
+import LastUpdateRangeFilter from './Filter/LastUpdateRangeFilter.vue'
+import ProducerTypeFilter from './Filter/ProducerTypeFilter.vue'
+import DatasetBadgeFilter from './Filter/DatasetBadgeFilter.vue'
+import ReuseTypeFilter from './Filter/ReuseTypeFilter.vue'
+
+const props = withDefaults(defineProps<{
+  config?: GlobalSearchConfig
+  placeholder?: string
+}>(), {
+  config: getDefaultGlobalSearchConfig,
+})
+
+// defineModel's default is static and can't depend on props, so we cast and initialize manually
+const currentType = defineModel<SearchType>('type') as Ref<SearchType>
+if (!currentType.value) currentType.value = props.config[0]?.class ?? 'datasets'
+
+const { t } = useTranslation()
+const componentsConfig = useComponentsConfig()
+
+// Initial type is used to determine which fetch should be SSR (non-lazy)
+const initialType = currentType.value
+
+const currentTypeConfig = computed(() =>
+  props.config.find(c => c.class === currentType.value),
+)
+
+const activeBasicFilters = computed(() =>
+  (currentTypeConfig.value?.basicFilters ?? []) as string[],
+)
+
+const activeAdvancedFilters = computed(() =>
+  (currentTypeConfig.value?.advancedFilters ?? []) as string[],
+)
+
+const activeSortOptions = computed(() =>
+  currentTypeConfig.value?.sortOptions ?? [],
+)
+
+const activeSortValues = computed(() =>
+  new Set(activeSortOptions.value.map(o => o.value as string)),
+)
+
+// Deduplicated union of all sort options across all search types.
+// Rendered as hidden <option> elements so the <select> always has a stable
+// intrinsic width regardless of which type is currently active.
+const allSortOptions = computed(() => {
+  const seen = new Set<string>()
+  return props.config.flatMap(c => (c.sortOptions ?? []) as SortOption<string>[]).filter((o) => {
+    if (seen.has(o.value)) return false
+    seen.add(o.value)
+    return true
+  })
+})
+
+const activeFilters = computed(() => [
+  ...(currentTypeConfig.value?.basicFilters ?? []),
+  ...(currentTypeConfig.value?.advancedFilters ?? []),
+] as string[])
+
+const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0)
+
+// URL query params
+const q = useRouteQuery<string>('q', '')
+const { debounced: qDebounced, flush: flushQ } = useDebouncedRef(q, componentsConfig.searchDebounce ?? 300)
+const page = useRouteQuery('page', 1, { transform: Number })
+const sort = useRouteQuery<string | undefined>('sort')
+
+// Filter values
+const organizationId = useRouteQuery<string | undefined>('organization')
+const organizationType = useRouteQuery<string | undefined>('organization_badge')
+const tag = useRouteQuery<string | undefined>('tag')
+const format = useRouteQuery<string | undefined>('format')
+const license = useRouteQuery<string | undefined>('license')
+const schema = useRouteQuery<string | undefined>('schema')
+const geozone = useRouteQuery<string | undefined>('geozone')
+const granularity = useRouteQuery<string | undefined>('granularity')
+const badge = useRouteQuery<string | undefined>('badge')
+const topic = useRouteQuery<string | undefined>('topic')
+
+// New simple filters
+const formatFamily = useRouteQuery<string | undefined>('format_family')
+const accessType = useRouteQuery<string | undefined>('access_type')
+const lastUpdateRange = useRouteQuery<string | undefined>('last_update_range')
+const producerType = useRouteQuery<string | undefined>('producer_type')
+const reuseType = useRouteQuery<string | undefined>('type')
+
+const pageSize = 20
+
+// All filter values as a record
+const allFilters: Record<string, Ref<unknown>> = {
+  organization: organizationId,
+  organization_badge: organizationType,
+  tag,
+  format,
+  license,
+  schema,
+  geozone,
+  granularity,
+  badge,
+  topic,
+  format_family: formatFamily,
+  access_type: accessType,
+  last_update_range: lastUpdateRange,
+  producer_type: producerType,
+  type: reuseType,
+}
+
+// Reset sort and filters when changing type if they're not valid for the new type
+watch(currentType, () => {
+  // Reset sort if not valid
+  const validSortValues = activeSortOptions.value.map(o => o.value as string)
+  if (sort.value && !validSortValues.includes(sort.value)) {
+    sort.value = undefined
+  }
+
+  // Reset filters that are not enabled for the new type
+  for (const [filterName, filterRef] of Object.entries(allFilters)) {
+    if (filterRef.value !== undefined && !activeFilters.value.includes(filterName)) {
+      filterRef.value = undefined
+    }
+  }
+})
+
+// Check which types are enabled
+const datasetsEnabled = computed(() => props.config.some(c => c.class === 'datasets'))
+const dataservicesEnabled = computed(() => props.config.some(c => c.class === 'dataservices'))
+const reusesEnabled = computed(() => props.config.some(c => c.class === 'reuses'))
+const organizationsEnabled = computed(() => props.config.some(c => c.class === 'organizations'))
+
+// Create stable params for each type
+const stableParamsOptions = {
+  allFilters,
+  q: qDebounced,
+  sort,
+  page,
+  pageSize,
+}
+
+const datasetsParams = useStableQueryParams({
+  ...stableParamsOptions,
+  typeConfig: props.config.find(c => c.class === 'datasets'),
+})
+const dataservicesParams = useStableQueryParams({
+  ...stableParamsOptions,
+  typeConfig: props.config.find(c => c.class === 'dataservices'),
+})
+const reusesParams = useStableQueryParams({
+  ...stableParamsOptions,
+  typeConfig: props.config.find(c => c.class === 'reuses'),
+})
+const organizationsParams = useStableQueryParams({
+  ...stableParamsOptions,
+  typeConfig: props.config.find(c => c.class === 'organizations'),
+})
+
+// URLs that return null when type is not enabled
+const datasetsUrl = computed(() => datasetsEnabled.value ? '/api/2/datasets/search/' : null)
+const dataservicesUrl = computed(() => dataservicesEnabled.value ? '/api/2/dataservices/search/' : null)
+const reusesUrl = computed(() => reusesEnabled.value ? '/api/2/reuses/search/' : null)
+const organizationsUrl = computed(() => organizationsEnabled.value ? '/api/2/organizations/search/' : null)
+
+// Reset page on filter/sort change
+const filtersForReset = computed(() => ({
+  q: qDebounced.value,
+  organization: organizationId.value,
+  organization_badge: organizationType.value,
+  tag: tag.value,
+  format: format.value,
+  license: license.value,
+  schema: schema.value,
+  geozone: geozone.value,
+  granularity: granularity.value,
+  badge: badge.value,
+  topic: topic.value,
+  format_family: formatFamily.value,
+  access_type: accessType.value,
+  last_update_range: lastUpdateRange.value,
+  producer_type: producerType.value,
+  type: reuseType.value,
+}))
+
+watch(filtersForReset, () => page.value = 1)
+watch(sort, () => page.value = 1)
+
+const hasFilters = computed(() => {
+  return q.value
+    || organizationId.value
+    || organizationType.value
+    || tag.value
+    || format.value
+    || license.value
+    || schema.value
+    || geozone.value
+    || granularity.value
+    || badge.value
+    || topic.value
+    || formatFamily.value
+    || accessType.value
+    || lastUpdateRange.value
+    || producerType.value
+    || reuseType.value
+})
+
+const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
+
+function resetFilters() {
+  organizationId.value = undefined
+  organizationType.value = undefined
+  tag.value = undefined
+  format.value = undefined
+  license.value = undefined
+  schema.value = undefined
+  geozone.value = undefined
+  granularity.value = undefined
+  badge.value = undefined
+  topic.value = undefined
+  formatFamily.value = undefined
+  accessType.value = undefined
+  lastUpdateRange.value = undefined
+  producerType.value = undefined
+  reuseType.value = undefined
+  q.value = ''
+  flushQ()
+}
+
+// API calls only for enabled types (useFetch skips when URL is null)
+// Only the initial type is fetched during SSR, others are client-side only
+const { data: datasetsResults, status: datasetsStatus } = await useFetch<DatasetSearchResponse<Dataset>>(
+  datasetsUrl,
+  { params: datasetsParams, lazy: true, server: initialType === 'datasets' },
+)
+const { data: dataservicesResults, status: dataservicesStatus } = await useFetch<DataserviceSearchResponse<Dataservice>>(
+  dataservicesUrl,
+  { params: dataservicesParams, lazy: true, server: initialType === 'dataservices' },
+)
+const { data: reusesResults, status: reusesStatus } = await useFetch<ReuseSearchResponse<Reuse>>(
+  reusesUrl,
+  { params: reusesParams, lazy: true, server: initialType === 'reuses' },
+)
+const { data: organizationsResults, status: organizationsStatus } = await useFetch<OrganizationSearchResponse<Organization>>(
+  organizationsUrl,
+  { params: organizationsParams, lazy: true, server: initialType === 'organizations' },
+)
+
+const typesMeta = {
+  datasets: {
+    icon: RiDatabase2Line,
+    name: t('Jeux de données'),
+    placeholder: t('ex. élections présidentielles'),
+    results: datasetsResults,
+    status: datasetsStatus,
+  },
+  dataservices: {
+    icon: RiTerminalLine,
+    name: t('API'),
+    placeholder: t('ex: SIRENE'),
+    results: dataservicesResults,
+    status: dataservicesStatus,
+  },
+  reuses: {
+    icon: RiLineChartLine,
+    name: t('Réutilisations'),
+    placeholder: t('Rechercher une réutilisation de données'),
+    results: reusesResults,
+    status: reusesStatus,
+  },
+  organizations: {
+    icon: RiBuilding2Line,
+    name: t('Organisations'),
+    placeholder: t('Rechercher une organisation'),
+    results: organizationsResults,
+    status: organizationsStatus,
+  },
+} as const
+
+const searchResults = computed(() => typesMeta[currentType.value].results.value)
+const searchResultsStatus = computed(() => typesMeta[currentType.value].status.value)
+
+// RSS feed URL for datasets
+const rssUrl = computed(() => {
+  if (currentType.value !== 'datasets') return null
+
+  const params = new URLSearchParams()
+  const datasetsConfig = props.config.find(c => c.class === 'datasets')
+
+  // Add hidden filters first
+  if (datasetsConfig?.hiddenFilters) {
+    for (const hf of datasetsConfig.hiddenFilters) {
+      if (hf?.value) params.set(hf.key as string, String(hf.value))
+    }
+  }
+
+  // Add active filters
+  if (qDebounced.value) params.set('q', qDebounced.value)
+  if (organizationId.value) params.set('organization', organizationId.value)
+  if (organizationType.value) params.set('organization_badge', organizationType.value)
+  if (tag.value) params.set('tag', tag.value)
+  if (format.value) params.set('format', format.value)
+  if (license.value) params.set('license', license.value)
+  if (schema.value) params.set('schema', schema.value)
+  if (geozone.value) params.set('geozone', geozone.value)
+  if (granularity.value) params.set('granularity', granularity.value)
+  if (badge.value) params.set('badge', badge.value)
+  if (topic.value) params.set('topic', topic.value)
+
+  // Add sort if set
+  if (sort.value) params.set('sort', sort.value)
+
+  const queryString = params.toString()
+  const basePath = '/api/1/datasets/recent.atom'
+  return `${componentsConfig.apiBase}${basePath}${queryString ? '?' + queryString : ''}`
+})
+
+// Facets for filters
+const currentFacets = computed(() => searchResults.value?.facets)
+
+function getFacets(key: string): FacetItem[] | undefined {
+  if (!currentFacets.value) return undefined
+  return (currentFacets.value as Record<string, FacetItem[]>)[key]
+}
+
+// Scroll handling
+const searchRef = useTemplateRef('search')
+
+function scrollToTop() {
+  searchRef.value?.scrollIntoView({ behavior: 'smooth' })
+}
+
+function changePage(newPage: number) {
+  page.value = newPage
+  scrollToTop()
+}
+</script>