ui: propose modal intercept + readable buttons + open in new tab

2026-01-18 20:48:10 +01:00
parent 6ea42da643
commit 0c764cd9ab
2 changed files with 255 additions and 0 deletions
--- a/src/components/ProposeModal.astro
+++ b/src/components/ProposeModal.astro
@@ -0,0 +1,91 @@
+<dialog id="propose-modal" aria-label="Qualifier la proposition">
+  <form method="dialog" class="box">
+    <header class="hd">
+      <h2>Qualifier la proposition</h2>
+      <button value="cancel" class="x" aria-label="Fermer">✕</button>
+    </header>
+
+    <p class="sub">
+      Optionnel : choisis une intention (pour tri & traitement éditorial). Sinon, continue sans préciser.
+    </p>
+
+    <div class="grid">
+      <button type="button" data-category="cat/style">Style / lisibilité</button>
+      <button type="button" data-category="cat/lexique">Lexique / terminologie</button>
+      <button type="button" data-category="cat/argument">Argument / structure</button>
+      <button type="button" data-category="cat/redondance">Redondance</button>
+      <button type="button" data-category="cat/source">Source / vérification</button>
+      <button type="button" data-category="">Continuer sans préciser</button>
+    </div>
+
+    <footer class="ft">
+      <small>Astuce : touche <kbd>Esc</kbd> pour fermer.</small>
+    </footer>
+  </form>
+</dialog>
+
+<style>
+  dialog { border: none; padding: 0; border-radius: 16px; width: min(720px, calc(100vw - 2rem)); }
+  dialog::backdrop { background: rgba(0,0,0,.55); }
+  .box { padding: 1rem 1rem 0.75rem; }
+  .hd { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
+  .hd h2 { margin:0; font-size:1.1rem; }
+  .x { border:0; background:transparent; font-size:1.1rem; cursor:pointer; }
+  .sub { margin:.5rem 0 1rem; opacity:.9; }
+  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.5rem; }
+  .grid button { padding: .75rem .8rem; border-radius: 12px; border: 1px solid rgba(0,0,0,.18); background: rgba(255,255,255,.96); color: #111; cursor: pointer; text-align: left; }
+  .grid button:hover { background: #fff; }
+  .grid button:hover { background: #fff; }
+  .ft { margin-top:.75rem; opacity:.85; }
+  kbd { padding:0 .35rem; border:1px solid rgba(0,0,0,.2); border-radius:6px; }
+</style>
+
+<script is:inline>
+(() => {
+  const dlg = document.getElementById("propose-modal");
+  if (!dlg) return;
+
+  /** @type {URL|null} */
+  let pending = null;
+
+  const upsertLine = (text, key, value) => {
+    const re = new RegExp(`^${key}:\\s*.*$`, "mi");
+    if (!value) return text; // "continuer sans préciser"
+    if (re.test(text)) return text.replace(re, `${key}: ${value}`);
+    const sep = text && !text.endsWith("\n") ? "\n" : "";
+    return text + sep + `${key}: ${value}\n`;
+  };
+
+  const openWith = (url) => {
+    pending = url;
+    if (typeof dlg.showModal === "function") dlg.showModal();
+    else window.location.href = url.toString(); // fallback robuste
+  };
+
+  // Intercepte UNIQUEMENT les liens marqués data-propose
+  document.addEventListener("click", (e) => {
+    const a = e.target?.closest?.("a[data-propose]");
+    if (!a) return;
+    e.preventDefault();
+    try {
+      openWith(new URL(a.href, window.location.origin));
+    } catch {
+      window.location.href = a.href;
+    }
+  });
+
+  dlg.addEventListener("click", (e) => {
+    const btn = e.target?.closest?.("button[data-category]");
+    if (!btn || !pending) return;
+
+    const cat = btn.getAttribute("data-category") || "";
+    let body = pending.searchParams.get("body") || "";
+    body = upsertLine(body, "Category", cat); // clé stable (sans accents)
+
+    pending.searchParams.set("body", body);
+    dlg.close();
+
+    window.open(pending.toString(), "_blank", "noopener,noreferrer");
+  });
+})();
+</script>