Add help FAQ modal and i18n help content

wwwroot/app.js

@@ -170,6 +170,11 @@ function setupHandlers() {
     adminClose.addEventListener("click", () => togglePanel(false));
   }
 
+  const helpChip = $("help-chip");
+  if (helpChip) {
+    helpChip.addEventListener("click", () => openFaqModal());
+  }
+
   const resultsToggle = $("results-open");
   if (resultsToggle) {
     resultsToggle.addEventListener("change", async (e) => {
@@ -378,3 +383,97 @@ function bindNavButtons() {
     });
   }
 }
+
+function faqTree() {
+  return [
+    {
+      title: t("help.cat.gettingStarted"),
+      items: [
+        { q: t("help.q.join"), a: t("help.a.join") },
+        { q: t("help.q.adminKey"), a: t("help.a.adminKey") },
+      ],
+    },
+    {
+      title: t("help.cat.suggest"),
+      items: [
+        { q: t("help.q.limit"), a: t("help.a.limit") },
+        { q: t("help.q.editNames"), a: t("help.a.editNames") },
+        { q: t("help.q.mediaRules"), a: t("help.a.mediaRules") },
+      ],
+    },
+    {
+      title: t("help.cat.vote"),
+      items: [
+        { q: t("help.q.howVote"), a: t("help.a.howVote") },
+        { q: t("help.q.finalize"), a: t("help.a.finalize") },
+        { q: t("help.q.linkedVotes"), a: t("help.a.linkedVotes") },
+      ],
+    },
+    {
+      title: t("help.cat.results"),
+      items: [
+        { q: t("help.q.resultsLocked"), a: t("help.a.resultsLocked") },
+        { q: t("help.q.resultsContent"), a: t("help.a.resultsContent") },
+      ],
+    },
+    {
+      title: t("help.cat.admin"),
+      items: [
+        { q: t("help.q.openResults"), a: t("help.a.openResults") },
+        { q: t("help.q.linkDuplicates"), a: t("help.a.linkDuplicates") },
+        { q: t("help.q.grantJoker"), a: t("help.a.grantJoker") },
+        { q: t("help.q.reset"), a: t("help.a.reset") },
+      ],
+    },
+  ];
+}
+
+function openFaqModal() {
+  const overlay = document.createElement("div");
+  overlay.className = "edit-modal";
+  const panel = document.createElement("div");
+  panel.className = "edit-panel faq-panel";
+  panel.innerHTML = `
+    <div class="edit-header">
+      <h3>${t("help.title")}</h3>
+      <button class="lightbox-close" aria-label="${t("modal.close")}">x</button>
+    </div>
+    <div class="edit-body">
+      <p class="faq-intro">${t("help.intro")}</p>
+      <div class="faq-list"></div>
+    </div>
+  `;
+
+  const list = panel.querySelector(".faq-list");
+  faqTree().forEach((section) => {
+    const sec = document.createElement("details");
+    sec.className = "faq-section";
+    const summary = document.createElement("summary");
+    summary.textContent = section.title;
+    sec.appendChild(summary);
+
+    const itemsWrap = document.createElement("div");
+    itemsWrap.className = "faq-items";
+    section.items.forEach((item) => {
+      const qd = document.createElement("details");
+      qd.className = "faq-item";
+      const qs = document.createElement("summary");
+      qs.textContent = item.q;
+      const ans = document.createElement("p");
+      ans.textContent = item.a;
+      qd.append(qs, ans);
+      itemsWrap.appendChild(qd);
+    });
+
+    sec.appendChild(itemsWrap);
+    list.appendChild(sec);
+  });
+
+  const close = () => overlay.remove();
+  overlay.addEventListener("click", (e) => {
+    if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close();
+  });
+
+  overlay.appendChild(panel);
+  document.body.appendChild(overlay);
+}