Ability to post in Forum

ui/site/apps/Forum/Forum.js

@@ -1,3 +1,5 @@
+import './MessagesPanel.js'
+
 css(`
     forum- {
         font-family: 'Bona';
@@ -23,8 +25,6 @@ css(`
 `)
 
 class Forum extends Shadow {
-    friends = []
-    conversations = []
 
     render() {
         ZStack(() => {
@@ -46,13 +46,25 @@ class Forum extends Shadow {
                 .gap(0, em)
 
                 VStack(() => {
-                    input("Message Hyperia", "80%")
+
+                    MessagesPanel()
+
+                    input("Message Hyperia", "93%")
                         .paddingVertical(1, em)
+                        .paddingHorizontal(2, em)
                         .color("var(--accent)")
                         .background("var(--darkbrown)")
                         .marginBottom(6, em)
                         .border("none")
+                        .fontSize(1, em)
+                        .onKeyDown(function (e) {
+                            if (e.key === "Enter") {
+                                window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
+                                this.value = ""
+                            }
+                        })
                 })
+                .gap(1, em)
                 .width(100, pct)
                 .alignHorizontal("center")
                 .alignVertical("end")
@@ -120,6 +132,8 @@ class Forum extends Shadow {
         .width(100, pct)
         .height(100, pct)
     }
+
+    
 }
 
 register(Forum)

ui/site/apps/Forum/MessagesPanel.js

@@ -0,0 +1,83 @@
+class MessagesPanel extends Shadow {
+    forums = [
+        "HY"
+    ]
+    messages = []
+
+    render() {
+        VStack(() => {
+            if(this.messages.length > 0) {
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.sentBy)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(this.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                }
+            } else {
+                div()
+                    .borderRadius(100, pct)
+                    .width(2, em).height(2, em)
+                    .x(45, pct).y(50, pct)
+                    .center()
+                    .backgroundColor("var(--accent")
+                    .transition("transform 1.75s ease-in-out")
+                    .onAppear(function () {
+                        let growing = true;
+
+                        setInterval(() => {
+                            if (growing) {
+                                this.style.transform = "scale(1.5)";
+                            } else {
+                                this.style.transform = "scale(0.7)";
+                            }
+                            growing = !growing;
+                        }, 750);
+                    });
+            }
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(95, pct)
+        .width(93, pct)
+        .paddingTop(2, em)
+        .paddingBottom(2, em)
+        .paddingHorizontal(2, em)
+        .backgroundColor("var(--darkbrown)")
+        .onAppear(async () => {
+            console.log("appear")
+            let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
+            if(!res) console.error("failed to get messages")
+            if(res.msg.length > 0 && this.messages.length === 0) {
+                console.log("rerendering", res.msg)
+                this.messages = res.msg
+                this.rerender()
+            }
+            window.addEventListener("new-message", (e) => {
+                this.messages = e.detail
+                this.rerender()
+            })
+        })
+        .scrollTop = this.scrollHeight
+    }
+
+    formatTime(str) {
+        // Extract the time part with am/pm
+        const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
+        if (!match) return null;
+
+        const [_, hourMin, ampm] = match;
+        return hourMin + ampm.toLowerCase();
+    }
+}
+
+register(MessagesPanel)