living-documentation 7.9.0 → 7.11.0

package/dist/src/frontend/i18n/fr.json

@@ -1,6 +1,7 @@
 {
   "common.save": "Enregistrer",
   "common.cancel": "Annuler",
+  "common.confirm": "Confirmer",
   "common.reset": "Réinitialiser",
   "common.loading": "Chargement…",
   "common.remove": "Supprimer",
@@ -28,8 +29,31 @@
   "nav.new_document": "Nouveau document",
   "nav.word_cloud": "☁ Nuage de mots",
   "nav.diagram": "◇ Diagramme",
+  "nav.files": "📁 Fichiers Métadonnées",
   "nav.admin": "⚙ Admin",
 
+  "files.title": "📁 Fichiers joints",
+  "files.empty": "Aucun fichier — téléversez-en un depuis un document (trombone, glisser-déposer ou coller).",
+  "files.replace": "Remplacer",
+  "files.delete": "Supprimer",
+  "files.open": "Ouvrir",
+  "files.confirm_replace": "Remplacer « {name} » par « {newName} » ? La version précédente sera perdue.",
+  "files.confirm_replace_title": "Remplacer le fichier",
+  "files.confirm_replace_message": "Remplacer « {name} » par « {newName} » ?",
+  "files.confirm_replace_detail": "La version précédente sera perdue.",
+  "files.confirm_delete": "Supprimer définitivement « {name} » ?",
+  "files.confirm_delete_title": "Supprimer le fichier",
+  "files.confirm_delete_message": "Supprimer définitivement « {name} » ?",
+  "files.confirm_delete_detail": "Cette action est irréversible.",
+  "files.replacing": "Remplacement…",
+  "files.deleting": "Suppression…",
+  "files.error_load": "Impossible de charger les fichiers : ",
+  "files.error_replace": "Échec du remplacement : ",
+  "files.error_delete": "Échec de la suppression : ",
+  "files.size_bytes": "{n} o",
+  "files.size_kb": "{n} Ko",
+  "files.size_mb": "{n} Mo",
+
   "welcome.title": "Sélectionner un document",
   "welcome.hint": "Choisissez un document dans la barre latérale pour commencer à lire.",
   "welcome.pattern_hint": "Modèle de nom de fichier attendu",
@@ -126,21 +150,21 @@
 
   "snippet.modal_title": "🧩 Insérer un snippet",
   "snippet.type_label": "Type de snippet",
-  "snippet.diagram": "Diagramme",
-  "snippet.collapsible": "Bloc repliable (détails)",
-  "snippet.link": "Lien",
-  "snippet.link_doc": "Lien vers un document",
-  "snippet.link_anchor": "Lien vers une ancre",
-  "snippet.link_doc_anchor": "Lien vers un document avec ancre",
-  "snippet.numbered_list": "Liste numérotée",
-  "snippet.bullet_list": "Liste à puces",
-  "snippet.code_block": "Bloc de code",
-  "snippet.blockquote": "Citation (blockquote)",
-  "snippet.separator": "Séparateur horizontal",
-  "snippet.image": "Image",
-  "snippet.table": "Tableau",
-  "snippet.tree": "Arborescence",
-  "snippet.colored_section": "Section colorée",
+  "snippet.diagram": "◇ Diagramme",
+  "snippet.collapsible": "▸ Bloc repliable (détails)",
+  "snippet.link": "🔗 Lien",
+  "snippet.link_doc": "📄 Lien vers un document",
+  "snippet.link_anchor": "⚓ Lien vers une ancre",
+  "snippet.link_doc_anchor": "📄⚓ Lien vers un document avec ancre",
+  "snippet.numbered_list": "🔢 Liste numérotée",
+  "snippet.bullet_list": "• Liste à puces",
+  "snippet.code_block": "💻 Bloc de code",
+  "snippet.blockquote": "❝ Citation (blockquote)",
+  "snippet.separator": "― Séparateur horizontal",
+  "snippet.image": "🖼 Image",
+  "snippet.table": "▦ Tableau",
+  "snippet.tree": "🌳 Arborescence",
+  "snippet.colored_section": "🎨 Section colorée",
   "snippet.colored_section_color_label": "Couleur",
   "snippet.colored_section_swatch_info": "Info (bleu)",
   "snippet.colored_section_swatch_success": "Succès (vert)",
@@ -150,7 +174,7 @@
   "snippet.colored_section_swatch_neutral": "Neutre (gris)",
   "snippet.colored_section_content_label": "Contenu",
   "snippet.colored_section_content_placeholder": "Votre texte ici…",
-  "snippet.colored_text": "Texte coloré",
+  "snippet.colored_text": "🖍 Texte coloré",
   "snippet.colored_text_color_label": "Couleur",
   "snippet.colored_text_content_label": "Texte",
   "snippet.colored_text_content_placeholder": "Votre texte…",
@@ -197,6 +221,17 @@
   "snippet.saving_btn": "Enregistrement…",
   "snippet.detected_msg": "✓ Type détecté : {type}. Les champs ont été pré-remplis — modifiez puis cliquez sur Insérer pour remplacer la sélection.",
   "snippet.unknown_type_msg": "⚠ Le texte sélectionné ne correspond à aucun type de snippet reconnu. Choisissez un type ci-dessous — le snippet remplacera quand même la sélection.",
+  "snippet.emojis": "😀 Émojis",
+  "snippet.emoji_selected_label": "Émojis sélectionnés",
+  "snippet.emoji_clear_btn": "Vider",
+  "snippet.emoji_cat_smileys": "Smileys & personnes",
+  "snippet.emoji_cat_gestures": "Gestes & corps",
+  "snippet.emoji_cat_hearts": "Cœurs & étincelles",
+  "snippet.emoji_cat_objects": "Tech & outils",
+  "snippet.emoji_cat_office": "Bureau & documents",
+  "snippet.emoji_cat_symbols": "Symboles & flèches",
+  "snippet.emoji_search_placeholder": "Rechercher un émoji… (ex : coeur, etoile, fusee)",
+  "snippet.emoji_no_results": "Aucun émoji ne correspond à cette recherche.",
   "snippet.attachment": "📎 Pièce jointe",
   "snippet.attachment_help": "Cliquez sur <strong>Insérer</strong> pour choisir un fichier. Il sera téléversé dans le dossier <code>files/</code> et inséré sous forme de lien <i class=\"fa-solid fa-paperclip\"></i> dans votre document.",
   "snippet.attachment_alt": "Astuce : vous pouvez aussi glisser-déposer un fichier sur l'éditeur ou le coller depuis le presse-papiers.",

package/dist/src/frontend/index.html

@@ -54,6 +54,8 @@
     <script defer src="/diagram-link-modal.js"></script>
     <script defer src="/new-folder-modal.js"></script>
     <script defer src="/new-doc-modal.js"></script>
+    <script defer src="/confirm-modal.js"></script>
+    <script defer src="/files-modal.js"></script>
     <script defer src="/boot.js"></script>
 
     <script>
@@ -309,6 +311,15 @@
             &#9671; Diagram
           </a>
 
+          <!-- Files -->
+          <button
+            onclick="openFilesModal()"
+            data-i18n="nav.files"
+            class="text-sm px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-medium"
+          >
+            &#128193; Files
+          </button>
+
           <!-- Admin link -->
           <a
             href="/admin"
@@ -1283,6 +1294,7 @@
             <option data-i18n="snippet.tree" value="tree">Tree</option>
             <option data-i18n="snippet.colored_section" value="colored-section">Colored section</option>
             <option data-i18n="snippet.colored_text" value="colored-text">Colored text</option>
+            <option data-i18n="snippet.emojis" value="emojis">😀 Emojis</option>
             <option data-i18n="snippet.attachment" value="attachment">📎 File attachment</option>
           </select>
         </div>
@@ -1806,13 +1818,52 @@
           </div>
         </div>
 
+        <!-- Panel: emojis -->
+        <div id="snip-panel-emojis" class="hidden space-y-3">
+          <div class="space-y-1.5">
+            <label
+              data-i18n="snippet.emoji_selected_label"
+              class="block text-xs font-medium text-gray-500 dark:text-gray-400"
+              >Selected emojis</label
+            >
+            <div class="flex gap-1">
+              <input
+                id="snip-emoji-string"
+                type="text"
+                oninput="snippetUpdatePreview()"
+                class="flex-1 px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+              <button
+                type="button"
+                id="snip-emoji-clear"
+                onclick="emojiClear()"
+                data-i18n="snippet.emoji_clear_btn"
+                class="px-3 py-2 text-xs rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+              >Clear</button>
+            </div>
+          </div>
+          <div class="space-y-1.5">
+            <input
+              id="snip-emoji-search"
+              type="text"
+              data-i18n-placeholder="snippet.emoji_search_placeholder"
+              placeholder="Search emojis… (e.g. heart, star, rocket)"
+              class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div
+            id="snip-emoji-grid"
+            class="space-y-2 max-h-64 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-2 bg-white dark:bg-gray-900"
+          ></div>
+        </div>
+
         <!-- Panel: file attachment -->
         <div id="snip-panel-attachment" class="hidden space-y-3">
           <div class="rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 px-3 py-3 text-sm text-blue-900 dark:text-blue-100 space-y-2">
-            <p data-i18n="snippet.attachment_help">
+            <p data-i18n-html="snippet.attachment_help">
               Click <strong>Insert</strong> to choose a file. It will be uploaded under the <code>files/</code> folder and inserted as a <i class="fa-solid fa-paperclip"></i> link in your document.
             </p>
-            <p data-i18n="snippet.attachment_alt" class="text-xs text-blue-700 dark:text-blue-300">
+            <p data-i18n-html="snippet.attachment_alt" class="text-xs text-blue-700 dark:text-blue-300">
               Tip: you can also drag &amp; drop a file onto the editor, or paste it from the clipboard.
             </p>
           </div>
@@ -2519,5 +2570,62 @@
         </div>
       </div>
     </div>
+
+    <!-- ── Generic confirmation modal (used by showConfirm) ── -->
+    <div
+      id="confirm-modal"
+      class="hidden fixed inset-0 z-[60] bg-black/50 flex items-center justify-center p-4"
+      onclick="_confirmModalBackdrop(event)"
+    >
+      <div
+        class="w-full max-w-md bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl p-5 flex flex-col gap-3"
+        onclick="event.stopPropagation()"
+      >
+        <h3 id="confirm-modal-title" class="font-semibold text-gray-900 dark:text-gray-100"></h3>
+        <p id="confirm-modal-message" class="text-sm text-gray-700 dark:text-gray-200"></p>
+        <p id="confirm-modal-detail" class="text-xs text-gray-500 dark:text-gray-400 italic break-all"></p>
+        <div class="flex justify-end gap-2 mt-2">
+          <button
+            id="confirm-modal-cancel"
+            type="button"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+          ></button>
+          <button
+            id="confirm-modal-ok"
+            type="button"
+            class="text-sm px-4 py-1.5 rounded-lg text-white font-semibold transition-colors"
+          ></button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Files modal ── -->
+    <div
+      id="files-modal"
+      class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onclick="if(event.target===this)closeFilesModal()"
+    >
+      <div
+        class="bg-white dark:bg-gray-900 rounded-xl shadow-xl w-[min(720px,92vw)] max-h-[85vh] flex flex-col border border-gray-200 dark:border-gray-800"
+      >
+        <div
+          class="flex items-center justify-between px-5 py-3 border-b border-gray-200 dark:border-gray-800 shrink-0"
+        >
+          <h2 data-i18n="files.title" class="font-semibold text-base text-gray-900 dark:text-gray-100">
+            &#128193; Files
+          </h2>
+          <button
+            onclick="closeFilesModal()"
+            data-i18n-title="common.close"
+            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xl leading-none px-2"
+          >
+            &times;
+          </button>
+        </div>
+        <div id="files-modal-body" class="flex-1 overflow-y-auto p-5">
+          <p class="text-sm text-gray-400" data-i18n="common.loading">Loading…</p>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

package/dist/src/frontend/search.js

@@ -1,6 +1,11 @@
 // ── Search + result highlighting ─────────────────────────────────────────────
 
 let searchTimer = null;
+const METADATA_SEARCH_PREFIX = "metadata://";
+
+function _isMetadataQuery(q) {
+  return typeof q === "string" && q.toLowerCase().startsWith(METADATA_SEARCH_PREFIX);
+}
 
 function setupSearch() {
   ["header-search", "sidebar-search"].forEach((id) => {
@@ -20,23 +25,55 @@ function setupSearch() {
         searchQuery = "";
         searchResults = null;
         renderSidebar(allDocs);
+        if (window.refreshSearchInCurrentDoc) window.refreshSearchInCurrentDoc();
         return;
       }
       searchQuery = q;
-      // Immediate client-side filter for snappy UX
-      const local = allDocs.filter(
-        (d) =>
-          d.title.toLowerCase().includes(q.toLowerCase()) ||
-          d.category.toLowerCase().includes(q.toLowerCase()),
-      );
-      searchResults = local;
-      renderSidebar(local);
+      if (_isMetadataQuery(q)) {
+        // Title/category can't match a metadata:// query — skip the local
+        // filter and wait for the server response.
+        searchResults = [];
+        renderSidebar([]);
+      } else {
+        // Immediate client-side filter for snappy UX
+        const local = allDocs.filter(
+          (d) =>
+            d.title.toLowerCase().includes(q.toLowerCase()) ||
+            d.category.toLowerCase().includes(q.toLowerCase()),
+        );
+        searchResults = local;
+        renderSidebar(local);
+      }
+      // Refresh highlights inside the currently open doc
+      if (window.refreshSearchInCurrentDoc) window.refreshSearchInCurrentDoc();
       // Then full-text search from server
       searchTimer = setTimeout(() => doSearch(q), 350);
     });
   });
 }
 
+// Programmatic trigger used by the Files modal after a replace/delete.
+// Fills both search inputs and runs the server search immediately (no debounce).
+function runSearchImmediate(q) {
+  const trimmed = (q || "").trim();
+  ["header-search", "sidebar-search"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) el.value = trimmed;
+  });
+  clearTimeout(searchTimer);
+  if (!trimmed) {
+    searchQuery = "";
+    searchResults = null;
+    renderSidebar(allDocs);
+    return;
+  }
+  searchQuery = trimmed;
+  searchResults = [];
+  renderSidebar([]);
+  doSearch(trimmed);
+}
+window.runSearchImmediate = runSearchImmediate;
+
 async function doSearch(q) {
   try {
     const results = await fetch(