renaming, spawning forms if it does not exist, simplifying

cave/components/DownloadsPanel.js

@@ -0,0 +1,94 @@
+class DownloadsPanel extends Shadow {
+    render() {
+        ZStack(() => {
+            input("", "60vw")
+                .backgroundColor("var(--accent3)")
+                .color("var(--accent)")
+                .border("none")
+                .borderTop("1px solid var(--accent)")
+                .borderBottom("1px solid var(--accent)")
+                .outline("0.5px solid black")
+                .borderRadius(7, px)
+                .transition("padding .2s")
+                .padding(0.5, em)
+                .position("absolute")
+                .x(50, vw).y(7, em)
+                .transform("translate(-50%, -50%)")
+                .onInput(() => {
+                    console.log('typing')
+                })
+                .onFocus(function (focusing) {
+                    if(focusing) {
+                        this.style.padding = "1em"
+                        this.style.borderColor = "var(--darkred)"
+                    } else {
+                        this.style.padding = "0.5em"
+                        this.style.borderColor = "var(--accent)"
+                    }
+                })
+            
+            // VStack(() => {
+            //     const json = this.getJSONData()
+
+            //     p(json.length + " Entries")
+            //         .marginBottom(2, em)
+
+            //     // Split into two alternating columns
+            //     const left = []
+            //     const right = []
+                
+            //     for (let i = 0; i < 200; i++) {
+            //         if (i % 2 === 0) {
+            //             left.push(json[i])
+            //         } else {
+            //             right.push(json[i])
+            //         }
+            //     }
+                
+            //     console.log(left)
+            //     HStack(() => {
+            //         // LEFT COLUMN
+            //         VStack(() => {
+            //             for (let item of left) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+
+            //         // RIGHT COLUMN
+            //         VStack(() => {
+            //             for (let item of right) {
+            //                 p(item.name)
+            //                     .marginLeft(0, em)
+            //                     .marginBottom(0.1, em)
+            //             }
+            //         })
+            //         .marginLeft(3, em) // spacing between columns
+            //     })
+            // })
+            // .paddingLeft(5, em)
+            // .paddingTop(10, em)
+        })
+    }
+
+    getJSONData() {
+        const script = document.getElementById('jsonData');
+        if (!script) {
+            console.warn('initial-data script not found');
+            return null;
+        }
+
+        try {
+            // script.textContent is the raw JSON string
+            const data = JSON.parse(script.textContent);
+            console.log(data)
+            return data;
+        } catch (err) {
+            console.error('Failed to parse initial-data JSON:', err);
+            return null;
+        }
+    }
+}
+
+register(DownloadsPanel)

cave/components/Home.js

@@ -0,0 +1,36 @@
+import "./NavMenu.js"
+import "./HomePanel.js"
+import "./DownloadsPanel.js"
+
+class Home extends Shadow {
+
+    render() {
+        ZStack(() => {
+
+            NavMenu()
+
+            switch(window.location.pathname) {
+                case "/":
+                    HomePanel()
+                    break;
+                case "/downloads":
+                    DownloadsPanel()
+                    break;
+            }
+        })
+        .backgroundColor("var(--main)")
+        .display("block")
+        .width(100, vw).height("auto")
+        .color("var(--accent)")
+        .fontFamily("Arial")
+        .onAppear(() => {
+            document.body.style.backgroundColor = "var(--main)"
+        })
+        .onNavigate(() => {
+            console.log("navved")
+            this.rerender()
+        })
+    }
+}
+
+register(Home)

cave/components/HomePanel.js

@@ -0,0 +1,7 @@
+class HomePanel extends Shadow {
+    render() {
+
+    }
+}
+
+register(HomePanel)

cave/components/NavMenu.js

@@ -0,0 +1,37 @@
+class NavMenu extends Shadow {
+
+    NavButton(text) {
+        return p(text)
+            .cursor("default")
+            .onAppear(function () {
+                console.log(window.location.pathname, "/" + this.innerText.toLowerCase())
+                if(window.location.pathname === ("/" + this.innerText.toLowerCase())) {
+                    this.style.textDecoration = "underline"
+                }
+            })
+            .onHover(function (hovering) {
+                if(hovering) {
+                    this.style.textDecoration = "underline"
+                } else {
+                    this.style.textDecoration = ""
+                }
+            })
+            .onClick(function (done) {
+                if(done) {
+                    window.navigateTo(this.innerText === "Home" ? "/" : this.innerText.toLowerCase())
+                }
+            })
+    }
+
+    render() {
+        HStack(() => {
+            this.NavButton("Home")
+            this.NavButton("Downloads")
+        })
+        .gap(2, em)
+        .x(50, vw).y(5, vh)
+        .center()
+    }
+}
+
+register(NavMenu)