give the app a bit more structure, workspace/tab/block

frontend/app.tsx

@@ -5,6 +5,7 @@ import { atomWithObservable } from "jotai/utils";
 import { Greet } from "./bindings/main/GreetService.js";
 import { Events } from "@wailsio/runtime";
 import * as rx from "rxjs";
+import { clsx } from "clsx";
 
 import "/public/style.less";
 
@@ -30,6 +31,41 @@ const App = () => {
     );
 };
 
+const Tabs = () => {
+    return (
+        <div className="tabs">
+            <div className="tab">Tab 1</div>
+            <div className="tab">Tab 2</div>
+            <div className="tab">Tab 3</div>
+        </div>
+    );
+};
+
+const Block = () => {
+    return (
+        <div className="block">
+            <div>Block Content</div>
+        </div>
+    );
+};
+
+const TabContent = () => {
+    return (
+        <div className="tabcontent">
+            <Block />
+        </div>
+    );
+};
+
+const Workspace = () => {
+    return (
+        <div className="workspace">
+            <Tabs />
+            <TabContent />
+        </div>
+    );
+};
+
 const AppInner = () => {
     const [name, setName] = jotai.useAtom(nameAtom);
     const [result, setResult] = jotai.useAtom(resultAtom);
@@ -53,19 +89,9 @@ const AppInner = () => {
     }
 
     return (
-        <div>
+        <div className="mainapp">
-            <h1>Hello Wails!</h1>
+            <div className="titlebar"></div>
-            <input
+            <Workspace />
-                id="name"
-                type="text"
-                onChange={(e) => setName(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder="Your name"
-            />
-            <button onClick={() => doGreet()}>Greet</button>
-            <div id="result">{result}</div>
-            <div id="time">{timeVal}</div>
-            <div>Counter: {counterVal}</div>
         </div>
     );
 };

frontend/package.json

@@ -15,6 +15,7 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "jotai": "^2.8.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/public/style.less

@@ -3,7 +3,77 @@
 
 @import "./reset.less";
 
-#main {
+:root {
-    margin-top: 50px;
+    --main-bg-color: #000000;
-    padding: 20px;
+    --border-color: #333333;
+    --main-color: #f7f7f7;
+    --base-font: normal 15px / normal "Lato", sans-serif;
+}
+
+body {
+    display: flex;
+    flex-direction: row;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--main-bg-color);
+    color: var(--main-color);
+    font: var(--base-font);
+}
+
+#main,
+.mainapp {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.titlebar {
+    height: 35px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.workspace {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.tabs {
+    display: flex;
+    flex-direction: row;
+    height: 35px;
+    border-bottom: 1px solid var(--border-color);
+
+    .tab {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        height: 100%;
+        border-right: 1px solid var(--border-color);
+        cursor: pointer;
+        &.active {
+            background-color: var(--border-color);
+        }
+    }
+}
+
+.tabcontent {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
 }

frontend/yarn.lock

@@ -209,6 +209,11 @@
   dependencies:
     nanoid "^5.0.7"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 copy-anything@^2.0.1:
   version "2.0.6"
   resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz"