102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
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)
|