more tab/block structure

frontend/app.tsx

@@ -10,6 +10,7 @@ import { Events } from "@wailsio/runtime";
 import * as rx from "rxjs";
 import { clsx } from "clsx";
 import { Block } from "./block.tsx";
+import { TabContent } from "./tab.tsx";
 
 import "/public/style.less";
 
@@ -35,9 +36,9 @@ const App = () => {
     );
 };
 
-const Tabs = () => {
+const TabBar = () => {
     return (
-        <div className="tabs">
+        <div className="tab-bar">
             <div className="tab">Tab 1</div>
             <div className="tab">Tab 2</div>
             <div className="tab">Tab 3</div>
@@ -45,18 +46,10 @@ const Tabs = () => {
     );
 };
 
-const TabContent = () => {
-    return (
-        <div className="tabcontent">
-            <Block />
-        </div>
-    );
-};
-
 const Workspace = () => {
     return (
         <div className="workspace">
-            <Tabs />
+            <TabBar />
             <TabContent />
         </div>
     );

frontend/block.less

@@ -9,6 +9,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    min-height: 0;
 }
 
 .block .block-header {
@@ -26,4 +27,6 @@
     flex-grow: 1;
     width: 100%;
     background-color: green;
+    overflow: hidden;
+    min-height: 0;
 }

frontend/block.tsx

@@ -38,7 +38,7 @@ function getThemeFromCSSVars(el: Element): ITheme {
     return theme;
 }
 
-const Block = () => {
+const Block = ({ blockId }: { blockId: string }) => {
     const blockRef = React.useRef<HTMLDivElement>(null);
     const connectElemRef = React.useRef<HTMLDivElement>(null);
     const [dims, setDims] = React.useState({ width: 0, height: 0 });
@@ -71,8 +71,8 @@ const Block = () => {
     return (
         <div className="block" ref={blockRef}>
             <div key="header" className="block-header">
-                <div>
+                <div className="text-fixed">
-                    Block {dims.width}x{dims.height}
+                    Block [{blockId.substring(0, 8)}] {dims.width}x{dims.height}
                 </div>
             </div>
             <div key="conntectElem" className="block-term-connectelem" ref={connectElemRef}></div>

frontend/package.json

@@ -21,6 +21,7 @@
     "jotai": "^2.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "uuid": "^9.0.1"
   }
 }

frontend/public/style.less

@@ -1,4 +1,4 @@
-// Copyright 2023, Command Line Inc.
+// Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
 @import "./reset.less";
@@ -8,6 +8,7 @@
     --border-color: #333333;
     --main-color: #f7f7f7;
     --base-font: normal 15px / normal "Lato", sans-serif;
+    --fixed-font: normal 12px / normal "Hack", monospace;
     --app-accent-color: rgb(88, 193, 66);
     --panel-bg-color: rgba(31, 33, 31, 1);
 }
@@ -23,6 +24,14 @@ body {
     overflow: hidden;
 }
 
+.flex-spacer {
+    flex-grow: 1;
+}
+
+.text-fixed {
+    font: var(--fixed-font);
+}
+
 #main,
 .mainapp {
     display: flex;
@@ -42,9 +51,10 @@ body {
     flex-direction: column;
     width: 100%;
     flex-grow: 1;
+    overflow: hidden;
 }
 
-.tabs {
+.tab-bar {
     display: flex;
     flex-direction: row;
     height: 35px;
@@ -64,13 +74,3 @@ body {
         }
     }
 }
-
-.tabcontent {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    min-height: 0;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-}

frontend/tab.less

@@ -0,0 +1,31 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.tabcontent {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    min-height: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .block-container {
+        display: flex;
+        flex-direction: row;
+        flex: 1 0 0;
+        height: 100%;
+        overflow: hidden;
+        border: 1px solid var(--border-color);
+        margin: 5px;
+        border-radius: 4px;
+        padding: 5px;
+    }
+
+    .block1 {
+    }
+
+    .block2 {
+    }
+}

frontend/tab.tsx

@@ -0,0 +1,27 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as jotai from "jotai";
+import { Block } from "./block.tsx";
+import { v4 as uuidv4 } from "uuid";
+
+import "./tab.less";
+
+const TabContent = () => {
+    const blockId1 = React.useMemo(() => uuidv4(), []);
+    const blockId2 = React.useMemo(() => uuidv4(), []);
+
+    return (
+        <div className="tabcontent">
+            <div className="block-container block1">
+                <Block blockId={blockId1} />
+            </div>
+            <div className="block-container block2">
+                <Block blockId={blockId2} />
+            </div>
+        </div>
+    );
+};
+
+export { TabContent };

frontend/yarn.lock

@@ -472,6 +472,11 @@ tslib@^2.1.0, tslib@^2.3.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 vite@^5.0.0:
   version "5.2.11"
   resolved "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz"