Move all logic to TS; remove all HTML other than <body>

This commit is contained in:
Quinten Kock 2025-10-20 01:48:05 +02:00
parent 75e0d1b3d5
commit 99ae7f9b07
2 changed files with 20 additions and 21 deletions

View File

@ -7,23 +7,6 @@
<link href="/src/app/index.css" rel="stylesheet" />
</head>
<body>
<div id="app" class="h-screen max-h-screen flex flex-col">
<header class="flex-none">
Miller code editor - welcome!
<button id="addEditor">Add Editor</button>
</header>
<div id="content" class="flex flex-1 min-h-0">
<aside
class="flex-none resize-x overflow-x-hidden overflow-y-scroll w-3xs min-w-32"
>
<nav></nav>
</aside>
<main
id="editorGrid"
class="flex flex-auto gap-4 overflow-x-auto"
></main>
</div>
<script type="module" src="/src/app/renderer.ts"></script>
</div>
</body>
</html>

View File

@ -10,8 +10,24 @@ import { FolderTreeView } from "./foldernav";
import { EditorGrid, addEditor } from "./editorgrid";
import * as u from "./utils";
van.add(document.querySelector("aside nav"), FolderTreeView);
van.add(document.getElementById("editorGrid"), EditorGrid);
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" },
v.aside(
{
class: "flex-none resize-x overflow-x-hidden overflow-y-scroll w-3xs min-w-32",
},
FolderTreeView,
),
EditorGrid,
),
);
van.add(document.body, app);
document.getElementById("addEditor")?.addEventListener("click", addEditor);
addEditor();