Contenus: add Mots-clés fieldset mirroring Langues, keep dedicated page button as backup, add Annuler cancel button to both bulk action bars, limit both table wraps to max-height:50vh with overflow scroll

app/templates/admin/contenus.php

@@ -53,8 +53,6 @@
         <section aria-labelledby="donnees-secondaires-title">
             <h2 id="donnees-secondaires-title">Données Secondaires</h2>
 
-            <p><a href="/admin/tags.php" class="btn btn--sm btn--primary">Gérer les mots-clés</a></p>
-
             <fieldset>
                 <legend>Langues</legend>
 
@@ -71,7 +69,34 @@
                 <div id="langues-table-wrap"
                      hx-get="/admin/contenus-langues-fragment.php"
                      hx-trigger="load"
-                     hx-swap="innerHTML">
+                     hx-swap="innerHTML"
+                     style="max-height:50vh;overflow-y:auto">
+                    <div style="padding:var(--space-m); text-align:center; color:var(--text-tertiary)">
+                        <img alt="Chargement…" class="htmx-indicator" width="24" src="/assets/img/bars.svg" style="opacity:0.5">
+                    </div>
+                </div>
+            </fieldset>
+
+            <p style="margin-top:var(--space-s)"><a href="/admin/tags.php" class="btn btn--sm btn--primary">Gérer les mots-clés (page dédiée)</a></p>
+
+            <fieldset>
+                <legend>Mots-clés</legend>
+
+                <form id="motscles-search-form"
+                      hx-get="/admin/contenus-motscles-fragment.php"
+                      hx-target="#motscles-table-wrap"
+                      hx-swap="innerHTML"
+                      hx-trigger="input changed delay:200ms from:input[name=q], keyup[key=='Enter'] from:input[name=q]"
+                      hx-push-url="false"
+                      style="margin-bottom:var(--space-xs)">
+                    <input type="text" name="q" placeholder="Rechercher un mot-clé…" style="max-width:300px">
+                </form>
+
+                <div id="motscles-table-wrap"
+                     hx-get="/admin/contenus-motscles-fragment.php"
+                     hx-trigger="load"
+                     hx-swap="innerHTML"
+                     style="max-height:50vh;overflow-y:auto">
                     <div style="padding:var(--space-m); text-align:center; color:var(--text-tertiary)">
                         <img alt="Chargement…" class="htmx-indicator" width="24" src="/assets/img/bars.svg" style="opacity:0.5">
                     </div>
@@ -349,6 +374,11 @@ function languesUpdateBulk() {
     document.getElementById('langues-bulk-actions').style.display = n > 1 ? 'flex' : 'none';
 }
 
+function languesCancelSelection() {
+    document.querySelectorAll('input[name="selected_langs[]"]').forEach(cb => cb.checked = false);
+    languesUpdateBulk();
+}
+
 function languesConfirmBulkMerge() {
     const checked = document.querySelectorAll('input[name="selected_langs[]"]:checked');
     if (checked.length < 2) return;
@@ -387,6 +417,137 @@ document.addEventListener('htmx:afterSwap', function(evt) {
 });
 </script>
 
+<!-- ═══════════════════════════════════════════════════════════════
+     CONFIRM DIALOGS FOR MOTS-CLÉS
+══════════════════════════════════════════════════════════════ -->
+
+<dialog id="motscles-delete-dialog" class="admin-dialog admin-dialog--sm" aria-labelledby="motscles-delete-title">
+    <div class="admin-dialog__header">
+        <h2 id="motscles-delete-title">Supprimer le mot-clé</h2>
+        <button type="button" class="admin-dialog__close" aria-label="Fermer"
+                onclick="this.closest('dialog').close()">&#x2715;</button>
+    </div>
+    <div class="admin-dialog__alert">
+        <p>Supprimer «&nbsp;<strong id="motscles-delete-name"></strong>&nbsp;»&nbsp;? Cette action est irréversible.</p>
+    </div>
+    <div class="admin-dialog__footer">
+        <button type="button" class="btn btn--danger" onclick="this.closest('dialog').close(); motsclesSubmitPending()">Supprimer</button>
+        <button type="button" class="btn btn--secondary" onclick="this.closest('dialog').close()">Annuler</button>
+    </div>
+</dialog>
+
+<dialog id="motscles-bulk-merge-dialog" class="admin-dialog admin-dialog--sm" aria-labelledby="motscles-bulk-merge-title">
+    <div class="admin-dialog__header">
+        <h2 id="motscles-bulk-merge-title">Fusionner des mots-clés</h2>
+        <button type="button" class="admin-dialog__close" aria-label="Fermer"
+                onclick="this.closest('dialog').close()">&#x2715;</button>
+    </div>
+    <div class="admin-dialog__alert">
+        <p>Fusionner <strong><span id="motscles-bulk-merge-count"></span> mot(s)-clé(s)</strong> sélectionné(s) dans&nbsp;:</p>
+        <select id="motscles-bulk-merge-target-select" class="admin-select--inline" style="margin-top:var(--space-xs); width:100%" required>
+            <option value="">— Choisir la destination —</option>
+        </select>
+    </div>
+    <div class="admin-dialog__footer">
+        <button type="button" class="btn btn--warning" onclick="motsclesExecBulkMerge()">Fusionner</button>
+        <button type="button" class="btn btn--secondary" onclick="this.closest('dialog').close()">Annuler</button>
+    </div>
+</dialog>
+
+<script>
+let _motsclesPendingForm = null;
+
+function motsclesConfirmDelete(btn, name) {
+    _motsclesPendingForm = btn.closest('form');
+    document.getElementById('motscles-delete-name').textContent = name;
+    document.getElementById('motscles-delete-dialog').showModal();
+}
+
+// ── Inline rename via HTMX ──────────────────────────────────────────────
+function motsclesStartRename(id) {
+    var cell = document.getElementById('motscles-name-' + id);
+    var csrf = document.querySelector('input[name="csrf_token"]').value;
+    cell.innerHTML = '<form hx-post="/admin/actions/tag.php" hx-target="#motscles-table-wrap" hx-swap="innerHTML" class="admin-inline-form">'
+        + '<input type="hidden" name="csrf_token" value="' + csrf + '">'
+        + '<input type="hidden" name="action" value="rename">'
+        + '<input type="hidden" name="return" value="/admin/contenus.php">'
+        + '<input type="hidden" name="tag_id" value="' + id + '">'
+        + '<input type="text" name="new_name" value="' + cell.getAttribute('data-name') + '" required class="admin-input--inline">'
+        + '<button type="submit" class="admin-icon-btn admin-icon-btn--edit" title="Valider">'
+        + '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>'
+        + '</button>'
+        + '<button type="button" class="admin-icon-btn admin-icon-btn--delete" onclick="motsclesCancelRename(' + id + ')" title="Annuler">'
+        + '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/></svg>'
+        + '</button></form>';
+    cell.querySelector('input').focus();
+}
+
+function motsclesCancelRename(id) {
+    var cell = document.getElementById('motscles-name-' + id);
+    cell.innerHTML = '<span class="tag-name-cell">' + cell.getAttribute('data-name') + '</span>'
+        + '<button type="button" class="admin-icon-btn admin-icon-btn--edit" title="Renommer" onclick="motsclesStartRename(' + id + ')">'
+        + '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M248,92.68a15.86,15.86,0,0,0-4.69-11.31L174.63,12.68a16,16,0,0,0-22.63,0L123.57,41.11l-58,21.77A16.06,16.06,0,0,0,55.35,75.23L32.11,214.68A8,8,0,0,0,40,224a8.4,8.4,0,0,0,1.32-.11l139.44-23.24a16,16,0,0,0,12.35-10.17l21.77-58L243.31,104A15.87,15.87,0,0,0,248,92.68Zm-69.87,92.19L63.32,204l47.37-47.37a28,28,0,1,0-11.32-11.32L52,192.7,71.13,77.86,126,57.29,198.7,130ZM112,132a12,12,0,1,1,12,12A12,12,0,0,1,112,132Zm96-15.32L139.31,48l24-24L232,92.68Z"/></svg>'
+        + '</button>';
+}
+
+function motsclesSubmitPending() {
+    if (_motsclesPendingForm) _motsclesPendingForm.submit();
+}
+
+function motsclesToggleAll(src) {
+    document.querySelectorAll('input[name="selected_tags[]"]').forEach(cb => cb.checked = src.checked);
+    motsclesUpdateBulk();
+}
+
+function motsclesUpdateBulk() {
+    const n = document.querySelectorAll('input[name="selected_tags[]"]:checked').length;
+    document.getElementById('motscles-selected-count').textContent = n;
+    document.getElementById('motscles-bulk-actions').style.display = n > 1 ? 'flex' : 'none';
+}
+
+function motsclesConfirmBulkMerge() {
+    const checked = document.querySelectorAll('input[name="selected_tags[]"]:checked');
+    if (checked.length < 2) return;
+    document.getElementById('motscles-bulk-merge-count').textContent = checked.length;
+    const sel = document.getElementById('motscles-bulk-merge-target-select');
+    sel.innerHTML = '<option value="">— Choisir la destination —</option>';
+    checked.forEach(cb => {
+        const tr = cb.closest('tr');
+        sel.innerHTML += '<option value="' + cb.value + '">' + tr.querySelector('td:nth-child(2)').textContent.trim() + '</option>';
+    });
+    document.getElementById('motscles-bulk-merge-dialog').showModal();
+}
+
+function motsclesExecBulkMerge() {
+    const targetId = document.getElementById('motscles-bulk-merge-target-select').value;
+    if (!targetId) return;
+    document.getElementById('motscles-bulk-target').value = targetId;
+    const container = document.getElementById('motscles-bulk-checkboxes');
+    container.innerHTML = '';
+    document.querySelectorAll('input[name="selected_tags[]"]:checked').forEach(cb => {
+        const inp = document.createElement('input');
+        inp.type = 'hidden';
+        inp.name = 'selected_tags[]';
+        inp.value = cb.value;
+        container.appendChild(inp);
+    });
+    document.getElementById('motscles-bulk-merge-dialog').close();
+    document.getElementById('motscles-bulk-form').submit();
+}
+
+function motsclesCancelSelection() {
+    document.querySelectorAll('input[name="selected_tags[]"]').forEach(cb => cb.checked = false);
+    motsclesUpdateBulk();
+}
+
+document.addEventListener('htmx:afterSwap', function(evt) {
+    if (evt.target.id === 'motscles-table-wrap') {
+        document.querySelectorAll('input[name="selected_tags[]"]').forEach(cb => cb.addEventListener('change', motsclesUpdateBulk));
+        motsclesUpdateBulk();
+    }
+});
+</script>
+
 <script>
 (function () {
     var otScript = document.createElement('script');