Recherche partout (#68, chantier 2+3) : onglets, Tout voir sur place, focus, mise en page

app/templates/recherche.html

@@ -2,17 +2,30 @@
 {% block title_prefix %}Rechercher partout{% endblock %}
 {% block content %}
 <link rel="stylesheet" href="/static/css/recherche.css">
+{# Console : pas de data-base-console ici — la route Flowdeck de /recherche
+   n'expose pas la base agent dans son contexte `bases` ; recherche.js
+   dérive donc la base console (hôte -dev -> agent-dev, sinon prod) ou
+   reprend le href d'un onglet de barre console/spark quand il existe.
+   Les 3 autres hôtes rendent data-base-console explicitement. #}
 <main class="rp-page" id="recherche" data-host="flowdeck"
       data-base-obsigate="{{ bases.obsigate }}"
       data-base-flowdeck="{{ bases.flowdeck }}"
       data-base-tiktak="{{ bases.tiktak }}"
       data-base-kanbante="{{ bases.kanbante }}">
   <h1>Rechercher partout</h1>
-  <p class="rp-hint">Notes ObsiGate, pages Flowdeck, tâches TikTak, cartes Kanbante — dans l'environnement courant (dev reste dev). « / » ou Ctrl+K pour rechercher, ↑/↓ puis Entrée pour ouvrir un résultat.</p>
+  <p class="rp-hint">Notes ObsiGate, pages Flowdeck, tâches TikTak, cartes Kanbante — dans l'environnement courant (dev reste dev). « / » ou Ctrl+K pour rechercher, ↑/↓ puis Entrée pour ouvrir un résultat. « Tout voir » bascule vers l'onglet de l'application, sans quitter la page.</p>
   <div class="rp-form">
     <input id="rp-q" class="rp-input" type="search" name="q" value="{{ q }}"
            placeholder="Rechercher partout…" autocomplete="off" autofocus>
   </div>
+  <nav class="rp-tabs" role="tablist" aria-label="Résultats par application">
+    <button type="button" class="rp-tab active" role="tab" aria-selected="true" data-rp-tab="all">Tout <span class="rp-tab-count"></span></button>
+    <button type="button" class="rp-tab" role="tab" aria-selected="false" tabindex="-1" data-rp-tab="obsigate">ObsiGate <span class="rp-tab-count"></span></button>
+    <button type="button" class="rp-tab" role="tab" aria-selected="false" tabindex="-1" data-rp-tab="flowdeck">Flowdeck <span class="rp-tab-count"></span></button>
+    <button type="button" class="rp-tab" role="tab" aria-selected="false" tabindex="-1" data-rp-tab="tiktak">TikTak <span class="rp-tab-count"></span></button>
+    <button type="button" class="rp-tab" role="tab" aria-selected="false" tabindex="-1" data-rp-tab="kanbante">Kanbante <span class="rp-tab-count"></span></button>
+    <button type="button" class="rp-tab" role="tab" aria-selected="false" tabindex="-1" data-rp-tab="console">Console Spark <span class="rp-tab-count"></span></button>
+  </nav>
   <section class="rp-section" data-rp-section="obsigate">
     <div class="rp-head"><h2>ObsiGate — notes</h2><span class="rp-count"></span><a class="rp-all" href="#">Tout voir</a></div>
     <div class="rp-body"><p class="rp-state">Tapez une recherche ci-dessus.</p></div>
@@ -29,6 +42,10 @@
     <div class="rp-head"><h2>Kanbante — cartes</h2><span class="rp-count"></span><a class="rp-all" href="#">Tout voir</a></div>
     <div class="rp-body"><p class="rp-state">Tapez une recherche ci-dessus.</p></div>
   </section>
+  <section class="rp-section" data-rp-section="console">
+    <div class="rp-head"><h2>Console Spark — discussions</h2><span class="rp-count"></span><a class="rp-all" href="#">Tout voir</a></div>
+    <div class="rp-body"><p class="rp-state">Tapez une recherche ci-dessus.</p></div>
+  </section>
 </main>
 {% endblock %}
 {% block scripts %}