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

app/templates/recherche.html

@@ -15,13 +15,22 @@
           data-base-obsigate="{{ draco_urls.obsigate }}"
           data-base-flowdeck="{{ draco_urls.flowdeck }}"
           data-base-tiktak="{{ draco_urls.tiktak }}"
-          data-base-kanbante="{{ draco_urls.kanbante }}">
+          data-base-kanbante="{{ draco_urls.kanbante }}"
+          data-base-console="{{ agent_url }}">
         <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>
@@ -38,6 +47,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>
 
     <footer>