feat: rework search filter order

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

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.";

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<

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}

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

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>

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}

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"