cleanup code a bit more

src/App/BottomPanel/BottomPanel.css

@@ -0,0 +1,10 @@
+.errorStatus {
+  /* background-color: rgb(230,0,0); */
+  background-color: var(--error-color);
+  color: white;
+}
+
+.bottom {
+  border-top: 1px lightgrey solid;
+  background-color: rgb(255, 249, 235);
+}

src/App/BottomPanel/BottomPanel.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { TraceableError } from "../../statecharts/parser";
+
+import "./BottomPanel.css";
+
+import logo from "../../../artwork/logo-playful.svg";
+import { PersistentDetailsLocalStorage } from "../PersistentDetails";
+
+export function BottomPanel(props: {errors: TraceableError[]}) {
+  const [greeting, setGreeting] = useState(
+    <div style={{textAlign:'center'}}>
+      <span style={{fontSize: 18, fontStyle: 'italic'}}>
+        Welcome to <img src={logo} style={{maxWidth:'100%'}}/>
+      </span>
+    </div>);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setGreeting(<></>);
+    }, 2000);
+  }, []);
+
+  return <div className="toolbar bottom">
+    {greeting}
+    {props.errors.length > 0 &&
+      <div className="errorStatus">
+        <PersistentDetailsLocalStorage initiallyOpen={false} localStorageKey="errorsExpanded">
+          <summary>{props.errors.length} errors</summary>
+          <div style={{maxHeight: '25vh', overflow: 'auto'}}>
+          {props.errors.map(({message, shapeUid})=>
+            <div>
+              {shapeUid}: {message}
+            </div>)}
+          </div>
+        </PersistentDetailsLocalStorage>
+      </div>
+    }
+  </div>;
+}