Rudimentary tab support

src/app/editorgrid.ts

@@ -16,20 +16,43 @@ const EditorWrapper = (editor: any, del: any, k: any) =>
         v.div({ class: "flex-auto h-4" }, editor.val.dom),
     );
 
-const editors = vanX.reactive([]);
+const editors = vanX.reactive([[]]);
+const currentTab = van.state(0);
+van.derive(() => console.log("Setting tab to", currentTab.val));
 
 export function addEditor() {
-    editors.push(vanX.noreactive(new Editor()));
+    console.log("Adding editor to tab ", currentTab.val, editors);
+    editors[currentTab.val].push(vanX.noreactive(new Editor()));
+}
+export function addTab() {
+    editors.push([]);
 }
 
-export const EditorGrid = v.main({
-    class: "flex flex-auto gap-4 overflow-x-auto",
+const TabHeader = (tab: any, del: any, k: any) =>
+    v.div(
+        {
+            class: () =>
+                `flex-auto flex ${currentTab.val === k ? "bg-green-500" : ""}`,
+            onclick: () => (currentTab.val = k),
+        },
+        v.span({ class: "mx-1 flex-1" }, "Tab " + k),
+        u.InlineButton(del, "Close", "❌"),
+    );
+const EditorGrid = (tab: any, del: any, k: any) => {
+    console.log("Rendering", tab.val, "with key", k);
+    const main = v.main({
+        class: "flex flex-auto gap-4 overflow-x-auto min-width-4",
+        hidden: () => k !== currentTab.val,
     });
-vanX.list(EditorGrid, editors, EditorWrapper);
-
-// const grid = v.main({
-//     class: "flex flex-auto gap-4 overflow-x-auto",
-// });
-// export const EditorGrid = vanX.list(grid, editors, EditorWrapper);
-// vanX.list(document.getElementById("editorGrid"), editors, EditorWrapper);
-// van.add(document.getElementById("editorGrid"), EditorGrid);
+    vanX.list(main, tab.val, EditorWrapper);
+    return main;
+};
+const TabBar = v.div({ class: "flex-none flex" });
+export const EditorTabs = v.div(
+    {
+        class: "flex flex-col flex-auto min-w-4",
+    },
+    TabBar,
+);
+vanX.list(TabBar, editors, TabHeader);
+vanX.list(EditorTabs, editors, EditorGrid);

src/app/renderer.ts

@@ -7,25 +7,20 @@ const v = van.tags;
 
 import { Editor } from "./editor";
 import { FolderTreeView } from "./foldernav";
-import { EditorGrid, addEditor } from "./editorgrid";
+import { EditorTabs, addTab, addEditor } from "./editorgrid";
 import * as u from "./utils";
 
 const app = v.div(
-    { class: "h-screen max-h-screen flex flex-col" },
-    v.header(
-        { class: "flex-none" },
-        v.button({ id: "addEditor", onclick: addEditor }, "Add Editor"),
-    ),
-    v.div(
-        { id: "content", class: "flex flex-1 min-h-0" },
+    { class: "h-screen max-h-screen w-screen max-w-screen flex" },
     v.aside(
         {
             class: "flex-none resize-x overflow-x-hidden overflow-y-scroll w-3xs min-w-32",
         },
+        u.InlineButton(addTab, "Add Tab", "+Tab"),
+        u.InlineButton(addEditor, "Add Editor", "+File"),
         FolderTreeView,
     ),
-        EditorGrid,
-    ),
+    EditorTabs,
 );
 
 van.add(document.body, app);

src/app/utils.ts

@@ -11,7 +11,7 @@ export const InlineButton = (
 ) =>
     v.button(
         {
-            class: "bg-green-500 mx-1 w-[2em] flex-none",
+            class: "mx-1 w-[2em] flex-none",
             title,
             onclick,
         },