v0.6.2 added help window

2026-03-10 14:43:25 -04:00
parent 605d10ae02
commit 85cfad6318
18 changed files with 435 additions and 172 deletions
--- a/frontend/src/components/HelpModal.jsx
+++ b/frontend/src/components/HelpModal.jsx
@@ -0,0 +1,71 @@
+import { useState, useEffect } from 'react';
+import { marked } from 'marked';
+import { api } from '../utils/api.js';
+
+// Configure marked for safe rendering
+marked.setOptions({ breaks: true, gfm: true });
+
+export default function HelpModal({ onClose, dismissed: initialDismissed }) {
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [dismissed, setDismissed] = useState(!!initialDismissed);
+
+  useEffect(() => {
+    api.getHelp()
+      .then(({ content }) => setContent(content))
+      .catch(() => setContent('# Getting Started\n\nHelp content could not be loaded.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleDismissToggle = async (e) => {
+    const val = e.target.checked;
+    setDismissed(val);
+    try {
+      await api.dismissHelp(val);
+      if (val) onClose(); // immediately close when "do not show again" checked
+    } catch (_) {}
+  };
+
+  return (
+    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="modal help-modal">
+
+        {/* Header */}
+        <div className="flex items-center justify-between" style={{ marginBottom: 16 }}>
+          <h2 className="modal-title" style={{ margin: 0 }}>Getting Started</h2>
+          <button className="btn-icon" onClick={onClose}>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+
+        {/* Scrollable markdown content */}
+        <div className="help-content">
+          {loading ? (
+            <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-tertiary)' }}>Loading…</div>
+          ) : (
+            <div
+              className="help-markdown"
+              dangerouslySetInnerHTML={{ __html: marked.parse(content) }}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="help-footer">
+          <label className="flex items-center gap-2 text-sm" style={{ cursor: 'pointer', color: 'var(--text-secondary)' }}>
+            <input
+              type="checkbox"
+              checked={dismissed}
+              onChange={handleDismissToggle}
+            />
+            Do not show again at login
+          </label>
+          <button className="btn btn-primary btn-sm" onClick={onClose}>Close</button>
+        </div>
+
+      </div>
+    </div>
+  );
+}