create utils class

src/app/foldernav.ts

@@ -2,6 +2,8 @@ import van from "vanjs-core";
 const v = van.tags;
 import type { FolderTree } from "../types/global";
 
+import * as u from "./utils";
+
 const folderTreeState = van.state<FolderTree | null>(null);
 
 async function openFolder() {
@@ -13,37 +15,20 @@ async function openFolder() {
 const FolderTreeView = () => {
     if (!folderTreeState.val) {
         return v.div(
-            {
+            { class: "text-center m-4" },
-                // style: "text-align: center; margin-top: 25px;",
-                class: "text-center m-4",
-            },
             v.p("No folder selected!"),
-            v.button(
+            u.Button(openFolder, "Open Folder"),
-                { class: "bg-green-500 p-2", onclick: openFolder },
-                "Open Folder",
-            ),
         );
     }
     return v.div(
-        v.span(
+        v.div(
-            { style: "font-weight: bold; margin-right: 1em;" },
+            { class: "flex w-full" },
-            folderTreeState.val?.name ?? "No folder",
+            v.span(
-        ),
+                { class: "font-bold mx-1 flex-1" },
-        v.button(
+                folderTreeState.val?.name ?? "No folder",
-            {
+            ),
-                onclick: openFolder,
+            u.InlineButton(openFolder, "Refresh current folder", "⟳"),
-                title: "Refresh current folder",
+            u.InlineButton(openFolder, "Open another folder", "📁"),
-                style: "margin-right: 0.5em;",
-            },
-            "⟳",
-        ),
-        v.button(
-            {
-                onclick: openFolder,
-                title: "Open another folder",
-                style: "margin-right: 0.5em;",
-            },
-            "📁",
         ),
         folderTreeState.val.children?.map(FsItemView) || [],
     );
@@ -56,7 +41,7 @@ const FsItemView = (tree: FolderTree): HTMLElement => {
     const isOpen = van.state(false);
     const children = () =>
         isOpen.val
-            ? v.div(tree.children?.map(FsItemView))
+            ? v.div({ class: "ml-4" }, tree.children?.map(FsItemView))
             : v.div({ ariaBusy: true });
     const folder = v.details(
         { ontoggle: () => (isOpen.val = folder.open) },

src/app/utils.ts

@@ -0,0 +1,19 @@
+import van from "vanjs-core";
+const v = van.tags;
+
+export const Button = (onclick: () => void, text: string) =>
+    v.button({ class: "bg-green-500 p-2", onclick }, text);
+
+export const InlineButton = (
+    onclick: () => void,
+    title: string,
+    text: string,
+) =>
+    v.button(
+        {
+            class: "bg-green-500 mx-1 w-[2em] flex-none",
+            title,
+            onclick,
+        },
+        text,
+    );

src/app/vite.config.mts

@@ -1,7 +0,0 @@
-import { defineConfig } from "vite";
-import tailwindcss from "@tailwindcss/vite";
-
-// https://vitejs.dev/config
-export default defineConfig({
-    plugins: [tailwindcss()],
-});