jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: conviction voting component, rNotes refinements, space visibility endpoints 

- Add folk-choice-conviction library and register in lib/index
- Refactor rNotes app layout and interaction
- Space visibility normalization in server/spaces
- Minor canvas.html tweaks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-03 13:19:45 -08:00
parent daa6013fd0
commit b52aa8298b
5 changed files with 913 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

723
lib/folk-choice-conviction.ts Normal file
View File

@ -0,0 +1,723 @@
import { FolkShape } from "./folk-shape";
import { css, html } from "./tags";
const USER_ID_KEY = "folk-choice-userid";
const USER_NAME_KEY = "folk-choice-username";
const styles = css`
:host {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
min-width: 340px;
min-height: 380px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #d97706;
color: white;
border-radius: 8px 8px 0 0;
font-size: 12px;
font-weight: 600;
cursor: move;
}
.header-title {
display: flex;
align-items: center;
gap: 6px;
}
.header-actions {
display: flex;
gap: 4px;
}
.header-actions button {
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
font-size: 14px;
}
.header-actions button:hover {
background: rgba(255, 255, 255, 0.2);
}
.body {
display: flex;
flex-direction: column;
height: calc(100% - 36px);
overflow: hidden;
}
.options-list {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
}
.option-row {
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: 6px;
margin-bottom: 6px;
background: #fffbeb;
border: 1px solid #fde68a;
position: relative;
overflow: hidden;
}
.conviction-bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 6px;
opacity: 0.12;
transition: width 0.4s ease;
}
.option-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
z-index: 1;
}
.option-label {
flex: 1;
font-size: 13px;
color: #1e293b;
z-index: 1;
}
.stake-controls {
display: flex;
align-items: center;
gap: 4px;
z-index: 1;
}
.stake-btn {
width: 22px;
height: 22px;
border: 1px solid #fbbf24;
border-radius: 4px;
background: white;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #92400e;
}
.stake-btn:hover { background: #fef3c7; }
.stake-btn:disabled { opacity: 0.3; cursor: default; }
.stake-count {
font-size: 12px;
font-variant-numeric: tabular-nums;
min-width: 14px;
text-align: center;
color: #92400e;
font-weight: 600;
z-index: 1;
}
.option-conviction {
font-size: 11px;
color: #d97706;
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 40px;
text-align: right;
z-index: 1;
}
.option-time {
font-size: 10px;
color: #94a3b8;
min-width: 32px;
text-align: right;
z-index: 1;
}
.weight-bar {
padding: 4px 12px;
font-size: 11px;
color: #64748b;
border-top: 1px solid #e2e8f0;
text-align: center;
}
.weight-bar .used {
font-weight: 600;
color: #d97706;
}
.voters-count {
padding: 4px 12px;
font-size: 11px;
color: #94a3b8;
text-align: center;
}
.add-form {
display: flex;
gap: 6px;
padding: 8px 12px;
border-top: 1px solid #e2e8f0;
}
.add-input {
flex: 1;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
outline: none;
}
.add-input:focus { border-color: #d97706; }
.add-btn {
background: #d97706;
color: white;
border: none;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
.add-btn:hover { background: #b45309; }
.username-prompt {
padding: 16px;
text-align: center;
}
.username-prompt p {
font-size: 13px;
color: #64748b;
margin: 0 0 8px;
}
.username-input {
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
font-size: 13px;
outline: none;
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
}
.username-btn {
background: #d97706;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
font-weight: 500;
font-size: 13px;
}
.wrapper { position: relative; height: 100%; }
.results-drawer {
position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
background: white; border-radius: 0 8px 8px 0;
box-shadow: 4px 0 12px rgba(0,0,0,0.08);
overflow-y: auto; display: none; flex-direction: column;
font-size: 12px; z-index: 10;
}
.drawer-open .results-drawer { display: flex; }
.drawer-section { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.drawer-heading {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.5px; color: #94a3b8; margin-bottom: 6px;
}
.stat-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
.stat-label { color: #64748b; }
.stat-value { font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.drawer-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.drawer-bar-label { font-size: 11px; min-width: 60px; color: #1e293b; }
.drawer-bar-bg { flex: 1; height: 12px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.drawer-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.drawer-bar-val { font-size: 10px; font-weight: 600; min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.participant-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11px; color: #475569; }
.participant-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drawer-toggle.active { background: rgba(255,255,255,0.3); }
`;
// -- Data types --
export interface ConvictionOption {
id: string;
label: string;
color: string;
}
export interface ConvictionStake {
userId: string;
userName: string;
optionId: string;
weight: number;
since: number;
}
// -- Pure aggregation functions --
export function convictionScore(
stakes: ConvictionStake[],
optionId: string,
now: number,
): number {
let total = 0;
for (const s of stakes) {
if (s.optionId !== optionId) continue;
total += s.weight * Math.max(0, now - s.since) / 3600000;
}
return total;
}
export function convictionVelocity(
stakes: ConvictionStake[],
optionId: string,
): number {
let total = 0;
for (const s of stakes) {
if (s.optionId !== optionId) continue;
total += s.weight;
}
return total;
}
// -- Component --
declare global {
interface HTMLElementTagNameMap {
"folk-choice-conviction": FolkChoiceConviction;
}
}
const DEFAULT_COLORS = ["#f59e0b", "#3b82f6", "#22c55e", "#ef4444", "#8b5cf6", "#ec4899", "#06b6d4", "#f97316"];
export class FolkChoiceConviction extends FolkShape {
static override tagName = "folk-choice-conviction";
static {
const sheet = new CSSStyleSheet();
const parentRules = Array.from(FolkShape.styles.cssRules).map((r) => r.cssText).join("\n");
const childRules = Array.from(styles.cssRules).map((r) => r.cssText).join("\n");
sheet.replaceSync(`${parentRules}\n${childRules}`);
this.styles = sheet;
}
#title = "Conviction Ranking";
#options: ConvictionOption[] = [];
#stakes: ConvictionStake[] = [];
#userId = "";
#userName = "";
#drawerOpen = false;
#tickInterval: ReturnType<typeof setInterval> | null = null;
// DOM refs
#wrapperEl: HTMLElement | null = null;
#bodyEl: HTMLElement | null = null;
#optionsEl: HTMLElement | null = null;
#weightEl: HTMLElement | null = null;
#votersEl: HTMLElement | null = null;
#drawerEl: HTMLElement | null = null;
get title() { return this.#title; }
set title(v: string) { this.#title = v; this.requestUpdate("title"); }
get options() { return this.#options; }
set options(v: ConvictionOption[]) {
this.#options = v;
this.#render();
this.requestUpdate("options");
}
get stakes() { return this.#stakes; }
set stakes(v: ConvictionStake[]) {
this.#stakes = v;
this.#render();
this.requestUpdate("stakes");
}
#ensureIdentity(): boolean {
if (this.#userId && this.#userName) return true;
this.#userId = localStorage.getItem(USER_ID_KEY) || "";
this.#userName = localStorage.getItem(USER_NAME_KEY) || localStorage.getItem("rspace-username") || "";
if (!this.#userId) {
this.#userId = crypto.randomUUID().slice(0, 8);
localStorage.setItem(USER_ID_KEY, this.#userId);
}
return !!this.#userName;
}
#setUserName(name: string) {
this.#userName = name;
localStorage.setItem(USER_NAME_KEY, name);
localStorage.setItem("rspace-username", name);
}
#getMyStake(optionId: string): ConvictionStake | undefined {
return this.#stakes.find((s) => s.userId === this.#userId && s.optionId === optionId);
}
#setStake(optionId: string, delta: number) {
if (!this.#ensureIdentity()) return;
const existing = this.#getMyStake(optionId);
const currentWeight = existing ? existing.weight : 0;
const newWeight = Math.max(0, Math.min(10, currentWeight + delta));
if (newWeight === 0) {
// Remove stake
this.#stakes = this.#stakes.filter(
(s) => !(s.userId === this.#userId && s.optionId === optionId),
);
} else if (existing) {
// Update — reset conviction timer on weight change
existing.weight = newWeight;
existing.since = Date.now();
} else {
// New stake
this.#stakes.push({
userId: this.#userId,
userName: this.#userName,
optionId,
weight: newWeight,
since: Date.now(),
});
}
this.#render();
this.dispatchEvent(new CustomEvent("content-change"));
}
override createRenderRoot() {
const root = super.createRenderRoot();
this.#ensureIdentity();
const wrapper = document.createElement("div");
wrapper.className = "wrapper";
wrapper.innerHTML = html`
<div class="header">
<span class="header-title">
<span>&#x23F3;</span>
<span class="title-text">Conviction</span>
</span>
<div class="header-actions">
<button class="drawer-toggle" title="Results &amp; Stats">&#x1F4CA;</button>
<button class="close-btn" title="Close">&times;</button>
</div>
</div>
<div class="body">
<div class="options-list"></div>
<div class="weight-bar"></div>
<div class="voters-count"></div>
<div class="add-form">
<input type="text" class="add-input" placeholder="Add option..." />
<button class="add-btn">Add</button>
</div>
</div>
<div class="results-drawer"></div>
<div class="username-prompt" style="display: none;">
<p>Enter your name to stake:</p>
<input type="text" class="username-input" placeholder="Your name..." />
<button class="username-btn">Join</button>
</div>
`;
const slot = root.querySelector("slot");
const containerDiv = slot?.parentElement as HTMLElement;
if (containerDiv) containerDiv.replaceWith(wrapper);
this.#wrapperEl = wrapper;
this.#bodyEl = wrapper.querySelector(".body") as HTMLElement;
this.#optionsEl = wrapper.querySelector(".options-list") as HTMLElement;
this.#weightEl = wrapper.querySelector(".weight-bar") as HTMLElement;
this.#votersEl = wrapper.querySelector(".voters-count") as HTMLElement;
this.#drawerEl = wrapper.querySelector(".results-drawer") as HTMLElement;
const titleEl = wrapper.querySelector(".title-text") as HTMLElement;
const drawerToggle = wrapper.querySelector(".drawer-toggle") as HTMLButtonElement;
drawerToggle.addEventListener("click", (e) => {
e.stopPropagation();
this.#drawerOpen = !this.#drawerOpen;
this.#wrapperEl!.classList.toggle("drawer-open", this.#drawerOpen);
drawerToggle.classList.toggle("active", this.#drawerOpen);
if (this.#drawerOpen) this.#renderDrawer();
});
const usernamePrompt = wrapper.querySelector(".username-prompt") as HTMLElement;
const usernameInput = wrapper.querySelector(".username-input") as HTMLInputElement;
const usernameBtn = wrapper.querySelector(".username-btn") as HTMLButtonElement;
const addInput = wrapper.querySelector(".add-input") as HTMLInputElement;
const addBtn = wrapper.querySelector(".add-btn") as HTMLButtonElement;
if (!this.#userName) {
this.#bodyEl.style.display = "none";
usernamePrompt.style.display = "block";
}
const submitName = () => {
const name = usernameInput.value.trim();
if (name) {
this.#setUserName(name);
this.#bodyEl!.style.display = "flex";
usernamePrompt.style.display = "none";
this.#render();
}
};
usernameBtn.addEventListener("click", (e) => { e.stopPropagation(); submitName(); });
usernameInput.addEventListener("click", (e) => e.stopPropagation());
usernameInput.addEventListener("keydown", (e) => { e.stopPropagation(); if (e.key === "Enter") submitName(); });
// Add option
const addOption = () => {
const label = addInput.value.trim();
if (!label) return;
this.#options.push({
id: `opt-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
label,
color: DEFAULT_COLORS[this.#options.length % DEFAULT_COLORS.length],
});
addInput.value = "";
this.#render();
this.dispatchEvent(new CustomEvent("content-change"));
};
addBtn.addEventListener("click", (e) => { e.stopPropagation(); addOption(); });
addInput.addEventListener("click", (e) => e.stopPropagation());
addInput.addEventListener("keydown", (e) => { e.stopPropagation(); if (e.key === "Enter") addOption(); });
wrapper.querySelector(".close-btn")!.addEventListener("click", (e) => {
e.stopPropagation();
this.dispatchEvent(new CustomEvent("close"));
});
if (this.#title) titleEl.textContent = this.#title;
// Live conviction update
this.#tickInterval = setInterval(() => this.#render(), 10000);
this.#render();
return root;
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.#tickInterval) {
clearInterval(this.#tickInterval);
this.#tickInterval = null;
}
}
#render() {
this.#renderOptions();
if (this.#drawerOpen) this.#renderDrawer();
}
#renderOptions() {
if (!this.#optionsEl) return;
const now = Date.now();
const convictions = this.#options.map((opt) => ({
id: opt.id,
score: convictionScore(this.#stakes, opt.id, now),
}));
const maxConv = Math.max(1, ...convictions.map((c) => c.score));
const uniqueParticipants = new Set(this.#stakes.map((s) => s.userId)).size;
this.#optionsEl.innerHTML = this.#options
.map((opt) => {
const conv = convictions.find((c) => c.id === opt.id)!;
const barWidth = (conv.score / maxConv) * 100;
const myStake = this.#getMyStake(opt.id);
const myWeight = myStake ? myStake.weight : 0;
const timeHeld = myStake ? this.#formatDuration(now - myStake.since) : "";
return `
<div class="option-row" data-opt="${opt.id}">
<div class="conviction-bg" style="width:${barWidth}%;background:${opt.color};"></div>
<span class="option-dot" style="background:${opt.color}"></span>
<span class="option-label">${this.#escapeHtml(opt.label)}</span>
<div class="stake-controls">
<button class="stake-btn stake-minus" data-opt="${opt.id}">&minus;</button>
<span class="stake-count">${myWeight}</span>
<button class="stake-btn stake-plus" data-opt="${opt.id}">+</button>
</div>
<span class="option-time">${timeHeld}</span>
<span class="option-conviction">${this.#formatConviction(conv.score)}</span>
</div>
`;
})
.join("");
// Wire buttons
this.#optionsEl.querySelectorAll(".stake-plus").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
this.#setStake((btn as HTMLElement).dataset.opt!, 1);
});
});
this.#optionsEl.querySelectorAll(".stake-minus").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.stopPropagation();
this.#setStake((btn as HTMLElement).dataset.opt!, -1);
});
});
// Weight bar
if (this.#weightEl) {
const totalWeight = this.#stakes
.filter((s) => s.userId === this.#userId)
.reduce((sum, s) => sum + s.weight, 0);
this.#weightEl.innerHTML = `Your weight: <span class="used">${totalWeight}</span> across ${this.#stakes.filter((s) => s.userId === this.#userId).length} option${this.#stakes.filter((s) => s.userId === this.#userId).length !== 1 ? "s" : ""}`;
}
// Voters count
if (this.#votersEl) {
this.#votersEl.textContent = uniqueParticipants === 0
? "No stakes yet"
: `${uniqueParticipants} participant${uniqueParticipants !== 1 ? "s" : ""}`;
}
}
#renderDrawer() {
if (!this.#drawerEl) return;
const now = Date.now();
const optMap = new Map(this.#options.map((o) => [o.id, o]));
// Group Results: conviction leaderboard
const convictions = this.#options.map((opt) => ({
id: opt.id,
label: opt.label,
color: opt.color,
score: convictionScore(this.#stakes, opt.id, now),
velocity: convictionVelocity(this.#stakes, opt.id),
rawWeight: this.#stakes.filter((s) => s.optionId === opt.id).reduce((sum, s) => sum + s.weight, 0),
}));
convictions.sort((a, b) => b.score - a.score);
const maxConv = Math.max(1, ...convictions.map((c) => c.score));
let resultsHtml = '<div class="drawer-section"><div class="drawer-heading">Conviction Leaderboard</div>';
for (const c of convictions) {
const pct = (c.score / maxConv) * 100;
resultsHtml += `<div class="drawer-bar-row">
<span class="drawer-bar-label">${this.#escapeHtml(c.label)}</span>
<div class="drawer-bar-bg"><div class="drawer-bar-fill" style="width:${pct}%;background:${c.color}"></div></div>
<span class="drawer-bar-val">${this.#formatConviction(c.score)}</span>
</div>`;
}
resultsHtml += "</div>";
// Statistics
const uniqueParticipants = new Set(this.#stakes.map((s) => s.userId)).size;
const totalConv = convictions.reduce((sum, c) => sum + c.score, 0);
const totalVelocity = convictions.reduce((sum, c) => sum + c.velocity, 0);
let statsHtml = '<div class="drawer-section"><div class="drawer-heading">Statistics</div>';
statsHtml += `<div class="stat-row"><span class="stat-label">Participants</span><span class="stat-value">${uniqueParticipants}</span></div>`;
statsHtml += `<div class="stat-row"><span class="stat-label">Total conviction</span><span class="stat-value">${this.#formatConviction(totalConv)}</span></div>`;
statsHtml += `<div class="stat-row"><span class="stat-label">Velocity (wt/hr)</span><span class="stat-value">${totalVelocity.toFixed(1)}</span></div>`;
// Raw weight vs conviction rank comparison
const byRawWeight = [...convictions].sort((a, b) => b.rawWeight - a.rawWeight);
const byConviction = convictions; // already sorted
let rankDiff = false;
for (let i = 0; i < convictions.length; i++) {
if (byRawWeight[i]?.id !== byConviction[i]?.id) { rankDiff = true; break; }
}
if (rankDiff && convictions.length >= 2) {
statsHtml += '<div style="margin-top:6px"><div class="drawer-heading">Raw Weight vs Conviction</div>';
for (const c of convictions) {
const rawRank = byRawWeight.findIndex((r) => r.id === c.id) + 1;
const convRank = byConviction.findIndex((r) => r.id === c.id) + 1;
const diff = rawRank - convRank;
const arrow = diff > 0 ? `↑${diff}` : diff < 0 ? `↓${Math.abs(diff)}` : "=";
statsHtml += `<div class="stat-row"><span class="stat-label">${this.#escapeHtml(c.label)}</span><span class="stat-value">#${convRank} (${arrow})</span></div>`;
}
statsHtml += "</div>";
}
statsHtml += "</div>";
// Participants
const userStakes = new Map<string, { name: string; totalWeight: number; totalConv: number; optCount: number }>();
for (const s of this.#stakes) {
const u = userStakes.get(s.userId) || { name: s.userName, totalWeight: 0, totalConv: 0, optCount: 0 };
u.name = s.userName;
u.totalWeight += s.weight;
u.totalConv += s.weight * Math.max(0, now - s.since) / 3600000;
u.optCount++;
userStakes.set(s.userId, u);
}
let participantsHtml = '<div class="drawer-section"><div class="drawer-heading">Participants</div>';
for (const [, u] of userStakes) {
participantsHtml += `<div class="participant-row">
<span class="participant-dot" style="background:#d97706"></span>
<span>${this.#escapeHtml(u.name)}</span>
<span style="margin-left:auto;color:#94a3b8;font-size:10px">wt:${u.totalWeight} conv:${this.#formatConviction(u.totalConv)}</span>
</div>`;
}
participantsHtml += "</div>";
this.#drawerEl.innerHTML = resultsHtml + statsHtml + participantsHtml;
}
#formatConviction(score: number): string {
if (score < 1) return score.toFixed(2);
if (score < 100) return score.toFixed(1);
return Math.round(score).toString();
}
#formatDuration(ms: number): string {
if (ms < 60000) return "<1m";
if (ms < 3600000) return `${Math.floor(ms / 60000)}m`;
if (ms < 86400000) return `${Math.floor(ms / 3600000)}h`;
return `${Math.floor(ms / 86400000)}d`;
}
#timeAgo(ts: number): string {
const diff = Date.now() - ts;
if (diff < 60000) return "just now";
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
return `${Math.floor(diff / 86400000)}d ago`;
}
#escapeHtml(text: string): string {
const div = document.createElement("div");
div.textContent = text;
return div.innerHTML;
}
override toJSON() {
return {
...super.toJSON(),
type: "folk-choice-conviction",
title: this.#title,
options: this.#options,
stakes: this.#stakes,
};
}
}

1
lib/index.ts
View File

@ -70,6 +70,7 @@ export * from "./folk-social-post";
export * from "./folk-choice-vote"; export * from "./folk-choice-vote";
export * from "./folk-choice-rank"; export * from "./folk-choice-rank";
export * from "./folk-choice-spider"; export * from "./folk-choice-spider";
export * from "./folk-choice-conviction";
// Nested Space Shape // Nested Space Shape
export * from "./folk-canvas"; export * from "./folk-canvas";

282
modules/rnotes/components/folk-notes-app.ts
View File

@ -1173,7 +1173,7 @@ Gear: EUR 400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
this.navZone.innerHTML = ` this.navZone.innerHTML = `
<div class="rapp-nav"> <div class="rapp-nav">
<button class="rapp-nav__back" data-back="notebooks">\u2190 Notebooks</button> <button class="rapp-nav__back" data-back="notebooks">\u2190 Notebooks</button>
<span class="rapp-nav__title" style="color:${nb.cover_color}">${this.esc(nb.title)}${syncBadge}</span> <span class="rapp-nav__title">${this.esc(nb.title)}${syncBadge}</span>
<button class="rapp-nav__btn" id="create-note">+ New Note</button> <button class="rapp-nav__btn" id="create-note">+ New Note</button>
</div>`; </div>`;
return; return;
@ -1364,197 +1364,267 @@ Gear: EUR 400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
private getStyles(): string { private getStyles(): string {
return ` return `
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; } :host { display: block; font-family: system-ui, -apple-system, sans-serif; color: var(--rs-text-primary); }
* { box-sizing: border-box; } * { box-sizing: border-box; }
/* ── Navigation ── */
.rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; } .rapp-nav { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; min-height: 36px; }
.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; } .rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--rs-border); background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 13px; transition: all 0.15s; }
.rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); } .rapp-nav__back:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); }
.rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rapp-nav__title { font-size: 15px; font-weight: 600; flex: 1; color: var(--rs-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; } .rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: var(--rs-primary); color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; transition: background 0.15s; }
.rapp-nav__btn:hover { background: #6366f1; } .rapp-nav__btn:hover { background: var(--rs-primary-hover); }
/* ── Search ── */
.search-bar { .search-bar {
width: 100%; padding: 10px 14px; border-radius: 8px; width: 100%; padding: 10px 14px; border-radius: 8px;
border: 1px solid #444; background: #2a2a3e; color: #e0e0e0; border: 1px solid var(--rs-input-border); background: var(--rs-input-bg); color: var(--rs-input-text);
font-size: 14px; margin-bottom: 16px; font-size: 14px; margin-bottom: 16px; transition: border-color 0.15s;
} }
.search-bar:focus { border-color: #6366f1; outline: none; } .search-bar:focus { border-color: var(--rs-primary); outline: none; }
.search-results-info { margin-bottom: 12px; font-size: 13px; color: var(--rs-text-secondary); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } /* ── Notebook Grid ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.notebook-card { .notebook-card {
border-radius: 10px; padding: 16px; cursor: pointer; position: relative; overflow: hidden;
border: 2px solid transparent; transition: border-color 0.2s; border-radius: 12px; padding: 16px 16px 16px 20px; cursor: pointer;
border: 1px solid var(--rs-card-border); background: var(--rs-card-bg);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between;
} }
.notebook-card:hover { border-color: rgba(255,255,255,0.2); } .notebook-card:hover { border-color: var(--rs-border); box-shadow: var(--rs-shadow-sm); transform: translateY(-1px); }
.notebook-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .notebook-card__accent { position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 12px 0 0 12px; }
.notebook-meta { font-size: 12px; opacity: 0.7; } .notebook-card__body { flex: 1; }
.notebook-card__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--rs-text-primary); }
.notebook-card__desc { font-size: 12px; color: var(--rs-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notebook-card__footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--rs-text-muted); margin-top: 8px; }
/* ── Note Items ── */
.note-item { .note-item {
background: #1e1e2e; border: 1px solid #333; border-radius: 8px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle); border-radius: 10px;
padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s; padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
display: flex; gap: 12px; align-items: flex-start; display: flex; gap: 12px; align-items: flex-start;
} }
.note-item:hover { border-color: #555; } .note-item:hover { border-color: var(--rs-border); box-shadow: var(--rs-shadow-sm); }
.note-icon { font-size: 20px; flex-shrink: 0; } .note-item__icon {
.note-body { flex: 1; min-width: 0; } font-size: 18px; flex-shrink: 0; width: 32px; height: 32px;
.note-title { font-size: 14px; font-weight: 600; } display: flex; align-items: center; justify-content: center;
.note-preview { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } background: var(--rs-bg-surface-raised); border-radius: 8px;
.note-meta { font-size: 11px; color: #666; margin-top: 4px; display: flex; gap: 8px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #333; color: #aaa; font-size: 10px; }
.pinned { color: #f59e0b; }
.editable-title {
background: transparent; border: none; color: #e2e8f0; font-family: inherit;
font-size: 22px; font-weight: 700; width: 100%; outline: none;
padding: 8px 0; margin-bottom: 4px;
} }
.editable-title:focus { border-bottom: 2px solid #6366f1; } .note-item__body { flex: 1; min-width: 0; }
.editable-title::placeholder { color: #555; } .note-item__title { font-size: 14px; font-weight: 600; color: var(--rs-text-primary); }
.note-item__pin { color: var(--rs-warning); }
.note-item__preview {
font-size: 12px; color: var(--rs-text-muted); margin-top: 3px; line-height: 1.4;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.note-item__meta { font-size: 11px; color: var(--rs-text-muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--rs-bg-surface-raised); color: var(--rs-text-secondary); font-size: 10px; }
/* ── Editor Title ── */
.editable-title {
background: transparent; border: none; border-bottom: 2px solid transparent;
color: var(--rs-text-primary); font-family: inherit;
font-size: 22px; font-weight: 700; width: 100%; outline: none;
padding: 8px 0; margin-bottom: 4px; transition: border-color 0.15s;
}
.editable-title:focus { border-bottom-color: var(--rs-primary); }
.editable-title::placeholder { color: var(--rs-text-muted); }
/* ── Sync Badge ── */
.sync-badge { .sync-badge {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-left: 8px; vertical-align: middle; margin-left: 8px; vertical-align: middle;
} }
.sync-badge.connected { background: #10b981; } .sync-badge.connected { background: var(--rs-success); }
.sync-badge.disconnected { background: #ef4444; } .sync-badge.disconnected { background: var(--rs-error); }
.empty { text-align: center; color: #666; padding: 40px; } /* ── State Messages ── */
.loading { text-align: center; color: #888; padding: 40px; } .empty { text-align: center; color: var(--rs-text-muted); padding: 40px; }
.error { text-align: center; color: #ef5350; padding: 20px; } .loading { text-align: center; color: var(--rs-text-secondary); padding: 40px; }
.error { text-align: center; color: var(--rs-error); padding: 20px; }
/* ── Meta Bar ── */
.note-meta-bar { .note-meta-bar {
margin-top: 12px; font-size: 12px; color: #666; display: flex; gap: 12px; padding: 8px 0; margin-top: 12px; font-size: 12px; color: var(--rs-text-muted);
display: flex; gap: 12px; padding: 8px 0; align-items: center;
} }
.meta-live { color: var(--rs-success); font-weight: 500; }
.meta-demo { color: var(--rs-warning); font-weight: 500; }
/* ── Editor Toolbar ── */ /* ── Editor Toolbar ── */
.editor-toolbar { .editor-toolbar {
display: flex; flex-wrap: wrap; gap: 2px; align-items: center; display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; background: var(--rs-toolbar-bg); border: 1px solid var(--rs-toolbar-panel-border);
padding: 4px 6px; margin-bottom: 2px; border-radius: 8px; padding: 4px 6px; margin-bottom: 2px;
} }
.toolbar-group { display: flex; gap: 1px; } .toolbar-group { display: flex; gap: 1px; }
.toolbar-sep { width: 1px; height: 20px; background: #1e293b; margin: 0 4px; } .toolbar-sep { width: 1px; height: 20px; background: var(--rs-toolbar-sep); margin: 0 4px; }
.toolbar-btn { .toolbar-btn {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
width: 30px; height: 28px; border: none; border-radius: 4px; width: 30px; height: 28px; border: none; border-radius: 4px;
background: transparent; color: #94a3b8; cursor: pointer; background: transparent; color: var(--rs-text-secondary); cursor: pointer;
font-size: 13px; font-family: inherit; transition: all 0.15s; font-size: 13px; font-family: inherit; transition: all 0.15s;
} }
.toolbar-btn:hover { background: #1e293b; color: #e2e8f0; } .toolbar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.toolbar-btn.active { background: #312e81; color: #a5b4fc; } .toolbar-btn:hover { background: var(--rs-toolbar-btn-hover); color: var(--rs-toolbar-btn-text); }
.toolbar-btn.active { background: var(--rs-primary); color: #fff; }
.toolbar-select { .toolbar-select {
padding: 2px 4px; border-radius: 4px; border: 1px solid #1e293b; padding: 2px 4px; border-radius: 4px; border: 1px solid var(--rs-toolbar-panel-border);
background: #0f172a; color: #94a3b8; font-size: 12px; cursor: pointer; background: var(--rs-toolbar-bg); color: var(--rs-text-secondary); font-size: 12px; cursor: pointer;
font-family: inherit; font-family: inherit; transition: border-color 0.15s;
} }
.toolbar-select:focus { outline: none; border-color: #4f46e5; } .toolbar-select:focus { outline: none; border-color: var(--rs-primary); }
/* ── Tiptap Editor ── */ /* ── Tiptap Editor ── */
.editor-wrapper { .editor-wrapper {
background: #1e1e2e; border: 1px solid #333; border-radius: 10px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border-subtle);
overflow: hidden; border-radius: 10px; overflow: hidden;
}
.editor-wrapper .editable-title {
padding: 16px 20px 0;
}
.editor-wrapper .editor-toolbar {
margin: 4px 8px; border-radius: 6px;
} }
.editor-wrapper .editable-title { padding: 16px 20px 0; }
.editor-wrapper .editor-toolbar { margin: 4px 8px; border-radius: 6px; }
.tiptap-container .tiptap { .tiptap-container .tiptap {
min-height: 300px; padding: 16px 20px; outline: none; min-height: 300px; padding: 20px 24px; outline: none;
font-size: 15px; line-height: 1.7; color: #e0e0e0; font-size: 15px; line-height: 1.75; color: var(--rs-text-primary);
} }
.tiptap-container .tiptap:focus { outline: none; } .tiptap-container .tiptap:focus { outline: none; }
/* Prose styles */ /* ── Prose Styles ── */
.tiptap-container .tiptap h1 { font-size: 1.8em; font-weight: 700; margin: 1em 0 0.4em; color: #f1f5f9; } .tiptap-container .tiptap h1 {
.tiptap-container .tiptap h2 { font-size: 1.4em; font-weight: 600; margin: 0.8em 0 0.3em; color: #e2e8f0; } font-size: 1.75em; font-weight: 700; margin: 1.2em 0 0.5em; color: var(--rs-text-primary);
.tiptap-container .tiptap h3 { font-size: 1.15em; font-weight: 600; margin: 0.7em 0 0.25em; color: #cbd5e1; } padding-bottom: 0.3em; border-bottom: 1px solid var(--rs-border-subtle);
.tiptap-container .tiptap h4 { font-size: 1em; font-weight: 600; margin: 0.6em 0 0.2em; color: #94a3b8; } }
.tiptap-container .tiptap p { margin: 0.4em 0; } .tiptap-container .tiptap h2 { font-size: 1.35em; font-weight: 600; margin: 1em 0 0.4em; color: var(--rs-text-primary); }
.tiptap-container .tiptap h3 { font-size: 1.1em; font-weight: 600; margin: 0.8em 0 0.3em; color: var(--rs-text-secondary); }
.tiptap-container .tiptap h4 {
font-size: 0.95em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
margin: 0.7em 0 0.25em; color: var(--rs-text-muted);
}
.tiptap-container .tiptap p { margin: 0.5em 0; }
.tiptap-container .tiptap blockquote { .tiptap-container .tiptap blockquote {
border-left: 3px solid #4f46e5; padding-left: 16px; margin: 0.8em 0; border-left: 3px solid var(--rs-primary); padding: 4px 0 4px 16px; margin: 0.8em 0;
color: #94a3b8; font-style: italic; color: var(--rs-text-secondary); font-style: italic;
background: var(--rs-bg-surface-raised); border-radius: 0 6px 6px 0;
} }
.tiptap-container .tiptap code { .tiptap-container .tiptap code {
background: #2a2a3e; padding: 2px 6px; border-radius: 4px; background: var(--rs-bg-surface-raised); padding: 2px 6px; border-radius: 4px;
font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9em; color: #a5b4fc; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.88em; color: var(--rs-accent);
} }
.tiptap-container .tiptap pre { .tiptap-container .tiptap pre {
background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; background: var(--rs-bg-surface-sunken); border: 1px solid var(--rs-border-subtle);
padding: 12px 16px; margin: 0.8em 0; overflow-x: auto; border-radius: 8px; padding: 14px 16px; margin: 1em 0; overflow-x: auto;
} }
.tiptap-container .tiptap pre code { .tiptap-container .tiptap pre code {
background: none; padding: 0; border-radius: 0; color: #e0e0e0; background: none; padding: 0; border-radius: 0; color: var(--rs-text-primary);
font-size: 13px; line-height: 1.5; font-size: 13px; line-height: 1.6;
} }
.tiptap-container .tiptap ul, .tiptap-container .tiptap ol { .tiptap-container .tiptap ul, .tiptap-container .tiptap ol { padding-left: 24px; margin: 0.5em 0; }
padding-left: 24px; margin: 0.4em 0; .tiptap-container .tiptap li { margin: 0.2em 0; }
} .tiptap-container .tiptap li p { margin: 0.15em 0; }
.tiptap-container .tiptap li { margin: 0.15em 0; } .tiptap-container .tiptap li::marker { color: var(--rs-text-muted); }
.tiptap-container .tiptap li p { margin: 0.1em 0; }
/* Task list */ /* Task list */
.tiptap-container .tiptap ul[data-type="taskList"] { .tiptap-container .tiptap ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
list-style: none; padding-left: 4px; .tiptap-container .tiptap ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
} .tiptap-container .tiptap ul[data-type="taskList"] li label { margin-top: 3px; }
.tiptap-container .tiptap ul[data-type="taskList"] li {
display: flex; align-items: flex-start; gap: 8px;
}
.tiptap-container .tiptap ul[data-type="taskList"] li label {
margin-top: 3px;
}
.tiptap-container .tiptap ul[data-type="taskList"] li[data-checked="true"] > div > p { .tiptap-container .tiptap ul[data-type="taskList"] li[data-checked="true"] > div > p {
text-decoration: line-through; color: #666; text-decoration: line-through; color: var(--rs-text-muted);
}
.tiptap-container .tiptap ul[data-type="taskList"] li label input[type="checkbox"] {
accent-color: var(--rs-primary); width: 15px; height: 15px;
} }
.tiptap-container .tiptap img { .tiptap-container .tiptap img {
max-width: 100%; border-radius: 8px; margin: 0.5em 0; max-width: 100%; border-radius: 8px; margin: 0.75em 0;
border: 1px solid var(--rs-border-subtle);
} }
.tiptap-container .tiptap a { .tiptap-container .tiptap a {
color: #818cf8; text-decoration: underline; text-underline-offset: 2px; color: var(--rs-primary-hover); text-decoration: underline;
text-underline-offset: 2px; text-decoration-color: rgba(99, 102, 241, 0.4);
} }
.tiptap-container .tiptap a:hover { color: #a5b4fc; } .tiptap-container .tiptap a:hover { text-decoration-color: var(--rs-primary-hover); }
.tiptap-container .tiptap hr { .tiptap-container .tiptap hr { border: none; border-top: 1px solid var(--rs-border); margin: 1.5em 0; }
border: none; border-top: 1px solid #333; margin: 1.5em 0; .tiptap-container .tiptap strong { color: var(--rs-text-primary); font-weight: 600; }
}
.tiptap-container .tiptap strong { color: #f1f5f9; }
.tiptap-container .tiptap em { color: inherit; } .tiptap-container .tiptap em { color: inherit; }
.tiptap-container .tiptap s { color: #666; } .tiptap-container .tiptap s { color: var(--rs-text-muted); }
.tiptap-container .tiptap u { text-underline-offset: 3px; } .tiptap-container .tiptap u { text-underline-offset: 3px; }
/* Placeholder */ /* Placeholder */
.tiptap-container .tiptap p.is-editor-empty:first-child::before { .tiptap-container .tiptap p.is-editor-empty:first-child::before {
content: attr(data-placeholder); content: attr(data-placeholder);
float: left; color: #555; pointer-events: none; height: 0; float: left; color: var(--rs-text-muted); pointer-events: none; height: 0;
font-style: italic;
} }
/* ── URL Popover ── */
.url-popover {
position: absolute; z-index: 110;
background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
border-radius: 10px; box-shadow: var(--rs-shadow-md);
padding: 8px; min-width: 300px;
animation: popover-in 0.15s ease-out;
}
@keyframes popover-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.url-popover__input {
width: 100%; padding: 8px 10px; border-radius: 6px;
border: 1px solid var(--rs-input-border); background: var(--rs-input-bg);
color: var(--rs-input-text); font-size: 13px; font-family: inherit;
outline: none; margin-bottom: 6px; transition: border-color 0.15s;
}
.url-popover__input:focus { border-color: var(--rs-primary); }
.url-popover__actions { display: flex; gap: 6px; justify-content: flex-end; }
.url-popover__btn {
padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
cursor: pointer; border: none; transition: all 0.15s;
}
.url-popover__btn--insert { background: var(--rs-primary); color: #fff; }
.url-popover__btn--insert:hover { background: var(--rs-primary-hover); }
.url-popover__btn--cancel {
background: transparent; color: var(--rs-text-secondary);
border: 1px solid var(--rs-border);
}
.url-popover__btn--cancel:hover { color: var(--rs-text-primary); border-color: var(--rs-border-strong); }
/* ── Slash Menu ── */ /* ── Slash Menu ── */
.slash-menu { .slash-menu {
position: absolute; z-index: 100; position: absolute; z-index: 100;
background: #1e1e2e; border: 1px solid #333; border-radius: 8px; background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
box-shadow: 0 8px 24px rgba(0,0,0,0.4); border-radius: 10px; box-shadow: var(--rs-shadow-lg);
max-height: 320px; overflow-y: auto; min-width: 220px; max-height: 360px; overflow-y: auto; min-width: 240px;
display: none; display: none;
} }
.slash-menu__header {
padding: 8px 12px 6px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--rs-text-muted); border-bottom: 1px solid var(--rs-border-subtle);
}
.slash-menu-item { .slash-menu-item {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
padding: 8px 12px; cursor: pointer; transition: background 0.1s; padding: 8px 12px; cursor: pointer; transition: background 0.1s;
} }
.slash-menu-item:hover, .slash-menu-item.selected { .slash-menu-item:last-child { border-radius: 0 0 10px 10px; }
background: #312e81; .slash-menu-item:hover, .slash-menu-item.selected { background: var(--rs-bg-hover); }
}
.slash-menu-icon { .slash-menu-icon {
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
background: #2a2a3e; border-radius: 4px; font-size: 13px; font-weight: 600; color: #a5b4fc; background: var(--rs-bg-surface-raised); border-radius: 6px;
font-size: 13px; font-weight: 600; color: var(--rs-primary);
flex-shrink: 0; flex-shrink: 0;
} }
.slash-menu-icon svg { width: 16px; height: 16px; }
.slash-menu-text { flex: 1; } .slash-menu-text { flex: 1; }
.slash-menu-title { font-size: 13px; font-weight: 500; color: #e2e8f0; } .slash-menu-title { font-size: 13px; font-weight: 500; color: var(--rs-text-primary); }
.slash-menu-desc { font-size: 11px; color: #666; } .slash-menu-desc { font-size: 11px; color: var(--rs-text-muted); }
.slash-menu-hint {
font-size: 10px; color: var(--rs-text-muted); padding: 1px 6px;
background: var(--rs-bg-surface-raised); border-radius: 3px; margin-left: auto;
}
/* ── Code highlighting (lowlight) ── */ /* ── Code highlighting (lowlight) ── */
.tiptap-container .tiptap .hljs-keyword { color: #c792ea; } .tiptap-container .tiptap .hljs-keyword { color: #c792ea; }

20
server/spaces.ts
View File

@ -103,7 +103,7 @@ export type CreateSpaceResult =
* All creation endpoints should call this instead of duplicating logic. * All creation endpoints should call this instead of duplicating logic.
*/ */
export async function createSpace(opts: CreateSpaceOpts): Promise<CreateSpaceResult> { export async function createSpace(opts: CreateSpaceOpts): Promise<CreateSpaceResult> {
const { name, slug, ownerDID, visibility = 'public_read', enabledModules, source = 'api' } = opts; const { name, slug, ownerDID, visibility = 'public', enabledModules, source = 'api' } = opts;
if (!name || !slug) return { ok: false, error: "Name and slug are required", status: 400 }; if (!name || !slug) return { ok: false, error: "Name and slug are required", status: 400 };
if (!/^[a-z0-9-]+$/.test(slug)) return { ok: false, error: "Slug must contain only lowercase letters, numbers, and hyphens", status: 400 }; if (!/^[a-z0-9-]+$/.test(slug)) return { ok: false, error: "Slug must contain only lowercase letters, numbers, and hyphens", status: 400 };
@ -197,18 +197,18 @@ spaces.get("/", async (c) => {
await loadCommunity(slug); await loadCommunity(slug);
const data = getDocumentData(slug); const data = getDocumentData(slug);
if (data?.meta) { if (data?.meta) {
const vis = data.meta.visibility || "public_read"; const vis = data.meta.visibility || "public";
const isOwner = !!(claims && data.meta.ownerDID === claims.sub); const isOwner = !!(claims && data.meta.ownerDID === claims.sub);
const memberEntry = claims ? data.members?.[claims.sub] : undefined; const memberEntry = claims ? data.members?.[claims.sub] : undefined;
const isMember = !!memberEntry; const isMember = !!memberEntry;
// Determine accessibility // Determine accessibility
const isPublic = vis === "public" || vis === "public_read"; const isPublicSpace = vis === "public";
const isAuthenticated = vis === "authenticated"; const isPermissioned = vis === "permissioned";
const accessible = isPublic || isOwner || isMember || (isAuthenticated && !!claims); const accessible = isPublicSpace || isOwner || isMember || (isPermissioned && !!claims);
// For unauthenticated: only show public spaces // For unauthenticated: only show public spaces
if (!claims && !isPublic) continue; if (!claims && !isPublicSpace) continue;
// Determine relationship // Determine relationship
const relationship = isOwner const relationship = isOwner
@ -271,9 +271,9 @@ spaces.post("/", async (c) => {
enabledModules?: string[]; enabledModules?: string[];
}>(); }>();
const { name, slug, visibility = "public_read", enabledModules } = body; const { name, slug, visibility = "public", enabledModules } = body;
const validVisibilities: SpaceVisibility[] = ["public", "public_read", "authenticated", "members_only"]; const validVisibilities: SpaceVisibility[] = ["public", "permissioned", "private"];
if (visibility && !validVisibilities.includes(visibility)) { if (visibility && !validVisibilities.includes(visibility)) {
return c.json({ error: `Invalid visibility. Must be one of: ${validVisibilities.join(", ")}` }, 400); return c.json({ error: `Invalid visibility. Must be one of: ${validVisibilities.join(", ")}` }, 400);
} }
@ -440,7 +440,7 @@ spaces.get("/admin", async (c) => {
spacesList.push({ spacesList.push({
slug: data.meta.slug, slug: data.meta.slug,
name: data.meta.name, name: data.meta.name,
visibility: data.meta.visibility || "public_read", visibility: data.meta.visibility || "public",
createdAt: data.meta.createdAt, createdAt: data.meta.createdAt,
ownerDID: data.meta.ownerDID, ownerDID: data.meta.ownerDID,
shapeCount, shapeCount,
@ -622,7 +622,7 @@ spaces.patch("/:slug", async (c) => {
const body = await c.req.json<{ name?: string; visibility?: SpaceVisibility; description?: string }>(); const body = await c.req.json<{ name?: string; visibility?: SpaceVisibility; description?: string }>();
if (body.visibility) { if (body.visibility) {
const valid: SpaceVisibility[] = ["public", "public_read", "authenticated", "members_only"]; const valid: SpaceVisibility[] = ["public", "permissioned", "private"];
if (!valid.includes(body.visibility)) { if (!valid.includes(body.visibility)) {
return c.json({ error: `Invalid visibility. Must be one of: ${valid.join(", ")}` }, 400); return c.json({ error: `Invalid visibility. Must be one of: ${valid.join(", ")}` }, 400);
} }

5
website/canvas.html
View File

@ -1136,6 +1136,7 @@
folk-choice-vote, folk-choice-vote,
folk-choice-rank, folk-choice-rank,
folk-choice-spider, folk-choice-spider,
folk-choice-conviction,
folk-social-post, folk-social-post,
folk-splat, folk-splat,
folk-blender, folk-blender,
@ -1153,7 +1154,7 @@
folk-video-chat, folk-obs-note, folk-workflow-block, folk-video-chat, folk-obs-note, folk-workflow-block,
folk-itinerary, folk-destination, folk-budget, folk-packing-list, folk-itinerary, folk-destination, folk-budget, folk-packing-list,
folk-booking, folk-token-mint, folk-token-ledger, folk-booking, folk-token-mint, folk-token-ledger,
folk-choice-vote, folk-choice-rank, folk-choice-spider, folk-choice-vote, folk-choice-rank, folk-choice-spider, folk-choice-conviction,
folk-social-post, folk-splat, folk-blender, folk-drawfast, folk-social-post, folk-splat, folk-blender, folk-drawfast,
folk-freecad, folk-kicad, folk-zine-gen, folk-rapp) { folk-freecad, folk-kicad, folk-zine-gen, folk-rapp) {
cursor: crosshair; cursor: crosshair;
@ -1165,7 +1166,7 @@
folk-video-chat, folk-obs-note, folk-workflow-block, folk-video-chat, folk-obs-note, folk-workflow-block,
folk-itinerary, folk-destination, folk-budget, folk-packing-list, folk-itinerary, folk-destination, folk-budget, folk-packing-list,
folk-booking, folk-token-mint, folk-token-ledger, folk-booking, folk-token-mint, folk-token-ledger,
folk-choice-vote, folk-choice-rank, folk-choice-spider, folk-choice-vote, folk-choice-rank, folk-choice-spider, folk-choice-conviction,
folk-social-post, folk-splat, folk-blender, folk-drawfast, folk-social-post, folk-splat, folk-blender, folk-drawfast,
folk-freecad, folk-kicad, folk-zine-gen, folk-rapp):hover { folk-freecad, folk-kicad, folk-zine-gen, folk-rapp):hover {
outline: 2px dashed #3b82f6; outline: 2px dashed #3b82f6;