From 9e6c87364f61a5dbff8416d1210c2a7858d03565 Mon Sep 17 00:00:00 2001
From: Volubyl <volubyl@pm.me>
Date: Thu, 4 May 2023 10:35:44 +0200
Subject: [PATCH] feat: rework search filter order (#597)

---
 client/src/app.css                            |   4 +
 client/src/constants.ts                       |   2 +-
 client/src/definitions/datasetFilters.ts      |  16 ++
 .../DatasetListItem/DatasetListItem.svelte    |   2 +-
 .../src/lib/components/Header/Header.svelte   |   2 +-
 .../SearchFilter/SearchFilterSkeleton.svelte  |  26 ++-
 .../SearchFilter/TextSearchFilter.svelte      |   8 +-
 .../components/SearchForm/SearchForm.svelte   |   1 +
 .../SearchableComboBox/Basic.svelte           | 133 +++++++----
 .../DatasetListTemplate.svelte                |   2 -
 client/src/lib/transformers/datasetFilters.ts |  32 ++-
 client/src/lib/transformers/extraField.ts     |  11 +-
 client/src/lib/util/datasetFilters.test.ts    | 167 ++++++++++++++
 client/src/lib/util/datasetFilters.ts         | 120 ++++++++++
 client/src/routes/(app)/fiches/[id]/+page.ts  |   4 +-
 .../routes/(app)/fiches/search/+page.svelte   | 149 ++++++++++--
 .../src/routes/(app)/fiches/search/+page.ts   |   2 +-
 .../(app)/fiches/search/_FilterPanel.svelte   | 216 ++++++++++--------
 client/src/tests/e2e/a11y.spec.ts             |  11 +
 client/src/tests/e2e/contribuer.spec.ts       |   2 +-
 client/src/tests/e2e/datapass.spec.ts         |   4 +-
 client/src/tests/e2e/details.spec.ts          |   4 +-
 client/src/tests/e2e/edit.spec.ts             |   2 +-
 client/src/tests/e2e/home.spec.ts             |   2 +-
 client/src/tests/e2e/login.spec.ts            |   2 +-
 client/src/tests/e2e/search.spec.ts           |  20 +-
 client/src/tests/e2e/static.spec.ts           |   8 +-
 server/api/app.py                             |   2 +-
 28 files changed, 722 insertions(+), 232 deletions(-)
 create mode 100644 client/src/lib/util/datasetFilters.test.ts
 create mode 100644 client/src/lib/util/datasetFilters.ts

diff --git a/client/src/app.css b/client/src/app.css
index 8dc32bfa..e67f9ab0 100644
--- a/client/src/app.css
+++ b/client/src/app.css
@@ -7,6 +7,10 @@ mark {
   background-color: var(--background-contrast-info);
 }
 
+.bottom_line {
+  border-bottom: 1px solid var(--border-default-grey);
+}
+
 :root {
   /*
   Breakpoints in DSFR. This is for reference only. The @media CSS spec does not
diff --git a/client/src/constants.ts b/client/src/constants.ts
index a6243f2b..92fe74d9 100644
--- a/client/src/constants.ts
+++ b/client/src/constants.ts
@@ -4,7 +4,7 @@ import type {
 } from "./definitions/datasets";
 import type { TrustedHtml } from "./lib/util/html";
 
-export const SITE_TITLE = "catalogue.data.gouv.fr";
+export const SITE_TITLE = "Catalogue";
 
 export const SITE_DESCRIPTION =
   "Un service pour aider les administrations à créer, gérer et ouvrir leurs catalogues.";
diff --git a/client/src/definitions/datasetFilters.ts b/client/src/definitions/datasetFilters.ts
index 4c1b0ed3..85d2f5fd 100644
--- a/client/src/definitions/datasetFilters.ts
+++ b/client/src/definitions/datasetFilters.ts
@@ -26,6 +26,22 @@ export type DatasetFiltersValue = {
   license: string | null;
   extraFieldValues: ExtraFieldValue[] | null;
 };
+export type BasicMap = {
+  id?: string;
+  key: string;
+  value: string | number;
+};
+
+export type ActiveDatasetFiltersMap = {
+  organizationSiret?: BasicMap;
+  geographicalCoverage?: BasicMap;
+  service?: BasicMap;
+  formatId?: BasicMap;
+  technicalSource?: BasicMap;
+  tagId?: BasicMap;
+  license?: BasicMap;
+  extraFieldValues?: BasicMap[];
+};
 
 export type DatasetFiltersOptions = {
   [K in keyof Omit<DatasetFiltersValue, "extraFieldValues">]: SelectOption<
diff --git a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
index 592a7f75..b108ca55 100644
--- a/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
+++ b/client/src/lib/components/DatasetListItem/DatasetListItem.svelte
@@ -33,7 +33,7 @@
     data-test-id="dataset-list-item"
     class="item"
     href={paths.datasetDetail({ id: dataset.id })}
-    title="Consulter cette fiche de données"
+    title={`Consulter la fiche de données ${dataset.catalogRecord.organization.name} : ${dataset.title}`}
   >
     <div class="item__logo">
       {#if dataset.catalogRecord.organization.logoUrl}
diff --git a/client/src/lib/components/Header/Header.svelte b/client/src/lib/components/Header/Header.svelte
index 68a62769..15099859 100644
--- a/client/src/lib/components/Header/Header.svelte
+++ b/client/src/lib/components/Header/Header.svelte
@@ -22,7 +22,7 @@
         <div class="fr-header__brand fr-enlarge-link">
           <div class="fr-header__brand-top">
             <div class="fr-header__logo">
-              <a href="/" aria-label="Accueil - Etalab">
+              <a href="/" title="vers Accueil - Etalab">
                 <p class="fr-logo">
                   République
                   <br />Française
diff --git a/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte b/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
index f11af790..4606ecd4 100644
--- a/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
+++ b/client/src/lib/components/SearchFilter/SearchFilterSkeleton.svelte
@@ -4,16 +4,25 @@
   export let buttonText = buttonPlaceholder;
   export let label: string;
   export let isOverlayOpen = false;
+  export let higlighted = false;
+  export let selected = true;
 
   $: slug = slugify(label);
 </script>
 
 <div class="container">
-  <span data-testId={`${slug}-label`} id={`${slug}`}>{label}</span>
+  <span
+    class:fr-h5={higlighted}
+    class:label--selected={selected}
+    data-testId={`${slug}-label`}
+    id={`${slug}-label`}>{label}</span
+  >
   <button
     aria-labelledby={`${slug}-label`}
     class="fr-select"
+    class:button--selected={selected}
     data-testId={`${slug}-button`}
+    on:mousedown
     on:click>{buttonText}</button
   >
 
@@ -28,6 +37,11 @@
   button {
     text-align: left;
   }
+
+  span {
+    display: block;
+    margin-bottom: 15px;
+  }
   .container {
     position: relative;
     box-sizing: border-box;
@@ -45,4 +59,14 @@
     position: absolute;
     border: 1px solid var(--background-contrast-grey);
   }
+
+  .button--selected {
+    background-color: var(--blue-france-925-125-active) !important;
+    color: var(--blue-france-sun-113-625-active);
+  }
+
+  .label--selected {
+    font: bold;
+    color: var(--blue-france-sun-113-625-active);
+  }
 </style>
diff --git a/client/src/lib/components/SearchFilter/TextSearchFilter.svelte b/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
index 3b467837..4f09ed41 100644
--- a/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
+++ b/client/src/lib/components/SearchFilter/TextSearchFilter.svelte
@@ -8,11 +8,13 @@
   export let buttonText: string | null = "";
   export let label: string;
   export let options: SelectOption<any>[];
+  export let higlighted = false;
+  export let selected = false;
 
   $: options = [
     {
       label: "Réinistialiser le filtre",
-      value: null,
+      value: "",
     },
     ...options,
   ];
@@ -37,11 +39,13 @@
   buttonPlaceholder="Rechercher..."
   buttonText={buttonText || "Rechercher..."}
   isOverlayOpen={showOverLay}
+  {higlighted}
+  {selected}
   on:click={handleShowOverLay}
 >
   <Basic
     on:selectOption
-    on:selectOption={handleShowOverLay}
+    on:selectOption={() => (showOverLay = false)}
     labelledby={slugify(label)}
     name={slugify(label)}
     on:focusout={handleShowOverLay}
diff --git a/client/src/lib/components/SearchForm/SearchForm.svelte b/client/src/lib/components/SearchForm/SearchForm.svelte
index b32f1ea8..1bf83385 100644
--- a/client/src/lib/components/SearchForm/SearchForm.svelte
+++ b/client/src/lib/components/SearchForm/SearchForm.svelte
@@ -15,6 +15,7 @@
 >
   <label for="q" class="fr-label">Rechercher</label>
   <input
+    id="q"
     type="search"
     class="fr-input"
     name="q"
diff --git a/client/src/lib/components/SearchableComboBox/Basic.svelte b/client/src/lib/components/SearchableComboBox/Basic.svelte
index 4fdb3283..b56b196c 100644
--- a/client/src/lib/components/SearchableComboBox/Basic.svelte
+++ b/client/src/lib/components/SearchableComboBox/Basic.svelte
@@ -5,23 +5,26 @@
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher<{
-    selectOption: SelectOption<number | string | null>;
+    selectOption: SelectOption<number>;
     addItem: string;
   }>();
 
   export let name: string;
   export let label = "";
   export let hintText = "";
-  export let options: SelectOption<number | string | null>[];
+  export let options: SelectOption<number>[];
   export let error = "";
   export let value = "";
-  export let labelledby = "";
+  export let labelledby = " ";
 
+  let disableAddItem = true;
   let suggestionList: HTMLElement;
   let currentLiIndex = 0;
-  let showSuggestions = false;
-  let selectedOption: SelectOption<number | string | null>;
+
+  let selectedOption: SelectOption<number>;
   let textBoxHasFocus = false;
+  let listBoxHasFocus = false;
+  let showSuggestions = false;
 
   $: regexp = value ? new RegExp(escape(value), "i") : null;
 
@@ -29,35 +32,58 @@
     ? options.filter((item) => (regexp ? item.label.match(regexp) : true))
     : [];
 
-  const getSelectedOption = (
-    value: string
-  ): SelectOption<number | string | null> | undefined =>
+  $: if (options.length === 0) {
+    showSuggestions = false;
+  }
+
+  const getSelectedOption = (value: string): SelectOption<number> | undefined =>
     filteredSuggestions.find((item) => item.label === value.trim());
 
-  const handleSelectOption = (option: SelectOption<number | string | null>) => {
+  const handleSelectOption = (option: SelectOption<number>) => {
     selectedOption = option;
     dispatch("selectOption", selectedOption);
-    showSuggestions = false;
   };
 
   const handleClickOption = (optionValue: string) => {
     const foundOption = getSelectedOption(optionValue);
 
     if (foundOption) {
-      value = foundOption.label;
+      value = "";
       handleSelectOption(foundOption);
     }
     showSuggestions = false;
   };
 
   const handleInput = (ev: Event & { currentTarget: HTMLInputElement }) => {
+    disableAddItem = true;
     textBoxHasFocus = true;
     showSuggestions = true;
     value = ev.currentTarget.value;
+
+    const optionAlreadyExists =
+      options.findIndex((item) => item.label === value) !== -1;
+
+    if (!optionAlreadyExists) {
+      disableAddItem = false;
+    }
   };
 
   const handeChange = (ev: Event & { currentTarget: HTMLInputElement }) => {
+    disableAddItem = true;
     value = ev.currentTarget.value;
+
+    const optionAlreadyExists =
+      options.findIndex((item) => item.label === value) !== -1;
+
+    if (!optionAlreadyExists) {
+      disableAddItem = false;
+    }
+  };
+
+  const handleInputFocused = () => {
+    showSuggestions = true;
+    textBoxHasFocus = true;
+    listBoxHasFocus = false;
   };
 
   const manageKeyboardInterractions = (e: KeyboardEvent) => {
@@ -109,12 +135,18 @@
             return;
           }
 
+          // if the listbox is not displayed, clears the textbox.
+
+          if (!showSuggestions) {
+            textBoxHasFocus = true;
+            value = "";
+          }
           break;
 
         case "ArrowDown":
           // If the textbox is not empty and the listbox is displayed, moves visual focus to the first suggested value.
           textBoxHasFocus = false;
-
+          listBoxHasFocus = true;
           if (value && showSuggestions) {
             currentLiIndex = 0;
           }
@@ -140,6 +172,7 @@
           if (!value && !showSuggestions) {
             textBoxHasFocus = false;
             showSuggestions = true;
+            listBoxHasFocus = true;
             currentLiIndex = options.length - 1;
           }
 
@@ -173,7 +206,7 @@
             const foundOption = getSelectedOption(selectedSuggestionItem);
 
             if (foundOption) {
-              value = foundOption.label;
+              value = "";
               showSuggestions = false;
               handleSelectOption(foundOption);
             }
@@ -185,26 +218,28 @@
 
         case "Escape":
           /**
-           * 
-  
-              Closes the listbox.
-              Sets visual focus on the textbox.
-  
-          */
+         * 
+
+            Closes the listbox.
+            Sets visual focus on the textbox.
+
+        */
 
           showSuggestions = false;
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
 
         /**
-             * 
-                Moves visual focus to the next option.
-                If visual focus is on the last option, moves visual focus to the first option.
-                Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-  
-            */
+           * 
+              Moves visual focus to the next option.
+              If visual focus is on the last option, moves visual focus to the first option.
+              Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+          */
 
         case "ArrowDown":
+          listBoxHasFocus = true;
           currentLiIndex += 1;
 
           if (currentLiIndex === suggestionItems.length) {
@@ -213,13 +248,14 @@
           break;
 
         case "ArrowUp":
+          listBoxHasFocus = true;
           /**
-             * 
-                Moves visual focus to the previous option.
-                If visual focus is on the first option, moves visual focus to the last option.
-                Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
-  
-            */
+           * 
+              Moves visual focus to the previous option.
+              If visual focus is on the first option, moves visual focus to the last option.
+              Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
+
+          */
           if (currentLiIndex === 0) {
             currentLiIndex = suggestionItems.length - 1;
           } else {
@@ -228,16 +264,18 @@
           break;
         case "ArrowRight":
           /**
-             * 
-              Moves visual focus to the textbox and moves the editing cursor one character to the right.
-  
-            */
+           * 
+            Moves visual focus to the textbox and moves the editing cursor one character to the right.
+
+          */
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
         case "ArrowLeft":
           /**
            *  	Moves visual focus to the textbox and moves the editing cursor one character to the left.
            */
+          listBoxHasFocus = false;
           textBoxHasFocus = true;
           break;
         default:
@@ -245,11 +283,6 @@
       }
     }
   };
-
-  const handleFocusIn = () => {
-    showSuggestions = true;
-    textBoxHasFocus = false;
-  };
 </script>
 
 <div class="fr-input-group dropdown" class:fr-input-group--error={error}>
@@ -274,6 +307,7 @@
       class:inputOutline={textBoxHasFocus}
       type="text"
       {name}
+      id={name}
       {value}
       required
       role="combobox"
@@ -287,21 +321,23 @@
         ? `suggestion-item-${currentLiIndex}`
         : null}
       on:input={handleInput}
-      on:focus={handleFocusIn}
-      on:focusout
+      on:focus={handleInputFocused}
+      on:focusout={() => {
+        textBoxHasFocus = false;
+        showSuggestions = false;
+      }}
     />
-
-    <slot name="add-item" />
   </div>
 
   <ul
     bind:this={suggestionList}
+    tabindex="-1"
     class:hide={!showSuggestions}
     class="fr-raw-list dropdown--list"
     id={`${name}-suggestions`}
     role="listbox"
     aria-label="Formats de données"
-    class:suggestionlist--focused={!textBoxHasFocus}
+    class:suggestionlist--focused={listBoxHasFocus}
   >
     {#each filteredSuggestions as { label }, index}
       <li
@@ -352,7 +388,12 @@
 
   .dropdown--list {
     width: 100%;
-    height: 100%;
+    max-height: 32vh;
+    overflow: scroll;
+    background-color: var(--grey-1000-75);
+    border: 1px solid var(--background-contrast-grey);
+    box-shadow: 0 0 10px var(--grey-925);
+    z-index: 10;
   }
 
   .dropdown--list-item {
diff --git a/client/src/lib/templates/DatasetListTemplate/DatasetListTemplate.svelte b/client/src/lib/templates/DatasetListTemplate/DatasetListTemplate.svelte
index 8db5ae85..855f3eaa 100644
--- a/client/src/lib/templates/DatasetListTemplate/DatasetListTemplate.svelte
+++ b/client/src/lib/templates/DatasetListTemplate/DatasetListTemplate.svelte
@@ -15,8 +15,6 @@
   export let currentPage: number;
   export let catalogs: Catalog[];
 
-  console.log(catalogs);
-
   const submitSearch = (event: CustomEvent<string>) => {
     const q = event.detail;
     const queryString = toQueryString([["q", q]]);
diff --git a/client/src/lib/transformers/datasetFilters.ts b/client/src/lib/transformers/datasetFilters.ts
index f9c66a1d..13ad6bd4 100644
--- a/client/src/lib/transformers/datasetFilters.ts
+++ b/client/src/lib/transformers/datasetFilters.ts
@@ -6,7 +6,6 @@ import type {
 } from "src/definitions/datasetFilters";
 import type { BoolExtraField, ExtraField } from "src/definitions/extraField";
 import type { QueryParamRecord } from "src/definitions/url";
-import { Maybe } from "../util/maybe";
 
 export const transformRawExtraFieldToBoolExtraField = (
   rawExtraField: any
@@ -109,14 +108,14 @@ export const toFiltersValue = (
   const extraFieldValuesString = searchParams.get("extra_field_values");
 
   return {
-    organizationSiret: searchParams.get("organization_siret"),
-    geographicalCoverage: searchParams.get("geographical_coverage"),
-    service: searchParams.get("service"),
+    organizationSiret: searchParams.get("organization_siret") ?? null,
+    geographicalCoverage: searchParams.get("geographical_coverage") ?? null,
+    service: searchParams.get("service") ?? null,
     formatId: formatId ? parseInt(formatId) : null,
-    technicalSource: searchParams.get("technical_source"),
-    tagId: searchParams.get("tag_id"),
-    license: searchParams.get("license"),
-    extraFieldValues: getExtraFieldValues(extraFieldValuesString),
+    technicalSource: searchParams.get("technical_source") ?? null,
+    tagId: searchParams.get("tag_id") ?? null,
+    license: searchParams.get("license") ?? null,
+    extraFieldValues: getExtraFieldValues(extraFieldValuesString) ?? null,
   };
 };
 
@@ -181,20 +180,17 @@ export const toFiltersButtonTexts = (
   tagIdToName: Record<string, string>,
   formatIdToName: Record<string, string>
 ): {
-  [K in keyof Omit<DatasetFiltersValue, "extraFieldValues">]: Maybe<string>;
+  [K in keyof Omit<DatasetFiltersValue, "extraFieldValues">]: string | null;
 } => {
   return {
-    organizationSiret: Maybe.map(
-      value.organizationSiret,
-      (v) => organizationSiretToName[v]
-    ),
+    organizationSiret: value.organizationSiret
+      ? organizationSiretToName[value.organizationSiret]
+      : null,
     geographicalCoverage: value.geographicalCoverage,
     service: value.service,
-    formatId: Maybe.map(value.formatId, (v) => formatIdToName[v]),
-    tagId: Maybe.map(value.tagId, (v) => tagIdToName[v]),
+    formatId: value.formatId ? formatIdToName[value.formatId] : null,
+    tagId: value.tagId ? tagIdToName[value.tagId] : null,
     technicalSource: value.technicalSource,
-    license: Maybe.map(value.license, (v) =>
-      v === "*" ? "Toutes les licences" : v
-    ),
+    license: value.license === "*" ? "Toutes les licences" : value.license,
   };
 };
diff --git a/client/src/lib/transformers/extraField.ts b/client/src/lib/transformers/extraField.ts
index 74c1c0ac..eacdf5b1 100644
--- a/client/src/lib/transformers/extraField.ts
+++ b/client/src/lib/transformers/extraField.ts
@@ -17,7 +17,7 @@ export const toSelectOption = (extraField: BoolExtraField): SelectOption[] => {
   ];
 };
 
-export const transformEnumExtraFieldToSelectOptoon = (
+export const transformEnumExtraFieldToSelectOption = (
   extraField: EnumExtraField
 ): SelectOption[] => {
   return extraField.data.values.map((item) => {
@@ -27,3 +27,12 @@ export const transformEnumExtraFieldToSelectOptoon = (
     };
   });
 };
+
+export const transformBooleanExtraFieldToSelectOption = (
+  extraField: BoolExtraField
+): SelectOption[] => {
+  return [
+    { label: extraField.data.trueValue, value: extraField.data.trueValue },
+    { label: extraField.data.falseValue, value: extraField.data.falseValue },
+  ];
+};
diff --git a/client/src/lib/util/datasetFilters.test.ts b/client/src/lib/util/datasetFilters.test.ts
new file mode 100644
index 00000000..10428f32
--- /dev/null
+++ b/client/src/lib/util/datasetFilters.test.ts
@@ -0,0 +1,167 @@
+import type {
+  ActiveDatasetFiltersMap,
+  DatasetFiltersInfo,
+  DatasetFiltersValue,
+} from "src/definitions/datasetFilters";
+import { getFakeOrganization } from "src/tests/factories/organizations";
+import { buildFakeTag } from "src/tests/factories/tags";
+import { buildActiveFiltersMap, getActiveFiltersCount } from "./datasetFilters";
+import type { ExtraFieldValue } from "src/definitions/catalogs";
+import type {
+  BoolExtraField,
+  EnumExtraField,
+} from "src/definitions/extraField";
+
+test("buildActiveFiltersMap", () => {
+  const extraField1: EnumExtraField = {
+    id: "1234",
+    name: "my name",
+    title: "my title",
+    hintText: "my-text",
+    type: "ENUM",
+    data: {
+      values: ["my-extra-field"],
+    },
+  };
+
+  const extraField2: BoolExtraField = {
+    id: "4567",
+    name: "my name",
+    title: "my title",
+    hintText: "my-text",
+    type: "BOOL",
+    data: {
+      trueValue: "OUI",
+      falseValue: "NON",
+    },
+  };
+  const filtersInfos: DatasetFiltersInfo = {
+    organizationSiret: [
+      getFakeOrganization({
+        siret: "1234",
+        name: "myorganization",
+      }),
+      getFakeOrganization(),
+    ],
+    geographicalCoverage: ["oversea"],
+    service: ["DGIFP"],
+    formatId: [
+      {
+        name: "XLSX",
+        id: 2,
+      },
+      {
+        name: "CSV",
+        id: 1,
+      },
+    ],
+    technicalSource: ["ADEME"],
+    tagId: [
+      buildFakeTag({
+        id: "122",
+        name: "tata",
+      }),
+    ],
+    extraFields: [extraField1, extraField2],
+    license: ["malicence", "AGPL"],
+  };
+
+  const extraFieldValue1: ExtraFieldValue = {
+    extraFieldId: "1234",
+    value: "my-extra-field",
+  };
+
+  const extraFieldValue2: ExtraFieldValue = {
+    extraFieldId: "4567",
+    value: "Non",
+  };
+
+  const filtersValue: DatasetFiltersValue = {
+    organizationSiret: "1234",
+    geographicalCoverage: "oversea",
+    service: "DGIFP",
+    formatId: 2,
+    technicalSource: "ADEME",
+    tagId: "122",
+    license: "AGPL",
+    extraFieldValues: [extraFieldValue1, extraFieldValue2],
+  };
+
+  const expectedResult: ActiveDatasetFiltersMap = {
+    organizationSiret: {
+      key: "Catalogue",
+      value: "myorganization",
+    },
+    geographicalCoverage: {
+      key: "Couverture géopgraphique",
+      value: "oversea",
+    },
+    service: {
+      key: "Service Producteur de la donnée",
+      value: "DGIFP",
+    },
+    formatId: {
+      key: "Format de mise à disposition",
+      value: "XLSX",
+    },
+    technicalSource: {
+      key: "Système d’information source",
+      value: "ADEME",
+    },
+    tagId: {
+      key: "Mot-clé",
+      value: "tata",
+    },
+    license: {
+      key: "Licence",
+      value: "AGPL",
+    },
+    extraFieldValues: [
+      {
+        id: extraField1.id,
+        key: extraField1.title,
+        value: extraFieldValue1.value,
+      },
+      {
+        id: extraField2.id,
+        key: extraField2.title,
+        value: extraFieldValue2.value,
+      },
+    ],
+  };
+
+  const result = buildActiveFiltersMap(filtersInfos, filtersValue);
+
+  expect(expectedResult).toEqual(result);
+});
+
+test("getActiveFiltersMap", () => {
+  const map: ActiveDatasetFiltersMap = {
+    organizationSiret: {
+      key: "Catalogue",
+      value: "myorganization",
+    },
+    geographicalCoverage: {
+      key: "Couverture géopgraphique",
+      value: "oversea",
+    },
+    service: {
+      key: "Service Producteur de la donnée",
+      value: "DGIFP",
+    },
+    extraFieldValues: [
+      {
+        key: "my extra field",
+        value: 66,
+      },
+      {
+        key: "myExtra field 2",
+        value: "67",
+      },
+    ],
+  };
+
+  const result = getActiveFiltersCount(map);
+
+  expect(result).toEqual(5);
+});
diff --git a/client/src/lib/util/datasetFilters.ts b/client/src/lib/util/datasetFilters.ts
new file mode 100644
index 00000000..6e2c9b5c
--- /dev/null
+++ b/client/src/lib/util/datasetFilters.ts
@@ -0,0 +1,120 @@
+import type { ExtraFieldValue } from "src/definitions/catalogs";
+import type {
+  ActiveDatasetFiltersMap,
+  BasicMap,
+  DatasetFiltersInfo,
+  DatasetFiltersValue,
+} from "src/definitions/datasetFilters";
+import type { ExtraField } from "src/definitions/extraField";
+
+const getExtraFieldValuesFiltersMap = (
+  extraFields: ExtraField[],
+  extraFieldValues: ExtraFieldValue[]
+): BasicMap[] => {
+  return extraFieldValues.reduce((prev, next) => {
+    const foundExtraField = extraFields.find(
+      (item) => item.id === next.extraFieldId
+    );
+
+    if (!foundExtraField) {
+      return prev;
+    }
+    return [
+      ...prev,
+      {
+        id: foundExtraField.id,
+        key: foundExtraField.title,
+        value: next.value,
+      },
+    ];
+  }, [] as BasicMap[]);
+};
+
+export const buildActiveFiltersMap = (
+  filtersInfo: DatasetFiltersInfo,
+  filtersValue: DatasetFiltersValue
+): ActiveDatasetFiltersMap => {
+  const foundOrganization = filtersInfo.organizationSiret.find(
+    (item) => item.siret === filtersValue.organizationSiret
+  );
+  const foundFormat = filtersInfo.formatId.find(
+    (item) => item.id === filtersValue.formatId
+  );
+  const foundTag = filtersInfo.tagId.find(
+    (item) => item.id === filtersValue.tagId
+  );
+  return {
+    organizationSiret: foundOrganization
+      ? {
+          key: "Catalogue",
+          value: foundOrganization?.name,
+        }
+      : undefined,
+    geographicalCoverage: filtersValue.geographicalCoverage
+      ? {
+          key: "Couverture géopgraphique",
+          value: filtersValue.geographicalCoverage,
+        }
+      : undefined,
+    service: filtersValue.service
+      ? {
+          key: "Service Producteur de la donnée",
+          value: filtersValue.service,
+        }
+      : undefined,
+    formatId: foundFormat
+      ? {
+          key: "Format de mise à disposition",
+          value: foundFormat?.name,
+        }
+      : undefined,
+    technicalSource: filtersValue.technicalSource
+      ? {
+          key: "Système d’information source",
+          value: filtersValue.technicalSource,
+        }
+      : undefined,
+    tagId: foundTag
+      ? {
+          key: "Mot-clé",
+          value: foundTag?.name,
+        }
+      : undefined,
+    license: filtersValue.license
+      ? {
+          key: "Licence",
+          value: filtersValue.license,
+        }
+      : undefined,
+    extraFieldValues: filtersValue.extraFieldValues
+      ? getExtraFieldValuesFiltersMap(
+          filtersInfo.extraFields,
+          filtersValue.extraFieldValues
+        )
+      : undefined,
+  };
+};
+
+export const getActiveFiltersCount = (map: ActiveDatasetFiltersMap): number => {
+  return Object.entries(map).reduce((prev, next) => {
+    if (!next[1]) {
+      return prev;
+    }
+    if (Array.isArray(next[1])) {
+      return next[1].length + prev;
+    }
+    return 1 + prev;
+  }, 0);
+};
+
+export const removeNonExistingFiltersValue = (
+  filtersValues: DatasetFiltersValue
+): DatasetFiltersValue => {
+  return Object.entries(filtersValues).reduce((prev, next) => {
+    if (next[1]) {
+      return { ...prev, [next[0]]: next[1] };
+    }
+
+    return prev;
+  }, {} as DatasetFiltersValue);
+};
diff --git a/client/src/routes/(app)/fiches/[id]/+page.ts b/client/src/routes/(app)/fiches/[id]/+page.ts
index f45a4376..506bc0f4 100644
--- a/client/src/routes/(app)/fiches/[id]/+page.ts
+++ b/client/src/routes/(app)/fiches/[id]/+page.ts
@@ -26,9 +26,9 @@ export const load: PageLoad = async ({ fetch, params }) => {
     );
 
     return {
-      title: `${
+      title: `${SITE_TITLE} -  ${
         Maybe.Some(dataset) ? dataset.title : "Fiche de jeu de données"
-      } - ${SITE_TITLE}`,
+      }`,
       catalog,
       dataset,
     };
diff --git a/client/src/routes/(app)/fiches/search/+page.svelte b/client/src/routes/(app)/fiches/search/+page.svelte
index de5cdafb..def58865 100644
--- a/client/src/routes/(app)/fiches/search/+page.svelte
+++ b/client/src/routes/(app)/fiches/search/+page.svelte
@@ -5,7 +5,6 @@
   import SearchForm from "$lib/components/SearchForm/SearchForm.svelte";
   import { patchQueryString } from "$lib/util/urls";
   import { Maybe } from "$lib/util/maybe";
-  import { pluralize } from "src/lib/util/format";
   import FilterPanel from "./_FilterPanel.svelte";
   import PaginationContainer from "$lib/components/PaginationContainer/PaginationContainer.svelte";
   import {
@@ -16,6 +15,12 @@
   import { page as pageStore } from "$app/stores";
   import type { PageData } from "./$types";
   import { onMount } from "svelte";
+  import TextSearchFilter from "src/lib/components/SearchFilter/TextSearchFilter.svelte";
+  import {
+    buildActiveFiltersMap,
+    getActiveFiltersCount,
+    removeNonExistingFiltersValue,
+  } from "src/lib/util/datasetFilters";
 
   export let data: PageData;
 
@@ -23,6 +28,12 @@
 
   let displayFilters = false;
 
+  export let catalogButtonText = "";
+
+  $: activeFiltersMap = buildActiveFiltersMap(filtersInfo, filtersValue);
+
+  $: activeFiltersCount = getActiveFiltersCount(activeFiltersMap);
+
   onMount(() => {
     const searchParams = $pageStore.url.searchParams;
     const filtersParams = toFiltersValue(searchParams);
@@ -38,14 +49,35 @@
     goto(href, { noscroll: true });
   };
 
-  const handleFilterChange = async (e: CustomEvent<DatasetFiltersValue>) => {
+  const handleFilterChange = async (filtersValues: DatasetFiltersValue) => {
     const href = patchQueryString($pageStore.url.searchParams, [
-      ...toFiltersParams(e.detail),
+      ...toFiltersParams(removeNonExistingFiltersValue(filtersValues)),
       makePageParam(1),
     ]);
-
     goto(href, { noscroll: true });
   };
+
+  const handleClickActiveFilter = (key: string) => {
+    handleFilterChange({
+      ...filtersValue,
+      [key]: null,
+    });
+  };
+
+  const handleClickExtraFieldActiveFilter = (extrafieldId?: string) => {
+    if (!filtersValue.extraFieldValues || !extrafieldId) {
+      return;
+    }
+
+    const newExtraFieldsValues = filtersValue.extraFieldValues.filter(
+      (item) => item.extraFieldId !== extrafieldId
+    );
+
+    handleFilterChange({
+      ...filtersValue,
+      extraFieldValues: newExtraFieldsValues,
+    });
+  };
 </script>
 
 <section class="fr-background-alt--grey fr-mb-6w">
@@ -59,31 +91,100 @@
 
 <section class="fr-container">
   {#if Maybe.Some(paginatedDatasets)}
-    <div class="fr-grid-row summary">
-      <div class="fr-col-12 fr-pb-1w summary__header">
-        <h2>
-          {paginatedDatasets.totalItems}
-          {pluralize(
-            paginatedDatasets.totalItems,
-            "fiche de données",
-            "fiches de données"
-          )}
-        </h2>
+    <div class="fr-grid-row fr-pb-2w bottom_line">
+      <div class="fr-col-7">
+        <TextSearchFilter
+          higlighted
+          label="Catalogue"
+          options={filtersInfo.organizationSiret.map(({ name, siret }) => ({
+            label: name,
+            value: siret,
+          }))}
+          buttonText={filtersValue.organizationSiret
+            ? catalogButtonText
+            : "Rechercher..."}
+          on:selectOption={(e) => {
+            if (!e.detail.value) {
+              handleFilterChange({
+                organizationSiret: null,
+                geographicalCoverage: null,
+                service: null,
+                formatId: null,
+                technicalSource: null,
+                tagId: null,
+                license: null,
+                extraFieldValues: null,
+              });
+              catalogButtonText = "";
+              return;
+            }
+
+            catalogButtonText = e.detail.label;
+            handleFilterChange({
+              organizationSiret: e.detail.value.toString(),
+              geographicalCoverage: null,
+              service: null,
+              formatId: null,
+              technicalSource: null,
+              tagId: null,
+              license: null,
+              extraFieldValues: null,
+            });
+          }}
+        />
+      </div>
 
+      <div class="fr-col-5 summary__header__buttons">
         <button
           on:click={() => (displayFilters = !displayFilters)}
           class="fr-btn fr-btn--secondary fr-btn--icon-right"
           class:fr-icon-arrow-down-s-line={!displayFilters}
           class:fr-icon-arrow-up-s-line={displayFilters}
         >
-          Affiner la recherche
+          Affiner la recherche {activeFiltersCount > 0
+            ? `(${activeFiltersCount})`
+            : ""}
         </button>
       </div>
     </div>
 
+    {#if activeFiltersCount > 0}
+      <div class="fr-grid-row fr-py-2w bottom_line">
+        <div class="fr-col-12">
+          <h4 class="fr-h6">Filtres actifs</h4>
+          <div role="list">
+            {#each Object.entries(activeFiltersMap) as [key, map]}
+              {#if map}
+                {#if Array.isArray(map)}
+                  {#each map as mapItem}
+                    <button
+                      class="fr-tag fr-icon-close-line fr-tag--icon-left"
+                      aria-label={`Retirer ${mapItem.key} : ${mapItem.value}`}
+                      on:click|preventDefault={() =>
+                        handleClickExtraFieldActiveFilter(mapItem.id)}
+                    >
+                      {`${mapItem.key} : ${mapItem.value}`}
+                    </button>
+                  {/each}
+                {:else}
+                  <button
+                    class="fr-tag fr-icon-close-line fr-tag--icon-left"
+                    aria-label={`Retirer ${map.key} : ${map.value}`}
+                    on:click|preventDefault={() => handleClickActiveFilter(key)}
+                  >
+                    {`${map.key} : ${map.value}`}
+                  </button>
+                {/if}
+              {/if}
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
+
     {#if Maybe.Some(filtersInfo) && displayFilters}
       <FilterPanel
-        on:change={handleFilterChange}
+        on:change={(e) => handleFilterChange(e.detail)}
         info={filtersInfo}
         value={filtersValue}
       />
@@ -103,17 +204,19 @@
 </section>
 
 <style>
-  .summary__header {
-    border-bottom: 1px solid var(--border-default-grey);
+  .summary__header__buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
   }
 
-  h2 {
-    padding: 0;
+  .fr-btn {
+    height: 50px;
   }
 
-  .summary__header {
+  div[role="list"] {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
   }
 </style>
diff --git a/client/src/routes/(app)/fiches/search/+page.ts b/client/src/routes/(app)/fiches/search/+page.ts
index 5e2cccfd..273727ed 100644
--- a/client/src/routes/(app)/fiches/search/+page.ts
+++ b/client/src/routes/(app)/fiches/search/+page.ts
@@ -28,7 +28,7 @@ export const load: PageLoad = async ({ fetch, url }) => {
   ]);
 
   return {
-    title: `Rechercher un jeu de données - ${SITE_TITLE}`,
+    title: `${SITE_TITLE} - Rechercher un jeu de données`,
     paginatedDatasets,
     filtersInfo,
     filtersValue,
diff --git a/client/src/routes/(app)/fiches/search/_FilterPanel.svelte b/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
index a412f18c..362a494d 100644
--- a/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
+++ b/client/src/routes/(app)/fiches/search/_FilterPanel.svelte
@@ -5,20 +5,23 @@
     DatasetFiltersInfo,
     DatasetFiltersValue,
   } from "src/definitions/datasetFilters";
+  import type {
+    BoolExtraField,
+    EnumExtraField,
+  } from "src/definitions/extraField";
 
   import type { SelectOption } from "src/definitions/form";
   import type { Organization } from "src/definitions/organization";
   import type { Tag } from "src/definitions/tag";
 
-  import BooleanSearchFilter from "src/lib/components/SearchFilter/BooleanSearchFilter.svelte";
   import TextSearchFilter from "src/lib/components/SearchFilter/TextSearchFilter.svelte";
   import {
     toFiltersButtonTexts,
     toFiltersOptions,
   } from "src/lib/transformers/datasetFilters";
   import {
-    toSelectOption,
-    transformEnumExtraFieldToSelectOptoon,
+    transformBooleanExtraFieldToSelectOption,
+    transformEnumExtraFieldToSelectOption,
   } from "src/lib/transformers/extraField";
   import { createEventDispatcher } from "svelte";
 
@@ -61,15 +64,21 @@
 
   const dispatch = createEventDispatcher<{ change: DatasetFiltersValue }>();
 
+  const getExtraFieldButtonText = (
+    extraField: BoolExtraField | EnumExtraField
+  ) => {
+    const result = value.extraFieldValues?.find(
+      (item) => item.extraFieldId === extraField.id
+    );
+
+    return result?.value;
+  };
+
   const handleSelectFilter = <K extends keyof DatasetFiltersValue>(
     key: K,
-    e: CustomEvent<SelectOption<any> | null>
+    e: CustomEvent<SelectOption<any>>
   ) => {
-    if (key === "organizationSiret" && !e.detail?.value) {
-      value.extraFieldValues = null;
-    }
-
-    value[key] = e.detail?.value || null;
+    value[key] = e.detail?.value;
     dispatch("change", value);
   };
 
@@ -87,23 +96,27 @@
     return extraFieldValues.some((item) => item.extraFieldId === id);
   };
 
-  const handleRadioButtonChange = (extraFieldId: string, event: Event) => {
-    const value = (event.target as HTMLInputElement).value;
-
-    handleExtraFieldValueChange(extraFieldId, value);
-  };
-
   const handleExtraFieldValueChange = (
     extraFieldId: string,
     valueFromInput: string | null
   ) => {
     let newExtraFieldValues: ExtraFieldValue[] = [];
 
-    if (!valueFromInput) {
-      return;
-    }
-
     if (value.extraFieldValues) {
+      if (!valueFromInput) {
+        const filteredExtraFields = value.extraFieldValues.filter(
+          (item) => item.extraFieldId !== extraFieldId
+        );
+
+        value = {
+          ...value,
+          extraFieldValues: filteredExtraFields,
+        };
+
+        dispatch("change", value);
+
+        return;
+      }
       if (hasAlreadyTheFilter(value.extraFieldValues, extraFieldId)) {
         const filteredExtraFields = removeExistingExtraFieldValue(
           value.extraFieldValues,
@@ -114,7 +127,7 @@
           ...filteredExtraFields,
           {
             extraFieldId: extraFieldId,
-            value: valueFromInput,
+            value: valueFromInput ?? "",
           },
         ];
       } else {
@@ -122,7 +135,7 @@
           ...value.extraFieldValues,
           {
             extraFieldId: extraFieldId,
-            value: valueFromInput,
+            value: valueFromInput ?? "",
           },
         ];
       }
@@ -132,7 +145,7 @@
       newExtraFieldValues = [
         {
           extraFieldId: extraFieldId,
-          value: valueFromInput,
+          value: valueFromInput ?? "",
         },
       ];
     }
@@ -146,102 +159,103 @@
   };
 </script>
 
-<div data-test-id="filter-panel" class="filter-row fr-mt-2w">
-  <section class="filter-col">
-    <h6>Informations générales</h6>
-
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Couverture géographique"
-        options={filtersOptions.geographicalCoverage}
-        buttonText={buttonTexts.geographicalCoverage}
-        on:selectOption={(e) => handleSelectFilter("geographicalCoverage", e)}
-      />
-    </div>
-
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Service producteur de la donnée"
-        options={filtersOptions.service}
-        buttonText={buttonTexts.service}
-        on:selectOption={(e) => handleSelectFilter("service", e)}
-      />
-    </div>
-
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Licence de réutilisation"
-        options={filtersOptions.license}
-        buttonText={buttonTexts.license}
-        on:selectOption={(e) => handleSelectFilter("license", e)}
-      />
-    </div>
-
-    <h6 class="fr-mt-3w">Catalogues</h6>
-
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Catalogue"
-        options={filtersOptions.organizationSiret}
-        buttonText={buttonTexts.organizationSiret}
-        on:selectOption={(e) => handleSelectFilter("organizationSiret", e)}
-      />
-    </div>
-  </section>
-
-  <section class="filter-col">
-    <h6>Sources et formats</h6>
+<div data-test-id="filter-panel" class="fr-mt-2w">
+  <section class="">
+    <h3 class="fr-h6">Champs communs</h3>
+
+    <div class="fr-grid-row fr-grid-row--gutters">
+      <div class="fr-col-4">
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Couverture géographique"
+            options={filtersOptions.geographicalCoverage}
+            selected={!!buttonTexts.geographicalCoverage}
+            buttonText={buttonTexts.geographicalCoverage}
+            on:selectOption={(e) =>
+              handleSelectFilter("geographicalCoverage", e)}
+          />
+        </div>
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Service producteur de la donnée"
+            selected={!!buttonTexts.service}
+            options={filtersOptions.service}
+            buttonText={buttonTexts.service}
+            on:selectOption={(e) => handleSelectFilter("service", e)}
+          />
+        </div>
 
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Format de mise à disposition"
-        options={filtersOptions.formatId}
-        buttonText={buttonTexts.formatId}
-        on:selectOption={(e) => handleSelectFilter("formatId", e)}
-      />
-    </div>
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Licence de réutilisation"
+            options={filtersOptions.license}
+            selected={!!buttonTexts.license}
+            buttonText={buttonTexts.license}
+            on:selectOption={(e) => handleSelectFilter("license", e)}
+          />
+        </div>
+      </div>
+
+      <div class="fr-col-4">
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Format de mise à disposition"
+            options={filtersOptions.formatId}
+            selected={!!buttonTexts.formatId}
+            buttonText={buttonTexts.formatId}
+            on:selectOption={(e) => handleSelectFilter("formatId", e)}
+          />
+        </div>
 
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Système d'information source"
-        options={filtersOptions.technicalSource}
-        buttonText={buttonTexts.technicalSource}
-        on:selectOption={(e) => handleSelectFilter("technicalSource", e)}
-      />
-    </div>
-  </section>
-  <section class="filter-col">
-    <h6>Mots-clés thématiques</h6>
-
-    <div class="fr-mb-2w">
-      <TextSearchFilter
-        label="Mot-clé"
-        options={filtersOptions.tagId}
-        buttonText={buttonTexts.tagId}
-        on:selectOption={(e) => handleSelectFilter("tagId", e)}
-      />
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Système d'information source"
+            options={filtersOptions.technicalSource}
+            buttonText={buttonTexts.technicalSource}
+            selected={!!buttonTexts.technicalSource}
+            on:selectOption={(e) => handleSelectFilter("technicalSource", e)}
+          />
+        </div>
+      </div>
+
+      <div class="fr-col-4">
+        <div class="fr-mb-2w">
+          <TextSearchFilter
+            label="Mot-clé"
+            options={filtersOptions.tagId}
+            buttonText={buttonTexts.tagId}
+            selected={!!buttonTexts.tagId}
+            on:selectOption={(e) => handleSelectFilter("tagId", e)}
+          />
+        </div>
+      </div>
     </div>
   </section>
 </div>
+
 {#if info.extraFields.length > 0}
-  <section class="fr-mt-2w">
+  <section class="fr-my-2w bottom_line-">
     <h6>Champs complémentaires</h6>
     <div class="filter-row">
       {#each extraFields as extraField}
-        <div class="filter-col">
+        <div class="filter-col fr-mt-2w">
           {#if extraField.type === "BOOL"}
-            <BooleanSearchFilter
-              name={extraField.name}
-              options={toSelectOption(extraField)}
+            <TextSearchFilter
               label={extraField.title}
-              on:change={(e) => handleRadioButtonChange(extraField.id, e)}
+              options={transformBooleanExtraFieldToSelectOption(extraField)}
+              buttonText={getExtraFieldButtonText(extraField)}
+              selected={!!getExtraFieldButtonText(extraField)}
+              on:selectOption={(e) =>
+                handleExtraFieldValueChange(extraField.id, `${e.detail.value}`)}
             />
           {/if}
 
           {#if extraField.type === "ENUM"}
             <TextSearchFilter
               label={extraField.title}
-              options={transformEnumExtraFieldToSelectOptoon(extraField)}
+              buttonText={getExtraFieldButtonText(extraField)}
+              selected={!!getExtraFieldButtonText(extraField)}
+              options={transformEnumExtraFieldToSelectOption(extraField)}
               on:selectOption={(e) =>
                 handleExtraFieldValueChange(extraField.id, `${e.detail.value}`)}
             />
diff --git a/client/src/tests/e2e/a11y.spec.ts b/client/src/tests/e2e/a11y.spec.ts
index 2e2d7210..a91e87c4 100644
--- a/client/src/tests/e2e/a11y.spec.ts
+++ b/client/src/tests/e2e/a11y.spec.ts
@@ -46,4 +46,15 @@ test.describe("accessibilty - pages with required authentication", () => {
     const accessibilityScanResults = await makeAxeBuilder().analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
+
+  test.use({ storageState: STATE_AUTHENTICATED });
+  test("search page should not have any automatically detectable accessibility issues", async ({
+    page,
+    makeAxeBuilder,
+  }) => {
+    await page.goto("/fiches/search");
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
 });
diff --git a/client/src/tests/e2e/contribuer.spec.ts b/client/src/tests/e2e/contribuer.spec.ts
index 64ae1e94..3e12f106 100644
--- a/client/src/tests/e2e/contribuer.spec.ts
+++ b/client/src/tests/e2e/contribuer.spec.ts
@@ -24,7 +24,7 @@ test.describe("Basic form submission", () => {
 
     await page.goto("/contribuer");
     await expect(page).toHaveTitle(
-      "Contribuer une fiche de jeu de données - catalogue.data.gouv.fr"
+      "Contribuer une fiche de jeu de données - Catalogue"
     );
 
     await page.locator("text=Ministère de la Culture").waitFor();
diff --git a/client/src/tests/e2e/datapass.spec.ts b/client/src/tests/e2e/datapass.spec.ts
index fca359db..b754678f 100644
--- a/client/src/tests/e2e/datapass.spec.ts
+++ b/client/src/tests/e2e/datapass.spec.ts
@@ -8,7 +8,7 @@ test.describe("Datapass", () => {
   }) => {
     await page.goto("/auth/datapass/create-organization");
     await expect(page).toHaveTitle(
-      "Connexion avec MonComptePro : aucune organisation enregistrée - catalogue.data.gouv.fr"
+      "Connexion avec MonComptePro : aucune organisation enregistrée - Catalogue"
     );
 
     await page
@@ -52,7 +52,7 @@ test.describe("Datapass", () => {
       )}`
     );
     await expect(page).toHaveTitle(
-      "Connexion avec MonComptePro : choisir une organisation - catalogue.data.gouv.fr"
+      "Connexion avec MonComptePro : choisir une organisation - Catalogue"
     );
 
     await page
diff --git a/client/src/tests/e2e/details.spec.ts b/client/src/tests/e2e/details.spec.ts
index 7994504f..1e8c5a59 100644
--- a/client/src/tests/e2e/details.spec.ts
+++ b/client/src/tests/e2e/details.spec.ts
@@ -8,9 +8,7 @@ test.describe("Dataset details", () => {
 
     test("Displays dataset details", async ({ page, dataset }) => {
       await page.goto(`/fiches/${dataset.id}`);
-      await expect(page).toHaveTitle(
-        `${dataset.title} - catalogue.data.gouv.fr`
-      );
+      await expect(page).toHaveTitle(`Catalogue - ${dataset.title}`);
 
       const title = page.locator("h1");
       await expect(title).toHaveText(dataset.title);
diff --git a/client/src/tests/e2e/edit.spec.ts b/client/src/tests/e2e/edit.spec.ts
index b9d9e48a..6c19fbac 100644
--- a/client/src/tests/e2e/edit.spec.ts
+++ b/client/src/tests/e2e/edit.spec.ts
@@ -15,7 +15,7 @@ test.describe("Edit dataset", () => {
   test("Visits the edit page", async ({ page, dataset }) => {
     await page.goto(`/fiches/${dataset.id}/edit`);
     await expect(page).toHaveTitle(
-      "Modifier la fiche de jeu de données - catalogue.data.gouv.fr"
+      "Modifier la fiche de jeu de données - Catalogue"
     );
 
     await page.locator("text=Ministère de la Culture").waitFor();
diff --git a/client/src/tests/e2e/home.spec.ts b/client/src/tests/e2e/home.spec.ts
index 8ca4d8ab..36d9f773 100644
--- a/client/src/tests/e2e/home.spec.ts
+++ b/client/src/tests/e2e/home.spec.ts
@@ -5,7 +5,7 @@ import { test } from "./fixtures.js";
 test.describe("Landing Page", () => {
   test("Visits the home page without being logged in", async ({ page }) => {
     await page.goto("/");
-    await expect(page).toHaveTitle("Accueil - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Accueil - Catalogue");
     await page
       .locator(
         "text=Bienvenue sur le service de catalogage de données de l’État"
diff --git a/client/src/tests/e2e/login.spec.ts b/client/src/tests/e2e/login.spec.ts
index cac3b867..b979e1a7 100644
--- a/client/src/tests/e2e/login.spec.ts
+++ b/client/src/tests/e2e/login.spec.ts
@@ -20,7 +20,7 @@ test.describe("Login", () => {
 
   test("Logs in", async ({ page }) => {
     await page.goto("/login");
-    await expect(page).toHaveTitle("Connexion - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Connexion - Catalogue");
 
     const email = page.locator("form [name=email]");
     await email.fill(TEST_EMAIL);
diff --git a/client/src/tests/e2e/search.spec.ts b/client/src/tests/e2e/search.spec.ts
index 71601cf1..d28c58a2 100644
--- a/client/src/tests/e2e/search.spec.ts
+++ b/client/src/tests/e2e/search.spec.ts
@@ -40,9 +40,7 @@ test.describe("Search", () => {
 
   test("Search page meta", async ({ page }) => {
     await page.goto("/fiches/search");
-    await expect(page).toHaveTitle(
-      "Rechercher un jeu de données - catalogue.data.gouv.fr"
-    );
+    await expect(page).toHaveTitle("Catalogue - Rechercher un jeu de données");
   });
 
   test("Performs a search from the home page", async ({ page, dataset }) => {
@@ -55,9 +53,6 @@ test.describe("Search", () => {
     expect(items[0].title).toBe(dataset.title);
 
     await expect(page).toHaveURL("/fiches/search?q=title");
-    await page
-      .locator(`text=/${items.length} fiche(s)? de données/i`)
-      .waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
   });
 
@@ -94,9 +89,6 @@ test.describe("Search", () => {
     expect(items[0].title).toBe(dataset.title);
 
     await expect(page).toHaveURL("/fiches/search?q=title&page=1");
-    await page
-      .locator(`text=/${items.length} fiche(s)? de données/i`)
-      .waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
 
     // Second search. Aim at getting no results.
@@ -123,7 +115,6 @@ test.describe("Search", () => {
     await page.goto(`/fiches/search?q=${dataset.title}`);
     const search = page.locator("form [name=q]");
     expect(await search.inputValue()).toBe(dataset.title);
-    await page.locator(`text=/fiche(s)? de données/i`).waitFor();
     await page.locator(`:has-text('${dataset.title}')`).first().waitFor();
   });
 
@@ -143,17 +134,12 @@ test.describe("Search filters", () => {
 
     const filterPanel = page.locator("[data-test-id='filter-panel']");
 
-    expect(await filterPanel.locator("h6").count()).toBe(4);
-    await filterPanel.locator("text=Informations générales").waitFor();
-    await filterPanel.locator("text=Catalogues").waitFor();
-    await filterPanel.locator("text=Sources et formats").waitFor();
-    await filterPanel.locator("text=Mots-clés thématiques").waitFor();
+    await filterPanel.locator("text=Champs communs").waitFor();
 
-    expect(await filterPanel.locator("button").count()).toBe(7);
+    expect(await filterPanel.locator("button").count()).toBe(6);
     await filterPanel.locator("text=Couverture géographique").waitFor();
     await filterPanel.locator("text=Service producteur de la donnée").waitFor();
     await filterPanel.locator("text=Licence de réutilisation").waitFor();
-    await filterPanel.locator("text='Catalogue'").waitFor();
     await filterPanel.locator("text=Format de mise à disposition").waitFor();
     await filterPanel.locator("text=Système d'information source").waitFor();
     await filterPanel.locator("text=Mot-clé").waitFor();
diff --git a/client/src/tests/e2e/static.spec.ts b/client/src/tests/e2e/static.spec.ts
index f62aea64..29fb8f96 100644
--- a/client/src/tests/e2e/static.spec.ts
+++ b/client/src/tests/e2e/static.spec.ts
@@ -6,7 +6,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Mentions légales");
 
-    await expect(page).toHaveTitle("Mentions légales - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Mentions légales - Catalogue");
     await expect(
       page.locator("role=heading[level=1] >> text=Mentions légales")
     ).toBeVisible();
@@ -16,7 +16,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Vie privée");
 
-    await expect(page).toHaveTitle("Vie privée - catalogue.data.gouv.fr");
+    await expect(page).toHaveTitle("Vie privée - Catalogue");
     await expect(
       page.locator("role=heading[level=1] >> text=Vie privée")
     ).toBeVisible();
@@ -26,9 +26,7 @@ test.describe("Static pages", () => {
     await page.goto("/");
     await page.click("text=Accessibilité: non conforme");
 
-    await expect(page).toHaveTitle(
-      "Déclaration accessibilité  - catalogue.data.gouv.fr"
-    );
+    await expect(page).toHaveTitle("Déclaration accessibilité  - Catalogue");
   });
 
   test("Visits the '404' page", async ({ page }) => {
diff --git a/server/api/app.py b/server/api/app.py
index 7b51bfb8..e47f1207 100644
--- a/server/api/app.py
+++ b/server/api/app.py
@@ -26,7 +26,7 @@ def create_app(settings: Settings = None) -> App:
 
     app = App(
         debug=settings.debug,
-        title="API - catalogue.data.gouv.fr",
+        title="API - Catalogue",
         version="0.1.0",  # Required by FastAPI, but meaningless for now.
         docs_url=settings.docs_url,
     )