From 08f798afbe5453d46fa33859bf3285bb8ab0aa9d Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Wed, 15 Apr 2026 14:23:04 +0200
Subject: [PATCH 1/6] feat: search custom filters

---
 components/Design/ThemeTagFilter.vue          | 41 ++++++++++++
 .../src/components/Search/GlobalSearch.vue    | 48 +++++++++++++-
 .../src/composables/useSearchFilter.ts        | 66 +++++++++++++++++++
 .../src/composables/useStableQueryParams.ts   | 35 +++++++++-
 datagouv-components/src/main.ts               |  4 ++
 pages/design/dataset-search.vue               |  7 +-
 6 files changed, 194 insertions(+), 7 deletions(-)
 create mode 100644 components/Design/ThemeTagFilter.vue
 create mode 100644 datagouv-components/src/composables/useSearchFilter.ts

diff --git a/components/Design/ThemeTagFilter.vue b/components/Design/ThemeTagFilter.vue
new file mode 100644
index 000000000..f44f7a5f9
--- /dev/null
+++ b/components/Design/ThemeTagFilter.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="fr-input-group">
+    <label
+      for="theme-filter"
+      class="fr-label"
+    >
+      Thème (custom filter)
+    </label>
+    <select
+      id="theme-filter"
+      v-model="value"
+      class="fr-select shadow-input-blue!"
+    >
+      <option :value="undefined">
+        Tous les thèmes
+      </option>
+      <option
+        v-for="theme in themes"
+        :key="theme.value"
+        :value="theme.value"
+      >
+        {{ theme.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSearchFilter } from '@datagouv/components-next'
+
+const themes = [
+  { value: 'environnement', label: 'Environnement' },
+  { value: 'transport', label: 'Transport' },
+  { value: 'sante', label: 'Santé' },
+  { value: 'education', label: 'Éducation' },
+  { value: 'logement', label: 'Logement' },
+]
+
+// ?theme=environnement dans l'URL → tag=environnement dans l'API
+const value = useSearchFilter('theme', { apiParam: 'tag' })
+</script>
diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index 30564639c..cd73b04fc 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -42,7 +42,7 @@
           </Sidemenu>
         </div>
 
-        <div v-if="activeFilters.length > 0">
+        <div v-if="activeFilters.length > 0 || hasCustomFilters">
           <Sidemenu :button-text="t('Filtres')">
             <template #title>
               {{ t('Filtres') }}
@@ -146,6 +146,10 @@
                 :get-order="getOrder"
               />
             </BasicAndAdvancedFilters>
+            <slot
+              name="custom-filters"
+              :current-type="currentType"
+            />
             <div
               v-if="hasFilters"
               class="mt-6 text-center"
@@ -340,12 +344,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, useTemplateRef, type Ref } from 'vue'
+import { computed, provide, shallowReactive, watch, useTemplateRef, 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'
 import { useTranslation } from '../../composables/useTranslation'
 import { useDebouncedRef } from '../../composables/useDebouncedRef'
+import { searchFilterContextKey, type CustomFilterEntry } from '../../composables/useSearchFilter'
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
@@ -399,6 +404,18 @@ if (!currentType.value) currentType.value = props.config[0]?.class ?? 'datasets'
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
 
+// Custom filter registry for useSearchFilter composable
+const customFilterRegistry = shallowReactive(new Map<string, CustomFilterEntry>())
+
+provide(searchFilterContextKey, {
+  register(urlParam, entry) {
+    customFilterRegistry.set(urlParam, entry)
+  },
+  unregister(urlParam) {
+    customFilterRegistry.delete(urlParam)
+  },
+})
+
 // Initial type is used to determine which fetch should be SSR (non-lazy)
 const initialType = currentType.value
 
@@ -439,7 +456,8 @@ const activeFilters = computed(() => [
   ...(currentTypeConfig.value?.advancedFilters ?? []),
 ] as string[])
 
-const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0)
+const hasCustomFilters = computed(() => customFilterRegistry.size > 0)
+const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0 || hasCustomFilters.value)
 
 // URL query params
 const q = useRouteQuery<string>('q', '')
@@ -513,6 +531,7 @@ const topicsEnabled = computed(() => props.config.some(c => c.class === 'topics'
 // Create stable params for each type
 const stableParamsOptions = {
   allFilters,
+  customFilterRegistry,
   q: qDebounced,
   sort,
   page,
@@ -547,6 +566,15 @@ const reusesUrl = computed(() => reusesEnabled.value ? '/api/2/reuses/search/' :
 const organizationsUrl = computed(() => organizationsEnabled.value ? '/api/2/organizations/search/' : null)
 const topicsUrl = computed(() => topicsEnabled.value ? '/api/2/topics/search/' : null)
 
+// Snapshot of custom filter values for reactivity tracking
+const customFiltersSnapshot = computed(() => {
+  const result: Record<string, unknown> = {}
+  for (const [urlParam, entry] of customFilterRegistry) {
+    result[urlParam] = entry.ref.value
+  }
+  return result
+})
+
 // Reset page on filter/sort change
 const filtersForReset = computed(() => ({
   q: qDebounced.value,
@@ -565,6 +593,7 @@ const filtersForReset = computed(() => ({
   last_update_range: lastUpdateRange.value,
   producer_type: producerType.value,
   type: reuseType.value,
+  ...customFiltersSnapshot.value,
 }))
 
 watch(filtersForReset, () => page.value = 1)
@@ -587,6 +616,9 @@ const hasFilters = computed(() => {
     || lastUpdateRange.value
     || producerType.value
     || reuseType.value
+    || Array.from(customFilterRegistry.values()).some(
+      entry => entry.ref.value !== undefined && entry.ref.value !== entry.defaultValue,
+    )
 })
 
 const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
@@ -607,6 +639,9 @@ function resetFilters() {
   lastUpdateRange.value = undefined
   producerType.value = undefined
   reuseType.value = undefined
+  for (const entry of customFilterRegistry.values()) {
+    entry.ref.value = entry.defaultValue
+  }
   q.value = ''
   flushQ()
 }
@@ -702,6 +737,13 @@ const rssUrl = computed(() => {
   if (badge.value) params.set('badge', badge.value)
   if (topic.value) params.set('topic', topic.value)
 
+  // Add custom filter values
+  for (const [, entry] of customFilterRegistry) {
+    if (entry.ref.value !== undefined && entry.ref.value !== entry.defaultValue) {
+      params.set(entry.apiParam, String(entry.ref.value))
+    }
+  }
+
   // Add sort if set
   if (sort.value) params.set('sort', sort.value)
 
diff --git a/datagouv-components/src/composables/useSearchFilter.ts b/datagouv-components/src/composables/useSearchFilter.ts
new file mode 100644
index 000000000..412192682
--- /dev/null
+++ b/datagouv-components/src/composables/useSearchFilter.ts
@@ -0,0 +1,66 @@
+import { type InjectionKey, type Ref, inject, onScopeDispose } from 'vue'
+import { useRouteQuery } from '@vueuse/router'
+
+export interface CustomFilterEntry {
+  apiParam: string
+  ref: Ref<string | undefined>
+  defaultValue: string | undefined
+}
+
+export interface SearchFilterContext {
+  register(urlParam: string, entry: CustomFilterEntry): void
+  unregister(urlParam: string): void
+}
+
+export const searchFilterContextKey: InjectionKey<SearchFilterContext>
+  = Symbol('SearchFilterContext')
+
+export interface UseSearchFilterOptions {
+  /** The API parameter name to map this filter to. Defaults to the urlParam. */
+  apiParam?: string
+  /** Default value when not present in URL. Defaults to undefined. */
+  defaultValue?: string
+}
+
+/**
+ * Registers a custom filter with the parent GlobalSearch component.
+ *
+ * Must be called inside a component rendered within GlobalSearch's `#custom-filters` slot.
+ *
+ * @param urlParam - The URL query parameter name (e.g. 'theme' → `?theme=value`)
+ * @param options  - Optional: `apiParam` to map to a different API param (e.g. 'tag'), `defaultValue`
+ * @returns A reactive ref bound to the URL parameter, suitable for v-model
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useSearchFilter } from '@datagouv/components-next'
+ * // URL: ?theme=environment → API: ?tag=environment
+ * const value = useSearchFilter('theme', { apiParam: 'tag' })
+ * </script>
+ * ```
+ */
+export function useSearchFilter(
+  urlParam: string,
+  options: UseSearchFilterOptions = {},
+): Ref<string | undefined> {
+  const context = inject(searchFilterContextKey)
+  if (!context) {
+    throw new Error(
+      `useSearchFilter("${urlParam}") must be used inside a <GlobalSearch> component.`,
+    )
+  }
+
+  const { apiParam = urlParam, defaultValue = undefined } = options
+
+  const value = useRouteQuery<string | undefined>(urlParam, defaultValue)
+
+  context.register(urlParam, { apiParam, ref: value, defaultValue })
+
+  onScopeDispose(() => {
+    value.value = defaultValue
+    context.unregister(urlParam)
+  })
+
+  return value
+}
diff --git a/datagouv-components/src/composables/useStableQueryParams.ts b/datagouv-components/src/composables/useStableQueryParams.ts
index 5c4af427b..d11734251 100644
--- a/datagouv-components/src/composables/useStableQueryParams.ts
+++ b/datagouv-components/src/composables/useStableQueryParams.ts
@@ -1,11 +1,13 @@
-import { ref, watch, type Ref } from 'vue'
+import { computed, ref, watch, type Ref } from 'vue'
 import type { SearchTypeConfig } from '../types/search'
+import type { CustomFilterEntry } from './useSearchFilter'
 
 type FilterRefs = Record<string, Ref<unknown>>
 
 interface StableQueryParamsOptions {
   typeConfig: SearchTypeConfig | undefined
   allFilters: FilterRefs
+  customFilterRegistry: Map<string, CustomFilterEntry>
   q: Ref<string>
   sort: Ref<string | undefined>
   page: Ref<number>
@@ -17,7 +19,7 @@ interface StableQueryParamsOptions {
  * Applies hiddenFilters first, then user filters (which can override hiddenFilters).
  */
 export function useStableQueryParams(options: StableQueryParamsOptions) {
-  const { typeConfig, allFilters, q, sort, page, pageSize } = options
+  const { typeConfig, allFilters, customFilterRegistry, q, sort, page, pageSize } = options
   const stableParams = ref<Record<string, unknown>>({})
 
   const buildParams = () => {
@@ -50,6 +52,23 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
       }
     }
 
+    // 3.5. Apply custom filter values
+    for (const [, entry] of customFilterRegistry) {
+      const value = entry.ref.value
+      if (value !== undefined && value !== '' && value !== null) {
+        const existing = params[entry.apiParam]
+        if (existing !== undefined) {
+          // Concatenate into array for multi-value params (e.g., tag)
+          params[entry.apiParam] = Array.isArray(existing)
+            ? [...existing, value]
+            : [existing, value]
+        }
+        else {
+          params[entry.apiParam] = value
+        }
+      }
+    }
+
     // 4. Always include q, sort (if valid for this type), page, page_size
     if (q.value) {
       params.q = q.value
@@ -66,9 +85,19 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
     return params
   }
 
+  // Computed that reads all custom filter values, establishing reactive dependencies
+  // on both the Map mutations (shallowReactive) and each entry's ref.value.
+  const customFilterValues = computed(() => {
+    const snapshot: Record<string, unknown> = {}
+    for (const [urlParam, entry] of customFilterRegistry) {
+      snapshot[urlParam] = entry.ref.value
+    }
+    return snapshot
+  })
+
   // Watch all dependencies and update only if content changed
   watch(
-    [q, sort, page, ...Object.values(allFilters)],
+    [q, sort, page, ...Object.values(allFilters), customFilterValues],
     () => {
       const newParams = buildParams()
       // JSON.stringify comparison is safe here because buildParams() builds the object deterministically
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 39b418ed7..b90789912 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -25,6 +25,8 @@ import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
 import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
+import { useSearchFilter } from './composables/useSearchFilter'
+import type { UseSearchFilterOptions } from './composables/useSearchFilter'
 
 import ActivityList from './components/ActivityList/ActivityList.vue'
 import UserActivityList from './components/ActivityList/UserActivityList.vue'
@@ -126,6 +128,7 @@ export type {
   GlobalSearchConfig,
   SearchType,
   SortOption,
+  UseSearchFilterOptions,
   UseFetchFunction,
   AccessType,
   AccessAudience,
@@ -229,6 +232,7 @@ export {
   defaultDataserviceSortOptions,
   defaultReuseSortOptions,
   defaultOrganizationSortOptions,
+  useSearchFilter,
 }
 
 // Vue Plugin
diff --git a/pages/design/dataset-search.vue b/pages/design/dataset-search.vue
index ab31b0c64..ed7830933 100644
--- a/pages/design/dataset-search.vue
+++ b/pages/design/dataset-search.vue
@@ -13,7 +13,11 @@
     </h1>
 
     <div class="bg-white py-4 px-4 -mx-4">
-      <GlobalSearch :config="searchConfig" />
+      <GlobalSearch :config="searchConfig">
+        <template #custom-filters="{ currentType }">
+          <ThemeTagFilter v-if="currentType === 'datasets'" />
+        </template>
+      </GlobalSearch>
     </div>
   </div>
 </template>
@@ -21,6 +25,7 @@
 <script setup lang="ts">
 import { GlobalSearch, type GlobalSearchConfig } from '@datagouv/components-next'
 import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import ThemeTagFilter from '~/components/Design/ThemeTagFilter.vue'
 
 const searchConfig: GlobalSearchConfig = [
   {

From a220f31bd93cfe20472c451c4f4ee828147dfcb2 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 16 Apr 2026 09:54:41 +0200
Subject: [PATCH 2/6] fix review

---
 components/Design/ThemeTagFilter.vue          |  2 +-
 .../src/components/Search/GlobalSearch.vue    | 56 +++++++++----------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/components/Design/ThemeTagFilter.vue b/components/Design/ThemeTagFilter.vue
index f44f7a5f9..8215ea68b 100644
--- a/components/Design/ThemeTagFilter.vue
+++ b/components/Design/ThemeTagFilter.vue
@@ -36,6 +36,6 @@ const themes = [
   { value: 'logement', label: 'Logement' },
 ]
 
-// ?theme=environnement dans l'URL → tag=environnement dans l'API
+// ?theme=environnement in URL → tag=environnement in API
 const value = useSearchFilter('theme', { apiParam: 'tag' })
 </script>
diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index cd73b04fc..f08198c4a 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -42,7 +42,7 @@
           </Sidemenu>
         </div>
 
-        <div v-if="activeFilters.length > 0 || hasCustomFilters">
+        <div v-if="activeFilters.length > 0 || $slots['custom-filters']">
           <Sidemenu :button-text="t('Filtres')">
             <template #title>
               {{ t('Filtres') }}
@@ -344,7 +344,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, shallowReactive, watch, useTemplateRef, type Ref } from 'vue'
+import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, 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'
@@ -456,8 +456,8 @@ const activeFilters = computed(() => [
   ...(currentTypeConfig.value?.advancedFilters ?? []),
 ] as string[])
 
-const hasCustomFilters = computed(() => customFilterRegistry.size > 0)
-const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0 || hasCustomFilters.value)
+const slots = useSlots()
+const showSidebar = computed(() => props.config.length > 1 || activeFilters.value.length > 0 || !!slots['custom-filters'])
 
 // URL query params
 const q = useRouteQuery<string>('q', '')
@@ -566,36 +566,32 @@ const reusesUrl = computed(() => reusesEnabled.value ? '/api/2/reuses/search/' :
 const organizationsUrl = computed(() => organizationsEnabled.value ? '/api/2/organizations/search/' : null)
 const topicsUrl = computed(() => topicsEnabled.value ? '/api/2/topics/search/' : null)
 
-// Snapshot of custom filter values for reactivity tracking
-const customFiltersSnapshot = computed(() => {
-  const result: Record<string, unknown> = {}
+// Reset page on filter/sort change
+const filtersForReset = computed(() => {
+  const filters: Record<string, unknown> = {
+    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,
+  }
   for (const [urlParam, entry] of customFilterRegistry) {
-    result[urlParam] = entry.ref.value
+    filters[urlParam] = entry.ref.value
   }
-  return result
+  return filters
 })
 
-// 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,
-  ...customFiltersSnapshot.value,
-}))
-
 watch(filtersForReset, () => page.value = 1)
 watch(sort, () => page.value = 1)
 

From 20baee9adbc074d1397d29175eaaa8ac7ec08baf Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 16 Apr 2026 09:57:50 +0200
Subject: [PATCH 3/6] try to add tests

---
 .../src/composables/useSearchFilter.ts        |  8 ++-
 tests/datasets/search.spec.ts                 | 69 +++++++++++++++++++
 2 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/datagouv-components/src/composables/useSearchFilter.ts b/datagouv-components/src/composables/useSearchFilter.ts
index 412192682..277d079eb 100644
--- a/datagouv-components/src/composables/useSearchFilter.ts
+++ b/datagouv-components/src/composables/useSearchFilter.ts
@@ -1,4 +1,4 @@
-import { type InjectionKey, type Ref, inject, onScopeDispose } from 'vue'
+import { type InjectionKey, type Ref, inject, onMounted, onScopeDispose } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 
 export interface CustomFilterEntry {
@@ -55,7 +55,11 @@ export function useSearchFilter(
 
   const value = useRouteQuery<string | undefined>(urlParam, defaultValue)
 
-  context.register(urlParam, { apiParam, ref: value, defaultValue })
+  // Register in onMounted to avoid SSR/hydration mismatch: the registry must be
+  // empty during SSR so server and client produce the same initial HTML.
+  onMounted(() => {
+    context.register(urlParam, { apiParam, ref: value, defaultValue })
+  })
 
   onScopeDispose(() => {
     value.value = defaultValue
diff --git a/tests/datasets/search.spec.ts b/tests/datasets/search.spec.ts
index 31cc160fd..5f47a946c 100644
--- a/tests/datasets/search.spec.ts
+++ b/tests/datasets/search.spec.ts
@@ -103,6 +103,75 @@ test('badge filter persists on page reload', async ({ page }) => {
   expect(url.searchParams.get('badge')).toBe(badgeValue)
 })
 
+test('custom theme filter is visible on design search page', async ({ page }) => {
+  await page.goto('/design/dataset-search')
+
+  const themeSelect = page.locator('#theme-filter')
+  await themeSelect.scrollIntoViewIfNeeded()
+  await expect(themeSelect).toBeVisible()
+})
+
+test('custom theme filter updates URL', async ({ page }) => {
+  await page.goto('/design/dataset-search')
+
+  const themeSelect = page.locator('#theme-filter')
+  await themeSelect.scrollIntoViewIfNeeded()
+  await themeSelect.selectOption('environnement')
+
+  await page.waitForURL(/theme=environnement/)
+  const url = new URL(page.url())
+  expect(url.searchParams.get('theme')).toBe('environnement')
+})
+
+test('custom theme filter persists on reload', async ({ page }) => {
+  await page.goto('/design/dataset-search?theme=transport')
+
+  const themeSelect = page.locator('#theme-filter')
+  await expect(themeSelect).toHaveValue('transport')
+
+  await page.reload()
+
+  await expect(page.locator('#theme-filter')).toHaveValue('transport')
+  const url = new URL(page.url())
+  expect(url.searchParams.get('theme')).toBe('transport')
+})
+
+test('custom theme filter is cleared by reset button', async ({ page }) => {
+  await page.goto('/design/dataset-search?theme=sante')
+
+  await expect(page.locator('#theme-filter')).toHaveValue('sante')
+
+  const resetButton = page.getByRole('button', { name: 'Réinitialiser les filtres' }).first()
+  await resetButton.scrollIntoViewIfNeeded()
+  await resetButton.click()
+
+  await page.waitForURL(url => !url.searchParams.has('theme'))
+  await expect(page.locator('#theme-filter')).not.toHaveValue('sante')
+})
+
+test('custom theme filter is hidden on non-dataset types', async ({ page }) => {
+  await page.goto('/design/dataset-search')
+
+  await expect(page.locator('#theme-filter')).toBeVisible()
+
+  const reusesRadio = page.getByRole('radio', { name: 'Réutilisations' })
+  await reusesRadio.click({ force: true })
+
+  await expect(page.locator('#theme-filter')).not.toBeVisible()
+})
+
+test('custom theme filter resets page to 1 on change', async ({ page }) => {
+  await page.goto('/design/dataset-search?page=2')
+
+  const themeSelect = page.locator('#theme-filter')
+  await themeSelect.scrollIntoViewIfNeeded()
+  await themeSelect.selectOption('education')
+
+  await page.waitForURL(/theme=education/)
+  const url = new URL(page.url())
+  expect(url.searchParams.get('page')).toBeNull()
+})
+
 test('clicking dataset navigates to detail', async ({ page }) => {
   await page.goto('/datasets/search/')
   // Wait for Vue hydration before clicking NuxtLink (fix flaky test on Firefox)

From 225c146ce31badf2c674930b77317f234048be95 Mon Sep 17 00:00:00 2001
From: Thibaud Dauce <git@hadibut.fr>
Date: Thu, 16 Apr 2026 13:46:51 +0200
Subject: [PATCH 4/6] move .input to datagouv-components

---
 assets/css/overrides.css            | 4 ----
 datagouv-components/assets/main.css | 4 ++++
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/css/overrides.css b/assets/css/overrides.css
index d8d4d682c..ca714b87c 100644
--- a/assets/css/overrides.css
+++ b/assets/css/overrides.css
@@ -30,10 +30,6 @@
   @apply !bg-none underline underline-offset-4 hover:decoration-2 text-new-primary;
 }
 
-.input {
-  @apply block w-full rounded-t text-base leading-6 py-2 px-4 text-gray-plain bg-gray-lower placeholder:opacity-100 placeholder:italic placeholder:text-gray-medium;
-}
-
 .close-button {
   @apply w-10 leading-0 text-lg;
 }
diff --git a/datagouv-components/assets/main.css b/datagouv-components/assets/main.css
index ba55d3f6d..ab82a66f8 100644
--- a/datagouv-components/assets/main.css
+++ b/datagouv-components/assets/main.css
@@ -182,6 +182,10 @@
 }
 
 @layer components {
+  .input {
+    @apply block w-full rounded-t text-base leading-6 py-2 px-4 text-gray-plain bg-gray-lower! placeholder:opacity-100 placeholder:italic placeholder:text-gray-medium;
+  }
+
   .subtitle {
       @apply text-sm! font-bold! leading-5!;
   }

From 0dcff850e9777ab5ca2ed6ce34bf361a6068e0da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Mon, 13 Apr 2026 11:30:24 +0200
Subject: [PATCH 5/6] feat(search): add organizations facet support

---
 .../Search/Filter/OrganizationFacetFilter.vue | 48 +++++++++++++++++++
 .../src/components/Search/GlobalSearch.vue    |  9 ++++
 .../src/composables/useStableQueryParams.ts   |  5 +-
 datagouv-components/src/main.ts               |  3 +-
 datagouv-components/src/types/search.ts       | 21 ++++----
 5 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue

diff --git a/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue b/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue
new file mode 100644
index 000000000..18326c938
--- /dev/null
+++ b/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue
@@ -0,0 +1,48 @@
+<template>
+  <FilterButtonGroup
+    :model-value="modelValue"
+    :options="options"
+    :label="t('Organisation')"
+    :all-label="t('Toutes')"
+    :facets="normalizedFacets"
+    :loading="loading"
+    name="organization_facet"
+    highlight-active
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FacetItem } from '../../../types/search'
+import { useTranslation } from '../../../composables/useTranslation'
+import FilterButtonGroup from './FilterButtonGroup.vue'
+
+const props = defineProps<{
+  modelValue: string | undefined
+  facets?: FacetItem[]
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const { t } = useTranslation()
+
+// organization_id_with_name facet name format: "org-slug|Org Display Name"
+const parsed = computed(() =>
+  (props.facets ?? []).map((f) => {
+    const [id = '', ...labelParts] = f.name.split('|')
+    return { id, label: labelParts.join('|'), count: f.count }
+  }),
+)
+
+const options = computed(() =>
+  parsed.value.map(({ id, label }) => ({ value: id, label })),
+)
+
+const normalizedFacets = computed(() =>
+  parsed.value.map(({ id, count }) => ({ name: id, count })),
+)
+</script>
diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index f08198c4a..158d76793 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -140,6 +140,13 @@
                 :loading="searchResultsStatus === 'pending'"
                 :style="{ order: getOrder('type') }"
               />
+              <OrganizationFacetFilter
+                v-if="isEnabled('organization_facet')"
+                v-model="organizationId"
+                :facets="getFacets('organization_id_with_name')"
+                :loading="searchResultsStatus === 'pending'"
+                :style="{ order: getOrder('organization_facet') }"
+              />
               <slot
                 name="filters"
                 :is-enabled="isEnabled"
@@ -389,6 +396,7 @@ import LastUpdateRangeFilter from './Filter/LastUpdateRangeFilter.vue'
 import ProducerTypeFilter from './Filter/ProducerTypeFilter.vue'
 import DatasetBadgeFilter from './Filter/DatasetBadgeFilter.vue'
 import ReuseTypeFilter from './Filter/ReuseTypeFilter.vue'
+import OrganizationFacetFilter from './Filter/OrganizationFacetFilter.vue'
 
 const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
@@ -489,6 +497,7 @@ const pageSize = 20
 // All filter values as a record
 const allFilters: Record<string, Ref<unknown>> = {
   organization: organizationId,
+  organization_facet: organizationId,
   organization_badge: organizationType,
   tag,
   format,
diff --git a/datagouv-components/src/composables/useStableQueryParams.ts b/datagouv-components/src/composables/useStableQueryParams.ts
index d11734251..1a06d40b9 100644
--- a/datagouv-components/src/composables/useStableQueryParams.ts
+++ b/datagouv-components/src/composables/useStableQueryParams.ts
@@ -1,5 +1,5 @@
 import { computed, ref, watch, type Ref } from 'vue'
-import type { SearchTypeConfig } from '../types/search'
+import { SearchFilterAliases, type SearchTypeConfig } from '../types/search'
 import type { CustomFilterEntry } from './useSearchFilter'
 
 type FilterRefs = Record<string, Ref<unknown>>
@@ -47,7 +47,8 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
       if (filterRef) {
         const value = filterRef.value
         if (value !== undefined && value !== '' && value !== null) {
-          params[filterName as string] = value
+          const paramName = SearchFilterAliases[filterName as string] ?? filterName as string
+          params[paramName] = value
         }
       }
     }
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index b90789912..0b6aa07b6 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -24,7 +24,7 @@ import type { Weight, WellType } from './types/ui'
 import type { User, UserReference } from './types/users'
 import type { Report, ReportSubject, ReportReason } from './types/reports'
 import type { GlobalSearchConfig, SearchType, SortOption } from './types/search'
-import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
+import { SearchFilterAliases, getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseConfig, getDefaultOrganizationConfig, getDefaultTopicConfig, getDefaultGlobalSearchConfig, defaultDatasetSortOptions, defaultDataserviceSortOptions, defaultReuseSortOptions, defaultOrganizationSortOptions } from './types/search'
 import { useSearchFilter } from './composables/useSearchFilter'
 import type { UseSearchFilterOptions } from './composables/useSearchFilter'
 
@@ -222,6 +222,7 @@ export type {
 }
 
 export {
+  SearchFilterAliases,
   getDefaultDatasetConfig,
   getDefaultDataserviceConfig,
   getDefaultReuseConfig,
diff --git a/datagouv-components/src/types/search.ts b/datagouv-components/src/types/search.ts
index 30d0f0516..8c33928f5 100644
--- a/datagouv-components/src/types/search.ts
+++ b/datagouv-components/src/types/search.ts
@@ -289,12 +289,17 @@ export type SortOption<Sort extends string> = {
   label: string
 }
 
+// UI filter keys that map to a different API param name
+export const SearchFilterAliases: Record<string, string> = {
+  organization_facet: 'organization',
+}
+
 export type DatasetSearchConfig = {
   class: 'datasets'
   name?: string
   hiddenFilters?: HiddenFilter<DatasetSearchFilters>[]
-  basicFilters?: (keyof DatasetSearchFilters)[]
-  advancedFilters?: (keyof DatasetSearchFilters)[]
+  basicFilters?: (keyof DatasetSearchFilters | keyof typeof SearchFilterAliases)[]
+  advancedFilters?: (keyof DatasetSearchFilters | keyof typeof SearchFilterAliases)[]
   sortOptions?: SortOption<DatasetSearchSort>[]
 }
 
@@ -302,8 +307,8 @@ export type DataserviceSearchConfig = {
   class: 'dataservices'
   name?: string
   hiddenFilters?: HiddenFilter<DataserviceSearchFilters>[]
-  basicFilters?: (keyof DataserviceSearchFilters)[]
-  advancedFilters?: (keyof DataserviceSearchFilters)[]
+  basicFilters?: (keyof DataserviceSearchFilters | keyof typeof SearchFilterAliases)[]
+  advancedFilters?: (keyof DataserviceSearchFilters | keyof typeof SearchFilterAliases)[]
   sortOptions?: SortOption<DataserviceSearchSort>[]
 }
 
@@ -311,8 +316,8 @@ export type ReuseSearchConfig = {
   class: 'reuses'
   name?: string
   hiddenFilters?: HiddenFilter<ReuseSearchFilters>[]
-  basicFilters?: (keyof ReuseSearchFilters)[]
-  advancedFilters?: (keyof ReuseSearchFilters)[]
+  basicFilters?: (keyof ReuseSearchFilters | keyof typeof SearchFilterAliases)[]
+  advancedFilters?: (keyof ReuseSearchFilters | keyof typeof SearchFilterAliases)[]
   sortOptions?: SortOption<ReuseSearchSort>[]
 }
 
@@ -329,8 +334,8 @@ export type TopicSearchConfig = {
   class: 'topics'
   name?: string
   hiddenFilters?: HiddenFilter<TopicSearchFilters>[]
-  basicFilters?: (keyof TopicSearchFilters)[]
-  advancedFilters?: (keyof TopicSearchFilters)[]
+  basicFilters?: (keyof TopicSearchFilters | keyof typeof SearchFilterAliases)[]
+  advancedFilters?: (keyof TopicSearchFilters | keyof typeof SearchFilterAliases)[]
   sortOptions?: SortOption<TopicSearchSort>[]
 }
 

From def0b62747351d830ae6e2a4e9a6854df95541bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Wed, 15 Apr 2026 11:02:34 +0200
Subject: [PATCH 6/6] use correct select

---
 .../Search/Filter/OrganizationFacetFilter.vue | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue b/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue
index 18326c938..b39db7388 100644
--- a/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue
+++ b/datagouv-components/src/components/Search/Filter/OrganizationFacetFilter.vue
@@ -1,14 +1,14 @@
 <template>
-  <FilterButtonGroup
-    :model-value="modelValue"
+  <SearchableSelect
+    :model-value="selectedOption"
     :options="options"
-    :label="t('Organisation')"
-    :all-label="t('Toutes')"
-    :facets="normalizedFacets"
     :loading="loading"
-    name="organization_facet"
-    highlight-active
-    @update:model-value="emit('update:modelValue', $event)"
+    :label="t('Organisation')"
+    :placeholder="t('Toutes les organisations')"
+    :get-option-id="(opt) => opt.value"
+    :display-value="(opt) => opt.label"
+    :multiple="false"
+    @update:model-value="emit('update:modelValue', $event?.value ?? undefined)"
   />
 </template>
 
@@ -16,7 +16,7 @@
 import { computed } from 'vue'
 import type { FacetItem } from '../../../types/search'
 import { useTranslation } from '../../../composables/useTranslation'
-import FilterButtonGroup from './FilterButtonGroup.vue'
+import SearchableSelect from '../../Form/SearchableSelect.vue'
 
 const props = defineProps<{
   modelValue: string | undefined
@@ -31,18 +31,16 @@ const emit = defineEmits<{
 const { t } = useTranslation()
 
 // organization_id_with_name facet name format: "org-slug|Org Display Name"
-const parsed = computed(() =>
-  (props.facets ?? []).map((f) => {
-    const [id = '', ...labelParts] = f.name.split('|')
-    return { id, label: labelParts.join('|'), count: f.count }
-  }),
-)
-
 const options = computed(() =>
-  parsed.value.map(({ id, label }) => ({ value: id, label })),
+  (props.facets ?? [])
+    .map((f) => {
+      const [id = '', ...labelParts] = f.name.split('|')
+      return { value: id, label: labelParts.join('|') }
+    })
+    .filter(o => o.value !== '' && o.label !== ''),
 )
 
-const normalizedFacets = computed(() =>
-  parsed.value.map(({ id, count }) => ({ name: id, count })),
+const selectedOption = computed(() =>
+  options.value.find(o => o.value === props.modelValue) ?? null,
 )
 </script>