From 456b85bf8f39ae92a15de10a34d94424ebec7cd1 Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Sat, 15 Nov 2025 13:34:47 +0100
Subject: [PATCH] better (less annoying) colors + default editor state is
 error-free

---
 src/App/App.tsx                     |  4 ++--
 src/App/BottomPanel/BottomPanel.css |  2 +-
 src/App/BottomPanel/BottomPanel.tsx | 11 ++++-------
 src/index.css                       |  2 +-
 src/statecharts/concrete_syntax.ts  | 19 +++++++++++++++++--
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/App/App.tsx b/src/App/App.tsx
index 9e21513..8390c59 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -15,7 +15,7 @@ import { useEditor } from "./hooks/useEditor";
 import { useSimulator } from "./hooks/useSimulator";
 import { useUrlHashState } from "../hooks/useUrlHashState";
 import { plants } from "./plants";
-import { emptyState } from "@/statecharts/concrete_syntax";
+import { initialEditorState } from "@/statecharts/concrete_syntax";
 import { ModalOverlay } from "./Overlays/ModalOverlay";
 import { FindReplace } from "./BottomPanel/FindReplace";
 import { useCustomMemo } from "@/hooks/useCustomMemo";
@@ -89,7 +89,7 @@ export function App() {
   const persist = useUrlHashState<VisualEditorState | AppState & {editorState: VisualEditorState}>(
     recoveredState => {
       if (recoveredState === null) {
-        setEditHistory(() => ({current: emptyState, history: [], future: []}));
+        setEditHistory(() => ({current: initialEditorState, history: [], future: []}));
       }
       // we support two formats
       // @ts-ignore
diff --git a/src/App/BottomPanel/BottomPanel.css b/src/App/BottomPanel/BottomPanel.css
index 4b58b63..1725d16 100644
--- a/src/App/BottomPanel/BottomPanel.css
+++ b/src/App/BottomPanel/BottomPanel.css
@@ -21,7 +21,7 @@
 
 .greeter {
   /* border-top: 1px var(--separator-color) solid; */
-  background-color: var(--statusbar-bg-color);
+  background-color: var(--background-color);
 }
 
 .bottom {
diff --git a/src/App/BottomPanel/BottomPanel.tsx b/src/App/BottomPanel/BottomPanel.tsx
index fece9bf..bf1258d 100644
--- a/src/App/BottomPanel/BottomPanel.tsx
+++ b/src/App/BottomPanel/BottomPanel.tsx
@@ -13,10 +13,10 @@ import gitRev from "@/git-rev.txt";
 
 export function BottomPanel(props: {errors: TraceableError[], setEditorState: Dispatch<(state: VisualEditorState) => VisualEditorState>} & AppState & Setters<AppState>) {
   const [greeting, setGreeting] = useState(
-    <div className="greeter" style={{textAlign:'center'}}>
+    <div className="greeter" style={{textAlign:'center'}} onClick={() => setGreeting(<></>)}>
       <span style={{fontSize: 18, fontStyle: 'italic'}}>
         Welcome to
-        <Logo width={300} height="auto" style={{verticalAlign: 'middle'}}/>
+        <Logo width={250} height="auto" style={{verticalAlign: 'middle'}}/>
       </span>
     </div>);
 
@@ -45,18 +45,15 @@ export function BottomPanel(props: {errors: TraceableError[], setEditorState: Di
           </div>
         </PersistentDetailsLocalStorage>
       </div>
-      {/* <div ></div> */}
-      <div>
+      <div style={{display: 'flex', alignItems: 'center'}}>
         switch to&nbsp;
         {location.host === "localhost:3000" ?
           <a href={`https://deemz.org/public/statebuddy/${location.hash}`}>production</a>
           : <a href={`http://localhost:3000/${location.hash}`}>development</a>
         }
         &nbsp;mode
-      </div>
       &nbsp;|&nbsp;
-      <div>
-        Rev: <a title={"git"} href={`https://deemz.org/git/research/statebuddy/commit/${gitRev}`}>{gitRev.slice(0,8)}</a>
+        Rev:&nbsp;<a title={"git"} href={`https://deemz.org/git/research/statebuddy/commit/${gitRev}`}>{gitRev.slice(0,8)}</a>
       </div>
     </div>
   </div>;
diff --git a/src/index.css b/src/index.css
index 373097f..6444175 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,7 +17,7 @@ html, body {
   --accent-border-color: light-dark(blue, rgb(64, 185, 255));
   --accent-opaque-color: light-dark(#ccccff, #305b73);
 
-  --statusbar-bg-color: light-dark(rgb(157, 200, 255), rgb(48, 48, 68));
+  --statusbar-bg-color: light-dark(rgb(225, 229, 235), rgb(48, 48, 68));
   --statusbar-fg-color: light-dark(rgb(0, 0, 0), white);
   --statusbar-error-bg-color: light-dark(rgb(163, 0, 0), rgb(255, 82, 82));
   --statusbar-error-fg-color: light-dark(white, black);
diff --git a/src/statecharts/concrete_syntax.ts b/src/statecharts/concrete_syntax.ts
index c74b9b9..ffd1ca6 100644
--- a/src/statecharts/concrete_syntax.ts
+++ b/src/statecharts/concrete_syntax.ts
@@ -40,8 +40,23 @@ export type ConcreteSyntax = {
 export type RectSide = "left" | "top" | "right" | "bottom";
 export type ArrowPart = "start" | "end";
 
-export const emptyState: VisualEditorState = {
-  rountangles: [], texts: [], arrows: [], diamonds: [], history: [], nextID: 0, selection: [],
+export const initialEditorState: VisualEditorState = {
+  rountangles: [{
+    uid:"0",
+    topLeft:{x:76.25,y:122.5},
+    size:{x:133.75,y:103.75},
+    kind:"and"
+  }],
+  diamonds:[],
+  history:[],
+  arrows:[{
+    uid:"39",
+    start:{x:85,y:67.5},
+    end:{x:116.25,y:116.25}
+  }],
+  texts:[],
+  nextID: 1,
+  selection: [],
 };
 
 // used to find which rountangle an arrow connects to (src/tgt)