1, 4: Fixing 404 after logged out, adding market entry

2025-11-10 04:05:21 -06:00
parent 6f9ed49b2e
commit 41c0bb57a3
16 changed files with 494 additions and 136 deletions
--- a/ui/site/apps/Forum/Forum.js
+++ b/ui/site/apps/Forum/Forum.js
@@ -0,0 +1,178 @@
+css(`
+    messages- {
+        font-family: 'Bona';
+    }
+
+    messages- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Messages extends Shadow {
+    friends = []
+    conversations = []
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                VStack(() => {
+                    h3("Friends")
+                        .marginTop(0)
+                        .marginBottom(1, em)
+                        .marginLeft(0.4, em)
+
+                    if (this.friends.length > 1) {
+                        for(let i = 0; i < this.friends.length; i++) {
+                            p(this.friends[i].name)
+                        }
+                    } else {
+                        p("No Friends!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("1px solid var(--periwinkle)")
+
+                VStack(() => {
+                    h3("Conversations")
+                        .marginTop(0)
+                        .marginBottom(1, em)
+                        .marginLeft(0.4, em)
+
+                    if (this.conversations.length > 1) {
+                        for(let i = 0; i < this.conversations.length; i++) {
+                            p(this.conversations[i].name)
+                        }
+                    } else {
+                        p("No Conversations!")
+                    }
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .paddingTop(2, em)
+                .gap(0, em)
+                .borderRight("1px solid var(--periwinkle)")
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+            .borderTop("1px solid var(--periwinkle)")
+
+            p("0 Items")
+                .position("absolute")
+                .x(50, vw).y(50, vh)
+                .transform("translate(-50%, -50%)")
+
+            HStack(() => {
+                input("Search messages...", "45vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+
+                button("+ New Message")
+                    .width(13, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--periwinkle)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    SidebarName(name) {
+        let firstLetter = name[0]
+
+        HStack(() => {
+            div(firstLetter)
+                .display("flex")
+                .justifyContent("center")
+                .alignItems("center")   
+                .width(1.5, em)
+                .height(1.5, em)
+                .border("1px solid var(--periwinkle)")
+                .borderRadius(100, "%")
+            p(name)
+                .marginLeft(1, em)
+        })
+        .alignItems("center")
+        .padding(5, px)
+        .borderRadius(0.5, em)
+        .cursor("default")
+        .onHover(function (hovering) {
+            if(hovering) {
+                this.style.background = "var(--green)"
+
+            } else {
+                this.style.background = "transparent"
+
+            }
+        })
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Messages)