1 files changed, 70 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/report.js b/packages/meshbay-hub/src/meshbay_hub/static/report.js
new file mode 100644
index 0000000..f433780
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/report.js
@@ -0,0 +1,70 @@
+import { html, render, useEffect, useRef, useState } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+
+/**
+ * Ask why a file is being reported, drawn by the page like `ask.js`.
+ *
+ * Resolves `{ reason, detail }`, or null when cancelled. The reasons are the
+ * hub's own closed list (api/moderation.py `ReportRequest`), and the detail is
+ * bounded to what the hub keeps (256 characters).
+ */
+
+const REASONS = ['illegal', 'spam', 'copyright', 'other'];
+
+function ReportDialog({ name, onDone }) {
+  const [reason, setReason] = useState('illegal');
+  const [detail, setDetail] = useState('');
+  const firstRef = useRef(null);
+  useEffect(() => { if (firstRef.current) firstRef.current.focus(); }, []);
+
+  return html`
+    <div class="video-overlay" onClick=${(e) => {
+      if (e.target.classList.contains('video-overlay')) onDone(null);
+    }}>
+      <form class="music-detail playlist-modal" role="dialog" aria-modal="true"
+        onKeyDown=${(e) => { if (e.key === 'Escape') { e.preventDefault(); onDone(null); } }}
+        onSubmit=${(e) => {
+          e.preventDefault();
+          onDone({ reason, detail: detail.trim() || null });
+        }}>
+        <div class="playlist-modal-body">
+          <div class="ask-message"><strong>${t('report.title')}</strong></div>
+          <div class="ask-message file-name">${name}</div>
+          <p class="settings-hint">${t('report.hint')}</p>
+          <select ref=${firstRef} value=${reason}
+            onChange=${(e) => setReason(e.target.value)}>
+            ${REASONS.map((r) => html`
+              <option key=${r} value=${r}>${t('report.reason_' + r)}</option>`)}
+          </select>
+          <textarea maxlength="256" placeholder=${t('report.detail_placeholder')}
+            value=${detail} onInput=${(e) => setDetail(e.target.value)} />
+          <div class="playlist-modal-actions">
+            <button type="button" class="tb-btn" onClick=${() => onDone(null)}>
+              ${t('dialog.cancel')}</button>
+            <button type="submit" class="admin-btn">${t('report.send')}</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  `;
+}
+
+export function askReport(name) {
+  return new Promise((resolve) => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const previous = document.activeElement;
+    let settled = false;
+    const onDone = (value) => {
+      if (settled) return;
+      settled = true;
+      render(null, host);
+      host.remove();
+      if (previous && previous.isConnected && typeof previous.focus === 'function') {
+        previous.focus();
+      }
+      resolve(value);
+    };
+    render(html`<${ReportDialog} name=${String(name)} onDone=${onDone} />`, host);
+  });
+}