From 80b02fd19f96140230e8e9e7795570ac4fa60e7c Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Sun, 26 Apr 2026 16:37:39 +0700
Subject: [PATCH] feat(folio-webApp): add main entrypoint and index.html

main.kt mirrors the iOS entry point: builds DriverFactory + AppGraph
factory, hooks browser back-gesture into WebBackGesture, then mounts
the shared App composable into ComposeViewport.
---
 .../src/wasmJsMain/kotlin/app/folio/main.kt   | 33 +++++++++++++++++++
 .../src/wasmJsMain/resources/index.html       | 16 +++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 examples/folio/app/webApp/src/wasmJsMain/kotlin/app/folio/main.kt
 create mode 100644 examples/folio/app/webApp/src/wasmJsMain/resources/index.html

diff --git a/examples/folio/app/webApp/src/wasmJsMain/kotlin/app/folio/main.kt b/examples/folio/app/webApp/src/wasmJsMain/kotlin/app/folio/main.kt
new file mode 100644
index 0000000..54cdadc
--- /dev/null
+++ b/examples/folio/app/webApp/src/wasmJsMain/kotlin/app/folio/main.kt
@@ -0,0 +1,33 @@
+@file:OptIn(ExperimentalComposeUiApi::class, kotlin.js.ExperimentalWasmJsInterop::class)
+
+package app.folio
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import app.folio.core.data.DriverFactory
+import app.folio.db.LedgerDatabase
+import app.folio.di.AppGraph
+import app.folio.ui.WebBackGesture
+import dev.zacsweers.metro.createGraphFactory
+import kotlinx.browser.document
+import kotlinx.browser.window
+import org.w3c.dom.events.Event
+
+fun main() {
+    val driverFactory = DriverFactory()
+    val graphFactory = createGraphFactory<AppGraph.Factory>()
+
+    window.history.pushState(null, "", window.location.href)
+    window.addEventListener("popstate", { _: Event ->
+        if (WebBackGesture.dispatch()) {
+            window.history.pushState(null, "", window.location.href)
+        }
+    })
+
+    val target = document.getElementById("app") ?: document.body!!
+    ComposeViewport(target) {
+        App(graphBuilder = {
+            graphFactory.create(LedgerDatabase(driverFactory.create()))
+        })
+    }
+}
diff --git a/examples/folio/app/webApp/src/wasmJsMain/resources/index.html b/examples/folio/app/webApp/src/wasmJsMain/resources/index.html
new file mode 100644
index 0000000..6927ef9
--- /dev/null
+++ b/examples/folio/app/webApp/src/wasmJsMain/resources/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <title>Folio</title>
+    <style>
+        html, body { margin: 0; padding: 0; height: 100%; background: #000; color: #fff; font-family: system-ui, sans-serif; }
+        #app { height: 100%; }
+    </style>
+</head>
+<body>
+<div id="app"></div>
+<script src="composeApp.js"></script>
+</body>
+</html>