sam/apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
metacryst
2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
files/desktop/DesktopFilesSidebar.js Normal file
View File

@@ -0,0 +1,175 @@
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)