establishing ws connection, starting on messages section

src/Home.js

@@ -3,7 +3,7 @@ import "./components/AppMenu.js"
 import "./apps/Forum/Forum.js"
 import "./apps/Messages/Messages.js"
 import "./apps/Jobs/Jobs.js"
-    
+
 class Home extends Shadow {
 
     render() {
@@ -11,16 +11,16 @@ class Home extends Shadow {
 			Sidebar()
 
             ZStack(() => {
-                switch(window.location.pathname) {
-                    case "/":
+                switch(global.currentApp) {
+                    case "Dashboard":
                         Forum()
                         break;
     
-                    case "/messages":
+                    case "Messages":
                         Messages()
                         break;
     
-                    case "/jobs":
+                    case "Jobs":
                         Jobs()
                         break;
                 }

src/_/code/styles.css

@@ -11,6 +11,10 @@
 }
 }
 
+input::placeholder {
+        font-family: Arial;
+    }
+
 html,
 body {
   padding: 0;

src/_/code/ws/Connection.js

@@ -10,8 +10,8 @@ class Connection {
     init = async () => {
         return new Promise((resolve, reject) => {
             const url = window.location.hostname.includes("local") 
-                ? "ws://" + window.location.host 
-                : "wss://" + window.location.hostname + window.location.pathname;
+                ? "ws://" + window.location.host + "/ws"
+                : "wss://" + window.location.hostname + window.location.pathname + "/ws";
 
             this.ws = new WebSocket(url);
 

src/_/code/ws/Socket.js

@@ -11,6 +11,7 @@ export default class Socket {
     }
 
     async init() {
+        console.log("initting")
         await this.connection.init()
     }
 

src/_/icons/columnwhite.svg

@@ -1,7 +1,7 @@
-<svg width="118" height="108" viewBox="0 0 118 108" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M80.1955 59.9449H61.5784V107.52H80.1955V59.9449Z" fill="#FEE8C8"/>
-<path d="M31.5063 59.9449H22.1965V107.52H31.5063V59.9449Z" fill="#FEE8C8"/>
-<path d="M97.7112 0.0305315L97.7323 0H19.6963L19.7104 0.0305315C8.77192 0.356983 0 9.30504 0 20.3245C0 30.9295 8.12254 39.6251 18.4844 40.5563C22.3596 40.5458 31.0622 39.4924 31.4051 30.569C31.6188 24.9959 27.2599 20.2905 21.6879 20.0779L21.9063 14.3545C26.1361 14.5154 30.0476 16.3132 32.9223 19.418C35.7969 22.5216 37.2918 26.56 37.1298 30.7874C36.8068 39.1871 31.0998 44.8342 22.1987 46.0402V54.2168H95.2346V46.1436C91.7576 45.7373 88.6704 44.6558 86.1727 42.9272C82.1683 40.1618 79.9489 35.9801 79.7528 30.8332C79.5896 26.6058 81.0845 22.5686 83.9626 19.4661C86.835 16.3602 90.7477 14.5623 94.9751 14.4026L95.1947 20.1273C92.4962 20.2283 89.9997 21.3767 88.1642 23.3589C86.33 25.3411 85.3765 27.9175 85.4787 30.616C85.6043 33.9345 86.9348 36.4909 89.4313 38.2183C91.6249 39.7343 94.7203 40.5528 98.1985 40.5951C108.909 40.0232 117.429 31.1808 117.429 20.3245C117.429 9.30387 108.654 0.35346 97.7112 0.0305315Z" fill="#FEE8C8"/>
-<path d="M95.2336 59.9449H85.9238V107.52H95.2336V59.9449Z" fill="#FEE8C8"/>
-<path d="M55.8515 59.9449H37.2344V107.52H55.8515V59.9449Z" fill="#FEE8C8"/>
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M101.196 85.9449H82.5784V133.52H101.196V85.9449Z" fill="#FEE8C8"/>
+<path d="M52.5063 85.9449H43.1965V133.52H52.5063V85.9449Z" fill="#FEE8C8"/>
+<path d="M118.711 26.0305L118.732 26H40.6963L40.7104 26.0305C29.7719 26.357 21 35.305 21 46.3245C21 56.9295 29.1225 65.6251 39.4844 66.5563C43.3596 66.5458 52.0622 65.4924 52.4051 56.569C52.6188 50.9959 48.2599 46.2905 42.6879 46.0779L42.9063 40.3545C47.1361 40.5154 51.0476 42.3132 53.9223 45.418C56.7969 48.5216 58.2918 52.56 58.1298 56.7874C57.8068 65.1871 52.0998 70.8343 43.1987 72.0402V80.2168H116.235V72.1436C112.758 71.7373 109.67 70.6558 107.173 68.9272C103.168 66.1618 100.949 61.9801 100.753 56.8332C100.59 52.6058 102.084 48.5686 104.963 45.4661C107.835 42.3602 111.748 40.5623 115.975 40.4026L116.195 46.1273C113.496 46.2283 111 47.3767 109.164 49.3589C107.33 51.3411 106.376 53.9175 106.479 56.616C106.604 59.9345 107.935 62.4909 110.431 64.2183C112.625 65.7343 115.72 66.5528 119.199 66.5951C129.909 66.0232 138.429 57.1808 138.429 46.3245C138.429 35.3039 129.654 26.3535 118.711 26.0305Z" fill="#FEE8C8"/>
+<path d="M116.234 85.9449H106.924V133.52H116.234V85.9449Z" fill="#FEE8C8"/>
+<path d="M76.8515 85.9449H58.2344V133.52H76.8515V85.9449Z" fill="#FEE8C8"/>
 </svg>

src/apps/Forum/Forum.js

@@ -11,6 +11,10 @@ css(`
         color: var(--accent);
     }
 
+    input::placeholder {
+        font-family: Arial;
+    }
+
     input[type="checkbox"] {
         appearance: none;        /* remove default style */
         -webkit-appearance: none;
@@ -34,13 +38,15 @@ class Forum extends Shadow {
 
                 ForumPanel()
 
-                input("Message Hyperia", "98%")
-                    .paddingVertical(1, em)
-                    .paddingLeft(2, pct)
+                input("Message", "70%")
+                    .paddingVertical(0.75, em)
+                    .paddingLeft(2, em)
                     .color("var(--accent)")
-                    .background("var(--darkbrown)")
-                    .marginBottom(6, em)
-                    .border("none")
+                    .background("#fff1dd")
+                    .marginBottom(5.5, em)
+                    .border("1px solid black")
+                    .borderRadius(100, px)
+                    .fontFamily("Arial")
                     .fontSize(1, em)
                     .onKeyDown(function (e) {
                         if (e.key === "Enter") {
@@ -55,7 +61,7 @@ class Forum extends Shadow {
             .horizontalAlign("center")
             .verticalAlign("end")
         })
-        .onAppear(() => document.body.style.backgroundColor = "var(--darkbrown)")
+        .backgroundColor("var(--main)")
         .width(100, pct)
         .height(100, pct)
     }

src/apps/Forum/ForumPanel.js

@@ -52,12 +52,12 @@ class ForumPanel extends Shadow {
         .paddingTop(5, em)
         .paddingBottom(2, em)
         .paddingLeft(4, pct)
-        .backgroundColor("var(--darkbrown)")
+        .backgroundColor("var(--main)")
         .onAppear(async () => {
             requestAnimationFrame(() => {
                 this.scrollTop = this.scrollHeight
             });
-            let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
+            let res = await global.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

src/index.js

@@ -70,7 +70,7 @@ let Global = class {
             window.dispatchEvent(event)
         }
 
-        document.title = (this.currentNetwork === this.profile) ? "Parchment" : `${this.currentNetwork.abbreviation} | Parchment`
+        document.title = (this.currentNetwork === this.profile) ? "Forum" : `${this.currentNetwork.abbreviation} | Forum`
     }
 
     setCurrentNetworkAndApp() {
@@ -140,8 +140,9 @@ let Global = class {
 
         this.getProfile().then(async (status) => {
 
+            await this.Socket.init()
+
             if(status !== 401) {
-                console.log("it's legit")
                 await this.onNavigate()
                 Home()
             } else {

vite.config.ts

@@ -9,6 +9,11 @@ export default defineConfig({
   },
   server: {
     proxy: {
+      "/ws": {
+        target: "http://localhost:10002",
+        changeOrigin: true,
+        ws: true
+      },
       "/login": {
         target: "http://localhost:10002",
         changeOrigin: true