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

71
settings/desktop/DesktopIntegrationsSection.js Normal file
View File

@@ -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)

243
settings/desktop/DesktopRolesSection.js Normal file
View File

@@ -0,0 +1,243 @@
class DesktopRolesSection extends Shadow {
constructor(roles, allApps, selectedRoleId, roleApps, confirmDeleteId, onSelectRole, onDeleteRole, onSetConfirmDelete, onCreateRole, onToggleApp) {
super()
this.roles = roles
this.allApps = allApps
this.selectedRoleId = selectedRoleId
this.roleApps = roleApps
this.confirmDeleteId = confirmDeleteId
this.onSelectRole = onSelectRole
this.onDeleteRole = onDeleteRole
this.onSetConfirmDelete = onSetConfirmDelete
this.onCreateRole = onCreateRole
this.onToggleApp = onToggleApp
this.newRoleName = ""
}
get selectedRole() {
return this.roles.find(r => r.id === this.selectedRoleId) ?? null
}
get selectedRoleAppIds() {
return this.roleApps[this.selectedRoleId] ?? new Set()
}
render() {
VStack(() => {
HStack(() => {
VStack(() => {
p("Roles & Apps")
.margin(0).fontSize(1.35, em).fontWeight("700").color("var(--headertext)")
p("Control which apps each role can access")
.margin(0).marginTop(0.2, em).fontSize(0.75, em)
.color("var(--headertext)").opacity(0.42)
})
.gap(0).flex(1)
})
.paddingHorizontal(1.75, em).paddingTop(1.5, em).paddingBottom(1.1, em)
.alignItems("flex-start").flexShrink(0)
HStack(() => {
// ── Role list ─────────────────────────────────────────
VStack(() => {
p("ROLES")
.margin(0).marginBottom(0.5, em)
.fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
.color("var(--headertext)").opacity(0.35)
this.roles.forEach(role => {
const isSelected = this.selectedRoleId === role.id
const isConfirming = this.confirmDeleteId === role.id
const appCount = (this.roleApps[role.id] ?? new Set()).size
HStack(() => {
VStack(() => {
p(role.name)
.margin(0).fontSize(0.88, em)
.fontWeight(isSelected ? "700" : "500")
.color("var(--headertext)")
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
p(`${appCount} app${appCount !== 1 ? "s" : ""}`)
.margin(0).marginTop(0.12, em).fontSize(0.68, em)
.color("var(--headertext)").opacity(0.38)
})
.flex(1).minWidth(0).gap(0)
if (isConfirming) {
HStack(() => {
button("Delete")
.padding("0.2em 0.5em").border("none").borderRadius(0.3, em)
.background("var(--quillred)").color("white")
.fontSize(0.68, em).fontWeight("600").cursor("pointer")
.onClick((done) => { if (done) this.onDeleteRole(role.id) })
button("✕")
.padding("0.2em 0.45em").border("none").borderRadius(0.3, em)
.background("transparent").color("var(--headertext)")
.opacity(0.4).fontSize(0.72, em).cursor("pointer")
.onClick((done) => { if (done) this.onSetConfirmDelete(null) })
})
.gap(0.3, em).alignItems("center")
} else {
button("⋯")
.border("none").background("transparent")
.color("var(--headertext)").opacity(0.3)
.fontSize(1, em).cursor("pointer").padding("0.1em 0.35em")
.borderRadius(0.3, em)
.onClick((done) => { if (done) this.onSetConfirmDelete(role.id) })
}
})
.paddingHorizontal(0.75, em).paddingVertical(0.6, em)
.borderRadius(0.5, em)
.background(isSelected ? "var(--app)" : "transparent")
.border(`1px solid ${isSelected ? "var(--quillred)" : "transparent"}`)
.cursor("pointer").alignItems("center")
.onClick((done) => { if (done) this.onSelectRole(role.id) })
})
// New role input
HStack(() => {
p("+").margin(0).fontSize(1, em).color("var(--headertext)").opacity(0.4).flexShrink(0)
input("New role name…", "100%")
.border("none").background("transparent")
.color("var(--headertext)").fontSize(0.85, em).outline("none").flex(1)
.onInput(e => { this.newRoleName = e.target.value })
.onKeyDown(async (e) => {
if (e.key === "Enter" && this.newRoleName.trim()) {
await this.onCreateRole(this.newRoleName.trim())
this.newRoleName = ""
}
})
})
.gap(0.5, em).alignItems("center")
.paddingHorizontal(0.75, em).paddingVertical(0.55, em)
.borderRadius(0.5, em).border("1px dashed var(--divider)")
.marginTop(0.35, em).cursor("text")
})
.width(220, px).flexShrink(0).paddingHorizontal(1.75, em).gap(0.25, em)
VStack(() => {}).width(1, px).background("var(--divider)").alignSelf("stretch").flexShrink(0)
// ── Role detail ───────────────────────────────────────
VStack(() => {
if (!this.selectedRole) {
VStack(() => {
p("Select a role to configure it")
.margin(0).fontSize(0.88, em)
.color("var(--headertext)").opacity(0.35).textAlign("center")
})
.flex(1).justifyContent("center").alignItems("center")
} else {
VStack(() => {
HStack(() => {
p(this.selectedRole.name)
.margin(0).fontSize(1.1, em).fontWeight("700").color("var(--headertext)")
if (this.selectedRole.is_default) {
p("default")
.margin(0).fontSize(0.65, em).fontWeight("600")
.color("var(--quillred)")
.background("rgba(159,28,41,0.1)")
.paddingHorizontal(0.55, em).paddingVertical(0.15, em)
.borderRadius(100, px)
}
})
.gap(0.65, em).alignItems("center").marginBottom(1.25, em)
this.settingSection("📱", "App Access", "Choose which apps this role can access", () => {
VStack(() => {
this.allApps.forEach(app => {
const hasApp = this.selectedRoleAppIds.has(app.id)
const comingSoonApps = ["tasks", "jobs", "politics", "files"]
const isComingSoon = comingSoonApps.includes(app.name)
HStack(() => {
VStack(() => {
if (hasApp) {
p("✓").margin(0).fontSize(0.6, em).fontWeight("800").color("white").lineHeight("1")
}
})
.width(1.05, em).height(1.05, em).borderRadius(0.25, em)
.background(hasApp ? "var(--quillred)" : "transparent")
.border(`1.5px solid ${hasApp ? "var(--quillred)" : "var(--divider)"}`)
.justifyContent("center").alignItems("center")
.boxSizing("border-box").flexShrink(0)
p(app.name.charAt(0).toUpperCase() + app.name.slice(1))
.margin(0).fontSize(0.88, em).color("var(--headertext)")
if (isComingSoon) {
p("coming soon")
.margin(0).fontSize(0.62, em).fontWeight("600")
.color("var(--headertext)").opacity(0.25)
.background("var(--divider)")
.paddingHorizontal(0.45, em).paddingVertical(0.12, em).borderRadius(100, px)
}
})
.gap(0.75, em).alignItems("center")
.paddingVertical(0.5, em).paddingHorizontal(0.75, em)
.borderRadius(0.45, em)
.background("var(--darkaccent)").border("1px solid var(--divider)")
.cursor(isComingSoon ? "default" : "pointer")
.opacity(isComingSoon ? 0.5 : 1)
.onClick((done) => { if (!isComingSoon && done) this.onToggleApp(this.selectedRoleId, app.id, !hasApp) })
})
})
.gap(0.45, em)
})
this.comingSoonSection("🔐", "Permissions", "Fine-grained action-level permissions per app")
this.comingSoonSection("🔔", "Notifications", "Configure default notification settings")
this.comingSoonSection("🎨", "Color & Badge", "Assign a display color and badge label")
})
.paddingHorizontal(1.75, em).paddingBottom(1.75, em).paddingTop(0.5, em).gap(0)
}
})
.flex(1).minWidth(0).overflowY("auto").height(100, pct)
})
.flex(1).minHeight(0).alignItems("flex-start").overflow("hidden")
})
.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)
}
comingSoonSection(icon, title, subtitle) {
VStack(() => {
HStack(() => {
p(icon).margin(0).fontSize(1, em).lineHeight("1").flexShrink(0).opacity(0.35)
VStack(() => {
HStack(() => {
p(title).margin(0).fontSize(0.92, em).fontWeight("700").color("var(--headertext)").opacity(0.35)
p("coming soon")
.margin(0).fontSize(0.62, em).fontWeight("600")
.color("var(--headertext)").opacity(0.25)
.background("var(--divider)")
.paddingHorizontal(0.45, em).paddingVertical(0.12, em).borderRadius(100, px)
})
.gap(0.55, em).alignItems("center")
p(subtitle).margin(0).marginTop(0.1, em).fontSize(0.72, em).color("var(--headertext)").opacity(0.28)
})
.gap(0)
})
.gap(0.65, em).alignItems("flex-start")
})
.padding(1.1, em).border("1px solid var(--divider)").borderRadius(0.65, em)
.marginBottom(0.85, em).opacity(0.6)
}
}
register(DesktopRolesSection)

95
settings/desktop/DesktopSettingsSidebar.js Normal file
View File

@@ -0,0 +1,95 @@
class DesktopSettingsSidebar extends Shadow {
constructor(activeSection, onSectionChange) {
super()
this.activeSection = activeSection
this.onSectionChange = onSectionChange
}
render() {
VStack(() => {
VStack(() => {
p("Settings")
.fontFamily("Laandbrau")
.margin(0).fontSize(1.8, em).fontWeight("700").color("var(--headertext)")
p(global.currentNetwork.name)
.margin(0).marginTop(0.2, em).fontSize(0.72, em)
.color("var(--headertext)").opacity(0.38)
})
.marginTop(30, px)
.paddingHorizontal(1.1, em).paddingTop(1.2, em).paddingBottom(0.9, em)
VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em)
VStack(() => {
this.sectionLabel("MANAGE")
this.navItem("🎭", "Roles & Apps", "roles")
})
.paddingTop(0.75, em)
VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em).marginVertical(0.5, em)
VStack(() => {
this.sectionLabel("INTEGRATIONS")
this.navItem("💳", "Stripe", "integrations")
})
VStack(() => {}).flex(1)
VStack(() => {
p("NETWORK")
.margin(0).marginBottom(0.4, em)
.fontSize(0.6, em).fontWeight("700").letterSpacing("0.07em")
.color("var(--headertext)").opacity(0.35)
VStack(() => {
this.infoRow("ID", String(global.currentNetwork.id))
this.infoRow("Slug", global.currentNetwork.abbreviation)
})
.background("var(--darkaccent)").border("1px solid var(--divider)")
.borderRadius(0.5, em).gap(0)
})
.paddingHorizontal(0.75, em).paddingBottom(1.1, em).flexShrink(0)
})
.width(230, px).height(100, pct)
.borderRight("1px solid var(--divider)")
.flexShrink(0).overflowY("auto").boxSizing("border-box")
}
navItem(icon, label, sectionId) {
const isActive = this.activeSection === sectionId
HStack(() => {
p(icon).margin(0).fontSize(0.9, em).lineHeight("1").flexShrink(0)
p(label).margin(0).fontSize(0.88, em)
.fontWeight(isActive ? "600" : "400")
.color("var(--headertext)").opacity(isActive ? 1 : 0.65)
})
.gap(0.62, em).paddingHorizontal(0.85, em).paddingVertical(0.45, 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((done) => { if (done) this.onSectionChange(sectionId) })
}
sectionLabel(text) {
p(text)
.margin(0).marginBottom(0.28, em).paddingHorizontal(1.1, em)
.fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
.color("var(--headertext)").opacity(0.35)
}
infoRow(label, value) {
HStack(() => {
p(label)
.margin(0).fontSize(0.68, em).color("var(--headertext)").opacity(0.4)
.width(4, em).flexShrink(0)
p(value)
.margin(0).fontSize(0.72, em).fontWeight("600").color("var(--headertext)")
})
.paddingVertical(0.3, em).paddingHorizontal(0.65, em)
.borderBottom("1px solid var(--divider)")
.alignItems("center").gap(0.4, em)
}
}
register(DesktopSettingsSidebar)

149
settings/desktop/settings.js Normal file
View File

@@ -0,0 +1,149 @@
import server from "/@server/server.js"
import env from "/_/code/env.js"
import "/_/code/components/LoadingCircle.js"
import "./DesktopSettingsSidebar.js"
import "./DesktopRolesSection.js"
import "./DesktopIntegrationsSection.js"
css(`
settings- {
font-family: 'Arial';
scrollbar-width: none;
-ms-overflow-style: none;
}
settings- input::placeholder {
color: var(--headertext);
opacity: 0.35;
}
`)
class Settings extends Shadow {
activeSection = "roles"
loaded = false
roles = []
allApps = []
selectedRoleId = null
roleApps = {}
confirmDeleteId = null
stripeDetails = null
render() {
HStack(() => {
DesktopSettingsSidebar(this.activeSection, (section) => {
this.activeSection = section
this.rerender()
})
VStack(() => {
if (!this.loaded) {
VStack(() => LoadingCircle())
.flex(1)
.justifyContent("center")
.alignItems("center")
} else if (this.activeSection === "roles")
DesktopRolesSection(
this.roles,
this.allApps,
this.selectedRoleId,
this.roleApps,
this.confirmDeleteId,
(id) => { this.selectedRoleId = id; this.confirmDeleteId = null; this.rerender() },
(id) => this.deleteRole(id),
(id) => { this.confirmDeleteId = id; this.rerender() },
(name) => this.createRole(name),
(roleId, appId, add) => this.toggleRoleApp(roleId, appId, add)
)
else if (this.activeSection === "integrations")
DesktopIntegrationsSection(this.stripeDetails, () => this.handleConnectStripe())
})
.flex(1).height(100, pct).overflowY("auto")
})
.height(100, pct).width(100, pct).overflow("hidden")
.onAppear(async () => {
if (this.loaded) return
await this.loadRoles()
this.stripeDetails = await server.getStripeProfile(global.currentNetwork.id)
this.rerender()
})
}
// ── Server actions ────────────────────────────────────────────────
async loadRoles() {
const [roles, apps] = await Promise.all([
server.getRoles(global.currentNetwork.id),
server.getAllApps()
])
this.roles = Array.isArray(roles) ? roles : []
this.allApps = Array.isArray(apps) ? apps : []
this.selectedRoleId = this.roles[0]?.id ?? null
await Promise.all(this.roles.map(async role => {
const roleApps = await server.getRoleApps(role.id)
this.roleApps[role.id] = new Set(Array.isArray(roleApps) ? roleApps.map(a => a.id) : [])
}))
this.loaded = true
this.rerender()
}
async createRole(name) {
const result = await server.createRole(name, global.currentNetwork.id)
if (!result?.error && result?.role) {
this.roles.push(result.role)
this.roleApps[result.role.id] = new Set()
this.selectedRoleId = result.role.id
this.rerender()
}
}
async deleteRole(roleId) {
await server.deleteRole(roleId, global.currentNetwork.id)
this.roles = this.roles.filter(r => r.id !== roleId)
delete this.roleApps[roleId]
this.selectedRoleId = this.roles[0]?.id ?? null
this.confirmDeleteId = null
this.rerender()
}
async toggleRoleApp(roleId, appId, add) {
if (add) {
await server.addRoleApp(roleId, appId)
if (!this.roleApps[roleId]) this.roleApps[roleId] = new Set()
this.roleApps[roleId].add(appId)
} else {
await server.removeRoleApp(roleId, appId)
this.roleApps[roleId]?.delete(appId)
}
if (roleId == global.currentNetwork.role?.id) {
const appName = this.allApps.find(a => a.id === appId)?.name
if (appName) {
if (add) {
global.currentNetwork.apps.push(appName)
} else {
global.currentNetwork.apps = global.currentNetwork.apps.filter(a => a !== appName)
}
document.querySelector("app-menu")?.rerender()
}
}
this.rerender()
}
handleConnectStripe() {
const state = btoa(JSON.stringify({ returnTo: window.location.href, networkId: global.currentNetwork.id }))
const params = new URLSearchParams({
response_type: "code",
client_id: env.client_id,
scope: "read_write",
redirect_uri: `${env.baseURL}/stripe/onboardingcomplete`,
state,
})
window.location.href = `https://connect.stripe.com/oauth/authorize?${params}`
}
}
register(Settings)