From 78484bd7da4a57ec4990c30c730e164af6bf4609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Thu, 16 Apr 2026 09:10:28 +0200
Subject: [PATCH 1/4] feat(search): multiple configs for same class

---
 .../src/components/Search/GlobalSearch.vue    | 135 ++++++------------
 datagouv-components/src/types/search.ts       |   5 +
 2 files changed, 52 insertions(+), 88 deletions(-)

diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index fbdbbd9a1..587b901e9 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -11,7 +11,7 @@
     >
       <SearchInput
         v-model="q"
-        :placeholder="placeholder || typesMeta[currentType].placeholder"
+        :placeholder="placeholder || typesMeta[currentTypeConfig?.class ?? 'datasets'].placeholder"
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -30,10 +30,10 @@
             >
               <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'"
+                :key="configKey(typeConfig)"
+                :value="configKey(typeConfig)"
+                :count="resultsMap[configKey(typeConfig)]?.data.value?.total"
+                :loading="resultsMap[configKey(typeConfig)]?.status.value === 'pending' || resultsMap[configKey(typeConfig)]?.status.value === 'idle'"
                 :icon="typesMeta[typeConfig.class].icon"
               >
                 {{ typeConfig.name || typesMeta[typeConfig.class].name }}
@@ -127,7 +127,7 @@
                 v-model="producerType"
                 :facets="getFacets('producer_type')"
                 :loading="searchResultsStatus === 'pending'"
-                :exclude="currentType === 'organizations' ? ['user'] : []"
+                :exclude="currentTypeConfig?.class === 'organizations' ? ['user'] : []"
                 :style="{ order: getOrder('producer_type') }"
               />
               <DatasetBadgeFilter
@@ -239,7 +239,7 @@
                   :key="result.id"
                   class="p-0"
                 >
-                  <template v-if="currentType === 'datasets'">
+                  <template v-if="currentTypeConfig?.class === 'datasets'">
                     <slot
                       name="dataset"
                       :dataset="result"
@@ -247,7 +247,7 @@
                       <DatasetCard :dataset="(result as Dataset)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'dataservices'">
+                  <template v-else-if="currentTypeConfig?.class === 'dataservices'">
                     <slot
                       name="dataservice"
                       :dataservice="result"
@@ -255,7 +255,7 @@
                       <DataserviceCard :dataservice="(result as Dataservice)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'reuses'">
+                  <template v-else-if="currentTypeConfig?.class === 'reuses'">
                     <slot
                       name="reuse"
                       :reuse="result"
@@ -263,7 +263,7 @@
                       <ReuseHorizontalCard :reuse="(result as Reuse)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'organizations'">
+                  <template v-else-if="currentTypeConfig?.class === 'organizations'">
                     <slot
                       name="organization"
                       :organization="result"
@@ -271,7 +271,7 @@
                       <OrganizationHorizontalCard :organization="(result as Organization)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'topics'">
+                  <template v-else-if="currentTypeConfig?.class === 'topics'">
                     <slot
                       name="topic"
                       :topic="result"
@@ -363,7 +363,7 @@ import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
 import type { Reuse } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
-import type { GlobalSearchConfig, SearchType, SortOption, DatasetSearchResponse, DataserviceSearchResponse, ReuseSearchResponse, OrganizationSearchResponse, TopicSearchResponse, FacetItem } from '../../types/search'
+import type { GlobalSearchConfig, SearchTypeConfig, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
 import BrandedButton from '../BrandedButton.vue'
 import LoadingBlock from '../LoadingBlock.vue'
@@ -401,9 +401,11 @@ const props = withDefaults(defineProps<{
   config: getDefaultGlobalSearchConfig,
 })
 
+const configKey = (c: SearchTypeConfig) => c.key ?? c.class
+
 // 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 currentType = defineModel<string>('type') as Ref<string>
+if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class: 'datasets' })
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
@@ -419,7 +421,7 @@ const customFilterStops = new Map<string, () => void>()
 const initialType = currentType.value
 
 const currentTypeConfig = computed(() =>
-  props.config.find(c => c.class === currentType.value),
+  props.config.find(c => configKey(c) === currentType.value),
 )
 
 const activeBasicFilters = computed(() =>
@@ -532,13 +534,6 @@ watch(currentType, () => {
   }
 })
 
-// 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'))
-const topicsEnabled = computed(() => props.config.some(c => c.class === 'topics'))
-
 // Create stable params for each type
 const stableParamsOptions = {
   allFilters,
@@ -549,33 +544,28 @@ const stableParamsOptions = {
   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'),
-})
-const topicsParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'topics'),
-})
+// URL by class (static lookup)
+const urlByClass: Record<string, string> = {
+  datasets: '/api/2/datasets/search/',
+  dataservices: '/api/2/dataservices/search/',
+  reuses: '/api/2/reuses/search/',
+  organizations: '/api/2/organizations/search/',
+  topics: '/api/2/topics/search/',
+}
+
+// One params + fetch per config entry, keyed by configKey
+const resultsMap: Record<string, { data: Ref<{ total: number, data: unknown[], facets?: unknown } | null>, status: Ref<string> }> = {}
+for (const c of props.config) {
+  const key = configKey(c)
+  const params = useStableQueryParams({ ...stableParamsOptions, typeConfig: c })
 
-// 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)
-const topicsUrl = computed(() => topicsEnabled.value ? '/api/2/topics/search/' : null)
+  const { data, status } = await useFetch(urlByClass[c.class], {
+    params,
+    lazy: true,
+    server: initialType === key,
+  })
+  resultsMap[key] = { data, status }
+}
 
 // Reset page on filter/sort change. Custom filters (registered via
 // useSearchFilter) have their own watchers set up in `provide`, so they're
@@ -623,7 +613,10 @@ const hasFilters = computed(() => {
     || Array.from(customFilterRegistry.values()).some(isCustomFilterActive)
 })
 
-const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
+const showForumLink = computed(() =>
+  (currentTypeConfig.value?.class === 'datasets' || currentTypeConfig.value?.class === 'dataservices')
+  && !!componentsConfig.forumUrl,
+)
 
 function resetFilters() {
   organizationId.value = undefined
@@ -648,80 +641,46 @@ function resetFilters() {
   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 { data: topicsResults, status: topicsStatus } = await useFetch<TopicSearchResponse<TopicV2>>(
-  topicsUrl,
-  { params: topicsParams, lazy: true, server: initialType === 'topics' },
-)
-
 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,
   },
   topics: {
     icon: RiBookShelfLine,
     name: t('Thématiques'),
     placeholder: t('Rechercher une thématique'),
-    results: topicsResults,
-    status: topicsStatus,
   },
 } as const
 
-const searchResults = computed(() => typesMeta[currentType.value].results.value)
-const searchResultsStatus = computed(() => typesMeta[currentType.value].status.value)
+const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
+const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
 // RSS feed URL for datasets
 const rssUrl = computed(() => {
-  if (currentType.value !== 'datasets') return null
+  if (currentTypeConfig.value?.class !== '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 (currentTypeConfig.value?.hiddenFilters) {
+    for (const hf of currentTypeConfig.value.hiddenFilters) {
       if (hf?.value) params.set(hf.key as string, String(hf.value))
     }
   }
diff --git a/datagouv-components/src/types/search.ts b/datagouv-components/src/types/search.ts
index 30d0f0516..cbcc69108 100644
--- a/datagouv-components/src/types/search.ts
+++ b/datagouv-components/src/types/search.ts
@@ -291,6 +291,7 @@ export type SortOption<Sort extends string> = {
 
 export type DatasetSearchConfig = {
   class: 'datasets'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<DatasetSearchFilters>[]
   basicFilters?: (keyof DatasetSearchFilters)[]
@@ -300,6 +301,7 @@ export type DatasetSearchConfig = {
 
 export type DataserviceSearchConfig = {
   class: 'dataservices'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<DataserviceSearchFilters>[]
   basicFilters?: (keyof DataserviceSearchFilters)[]
@@ -309,6 +311,7 @@ export type DataserviceSearchConfig = {
 
 export type ReuseSearchConfig = {
   class: 'reuses'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<ReuseSearchFilters>[]
   basicFilters?: (keyof ReuseSearchFilters)[]
@@ -318,6 +321,7 @@ export type ReuseSearchConfig = {
 
 export type OrganizationSearchConfig = {
   class: 'organizations'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<OrganizationSearchFilters>[]
   basicFilters?: (keyof OrganizationSearchFilters)[]
@@ -327,6 +331,7 @@ export type OrganizationSearchConfig = {
 
 export type TopicSearchConfig = {
   class: 'topics'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<TopicSearchFilters>[]
   basicFilters?: (keyof TopicSearchFilters)[]

From 90878c3794986165ffcdd7555016412bbed13aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Wed, 22 Apr 2026 16:46:48 +0200
Subject: [PATCH 2/4] type fixes

---
 datagouv-components/src/components/Search/GlobalSearch.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index 587b901e9..2a4bc0002 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -229,7 +229,7 @@
         <transition mode="out-in">
           <LoadingBlock
             v-slot="{ data: results }"
-            :status="searchResultsStatus"
+            :status="searchResultsStatus!"
             :data="searchResults"
           >
             <div v-if="results && results.data.length">
@@ -554,12 +554,13 @@ const urlByClass: Record<string, string> = {
 }
 
 // One params + fetch per config entry, keyed by configKey
-const resultsMap: Record<string, { data: Ref<{ total: number, data: unknown[], facets?: unknown } | null>, status: Ref<string> }> = {}
+type SearchResult = { total: number, data: { id: string }[], facets?: unknown }
+const resultsMap: Record<string, { data: Ref<SearchResult | null>, status: Ref<string> }> = {}
 for (const c of props.config) {
   const key = configKey(c)
   const params = useStableQueryParams({ ...stableParamsOptions, typeConfig: c })
 
-  const { data, status } = await useFetch(urlByClass[c.class], {
+  const { data, status } = await useFetch<SearchResult>(urlByClass[c.class]!, {
     params,
     lazy: true,
     server: initialType === key,

From 1fca8160779be2da43859ff6bd7bf9a6ae77d3d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Wed, 22 Apr 2026 17:14:43 +0200
Subject: [PATCH 3/4] useless reformat

---
 datagouv-components/src/components/Search/GlobalSearch.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index 2a4bc0002..7a912503c 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -614,10 +614,7 @@ const hasFilters = computed(() => {
     || Array.from(customFilterRegistry.values()).some(isCustomFilterActive)
 })
 
-const showForumLink = computed(() =>
-  (currentTypeConfig.value?.class === 'datasets' || currentTypeConfig.value?.class === 'dataservices')
-  && !!componentsConfig.forumUrl,
-)
+const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
 
 function resetFilters() {
   organizationId.value = undefined

From 9598c7d42da9af58e2a06bae3aa1d95726c0dcfc Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Mon, 27 Apr 2026 10:44:50 +0200
Subject: [PATCH 4/4] add back typing

---
 .../src/components/Search/GlobalSearch.vue    | 129 +++++++++++-------
 datagouv-components/src/types/search.ts       |  14 ++
 pages/design/dataset-search.vue               |  11 +-
 3 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index 7a912503c..6f645ff36 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -11,7 +11,7 @@
     >
       <SearchInput
         v-model="q"
-        :placeholder="placeholder || typesMeta[currentTypeConfig?.class ?? 'datasets'].placeholder"
+        :placeholder="placeholder || strategies[currentTypeConfig?.class ?? 'datasets'].placeholder"
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -34,9 +34,9 @@
                 :value="configKey(typeConfig)"
                 :count="resultsMap[configKey(typeConfig)]?.data.value?.total"
                 :loading="resultsMap[configKey(typeConfig)]?.status.value === 'pending' || resultsMap[configKey(typeConfig)]?.status.value === 'idle'"
-                :icon="typesMeta[typeConfig.class].icon"
+                :icon="strategies[typeConfig.class].icon"
               >
-                {{ typeConfig.name || typesMeta[typeConfig.class].name }}
+                {{ typeConfig.name || strategies[typeConfig.class].name }}
               </RadioInput>
             </RadioGroup>
           </Sidemenu>
@@ -348,7 +348,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Ref } from 'vue'
+import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
@@ -358,12 +358,13 @@ import { forEachActiveCustomFilter, isCustomFilterActive, searchFilterContextKey
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import type { AsyncDataRequestStatus } from '../../functions/api.types'
 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 { TopicV2 } from '../../types/topics'
-import type { GlobalSearchConfig, SearchTypeConfig, SortOption, FacetItem } from '../../types/search'
+import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SearchTypeConfig, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
 import BrandedButton from '../BrandedButton.vue'
 import LoadingBlock from '../LoadingBlock.vue'
@@ -544,28 +545,86 @@ const stableParamsOptions = {
   pageSize,
 }
 
-// URL by class (static lookup)
-const urlByClass: Record<string, string> = {
-  datasets: '/api/2/datasets/search/',
-  dataservices: '/api/2/dataservices/search/',
-  reuses: '/api/2/reuses/search/',
-  organizations: '/api/2/organizations/search/',
-  topics: '/api/2/topics/search/',
+// Discriminated union: each variant carries its own response type so a `class`
+// narrow gives the precise shape of `data.value` (no cast needed).
+type SearchEntry = {
+  [K in SearchType]: {
+    class: K
+    data: Ref<SearchResponseByClass[K] | null>
+    status: Ref<AsyncDataRequestStatus>
+  }
+}[SearchType]
+
+// One strategy per class consolidates everything that varies by class:
+// metadata (icon/name/placeholder), endpoint, and a typed fetch factory.
+type SearchStrategy<C extends SearchType> = {
+  url: string
+  icon: Component
+  name: string
+  placeholder: string
+  fetch: (
+    params: Ref<Record<string, unknown>>,
+    server: boolean,
+  ) => Promise<Extract<SearchEntry, { class: C }>>
+}
+
+function makeStrategy<C extends SearchType>(
+  cls: C,
+  meta: Omit<SearchStrategy<C>, 'fetch'>,
+): SearchStrategy<C> {
+  return {
+    ...meta,
+    fetch: async (params, server) => {
+      const { data, status } = await useFetch<SearchResponseByClass[C]>(
+        meta.url,
+        { params, lazy: true, server },
+      )
+      // Tautologically equivalent to Extract<SearchEntry, { class: C }>, but TS
+      // cannot prove it on a generic C, so we assert.
+      return { class: cls, data, status } as Extract<SearchEntry, { class: C }>
+    },
+  }
+}
+
+const strategies: { [K in SearchType]: SearchStrategy<K> } = {
+  datasets: makeStrategy('datasets', {
+    url: '/api/2/datasets/search/',
+    icon: RiDatabase2Line,
+    name: t('Jeux de données'),
+    placeholder: t('ex. élections présidentielles'),
+  }),
+  dataservices: makeStrategy('dataservices', {
+    url: '/api/2/dataservices/search/',
+    icon: RiTerminalLine,
+    name: t('API'),
+    placeholder: t('ex: SIRENE'),
+  }),
+  reuses: makeStrategy('reuses', {
+    url: '/api/2/reuses/search/',
+    icon: RiLineChartLine,
+    name: t('Réutilisations'),
+    placeholder: t('Rechercher une réutilisation de données'),
+  }),
+  organizations: makeStrategy('organizations', {
+    url: '/api/2/organizations/search/',
+    icon: RiBuilding2Line,
+    name: t('Organisations'),
+    placeholder: t('Rechercher une organisation'),
+  }),
+  topics: makeStrategy('topics', {
+    url: '/api/2/topics/search/',
+    icon: RiBookShelfLine,
+    name: t('Thématiques'),
+    placeholder: t('Rechercher une thématique'),
+  }),
 }
 
 // One params + fetch per config entry, keyed by configKey
-type SearchResult = { total: number, data: { id: string }[], facets?: unknown }
-const resultsMap: Record<string, { data: Ref<SearchResult | null>, status: Ref<string> }> = {}
+const resultsMap: Record<string, SearchEntry> = {}
 for (const c of props.config) {
   const key = configKey(c)
   const params = useStableQueryParams({ ...stableParamsOptions, typeConfig: c })
-
-  const { data, status } = await useFetch<SearchResult>(urlByClass[c.class]!, {
-    params,
-    lazy: true,
-    server: initialType === key,
-  })
-  resultsMap[key] = { data, status }
+  resultsMap[key] = await strategies[c.class].fetch(params, initialType === key)
 }
 
 // Reset page on filter/sort change. Custom filters (registered via
@@ -639,34 +698,6 @@ function resetFilters() {
   flushQ()
 }
 
-const typesMeta = {
-  datasets: {
-    icon: RiDatabase2Line,
-    name: t('Jeux de données'),
-    placeholder: t('ex. élections présidentielles'),
-  },
-  dataservices: {
-    icon: RiTerminalLine,
-    name: t('API'),
-    placeholder: t('ex: SIRENE'),
-  },
-  reuses: {
-    icon: RiLineChartLine,
-    name: t('Réutilisations'),
-    placeholder: t('Rechercher une réutilisation de données'),
-  },
-  organizations: {
-    icon: RiBuilding2Line,
-    name: t('Organisations'),
-    placeholder: t('Rechercher une organisation'),
-  },
-  topics: {
-    icon: RiBookShelfLine,
-    name: t('Thématiques'),
-    placeholder: t('Rechercher une thématique'),
-  },
-} as const
-
 const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
 const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
diff --git a/datagouv-components/src/types/search.ts b/datagouv-components/src/types/search.ts
index cbcc69108..324d49194 100644
--- a/datagouv-components/src/types/search.ts
+++ b/datagouv-components/src/types/search.ts
@@ -1,5 +1,10 @@
 import type { PaginatedArray } from './api'
 import type { AccessType } from './access_types'
+import type { Dataset } from './datasets'
+import type { Dataservice } from './dataservices'
+import type { Organization } from './organizations'
+import type { Reuse } from './reuses'
+import type { TopicV2 } from './topics'
 import type {
   CERTIFIED,
   PUBLIC_SERVICE,
@@ -345,6 +350,15 @@ export type SearchType = SearchTypeConfig['class']
 
 export type GlobalSearchConfig = SearchTypeConfig[]
 
+// Maps each search class to its concrete response shape.
+export type SearchResponseByClass = {
+  datasets: DatasetSearchResponse<Dataset>
+  dataservices: DataserviceSearchResponse<Dataservice>
+  reuses: ReuseSearchResponse<Reuse>
+  organizations: OrganizationSearchResponse<Organization>
+  topics: TopicSearchResponse<TopicV2>
+}
+
 // Helper functions for default configs
 
 export const defaultDatasetSortOptions: SortOption<DatasetSearchSort>[] = [
diff --git a/pages/design/dataset-search.vue b/pages/design/dataset-search.vue
index 938a25b08..b7b8698c8 100644
--- a/pages/design/dataset-search.vue
+++ b/pages/design/dataset-search.vue
@@ -15,7 +15,7 @@
     <div class="bg-white py-4 px-4 -mx-4">
       <GlobalSearch :config="searchConfig">
         <template #custom-filters-bottom="{ currentType }">
-          <ThemeTagFilter v-if="currentType === 'datasets'" />
+          <ThemeTagFilter v-if="currentType === 'all-datasets' || currentType === 'inspire-datasets'" />
         </template>
       </GlobalSearch>
     </div>
@@ -30,8 +30,17 @@ import ThemeTagFilter from '~/components/Design/ThemeTagFilter.vue'
 const searchConfig: GlobalSearchConfig = [
   {
     class: 'datasets',
+    key: 'all-datasets',
+    name: 'Tous les jeux de données',
     basicFilters: ['organization', 'organization_badge', 'tag', 'format', 'license', 'schema', 'geozone', 'granularity', 'badge'],
   },
+  {
+    class: 'datasets',
+    key: 'inspire-datasets',
+    name: 'Données INSPIRE',
+    hiddenFilters: [{ key: 'badge', value: 'inspire' }],
+    basicFilters: ['organization', 'organization_badge', 'tag', 'format', 'license', 'schema', 'geozone', 'granularity'],
+  },
   {
     class: 'dataservices',
     basicFilters: ['organization', 'is_restricted'],