From 1604245f9403cd7852f4df05b69b350b1fac00c6 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 28 Oct 2026 13:50:40 -0400
Subject: [PATCH] Recherche partout (#68, chantier 2+3) : onglets, Tout voir
 sur place, focus, mise en page

---
 frontend/recherche.html | 181 ++++++++++++++++++++++++++++++----------
 1 file changed, 136 insertions(+), 45 deletions(-)

diff --git a/frontend/recherche.html b/frontend/recherche.html
index 1a7a6fc..98c780e 100644
--- a/frontend/recherche.html
+++ b/frontend/recherche.html
@@ -1,55 +1,146 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="fr" data-theme="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Rechercher partout — ObsiGate</title>
-  <link rel="stylesheet" href="/static/recherche.css">
-  <style>
-    /* Navigation minimale (la barre complète vit dans index.html, la SPA). */
-    .rp-nav { display: flex; gap: 16px; padding: 12px 16px; font-size: .9rem; }
-    .rp-nav a { color: inherit; opacity: .8; }
-  </style>
-</head>
-<body>
-  <!-- Jetons {{URL_*}} remplacés par la route /recherche (même contrat
-       que le fragment de barre). Servie brute via /static, la page
+  <!-- Gabarit ObsiGate (chantier 2+3) : la page /recherche est servie
+       hors SPA (route déclarée avant le catch-all, comme /admin.html),
+       elle reprend donc les feuilles de l'app (style.css + barre) et
+       la structure de index.html (barre de fusion, en-tête, sidebar,
+       zone de contenu) au lieu de la page nue précédente.
+       Jetons {{URL_*}} remplacés par la route /recherche (même contrat
+       que le fragment de barre) ; servie brute via /static, la page
        retomberait sur les défauts prod (les jetons sont ignorés par
-       le JS) — jamais d'URL inventée. -->
-  <nav class="rp-nav">
-    <a href="{{URL_OBSIGATE}}">ObsiGate</a>
-    <a href="{{URL_FLOWDECK}}">Flowdeck</a>
-    <a href="{{URL_TIKTAK}}">TikTak</a>
-    <a href="{{URL_KANBANTE}}">Kanbante</a>
-  </nav>
-  <main class="rp-page" id="recherche" data-host="obsigate"
-        data-base-obsigate="{{URL_OBSIGATE}}"
-        data-base-flowdeck="{{URL_FLOWDECK}}"
-        data-base-tiktak="{{URL_TIKTAK}}"
-        data-base-kanbante="{{URL_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>
-    <div class="rp-form">
-      <input id="rp-q" class="rp-input" type="search" name="q" value=""
-             placeholder="Rechercher partout…" autocomplete="off" autofocus>
+       le JS) — jamais d'URL inventée.
+       La barre ci-dessous est une copie statique du snippet figé de
+       index.html (commons v0.1.6) : les onglets sont des liens réels,
+       le bouton central replace le curseur dans la boîte (recherche.js,
+       clic data-act="palette"). Les menus, le panneau Spark, les
+       alertes et le domaine restent des comportements de la SPA et ne
+       sont pas rejoués ici — l'autre travailleur (onglet Console Spark
+       de la barre) devra reporter son ajout dans cette copie au
+       re-vendoring, comme pour tout hôte.
+       Sidebar statique (navigation de l'app) : les vaults, tags et
+       récents dynamiques vivent dans la SPA, pas sur cette page. -->
+  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/draco-barre.css">
+  <link rel="stylesheet" href="/static/recherche.css">
+</head>
+<body class="has-draco-bar rp-og">
+  <header class="draco-bar" data-current="obsigate">
+    <div class="draco-bar-zone draco-bar-gauche">
+      <button type="button" class="draco-icon-btn" data-act="rail" aria-label="Barre latérale">☰</button>
+      <a class="draco-brand" href="/" data-act="apps" aria-haspopup="true" aria-expanded="false" aria-label="dracodev — changer d'application" title="Changer d'application">
+        <span class="draco-brand-mark">✦</span><span class="draco-brand-name">dracodev</span>
+      </a>
+      <nav class="draco-apptabs" aria-label="Applications">
+        <a class="draco-apptab" data-app="obsigate" href="{{URL_OBSIGATE}}">
+          <span class="draco-apptab-ico" style="--app:#7a5af5">▤</span>
+          <span class="draco-apptab-txt"><strong>ObsiGate</strong><small>Notes</small></span>
+        </a>
+        <a class="draco-apptab" data-app="flowdeck" href="{{URL_FLOWDECK}}">
+          <span class="draco-apptab-ico" style="--app:#2f6fed">▦</span>
+          <span class="draco-apptab-txt"><strong>Flowdeck</strong><small>Projets</small></span>
+        </a>
+        <a class="draco-apptab" data-app="tiktak" href="{{URL_TIKTAK}}">
+          <span class="draco-apptab-ico" style="--app:#e8762c">✓</span>
+          <span class="draco-apptab-txt"><strong>TikTak</strong><small>Tâches</small></span>
+          <span class="draco-badge" data-badge="tiktak" hidden>0</span>
+        </a>
+        <a class="draco-apptab" data-app="kanbante" href="{{URL_KANBANTE}}">
+          <span class="draco-apptab-ico" style="--app:#0d9488">▥</span>
+          <span class="draco-apptab-txt"><strong>Kanbante</strong><small>Kanban</small></span>
+          <span class="draco-badge" data-badge="kanbante" hidden>0</span>
+        </a>
+      </nav>
     </div>
-    <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>
-    </section>
-    <section class="rp-section" data-rp-section="flowdeck">
-      <div class="rp-head"><h2>Flowdeck — pages</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="tiktak">
-      <div class="rp-head"><h2>TikTak — tâches</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="kanbante">
-      <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>
-  </main>
+    <div class="draco-bar-zone draco-bar-centre">
+      <button type="button" class="draco-search" data-act="palette" aria-label="Rechercher partout (Ctrl+K)">
+        <span class="draco-search-ico">⌕</span>
+        <span class="draco-search-txt">Rechercher partout…</span>
+        <kbd>⌘K</kbd>
+      </button>
+    </div>
+    <div class="draco-bar-zone draco-bar-droite">
+      <div class="draco-domaines" role="group" aria-label="Domaine">
+        <span class="draco-domaines-lbl">Domaine</span>
+        <button type="button" data-act="domaine" data-dom="pro">Pro</button>
+        <button type="button" data-act="domaine" data-dom="famille">Famille</button>
+        <button type="button" data-act="domaine" data-dom="perso">Perso</button>
+      </div>
+      <button type="button" class="draco-alertes" data-act="alertes" aria-label="Alertes unifiées">
+        <span class="draco-alertes-txt">Alertes</span>
+        <span class="draco-badge" data-badge="alertes" hidden>0</span>
+      </button>
+      <button type="button" class="draco-spark" data-act="spark" aria-label="Ouvrir Spark, l'agent commun">
+        <span class="draco-spark-ico">✦</span><span class="draco-spark-txt">Spark</span>
+        <span class="draco-badge" data-badge="spark" hidden>0</span>
+      </button>
+      <button type="button" class="draco-avatar" id="draco-avatar" data-act="compte" aria-label="Compte" aria-haspopup="menu" aria-expanded="false" title="">✦</button>
+    </div>
+  </header>
+  <div id="app" class="app-container">
+    <header class="header">
+      <div class="header-left">
+        <div class="header-logo">ObsiGate</div>
+        <a href="/">Retour à l'application</a>
+      </div>
+    </header>
+    <div class="main-body">
+      <aside class="sidebar" id="sidebar" role="navigation" aria-label="Navigation ObsiGate">
+        <nav class="rp-og-nav">
+          <a href="/">Tableau de bord</a>
+          <a href="/recherche" aria-current="page">Rechercher partout</a>
+          <p class="rp-og-note">La navigation par vaults (fichiers, tags, récents) vit dans l'application ObsiGate.</p>
+        </nav>
+      </aside>
+      <div class="content-wrapper">
+        <div class="content-area">
+          <main class="rp-page" id="recherche" data-host="obsigate"
+                data-base-obsigate="{{URL_OBSIGATE}}"
+                data-base-flowdeck="{{URL_FLOWDECK}}"
+                data-base-tiktak="{{URL_TIKTAK}}"
+                data-base-kanbante="{{URL_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. « 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=""
+                     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>
+            </section>
+            <section class="rp-section" data-rp-section="flowdeck">
+              <div class="rp-head"><h2>Flowdeck — pages</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="tiktak">
+              <div class="rp-head"><h2>TikTak — tâches</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="kanbante">
+              <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>
+        </div>
+      </div>
+    </div>
+  </div>
   <script src="/static/js/recherche.js"></script>
 </body>
 </html>