frontend tweaks

ui/desktop/components/AppMenu.js

@@ -23,8 +23,8 @@ class AppMenu extends Shadow {
                 .trim();
             }
             HStack(() => {
-                img(cssVariable("house-src"), "1.7em")
-                img(cssVariable("people-src"), "1.9em")
+                img(cssVariable("house-src"), "1.5em")
+                img(cssVariable("people-src"), "1.7em")
             })
             .justifyContent("center")
             .gap(3.5, em)
@@ -34,7 +34,7 @@ class AppMenu extends Shadow {
         .x(0).yBottom(0)
         .width(100, vw)
         .paddingVertical(1, em)
-        .borderTop("1px solid var(--accent)")
+        .borderTop("0.5px solid var(--accent)")
         .onNavigate(() => {
             if(window.location.pathname === "/") {
                 this.styleMaximized()

ui/desktop/components/Home.js

@@ -1,89 +0,0 @@
-import "./AppWindow.js"
-import "./AppMenu.js"
-import "./ProfileButton.js"
-import "./InputBox.js"
-import "./Sidebar.js"
-    
-class Home extends Shadow {
-
-    render() {
-        ZStack(() => {
-
-            VStack(() => {
-                img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
-                    .paddingLeft(3, em)
-                    .paddingTop(5, vh)
-                    .onClick(() => {
-                        window.navigateTo("/")
-                    })
-            })
-            .paddingRight(2, em)
-            .position("fixed")
-            .x(0).y(0)
-            .height(100, vh)
-            .borderRight("0.5px solid var(--accent)")
-            .zIndex(3)
-
-            switch(window.location.pathname) {
-                case "/":
-                    AppWindow()
-                    AppMenu()
-                    break
-                case "/app/jobs":
-                    AppWindow("Jobs")
-                    AppMenu("Jobs")
-                    break;
-                case "/app/messages":
-                    AppWindow("Messages")
-                    AppMenu("Messages")
-                    break;
-                case "/app/market":
-                    AppWindow("Market")
-                    AppMenu("Market")
-                    break;
-                case "/app/forum":
-                    AppWindow("Forum")
-                    AppMenu("Forum")
-                    break;
-                default:
-                    throw new Error("Unknown route!")
-            }
-
-
-            HStack(() => {
-                // ProfileButton()
-                //     .zIndex(1)
-                //     .cursor("default")
-    
-                a("/signout", "Sign Out")
-                    .background("transparent")
-                    .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "0.5px solid #bb7c36")
-                    .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
-                    .borderRadius(5, px)
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.background = "var(--green)"
-                        } else {
-                            this.style.background = ""
-                        }
-                    })
-                    .onNavigate(function () {
-                        if(window.location.pathname === "/") {
-                            this.style.border = "1px solid var(--tan)"
-                            this.style.color = "var(--tan)"
-                        } else {
-                            this.style.border = "0.5px solid #bb7c36"
-                            this.style.color = "var(--accent)"
-                        }
-                    })
-            })
-            .gap(1, em)
-            .xRight(2, em).y(2.3, em)
-            .position("fixed")
-            .verticalAlign("center")
-
-        })
-    }
-}
-
-register(Home)

ui/desktop/components/Sidebar.js

@@ -1,39 +1,46 @@
-css(`
-    side-bar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100vh;
-        width: 16vw;
-        border-right: 0.5px solid var(--accent2);
-        display: flex;
-        flex-direction: column;
-        padding-top: 13vh;
-    }
-
-    side-bar button {
-        color: var(--darkbrown);
-        margin: 1.5em;
-        background-color: color-mix(in srgb, var(--accent2) 35%, var(--orange) 65%);
-        border: 1px solid var(--orange);
-        border-radius: 12px;
-        padding: 0.5em;
-        font-weight: bold;
-    }
-`)
-
-
-class Sidebar extends HTMLElement {
-    connectedCallback() {
-        this.render()
-    }
-
+class Sidebar extends Shadow {
     render() {
-        this.innerHTML = /* html */ `
-            <span id="title" style="position: absolute; left: 50%; transform: translateX(-50%) " class="link" onclick='window.location.href="/"'>hyperia</span>
-            <button>Main</button>
-        `
+        VStack(() => {
+            img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
+                .paddingLeft(3, em)
+                .paddingTop(5, vh)
+                .onClick(() => {
+                    window.navigateTo("/")
+                })
+        })
+        .paddingRight(2, em)
+        .position("fixed")
+        .x(0).y(0)
+        .height(100, vh)
+        .borderRight("0.5px solid var(--accent)")
+        .zIndex(3)
+        .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);
+        }
     }
 }
 
-customElements.define("side-bar", Sidebar)
+register(Sidebar)