Flexible LHS and RHS with flex

webapp/components/panel.tsx

@@ -1,9 +1,8 @@
 import {useEffect, useRef} from "react";
 // @ts-ignore
 import iframeHtml from "bundle-text:./panel.html";
-import {Simulate} from "react-dom/test-utils";
 
-export function Panel({ html }: { html: string }) {
+export function Panel({ html, flex }: { html: string; flex: number }) {
   const iFrameRef = useRef<HTMLIFrameElement>(null);
   useEffect(() => {
     function loadContent() {
@@ -25,7 +24,7 @@ export function Panel({ html }: { html: string }) {
     };
   }, [html]);
   return (
-    <div className="panel">
+    <div className="panel" style={{ flex }}>
       <iframe srcDoc={iframeHtml} ref={iFrameRef} />
     </div>
   );

webapp/components/top_bar.tsx

@@ -1,6 +1,6 @@
-import { Notification } from "../types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileLines } from "@fortawesome/free-solid-svg-icons";
+import {Notification} from "../types";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faFileLines} from "@fortawesome/free-solid-svg-icons";
 
 function prettyName(s: string | undefined): string {
   if (!s) {
@@ -14,27 +14,35 @@ export function TopBar({
   unsavedChanges,
   notifications,
   onClick,
+  lhs,
+  rhs,
 }: {
   pageName?: string;
   unsavedChanges: boolean;
   notifications: Notification[];
   onClick: () => void;
+  lhs?: React.ReactNode;
+  rhs?: React.ReactNode;
 }) {
   return (
     <div id="top" onClick={onClick}>
-      <div className="inner">
-        <span className={`icon ${unsavedChanges ? "unsaved" : "saved"}`}>
-          <FontAwesomeIcon icon={faFileLines} />
-        </span>
-        <span className="current-page">{prettyName(pageName)}</span>
-        {notifications.length > 0 && (
-          <div className="status">
-            {notifications.map((notification) => (
-              <div key={notification.id}>{notification.message}</div>
-            ))}
-          </div>
-        )}
+      {lhs}
+      <div className="main">
+        <div className="inner">
+          <span className={`icon ${unsavedChanges ? "unsaved" : "saved"}`}>
+            <FontAwesomeIcon icon={faFileLines} />
+          </span>
+          <span className="current-page">{prettyName(pageName)}</span>
+          {notifications.length > 0 && (
+            <div className="status">
+              {notifications.map((notification) => (
+                <div key={notification.id}>{notification.message}</div>
+              ))}
+            </div>
+          )}
+        </div>
       </div>
+      {rhs}
     </div>
   );
 }