init

2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
--- a/people/desktop/DesktopPeopleList.js
+++ b/people/desktop/DesktopPeopleList.js
@@ -0,0 +1,101 @@
+import "../../components/Avatar.js"
+
+class DesktopPeopleList extends Shadow {
+    constructor(people, selectedId, onSelect) {
+        super()
+        this.people = people
+        this.selectedId = selectedId
+        this.onSelect = onSelect
+    }
+
+    render() {
+        VStack(() => {
+            if (this.people.length === 0) {
+                VStack(() => {
+                    p("No members match your search")
+                        .margin(0).fontSize(0.88, em)
+                        .color("var(--headertext)").opacity(0.35).textAlign("center")
+                })
+                .flex(1).justifyContent("center").alignItems("center")
+                return;
+            }
+
+            this.people.forEach(person => this.renderRow(person))
+        })
+        .gap(0).overflowY("auto").height(100, pct)
+        .paddingVertical(0.5, em).boxSizing("border-box")
+    }
+
+    renderRow(person) {
+        const isSelected = person.id === this.selectedId;
+        const isOnline = person._online;
+        const isAdmin = (person.roles || []).includes("admin");
+
+        HStack(() => {
+            // Avatar
+            ZStack(() => {
+                Avatar(person, 2.6)
+
+                // Online indicator
+                VStack(() => {})
+                    .width(0.62, em).height(0.62, em)
+                    .borderRadius(50, pct)
+                    .background(isOnline ? "#22c55e" : "var(--divider)")
+                    .boxSizing("border-box")
+                    .position("absolute").bottom(0).right(0)
+            })
+            .position("relative")
+            .width(2.6, em).height(2.6, em).flexShrink(0)
+
+            // Info
+            VStack(() => {
+                HStack(() => {
+                    p(`${person.first_name} ${person.last_name}`)
+                        .margin(0).fontSize(0.88, em).fontWeight("600")
+                        .color("var(--headertext)").flex(1).minWidth(0)
+                        .overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
+
+                    if (isAdmin) {
+                        p("Admin")
+                            .margin(0).paddingHorizontal(0.42, em).paddingVertical(0.1, em)
+                            .background("rgba(239,68,68,0.12)").borderRadius(100, px)
+                            .fontSize(0.62, em).fontWeight("700").color("#ef4444")
+                            .flexShrink(0)
+                    }
+                })
+                .alignItems("center").gap(0.4, em).width(100, pct)
+
+                HStack(() => {
+                    p(person.title || person.email)
+                        .margin(0).fontSize(0.75, em)
+                        .color("var(--headertext)").opacity(0.45)
+                        .flex(1).minWidth(0)
+                        .overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
+
+                    if (person.plan_name?.includes("Patron")) {
+                        p("Patron")
+                            .margin(0).paddingHorizontal(0.42, em).paddingVertical(0.1, em)
+                            .background("rgba(245,158,11,0.12)").borderRadius(100, px)
+                            .fontSize(0.62, em).fontWeight("700").color("#d97706")
+                            .flexShrink(0)
+                    }
+                })
+                .alignItems("center").gap(0.4, em).width(100, pct).marginTop(0.15, em)
+            })
+            .flex(1).minWidth(0)
+        })
+        .gap(0.7, em).paddingHorizontal(0.9, em).paddingVertical(0.62, em)
+        .marginHorizontal(0.4, em)
+        .borderRadius(0.55, em)
+        .background(isSelected ? "var(--accent)" : "transparent")
+        .cursor("pointer").alignItems("center")
+        .width("calc(100% - 0.8em)").boxSizing("border-box")
+        .onClick((done) => {
+            if(done)
+                this.onSelect(person.id)
+        })
+    }
+
+}
+
+register(DesktopPeopleList)