176 lines
6.9 KiB
JavaScript
176 lines
6.9 KiB
JavaScript
class DesktopFilesSidebar extends Shadow {
|
|
constructor(groups, activeGroupIds, onToggleGroup, locations, activeLocation, onSelectLocation) {
|
|
super()
|
|
this.groups = groups
|
|
this.activeGroupIds = activeGroupIds
|
|
this.onToggleGroup = onToggleGroup
|
|
this.locations = locations
|
|
this.activeLocation = activeLocation
|
|
this.onSelectLocation = onSelectLocation
|
|
}
|
|
|
|
render() {
|
|
const self = this
|
|
VStack(() => {
|
|
// ── Locations ─────────────────────────────────────────────
|
|
VStack(() => {
|
|
this.sectionLabel("BROWSE")
|
|
this.locations.forEach(loc => {
|
|
const isActive = this.activeLocation === loc.id;
|
|
HStack(() => {
|
|
p(loc.icon)
|
|
.margin(0)
|
|
.fontSize(0.88, em)
|
|
.lineHeight("1")
|
|
.flexShrink(0)
|
|
p(loc.label)
|
|
.margin(0)
|
|
.fontSize(0.88, em)
|
|
.fontWeight(isActive ? "600" : "400")
|
|
.color("var(--headertext)")
|
|
.opacity(isActive ? 1 : 0.75)
|
|
})
|
|
.gap(0.6, em)
|
|
.paddingHorizontal(0.85, em)
|
|
.paddingVertical(0.42, 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(function(done){ if(done){ self.onSelectLocation(loc.id) } })
|
|
})
|
|
})
|
|
.paddingTop(0.9, em)
|
|
|
|
// ── Divider ───────────────────────────────────────────────
|
|
VStack(() => {})
|
|
.height(1, px)
|
|
.background("var(--divider)")
|
|
.marginVertical(0.65, em)
|
|
.marginHorizontal(1, em)
|
|
|
|
// ── Permission groups ─────────────────────────────────────
|
|
VStack(() => {
|
|
this.sectionLabel("PERMISSION GROUPS")
|
|
|
|
this.groups.forEach(group => {
|
|
const isOn = this.activeGroupIds.has(group.id);
|
|
HStack(() => {
|
|
// Colored dot / checkbox area
|
|
HStack(() => {
|
|
VStack(() => {
|
|
if (isOn) {
|
|
p("✓")
|
|
.margin(0)
|
|
.fontSize(0.6, em)
|
|
.fontWeight("800")
|
|
.color("white")
|
|
.lineHeight("1")
|
|
}
|
|
})
|
|
.width(0.95, em)
|
|
.height(0.95, em)
|
|
.borderRadius(0.22, em)
|
|
.background(isOn ? group.color : "transparent")
|
|
.border(`1.5px solid ${group.color}`)
|
|
.justifyContent("center")
|
|
.alignItems("center")
|
|
.boxSizing("border-box")
|
|
.flexShrink(0)
|
|
})
|
|
.cursor("pointer")
|
|
|
|
p(group.name)
|
|
.margin(0)
|
|
.fontSize(0.85, em)
|
|
.fontWeight("400")
|
|
.color("var(--headertext)")
|
|
.opacity(isOn ? 1 : 0.45)
|
|
.flex(1)
|
|
.minWidth(0)
|
|
.overflow("hidden")
|
|
.whiteSpace("nowrap")
|
|
.textOverflow("ellipsis")
|
|
|
|
p(`${group.fileCount}`)
|
|
.margin(0)
|
|
.fontSize(0.68, em)
|
|
.color("var(--headertext)")
|
|
.opacity(0.3)
|
|
.flexShrink(0)
|
|
})
|
|
.gap(0.6, em)
|
|
.paddingHorizontal(0.85, em)
|
|
.paddingVertical(0.38, em)
|
|
.marginHorizontal(0.4, em)
|
|
.borderRadius(0.45, em)
|
|
.cursor("pointer")
|
|
.alignItems("center")
|
|
.width("calc(100% - 0.8em)")
|
|
.boxSizing("border-box")
|
|
.onClick(function(done){ if(done){ self.onToggleGroup(group.id) } })
|
|
})
|
|
})
|
|
|
|
VStack(() => {}).flex(1)
|
|
|
|
// ── Storage usage ─────────────────────────────────────────
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p("Storage")
|
|
.margin(0)
|
|
.fontSize(0.75, em)
|
|
.color("var(--headertext)")
|
|
.opacity(0.45)
|
|
.flex(1)
|
|
p("4.2 GB / 10 GB")
|
|
.margin(0)
|
|
.fontSize(0.7, em)
|
|
.color("var(--headertext)")
|
|
.opacity(0.3)
|
|
})
|
|
.alignItems("center")
|
|
.marginBottom(0.45, em)
|
|
|
|
// Bar
|
|
VStack(() => {
|
|
VStack(() => {})
|
|
.width(42, pct)
|
|
.height(100, pct)
|
|
.background("var(--quillred)")
|
|
.borderRadius(100, px)
|
|
})
|
|
.width(100, pct)
|
|
.height(4, px)
|
|
.background("var(--darkaccent)")
|
|
.borderRadius(100, px)
|
|
.overflow("hidden")
|
|
})
|
|
.paddingHorizontal(1.1, em)
|
|
.paddingBottom(1.1, em)
|
|
.flexShrink(0)
|
|
})
|
|
.height(100, pct)
|
|
.width(100, pct)
|
|
.boxSizing("border-box")
|
|
.overflowY("auto")
|
|
}
|
|
|
|
sectionLabel(text) {
|
|
p(text)
|
|
.margin(0)
|
|
.marginBottom(0.25, em)
|
|
.paddingHorizontal(1.1, em)
|
|
.fontSize(0.62, em)
|
|
.fontWeight("700")
|
|
.letterSpacing("0.07em")
|
|
.color("var(--headertext)")
|
|
.opacity(0.35)
|
|
}
|
|
}
|
|
|
|
register(DesktopFilesSidebar)
|