better find/replace (with highlighting of all occurrences) + more consistent error visualization

src/App/BottomPanel/BottomPanel.tsx

@@ -6,7 +6,6 @@ import "./BottomPanel.css";
 import { PersistentDetailsLocalStorage } from "../Components/PersistentDetails";
 import { Logo } from "@/App/Logo/Logo";
 import { AppState } from "../App";
-import { FindReplace } from "./FindReplace";
 import { VisualEditorState } from "../VisualEditor/VisualEditor";
 import { Setters } from "../makePartialSetter";
 
@@ -16,7 +15,8 @@ export function BottomPanel(props: {errors: TraceableError[], setEditorState: Di
   const [greeting, setGreeting] = useState(
     <div className="greeter" style={{textAlign:'center'}}>
       <span style={{fontSize: 18, fontStyle: 'italic'}}>
-        Welcome to <Logo/>
+        Welcome to
+        <Logo width={300} height="auto" style={{verticalAlign: 'middle'}}/>
       </span>
     </div>);
 
@@ -26,23 +26,38 @@ export function BottomPanel(props: {errors: TraceableError[], setEditorState: Di
     }, 2000);
   }, []);
 
-  return <div className="toolbar bottom">
+  return <div className="bottom">
+    {greeting}
     {/* {props.showFindReplace &&
       <div>
         <FindReplace setCS={props.setEditorState} hide={() => props.setShowFindReplace(false)}/>
       </div>
     } */}
-    <div className={"statusBar" + props.errors.length ? " error" : ""}>
+    <div className={"stackHorizontal statusBar" + (props.errors.length ? " error" : "")}>
+      <div style={{flexGrow:1}}>
       <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>
+          <summary>{props.errors.length} errors</summary>
+          <div style={{maxHeight: '20vh', overflow: 'auto'}}>
+          {props.errors.map(({message, shapeUid})=>
+            <div>
+              {shapeUid}: {message}
+            </div>)}
+          </div>
+        </PersistentDetailsLocalStorage>
+      </div>
+      {/* <div ></div> */}
+      <div>
+        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>
+      </div>
     </div>
-    {greeting}
   </div>;
 }