init

2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
--- a/settings/desktop/DesktopSettingsSidebar.js
+++ b/settings/desktop/DesktopSettingsSidebar.js
@@ -0,0 +1,95 @@
+class DesktopSettingsSidebar extends Shadow {
+    constructor(activeSection, onSectionChange) {
+        super()
+        this.activeSection = activeSection
+        this.onSectionChange = onSectionChange
+    }
+
+    render() {
+        VStack(() => {
+            VStack(() => {
+                p("Settings")
+                    .fontFamily("Laandbrau")
+                    .margin(0).fontSize(1.8, em).fontWeight("700").color("var(--headertext)")
+                p(global.currentNetwork.name)
+                    .margin(0).marginTop(0.2, em).fontSize(0.72, em)
+                    .color("var(--headertext)").opacity(0.38)
+            })
+            .marginTop(30, px)
+            .paddingHorizontal(1.1, em).paddingTop(1.2, em).paddingBottom(0.9, em)
+
+            VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em)
+
+            VStack(() => {
+                this.sectionLabel("MANAGE")
+                this.navItem("🎭", "Roles & Apps", "roles")
+            })
+            .paddingTop(0.75, em)
+
+            VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em).marginVertical(0.5, em)
+
+            VStack(() => {
+                this.sectionLabel("INTEGRATIONS")
+                this.navItem("💳", "Stripe", "integrations")
+            })
+
+            VStack(() => {}).flex(1)
+
+            VStack(() => {
+                p("NETWORK")
+                    .margin(0).marginBottom(0.4, em)
+                    .fontSize(0.6, em).fontWeight("700").letterSpacing("0.07em")
+                    .color("var(--headertext)").opacity(0.35)
+
+                VStack(() => {
+                    this.infoRow("ID", String(global.currentNetwork.id))
+                    this.infoRow("Slug", global.currentNetwork.abbreviation)
+                })
+                .background("var(--darkaccent)").border("1px solid var(--divider)")
+                .borderRadius(0.5, em).gap(0)
+            })
+            .paddingHorizontal(0.75, em).paddingBottom(1.1, em).flexShrink(0)
+        })
+        .width(230, px).height(100, pct)
+        .borderRight("1px solid var(--divider)")
+        .flexShrink(0).overflowY("auto").boxSizing("border-box")
+    }
+
+    navItem(icon, label, sectionId) {
+        const isActive = this.activeSection === sectionId
+        HStack(() => {
+            p(icon).margin(0).fontSize(0.9, em).lineHeight("1").flexShrink(0)
+            p(label).margin(0).fontSize(0.88, em)
+                .fontWeight(isActive ? "600" : "400")
+                .color("var(--headertext)").opacity(isActive ? 1 : 0.65)
+        })
+        .gap(0.62, em).paddingHorizontal(0.85, em).paddingVertical(0.45, em)
+        .marginHorizontal(0.4, em).borderRadius(0.45, em)
+        .background(isActive ? "var(--app)" : "transparent")
+        .cursor("pointer").alignItems("center")
+        .width("calc(100% - 0.8em)").boxSizing("border-box")
+        .onClick((done) => { if (done) this.onSectionChange(sectionId) })
+    }
+
+    sectionLabel(text) {
+        p(text)
+            .margin(0).marginBottom(0.28, em).paddingHorizontal(1.1, em)
+            .fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
+            .color("var(--headertext)").opacity(0.35)
+    }
+
+    infoRow(label, value) {
+        HStack(() => {
+            p(label)
+                .margin(0).fontSize(0.68, em).color("var(--headertext)").opacity(0.4)
+                .width(4, em).flexShrink(0)
+            p(value)
+                .margin(0).fontSize(0.72, em).fontWeight("600").color("var(--headertext)")
+        })
+        .paddingVertical(0.3, em).paddingHorizontal(0.65, em)
+        .borderBottom("1px solid var(--divider)")
+        .alignItems("center").gap(0.4, em)
+    }
+}
+
+register(DesktopSettingsSidebar)