add about dialog

src/App/About.tsx

@@ -0,0 +1,11 @@
+import logo from "../../artwork/logo.svg";
+
+export function About() {
+  return <div style={{display: 'inline-block', backgroundColor: 'white', width: 500, padding: 4}}>
+    <p><img src={logo}/></p>
+    <p>StateBuddy is a <a href="https://dl.acm.org/doi/10.1016/0167-6423(87)90035-9">statechart</a> editing, simulation, debugging and testing environment inspired by <a href="https://dl.acm.org/doi/10.1145/3417990.3421401">CouchEdit</a>.</p>
+    <p>It was originally created for teaching Statecharts to university students, but likely is a useful tool for other purposes as well.</p>
+    <p>StateBuddy is <a href="https://deemz.org/git/research/statebuddy">open source</a>.</p>
+    <p>For commerical use, <a href="mailto:joeri.exelmans@gmail.com">e&#x2011;mail me</a> for permission.</p>
+    </div>;
+}

src/App/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 
 import { emptyStatechart, Statechart } from "../statecharts/abstract_syntax";
 import { handleInputEvent, initialize } from "../statecharts/interpreter";
@@ -25,6 +25,8 @@ export function App() {
   const [rtIdx, setRTIdx] = useState<number|undefined>();
   const [time, setTime] = useState<TimeMode>({kind: "paused", simtime: 0});
 
+  const [modal, setModal] = useState<ReactElement|null>(null);
+
   const refRightSideBar = useRef<HTMLDivElement>(null);
 
   function onInit() {
@@ -144,7 +146,19 @@ export function App() {
 
   console.log(ast);
 
-  return <Stack sx={{height:'100vh'}}>
+  return <>
+  {/* Modal dialog */}
+  {modal && <div
+    onMouseDown={() => setModal(null)}
+    style={{width: '100%', height: '100%', position:'absolute', textAlign: 'center', backgroundColor: 'rgba(127,127,127,0.5)' }}>
+    <div
+      style={{position: 'relative', top: '50%', transform: 'translateY(-50%)'}}>
+      <span onMouseDown={e => e.stopPropagation()}>
+      {modal}
+      </span>
+    </div>
+  </div>}
+  <Stack sx={{height:'100vh'}}>
     {/* Top bar */}
     <Box
       sx={{
@@ -156,7 +170,7 @@ export function App() {
       }}>
       <TopPanel
         rt={rtIdx === undefined ? undefined : rt[rtIdx]}
-        {...{rtIdx, ast, time, setTime, onInit, onClear, onRaise, onBack, mode, setMode}}
+        {...{rtIdx, ast, time, setTime, onInit, onClear, onRaise, onBack, mode, setMode, setModal}}
       />
     </Box>
 
@@ -195,7 +209,8 @@ export function App() {
     }}>
       <BottomPanel {...{errors}}/>
     </Box>
-  </Stack>;
+  </Stack>
+  </>;
 }
 
 export default App;

src/App/BottomPanel.tsx

@@ -6,7 +6,7 @@ import "./BottomPanel.css";
 import head from "../head.svg" ;
 
 export function BottomPanel(props: {errors: TraceableError[]}) {
-  const [greeting, setGreeting] = useState(<b><img src={head}/>&emsp;"Welcome to StateBuddy, buddy!"</b>);
+  const [greeting, setGreeting] = useState(<><b><img src={head}/>&emsp;"Welcome to StateBuddy, buddy!"</b></>);
 
   useEffect(() => {
     setTimeout(() => {

src/App/TopPanel.tsx

@@ -13,10 +13,12 @@ import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
 import StopIcon from '@mui/icons-material/Stop';
 import UndoIcon from '@mui/icons-material/Undo';
 import RedoIcon from '@mui/icons-material/Redo';
+import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
 
 import { formatTime } from "./util";
 import { InsertMode } from "../VisualEditor/VisualEditor";
 import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo";
+import { About } from "./About";
 
 export type TopPanelProps = {
   rt?: BigStep,
@@ -30,6 +32,7 @@ export type TopPanelProps = {
   ast: Statechart,
   mode: InsertMode,
   setMode: Dispatch<SetStateAction<InsertMode>>,
+  setModal: Dispatch<SetStateAction<ReactElement>>,
 }
 
 function RountangleIcon(props: {kind: string}) {
@@ -63,7 +66,7 @@ function HistoryIcon(props: {kind: "shallow"|"deep"}) {
 }
 
 
-export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, onBack, ast, mode, setMode}: TopPanelProps) {
+export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = useState(1);
   const [showKeys, setShowKeys] = useState(true);
@@ -322,5 +325,9 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
 
     </div>
 
+    &emsp;
+
+    <button onClick={() => setModal(<About setModal={setModal}/>)}><InfoOutlineIcon fontSize="small"/></button>
+
   </div></>;
 }