Release v0.1.3

webui/src/layout/HelpMenu.tsx

@@ -1,7 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { HelpCircle, Info, BookOpen, GitBranch } from "lucide-react";
+import packageInfo from "../../package.json";
 import Button from "../components/Button";
+import Dialog from "../components/Dialog";
+import { usePlatformModules } from "../platform/ModuleContext";
+import type { PlatformWebModule } from "../types";
 import { helpContextForPathname, helpQueryForContext, type HelpContext } from "../utils/helpContext";
 
 export default function HelpMenu() {
@@ -11,6 +15,7 @@ export default function HelpMenu() {
   const wrapRef = useRef<HTMLDivElement>(null);
   const location = useLocation();
   const helpContext = helpContextForPathname(location.pathname);
+  const modules = usePlatformModules();
 
   useEffect(() => {
     function openContextHelp(event: KeyboardEvent) {
@@ -69,54 +74,50 @@ export default function HelpMenu() {
         </div>
       )}
       {contextOpen && <ContextHelpModal context={helpContext} onClose={() => setContextOpen(false)} />}
-      {aboutOpen && <AboutModal onClose={() => setAboutOpen(false)} />}
+      {aboutOpen && <AboutModal modules={modules} onClose={() => setAboutOpen(false)} />}
     </div>
   );
 }
 
 function ContextHelpModal({ context, onClose }: { context: HelpContext; onClose: () => void }) {
   return (
-    <div className="overlay-backdrop" role="dialog" aria-modal="true" data-help-context={context.id}>
-      <div className="modal-panel">
-        <header className="modal-header">
-          <h2>Context help</h2>
-          <button className="modal-close" onClick={onClose}>×</button>
-        </header>
-        <div className="modal-body">
-          <div className="help-panel-section">
-            <h3>{context.title}</h3>
-            <p className="mono-small">Help context: {context.id}</p>
-            <p className="muted">This area is prepared for context-sensitive help. Future help content can use this context identifier, or the equivalent help query parameter <span className="kbd">{helpQueryForContext(context)}</span>, to open the right page or section.</p>
-          </div>
-          <div className="help-panel-section">
-            <h3>Next actions</h3>
-            <p className="muted">The first guided help content can cover campaign creation, review, attachment resolution and sending preparation.</p>
-          </div>
-        </div>
-        <footer className="modal-footer"><Button variant="primary" onClick={onClose}>Close</Button></footer>
+    <Dialog
+      open
+      title="Context help"
+      onClose={onClose}
+      footer={<Button variant="primary" onClick={onClose}>Close</Button>}
+    >
+      <div className="help-panel-section" data-help-context={context.id}>
+        <h3>{context.title}</h3>
+        <p className="mono-small">Help context: {context.id}</p>
+        <p className="muted">This area is prepared for context-sensitive help. Future help content can use this context identifier, or the equivalent help query parameter <span className="kbd">{helpQueryForContext(context)}</span>, to open the right page or section.</p>
       </div>
-    </div>
+      <div className="help-panel-section">
+        <h3>Next actions</h3>
+        <p className="muted">The first guided help content can cover campaign creation, review, attachment resolution and sending preparation.</p>
+      </div>
+    </Dialog>
   );
 }
 
-function AboutModal({ onClose }: { onClose: () => void }) {
+function AboutModal({ modules, onClose }: { modules: PlatformWebModule[]; onClose: () => void }) {
+  const moduleSummary = modules.length
+    ? modules.map((module) => `${module.label} v${module.version}`).join(", ")
+    : "Core shell only";
+
   return (
-    <div className="overlay-backdrop" role="dialog" aria-modal="true">
-      <div className="modal-panel">
-        <header className="modal-header">
-          <h2>About MultiMailer</h2>
-          <button className="modal-close" onClick={onClose}>×</button>
-        </header>
-        <div className="modal-body">
-          <div className="about-logo" />
-          <p><strong>MultiMailer WebUI</strong></p>
-          <p className="muted">Version 0.1.0 — early development build.</p>
-          <p>MultiMailer is a local-first / server-assisted campaign mailer for structured, personalized bulk messages with attachment resolution, review workflows and auditable sending.</p>
-          <p><a href="https://add-ideas.de" target="_blank" rel="noreferrer">add-ideas.de</a></p>
-          <p className="muted">License: project license pending / to be finalized. Backend components are currently development prototypes.</p>
-        </div>
-        <footer className="modal-footer"><Button variant="primary" onClick={onClose}>Close</Button></footer>
-      </div>
-    </div>
+    <Dialog
+      open
+      title="About GovOPlaN"
+      onClose={onClose}
+      footer={<Button variant="primary" onClick={onClose}>Close</Button>}
+    >
+      <div className="about-logo" />
+      <p><strong>GovOPlaN WebUI</strong></p>
+      <p className="muted">Core WebUI version {packageInfo.version}</p>
+      <p>GovOPlaN is a modular platform runner for governed workflows, tenant-aware administration, managed files, mail settings and campaign execution.</p>
+      <p className="muted">Installed modules: {moduleSummary}</p>
+      <p><a href="https://add-ideas.de" target="_blank" rel="noreferrer">add-ideas.de</a></p>
+    </Dialog>
   );
 }