working on more concepts, tabbar, ids, etc.

frontend/app.tsx

@@ -9,24 +9,20 @@ import { Greet } from "./bindings/main/GreetService.js";
 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 { v4 as uuidv4 } from "uuid";
 
 import "/public/style.less";
 
 const jotaiStore = createStore();
-const counterSubject = rx.interval(1000).pipe(rx.map((i) => i));
-const timeAtom = jotai.atom("No time yet");
 
-Events.On("time", (time) => {
-    jotaiStore.set(timeAtom, time.data);
-});
+const tabArr = [
+    { name: "Tab 1", tabid: uuidv4() },
+    { name: "Tab 2", tabid: uuidv4() },
+    { name: "Tab 3", tabid: uuidv4() },
+];
 
-const nameAtom = jotai.atom("");
-const resultAtom = jotai.atom("");
-const counterAtom = atomWithObservable(() => counterSubject, {
-    initialValue: 10,
-});
+const activeTabIdAtom = jotai.atom(tabArr[0].tabid);
 
 const App = () => {
     return (
@@ -37,46 +33,35 @@ const App = () => {
 };
 
 const TabBar = () => {
+    const [activeTab, setActiveTab] = jotai.useAtom(activeTabIdAtom);
     return (
         <div className="tab-bar">
-            <div className="tab">Tab 1</div>
-            <div className="tab">Tab 2</div>
-            <div className="tab">Tab 3</div>
+            {tabArr.map((tab, idx) => {
+                return (
+                    <div
+                        key={idx}
+                        className={clsx("tab", { active: activeTab === tab.tabid })}
+                        onClick={() => setActiveTab(tab.tabid)}
+                    >
+                        {tab.name}
+                    </div>
+                );
+            })}
         </div>
     );
 };
 
 const Workspace = () => {
+    const activeTabId = jotai.useAtomValue(activeTabIdAtom);
     return (
         <div className="workspace">
             <TabBar />
-            <TabContent />
+            <TabContent tabId={activeTabId} />
         </div>
     );
 };
 
 const AppInner = () => {
-    const [name, setName] = jotai.useAtom(nameAtom);
-    const [result, setResult] = jotai.useAtom(resultAtom);
-    const counterVal = jotai.useAtomValue(counterAtom);
-    const timeVal = jotai.useAtomValue(timeAtom);
-
-    function doGreet() {
-        Greet(name)
-            .then((result) => {
-                setResult(result);
-            })
-            .catch((err) => {
-                console.log(err);
-            });
-    }
-
-    function handleKeyDown(e: any) {
-        if (e.key === "Enter") {
-            doGreet();
-        }
-    }
-
     return (
         <div className="mainapp">
             <div className="titlebar"></div>

frontend/block.tsx

@@ -42,14 +42,17 @@ 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 });
-    if (blockRef.current) {
+    React.useEffect(() => {
+        if (!blockRef.current) {
+            return;
+        }
         const rect = blockRef.current.getBoundingClientRect();
         const newWidth = parseInt(rect.width);
         const newHeight = parseInt(rect.height);
         if (newWidth !== dims.width || newHeight !== dims.height) {
             setDims({ width: newWidth, height: newHeight });
         }
-    }
+    }, [blockRef.current]);
     React.useEffect(() => {
         const term = new Terminal({
             theme: getThemeFromCSSVars(blockRef.current),

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
     "@wailsio/runtime": "latest",
     "less": "^4.2.0",
     "vite": "^5.0.0"

frontend/public/style.less

@@ -11,6 +11,7 @@
     --fixed-font: normal 12px / normal "Hack", monospace;
     --app-accent-color: rgb(88, 193, 66);
     --panel-bg-color: rgba(31, 33, 31, 1);
+    --highlight-bg-color: rgba(255, 255, 255, 0.2);
 }
 
 body {
@@ -70,7 +71,7 @@ body {
         border-right: 1px solid var(--border-color);
         cursor: pointer;
         &.active {
-            background-color: var(--border-color);
+            background-color: var(--highlight-bg-color);
         }
     }
 }

frontend/vite.config.ts

@@ -1,3 +1,6 @@
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-export default defineConfig({});
+export default defineConfig({
+    plugins: [react({})],
+});

main.go

@@ -8,7 +8,6 @@ package main
 import (
 	"embed"
 	"log"
-	"time"
 
 	"github.com/wavetermdev/thenextwave/pkg/blockstore"
 	"github.com/wavetermdev/thenextwave/pkg/wavebase"
@@ -67,18 +66,6 @@ func main() {
 		URL:              "/",
 	})
 
-	// Event Testing
-	go func() {
-		for {
-			now := time.Now().Format("03:04:05pm")
-			app.Events.Emit(&application.WailsEvent{
-				Name: "time",
-				Data: now,
-			})
-			time.Sleep(time.Second)
-		}
-	}()
-
 	// blocking
 	err = app.Run()