# Toolbar Keywords — Finale (B) — référence design

Source : Claude Design, projet « Seo Insight web » (aaebf927-2194-4595-a144-f4e6c8217f72),
fichiers « Toolbar Keywords - Finale (B).html » (retenu) et « Toolbar Keywords - Variantes.html » (notes d'intention).

Chantier commun aux pages **Recherche, Réservoir, Planning** (keywords). Décisions produit
(validées 2026-07-16) : filtres **instantanés** (le « Appliquer » du mock devient « Fermer »),
onglet « Quick-wins GSC » **différé**, palette = **tokens shadcn existants** (on reprend la
structure du mock, pas sa peinture orange), livraison **Recherche d'abord**, puis réservoir,
puis planning, validation visuelle entre chaque slice.

## Structure cible (de haut en bas)

1. **Onglets de vue** (Recherche) : `Tous (N) · Shortlist (N) · Exclus (N)` — tabs soulignés
   avec compteurs en badge. Remplacent les dialogs Shortlist/Exclus du menu « ⋯ ».
   (« Quick-wins GSC » viendra plus tard.)

2. **Toolbar une rangée** :
   - Recherche ⌘K (existant).
   - **Pill « Filtres » unique** avec badge compteur → panneau ~560 px, grille 2 colonnes de
     lignes-facettes : Thèmes / Statut / Intents / Langue / Pays / GSC / Source / Plages.
     Chaque ligne affiche sa valeur courante (« Tous », « EN », « — ») et ouvre le contrôle
     de facette existant ; bordure bleue quand la facette est active. Application immédiate
     (URL). Footer : « Tout réinitialiser » + « Fermer ».
   - Spacer.
   - **Importer** (bouton bleu) → menu riche (icône-tuile + titre + description) :
     Ajouter un mot-clé / Importer un CSV / Importer depuis GSC.
   - **Sync** (bouton avec pastille d'état en haut-droite) → menu riche :
     « Synchroniser GSC » + « Enrichir via SE-Ranking » (grisé sans sélection, hint
     dynamique « … — N sélectionné(s) ») ; footer « Dernière sync GSC : il y a 2 h ·
     SE-Ranking : hier 18:04 » avec point vert.
   - Séparateur vertical, segment **Liste/Matrice**, icône **Colonnes**, icône **Exporter**
     → menu : « CSV complet — tous les résultats filtrés (N) » / « Export enrichissement… ».

3. **Rangée « Filtres actifs »** : chips (existant) + « Tout effacer ».

4. **Rangée résultats/pagination** (existant).

5. **Barre de sélection FLOTTANTE** : `position:fixed`, centrée bas (`bottom:26px`),
   translateY + opacity animés, ombre portée. Contenu Recherche :
   `N sélectionné(s) · Sélectionner les N filtrés · | · Pays cibles… · Cibler · Exclure ·
   + Shortlist · → Planning · → Contenu… · Enrichir (violet, = sync SE-Ranking de la
   sélection) · | · Exporter ▾ (CSV de la sélection / Export enrichissement…) · Annuler`.
   Le menu Exporter s'ouvre vers le HAUT (bottom-anchored).

## Notes d'intention (fichier Variantes)

- Le bouton « Synchroniser GSC » standalone disparaît (doublon) → menu Sync.
- « Sync SE-Ranking » devient **Enrichir** dans la barre de sélection (action sur la sélection).
- Le menu « ⋯ » est **dissous** : exports → icône ⬆ + barre de sélection ; Shortlist/Exclus →
  onglets de vue ; **tri par opportunité → en-têtes de colonnes**.
- Zéro doublon : chaque action n'existe qu'à un seul endroit.

## Population des exports (rappel, déjà en prod)

- Toolbar → « CSV complet » : les résultats **filtrés** (cap 20 000).
- Barre de sélection → « CSV de la sélection » : la **sélection**.
- « Export enrichissement… » : dialog avec portées (sélection / >1 semaine / >1 mois /
  jamais synchro — les périmés incluent les jamais-synchro), inchangé.