Move header into Mainframe and controls to header

ui/MainLayout.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component";
+import { Header } from "./header";
 import { useDarkMode } from "./providers/dark-mode-provider";
 
 // IDs of windows in the mosaic layout
@@ -13,6 +14,8 @@ const WindowTitles = {
 };
 
 type Props = {
+  langId: string;
+  langName: string;
   renderEditor: () => React.ReactNode;
   renderRenderer: () => React.ReactNode;
   renderInput: () => React.ReactNode;
@@ -46,20 +49,27 @@ export const MainLayout = (props: Props) => {
   };
 
   return (
-    <Mosaic<keyof typeof MOSAIC_MAP>
-      className={mosaicClass}
-      initialValue={INITIAL_LAYOUT}
-      renderTile={(windowId, path) => (
-        <MosaicWindow<number>
-          path={path}
-          title={WindowTitles[windowId]}
-          toolbarControls={
-            windowId === "editor" ? props.renderExecControls() : <span />
-          }
-        >
-          {MOSAIC_MAP[windowId]()}
-        </MosaicWindow>
-      )}
-    />
+    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      <Header
+        langId={props.langId}
+        langName={props.langName}
+        renderExecControls={props.renderExecControls}
+      />
+      <div style={{ flexGrow: 1 }}>
+        <Mosaic<keyof typeof MOSAIC_MAP>
+          className={mosaicClass}
+          initialValue={INITIAL_LAYOUT}
+          renderTile={(windowId, path) => (
+            <MosaicWindow<number>
+              path={path}
+              title={WindowTitles[windowId]}
+              toolbarControls={<span />}
+            >
+              {MOSAIC_MAP[windowId]()}
+            </MosaicWindow>
+          )}
+        />
+      </div>
+    </div>
   );
 };