init

2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
--- a/settings/desktop/DesktopIntegrationsSection.js
+++ b/settings/desktop/DesktopIntegrationsSection.js
@@ -0,0 +1,71 @@
+import "/_/code/components/LoadingCircle.js"
+
+class DesktopIntegrationsSection extends Shadow {
+    constructor(stripeDetails, onConnectStripe) {
+        super()
+        this.stripeDetails = stripeDetails
+        this.onConnectStripe = onConnectStripe
+    }
+
+    render() {
+        VStack(() => {
+            HStack(() => {
+                VStack(() => {
+                    p("Integrations")
+                        .margin(0).fontSize(1.35, em).fontWeight("700").color("var(--headertext)")
+                    p("Connect third-party services to your network")
+                        .margin(0).marginTop(0.2, em).fontSize(0.75, em).color("var(--headertext)").opacity(0.42)
+                })
+                .gap(0)
+            })
+            .paddingHorizontal(1.75, em).paddingTop(1.5, em).paddingBottom(1.25, em)
+            .alignItems("flex-start").flexShrink(0)
+
+            VStack(() => {
+                this.settingSection("💳", "Stripe", "Accept payments and manage subscriptions", () => {
+                    if (this.stripeDetails === null) {
+                        LoadingCircle()
+                    } else if (this.stripeDetails?.email) {
+                        HStack(() => {
+                            VStack(() => {}).width(8, px).height(8, px).borderRadius(50, pct).background("#10b981").flexShrink(0)
+                            p("Connected").margin(0).fontSize(0.82, em).fontWeight("600").color("#10b981")
+                        })
+                        .gap(0.35, em).alignItems("center").marginBottom(0.3, em)
+                        p(this.stripeDetails.email)
+                            .margin(0).fontSize(0.75, em).color("var(--headertext)").opacity(0.5)
+                    } else {
+                        p("Not connected")
+                            .margin(0).fontSize(0.82, em).color("var(--headertext)").opacity(0.4).marginBottom(0.65, em)
+                        button("Connect Stripe →")
+                            .paddingHorizontal(1, em).paddingVertical(0.5, em)
+                            .border("none").borderRadius(0.45, em)
+                            .background("var(--quillred)").color("white")
+                            .fontSize(0.82, em).fontWeight("600").cursor("pointer")
+                            .onClick((done) => { if (done) this.onConnectStripe() })
+                    }
+                })
+            })
+            .paddingHorizontal(1.75, em).flex(1)
+        })
+        .height(100, pct).overflow("hidden")
+    }
+
+    settingSection(icon, title, subtitle, renderContent) {
+        VStack(() => {
+            HStack(() => {
+                p(icon).margin(0).fontSize(1, em).lineHeight("1").flexShrink(0)
+                VStack(() => {
+                    p(title).margin(0).fontSize(0.92, em).fontWeight("700").color("var(--headertext)")
+                    p(subtitle).margin(0).marginTop(0.1, em).fontSize(0.72, em).color("var(--headertext)").opacity(0.42)
+                })
+                .gap(0)
+            })
+            .gap(0.65, em).alignItems("flex-start").marginBottom(0.85, em)
+            renderContent()
+        })
+        .padding(1.1, em).background("var(--darkaccent)").border("1px solid var(--divider)")
+        .borderRadius(0.65, em).marginBottom(0.85, em)
+    }
+}
+
+register(DesktopIntegrationsSection)