From 463dd183f557d00da4c848a091b8a2fab77fe451 Mon Sep 17 00:00:00 2001 From: metacryst Date: Fri, 9 Jan 2026 04:35:21 -0600 Subject: [PATCH] frontend tweaks --- ui/_/code/shared.css | 2 +- ui/_/icons/nodesblack.svg | 11 +++++ ui/_/icons/peopleblack.svg | 3 ++ ui/desktop/{components => }/Home.js | 27 +++------- ui/desktop/components/AppMenu.js | 6 +-- ui/desktop/components/Sidebar.js | 77 ++++++++++++++++------------- ui/desktop/index.js | 2 +- ui/public/pages/Home.js | 2 +- 8 files changed, 68 insertions(+), 62 deletions(-) create mode 100644 ui/_/icons/nodesblack.svg create mode 100644 ui/_/icons/peopleblack.svg rename ui/desktop/{components => }/Home.js (76%) diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index 73921a8..ebe0f26 100644 --- a/ui/_/code/shared.css +++ b/ui/_/code/shared.css @@ -20,7 +20,7 @@ @media (prefers-color-scheme: dark) { :root { --main: #000000; - --accent: #453C33; + --accent: #695b4d; --accent2: var(--gold); --house-src: /_/icons/housedark.svg; diff --git a/ui/_/icons/nodesblack.svg b/ui/_/icons/nodesblack.svg new file mode 100644 index 0000000..51c5e6b --- /dev/null +++ b/ui/_/icons/nodesblack.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/ui/_/icons/peopleblack.svg b/ui/_/icons/peopleblack.svg new file mode 100644 index 0000000..e05077c --- /dev/null +++ b/ui/_/icons/peopleblack.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/desktop/components/Home.js b/ui/desktop/Home.js similarity index 76% rename from ui/desktop/components/Home.js rename to ui/desktop/Home.js index 184c99e..b1ef75d 100644 --- a/ui/desktop/components/Home.js +++ b/ui/desktop/Home.js @@ -1,28 +1,14 @@ -import "./AppWindow.js" -import "./AppMenu.js" -import "./ProfileButton.js" -import "./InputBox.js" -import "./Sidebar.js" +import "./components/AppWindow.js" +import "./components/AppMenu.js" +import "./components/ProfileButton.js" +import "./components/InputBox.js" +import "./components/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) + Sidebar() switch(window.location.pathname) { case "/": @@ -81,7 +67,6 @@ class Home extends Shadow { .xRight(2, em).y(2.3, em) .position("fixed") .verticalAlign("center") - }) } } diff --git a/ui/desktop/components/AppMenu.js b/ui/desktop/components/AppMenu.js index a028e56..83d1419 100644 --- a/ui/desktop/components/AppMenu.js +++ b/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() diff --git a/ui/desktop/components/Sidebar.js b/ui/desktop/components/Sidebar.js index 58d1b82..56f7964 100644 --- a/ui/desktop/components/Sidebar.js +++ b/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 */ ` - hyperia - - ` + 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) \ No newline at end of file +register(Sidebar) \ No newline at end of file diff --git a/ui/desktop/index.js b/ui/desktop/index.js index d0acae8..a02be9c 100644 --- a/ui/desktop/index.js +++ b/ui/desktop/index.js @@ -1,5 +1,5 @@ import Socket from "./ws/Socket.js" -import "./components/Home.js" +import "./Home.js" import util from "./util.js" window.util = util diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js index 831a21b..b4e2ecb 100644 --- a/ui/public/pages/Home.js +++ b/ui/public/pages/Home.js @@ -32,7 +32,7 @@ class Home extends Shadow { .verticalAlign("center") .horizontalAlign("center") - p("Parchment helps you connect to every group you are a part of.") + p("Parchment provides spaces for every group you are a part of.") .color("var(--red)") .borderTop("1px solid var(--red)") .borderHorizontal("1px solid var(--red)")