feat: Fusion bloc 1 — barre d'apps commune (ACC-1.1, #17) et références croisées external_ref (ACC-1.3, #18)

app/templates/_draco_bar.html

@@ -0,0 +1,96 @@
+{# Barre d'apps commune dracodev — Fusion ACC-1.1 (issue #17).
+   Snippet FIGÉ vendangé depuis Projets/dracodev-commons v0.1.0
+   (ui/barre-apps/) : ne pas modifier la structure ici ; toute évolution
+   passe par une nouvelle version de commons.
+   CSS/JS : /static/css/draco-barre.css, /static/js/vendor/draco-barre.js. #}
+<header class="draco-bar" data-current="flowdeck">
+    <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="/" aria-label="dracodev">
+            <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="https://og.dracodev.net/">
+                <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="https://flowdeck.dracodev.net/">
+                <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="https://tiktak.dracodev.net/">
+                <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="https://kanbante.dracodev.net/">
+                <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>
+    <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">
+            <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+            <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-icon-btn" data-act="menu" aria-label="Plus d'actions" aria-haspopup="menu">•••</button>
+        <span class="draco-avatar" title="{{ user.get('full_name') if user and user.get('full_name') else '' }}">{{ user.full_name[:1].upper() if user and user.get('full_name') else 'F' }}</span>
+    </div>
+</header>
+<div class="draco-bar-rappel" data-act="rappel-entete" hidden>✦ dracodev — afficher l'en-tête</div>
+<script nonce="{{ csp_nonce() }}">
+    /* Configuration Flowdeck de la barre commune (Fusion ACC-1.1).
+       Phase 1 : navigation entre apps et domaine mémorisé localement ;
+       le rail pilote le hamburger natif, les alertes ouvrent la cloche
+       native de la page ; la recherche fédérée et Spark arrivent avec
+       les phases suivantes du programme Fusion. */
+    window.DRACO_BAR_CONFIG = {
+        current: "flowdeck",
+        domain: (function () { try { return localStorage.getItem("draco_domain") || "pro"; } catch (e) { return "pro"; } })(),
+        counts: {},
+        onAction: function (act, el) {
+            var dire = function (m) {
+                var d = document.createElement("div");
+                d.textContent = m;
+                d.style.cssText = "position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:3000;background:#1f1f1f;color:#eee;padding:10px 16px;border-radius:10px;font:500 13.5px system-ui;box-shadow:0 6px 24px rgb(0 0 0/.35)";
+                document.body.appendChild(d);
+                setTimeout(function () { d.remove(); }, 3400);
+            };
+            if (act === "domaine") { try { localStorage.setItem("draco_domain", el.dataset.dom); } catch (e) { } return; }
+            if (act === "rail") { var h = document.querySelector(".hamburger-btn"); if (h) h.click(); return; }
+            if (act === "alertes") {
+                var b = document.querySelector(".fd-notif-bell button");
+                if (b) { b.click(); } else { dire("Alertes unifiées : arrive avec la fédération (programme Fusion)."); }
+                return;
+            }
+            if (act === "palette") { dire("Recherche fédérée ⌘K : arrive avec la fédération (programme Fusion)."); return; }
+            if (act === "menu") { dire("Menu commun : arrive avec la fédération (programme Fusion)."); return; }
+            if (act === "spark") { dire("Spark, l'agent commun : arrive en phase 4 du programme Fusion."); return; }
+            if (act === "rappel-entete") {
+                var bar = document.querySelector(".draco-bar");
+                if (bar) bar.style.display = "";
+                el.hidden = true;
+            }
+        }
+    };
+</script>

app/templates/_page_editor_content.html

@@ -755,6 +755,32 @@
         </button>
         </div>
 
+    <!-- ═══ Liens — références croisées (Fusion ACC-1.3) ═══
+         Liste rendue côté serveur ; ajout/retrait par
+         static/js/draco-refs.js (API /api/pages/<id>/refs). -->
+    <section class="draco-liens" data-refs data-owner-type="flowdeck.page" data-owner-id="{{ page.id }}">
+        <h3 class="draco-liens-title">Liens</h3>
+        <ul class="draco-liens-list">
+            {% for r in page_refs %}
+            <li class="draco-liens-item">
+                <span class="draco-ref-dot" style="background:{{ r.app_color }}"></span>
+                <a href="{{ r.target_url }}" target="_blank" rel="noopener">{{ r.label }}</a>
+                {% if page_data.can_edit %}
+                <button type="button" class="draco-liens-del" data-ref-del="{{ r.id }}" title="Retirer le lien">✕</button>
+                {% endif %}
+            </li>
+            {% endfor %}
+        </ul>
+        {% if page_data.can_edit %}
+        <form class="draco-liens-form" data-refs-form>
+            <input type="url" required placeholder="Coller une URL profonde (TikTak, ObsiGate, Gitea, Flowdeck)…">
+            <input type="text" placeholder="Libellé (optionnel)">
+            <button type="submit">Lier</button>
+        </form>
+        <p class="draco-liens-erreur" data-refs-erreur hidden></p>
+        {% endif %}
+    </section>
+
     <div class="editor-statusbar">
         <span x-show="saving">Saving...</span>
         <span x-show="!saving&&dirty">Unsaved</span>

app/templates/base.html

@@ -30,6 +30,7 @@
        htmx lors d'une navigation partielle : la page revenait alors sans
        aucune feuille de style (composants blancs en thème sombre). -->
   <link rel="stylesheet" href="/static/css/my_tasks.css?v={{ asset_version }}">
+  <link rel="stylesheet" href="/static/css/draco-barre.css?v={{ asset_version }}">
   <link rel="stylesheet" href="/static/css/katex.min.css?v=0.16.11">
   <style>
     /* ── Mobile responsive (v4.0.2) ── */
@@ -146,7 +147,8 @@
   <script src="/static/js/alpine.csp.min.js" defer data-cfasync="false"></script>
   <script src="/static/js/sortable.min.js" defer data-cfasync="false"></script>
 </head>
-<body hx-headers='{"X-CSRF-Token":{{ csrf_token() | tojson }}}'{% if embed_mode %} class="embed-mode"{% endif %}>
+<body hx-headers='{"X-CSRF-Token":{{ csrf_token() | tojson }}}'{% if embed_mode %} class="embed-mode"{% else %} class="has-draco-bar"{% endif %}>
+{% if not embed_mode %}{% include "_draco_bar.html" %}{% endif %}
 <div class="app-layout" x-data="appState()" x-cloak>
 
   <!-- ═══════════ MOBILE SIDEBAR OVERLAY ═══════════ -->
@@ -2867,6 +2869,7 @@
   });
 </script>
 <script src="/static/js/app.js?v={{ asset_version }}" defer data-cfasync="false"></script>
+<script src="/static/js/vendor/draco-barre.js?v={{ asset_version }}" defer data-cfasync="false"></script>
 
 <style>
 .flowdeck-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:2000;display:flex;align-items:center;justify-content:center;}

app/templates/page_editor.html

@@ -9,6 +9,7 @@ page_title %}{{ page.title }}{% endblock %} {% block topbar %}
 {% include "_page_editor_content.html" %}
 {% endblock %} {% block scripts %}
 <script src="/static/js/katex.min.js?v=0.16.11" defer></script>
+<script src="/static/js/draco-refs.js?v={{ asset_version }}" defer></script>
 {% include "_page_editor_scripts.html" %}
 {% include "_page_editor_realtime.html" %}
 {% include "_database_table_scripts.html" %}