partiful link

new quill
cleaning
2026-01-22 19:21:38 -06:00 · 2025-12-26 06:13:29 -06:00 · 2025-12-19 04:49:28 -06:00 · 2025-12-19 04:34:53 -06:00 · 2025-12-17 22:16:41 -06:00 · 2025-12-17 22:16:38 -06:00
96 changed files with 3478 additions and 1279 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,8 @@
 .DS_Store
 package-lock.json
 node_modules
-_/build
-content
-server/.env
-abetaccredited.html
-qrCodes/qr_codes
 .env
+
+content
+db/db.json
+qrCodes/qr_codes
--- a/db/db.json
+++ b/db/db.json
@@ -1,323 +0,0 @@
-{
-    "nodes": {
-        "HY-1": {
-            "fullName": "Founder"
-        },
-        "MEMBER-samrussell99@pm.me": {
-            "email": "samrussell99@pm.me",
-            "firstName": "Sam",
-            "lastName": "Russell",
-            "password": "$argon2id$v=19$m=65536,t=3,p=4$PDu5qx47zzY0dX0/4iQuqw$JxePLouwOEi2Q0wA4JHQQ4GwvqAvxqWhj7n9aC8HZIk",
-            "address": {
-                "address1": "2014 E 9th St",
-                "address2": "Unit A",
-                "zip": "78702",
-                "state": "Texas",
-                "city": "Austin"
-            },
-            "tokenUsed": "810387b6-851e-4883-b9a3-c59703dc0fc9",
-            "joined": "11.24.2025-12:54:360784am"
-        },
-        "TOKEN-810387b6-851e-4883-b9a3-c59703dc0fc9": {
-            "index": 1,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "810387b6-851e-4883-b9a3-c59703dc0fc9",
-            "used": true
-        },
-        "TOKEN-d0b417c4-d69a-4958-9e1d-0658176d2710": {
-            "index": 2,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "d0b417c4-d69a-4958-9e1d-0658176d2710",
-            "used": false
-        },
-        "TOKEN-1719b6d8-9b13-4720-ab94-9af5cbe42137": {
-            "index": 3,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "1719b6d8-9b13-4720-ab94-9af5cbe42137",
-            "used": false
-        },
-        "TOKEN-16659e04-afbb-4192-9195-90f2f49277b2": {
-            "index": 4,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "16659e04-afbb-4192-9195-90f2f49277b2",
-            "used": false
-        },
-        "TOKEN-88abc4b3-8416-4499-9fa7-6778841e4b23": {
-            "index": 5,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "88abc4b3-8416-4499-9fa7-6778841e4b23",
-            "used": false
-        },
-        "TOKEN-e3342dd5-a214-4280-9488-f48f91e728ce": {
-            "index": 6,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "e3342dd5-a214-4280-9488-f48f91e728ce",
-            "used": false
-        },
-        "TOKEN-a8176432-4e72-42b7-ac9a-2d799039f729": {
-            "index": 7,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "a8176432-4e72-42b7-ac9a-2d799039f729",
-            "used": false
-        },
-        "TOKEN-1d57b6e0-e6c3-4ab6-808f-72b64b8303ee": {
-            "index": 8,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "1d57b6e0-e6c3-4ab6-808f-72b64b8303ee",
-            "used": false
-        },
-        "TOKEN-67264f06-c4b1-4334-8ba8-0e5e045021df": {
-            "index": 9,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "67264f06-c4b1-4334-8ba8-0e5e045021df",
-            "used": false
-        },
-        "TOKEN-e9fa5701-d90f-45d0-8e2b-7c3ef9022362": {
-            "index": 10,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "e9fa5701-d90f-45d0-8e2b-7c3ef9022362",
-            "used": false
-        },
-        "TOKEN-c082880a-f12c-4eb0-b136-e11df9e6bde8": {
-            "index": 11,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "c082880a-f12c-4eb0-b136-e11df9e6bde8",
-            "used": false
-        },
-        "TOKEN-083a18f5-6491-4dbf-9a28-2b22b6b4a5bd": {
-            "index": 12,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "083a18f5-6491-4dbf-9a28-2b22b6b4a5bd",
-            "used": false
-        },
-        "TOKEN-af94443c-a0c5-4c58-a2e5-16a8c6d573c8": {
-            "index": 13,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "af94443c-a0c5-4c58-a2e5-16a8c6d573c8",
-            "used": false
-        },
-        "TOKEN-5673dd07-25b1-441f-abbc-89b5e5a2b3e9": {
-            "index": 14,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "5673dd07-25b1-441f-abbc-89b5e5a2b3e9",
-            "used": false
-        },
-        "TOKEN-f2b30979-1ece-41e1-87ec-6a102a21e809": {
-            "index": 15,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "f2b30979-1ece-41e1-87ec-6a102a21e809",
-            "used": false
-        },
-        "TOKEN-d52c1bcc-8b97-4535-8395-dfdab4ee543a": {
-            "index": 16,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "d52c1bcc-8b97-4535-8395-dfdab4ee543a",
-            "used": false
-        },
-        "TOKEN-7fed8604-1801-4500-8615-2ac8eb50c896": {
-            "index": 17,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "7fed8604-1801-4500-8615-2ac8eb50c896",
-            "used": false
-        },
-        "TOKEN-e312c854-8df7-4c68-9f3f-1822b718b092": {
-            "index": 18,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "e312c854-8df7-4c68-9f3f-1822b718b092",
-            "used": false
-        },
-        "TOKEN-5979853c-1755-4403-bea5-3b111384ffb3": {
-            "index": 19,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "5979853c-1755-4403-bea5-3b111384ffb3",
-            "used": false
-        },
-        "TOKEN-d93307e4-a0a0-4b4a-86d0-897ca5382cdd": {
-            "index": 20,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "d93307e4-a0a0-4b4a-86d0-897ca5382cdd",
-            "used": false
-        },
-        "TOKEN-b73b803a-c49d-4ea9-b8ed-f04be0373157": {
-            "index": 21,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "b73b803a-c49d-4ea9-b8ed-f04be0373157",
-            "used": false
-        },
-        "TOKEN-5a0a7a8c-f080-4708-a2e1-fcd2d613adb1": {
-            "index": 22,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "5a0a7a8c-f080-4708-a2e1-fcd2d613adb1",
-            "used": false
-        },
-        "TOKEN-99c547fe-1ec1-4ddc-bfcb-b95d73fdd907": {
-            "index": 23,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "99c547fe-1ec1-4ddc-bfcb-b95d73fdd907",
-            "used": false
-        },
-        "TOKEN-6da35b58-81ea-478f-9ef5-8a70b407bfcf": {
-            "index": 24,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "6da35b58-81ea-478f-9ef5-8a70b407bfcf",
-            "used": false
-        },
-        "TOKEN-402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6": {
-            "index": 25,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6",
-            "used": false
-        },
-        "TOKEN-04afd891-1250-4a6d-b239-3bdd06082c71": {
-            "index": 26,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "04afd891-1250-4a6d-b239-3bdd06082c71",
-            "used": false
-        },
-        "TOKEN-c807c67f-2d8d-4f54-b657-8cb3aaf19b28": {
-            "index": 27,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "c807c67f-2d8d-4f54-b657-8cb3aaf19b28",
-            "used": false
-        },
-        "TOKEN-5cf7639e-22b3-4469-8155-d490cc164367": {
-            "index": 28,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "5cf7639e-22b3-4469-8155-d490cc164367",
-            "used": false
-        },
-        "TOKEN-90e82173-c7f8-47d9-9619-b333e032d1af": {
-            "index": 29,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "90e82173-c7f8-47d9-9619-b333e032d1af",
-            "used": false
-        },
-        "TOKEN-5eed9d33-81ea-420f-834b-a71b01eb6f54": {
-            "index": 30,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "5eed9d33-81ea-420f-834b-a71b01eb6f54",
-            "used": false
-        },
-        "TOKEN-2e96ecaa-bf8e-403c-89f3-8b2924788df3": {
-            "index": 31,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "2e96ecaa-bf8e-403c-89f3-8b2924788df3",
-            "used": false
-        },
-        "TOKEN-7edb52b1-35ce-42c6-8cd0-341f3ee38f4c": {
-            "index": 32,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "7edb52b1-35ce-42c6-8cd0-341f3ee38f4c",
-            "used": false
-        },
-        "TOKEN-ad5f483d-338f-4efc-936d-8253854b38a5": {
-            "index": 33,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "ad5f483d-338f-4efc-936d-8253854b38a5",
-            "used": false
-        },
-        "TOKEN-d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69": {
-            "index": 34,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69",
-            "used": false
-        },
-        "TOKEN-382a7ffd-9227-4edc-8bc6-8c3ae82ccf14": {
-            "index": 35,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "382a7ffd-9227-4edc-8bc6-8c3ae82ccf14",
-            "used": false
-        },
-        "TOKEN-27762835-f211-4c72-8187-b3f87ccb846c": {
-            "index": 36,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "27762835-f211-4c72-8187-b3f87ccb846c",
-            "used": false
-        },
-        "TOKEN-7344f7ce-2609-46f4-b2cb-28dafc547270": {
-            "index": 37,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "7344f7ce-2609-46f4-b2cb-28dafc547270",
-            "used": false
-        },
-        "TOKEN-fd23ce26-d78a-49fc-b198-1a73071a2db4": {
-            "index": 38,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "fd23ce26-d78a-49fc-b198-1a73071a2db4",
-            "used": false
-        },
-        "TOKEN-869227be-1c80-421f-a17e-e052929c43e3": {
-            "index": 39,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "869227be-1c80-421f-a17e-e052929c43e3",
-            "used": false
-        },
-        "TOKEN-3ac9b048-a132-4fad-bb2d-9bb1820592c8": {
-            "index": 40,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "3ac9b048-a132-4fad-bb2d-9bb1820592c8",
-            "used": false
-        },
-        "TOKEN-7d9c71ac-646b-4a6b-b758-f55f632cec6f": {
-            "index": 41,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "7d9c71ac-646b-4a6b-b758-f55f632cec6f",
-            "used": false
-        },
-        "TOKEN-6ad3a682-14fa-48d7-96bd-fd61b2b314dd": {
-            "index": 42,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "6ad3a682-14fa-48d7-96bd-fd61b2b314dd",
-            "used": false
-        },
-        "TOKEN-c02ae012-089a-4c3b-bd28-8d7cedc2df0d": {
-            "index": 43,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "c02ae012-089a-4c3b-bd28-8d7cedc2df0d",
-            "used": false
-        },
-        "TOKEN-df82c2b6-bd8c-4b69-bc8c-a1d7df53727c": {
-            "index": 44,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "df82c2b6-bd8c-4b69-bc8c-a1d7df53727c",
-            "used": false
-        },
-        "TOKEN-1444c46c-4985-4e52-8cbf-f6d77795deae": {
-            "index": 45,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "1444c46c-4985-4e52-8cbf-f6d77795deae",
-            "used": false
-        },
-        "TOKEN-38954160-0865-4f55-b190-e2a5a2268df1": {
-            "index": 46,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "38954160-0865-4f55-b190-e2a5a2268df1",
-            "used": false
-        },
-        "TOKEN-0e88166f-936a-4156-a89d-e71e825db36e": {
-            "index": 47,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "0e88166f-936a-4156-a89d-e71e825db36e",
-            "used": false
-        },
-        "TOKEN-a94aee8f-c47d-4606-a734-69355dfc642e": {
-            "index": 48,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "a94aee8f-c47d-4606-a734-69355dfc642e",
-            "used": false
-        },
-        "TOKEN-de407269-9e31-485b-a857-5ba5d1a5ca5b": {
-            "index": 49,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "de407269-9e31-485b-a857-5ba5d1a5ca5b",
-            "used": false
-        },
-        "TOKEN-f2016b40-a179-47ec-a415-84caa7da8521": {
-            "index": 50,
-            "url": "https://hyperia.so/signup?token=",
-            "uuid": "f2016b40-a179-47ec-a415-84caa7da8521",
-            "used": false
-        }
-    },
-    "edges": {}
-}
--- a/main.js
+++ b/main.js
@@ -2,6 +2,8 @@
 const { app, BrowserWindow, nativeImage } = require('electron');
 const path = require('path');

+process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";
+
 function createWindow() {
 	const win = new BrowserWindow({
 			show: false, // window is hidden
@@ -9,8 +11,7 @@ function createWindow() {
 			height: 800,
 			webPreferences: {
 			nodeIntegration: true,
-		contextIsolation: false,
-		icon: path.join(__dirname, '_', 'fabric.png')
+			contextIsolation: false
 		}
 	});
 	win.loadFile(path.join(__dirname, 'index.html'));
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
 		"cors": "^2.8.5",
 		"dotenv": "^17.2.3",
 		"express": "^4.18.2",
+		"express-useragent": "^2.0.2",
 		"jsonwebtoken": "^9.0.2",
 		"moment": "^2.30.1",
+		"stripe": "^20.0.0",
 		"ws": "^8.18.3",
 		"zod": "^4.1.12"
 	},
--- a/server/auth.js
+++ b/server/auth.js
@@ -28,6 +28,21 @@ export default class AuthHandler {
        }
    }

+    getProfile(req, res) {
+        const token = req.cookies.auth_token;
+        if (!token) return res.status(401).send({ error: "No auth token" });
+
+        try {
+            const payload = jwt.verify(token, process.env.JWT_SECRET);
+            const email = payload.email;
+
+            const user = db.members.getByEmail(email);
+            res.send({ email: user.email, name: user.firstName + " " + user.lastName });
+        } catch (err) {
+            res.status(401).send({ error: "Invalid token" });
+        }
+    }
+
    async login(req, res) {
        const { email, password } = req.body;
        let foundUser = global.db.members.getByEmail(email)
@@ -40,7 +55,8 @@ export default class AuthHandler {
        if (!valid) {
            res.status(400).json({ error: 'Incorrect password.' });
        } else {
-            const payload = { id: foundUser.id };
+            const payload = { email: foundUser.email };
+            console.log(payload)
            const secret = process.env.JWT_SECRET;
            const options = { expiresIn: "2h" };
            const token = jwt.sign(payload, secret, options);
--- a/server/db/db.js
+++ b/server/db/db.js
@@ -5,16 +5,28 @@ import QuillDB from "../_/quilldb.js"
 import Titles from "./model/Titles.js"
 import Members from './model/Members.js'
 import Tokens from './model/Tokens.js'
+import Payments from "./model/Payments.js"
+import Posts from "./model/Forum/Posts.js"
+import Conversations from "./model/Messages/Conversations.js"
+import Messages from "./model/Messages/Messages.js"

 export default class Database {
    titles = new Titles()
    members = new Members()
    tokens = new Tokens()
+    payments = new Payments()
+    posts = new Posts()
+    conversations = new Conversations()
+    messages = new Messages()

    fromID = {
        "HY": this.titles,
        "MEMBER": this.members,
-        "TOKEN": this.tokens
+        "TOKEN": this.tokens,
+        "PAYMENT": this.payments,
+        "POST": this.posts,
+        "CONVERSATION": this.conversations,
+        "DM": this.messages
    }

    constructor() {
@@ -39,7 +51,7 @@ export default class Database {
            try {
                let collection = this.fromID[type]
                if(collection) {
-                    collection.save(node)
+                    collection.save(node, id)
                } else {
                    throw new Error("Type does not exist for node: ", id)
                }
@@ -48,7 +60,11 @@ export default class Database {
            }

        }
-        this.saveData()
+
+        setInterval(() => {
+            console.log("saving db")
+            global.db.saveData()
+        }, 5000)
    }

    async saveData() {
@@ -63,12 +79,20 @@ export default class Database {
        let arrs = [
            this.titles.entries,
            this.members.entries,
-            this.tokens.entries
+            this.tokens.entries,
+            this.posts.entries,
+            this.conversations.entries,
+            this.messages.entries,
+            this.payments.entries,
        ]
        let ids = [
            Object.entries(this.titles.ids),
            Object.entries(this.members.ids),
            Object.entries(this.tokens.ids),
+            Object.entries(this.posts.ids),
+            Object.entries(this.conversations.ids),
+            Object.entries(this.messages.ids),
+            Object.entries(this.payments.ids),
        ]
        for(let i=0; i<arrs.length; i++) {
            let arr = arrs[i]
--- a/server/db/model/Forum/Posts.js
+++ b/server/db/model/Forum/Posts.js
@@ -0,0 +1,56 @@
+import OrderedObject from "../OrderedObject.js"
+const { z } = require("zod")
+
+export default class Posts extends OrderedObject {
+    schema = z.object({
+        text: z.string(),
+        time: z.string(),
+        sentBy: z.string()
+    })
+
+    makeID(forum, number) {
+        return `POST-${forum}-${number}`
+    }
+
+    save(post, id) {
+        let result = this.schema.safeParse(post)
+        if(result.success) {
+            try {
+                super.add(id, post)
+            } catch(e) {
+                console.error(e)
+                throw e
+            }
+        } else {
+            console.error("Failed parsing member: ", result.error)
+            throw new global.ServerError(400, "Invalid Member Data!: ");
+        }
+    }
+
+    get(forum, number) {
+        let result = []
+        let limit = Math.min(number, this.entries.length)
+        for(let i=1; i<=limit; i++) {
+            let id = this.makeID(forum, i)
+            let post = this.entries[this.ids[id]]
+            let {firstName, lastName} = global.db.members.get(post.sentBy)
+            let seededObj = {
+                ...post
+            }
+            seededObj.sentByID = post.sentBy
+            seededObj.sentBy = firstName + " " + lastName
+            result.push(seededObj)
+        }
+        return result
+    }
+
+    async add(text, forum, userEmail) {
+        let newPost = {}
+        newPost.text = text
+        newPost.sentBy = db.members.getIDFromEmail(userEmail)
+        newPost.time = global.currentTime()
+
+        let idNumber = this.entries.length+1
+        super.add(this.makeID(forum, idNumber), newPost)
+    }
+}
--- a/server/db/model/Members.js
+++ b/server/db/model/Members.js
@@ -11,6 +11,7 @@ export default class Members extends OrderedObject {
        city: z.string()
    })
    schema = z.object({
+        id: z.number(),
        email: z.string().email(),
        firstName: z.string(),
        lastName: z.string(),
@@ -26,7 +27,7 @@ export default class Members extends OrderedObject {
    isHashed = (s) => {return s.startsWith("$argon2")}

    save(member) {
-        let id = `MEMBER-${member.email}`
+        let id = `MEMBER-${member.id}`
        let result = this.schema.safeParse(member)
        if(result.success) {
            try {
@@ -45,29 +46,32 @@ export default class Members extends OrderedObject {
        newMember.tokenUsed = tokenID
        const hash = await argon2.hash(newMember.password);
        newMember.password = hash
-        newMember.joined = this.currentTime()
+        newMember.joined = global.currentTime()
+        newMember.id = this.entries.length+1
        this.save(newMember)
    }

+    get(id) {
+        return this.entries[this.ids[id]]
+    }
+
    getByEmail(email) {
-        return super.get(`MEMBER-${email}`)
-    }
-
-    currentTime() {
-        const now = new Date();
-
-        const month = String(now.getMonth() + 1).padStart(2, "0");
-        const day = String(now.getDate()).padStart(2, "0");
-        const year = now.getFullYear();
-
-        let hours = now.getHours();
-        const ampm = hours >= 12 ? "pm" : "am";
-        hours = hours % 12 || 12; // convert to 12-hour format
-
-        const minutes = String(now.getMinutes()).padStart(2, "0");
-        const seconds = String(now.getSeconds()).padStart(2, "0");
-        const ms = String(now.getMilliseconds()).padStart(4, "0"); // 4-digit like "5838"
-
-        return `${month}.${day}.${year}-${hours}:${minutes}:${seconds}${ms}${ampm}`;
+        for(let i=0; i<this.entries.length; i++) {
+            if(this.entries[i].email === email) {
+                return this.entries[i]
+            }
+        }
+        return null
+    }
+
+    getIDFromEmail(email) {
+        let index = 0
+        for(let i=0; i<this.entries.length; i++) {
+            if(this.entries[i].email === email) {
+                index = i
+                break
+            }
+        }
+        return Object.entries(this.ids)[index][0]
    }
 }
--- a/server/db/model/Messages/Conversations.js
+++ b/server/db/model/Messages/Conversations.js
@@ -0,0 +1,62 @@
+import OrderedObject from "../OrderedObject.js"
+const { z } = require("zod")
+
+export default class Conversations extends OrderedObject {
+
+    schema = z.object({
+        id: z.number(),
+        between: z.array(z.string()),
+        lastUpdated: z.string()
+    }).strict()
+
+    save(convo) {
+        let id = `CONVERSATION-${convo.id}`
+        let result = this.schema.safeParse(convo)
+        if(result.success) {
+            try {
+                super.add(id, convo)
+            } catch(e) {
+                console.error(e)
+                throw e
+            }
+        } else {
+            console.error(result.error)
+            throw new global.ServerError(400, "Invalid Conversation Data!");
+        }
+    }
+
+    get(convoID) {
+        console.log("convo getting, ", convoID)
+        return this.entries[this.ids[convoID]]
+    }
+
+    getByMember(userID) {
+        let convos = []
+
+        function populateMemberProfilesFromIDs(ids) {
+            let result = []
+            for(let i=0; i<ids.length; i++) {
+                result[i] = global.db.members.get(ids[i])
+            }
+            return result
+        }
+
+        for(let i=0; i<this.entries.length; i++) {
+            let convo = this.entries[i]
+            console.log(convo, userID)
+            if(convo.between.includes(userID)) {
+
+                console.log("found user convo: ", convo.id)
+                let messages = global.db.messages.getByConversation(`CONVERSATION-${convo.id}`)
+                let result = {
+                    ...convo,
+                    messages,
+                }
+                result.between = populateMemberProfilesFromIDs(convo.between)
+                
+                convos.push(result)
+            }
+        }
+        return convos
+    }
+}
--- a/server/db/model/Messages/Messages.js
+++ b/server/db/model/Messages/Messages.js
@@ -0,0 +1,57 @@
+import OrderedObject from "../OrderedObject.js"
+const { z } = require("zod")
+
+export default class Messages extends OrderedObject {
+
+    schema = z.object({
+        id: z.number(),
+        conversation: z.string(),
+        from: z.string(),
+        text: z.string(),
+        time: z.string()
+    }).strict()
+
+    save(msg) {
+        let id = `DM-${msg.id}`
+        let result = this.schema.safeParse(msg)
+        if(result.success) {
+            try {
+                super.add(id, msg)
+            } catch(e) {
+                console.error(e)
+                throw e
+            }
+        } else {
+            console.error(result.error)
+            throw new global.ServerError(400, "Invalid Conversation Data!");
+        }
+    }
+
+    add(convo, text, userID) {
+        let newMessage = {}
+        newMessage.time = global.currentTime()
+        newMessage.from = userID
+        newMessage.conversation = convo
+        newMessage.text = text
+        newMessage.id = this.entries.length+1
+        console.log(newMessage)
+        this.save(newMessage)
+    }
+
+    getByConversation(convoID) {
+        let result = []
+        for(let i=0; i<this.entries.length; i++) {
+            let entry = this.entries[i]
+            if(entry.conversation = convoID) {
+                let userID = entry.from
+                let fromUser = global.db.members.get(userID)
+                let newObj = {
+                    ...entry
+                }
+                newObj.from = fromUser
+                result.push(newObj)
+            }
+        }
+        return result
+    }
+}
--- a/server/db/model/OrderedObject.js
+++ b/server/db/model/OrderedObject.js
@@ -1,9 +1,10 @@
 export default class OrderedObject {
    entries = []
    ids = {}
+    indexes = []

    add(id, data) {
-        if(this.get(id)) {
+        if(this.ids[id]) {
            console.error(`Can't add item ${id}: id already exists`)
            throw new global.ServerError(400, `Member with this email already exists`)
        }
@@ -23,12 +24,4 @@ export default class OrderedObject {
            return this.entries[this.ids[key]]
        }
    }
-
-    get(key) {
-        if (typeof key === "number") {
-            return this.entries[key]
-        } else {
-            return this.entries[this.ids[key]]
-        }
-    }
 }
--- a/server/db/model/Payments.js
+++ b/server/db/model/Payments.js
@@ -0,0 +1,42 @@
+import OrderedObject from "./OrderedObject.js"
+const { z } = require("zod")
+
+export default class Payments extends OrderedObject {
+
+    schema = z.object({
+        id: z.number(),
+        name: z.string(),
+        email: z.string(),
+        time: z.string(),
+        amount: z.number(),
+        product: z.string(),
+    })
+
+    save(payment) {
+        let id = `PAYMENT-${payment.id}`
+        let result = this.schema.safeParse(payment)
+        if(result.success) {
+            try {
+                super.add(id, payment)
+            } catch(e) {
+                console.error(e)
+                throw e
+            }
+        } else {
+            console.error(result.error)
+            throw new global.ServerError(400, "Invalid Member Data!");
+        }
+    }
+
+    add(paymentObj) {
+        let toSave = {
+            id: this.entries.length+1,
+            ...paymentObj
+        }
+        this.save(toSave)
+    }
+
+    get(id) {
+        return this.entries[this.ids[`PAYMENT-${id}`]]
+    }
+}
--- a/server/db/model/Titles.js
+++ b/server/db/model/Titles.js
@@ -4,7 +4,6 @@ export default class Titles extends OrderedObject {

    save(newTitle) {
        let id = `HY-${this.entries.length+1}`
-        console.log(id)
        if(this.validate(id, newTitle)) {
            try {
                super.add(id, newTitle)
--- a/server/db/model/Tokens.js
+++ b/server/db/model/Tokens.js
@@ -36,6 +36,6 @@ export default class Tokens extends OrderedObject {
    }

    get(uuid) {
-        return super.get(`TOKEN-${uuid}`)
+        return this.entries[this.ids[`TOKEN-${uuid}`]]
    }
 }
--- a/server/handlers.js
+++ b/server/handlers.js
@@ -1,12 +0,0 @@
-import { broadcast } from './ws.js';
-
-const handlers = {
-    updateLocation(req, res) {
-        const { name, latitude, longitude, timestamp } = req.body;
-        console.log(`Received location: (${name}, ${latitude}, ${longitude}) at ${timestamp}`);
-        broadcast("update-location", { name, latitude, longitude, timestamp });
-        res.json({ success: true });
-    }
-}
-
-export default handlers;
--- a/server/index.js
+++ b/server/index.js
@@ -6,11 +6,13 @@ const fs = require('fs');
 const chalk = require('chalk');
 const moment = require('moment');
 const path = require('path');
+const useragent = require("express-useragent");

-import { initWebSocket } from './ws.js'
+import "./util.js"
+import Socket from './ws/ws.js'
 import Database from "./db/db.js"
 import AuthHandler from './auth.js';
-import handlers from "./handlers.js";
+import PaymentsHandler from "./payments.js"

 class Server {
    db;
@@ -19,9 +21,16 @@ class Server {
    DBPath = path.join(__dirname, './db')

    registerRoutes(router) {
-        // router.post('/api/location', handlers.updateLocation)
+        /* Stripe */
+        router.post("/create-checkout-session", PaymentsHandler.danceTicket)
+        router.post("/webhook", express.raw({ type: "application/json" }), PaymentsHandler.webhook)
+
+        /* Auth */
        router.post('/login', this.auth.login)
+        router.get('/profile', this.auth.getProfile)
        router.get('/signout', this.auth.logout)
+
+        /* Site */
        router.get('/signup', this.verifyToken, this.get)
        router.post('/signup', this.verifyToken, this.newUserSubmission)
        router.get('/db/images/*', this.getUserImage)
@@ -111,12 +120,13 @@ class Server {

        let privateSite = () => {
            let filePath;
+            let platformFolder = req.useragent.isMobile ? "mobile" : "desktop"
            if(url.startsWith("/_")) {
                filePath = path.join(this.UIPath, url);
            } else if(url.includes("75820185")) {
-                filePath = path.join(this.UIPath, "site", url.split("75820185")[1]);
+                filePath = path.join(this.UIPath, platformFolder, url.split("75820185")[1]);
            } else {
-                filePath = path.join(this.UIPath, "site", "index.html");
+                filePath = path.join(this.UIPath, platformFolder, "index.html");
            }

            res.sendFile(filePath);
@@ -133,10 +143,10 @@ class Server {
        const formattedDate = moment().format('M.D');
        const formattedTime = moment().format('h:mma');
        if(req.url.includes("/api/")) {
-            console.logclean(chalk.blue(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
+            console.log(chalk.blue(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
        } else {
            if(req.url === "/")
-                console.logclean(chalk.gray(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
+                console.log(chalk.gray(`       ${req.method} ${req.url} | ${formattedDate} ${formattedTime}`));
        }
        next(); 
    }
@@ -145,9 +155,9 @@ class Server {
        const originalSend = res.send;
        res.send = function (body) {
            if(res.statusCode >= 400) {
-                console.logclean(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
+                console.log(chalk.blue( `<-${chalk.red(res.statusCode)}- ${req.method} ${req.url} | ${chalk.red(body)}`));
            } else {
-                console.logclean(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
+                console.log(chalk.blue(`<-${res.statusCode}- ${req.method} ${req.url}`));
            }
            originalSend.call(this, body);
        };
@@ -159,10 +169,12 @@ class Server {
        global.db = this.db
        this.auth = new AuthHandler()
        const app = express();
+        app.post("/webhook", express.raw({ type: "application/json" }), PaymentsHandler.webhook)
        app.use(cors({ origin: '*' }));
        app.use(express.json());
        app.use(express.urlencoded({ extended: true }));
        app.use(cookieParser());
+        app.use(useragent.express());

        app.use(this.logRequest);
        app.use(this.logResponse);
@@ -172,19 +184,19 @@ class Server {
        app.use('/', router);

        const server = http.createServer(app);
-        initWebSocket(server);
+        global.Socket = new Socket(server);
        const PORT = 3003;
        server.listen(PORT, () => {
-            console.logclean("\n")
-            console.logclean(chalk.yellow("*************** Hyperia ***************"))
-            console.logclean(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
-            console.logclean(chalk.yellow("***************************************"))
-            console.logclean("\n")
+            console.log("\n")
+            console.log(chalk.yellow("*************** Hyperia ***************"))
+            console.log(chalk.yellowBright(`Server is running on port ${PORT}: http://localhost`));
+            console.log(chalk.yellow("***************************************"))
+            console.log("\n")
        });

        process.on('SIGINT', async () => {
-            console.logclean(chalk.red('Closing server...'));
-            console.logclean(chalk.green('Database connection closed.'));
+            console.log(chalk.red('Closing server...'));
+            console.log(chalk.green('Database connection closed.'));
            process.exit(0);
        });

@@ -192,38 +204,4 @@ class Server {
    }
 }

-const _log = console.log;
-
-console.logclean = function (...args) {
-    _log.call(console, ...args);
-}
-
-// console.log = function (...args) {
-//     // Get the caller location
-//     const stack = new Error().stack.split("\n")[2];
-//     const match = stack.match(/(\/.*:\d+:\d+)/);
-//     let location = match ? match[1] : "unknown";
-
-//     // Remove CWD prefix
-//     while (location.startsWith("/")) {
-//         location = location.slice(1);
-//     }
-//     location = "/" + location
-
-//     let cwd = process.cwd();
-//     if (location.startsWith(cwd)) {
-//         location = location.slice(cwd.length);
-//         if (location.startsWith("/")) location = location.slice(1);
-//     }
-
-//     _log.call(console, `[${location}]`, ...args);
-// };
-
-global.ServerError = class extends Error {
-    constructor(status, msg) {
-        super(msg);
-        this.status = status;
-    }
-}
-
 const server = new Server()
--- a/server/payments.js
+++ b/server/payments.js
@@ -0,0 +1,68 @@
+const Stripe = require("stripe")
+const dotenv = require("dotenv")
+dotenv.config();
+
+const stripe = new Stripe(process.env.STRIPE_SECRET);
+
+export default class PaymentsHandler {
+
+    static async danceTicket(req, res) {
+        try {
+            const session = await stripe.checkout.sessions.create({
+                mode: "payment",
+                payment_method_types: ["card"],
+                metadata: {
+                    productId: "austin_winter_ball_2025_ticket"
+                },
+                line_items: [
+                    {
+                        price_data: {
+                            currency: "usd",
+                            product_data: {
+                                name: "Hyperia Winter Ball"
+                            },
+                            unit_amount: 3500
+                        },
+                        quantity: 1
+                    }
+                ],
+                success_url: `${process.env.PROTOCOL + process.env.BASE_URL}/success`,
+                cancel_url: `${process.env.PROTOCOL + process.env.BASE_URL}/events`
+            });
+
+            res.json({ url: session.url });
+        } catch (err) {
+            console.error(err);
+            res.status(500).json({ error: "Something went wrong." });
+        }
+    }
+
+    static webhook = (req, res) => {
+        const sig = req.headers["stripe-signature"];
+
+        try {
+            const event = stripe.webhooks.constructEvent(
+                req.body,
+                sig,
+                process.env.WEBHOOK_SECRET
+            );
+
+            if (event.type === "checkout.session.completed") {
+                const session = event.data.object;
+                let toStore = {
+                    "product": session.metadata.productId,
+                    "email": session.customer_details.email,
+                    "name": session.customer_details.name,
+                    "time": global.currentTime(),
+                    "amount": session.amount_total,
+                }
+                global.db.payments.add(toStore)
+            }
+
+            res.sendStatus(200);
+        } catch (err) {
+            console.error(err);
+            res.sendStatus(400);
+        }
+    }
+}
--- a/server/util.js
+++ b/server/util.js
@@ -0,0 +1,24 @@
+global.ServerError = class extends Error {
+    constructor(status, msg) {
+        super(msg);
+        this.status = status;
+    }
+}
+
+global.currentTime = function () {
+    const now = new Date();
+
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    const year = now.getFullYear();
+
+    let hours = now.getHours();
+    const ampm = hours >= 12 ? "pm" : "am";
+    hours = hours % 12 || 12; // convert to 12-hour format
+
+    const minutes = String(now.getMinutes()).padStart(2, "0");
+    const seconds = String(now.getSeconds()).padStart(2, "0");
+    const ms = String(now.getMilliseconds()).padStart(4, "0"); // 4-digit like "5838"
+
+    return `${month}.${day}.${year}-${hours}:${minutes}:${seconds}${ms}${ampm}`;
+}
--- a/server/ws.js
+++ b/server/ws.js
@@ -1,31 +0,0 @@
-const { WebSocket, WebSocketServer } = require('ws');
-
-let wss;
-
-export function initWebSocket(server) {
-    wss = new WebSocketServer({ server });
-
-    wss.on('connection', (ws, req) => {
-        console.log('✅ New WebSocket client connected');
-
-        ws.on('close', () => {
-            console.log('Client disconnected');
-        });
-    });
-
-    console.log('WebSocket server initialized');
-}
-
-// Broadcast a message to all connected clients
-export function broadcast(reqType, data) {
-     if (!wss) return;
-
-    const payload = typeof data === 'string' ? data : JSON.stringify(data);
-    const message = `${reqType}|${payload}`;
-
-    wss.clients.forEach(client => {
-        if (client.readyState === WebSocket.OPEN) {
-        client.send(message);
-        }
-    });
-}
--- a/server/ws/handlers/ForumHandler.js
+++ b/server/ws/handlers/ForumHandler.js
@@ -0,0 +1,43 @@
+const { z } = require("zod")
+
+const sendSchema = z.object({
+    forum: z.string(),
+    text: z.string(),
+})
+.strict()
+
+const getSchema = z.object({
+    forum: z.string(),
+    number: z.number()
+})
+.strict()
+
+
+export default class ForumHandler {
+    static handleSend(msg, ws) {
+        try {
+            global.db.posts.add(msg.text, msg.forum, ws.userEmail)
+            global.Socket.broadcast({event: "new-post", app: "FORUM", forum: msg.forum, msg: this.handleGet({forum: msg.forum, number: 100})})
+            return {success: true}
+        } catch(e) {
+            console.error(e)
+        }
+    }
+
+    static handleGet(msg) {
+        let data = global.db.posts.get(msg.forum, msg.number)
+        return data
+    }
+
+    static handle(operation, msg, ws) {
+        switch(operation) {
+            case "SEND":
+                if(!sendSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
+                return this.handleSend(msg, ws)
+            case "GET":
+                if(!getSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
+                return this.handleGet(msg)
+        }
+
+    }
+}
--- a/server/ws/handlers/MessagesHandler.js
+++ b/server/ws/handlers/MessagesHandler.js
@@ -0,0 +1,40 @@
+const { z } = require("zod")
+
+const sendSchema = z.object({
+    conversation: z.string(),
+    text: z.string(),
+})
+.strict()
+
+export default class MessagesHandler {
+
+    static handleSend(msg, ws) {
+        let user = global.db.members.getByEmail(ws.userEmail)
+        let convo = global.db.conversations.get(msg.conversation)
+        if(convo.between.includes(`MEMBER-${user.id}`)) {
+            global.db.messages.add(msg.conversation, msg.text, `MEMBER-${user.id}`)
+            global.Socket.broadcast({event: "new-message", app: "MESSAGES", msg: {conversationID: convo.id, messages: global.db.messages.getByConversation(`CONVERSATION-${msg.conversation}`)}})
+
+        } else {
+            throw new Error("Can't add to a conversation user is not a part of!")
+        }
+        return {success: true}
+    }
+    
+    static handleGet(ws) {
+        let user = global.db.members.getByEmail(ws.userEmail)
+        let data = global.db.conversations.getByMember(`MEMBER-${user.id}`)
+        return data
+    }
+
+    static handle(operation, msg, ws) {
+        switch(operation) {
+            case "GET":
+                return this.handleGet(ws)
+            case "SEND":
+                if(!sendSchema.safeParse(msg).success) throw new Error("Incorrectly formatted Forum ws message!")
+                return this.handleSend(msg, ws)
+        }
+
+    }
+}
--- a/server/ws/ws.js
+++ b/server/ws/ws.js
@@ -0,0 +1,108 @@
+const { WebSocket, WebSocketServer } = require('ws');
+const { z } = require("zod")
+const jwt = require('jsonwebtoken');
+import ForumHandler from "./handlers/ForumHandler.js"
+import MessagesHandler from "./handlers/MessagesHandler.js"
+
+export default class Socket {
+    wss;
+    messageSchema = z.object({
+        id: z.string(),
+        app: z.string(),
+        operation: z.string().optional(),
+        msg: z.union([
+            z.object({}).passthrough(), // allows any object
+            z.array(z.any())            // allows any array
+        ]).optional()
+    })
+    .superRefine((data, ctx) => {
+        if (data.operation !== "GET" && data.msg === undefined) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: ["msg"],
+                message: "msg is required when operation is not GET"
+            })
+        }
+    })
+    .strict()
+
+    constructor(server) {
+        this.wss = new WebSocketServer({ server });
+
+        this.wss.on('connection', (ws, req) => {
+            console.log('✅ New WebSocket client connected');
+
+            function parseCookies(cookieHeader = "") {
+                return Object.fromEntries(
+                    cookieHeader.split(";").map(c => {
+                        const [key, ...v] = c.trim().split("=");
+                        return [key, decodeURIComponent(v.join("="))];
+                    })
+                );
+            }
+
+            const cookies = parseCookies(req.headers.cookie);
+            const token = cookies.auth_token;
+            if (!token) throw new Error("No auth token");
+            const payload = jwt.verify(token, process.env.JWT_SECRET);
+            ws.userEmail = payload.email;
+            
+            ws.on('message', (msg) => {
+                this.handleMessage(msg, ws);
+            });
+
+            ws.on('close', () => {
+                console.log('Client disconnected');
+            });
+        });
+
+        console.log('WebSocket server initialized');
+    }
+
+    // Build a system where the ws obj is updated every time on navigate, so it already has context
+    // this way, we can only send broadcast messages to clients that actually have that app / subapp open
+    handleMessage = (msg, ws) => {
+        try {
+            const text = msg.toString();
+            const req = JSON.parse(text);
+            if(!this.messageSchema.safeParse(req).success) throw new Error("Socket.handleMessage: Incoming ws message has incorrect format!")
+
+            let responseData;
+            switch (req.app) {
+                case "FORUM":
+                    responseData = ForumHandler.handle(req.operation, req.msg, ws)
+                    break;
+
+                case "MESSAGES":
+                    responseData = MessagesHandler.handle(req.operation, req.msg, ws)
+                    break;
+
+                default:
+                    console.error("unknown ws message")
+            }
+
+            let response = {
+                ...req
+            }
+            response.msg = responseData
+
+            if(!this.messageSchema.safeParse(response).success) throw new Error("Socket.handleMessage: Outgoing ws message has incorrect format!")
+            ws.send(JSON.stringify(response))
+
+        } catch (e) {
+            console.error("Invalid WS message:", e);
+        }
+    }
+
+    broadcast(event) {
+        if (!this.wss) return;
+
+        let message = JSON.stringify(event)
+
+        this.wss.clients.forEach(ws => {
+                if (ws.readyState === WebSocket.OPEN) {
+                ws.send(message);
+            }
+        });
+    }
+}
--- a/ui/_/code/quill.js
+++ b/ui/_/code/quill.js
@@ -1,6 +1,12 @@
 /*
    Sam Russell
    Captured Sun
+    12.26.25 - State for arrays, nested objects. State for stacks (Shadow-only)
+    12.17.25 - [Hyperia] - adding width, height functions. adding "e" to onClick. adding the non-window $$ funcs.
+    12.16.25 - [comalyr] - State
+    11.25.25.1 - Added minHeight and minWidth to be counted as numerical styles
+    11.25.25 - Added onChange for check boxes, added setQuery / onQueryChanged for easy filtering
+    11.24.25 - Fixing onClick because it was reversed, adding event to onHover params
    11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
    11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
    11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
@@ -28,6 +34,23 @@ window.addEventListener('popstate', () => {
    window.dispatchEvent(new Event('navigate'));
 });

+window.setQuery = function(key, value) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (value === null || value === undefined) {
+        params.delete(key);
+    } else {
+        params.set(key, value);
+    }
+
+    const newUrl = url.toString();
+    history.replaceState(null, "", newUrl);
+    window.dispatchEvent(new Event('query-changed'));
+
+    return newUrl;
+};
+  
 window.navigateTo = function(url) {
    window.dispatchEvent(new Event('navigate'));
    window.history.pushState({}, '', url);
@@ -48,6 +71,12 @@ window.$ = function(selector, el = document) {
 window.$$ = function(selector, el = document) {
    return Array.from(el.querySelectorAll(selector))
 }
+HTMLElement.prototype.$$ = function(selector) {
+    return window.$$(selector, this)
+}
+DocumentFragment.prototype.$$ = function(selector) {
+    return window.$$(selector, this)
+}

 /* CONSOLE */

@@ -143,6 +172,7 @@ Object.defineProperty(Array.prototype, 'last', {

 window.quill = {
    rendering: [],
+    lastState: null,

    render: (el) => {
        if(el instanceof Shadow) {
@@ -173,19 +203,6 @@ window.quill = {
        quill.rendering.pop()
    },

-    loadPage: () => {
-        let URL = window.location.pathname
-        if(!window.routes[URL]) {
-            throw new Error("No URL for this route: ", URL)
-        }
-
-        let pageClass = window[routes[URL]]
-        document.title = pageClass.title ?? document.title
-        document.body.innerHTML = ""
-        let page = new pageClass()
-        quill.render(page)
-    },
-
    isStack: (el) => {
        return el.classList.contains("HStack") || el.classList.contains("ZStack") || el.classList.contains("VStack")
    },
@@ -196,6 +213,7 @@ window.Shadow = class extends HTMLElement {
        super()
    }
 }
+
 window.register = (el, tagname) => {
    if (typeof el.prototype.render !== 'function') {
        throw new Error("Element must have a render: " + el.prototype.constructor.name)
@@ -210,6 +228,75 @@ window.register = (el, tagname) => {

    window[el.prototype.constructor.name] = function (...params) {
        let instance = new el(...params)
+        if(instance.state) {
+            const proxyCache = new WeakMap();
+
+            function reactive(value, path=[]) {
+                if (value && typeof value === "object") {
+                    if (proxyCache.has(value)) return proxyCache.get(value);
+
+                    const p = new Proxy(value, createHandlers(path));
+                    proxyCache.set(value, p);
+                    return p;
+                }
+                return value;
+            }
+
+            function isNumericKey(prop) {
+                return typeof prop === "string" && prop !== "" && String(+prop) === prop;
+            }
+
+            function createHandlers(path) {
+                return {
+                    get(target, prop, receiver) {
+                        if (typeof prop === "symbol") {
+                            return Reflect.get(target, prop, receiver);
+                        }
+
+                        let nextPath = (Array.isArray(target) && !isNumericKey(prop)) ? path : path.concat(prop) // To filter out arr.length, arr.map, arr.forEach, etc.
+                        quill.lastState = nextPath.join(".");
+    
+                        const v = Reflect.get(target, prop, receiver);
+                        return reactive(v, nextPath);
+                    },
+    
+                    set(target, prop, value, receiver) {
+                        const oldLength = Array.isArray(target) ? target.length : undefined;
+                        const oldValue = target[prop];
+                        if (oldValue === value) return true;
+
+                        const result = Reflect.set(target, prop, value, receiver);
+
+                        let changedPath = (Array.isArray(target) && (!isNumericKey(prop) || target.length !== oldLength)) ? path : path.concat(prop).join("."); // To filter out arr.length, arr.map, arr.forEach, and also a push/pop/unshift.
+                        const watchers = instance.stateWatchers[changedPath];
+
+                        if (watchers) {
+                            watchers.forEach(cb => cb());
+                        }
+
+                        return result;
+                    }
+                };
+            }
+
+            let proxy = reactive(instance.state)
+
+            Object.defineProperty(instance, "state", {
+                value: proxy,
+                writable: false,
+                configurable: false,
+                enumerable: true
+            });
+
+            let stateWatchers = {}
+            Object.keys(instance.state).forEach((key) => stateWatchers[key] = [])
+            Object.defineProperty(instance, "stateWatchers", {
+                value: stateWatchers,
+                writable: false,
+                configurable: false,
+                enumerable: true
+            });
+        }
        quill.render(instance)
        return instance
    }
@@ -273,6 +360,8 @@ function extendHTMLElementWithStyleSetters() {
            case "height":
            case "maxWidth":
            case "maxHeight":
+            case "minWidth":
+            case "minHeight":

            case "left":
            case "top":
@@ -292,6 +381,7 @@ function extendHTMLElementWithStyleSetters() {
            case "marginRight":

            case "textUnderlineOffset":
+            case "letterSpacing":

                return "unit-number"

@@ -311,24 +401,27 @@ function extendHTMLElementWithStyleSetters() {

        switch (type) {
            case "unit-number":
-                HTMLElement.prototype[prop] = function(value, unit = "px") {
-                    if ((typeof value !== "number" || isNaN(value)) && value !== "auto") {
-                        throw new Error(`Invalid value for ${prop}: ${value}. Expected a number.`);
-                    }
+                HTMLElement.prototype[prop] = StyleFunction(function(value, unit = "px") {
                    if(value === "auto") {
                        this.style[prop] = value
                        return this
                    }
                    this.style[prop] = value + unit;
+                    if (value !== "" && this.style[prop] === "") {
+                        throw new Error(`Invalid CSS value for ${prop}: ` + value + unit);
+                    }
                    return this;
-                };
+                });
                break;

            case "string":
-                HTMLElement.prototype[prop] = function(value) {
+                HTMLElement.prototype[prop] = StyleFunction(function(value) {
                    this.style[prop] = value;
+                    if (value !== "" && this.style[prop] === "") {
+                        throw new Error(`Invalid CSS value for ${prop}: ` + value);
+                    }
                    return this;
-                };
+                });
                break;
        }
    });
@@ -336,46 +429,86 @@ function extendHTMLElementWithStyleSetters() {

 extendHTMLElementWithStyleSetters();

+HTMLElement.prototype.addStateWatcher = function(field, cb) {
+    let parent = this
+    while(!(parent instanceof Shadow)) {
+        parent = parent.parentNode
+    }
+    parent.stateWatchers[field].push(cb)
+}
+
+// Currently only works for one state variable in the function
+// Could probably be fixed by just making lastState an array and clearing it out every function call?
+HTMLElement.prototype.setUpState = function(styleFunc, cb) {
+    let format = (value) => {return Array.isArray(value) ? value :  [value]}
+
+    // 1. Run the callback to get the style argument and also update lastState
+    let styleArgs = format(cb())
+
+    // 2. Check if lastState has really been updated. If not, the user-provided cb did not access valid state
+    if(!quill.lastState) {
+        throw new Error("Quill: style state function does not access valid state")
+    }
+
+    // 3. Construct function to run when state changes
+    let onStateChange = () => {
+        styleFunc.call(this, ...format(cb()))
+    }
+
+    // 4. Now listen for the state to change
+    this.addStateWatcher(quill.lastState, onStateChange)
+
+    // 5. Run the original function again, this time with the actual arguments
+    quill.lastState = null
+    styleFunc.call(this, ...styleArgs)
+}
+
+function StyleFunction(func) {
+    let styleFunction = function(value, unit = "px") {
+        if(typeof value === 'function') {
+            this.setUpState(styleFunction, value)
+            return this
+        } else {
+            func.call(this, value, unit); // ".call" ensures that "this" is correct
+            return this
+        }
+    }
+
+    return styleFunction
+}
+
 HTMLElement.prototype.styles = function(cb) {
    cb.call(this, this)
    return this
 }

-HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+/* Type 1 */
+
+HTMLElement.prototype.paddingVertical = StyleFunction(function(value, unit = "px") {
    this.style.paddingTop = value + unit
    this.style.paddingBottom = value + unit
    return this
-}
+})

-HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+HTMLElement.prototype.paddingHorizontal = StyleFunction(function(value, unit = "px") {
    this.style.paddingRight = value + unit
    this.style.paddingLeft = value + unit
    return this
-}
+})

-HTMLElement.prototype.marginVertical = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+HTMLElement.prototype.marginVertical = StyleFunction(function(value, unit = "px") {
    this.style.marginTop = value + unit
    this.style.marginBottom = value + unit
    return this
-}
+})

-HTMLElement.prototype.marginHorizontal = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+HTMLElement.prototype.marginHorizontal = StyleFunction(function(value, unit = "px") {
    this.style.marginRight = value + unit
    this.style.marginLeft = value + unit
    return this
-}
+})

-HTMLElement.prototype.fontSize = function(value, unit = "px") {
-    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        throw new Error(`Invalid value: ${value}. Expected a number.`);
+HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
    
    switch(value) {
        case "6xl": 
@@ -419,6 +552,27 @@ HTMLElement.prototype.fontSize = function(value, unit = "px") {
    }
    this.style.fontSize = value + unit
    return this
+})
+
+
+HTMLElement.prototype.width = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.width = value + unit
+    if(window.getComputedStyle(this).display === "inline") {
+        this.style.display = "block"
+    }
+    return this
+}
+
+HTMLElement.prototype.height = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.height = value + unit
+    if(window.getComputedStyle(this).display === "inline") {
+        this.style.display = "block"
+    }
+    return this
 }

 function checkPositionType(el) {
@@ -496,7 +650,6 @@ HTMLElement.prototype.alignVertical = function (value) {
    }

    if (direction === "column" || direction === "column-reverse") {
-        console.log("using justify")
        this.style.justifyContent = value;
    } else {
        this.style.alignItems = value;
@@ -640,7 +793,7 @@ window.form = function(cb) {
    return el
 }

-window.input = function(placeholder, width, height) {
+window.input = function(placeholder = "", width, height) {
    let el = document.createElement("input")
    el.placeholder = placeholder
    el.style.width = width
@@ -649,14 +802,18 @@ window.input = function(placeholder, width, height) {
    return el
 }

-window.label = function(text) {
+window.label = function(inside) {
    let el = document.createElement("label")
-    el.innerText = text
+    if(typeof inside === "string") {
+        el.innerText = inside
+    } else {
+        el.render = inside
+    }
    quill.render(el)
    return el
 }

-window.textarea = function(placeholder) {
+window.textarea = function(placeholder = "") {
    let el = document.createElement("textarea")
    el.placeholder = placeholder
    quill.render(el)
@@ -666,25 +823,35 @@ window.textarea = function(placeholder) {

 /* STACKS */

+handleStack = function(cb, name, styles="") {
+    let nowRendering = quill.rendering[quill.rendering.length-1]
+    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
+        nowRendering.style.cssText += styles
+        nowRendering.classList.add(name)
+        cb()
+        if(quill.lastState) {
+            nowRendering.addStateWatcher(quill.lastState, () => {
+                nowRendering.innerHTML = ""
+                cb()
+            })
+        }
+        return nowRendering
+    } else {
+        let div = document.createElement("div")
+        div.classList.add(name)
+        div.style.cssText += styles
+        div.render = cb
+        quill.render(div)
+        return div
+    }
+}
+
 window.VStack = function (cb = () => {}) {
    let styles = `
        display: flex;
        flex-direction: column;
    `
-    let nowRendering = quill.rendering[quill.rendering.length-1]
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.style.cssText += styles
-        nowRendering.classList.add("VStack")
-        cb()
-        return nowRendering
-    }
-
-    let div = document.createElement("div")
-    div.classList.add("VStack")
-    div.style.cssText += styles
-    div.render = cb
-    quill.render(div)
-    return div
+    return handleStack(cb, "VStack", styles)
 }

 window.HStack = function (cb = () => {}) {
@@ -692,35 +859,11 @@ window.HStack = function (cb = () => {}) {
        display: flex;
        flex-direction: row;
    `;
-    let nowRendering = quill.rendering[quill.rendering.length - 1];
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.style.cssText += styles;
-        nowRendering.classList.add("HStack")
-        cb();
-        return nowRendering;
-    }
-
-    let div = document.createElement("div");
-    div.classList.add("HStack");
-    div.style.cssText += styles;
-    div.render = cb;
-    quill.render(div);
-    return div;
+    return handleStack(cb, "HStack", styles)
 };

 window.ZStack = function (cb = () => {}) {
-    let nowRendering = quill.rendering[quill.rendering.length - 1];
-    if (nowRendering.innerHTML.trim() === "" && !quill.isStack(nowRendering)) {
-        nowRendering.classList.add("ZStack")
-        cb();
-        return nowRendering;
-    }
-
-    let div = document.createElement("div");
-    div.classList.add("ZStack");
-    div.render = cb;
-    quill.render(div);
-    return div;
+    return handleStack(cb, "ZStack")
 };

 /* SHAPES */
@@ -824,8 +967,8 @@ HTMLElement.prototype.onAppear = function(func) {
 };

 HTMLElement.prototype.onClick = function(func) {
-    const onMouseDown = () => func.call(this, true);
-    const onMouseUp = () => func.call(this, false);
+    const onMouseDown = (e) => func.call(this, false, e);
+    const onMouseUp = (e) => func.call(this, true, e);
    this._storeListener("mousedown", onMouseDown);
    this._storeListener("mouseup", onMouseUp);
    return this;
@@ -847,8 +990,8 @@ HTMLElement.prototype.onRightClick = function(func) {
 };

 HTMLElement.prototype.onHover = function(cb) {
-    const onEnter = () => cb.call(this, true);
-    const onLeave = () => cb.call(this, false);
+    const onEnter = (e) => cb.call(this, true, e);
+    const onLeave = (e) => cb.call(this, false, e);
    this._storeListener("mouseover", onEnter);
    this._storeListener("mouseleave", onLeave);
    return this;
@@ -877,6 +1020,14 @@ HTMLElement.prototype.onInput = function(cb) {
    return this;
 };

+HTMLElement.prototype.onChange = function(cb) {
+    if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
+        throw new Error("Can't put input event on non-input element!")
+    this._storeListener("change", cb);
+    return this;
+};
+
+
 HTMLElement.prototype.onSubmit = function(cb) {
    if(!this.matches('form'))
        throw new Error("Can't put form event on non-form element!")
@@ -900,17 +1051,48 @@ HTMLElement.prototype.onTap = function(cb) {
 };

 /* WHY THIS LISTENER IS THE WAY IT IS: 
- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
+- We can't just put a listener on the element, because a window "navigate" event won't trigger it
+- We can't just put a listener on the window, because the "this" variable will only refer to the window
+- And, if we try to re-add that scope using bind(), it makes the return value of .toString() unreadable, which means we cannot detect duplicate listeners.
+- Therefore, we attach a global navigate event to the window, and each navigate event in this array, and manually trigger each event when the global one fires.
 */
 navigateListeners = []
+window.addEventListener("navigate", () => {
+    for(entry of navigateListeners) {
+        entry.el.dispatchEvent(new CustomEvent("navigate"))
+    }
+})
 HTMLElement.prototype.onNavigate = function(cb) {
    this._storeListener("navigate", cb);

    let found = false
+    let elementIndex = Array.from(this.parentNode.children).indexOf(this)
    for(entry of navigateListeners) {
+        if(
+            entry.cb.toString() === cb.toString() 
+            && entry.index === elementIndex 
+            && this.nodeName === entry.el.nodeName
+        ) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        navigateListeners.push({el: this, cb: cb, index: elementIndex})
+    }
+
+    return this;
+};
+
+/* 
+Same principle applies
+*/
+queryListeners = []
+HTMLElement.prototype.onQueryChanged = function(cb) {
+    this._storeListener("query-changed", cb);
+
+    let found = false
+    for(entry of queryListeners) {
        if(entry.cb.toString() === cb.toString() &&
            this.nodeName === entry.el.nodeName) {
            found = true
@@ -918,14 +1100,14 @@ HTMLElement.prototype.onNavigate = function(cb) {
        }
    }
    if(found === false) {
-        navigateListeners.push({el: this, cb: cb})
+        queryListeners.push({el: this, cb: cb})
    }

    return this;
 };
-window.addEventListener("navigate", () => {
-    for(entry of navigateListeners) {
-        entry.el.dispatchEvent(new CustomEvent("navigate"))
+window.addEventListener("query-changed", () => {
+    for(entry of queryListeners) {
+        entry.el.dispatchEvent(new CustomEvent("query-changed"))
    }
 })

--- a/ui/_/code/shared.css
+++ b/ui/_/code/shared.css
@@ -4,13 +4,11 @@

    --tan: #FFDFB4;
    --gold: #F2B36F;
-    --purple: #251D44;
+    --divider: #bb7c36;
    --green: #0857265c;
    --red: #BC1C02;
    --brown: #812A18;
    --darkbrown: #3f0808;
-    --orange: #FE9201;
-    --periwinkle: #655BAF;

    --accent2: var(--green);
 }
@@ -19,7 +17,6 @@
 :root {
    --main: var(--brown);
    --accent: var(--gold);
-    --dividerColor: var(--gold);
    --accent2: var(--gold);
 }
 }
@@ -46,12 +43,19 @@
 }

 body {
+    margin: 0px;
    font-family: 'Bona Nova', sans-serif;
    font-size: 16px;
    background-color: var(--main);
    color: var(--accent);
 }

+@media (max-width: 480px) {
+    body, html{
+        overflow-x: hidden;
+    }
+}
+
 #title {
    padding: 5px 10px; 
    font-size: 1.7rem;
--- a/ui/_/code/ws/Connection.js
+++ b/ui/_/code/ws/Connection.js
@@ -0,0 +1,62 @@
+class Connection {
+    connectionTries = 0
+    ws;
+    linkCreated;
+    wsStatus;
+
+    constructor(receiveCB) {
+        this.init()
+        this.receiveCB = receiveCB
+    }
+    
+    init() {
+        if(window.location.hostname.includes("local")) {
+            this.ws = new WebSocket("ws://" + window.location.host)
+        } else {
+            this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
+        }
+        this.ws.addEventListener('open', () => {
+            this.connectionTries = 0
+            console.log("Websocket connection established.");
+            this.ws.addEventListener('message', this.receiveCB)
+        });
+        this.ws.addEventListener("close", () => {
+            this.checkOpen();
+            console.log('Websocket Closed')
+        })
+    }
+    
+    async checkOpen() {
+        if (this.ws.readyState === WebSocket.OPEN) {
+            return true
+        } else {
+            await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
+            this.connectionTries++
+            console.log('Reestablishing connection')
+            this.init()
+        }
+    }
+
+    sleep = (time) => {
+        return new Promise(resolve => {
+            setTimeout(resolve, time);
+        });
+    }
+    
+    send = (msg) => {
+        console.log("sending")
+        if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(msg);
+        }
+        else if(this.connectionTries === 0) {
+            setTimeout(() => {
+                this.send(msg)
+            }, 100)
+        }
+        else {
+            console.error('No websocket connection: Cannot send message');
+        }
+    }
+}
+
+export default Connection
--- a/ui/_/code/ws/Socket.js
+++ b/ui/_/code/ws/Socket.js
@@ -0,0 +1,45 @@
+import Connection from "./Connection.js";
+
+export default class Socket {
+    connection;
+    disabled = true;
+    requestID = 1;
+    pending = new Map();
+
+    constructor() {
+        this.connection = new Connection(this.receive);
+    }
+
+    isOpen() {
+        if(this.connection.checkOpen()) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    send(msg) {
+        return new Promise(resolve => {
+            const id = (++this.requestID).toString();
+            this.pending.set(id, resolve);
+            this.connection.send(JSON.stringify({ id, ...msg }));
+        });
+    }
+
+    receive = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.id && this.pending.has(msg.id)) {
+            this.pending.get(msg.id)(msg);
+            this.pending.delete(msg.id);
+            return;
+        } else {
+            this.onBroadcast(msg)
+        }
+    }
+
+    onBroadcast(msg) {
+        window.dispatchEvent(new CustomEvent(msg.event, {
+            detail: msg.msg
+        }));
+    }
+}
--- a/ui/_/code/zod.js
+++ b/ui/_/code/zod.js
--- a/ui/_/icons/Column.svg
+++ b/ui/_/icons/Column.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.52366 0.0493342C4.88415 0.328928 1.12711 1.09781 0.253382 1.93659L0 2.18124V3.45688V4.73253L0.244645 4.9597C0.541713 5.23929 0.917417 5.43152 1.69504 5.69363C2.42023 5.94702 2.60372 5.96449 2.44645 5.77227C1.99211 5.22182 3.27649 4.584 5.7142 4.16461C8.0558 3.75395 9.35765 3.67532 13.5428 3.67532C17.728 3.67532 19.0299 3.75395 21.3715 4.16461C23.8354 4.584 25.0935 5.22182 24.6305 5.78974C24.5169 5.9208 24.5344 5.92954 24.7877 5.87712C25.3382 5.77227 26.4915 5.26551 26.7886 5.01212L27.0856 4.75001V3.45688V2.16376L26.7886 1.90164C25.9498 1.16771 22.8743 0.4862 18.7852 0.136707C17.3523 0.00564766 11.1401 -0.0467762 9.52366 0.0493342Z" fill="black"/>
+<path d="M10.6246 5.30045C8.06453 5.44899 5.65304 5.82469 4.49971 6.26156C3.80073 6.52367 3.49492 6.83822 3.49492 7.27508V7.62458L4.0978 7.61584C4.63077 7.6071 4.73562 7.63331 4.93658 7.82553C5.06764 7.94786 5.20743 8.11386 5.25986 8.20997C5.31228 8.31482 5.33849 11.3292 5.32976 16.79L5.32102 25.2128H5.76662H6.20349V16.423C6.20349 6.60231 6.16854 7.15276 6.79762 6.89064C7.18207 6.73337 7.75873 6.80327 8.06453 7.03918C8.58877 7.45857 8.56256 6.82948 8.56256 18.1268V28.4456H9.17417H9.78578V17.8734C9.78578 11.4428 9.81199 7.24013 9.86442 7.14402C10.0741 6.75958 10.3974 6.56736 10.9216 6.53241C11.5158 6.48873 11.9526 6.68968 12.1361 7.0916C12.2148 7.26635 12.241 10.1671 12.2322 19.4549V31.591H13.5865H14.9408V19.4636C14.9408 7.59836 14.9408 7.33624 15.1155 7.06539C15.6136 6.24408 16.9853 6.34893 17.3436 7.24013C17.4571 7.52846 17.4746 8.89148 17.4746 18.0132V28.4543L18.0687 28.4281L18.6541 28.4019L18.6279 18.2229C18.6017 11.2069 18.6279 7.94786 18.6891 7.7469C18.9774 6.82948 20.2443 6.48873 20.7861 7.18771C20.9695 7.41488 20.9695 7.4673 20.9695 16.3095V25.2128H21.4064H21.8433V16.8424C21.8433 8.708 21.852 8.47209 22.018 8.20124C22.2714 7.77311 22.5597 7.63331 23.1189 7.64205H23.6169L23.5645 7.2314C23.5296 6.94307 23.4597 6.76832 23.2937 6.63726C22.1403 5.63247 16.0155 4.99465 10.6246 5.30045Z" fill="black"/>
+</svg>
--- a/ui/_/icons/creditcards/amex.svg
+++ b/ui/_/icons/creditcards/amex.svg
--- a/ui/_/icons/creditcards/discover.svg
+++ b/ui/_/icons/creditcards/discover.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="780" height="500" fill="#FFF" stroke-width="15px" stroke="#000000"/><path d="m409.41 197.26c30.938 0 56.02 23.58 56.02 52.709v0.033c0 29.129-25.082 52.742-56.02 52.742-30.941 0-56.022-23.613-56.022-52.742v-0.033c0-29.129 25.081-52.709 56.022-52.709z" fill="#F47216"/><path d="m321.43 197.94c8.836 0 16.247 1.785 25.27 6.09v22.753c-8.544-7.863-15.955-11.154-25.757-11.154-19.265 0-34.413 15.015-34.413 34.051 0 20.074 14.681 34.195 35.368 34.195 9.312 0 16.586-3.12 24.802-10.856v22.764c-9.343 4.142-16.912 5.775-25.757 5.775-31.277 0-55.581-22.597-55.581-51.736-2e-3 -28.83 24.949-51.882 56.068-51.882zm-97.113 0.626c11.546 0 22.109 3.721 30.942 10.994l-10.748 13.248c-5.351-5.646-10.411-8.027-16.563-8.027-8.854 0-15.301 4.744-15.301 10.988 0 5.354 3.618 8.188 15.944 12.481 23.364 8.043 30.289 15.176 30.289 30.926 0 19.193-14.976 32.554-36.319 32.554-15.631 0-26.993-5.795-36.457-18.871l13.268-12.03c4.73 8.608 12.622 13.223 22.42 13.223 9.163 0 15.947-5.95 15.947-13.983 0-4.164-2.056-7.733-6.158-10.258-2.066-1.195-6.158-2.978-14.199-5.646-19.292-6.538-25.91-13.527-25.91-27.186-1e-3 -16.227 14.213-28.413 32.845-28.413zm234.72 1.729h22.436l28.084 66.592 28.447-66.592h22.267l-45.493 101.69h-11.054l-44.687-101.69zm-301.21 0.152h20.541v99.143h-20.541v-99.143zm411.73 0h58.253v16.799h-37.726v22.006h36.336v16.791h-36.336v26.762h37.726v16.785h-58.253v-99.143zm115.59 57.377c15.471-2.965 23.983-12.926 23.983-28.105 0-18.562-13.575-29.271-37.266-29.271h-30.454v99.144h20.516v-39.83h2.681l28.43 39.828h25.26l-33.15-41.766zm-17.218-11.736h-6.002v-30.025h6.326c12.791 0 19.744 5.049 19.744 14.697 2e-3 9.967-6.951 15.328-20.068 15.328zm-576.09-45.641h-30.149v99.143h29.992c15.946 0 27.465-3.543 37.573-11.445 12.014-9.359 19.117-23.467 19.117-38.057 1e-3 -29.259-23.221-49.641-56.533-49.641zm23.997 74.479c-6.454 5.484-14.837 7.879-28.108 7.879h-5.514v-65.559h5.513c13.271 0 21.323 2.238 28.108 8.018 7.104 5.956 11.377 15.184 11.377 24.682 1e-3 9.513-4.273 19.024-11.376 24.98z"/></svg>
--- a/ui/_/icons/creditcards/mastercard.svg
+++ b/ui/_/icons/creditcards/mastercard.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -9 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="57" height="39" rx="3.5" fill="white" stroke="#F3F3F3"/>
+<path d="M34.3102 28.9765H23.9591V10.5122H34.3102V28.9765Z" fill="#FF5F00"/>
+<path d="M24.6223 19.7429C24.6223 15.9973 26.3891 12.6608 29.1406 10.5107C27.1285 8.93843 24.5892 7.99998 21.8294 7.99998C15.2961 7.99998 10 13.2574 10 19.7429C10 26.2283 15.2961 31.4857 21.8294 31.4857C24.5892 31.4857 27.1285 30.5473 29.1406 28.975C26.3891 26.8249 24.6223 23.4884 24.6223 19.7429" fill="#EB001B"/>
+<path d="M48.2706 19.7429C48.2706 26.2283 42.9745 31.4857 36.4412 31.4857C33.6814 31.4857 31.1421 30.5473 29.1293 28.975C31.8815 26.8249 33.6483 23.4884 33.6483 19.7429C33.6483 15.9973 31.8815 12.6608 29.1293 10.5107C31.1421 8.93843 33.6814 7.99998 36.4412 7.99998C42.9745 7.99998 48.2706 13.2574 48.2706 19.7429" fill="#F79E1B"/>
+</svg>
--- a/ui/_/icons/creditcards/visa.svg
+++ b/ui/_/icons/creditcards/visa.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40   C0,17.909,17.909,0,40,0z" fill="#0E4595"/><path d="m293.2 348.73l33.361-195.76h53.36l-33.385 195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725 0-89.865 26.55-90.18 64.603-0.299 28.13 26.514 43.822 46.752 53.186 20.771 9.595 27.752 15.714 27.654 24.283-0.131 13.121-16.586 19.116-31.922 19.116-21.357 0-32.703-2.967-50.227-10.276l-6.876-3.11-7.489 43.823c12.463 5.464 35.51 10.198 59.438 10.443 56.09 0 92.5-26.246 92.916-66.882 0.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268 0-8.137 9.668-16.839 30.557-16.839 17.449-0.27 30.09 3.535 39.938 7.5l4.781 2.26 7.232-42.429m137.31-4.223h-41.232c-12.773 0-22.332 3.487-27.941 16.234l-79.244 179.4h56.031s9.16-24.123 11.232-29.418c6.125 0 60.555 0.084 68.338 0.084 1.596 6.853 6.49 29.334 6.49 29.334h49.514l-43.188-195.64zm-65.418 126.41c4.412-11.279 21.26-54.723 21.26-54.723-0.316 0.522 4.379-11.334 7.074-18.684l3.605 16.879s10.219 46.729 12.354 56.528h-44.293zm-363.3-126.41l-52.24 133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766 171.2 56.456-0.064 84.004-195.39h-56.521" fill="#ffffff"/><path d="m146.92 152.96h-86.041l-0.681 4.073c66.938 16.204 111.23 55.363 129.62 102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527" fill="#F2AE14"/></svg>
--- a/ui/_/icons/jobs.svg
+++ b/ui/_/icons/jobs.svg
--- a/ui/_/icons/letter.svg
+++ b/ui/_/icons/letter.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+<path d="M0 0 C33 0 66 0 100 0 C100 23.76 100 47.52 100 72 C67 72 34 72 0 72 C0 48.24 0 24.48 0 0 Z M4 4 C3.46383745 8.70053019 3.46383745 8.70053019 5.30664062 10.5546875 C5.91701172 10.99039062 6.52738281 11.42609375 7.15625 11.875 C7.84114502 12.37870117 8.52604004 12.88240234 9.23168945 13.40136719 C9.98023193 13.92891602 10.72877441 14.45646484 11.5 15 C13.06813799 16.14868129 14.63450237 17.29978719 16.19921875 18.453125 C17.40070557 19.33194336 17.40070557 19.33194336 18.62646484 20.22851562 C22.28176453 22.95664302 25.79456149 25.84835522 29.3125 28.75 C31.2591282 30.33484221 33.20813973 31.91671841 35.15722656 33.49853516 C36.36876709 34.48568066 37.57657813 35.4774244 38.78027344 36.47412109 C40.40268905 37.81286849 42.04179632 39.1275644 43.6875 40.4375 C44.59886719 41.17871094 45.51023438 41.91992188 46.44921875 42.68359375 C48.88630843 44.26660079 48.88630843 44.26660079 51.37890625 43.5859375 C54.95082046 41.42468986 58.06328957 38.87595616 61.25 36.1875 C67.05660886 31.37582668 72.93368091 26.68843648 78.9375 22.125 C80.0061731 21.30745239 80.0061731 21.30745239 81.09643555 20.47338867 C84.06177854 18.20933035 87.03509444 15.97490703 90.0703125 13.8046875 C91.30394531 12.91136719 91.30394531 12.91136719 92.5625 12 C93.24441406 11.525625 93.92632812 11.05125 94.62890625 10.5625 C96.54964019 8.72009187 96.54964019 8.72009187 96 4 C65.64 4 35.28 4 4 4 Z M4 15 C4 32.49 4 49.98 4 68 C34.36 68 64.72 68 96 68 C96 50.51 96 33.02 96 15 C91.10723979 18.66957016 86.23777639 22.33985116 81.4375 26.125 C80.5556604 26.81843506 80.5556604 26.81843506 79.65600586 27.52587891 C76.42735841 30.06945531 73.21156659 32.62826175 70.0078125 35.203125 C69.01890015 35.99759033 69.01890015 35.99759033 68.01000977 36.80810547 C66.75119369 37.82090246 65.49376977 38.83543328 64.23803711 39.85205078 C63.07629198 40.7874235 61.90867537 41.71555794 60.73486328 42.63574219 C59.54616335 43.57050931 58.37318371 44.52551784 57.21435547 45.49707031 C54.26370419 47.84496996 52.75924576 48.97890984 48.90625 49.0859375 C45.41094599 47.77989648 43.28715117 46.10681719 40.5 43.625 C39.44697905 42.70771873 38.39222174 41.79242782 37.3359375 40.87890625 C36.7903418 40.40340332 36.24474609 39.92790039 35.68261719 39.43798828 C32.89861809 37.05874355 30.01440497 34.81161154 27.125 32.5625 C26.54911133 32.11293945 25.97322266 31.66337891 25.37988281 31.20019531 C24.19857561 30.27805578 23.01693136 29.35634787 21.83496094 28.43505859 C19.90812651 26.92814897 17.98846374 25.41247563 16.0703125 23.89453125 C15.43077637 23.38913818 14.79124023 22.88374512 14.13232422 22.36303711 C12.90121746 21.38980809 11.671035 20.41540842 10.44189453 19.43969727 C7.37045638 16.99238729 7.37045638 16.99238729 4 15 Z " fill="#000000" transform="translate(0,14)"/>
+</svg>
--- a/ui/_/icons/place/austin.svg
+++ b/ui/_/icons/place/austin.svg
--- a/ui/_/images/fabric.webp
+++ b/ui/_/images/fabric.webp
--- a/ui/_/images/knight.webp
+++ b/ui/_/images/knight.webp
--- a/ui/desktop/apps/Forum/Forum.js
+++ b/ui/desktop/apps/Forum/Forum.js
@@ -0,0 +1,104 @@
+import './ForumPanel.js'
+
+css(`
+    forum- {
+        font-family: 'Bona';
+    }
+
+    forum- 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 Forum extends Shadow {
+
+    selectedForum = "HY"
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                VStack(() => {
+                    img("/_/icons/logo.svg", "2em")
+                        .padding(0.8, em)
+                        .borderRadius(12, px)
+                        .marginHorizontal(1, em)
+                        .onHover(function (hovering) {
+                            if(hovering) {
+                                this.style.background = "var(--darkbrown)"
+                            } else {
+                                this.style.background = ""
+                            }
+                        })
+                        .opacity(0)
+
+                    img("/_/icons/place/austin.svg", "2em")
+                        .padding(0.8, em)
+                        .borderRadius(12, px)
+                        .marginHorizontal(1, em)
+                        .onHover(function (hovering) {
+                            if(hovering) {
+                                this.style.background = "var(--darkbrown)"
+                            } else {
+                                this.style.background = ""
+                            }
+                        })
+                        .opacity(0)
+
+                })
+                .height(100, vh)
+                .paddingLeft(2, em)
+                .paddingRight(2, em)
+                .gap(1, em)
+                .marginTop(20, vh)
+
+                VStack(() => {
+
+                    ForumPanel()
+
+                    input("Message Hyperia", "98%")
+                        .paddingVertical(1, em)
+                        .paddingLeft(2, pct)
+                        .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(0.5, em)
+                .width(100, pct)
+                .height(100, vh)
+                .alignHorizontal("center")
+                .alignVertical("end")
+            })
+            .width(100, "%")
+            .height(87, vh)
+            .x(0).y(0, vh)
+        })
+        .width(100, pct)
+        .height(100, pct)
+    }
+
+    
+}
+
+register(Forum)
--- a/ui/desktop/apps/Forum/ForumPanel.js
+++ b/ui/desktop/apps/Forum/ForumPanel.js
@@ -0,0 +1,90 @@
+import "../../components/LoadingCircle.js"
+
+class ForumPanel extends Shadow {
+    forums = [
+        "HY"
+    ]
+    messages = []
+
+    render() {
+        VStack(() => {
+            if(this.messages.length > 0) {
+
+                let previousDate = null
+
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    const dateParts = this.parseDate(message.time);
+                    const { date, time } = dateParts;
+
+                    if (previousDate !== date) {
+                        previousDate = date;
+
+                        p(date)
+                            .textAlign("center")
+                            .opacity(0.5)
+                            .marginVertical(1, em)
+                            .color("var(--divider)")
+                    }
+
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.sentBy)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(util.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                }
+            } else {
+                LoadingCircle()
+            }
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(100, pct)
+        .width(96, pct)
+        .paddingTop(5, em)
+        .paddingBottom(2, em)
+        .paddingLeft(4, pct)
+        .backgroundColor("var(--darkbrown)")
+        .onAppear(async () => {
+            console.log("appear")
+            requestAnimationFrame(() => {
+                this.scrollTop = this.scrollHeight
+            });
+            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-post", (e) => {
+                this.messages = e.detail
+                if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
+                    this.rerender()
+                }
+            })
+        })
+    }
+
+    parseDate(str) {
+        // Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
+        const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
+        if (!match) return null;
+
+        const [, mm, dd, yyyy, hh, min, ampm] = match;
+        const date = `${mm}/${dd}/${yyyy}`;
+        const time = `${hh}:${min}${ampm.toLowerCase()}`;
+
+        return { date, time };
+    }
+}
+
+register(ForumPanel)
--- a/ui/desktop/apps/Jobs/Jobs.js
+++ b/ui/desktop/apps/Jobs/Jobs.js
@@ -47,41 +47,28 @@ class Jobs extends Shadow {
            .x(0).y(13, vh)

            HStack(() => {
-                input("Search jobs...", "45vw")
+                input("Search jobs... (Coming Soon!)", "45vw")
                    .attr({
-                        "type": "text"
+                        "type": "text",
+                        "disabled": "true"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
-                    .border("1px solid var(--accent2)")
+                    .border("0.5px solid var(--divider)")
                    .outline("none")
                    .color("var(--accent)")
+                    .opacity(0.5)
                    .borderRadius(10, px)
-
-                button("Search")
-                    .marginLeft(2, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("1px solid var(--accent2)")
-                    .color("var(--accent)")
-                    .fontFamily("Bona Nova")
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.background = "var(--green)"
-
-                        } else {
-                            this.style.background = "transparent"
-
-                        }
-                    })
+                    .background("grey")
+                    .cursor("not-allowed")

                button("+ Add Job")
                    .width(7, em)
                    .marginLeft(1, em)
                    .borderRadius(10, px)
                    .background("transparent")
-                    .border("1px solid var(--accent2)")
+                    .border("0.3px solid var(--accent2)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
--- a/ui/desktop/apps/Jobs/JobsGrid.js
+++ b/ui/desktop/apps/Jobs/JobsGrid.js
@@ -37,8 +37,8 @@ class JobsGrid extends Shadow {
                            p(this.boldUntilFirstSpace(this.jobs[i].salary))
                        })
                        .padding(1, em)
-                        .border("1px solid var(--accent2)")
                        .borderRadius(5, "px")
+                        .background("var(--darkbrown)")
                    }
                })
                .display("grid")
--- a/ui/desktop/apps/Jobs/JobsSidebar.js
+++ b/ui/desktop/apps/Jobs/JobsSidebar.js
--- a/ui/desktop/apps/Market/Market.js
+++ b/ui/desktop/apps/Market/Market.js
@@ -35,7 +35,8 @@ class Market extends Shadow {
            price: "$12",
            company: "Hyperia",
            type: "new",
-            image: "/db/images/1"
+            image: "/db/images/1",
+            madeIn: "America"
        }
    ]

@@ -50,34 +51,21 @@ class Market extends Shadow {
            .x(0).y(13, vh)

            HStack(() => {
-                input("Search for products...", "45vw")
+                input("Search for products... (Coming Soon!)", "45vw")
                    .attr({
-                        "type": "text"
+                        "type": "text",
+                        "disabled": "true"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
-                    .border("0.5px solid var(--accent2)")
+                    .border("0.5px solid var(--divider)")
                    .outline("none")
                    .color("var(--accent)")
+                    .opacity(0.5)
                    .borderRadius(10, px)
-
-                button("Search")
-                    .marginLeft(2, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("0.5px solid var(--accent2)")
-                    .color("var(--accent)")
-                    .fontFamily("Bona Nova")
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.background = "var(--green)"
-
-                        } else {
-                            this.style.background = "transparent"
-
-                        }
-                    })
+                    .background("grey")
+                    .cursor("not-allowed")

                button("+ Add Item")
                    .width(7, em)
--- a/ui/desktop/apps/Market/MarketGrid.js
+++ b/ui/desktop/apps/Market/MarketGrid.js
@@ -29,24 +29,46 @@ class MarketGrid extends Shadow {
                ZStack(() => {
                    // BuyModal()

-                    for (let i = 0; i < this.listings.length; i++) {
-                        const rating = this.listings[i].stars
+                    let params = new URLSearchParams(window.location.search);
+
+                    const hyperiaMade = params.get("hyperia-made") === "true";
+                    const americaMade = params.get("america-made") === "true";
+                    const newItem = params.get("new") === "true";
+                    const usedItem = params.get("used") === "true";
+
+
+                    let filtered = this.listings;
+                    if (hyperiaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "Hyperia");
+                    }
+                    if (americaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "America");
+                    }
+                    if (newItem) {
+                        filtered = filtered.filter(item => item.type === "new");
+                    }
+                    if (usedItem) {
+                        filtered = filtered.filter(item => item.type === "used");
+                    }
+
+                    for (let i = 0; i < filtered.length; i++) {
+                        const rating = filtered[i].stars
                        const percent = (rating / 5)

                        VStack(() => {
-                            img(this.listings[i].image)
+                            img(filtered[i].image)
                                .marginBottom(0.5, em)

-                            p(this.listings[i].company)
+                            p(filtered[i].company)
                                .marginBottom(0.5, em)

-                            p(this.listings[i].title)
+                            p(filtered[i].title)
                                .fontSize(1.2, em)
                                .fontWeight("bold")
                                .marginBottom(0.5, em)

                            HStack(() => {
-                                p(this.listings[i].stars)
+                                p(filtered[i].stars)
                                    .marginRight(0.2, em)

                                ZStack(() => {
@@ -67,21 +89,28 @@ class MarketGrid extends Shadow {
                                .fontSize(1.2, em)
                                .lineHeight(1)
                                
-                                p(this.listings[i].reviews)
+                                p(filtered[i].reviews)
                                .marginLeft(0.2, em)
                            })
                                .marginBottom(0.5, em)

-                            p(this.listings[i].price)
+                            p(filtered[i].price)
                                .fontSize(1.75, em)
                                .marginBottom(0.5, em)

-                            button("Buy Now")
+                            button("Coming Soon!")
                                .onClick((finished) => {
                                    if(finished) {

                                    }
                                })
+                                .onHover(function (hovering) {
+                                    if(hovering) {
+                                        this.style.backgroundColor = "var(--green)"
+                                    } else {
+                                        this.style.backgroundColor = ""
+                                    }
+                                })

                        })
                        .padding(1, em)
@@ -96,6 +125,10 @@ class MarketGrid extends Shadow {
                p("No Listings!")
            }
        })
+        .onQueryChanged(() => {
+            console.log("query did change yup")
+            this.rerender()
+        })
        .height(100, vh)
        .paddingLeft(2, em)
        .paddingRight(2, em)
--- a/ui/desktop/apps/Market/MarketSidebar.js
+++ b/ui/desktop/apps/Market/MarketSidebar.js
@@ -1,12 +1,27 @@
 class MarketSidebar extends Shadow {
+
+    handleChecked(e) {
+        let checked = e.target.checked
+        let label = $(`label[for="${e.target.id}"]`).innerText
+        if(checked) {
+            window.setQuery(label.toLowerCase(), true)
+        } else {
+            window.setQuery(label.toLowerCase(), null)
+        }
+    }
+
    render() {
        VStack(() => {
+
+            p("Make")
+
            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "hyperia-check"
                    })
+                    .onChange(this.handleChecked)
                label("Hyperia-Made")
                    .attr({
                        "for": "hyperia-check"
@@ -20,6 +35,7 @@ class MarketSidebar extends Shadow {
                        "type": "checkbox",
                        "id": "america-check"
                    })
+                    .onChange(this.handleChecked)
                label("America-Made")
                    .attr({
                        "for": "america-check"
@@ -27,12 +43,15 @@ class MarketSidebar extends Shadow {
                    .marginLeft(0.5, em)
            })

+            p("Condition")
+
            HStack(() => {
                input()
                    .attr({
                        "type": "checkbox",
                        "id": "new-check"
                    })
+                    .onChange(this.handleChecked)
                label("New")
                    .attr({
                        "for": "new-check"
@@ -46,6 +65,7 @@ class MarketSidebar extends Shadow {
                        "type": "checkbox",
                        "id": "used-check"
                    })
+                    .onChange(this.handleChecked)
                label("Used")
                    .attr({
                        "for": "used-check"
--- a/ui/desktop/apps/Messages/Messages.js
+++ b/ui/desktop/apps/Messages/Messages.js
@@ -0,0 +1,188 @@
+import "./MessagesSidebar.js"
+import "./MessagesPanel.js"
+
+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 {
+    conversations = []
+    selectedConvoID = null
+    onConversationSelect(i) {
+        console.log("convo selected: ", i)
+        this.selectedConvoID = i
+        this.$("messagessidebar-").rerender()
+        this.$("messagespanel-").rerender()
+    }
+
+    getConvoFromID(id) {
+        for(let i=0; i<this.conversations.length; i++) {
+            if(this.conversations[i].id === id) {
+                return this.conversations[i]
+            }
+        }
+    }
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
+
+                VStack(() => {
+                    if(this.getConvoFromID(this.selectedConvoID)) {
+                        MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
+                    } else {
+                        MessagesPanel()
+                    }
+
+                    input("Send Message", "93%")
+                        .paddingVertical(1, em)
+                        .paddingHorizontal(2, em)
+                        .color("var(--accent)")
+                        .background("var(--darkbrown)")
+                        .marginBottom(6, em)
+                        .border("none")
+                        .fontSize(1, em)
+                        .onKeyDown((e) => {
+                            if (e.key === "Enter") {
+                                window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
+                                e.target.value = ""
+                            }
+                        })
+                })
+                .gap(1, em)
+                .width(100, pct)
+                .alignHorizontal("center")
+                .alignVertical("end")
+            })
+            .onAppear(async () => {
+                let res = await Socket.send({app: "MESSAGES", operation: "GET"})
+                if(!res) console.error("failed to get messages")
+
+                if(res.msg.length > 0 && this.conversations.length === 0) {
+                    this.conversations = res.msg
+                    this.selectedConvoID = this.conversations[0].id
+                    this.rerender()
+                }
+
+                window.addEventListener("new-message", (e) => {
+                    let convoID = e.detail.conversationID
+                    let messages = e.detail.messages
+                    let convo = this.getConvoFromID(convoID)
+                    convo.messages = messages
+                    this.rerender()
+                })
+            })
+            .width(100, "%")
+            .height(87, vh)
+            .x(0).y(13, vh)
+
+            VStack(() => {
+                p("Add Message")
+
+                input("enter email...")
+                    .color("var(--accent)")
+                    .onKeyDown(function (e) {
+                        if (e.key === "Enter") {
+                            window.Socket.send({app: "MESSAGES", operation: "ADDCONVERSATION", msg: {email: this.value }})
+                            this.value = ""
+                        }
+                    })
+
+                p("x")
+                .onClick(function (done) {
+                    if(done) {
+                        this.parentElement.style.display = "none"
+                    }
+                })
+                .xRight(2, em).y(2, em)
+                .fontSize(1.4, em)
+                .cursor("pointer")
+                
+            })
+            .gap(1, em)
+            .alignVertical("center")
+            .alignHorizontal("center")
+            .backgroundColor("black")
+            .border("1px solid var(--accent)")
+            .position("fixed")
+            .x(50, vw).y(50, vh)
+            .center()
+            .width(60, vw)
+            .height(60, vh)
+            .display("none")
+            .attr({id: "addPanel"})
+
+            HStack(() => {
+                input("Search messages... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ New Message")
+                    .width(13, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((done) => {
+                        console.log("click")
+                        if(done) {
+                            this.$("#addPanel").style.display = "flex"
+                        }
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+}
+
+register(Messages)
--- a/ui/desktop/apps/Messages/MessagesPanel.js
+++ b/ui/desktop/apps/Messages/MessagesPanel.js
@@ -0,0 +1,56 @@
+import "../../components/LoadingCircle.js"
+
+class MessagesPanel extends Shadow {
+    messages
+
+    constructor(messages) {
+        super()
+        this.messages = messages
+    }
+
+    render() {
+        VStack(() => {
+            if(this.messages) {
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    let fromMe = window.profile.email === message.from.email
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.from.firstName + " " + message.from.lastName)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(util.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                    .paddingVertical(0.5, em)
+                    .marginLeft(fromMe ? 70 : 0, pct)
+                    .paddingRight(fromMe ? 10 : 0, pct)
+                    .marginRight(fromMe ? 0 : 70, pct)
+                    .paddingLeft(fromMe ? 5 : 10, pct)
+                    .background(fromMe ? "var(--brown)" : "var(--green)")
+                }
+            } else {
+                LoadingCircle()
+            }
+        })
+        .onAppear(async () => {
+            requestAnimationFrame(() => {
+                this.scrollTop = this.scrollHeight
+            });
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(95, pct)
+        .width(100, pct)
+        .paddingTop(2, em)
+        .paddingBottom(2, em)
+        .backgroundColor("var(--darkbrown)")
+    }
+}
+
+register(MessagesPanel)
--- a/ui/desktop/apps/Messages/MessagesSidebar.js
+++ b/ui/desktop/apps/Messages/MessagesSidebar.js
@@ -0,0 +1,73 @@
+class MessagesSidebar extends Shadow {
+    conversations = []
+    selectedConvoID
+    onSelect
+
+    constructor(conversations, selectedConvoID, onSelect) {
+        super()
+        this.conversations = conversations
+        this.selectedConvoID = selectedConvoID
+        this.onSelect = onSelect
+    }
+
+    render() {
+         VStack(() => {
+            this.conversations.forEach((convo, i) => {
+
+                VStack(() => {
+                    HStack(() => {
+
+                        p(this.makeConvoTitle(convo.between))
+                            .textAlign("left")
+                            .marginLeft(0.5, inches)
+                            .paddingTop(0.2, inches)
+                            .width(100, pct)
+                            .marginTop(0)
+                            .fontSize(1, em)
+                            .fontWeight("bold")
+
+                        p(util.formatTime(convo.messages.last.time))
+                            .paddingTop(0.2, inches)
+                            .fontSize(0.8, em)
+                            .marginRight(0.1, inches)
+                            .color("var(--divider")
+                    })
+                    .justifyContent("space-between")
+                    .marginBottom(0)
+    
+                    p(convo.messages.last.text)
+                        .fontSize(0.8, em)
+                        .textAlign("left")
+                        .marginLeft(0.5, inches)
+                        .marginBottom(2, em)
+                        .color("var(--divider)")
+                })
+            .background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
+                .onClick(() => {
+                    this.onSelect(i)
+                })
+            })
+        })
+        .minWidth(15, vw)
+        .height(100, vh)
+        .gap(0, em)
+    }
+
+    makeConvoTitle(members) {
+        let membersString = ""
+        for(let i=0; i<members.length; i++) {
+            let member = members[i]
+            if(member.email === window.profile.email) {
+                continue;
+            }
+            if(members.length > 2) {
+                membersString += member.firstName
+            } else {
+                membersString += member.firstName + " " + member.lastName
+            }
+        }
+        return membersString
+    }
+}
+
+register(MessagesSidebar)
--- a/ui/desktop/apps/Tasks/Tasks.js
+++ b/ui/desktop/apps/Tasks/Tasks.js
--- a/ui/desktop/components/AppMenu.js
+++ b/ui/desktop/components/AppMenu.js
@@ -9,14 +9,13 @@ css(`
    app-menu.minimized {
        color: var(--accent);
        transform: translate(-50%, 65%);
-        border: 1px solid var(--accent);
+        border: 0.2px solid var(--accent);
        padding-top: 0.5em;
        padding-left: 2em; 
        padding-right: 2em;
        padding-bottom: 4em;
        bottom: 1em;
        border-radius: 12px;
-        background-color: var(--green);
    }
    
    app-menu p {
--- a/ui/desktop/components/AppWindow.js
+++ b/ui/desktop/components/AppWindow.js
--- a/ui/desktop/components/Home.js
+++ b/ui/desktop/components/Home.js
--- a/ui/desktop/components/InputBox.js
+++ b/ui/desktop/components/InputBox.js
--- a/ui/desktop/components/LoadingCircle.js
+++ b/ui/desktop/components/LoadingCircle.js
@@ -0,0 +1,25 @@
+class LoadingCircle extends Shadow {
+    render() {
+        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);
+            });
+    }
+}
+
+register(LoadingCircle)
--- a/ui/desktop/components/ProfileButton.js
+++ b/ui/desktop/components/ProfileButton.js
@@ -0,0 +1,43 @@
+import "./ProfileMenu.js"
+
+class ProfileButton extends Shadow {
+
+    async render() {
+        ZStack(async () => {
+            img("/_/icons/profile.svg", "1.5em", "1.5em")
+                .backgroundColor("var(--accent)")
+                .padding(0.2, em)
+                .borderRadius(5, px)
+
+            ProfileMenu()
+
+        })
+        .display("block")
+        .onAppear(() => {
+            window.addEventListener("mousedown", (e) => { // bad - adding every time it renders
+                if(!e.target.closest("profilebutton-")) {
+                    this.$("profile-menu").style.display = "none"
+                }
+            })
+        })
+        .onHover((hovering, e) => {
+            console.log(hovering)
+            console.log(e.target)
+            if(hovering && !e.target.closest("profile-menu")) {
+                this.$("img").backgroundColor("var(--accent)")
+                this.$("img").style.outline = "1px solid black"
+            } else if(!e.target.closest("profile-menu")) {
+                this.$("img").backgroundColor("")
+                this.$("img").style.outline = ""
+            }
+        })
+        .onClick((done) => {
+            console.log(done)
+            if(done) {
+                this.$("profile-menu").style.display = ""
+            }
+        })
+    }
+}
+
+register(ProfileButton)
--- a/ui/desktop/components/ProfileMenu.js
+++ b/ui/desktop/components/ProfileMenu.js
@@ -0,0 +1,68 @@
+class ProfileMenu extends Shadow {
+
+    render() {
+        VStack(() => {
+            h2("Profile")
+
+            HStack(() => {
+                p("Email: ")
+                .fontWeight("bold")
+
+                p(window.profile?.email)
+            })
+            .gap(1, em)
+            
+            HStack(() => {
+                p("Name: ")
+                .fontWeight("bold")
+
+                p(window.profile?.name)
+            })
+            .gap(1, em)
+
+            p("X")
+                .onClick(() => {
+                    this.style.display = "none"
+                })
+                .xRight(2, em).y(1, em)
+        })
+        .paddingLeft(1, em)
+        .color("var(--accent)")
+        .position("fixed")
+        .border("1px solid var(--accent)")
+        .x(50, vw).y(47, vh)
+        .width(70, vw)
+        .height(70, vh)
+        .backgroundColor("black")
+        .center()
+        .display("none")
+        .onAppear(async () => {
+            if(!window.profile) {
+                window.profile = await this.fetchProfile()
+                this.rerender()
+            }
+        })
+    }
+
+    async fetchProfile() {
+        try {
+            const res = await fetch("/profile", {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            });
+
+            if (!res.ok) throw new Error("Failed to fetch profile");
+
+            const profile = await res.json();
+            console.log(profile);
+            return profile
+        } catch (err) {
+            console.error(err);
+        }
+    }
+}
+
+register(ProfileMenu, "profile-menu")
--- a/ui/desktop/components/Sidebar.js
+++ b/ui/desktop/components/Sidebar.js
--- a/ui/desktop/index.html
+++ b/ui/desktop/index.html
@@ -6,8 +6,9 @@
    <link rel="icon" href="/_/icons/logo.svg">
    <link rel="stylesheet" href="/_/code/shared.css">
    <script src="/_/code/quill.js"></script>
+    <script src="/_/code/zod.js"></script>
    <script type="module" src="75820185/index.js"></script>
 </head>
-<body style="margin: 0px">
+<body>
 </body>
 </html>
--- a/ui/desktop/index.js
+++ b/ui/desktop/index.js
@@ -0,0 +1,8 @@
+import Socket from "./ws/Socket.js"
+import "./components/Home.js"
+
+import util from "./util.js"
+window.util = util
+
+window.Socket = new Socket()
+Home()
--- a/ui/desktop/util.js
+++ b/ui/desktop/util.js
@@ -0,0 +1,9 @@
+export default class util {
+    static formatTime(str) {
+        const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
+        if (!match) return null;
+
+        const [_, hourMin, ampm] = match;
+        return hourMin + ampm.toLowerCase();
+    }
+}
--- a/ui/desktop/ws/Connection.js
+++ b/ui/desktop/ws/Connection.js
@@ -0,0 +1,62 @@
+class Connection {
+    connectionTries = 0
+    ws;
+    linkCreated;
+    wsStatus;
+
+    constructor(receiveCB) {
+        this.init()
+        this.receiveCB = receiveCB
+    }
+    
+    init() {
+        if(window.location.hostname.includes("local")) {
+            this.ws = new WebSocket("ws://" + window.location.host)
+        } else {
+            this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
+        }
+        this.ws.addEventListener('open', () => {
+            this.connectionTries = 0
+            console.log("Websocket connection established.");
+            this.ws.addEventListener('message', this.receiveCB)
+        });
+        this.ws.addEventListener("close", () => {
+            this.checkOpen();
+            console.log('Websocket Closed')
+        })
+    }
+    
+    async checkOpen() {
+        if (this.ws.readyState === WebSocket.OPEN) {
+            return true
+        } else {
+            await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
+            this.connectionTries++
+            console.log('Reestablishing connection')
+            this.init()
+        }
+    }
+
+    sleep = (time) => {
+        return new Promise(resolve => {
+            setTimeout(resolve, time);
+        });
+    }
+    
+    send = (msg) => {
+        console.log("sending")
+        if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(msg);
+        }
+        else if(this.connectionTries === 0) {
+            setTimeout(() => {
+                this.send(msg)
+            }, 100)
+        }
+        else {
+            console.error('No websocket connection: Cannot send message');
+        }
+    }
+}
+
+export default Connection
--- a/ui/desktop/ws/Socket.js
+++ b/ui/desktop/ws/Socket.js
@@ -0,0 +1,45 @@
+import Connection from "./Connection.js";
+
+export default class Socket {
+    connection;
+    disabled = true;
+    requestID = 1;
+    pending = new Map();
+
+    constructor() {
+        this.connection = new Connection(this.receive);
+    }
+
+    isOpen() {
+        if(this.connection.checkOpen()) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    send(msg) {
+        return new Promise(resolve => {
+            const id = (++this.requestID).toString();
+            this.pending.set(id, resolve);
+            this.connection.send(JSON.stringify({ id, ...msg }));
+        });
+    }
+
+    receive = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.id && this.pending.has(msg.id)) {
+            this.pending.get(msg.id)(msg);
+            this.pending.delete(msg.id);
+            return;
+        } else {
+            this.onBroadcast(msg)
+        }
+    }
+
+    onBroadcast(msg) {
+        window.dispatchEvent(new CustomEvent(msg.event, {
+            detail: msg.msg
+        }));
+    }
+}
--- a/ui/mobile/apps/Forum/Forum.js
+++ b/ui/mobile/apps/Forum/Forum.js
@@ -0,0 +1,66 @@
+import './ForumPanel.js'
+
+css(`
+    forum- {
+        font-family: 'Bona';
+    }
+
+    forum- 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 Forum extends Shadow {
+
+    selectedForum = "HY"
+
+    render() {
+        ZStack(() => {
+            VStack(() => {
+
+                ForumPanel()
+
+                input("Message Hyperia", "98%")
+                    .paddingVertical(1, em)
+                    .paddingLeft(2, pct)
+                    .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(0.5, em)
+            .width(100, pct)
+            .height(100, vh)
+            .alignHorizontal("center")
+            .alignVertical("end")
+        })
+        .onAppear(() => document.body.style.backgroundColor = "var(--darkbrown)")
+        .width(100, pct)
+        .height(100, pct)
+    }
+
+    
+}
+
+register(Forum)
--- a/ui/mobile/apps/Forum/ForumPanel.js
+++ b/ui/mobile/apps/Forum/ForumPanel.js
@@ -0,0 +1,88 @@
+import "../../components/LoadingCircle.js"
+
+class ForumPanel extends Shadow {
+    forums = [
+        "HY"
+    ]
+    messages = []
+
+    render() {
+        VStack(() => {
+            if(this.messages.length > 0) {
+
+                let previousDate = null
+
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    const dateParts = this.parseDate(message.time);
+                    const { date, time } = dateParts;
+
+                    if (previousDate !== date) {
+                        previousDate = date;
+
+                        p(date)
+                            .textAlign("center")
+                            .opacity(0.5)
+                            .marginVertical(1, em)
+                            .color("var(--divider)")
+                    }
+
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.sentBy)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(util.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                }
+            } else {
+                LoadingCircle()
+            }
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(100, pct)
+        .width(96, pct)
+        .paddingTop(5, em)
+        .paddingBottom(2, em)
+        .paddingLeft(4, pct)
+        .backgroundColor("var(--darkbrown)")
+        .onAppear(async () => {
+            requestAnimationFrame(() => {
+                this.scrollTop = this.scrollHeight
+            });
+            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) {
+                this.messages = res.msg
+                this.rerender()
+            }
+            window.addEventListener("new-post", (e) => {
+                this.messages = e.detail
+                if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
+                    this.rerender()
+                }
+            })
+        })
+    }
+
+    parseDate(str) {
+        // Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
+        const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
+        if (!match) return null;
+
+        const [, mm, dd, yyyy, hh, min, ampm] = match;
+        const date = `${mm}/${dd}/${yyyy}`;
+        const time = `${hh}:${min}${ampm.toLowerCase()}`;
+
+        return { date, time };
+    }
+}
+
+register(ForumPanel)
--- a/ui/mobile/apps/Jobs/Jobs.js
+++ b/ui/mobile/apps/Jobs/Jobs.js
@@ -0,0 +1,101 @@
+import "./JobsSidebar.js"
+import "./JobsGrid.js"
+
+css(`
+    jobs- {
+        font-family: 'Bona';
+    }
+
+    jobs- 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 Jobs extends Shadow {
+    jobs = [
+        {
+            title: "Austin Chapter Lead",
+            salary: "1% of Local Revenue",
+            company: "Hyperia",
+            city: "Austin",
+            state: "TX"
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                JobsSidebar()
+    
+                JobsGrid(this.jobs)
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+
+            HStack(() => {
+                input("Search jobs... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ Add Job")
+                    .width(7, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.3px solid var(--accent2)")
+                    .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, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Jobs)
--- a/ui/mobile/apps/Jobs/JobsGrid.js
+++ b/ui/mobile/apps/Jobs/JobsGrid.js
@@ -0,0 +1,60 @@
+class JobsGrid extends Shadow {
+    jobs;
+
+    constructor(jobs) {
+        super()
+        this.jobs = jobs
+    }
+
+    boldUntilFirstSpace(text) {
+        const index = text.indexOf(' ');
+        if (index === -1) {
+            // No spaces — bold the whole thing
+            return `<b>${text}</b>`;
+        }
+        return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
+    }
+
+    render() {
+        VStack(() => {
+            h3("Results")
+            .marginTop(0.1, em)
+            .marginBottom(1, em)
+            .marginLeft(0.4, em)
+            .color("var(--accent2)")
+
+            if (this.jobs.length > 0) {
+                ZStack(() => {
+                    for (let i = 0; i < this.jobs.length; i++) {
+                        VStack(() => {
+                            p(this.jobs[i].title)
+                                .fontSize(1.2, em)
+                                .fontWeight("bold")
+                                .marginBottom(0.5, em)
+                            p(this.jobs[i].company)
+                            p(this.jobs[i].city + ", " + this.jobs[i].state)
+                                .marginBottom(0.5, em)
+                            p(this.boldUntilFirstSpace(this.jobs[i].salary))
+                        })
+                        .padding(1, em)
+                        .borderRadius(5, "px")
+                        .background("var(--darkbrown)")
+                    }
+                })
+                .display("grid")
+                .gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
+                .gap(1, em)
+            } else {
+                p("No Jobs!")
+            }
+        })
+        .height(100, vh)
+        .paddingLeft(2, em)
+        .paddingRight(2, em)
+        .paddingTop(2, em)
+        .gap(0, em)
+        .width(100, "%")
+    }
+}
+
+register(JobsGrid)
--- a/ui/mobile/apps/Jobs/JobsSidebar.js
+++ b/ui/mobile/apps/Jobs/JobsSidebar.js
@@ -0,0 +1,26 @@
+class JobsSidebar extends Shadow {
+    render() {
+        VStack(() => {
+            h3("Location")
+            .color("var(--accent2)")
+            .marginBottom(0, em)
+
+            HStack(() => {
+                input("Location", "100%")
+                    .paddingLeft(3, em)
+                    .paddingVertical(0.75, em)
+                    .backgroundImage("/_/icons/locationPin.svg")
+                    .backgroundRepeat("no-repeat")
+                    .backgroundSize("18px 18px")
+                    .backgroundPosition("10px center")
+            })
+        })
+        .paddingTop(1, em)
+        .paddingLeft(3, em)
+        .paddingRight(3, em)
+        .gap(1, em)
+        .minWidth(10, vw)
+    }
+}
+
+register(JobsSidebar)
--- a/ui/mobile/apps/Market/Market.js
+++ b/ui/mobile/apps/Market/Market.js
@@ -0,0 +1,105 @@
+import "./MarketSidebar.js"
+import "./MarketGrid.js"
+
+css(`
+    market- {
+        font-family: 'Bona';
+    }
+
+    market- 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 Market extends Shadow {
+
+    listings = [
+        {
+            title: "Shield Lapel Pin",
+            stars: "5",
+            reviews: 1,
+            price: "$12",
+            company: "Hyperia",
+            type: "new",
+            image: "/db/images/1",
+            madeIn: "America"
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                MarketSidebar()
+
+                MarketGrid(this.listings)
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+
+            HStack(() => {
+                input("Search for products... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ Add Item")
+                    .width(7, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--accent2)")
+                    .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, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Market)
--- a/ui/mobile/apps/Market/MarketGrid.js
+++ b/ui/mobile/apps/Market/MarketGrid.js
@@ -0,0 +1,140 @@
+class MarketGrid extends Shadow {
+    listings;
+
+    constructor(listings) {
+        super()
+        this.listings = listings
+    }
+
+    boldUntilFirstSpace(text) {
+        if(!text) return
+        const index = text.indexOf(' ');
+        if (index === -1) {
+            // No spaces — bold the whole thing
+            return `<b>${text}</b>`;
+        }
+        return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
+    }
+
+    render() {
+        VStack(() => {
+            h3("Results")
+                .marginTop(0.1, em)
+                .marginBottom(1, em)
+                .marginLeft(0.4, em)
+                .color("var(--accent)")
+                .opacity(0.7)
+
+            if (this.listings.length > 0) {
+                ZStack(() => {
+                    // BuyModal()
+
+                    let params = new URLSearchParams(window.location.search);
+
+                    const hyperiaMade = params.get("hyperia-made") === "true";
+                    const americaMade = params.get("america-made") === "true";
+                    const newItem = params.get("new") === "true";
+                    const usedItem = params.get("used") === "true";
+
+
+                    let filtered = this.listings;
+                    if (hyperiaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "Hyperia");
+                    }
+                    if (americaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "America");
+                    }
+                    if (newItem) {
+                        filtered = filtered.filter(item => item.type === "new");
+                    }
+                    if (usedItem) {
+                        filtered = filtered.filter(item => item.type === "used");
+                    }
+
+                    for (let i = 0; i < filtered.length; i++) {
+                        const rating = filtered[i].stars
+                        const percent = (rating / 5)
+
+                        VStack(() => {
+                            img(filtered[i].image)
+                                .marginBottom(0.5, em)
+
+                            p(filtered[i].company)
+                                .marginBottom(0.5, em)
+
+                            p(filtered[i].title)
+                                .fontSize(1.2, em)
+                                .fontWeight("bold")
+                                .marginBottom(0.5, em)
+
+                            HStack(() => {
+                                p(filtered[i].stars)
+                                    .marginRight(0.2, em)
+
+                                ZStack(() => {
+                                    div("★★★★★") // Empty stars (background)
+                                        .color("#ccc")
+    
+                                    div("★★★★★") // Filled stars (foreground, clipped by width)
+                                        .color("#ffa500")
+                                        .position("absolute")
+                                        .top(0)
+                                        .left(0)
+                                        .whiteSpace("nowrap")
+                                        .overflow("hidden")
+                                        .width(percent * 5, em)
+                                })
+                                .display("inline-block")
+                                .position("relative")
+                                .fontSize(1.2, em)
+                                .lineHeight(1)
+                                
+                                p(filtered[i].reviews)
+                                .marginLeft(0.2, em)
+                            })
+                                .marginBottom(0.5, em)
+
+                            p(filtered[i].price)
+                                .fontSize(1.75, em)
+                                .marginBottom(0.5, em)
+
+                            button("Coming Soon!")
+                                .onClick((finished) => {
+                                    if(finished) {
+
+                                    }
+                                })
+                                .onHover(function (hovering) {
+                                    if(hovering) {
+                                        this.style.backgroundColor = "var(--green)"
+                                    } else {
+                                        this.style.backgroundColor = ""
+                                    }
+                                })
+
+                        })
+                        .padding(1, em)
+                        .border("1px solid var(--accent2)")
+                        .borderRadius(5, "px")
+                    }
+                })
+                .display("grid")
+                .gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
+                .gap(1, em)
+            } else {
+                p("No Listings!")
+            }
+        })
+        .onQueryChanged(() => {
+            console.log("query did change yup")
+            this.rerender()
+        })
+        .height(100, vh)
+        .paddingLeft(2, em)
+        .paddingRight(2, em)
+        .gap(0, em)
+        .width(100, "%")
+    }
+}
+
+register(MarketGrid)
--- a/ui/mobile/apps/Market/MarketSidebar.js
+++ b/ui/mobile/apps/Market/MarketSidebar.js
@@ -0,0 +1,85 @@
+class MarketSidebar extends Shadow {
+
+    handleChecked(e) {
+        let checked = e.target.checked
+        let label = $(`label[for="${e.target.id}"]`).innerText
+        if(checked) {
+            window.setQuery(label.toLowerCase(), true)
+        } else {
+            window.setQuery(label.toLowerCase(), null)
+        }
+    }
+
+    render() {
+        VStack(() => {
+
+            p("Make")
+
+            HStack(() => {
+                input()
+                    .attr({
+                        "type": "checkbox",
+                        "id": "hyperia-check"
+                    })
+                    .onChange(this.handleChecked)
+                label("Hyperia-Made")
+                    .attr({
+                        "for": "hyperia-check"
+                    })
+                    .marginLeft(0.5, em)
+            })
+
+            HStack(() => {
+                input()
+                    .attr({
+                        "type": "checkbox",
+                        "id": "america-check"
+                    })
+                    .onChange(this.handleChecked)
+                label("America-Made")
+                    .attr({
+                        "for": "america-check"
+                    })
+                    .marginLeft(0.5, em)
+            })
+
+            p("Condition")
+
+            HStack(() => {
+                input()
+                    .attr({
+                        "type": "checkbox",
+                        "id": "new-check"
+                    })
+                    .onChange(this.handleChecked)
+                label("New")
+                    .attr({
+                        "for": "new-check"
+                    })
+                    .marginLeft(0.5, em)
+            })
+
+            HStack(() => {
+                input()
+                    .attr({
+                        "type": "checkbox",
+                        "id": "used-check"
+                    })
+                    .onChange(this.handleChecked)
+                label("Used")
+                    .attr({
+                        "for": "used-check"
+                    })
+                    .marginLeft(0.5, em)
+            })
+        })
+        .paddingTop(12, vh)
+        .paddingLeft(3, em)
+        .paddingRight(3, em)
+        .gap(1, em)
+        .minWidth(10, vw)
+        .userSelect('none')
+    }
+}
+
+register(MarketSidebar)
--- a/ui/mobile/apps/Messages/Messages.js
+++ b/ui/mobile/apps/Messages/Messages.js
@@ -0,0 +1,188 @@
+import "./MessagesSidebar.js"
+import "./MessagesPanel.js"
+
+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 {
+    conversations = []
+    selectedConvoID = null
+    onConversationSelect(i) {
+        console.log("convo selected: ", i)
+        this.selectedConvoID = i
+        this.$("messagessidebar-").rerender()
+        this.$("messagespanel-").rerender()
+    }
+
+    getConvoFromID(id) {
+        for(let i=0; i<this.conversations.length; i++) {
+            if(this.conversations[i].id === id) {
+                return this.conversations[i]
+            }
+        }
+    }
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
+
+                VStack(() => {
+                    if(this.getConvoFromID(this.selectedConvoID)) {
+                        MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
+                    } else {
+                        MessagesPanel()
+                    }
+
+                    input("Send Message", "93%")
+                        .paddingVertical(1, em)
+                        .paddingHorizontal(2, em)
+                        .color("var(--accent)")
+                        .background("var(--darkbrown)")
+                        .marginBottom(6, em)
+                        .border("none")
+                        .fontSize(1, em)
+                        .onKeyDown((e) => {
+                            if (e.key === "Enter") {
+                                window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
+                                e.target.value = ""
+                            }
+                        })
+                })
+                .gap(1, em)
+                .width(100, pct)
+                .alignHorizontal("center")
+                .alignVertical("end")
+            })
+            .onAppear(async () => {
+                let res = await Socket.send({app: "MESSAGES", operation: "GET"})
+                if(!res) console.error("failed to get messages")
+
+                if(res.msg.length > 0 && this.conversations.length === 0) {
+                    this.conversations = res.msg
+                    this.selectedConvoID = this.conversations[0].id
+                    this.rerender()
+                }
+
+                window.addEventListener("new-message", (e) => {
+                    let convoID = e.detail.conversationID
+                    let messages = e.detail.messages
+                    let convo = this.getConvoFromID(convoID)
+                    convo.messages = messages
+                    this.rerender()
+                })
+            })
+            .width(100, "%")
+            .height(87, vh)
+            .x(0).y(13, vh)
+
+            VStack(() => {
+                p("Add Message")
+
+                input("enter email...")
+                    .color("var(--accent)")
+                    .onKeyDown(function (e) {
+                        if (e.key === "Enter") {
+                            window.Socket.send({app: "MESSAGES", operation: "ADDCONVERSATION", msg: {email: this.value }})
+                            this.value = ""
+                        }
+                    })
+
+                p("x")
+                .onClick(function (done) {
+                    if(done) {
+                        this.parentElement.style.display = "none"
+                    }
+                })
+                .xRight(2, em).y(2, em)
+                .fontSize(1.4, em)
+                .cursor("pointer")
+                
+            })
+            .gap(1, em)
+            .alignVertical("center")
+            .alignHorizontal("center")
+            .backgroundColor("black")
+            .border("1px solid var(--accent)")
+            .position("fixed")
+            .x(50, vw).y(50, vh)
+            .center()
+            .width(60, vw)
+            .height(60, vh)
+            .display("none")
+            .attr({id: "addPanel"})
+
+            HStack(() => {
+                input("Search messages... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ New Message")
+                    .width(13, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((done) => {
+                        console.log("click")
+                        if(done) {
+                            this.$("#addPanel").style.display = "flex"
+                        }
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+}
+
+register(Messages)
--- a/ui/mobile/apps/Messages/MessagesPanel.js
+++ b/ui/mobile/apps/Messages/MessagesPanel.js
@@ -0,0 +1,56 @@
+import "../../components/LoadingCircle.js"
+
+class MessagesPanel extends Shadow {
+    messages
+
+    constructor(messages) {
+        super()
+        this.messages = messages
+    }
+
+    render() {
+        VStack(() => {
+            if(this.messages) {
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    let fromMe = window.profile.email === message.from.email
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.from.firstName + " " + message.from.lastName)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(util.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                    .paddingVertical(0.5, em)
+                    .marginLeft(fromMe ? 70 : 0, pct)
+                    .paddingRight(fromMe ? 10 : 0, pct)
+                    .marginRight(fromMe ? 0 : 70, pct)
+                    .paddingLeft(fromMe ? 5 : 10, pct)
+                    .background(fromMe ? "var(--brown)" : "var(--green)")
+                }
+            } else {
+                LoadingCircle()
+            }
+        })
+        .onAppear(async () => {
+            requestAnimationFrame(() => {
+                this.scrollTop = this.scrollHeight
+            });
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(95, pct)
+        .width(100, pct)
+        .paddingTop(2, em)
+        .paddingBottom(2, em)
+        .backgroundColor("var(--darkbrown)")
+    }
+}
+
+register(MessagesPanel)
--- a/ui/mobile/apps/Messages/MessagesSidebar.js
+++ b/ui/mobile/apps/Messages/MessagesSidebar.js
@@ -0,0 +1,73 @@
+class MessagesSidebar extends Shadow {
+    conversations = []
+    selectedConvoID
+    onSelect
+
+    constructor(conversations, selectedConvoID, onSelect) {
+        super()
+        this.conversations = conversations
+        this.selectedConvoID = selectedConvoID
+        this.onSelect = onSelect
+    }
+
+    render() {
+         VStack(() => {
+            this.conversations.forEach((convo, i) => {
+
+                VStack(() => {
+                    HStack(() => {
+
+                        p(this.makeConvoTitle(convo.between))
+                            .textAlign("left")
+                            .marginLeft(0.5, inches)
+                            .paddingTop(0.2, inches)
+                            .width(100, pct)
+                            .marginTop(0)
+                            .fontSize(1, em)
+                            .fontWeight("bold")
+
+                        p(util.formatTime(convo.messages.last.time))
+                            .paddingTop(0.2, inches)
+                            .fontSize(0.8, em)
+                            .marginRight(0.1, inches)
+                            .color("var(--divider")
+                    })
+                    .justifyContent("space-between")
+                    .marginBottom(0)
+    
+                    p(convo.messages.last.text)
+                        .fontSize(0.8, em)
+                        .textAlign("left")
+                        .marginLeft(0.5, inches)
+                        .marginBottom(2, em)
+                        .color("var(--divider)")
+                })
+            .background(convo.id === this.selectedConvoID ? "var(--darkbrown)" : "")
+                .onClick(() => {
+                    this.onSelect(i)
+                })
+            })
+        })
+        .minWidth(15, vw)
+        .height(100, vh)
+        .gap(0, em)
+    }
+
+    makeConvoTitle(members) {
+        let membersString = ""
+        for(let i=0; i<members.length; i++) {
+            let member = members[i]
+            if(member.email === window.profile.email) {
+                continue;
+            }
+            if(members.length > 2) {
+                membersString += member.firstName
+            } else {
+                membersString += member.firstName + " " + member.lastName
+            }
+        }
+        return membersString
+    }
+}
+
+register(MessagesSidebar)
--- a/ui/site/apps/Messages/Messages.js
+++ b/ui/site/apps/Messages/Messages.js
@@ -1,9 +1,9 @@
 css(`
-    messages- {
+    tasks- {
        font-family: 'Bona';
    }

-    messages- input::placeholder {
+    tasks- input::placeholder {
        font-family: 'Bona Nova';
        font-size: 0.9em;
        color: var(--accent);
@@ -22,25 +22,35 @@ css(`
    }
 `)

-class Messages extends Shadow {
-    friends = []
-    conversations = []
+class Tasks extends Shadow {
+    projects = [
+        {
+            "title": "Blockcatcher",
+            "tasks": {}
+        }
+    ]
+    columns = [
+        {
+            "title": "backlog",
+            "tasks": {}
+        }
+    ]

    render() {
        ZStack(() => {
            HStack(() => {
                VStack(() => {
-                    h3("Friends")
+                    h3("Projects")
                        .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)
+                    if (this.projects.length >= 1) {
+                        for(let i = 0; i < this.projects.length; i++) {
+                            p(this.projects[i].title)
                        }
                    } else {
-                        p("No Friends!")
+                        p("No Projects!")
                    }
                })
                .height(100, vh)
@@ -48,17 +58,12 @@ class Messages extends Shadow {
                .paddingRight(2, em)
                .paddingTop(2, em)
                .gap(0, em)
-                .borderRight("1px solid var(--accent2)")
+                .borderRight("0.5px solid var(--accent2)")

-                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)
+                HStack(() => {
+                    if (this.columns.length >= 1) {
+                        for(let i = 0; i < this.columns.length; i++) {
+                            p(this.columns[i].name)
                        }
                    } else {
                        p("No Conversations!")
@@ -69,11 +74,11 @@ class Messages extends Shadow {
                .paddingRight(2, em)
                .paddingTop(2, em)
                .gap(0, em)
-                .borderRight("1px solid var(--accent2)")
+                .borderRight("0.5px solid var(--accent2)")
            })
            .width(100, "%")
            .x(0).y(13, vh)
-            .borderTop("1px solid var(--accent2)")
+            .borderTop("0.5px solid var(--accent2)")

            p("0 Items")
                .position("absolute")
@@ -81,14 +86,14 @@ class Messages extends Shadow {
                .transform("translate(-50%, -50%)")

            HStack(() => {
-                input("Search messages...", "45vw")
+                input("Search tasks...", "45vw")
                    .attr({
                        "type": "text"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
-                    .border("1px solid var(--accent2)")
+                    .border("0.5px solid var(--accent2)")
                    .outline("none")
                    .color("var(--accent)")
                    .borderRadius(10, px)
@@ -97,7 +102,7 @@ class Messages extends Shadow {
                    .marginLeft(2, em)
                    .borderRadius(10, px)
                    .background("transparent")
-                    .border("1px solid var(--accent2)")
+                    .border("0.5px solid var(--accent2)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
@@ -110,12 +115,12 @@ class Messages extends Shadow {
                        }
                    })

-                button("+ New Message")
-                    .width(13, em)
+                button("+ New Task")
+                    .width(9, em)
                    .marginLeft(1, em)
                    .borderRadius(10, px)
                    .background("transparent")
-                    .border("1px solid var(--accent2)")
+                    .border("0.5px solid var(--accent2)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
                    .onHover(function (hovering) {
@@ -140,39 +145,9 @@ class Messages extends Shadow {
        .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(--accent2)")
-                .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)
+register(Tasks)
--- a/ui/mobile/components/AppMenu.js
+++ b/ui/mobile/components/AppMenu.js
@@ -0,0 +1,77 @@
+class AppMenu extends Shadow {
+    selected = ""
+
+    onNewSelection() {
+        this.$$("img").forEach((image) => {
+            image.style.background = ""
+        })
+    }
+
+    render() {
+        console.log("rendering")
+        HStack(() => {
+            img("/_/icons/Column.svg", "1.5em", "1.5em")
+                .attr({app: "forum"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "var(--accent)"
+                    console.log(e.target, e.target.style.background)
+                    if(finished) {
+                        window.navigateTo("/")
+                    }
+                })
+            img("/_/icons/letter.svg", "1.5em", "1.5em")
+                .attr({app: "messages"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "rgb(112 150 114)"
+                    if(finished) {
+                        window.navigateTo("/messages")
+                    }
+                })
+            img("/_/icons/jobs.svg", "1.5em", "1.5em") 
+                .attr({app: "jobs"})
+                .padding(0.5, em)
+                .borderRadius(10, px)
+                .onAppear(function () {
+                    this.style.border = "1px solid black"
+                })
+                .onClick((finished, e) => {
+                    if(finished) {
+                        this.onNewSelection()
+                    }
+                    e.target.style.background = "#9392bb"
+                    if(finished) {
+                        window.navigateTo("/jobs")
+                    }
+                })
+        })
+        .borderTop("1px solid black")
+        .height("auto")
+        .position('fixed')
+        .background("var(--main)")
+        .zIndex(1)
+        .x(0).yBottom(0)
+        .justifyContent("space-between")
+        .paddingHorizontal(4, em)
+        .paddingVertical(1, em)
+        .width(100, vw)
+        .boxSizing("border-box")
+    }
+}
+
+register(AppMenu)
--- a/ui/mobile/components/Home.js
+++ b/ui/mobile/components/Home.js
@@ -0,0 +1,37 @@
+import "./AppMenu.js"
+import "../apps/Forum/Forum.js"
+import "../apps/Messages/Messages.js"
+import "../apps/Jobs/Jobs.js"
+    
+class Home extends Shadow {
+
+    render() {
+        ZStack(() => {
+
+            ZStack(() => {
+                switch(window.location.pathname) {
+                    case "/":
+                        Forum()
+                        break;
+    
+                    case "/messages":
+                        Messages()
+                        break;
+    
+                    case "/jobs":
+                        Jobs()
+                        break;
+                }
+            })
+            .onNavigate(function () {
+                console.log("navigate")
+                this.rerender()
+            })
+
+            AppMenu()
+        })
+        .overflowX("hidden")
+    }
+}
+
+register(Home)
--- a/ui/mobile/components/LoadingCircle.js
+++ b/ui/mobile/components/LoadingCircle.js
@@ -0,0 +1,25 @@
+class LoadingCircle extends Shadow {
+    render() {
+        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);
+            });
+    }
+}
+
+register(LoadingCircle)
--- a/ui/mobile/index.html
+++ b/ui/mobile/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Hyperia</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="/_/icons/logo.svg">
+    <link rel="stylesheet" href="/_/code/shared.css">
+    <script src="/_/code/quill.js"></script>
+    <script src="/_/code/zod.js"></script>
+    <script type="module" src="75820185/index.js"></script>
+</head>
+<body>
+</body>
+</html>
--- a/ui/mobile/index.js
+++ b/ui/mobile/index.js
@@ -0,0 +1,8 @@
+import Socket from "/_/code/ws/Socket.js"
+import "./components/Home.js"
+
+import util from "./util.js"
+window.util = util
+
+window.Socket = new Socket()
+Home()
--- a/ui/mobile/util.js
+++ b/ui/mobile/util.js
@@ -0,0 +1,9 @@
+export default class util {
+    static formatTime(str) {
+        const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
+        if (!match) return null;
+
+        const [_, hourMin, ampm] = match;
+        return hourMin + ampm.toLowerCase();
+    }
+}
--- a/ui/public/components/SignupForm.js
+++ b/ui/public/components/SignupForm.js
@@ -6,6 +6,7 @@ class SignupForm extends Shadow {
    inputStyles(el) {
        return el
        .border("1px solid var(--accent)")
+        .color("var(--accent)")
    }

    render() {
@@ -24,52 +25,52 @@ class SignupForm extends Shadow {
                    HStack(() => {
    
                        VStack(() => {
-                            input("First Name")
-                                .attr({name: "firstName", type: "name"})
+                            input("First Name*")
+                                .attr({name: "firstName", type: "name", required: "true"})
                                .styles(this.inputStyles)
            
-                            input("Last Name")
-                                .attr({name: "lastName", type: "name"})
+                            input("Last Name*")
+                                .attr({name: "lastName", type: "name", required: "true"})
                                .styles(this.inputStyles)
            
-                            input("Email")
-                                .attr({name: "email", type: "email"})
+                            input("Email*")
+                                .attr({name: "email", type: "email", required: "true"})
                                .styles(this.inputStyles)
                                
-                            input("Password")
-                                .attr({name: "password", type: "password"})
+                            input("Password*")
+                                .attr({name: "password", type: "password", required: "true"})
                                .styles(this.inputStyles)
            
-                            input("Confirm Password")
-                                .attr({name: "password", type: "password"})
+                            input("Confirm Password*")
+                                .attr({name: "password", type: "password", required: "true"})
                                .styles(this.inputStyles)
                        })
                        .width(50, "%")
                        .gap(1, em)

                        VStack(() => {
-                            input("Street Address")
-                                .attr({ name: "address1", type: "text", autocomplete: "address-line1" })
+                            input("Street Address*")
+                                .attr({ name: "address1", type: "text", autocomplete: "address-line1", required: "true" })
                                .styles(this.inputStyles)
            
                            input("Apt, Suite, Unit (optional)")
                                .attr({ name: "address2", type: "text", autocomplete: "address-line2" })
                                .styles(this.inputStyles)
            
-                            input("City")
-                                .attr({ name: "city", type: "text", autocomplete: "address-level2" })
+                            input("City*")
+                                .attr({ name: "city", type: "text", autocomplete: "address-level2", required: "true" })
                                .styles(this.inputStyles)
            
-                            input("State")
-                                .attr({ name: "state", type: "text", autocomplete: "address-level1" })
+                            input("State*")
+                                .attr({ name: "state", type: "text", autocomplete: "address-level1", required: "true" })
                                .styles(this.inputStyles)
            
-                            input("ZIP Code")
-                                .attr({ name: "zip", type: "text", autocomplete: "postal-code" })
+                            input("ZIP Code*")
+                                .attr({ name: "zip", type: "text", autocomplete: "postal-code", required: "true" })
                                .styles(this.inputStyles)
            
-                            input("Country")
-                                .attr({ name: "country", type: "text", autocomplete: "country-name" })
+                            input("Country*")
+                                .attr({ name: "country", type: "text", autocomplete: "country-name", required: "true" })
                                .styles(this.inputStyles)
                        })
                        .width(50, "%")
@@ -82,6 +83,7 @@ class SignupForm extends Shadow {
                })
                .gap(2, em)
            })
+            .color("var(--accent)")
            .onSubmit(async (e) => {
                e.preventDefault()
                console.log("submitting")
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -5,11 +5,25 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/_/icons/logo.svg">
    <link rel="stylesheet" href="/_/code/shared.css">
+    <link
+      rel="preload"
+      href="/_/fonts/BonaNova/BonaNova-Regular.woff"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    >
+    <link
+      rel="preload"
+      href="/_/fonts/BonaNova/BonaNova-Bold.woff"
+      as="font"
+      type="font/woff"
+      crossorigin
+    >
    <style>

      body {
        font-size: 16px;
-        background-image: url("/_/images/fabric.png");
+        background-image: url("/_/images/fabric.webp");
        background-size: 33vw auto; /* width height of each tile */
      }
    </style>
--- a/ui/public/pages/Events.js
+++ b/ui/public/pages/Events.js
@@ -2,7 +2,7 @@ class Events extends Shadow {

    events = [
        {
-            date: `January 2, 2025`,
+            date: `January 23, 2025`,
            title: `Hyperia Winter Ball`,
            description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
            location: `Austin, TX`
@@ -10,8 +10,12 @@ class Events extends Shadow {
    ]

    render() {
+        ZStack(() => {
            VStack(() => {
    
+                h1("HYPERIA")
+                .marginBottom(0, em)
+
                p("Public Events")
                .fontSize(1.2, em)
                .marginBottom(2, em)
@@ -20,7 +24,7 @@ class Events extends Shadow {
                Stack(() => {
        
                    VStack(() => {
-                    p(`January 2, 2025`)
+                        p(`February 7, 2026`)
        
                        p(`Hyperia Winter Ball`)
                        .fontSize(1.2, em)
@@ -29,14 +33,31 @@ class Events extends Shadow {
    
                    })
    
-                p(`Join us in Austin, Texas for a great dance, with free drinks and live music by Boerne's own Noah Kurtis. <br><br>Admission: $50 for men, women are free.`)
+                    p(`Join us in Austin, Texas for two-stepping and live music by Noah Kurtis. 21 and up.`)
                        .marginRight(4, em)

-                button("Tickets Available Soon")
+                    HStack(() => {
+                        img("/_/icons/creditcards/visa.svg")
+                        img("/_/icons/creditcards/mastercard.svg")
+                        img("/_/icons/creditcards/discover.svg")
+                        img("/_/icons/creditcards/amex.svg")
+                    })
+                    .alignSelf("flex-start")
+                    .height(2, em)
+                    .maxWidth(40, vw)
+    
+                    button("RSVP")
                        .color("var(--darkbrown")
                        .border("1px solid #ab2f007d")
-                    .background('var(--grey)')
+                        .background('var(--green)')
                        .marginLeft("auto")
+                        .onClick(async function() {
+                              window.open("https://partiful.com/e/XqnPwBKS9vUMd8GYX3xz?c=HLU81h69", "_blank", "noopener");
+                            // this.innerText = "Loading..."
+                            // const res = await fetch("/create-checkout-session", { method: "POST" });
+                            // const data = await res.json();
+                            // window.location = data.url;                        
+                        })
                })
                .gap(3, em)
                .color("var(--darkbrown)")
@@ -47,7 +68,258 @@ class Events extends Shadow {
            })
            .marginLeft(window.isMobile() ? 0 : 15, vmax)
            .marginRight(window.isMobile() ? 0 : 15, vmax)
-        .marginTop(15, vmax)
+            .marginTop(10, vmax)
+
+            HStack(() => {
+                p("Privacy Policy")
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.color = "var(--darkbrown)"
+                    } else {
+                        this.style.color = ""
+                    }
+                })
+                .onClick(() => {
+                    this.$("#policyWindow").style.display = "flex"
+                })
+                p("Refund and Return Policy")
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.color = "var(--darkbrown)"
+                    } else {
+                        this.style.color = ""
+                    }
+                })
+                .onClick(() => {
+                    this.$("#refundWindow").style.display = "flex"
+                })
+                p("Contact Us")
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.color = "var(--darkbrown)"
+                    } else {
+                        this.style.color = ""
+                    }
+                })
+                .onClick(() => {
+                    this.$("#contactWindow").style.display = "flex"
+                })
+            })
+            .x(50, vw).yBottom(0, vh)
+            .center()
+            .gap(2, em)
+            .opacity(0.5)
+            .cursor("default")
+        })
+
+        VStack(() => {
+
+                p("Privacy Policy")
+                    .fontSize(2, em)
+                    .fontWeight(600)
+                    .marginBottom(1, em)
+
+                p("We value your privacy. This Privacy Policy explains how we collect, use, store, and protect your information when you use our website or services.")
+
+                p("1. Information We Collect")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("• Personal information you provide, such as your name, email address, or other contact details.")
+                p("• Automatically collected data, including IP address, browser type, device information, and usage statistics.")
+                p("• Cookies or similar tracking technologies that help us improve the user experience.")
+
+                p("2. How We Use Your Information")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("• To operate and improve our website and services.")
+                p("• To communicate with you about updates, support requests, or account-related matters.")
+                p("• To maintain security, prevent fraud, and ensure proper functionality.")
+
+                p("3. How We Share Information")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("We do not sell your personal information. We may share data only with trusted service providers who help us operate the platform, or when required by law.")
+
+                p("4. Data Storage & Security")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("We use reasonable technical and administrative safeguards to protect your information. However, no system is completely secure, and we cannot guarantee absolute protection.")
+
+                p("5. Cookies")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("Our site may use cookies to remember preferences, analyze traffic, and enhance usability. You can disable cookies in your browser settings, but some features may stop working.")
+
+                p("6. Your Rights")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("Depending on your location, you may have rights to access, update, delete, or request a copy of your personal data. Contact us if you wish to exercise these rights.")
+
+                p("7. Third-Party Links")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("Our website may contain links to third-party sites. We are not responsible for their content or privacy practices.")
+
+                p("8. Changes to This Policy")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("We may update this Privacy Policy from time to time. Updated versions will be posted on this page with the effective date.")
+
+                p("9. Contact Us")
+                    .fontWeight(600)
+                    .marginTop(1, em)
+
+                p("If you have any questions about this Privacy Policy, feel free to contact us at info@hyperia.so.")
+
+                p("x")
+                    .onClick(function (done) {
+                        if(done) {
+                            this.parentElement.style.display = "none"
+                        }
+                    })
+                    .color("var(--red)")
+                    .xRight(1, em).y(1, em)
+                    .fontSize(2, em)
+                    .cursor("pointer")
+
+        })
+        .x(50, vw).y(50, vh)
+        .width(70, vw).height(70, vh)
+        .center()
+        .backgroundColor("var(--accent)")
+        .display("none")
+        .overflow("scroll")
+        .padding(1, em)
+        .border("3px solid black")
+        .color("var(--darkbrown)")
+        .attr({ id: "policyWindow" })
+
+        VStack(() => {
+
+            p("Refund & Return Policy")
+                .fontSize(2, em)
+                .fontWeight(600)
+                .marginBottom(1, em)
+
+            p("1. Eligibility for Refunds")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("• Refund requests may be considered when submitted within 14 days of purchase.")
+            p("• To qualify, you must provide proof of purchase and a valid reason for the request.")
+            p("• Certain digital products or services may be non-refundable once accessed or downloaded.")
+
+            p("2. Non-Refundable Items")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("• Products or services that have already been delivered, downloaded, or accessed in full.")
+            p("• Custom work, personalized items, or one-time service fees.")
+            p("• Any promotional or discounted items, unless required by law.")
+
+            p("3. Returns (If Applicable)")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("• Physical items must be returned in their original condition.")
+            p("• You are responsible for return shipping costs unless the item was defective or incorrect.")
+            p("• Items damaged through misuse or neglect cannot be returned.")
+
+            p("4. Processing Refunds")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("• Approved refunds are issued to the original payment method.")
+            p("• Processing times may vary depending on your bank or payment provider.")
+            p("• We will notify you once your refund has been initiated.")
+
+            p("5. Cancellations")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("• Orders or subscriptions may be cancelled before fulfillment or renewal.")
+            p("• If Hyperia declare a cancellation of any product or event, a refund will be issued to all parties.")
+
+            p("6. Contact for Refund Requests")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("If you need to request a refund, return an item, or cancel an order, please contact us at info@hyperia.so. Include your order number and relevant details so we can assist you promptly.")
+
+            p("7. Policy Updates")
+                .fontWeight(600)
+                .marginTop(1, em)
+
+            p("We may update this Refund & Return Policy from time to time. Any changes will be posted on this page with the effective date.")
+
+            p("x")
+                .onClick(function (done) {
+                    if(done) {
+                        this.parentElement.style.display = "none"
+                    }
+                })
+                .color("var(--red)")
+                .xRight(1, em).y(1, em)
+                .fontSize(2, em)
+                .cursor("pointer")
+
+        })
+        .x(50, vw).y(50, vh)
+        .width(70, vw).height(70, vh)
+        .center()
+        .backgroundColor("var(--accent)")
+        .display("none")
+        .overflow("scroll")
+        .padding(1, em)
+        .border("3px solid black")
+        .color("var(--darkbrown)")
+        .attr({ id: "refundWindow" })
+
+
+        VStack(() => {
+
+                p("Contact Us")
+                    .fontSize(2, em)
+                    .fontWeight(600)
+                    .marginBottom(1, em)
+
+                p("Email: info@hyperia.so")
+                p("Phone: 813-373-9100")
+                p("Address: 2014 E 9th St, Unit A, Austin TX")
+
+                p("x")
+                    .onClick(function (done) {
+                        if(done) {
+                            this.parentElement.style.display = "none"
+                        }
+                    })
+                    .color("var(--red)")
+                    .xRight(1, em).y(1, em)
+                    .fontSize(2, em)
+                    .cursor("pointer")
+
+        })
+        .gap(2, em)
+        .x(50, vw).y(50, vh)
+        .width(50, vw).height(50, vh)
+        .center()
+        .backgroundColor("var(--accent)")
+        .display("none")
+        .overflow("scroll")
+        .padding(1, em)
+        .border("3px solid black")
+        .color("var(--darkbrown)")
+        .attr({ id: "contactWindow" })
+
+
    }
 }

--- a/ui/public/pages/Home.js
+++ b/ui/public/pages/Home.js
@@ -4,6 +4,7 @@ import "./Why.js"
 import "./Events.js"
 import "./Join.js"
 import "./SignIn.js"
+import "./Success.js"

 class Home extends Shadow {
    render() {
@@ -24,27 +25,37 @@ class Home extends Shadow {
    
            switch(window.location.pathname) {
                case "/":
-                    img("/_/images/knight.png", "29vmax")
+                    img("/_/images/knight.webp", "29vmax")
                        .position("absolute")
                        .left(50, vw).top(isMobile() ? 50 : 53, vh)
                        .center()
            
+                    if(!isMobile()) {
                        p("H &nbsp; Y &nbsp; P &nbsp; E &nbsp; R &nbsp; I &nbsp; A &nbsp;")
-                        .x(50, vw).y(isMobile() ? 50 : 53, vh)
+                            .x(50, vw).y(53, vh)
                            .textAlign("center")
                            .center()
                            .color("var(--gold)")
-                        .fontSize(isMobile() ? 6 : 5, vw)
-                        .maxWidth(isMobile() ? 0.8 : 100, em)
+                            .fontSize(5, vw)
+                            .maxWidth(isMobile() ? 1000 : 100, em)
+                    } else {
+                        p("H &nbsp; Y &nbsp; P &nbsp; E &nbsp; R &nbsp; I &nbsp; A &nbsp;")
+                            .x(46, vw).y(isMobile() ? 50 : 53, vh)
+                            .textAlign("center")
+                            .color("var(--gold)")
+                            .fontSize(5, vw)
+                    }
            
-                    let text = "A Classical Christian Association"
+                    if(!isMobile()) {
+                        let text = "A Classical Christian Network"
                        p(isMobile() ? text : text.toUpperCase())
                            .x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
                            .center()
-                        .letterSpacing(0.3, em)
+                            .letterSpacing(0.1, em)
                            .width(isMobile() ? 80 : 100, vw)
                            .fontSize(isMobile() ? 0.8 : 1, em)
                            .textAlign("center")
+                    }
                    break;
                case "/why":
                    Why()
@@ -55,6 +66,9 @@ class Home extends Shadow {
                case "/join":
                    Join()
                    break;
+                case "/success":
+                    Success()
+                    break;

                default:
                    if(window.location.pathname.startsWith("/signup")) {
--- a/ui/public/pages/SIgnIn.js
+++ b/ui/public/pages/SIgnIn.js
@@ -1,8 +1,8 @@
 class SignIn extends Shadow {

    inputStyles(el) {
-        console.log(el)
        return el
+            .color("var(--accent)")
            .border("1px solid var(--accent)")
    }

--- a/ui/public/pages/Success.js
+++ b/ui/public/pages/Success.js
@@ -0,0 +1,9 @@
+class Success extends Shadow {
+    render() {
+        p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
+            .x(50, vw).y(50, vh)
+            .center()
+    }
+}
+ 
+register(Success)
--- a/ui/public/paintingTags.js
+++ b/ui/public/paintingTags.js
@@ -1,68 +0,0 @@
-// Create the hover display element
-const hoverBox = document.createElement('div');
-hoverBox.style.id = "hoverBox"
-hoverBox.style.position = 'fixed';
-hoverBox.style.padding = '8px 12px';
-hoverBox.style.backgroundColor = 'var(--green)';
-hoverBox.style.border = '1px solid var(--tan)';
-hoverBox.style.color = 'var(--tan)';
-hoverBox.style.opacity = '80%';
-hoverBox.style.pointerEvents = 'none';
-hoverBox.style.zIndex = '9999';
-hoverBox.style.fontFamily = 'sans-serif';
-hoverBox.style.fontSize = '14px';
-hoverBox.style.display = 'none';
-document.body.appendChild(hoverBox);
-let currentTarget = null;
-
-function capitalizeWords(str) {
-  return str
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-}
-
-function onMouseOver(e) {
-  const target = e.target;
-  let paintingName; let artistName;
-  if(target.id === "back") {
-    paintingName = "The Garden Terrace"
-    artistName = "Caspar David Friedrich"
-  } else if (target.tagName.toLowerCase() === 'img' && target.classList.contains('interactive')) {
-    const match = target.src.match(/([^\/]+)\.([a-z]{3,4})(\?.*)?$/i); // extract filename
-    if (!match) return;
-
-    const filename = match[1];
-    const parts = filename.split('_');
-    if (parts.length !== 2) return;
-
-    paintingName = capitalizeWords(parts[0]);
-    artistName = capitalizeWords(parts[1]);
-  } else {
-    return
-  }
-
-  hoverBox.innerHTML = `<strong>${paintingName}</strong><br><span style="font-size: 12px;">${artistName}</span>`;
-  hoverBox.style.display = 'block';
-  currentTarget = target;
-  hoverBox.style.left = `${e.clientX + 15}px`;
-  hoverBox.style.top = `${e.clientY + 15}px`;
-}
-
-function onMouseOut(e) {
-  if (e.target === currentTarget) {
-    hoverBox.style.display = 'none';
-    currentTarget = null;
-  }
-}
-
-function onMouseMove(e) {
-  if (hoverBox.style.display === 'block') {
-    hoverBox.style.left = `${e.clientX + 15}px`;
-    hoverBox.style.top = `${e.clientY + 15}px`;
-  }
-}
-
-document.addEventListener('mouseover', onMouseOver);
-document.addEventListener('mouseout', onMouseOut);
-document.addEventListener('mousemove', onMouseMove);
--- a/ui/public/scrollEffect.js
+++ b/ui/public/scrollEffect.js
@@ -1,56 +0,0 @@
-let treeOriginalTop = null;
-let currentVelocity = 0;
-let isAnimating = false;
-
-window.addEventListener('wheel', (e) => {
-    if(window.innerWidth < 600) {
-        return;
-    }
-
-  // Add scroll delta to the velocity
-  currentVelocity += e.deltaY;
-
-  // Start animation loop if not running
-  if (!isAnimating) {
-    isAnimating = true;
-    requestAnimationFrame(animateScroll);
-  }
-}, { passive: false });
-
-function animateScroll() {
-  const tree = document.getElementById("tree");
-
-  if (!treeOriginalTop) {
-    treeOriginalTop = parseInt(getComputedStyle(tree).top);
-  }
-
-  const treeHeightPX = 0.83 * window.innerHeight;
-  let treeTopPX = parseInt(getComputedStyle(tree).top);
-
-  // Limit per-frame speed (but NOT total speed)
-  let multiplier = window.innerHeight / 2000;
-  let delta = Math.max(-100 * multiplier, Math.min(100 * multiplier, currentVelocity));
-
-  // Apply the scroll
-  let newTop = treeTopPX - delta;
-
-  // Clamp top/bottom bounds
-  const maxTop = treeOriginalTop;
-  const minTop = treeOriginalTop - treeHeightPX;
-
-  if (newTop > maxTop) newTop = maxTop;
-  if (newTop < minTop) newTop = minTop;
-
-  tree.style.top = `${newTop}px`;
-
-  // Slowly reduce velocity
-  currentVelocity *= 0.85;
-
-  // If velocity is small, stop
-  if (Math.abs(currentVelocity) > 0.5) {
-    requestAnimationFrame(animateScroll);
-  } else {
-    isAnimating = false;
-    currentVelocity = 0;
-  }
-}
--- a/ui/readme.md
+++ b/ui/readme.md
@@ -1,20 +1,5 @@
-See https://github.com/return-to-the-land/go-backend for instructions.
+# Installs

-# Style Guidelines
- Font size is defined in the index.html. Only use rem as a unit.
+Stripe CLI

-# Documentation
-```go install golang.org/x/tools/cmd/godoc@latest```
-```$HOME/go/bin/godoc -http=:6060``` (to run on Mac)
-
-
-Fix Redirect Issues:
-
-Have the go server determine redirect, generate a random URL from it
-When random url is accessed by frontend -> redirect to home
-
-
-# Resources
-
-Convert image to webp (so it's smaller)
-https://www.freeconvert.com/jpg-to-webp/download
+stripe listen --forward-to localhost:3003/webhook
--- a/ui/site/apps/Forum/Forum.js
+++ b/ui/site/apps/Forum/Forum.js
@@ -1,125 +0,0 @@
-css(`
-    forum- {
-        font-family: 'Bona';
-    }
-
-    forum- 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 Forum extends Shadow {
-    friends = []
-    conversations = []
-
-    render() {
-        ZStack(() => {
-            HStack(() => {
-                VStack(() => {
-                    p("Hyperia")
-                        .background("var(--darkbrown)")
-                        .textAlign("center")
-                        .paddingVertical(0.5, em)
-                        .width(20, vh)
-                        .marginTop(0)
-                        .marginBottom(1, em)
-                        .marginLeft(0.4, em)
-                })
-                .height(100, vh)
-                .paddingLeft(2, em)
-                .paddingRight(2, em)
-                .paddingTop(2, em)
-                .gap(0, em)
-
-                VStack(() => {
-                    input("Message Hyperia", "80%")
-                        .paddingVertical(1, em)
-                        .color("var(--accent)")
-                        .background("var(--darkbrown)")
-                        .marginBottom(6, em)
-                        .border("none")
-                })
-                .width(100, pct)
-                .alignHorizontal("center")
-                .alignVertical("end")
-            })
-            .width(100, "%")
-            .height(87, vh)
-            .x(0).y(13, vh)
-
-            HStack(() => {
-                input("Search...", "45vw")
-                    .attr({
-                        "type": "text"
-                    })
-                    .fontSize(1.1, em)
-                    .paddingLeft(1.3, em)
-                    .background("transparent")
-                    .border("0.5px solid #bb7c36")
-                    .outline("none")
-                    .color("var(--accent)")
-                    .borderRadius(10, px)
-
-                button("Search")
-                    .marginLeft(2, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("0.5px solid #bb7c36")
-                    .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("0.5px solid #bb7c36")
-                    .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, pct)
-        .height(100, pct)
-    }
-}
-
-register(Forum)
--- a/ui/site/components/ProfileButton.js
+++ b/ui/site/components/ProfileButton.js
@@ -1,50 +0,0 @@
-import "./ProfileMenu.js"
-
-class ProfileButton extends Shadow {
-
-    render() {
-        ZStack(() => {
-            img("/_/icons/profile.svg", "1.5em", "1.5em")
-                .backgroundColor("var(--accent)")
-                .padding(0.2, em)
-                .borderRadius(5, px)
-
-            ProfileMenu()
-        })
-        .display("block")
-        .onHover((hovering) => {
-            console.log(hovering)
-            if(hovering) {
-                this.$("img").backgroundColor("var(--accent)")
-                this.$("img").border("1px solid black")
-            } else {
-                this.$("img").backgroundColor("")
-                this.$("img").border("")
-            }
-        })
-
-        // document.addEventListener("mousemove", (e) => {
-        //     this.previousHovered = this.hovered
-        //     if(e.target.closest("profile-button")) {
-        //         this.hovered = true
-        //     } else {
-        //         this.hovered = false
-        //     }
-        //     if(this.hovered !== this.previousHovered) {
-        //         if(this.hovered === true) {
-        //             this.rerender()
-        //             setTimeout(() => {
-        //                 this.querySelector("profile-menu").className = "open"
-        //             })
-        //         } else {
-        //             this.querySelector("profile-menu").className = "closed"
-        //             setTimeout(() => {
-        //                 this.rerender()
-        //             }, 140)
-        //         }
-        //     }
-        // })
-    }
-}
-
-register(ProfileButton)
--- a/ui/site/components/ProfileMenu.js
+++ b/ui/site/components/ProfileMenu.js
@@ -1,52 +0,0 @@
-css(`
-    profile-menu {
-        position: absolute;
-        right: -.5em;
-        top: -.3em;
-        width: 0;
-        height: 0;
-        background-color: rgba(255, 223, 180, 0.56);
-        color: black;
-        transition: width 0.2s, height 0.2s;
-        border-radius: 12px;
-    }
-
-    profile-menu * {
-        transition: opacity 0.3s;
-    }
-
-    profile-menu.closed * {
-        opacity: 0;
-    }
-
-    profile-menu.open {
-        width: 10em;
-        height: 15em;
-        display: block;
-    }
-
-    profile-menu.open * {
-        opacity: 100%;
-    }
-`)
-
-class ProfileMenu extends Shadow {
-
-    render() {
-        ZStack(() => {
-            if(this.classList.contains("open")) {
-                setTimeout(() => {
-                    // this.innerHTML = /* html */`
-                    //     <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
-                    //     <p>Profile</p>
-                    // `
-                }, 200)
-            }
-        })
-
-        util.observeClassChange(this, (cl) => {
-        })
-    }
-}
-
-register(ProfileMenu, "profile-menu")
--- a/ui/site/index.css
+++ b/ui/site/index.css
--- a/ui/site/index.js
+++ b/ui/site/index.js
@@ -1,5 +0,0 @@
-import ConnectionHandler from "./ws/ConnectionHandler.js"
-window.ConnectionHandler = new ConnectionHandler()
-
-import "./components/Home.js"
-Home()
--- a/ui/site/ws/Connection.js
+++ b/ui/site/ws/Connection.js
@@ -1,134 +0,0 @@
-class Connection {
-    connectionTries = 0
-    ws;
-    linkCreated;
-    wsStatus;
-
-    constructor() {
-        this.init()
-    }
-    
-    init() {
-        if(window.location.hostname === "localhost") {
-            this.ws = new WebSocket("ws://" + "localhost:3003")
-        } else {
-            this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
-        }
-        this.ws.addEventListener('open', () => {
-            this.connectionTries = 0
-            console.log("Websocket connection established.");
-            this.ws.addEventListener('message', this.onMessage)
-        });
-        this.ws.addEventListener("close", () => {
-            this.checkOpen();
-            console.log('Websocket Closed')
-        })
-    }
-
-    onMessage = (event) => {
-        let message =  event.data;
-        let messageSplit = message.split('|');
-
-        switch(messageSplit[0]) {
-            case 'connected':
-                Forms.connected(messageSplit[1], messageSplit[2])
-                break;
-            case 'disconnected': 
-                Forms.disconnected(messageSplit[1])
-                break;
-            case 'UPDATE-SIZE':
-                updateFileSize(messageSplit[1], messageSplit[2]);
-                break;
-            case 'URL-TITLE-RESPONSE':
-                this.updateLinkTitle(messageSplit[1]);
-                break;
-            default:
-                console.log('Websocket message:', message);
-                break;
-        }
-        
-
-        if (messageSplit[1] == 'CSS-LINK') {
-            this.createCSSLink(message);
-        }
-    }
-    
-    async checkOpen() {
-        if (this.ws.readyState === WebSocket.OPEN) {
-            return true
-        } else {
-            await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
-            this.connectionTries++
-            console.log('Reestablishing connection')
-            this.init()
-        }
-    }
-
-    sleep = (time) => {
-        return new Promise(resolve => {
-            setTimeout(resolve, time);
-        });
-    }
-    
-    sendMessage = (msg) => {
-        if (this.ws.readyState === WebSocket.OPEN) {
-            this.ws.send(msg);
-        }
-        else {
-            console.log('No websocket connection: Cannot send message');
-        }
-    }
-    
-    updateCSS = async (updateStyle, newValue) => {
-        let currentSpace = window.wrapper.getAttribute("name").replace(/ /g,'%20')
-        let currentFolder = window.location.pathname;
-        //create the inital link
-        this.linkCreated = false;
-        let cssIncomingText = ""
-        Array.from(document.styleSheets).forEach(el => {
-            if(el?.href?.includes?.(`.${currentSpace}.css`)) {
-                this.linkCreated = true;
-
-            }
-        })
-        let currentSpaceDataAttr = window.wrapper.getAttribute("name");
-        let cssInit = `parchment-page[name="${currentSpaceDataAttr}"] {background-color: #e9c9a0;} parchment-page[name="${currentSpaceDataAttr}"] > p.text {font-family: ${newValue};} parchment-page[name="${currentSpaceDataAttr}"] > file-::before,  parchment-page[name="${currentSpaceDataAttr}"] > image-::before,  parchment-page[name="${currentSpaceDataAttr}"] > parchment-page::before {font-family: ${newValue};font-weight: 400;} parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > file-::before, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > *, parchment-page[name="${currentSpaceDataAttr}"] > select-outline > image-::before ,parchment-page[name="${currentSpaceDataAttr}"] > space-select-outline > parchment-page::before, parchment-page[name="${currentSpaceDataAttr}"] > a,  parchment-page[name="${currentSpaceDataAttr}"] > input-box  {font-family: ${newValue}; font-weight: 400;}`
-        cssIncomingText += cssInit
-        
-        let CSSRawData = `REQUEST|update-css|${currentFolder}|${cssIncomingText}|`
-        await this.checkOpen()
-        this.ws.send(CSSRawData)
-    }
-    
-    createCSSLink = (wsMessage) => {
-        let retrieveHref = wsMessage;
-        var link = document.createElement("link");
-        link.rel = "stylesheet";
-        link.id = window.wrapper.getAttribute('name')+"-css"
-        link.href = retrieveHref;
-        
-        let retrieveStyleLinks = document.querySelectorAll(`[href='${retrieveHref}']`);
-        if (retrieveStyleLinks[0] !== undefined) {
-            retrieveStyleLinks[0].remove();
-        }
-        window.wrapper.prepend(link);
-    }
-
-    scrapeExternalHTMLTitle = async (href) => {
-        let req = `REQUEST|scrape-title|${href}|`
-        await this.checkOpen()
-        this.ws.send(req)
-    }
-
-    updateLinkTitle = (title) => {
-        let link = document.querySelectorAll('.convert-to-title')[0]
-        if (title !=="") {
-            link.innerHTML += title;
-        } else {
-            link.innerHTML += link.getAttribute('href')
-        }
-        link.classList.remove('convert-to-title')
-    }
-}
-
-export default Connection
--- a/ui/site/ws/ConnectionHandler.js
+++ b/ui/site/ws/ConnectionHandler.js
@@ -1,22 +0,0 @@
-import Connection from "./Connection.js";
-
-export default class ConnectionHandler {
-    connection;
-    disabled = true;
-
-    constructor() {
-        this.connection = new Connection();
-    }
-
-    isOpen() {
-        if(this.connection.checkOpen()) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    send(msg) {
-        this.connection.sendMessage(msg)
-    }
-}
Author	SHA1	Message	Date
metacryst	07b42ccbc3	partiful link	2026-01-22 19:21:38 -06:00
metacryst	f1c7c340f9	new quill	2025-12-26 06:13:29 -06:00
metacryst	f8861666dd	cleaning	2025-12-19 04:49:28 -06:00
metacryst	cd5f92b55f	making loading faster	2025-12-19 04:34:53 -06:00
metacryst	8d57a507d1	Merge branch 'main' of https://git.sun.museum/sam/Hyperia	2025-12-17 22:16:41 -06:00
metacryst	9567e4e284	Mobile improvements	2025-12-17 22:16:38 -06:00
metacryst	5b564fbfb3	putting content back in the gitignore	2025-12-07 22:07:14 -06:00
metacryst	279be987a4	Processing Stripe Dance Payments	2025-12-07 22:01:37 -06:00
metacryst	9a1aa55297	bank updates	2025-12-03 11:34:28 -06:00
metacryst	be155ae913	Merge branch 'main' of https://git.sun.museum/sam/Hyperia	2025-12-01 03:14:59 -06:00
metacryst	9d43362cae	webp vs. png for fabric background	2025-12-01 03:14:57 -06:00
metacryst	5d59cf8e50	Merge branch 'main' of https://git.sun.museum/sam/Hyperia	2025-12-01 03:10:19 -06:00
metacryst	bc1a3ccf75	small	2025-12-01 03:09:25 -06:00
metacryst	daa4182778	beginning of mobile site	2025-12-01 03:07:55 -06:00
metacryst	fcf0b4b08a	More aesthetic improvements	2025-11-26 01:34:43 -06:00
metacryst	eca1354e94	Changing some aesthetics	2025-11-26 00:56:47 -06:00
metacryst	9e87364147	Well, sending messages took longer than it should have	2025-11-25 23:38:59 -06:00
metacryst	dc9b106439	Market filter works except for exclusive boxes	2025-11-25 12:51:32 -06:00
metacryst	cf9edc066a	Rendering profile menu	2025-11-25 10:42:37 -06:00
metacryst	89702efa3a	Ability to post in Forum	2025-11-25 10:17:01 -06:00
metacryst	7f4a9a8b18	Merge branch 'main' of https://git.sun.museum/sam/Hyperia	2025-11-25 00:44:23 -06:00
metacryst	6c2b183f8e	small signup improvements	2025-11-25 00:44:21 -06:00