feat: add 13 new modules — complete r-suite platform unification
Port all remaining r-suite apps as rSpace modules:
Batch 1: vote, notes, maps, wallet
- rVote: conviction voting engine with quadratic credit costs
- rNotes: markdown note-taking with notebooks and tags
- rMaps: interactive map viewer with markers and routes
- rWallet: multi-chain crypto wallet viewer (Safe Global API)
Batch 2: work, trips, cal, network
- rWork: kanban board with configurable status columns
- rTrips: trip planner with destinations, itinerary, expenses, packing
- rCal: calendar with lunar phase computation and cross-module linking
- rNetwork: graph visualization placeholder (Automerge + CRM proxy)
Batch 3: tube, inbox, data
- rTube: video library + HLS live streaming (Cloudflare R2)
- rInbox: collaborative email with multisig approval workflow
- rData: privacy-first analytics dashboard (Umami proxy)
All 21 modules registered, built, deployed, and verified at
rspace.online/demo/{moduleId}. Each module has:
- mod.ts (Hono routes + RSpaceModule export)
- standalone.ts (independent deployment)
- folk-* web component (Shadow DOM, no framework)
- CSS + DB schema (where needed)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett
parent
682c995cc3
commit
fa740e09ca
|
|
@ -0,0 +1,6 @@
|
|||
/* Cal module — dark theme */
|
||||
folk-calendar-view {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
/**
|
||||
* <folk-calendar-view> — temporal coordination calendar.
|
||||
*
|
||||
* Month grid view with event dots, lunar phase overlay,
|
||||
* event creation, and source filtering.
|
||||
*/
|
||||
|
||||
class FolkCalendarView extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private currentDate = new Date();
|
||||
private events: any[] = [];
|
||||
private sources: any[] = [];
|
||||
private lunarData: Record<string, { phase: string; illumination: number }> = {};
|
||||
private showLunar = true;
|
||||
private selectedDate = "";
|
||||
private selectedEvent: any = null;
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadMonth();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/cal/);
|
||||
return match ? `/${match[1]}/cal` : "";
|
||||
}
|
||||
|
||||
private async loadMonth() {
|
||||
const year = this.currentDate.getFullYear();
|
||||
const month = this.currentDate.getMonth();
|
||||
const start = `${year}-${String(month + 1).padStart(2, "0")}-01`;
|
||||
const lastDay = new Date(year, month + 1, 0).getDate();
|
||||
const end = `${year}-${String(month + 1).padStart(2, "0")}-${String(lastDay).padStart(2, "0")}`;
|
||||
|
||||
const base = this.getApiBase();
|
||||
try {
|
||||
const [eventsRes, sourcesRes, lunarRes] = await Promise.all([
|
||||
fetch(`${base}/api/events?start=${start}&end=${end}`),
|
||||
fetch(`${base}/api/sources`),
|
||||
fetch(`${base}/api/lunar?start=${start}&end=${end}`),
|
||||
]);
|
||||
if (eventsRes.ok) { const data = await eventsRes.json(); this.events = data.results || []; }
|
||||
if (sourcesRes.ok) { const data = await sourcesRes.json(); this.sources = data.results || []; }
|
||||
if (lunarRes.ok) { this.lunarData = await lunarRes.json(); }
|
||||
} catch { /* offline fallback */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private navigate(delta: number) {
|
||||
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + delta, 1);
|
||||
this.loadMonth();
|
||||
}
|
||||
|
||||
private getMoonEmoji(phase: string): string {
|
||||
const map: Record<string, string> = {
|
||||
new_moon: "\u{1F311}", waxing_crescent: "\u{1F312}", first_quarter: "\u{1F313}",
|
||||
waxing_gibbous: "\u{1F314}", full_moon: "\u{1F315}", waning_gibbous: "\u{1F316}",
|
||||
last_quarter: "\u{1F317}", waning_crescent: "\u{1F318}",
|
||||
};
|
||||
return map[phase] || "";
|
||||
}
|
||||
|
||||
private render() {
|
||||
const year = this.currentDate.getFullYear();
|
||||
const month = this.currentDate.getMonth();
|
||||
const monthName = this.currentDate.toLocaleString("default", { month: "long" });
|
||||
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
|
||||
.nav-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 16px; }
|
||||
.nav-btn:hover { border-color: #666; }
|
||||
.header-title { font-size: 18px; font-weight: 600; flex: 1; text-align: center; }
|
||||
.toggle-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 12px; }
|
||||
.toggle-btn.active { border-color: #6366f1; color: #6366f1; }
|
||||
.create-btn { padding: 6px 14px; border-radius: 6px; border: none; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 12px; }
|
||||
|
||||
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
|
||||
.weekday { text-align: center; font-size: 11px; color: #666; padding: 4px; font-weight: 600; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
|
||||
.day {
|
||||
background: #16161e; border: 1px solid #222; border-radius: 6px;
|
||||
min-height: 80px; padding: 6px; cursor: pointer; position: relative;
|
||||
}
|
||||
.day:hover { border-color: #444; }
|
||||
.day.today { border-color: #6366f1; }
|
||||
.day.other-month { opacity: 0.3; }
|
||||
.day-num { font-size: 12px; font-weight: 600; margin-bottom: 2px; display: flex; justify-content: space-between; }
|
||||
.moon { font-size: 10px; opacity: 0.7; }
|
||||
.event-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 1px; }
|
||||
.event-dots { display: flex; flex-wrap: wrap; gap: 1px; }
|
||||
.event-label { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; line-height: 1.4; }
|
||||
|
||||
.event-modal {
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000;
|
||||
}
|
||||
.modal-content { background: #1e1e2e; border: 1px solid #333; border-radius: 12px; padding: 20px; max-width: 400px; width: 90%; }
|
||||
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
|
||||
.modal-field { font-size: 13px; color: #aaa; margin-bottom: 6px; }
|
||||
.modal-close { float: right; background: none; border: none; color: #888; font-size: 18px; cursor: pointer; }
|
||||
|
||||
.sources { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
|
||||
.source-badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; border: 1px solid #333; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div style="color:#ef5350;text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
|
||||
|
||||
<div class="header">
|
||||
<button class="nav-btn" id="prev">\u2190</button>
|
||||
<span class="header-title">${monthName} ${year}</span>
|
||||
<button class="toggle-btn ${this.showLunar ? "active" : ""}" id="toggle-lunar">\u{1F319} Lunar</button>
|
||||
<button class="nav-btn" id="next">\u2192</button>
|
||||
</div>
|
||||
|
||||
${this.sources.length > 0 ? `<div class="sources">
|
||||
${this.sources.map(s => `<span class="source-badge" style="border-color:${s.color || "#666"};color:${s.color || "#aaa"}">${this.esc(s.name)}</span>`).join("")}
|
||||
</div>` : ""}
|
||||
|
||||
<div class="weekdays">
|
||||
${["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(d => `<div class="weekday">${d}</div>`).join("")}
|
||||
</div>
|
||||
<div class="grid">
|
||||
${this.renderDays(year, month)}
|
||||
</div>
|
||||
|
||||
${this.selectedEvent ? this.renderEventModal() : ""}
|
||||
`;
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderDays(year: number, month: number): string {
|
||||
const firstDay = new Date(year, month, 1).getDay();
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
const today = new Date();
|
||||
const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
||||
|
||||
let html = "";
|
||||
// Previous month padding
|
||||
const prevDays = new Date(year, month, 0).getDate();
|
||||
for (let i = firstDay - 1; i >= 0; i--) {
|
||||
html += `<div class="day other-month"><div class="day-num">${prevDays - i}</div></div>`;
|
||||
}
|
||||
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
|
||||
const isToday = dateStr === todayStr;
|
||||
const dayEvents = this.events.filter(e => e.start_time && e.start_time.startsWith(dateStr));
|
||||
const lunar = this.lunarData[dateStr];
|
||||
|
||||
html += `<div class="day ${isToday ? "today" : ""}" data-date="${dateStr}">
|
||||
<div class="day-num">
|
||||
<span>${d}</span>
|
||||
${this.showLunar && lunar ? `<span class="moon">${this.getMoonEmoji(lunar.phase)}</span>` : ""}
|
||||
</div>
|
||||
${dayEvents.length > 0 ? `
|
||||
<div class="event-dots">
|
||||
${dayEvents.slice(0, 3).map(e => `<span class="event-dot" style="background:${e.source_color || "#6366f1"}"></span>`).join("")}
|
||||
${dayEvents.length > 3 ? `<span style="font-size:9px;color:#888">+${dayEvents.length - 3}</span>` : ""}
|
||||
</div>
|
||||
${dayEvents.slice(0, 2).map(e => `<div class="event-label" data-event='${JSON.stringify({ id: e.id })}'>${this.esc(e.title)}</div>`).join("")}
|
||||
` : ""}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// Next month padding
|
||||
const totalCells = firstDay + daysInMonth;
|
||||
const remaining = (7 - (totalCells % 7)) % 7;
|
||||
for (let i = 1; i <= remaining; i++) {
|
||||
html += `<div class="day other-month"><div class="day-num">${i}</div></div>`;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
private renderEventModal(): string {
|
||||
const e = this.selectedEvent;
|
||||
return `
|
||||
<div class="event-modal" id="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="modal-close">\u2715</button>
|
||||
<div class="modal-title">${this.esc(e.title)}</div>
|
||||
${e.description ? `<div class="modal-field">${this.esc(e.description)}</div>` : ""}
|
||||
<div class="modal-field">When: ${new Date(e.start_time).toLocaleString()}${e.end_time ? ` \u2014 ${new Date(e.end_time).toLocaleString()}` : ""}</div>
|
||||
${e.location_name ? `<div class="modal-field">Where: ${this.esc(e.location_name)}</div>` : ""}
|
||||
${e.source_name ? `<div class="modal-field">Source: ${this.esc(e.source_name)}</div>` : ""}
|
||||
${e.is_virtual ? `<div class="modal-field">Virtual: ${this.esc(e.virtual_platform || "")} ${e.virtual_url ? `<a href="${e.virtual_url}" target="_blank" style="color:#6366f1">Join</a>` : ""}</div>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
this.shadow.getElementById("prev")?.addEventListener("click", () => this.navigate(-1));
|
||||
this.shadow.getElementById("next")?.addEventListener("click", () => this.navigate(1));
|
||||
this.shadow.getElementById("toggle-lunar")?.addEventListener("click", () => {
|
||||
this.showLunar = !this.showLunar;
|
||||
this.render();
|
||||
});
|
||||
|
||||
this.shadow.querySelectorAll("[data-event]").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const data = JSON.parse((el as HTMLElement).dataset.event!);
|
||||
this.selectedEvent = this.events.find(ev => ev.id === data.id);
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
this.shadow.getElementById("modal-overlay")?.addEventListener("click", (e) => {
|
||||
if ((e.target as HTMLElement).id === "modal-overlay") { this.selectedEvent = null; this.render(); }
|
||||
});
|
||||
this.shadow.getElementById("modal-close")?.addEventListener("click", () => {
|
||||
this.selectedEvent = null; this.render();
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-calendar-view", FolkCalendarView);
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
-- rCal module schema
|
||||
CREATE SCHEMA IF NOT EXISTS rcal;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rcal.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rcal.calendar_sources (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
name TEXT NOT NULL,
|
||||
source_type TEXT NOT NULL CHECK (source_type IN ('MANUAL','ICS','CALDAV','GOOGLE','OUTLOOK','APPLE','OBSIDIAN')),
|
||||
url TEXT,
|
||||
color TEXT DEFAULT '#6366f1',
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
is_visible BOOLEAN DEFAULT TRUE,
|
||||
sync_interval_minutes INT DEFAULT 60,
|
||||
last_synced_at TIMESTAMPTZ,
|
||||
owner_id UUID REFERENCES rcal.users(id),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rcal.locations (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
name TEXT NOT NULL,
|
||||
granularity INT NOT NULL DEFAULT 5,
|
||||
lat DOUBLE PRECISION,
|
||||
lng DOUBLE PRECISION,
|
||||
parent_id UUID REFERENCES rcal.locations(id),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rcal.events (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
title TEXT NOT NULL,
|
||||
description TEXT,
|
||||
start_time TIMESTAMPTZ NOT NULL,
|
||||
end_time TIMESTAMPTZ,
|
||||
all_day BOOLEAN DEFAULT FALSE,
|
||||
timezone TEXT DEFAULT 'UTC',
|
||||
rrule TEXT,
|
||||
status TEXT DEFAULT 'CONFIRMED' CHECK (status IN ('TENTATIVE','CONFIRMED','CANCELLED')),
|
||||
visibility TEXT DEFAULT 'DEFAULT' CHECK (visibility IN ('PUBLIC','PRIVATE','DEFAULT')),
|
||||
source_id UUID REFERENCES rcal.calendar_sources(id) ON DELETE SET NULL,
|
||||
location_id UUID REFERENCES rcal.locations(id) ON DELETE SET NULL,
|
||||
location_name TEXT,
|
||||
coordinates POINT,
|
||||
location_granularity INT,
|
||||
is_virtual BOOLEAN DEFAULT FALSE,
|
||||
virtual_url TEXT,
|
||||
virtual_platform TEXT,
|
||||
r_tool_source TEXT,
|
||||
r_tool_entity_id TEXT,
|
||||
attendees TEXT[] DEFAULT '{}',
|
||||
attendee_count INT DEFAULT 0,
|
||||
metadata JSONB DEFAULT '{}',
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_rcal_events_time ON rcal.events(start_time, end_time);
|
||||
CREATE INDEX IF NOT EXISTS idx_rcal_events_source ON rcal.events(source_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_rcal_events_rtool ON rcal.events(r_tool_source, r_tool_entity_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_rcal_locations_parent ON rcal.locations(parent_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_rcal_sources_owner ON rcal.calendar_sources(owner_id);
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
/**
|
||||
* Cal module — temporal coordination calendar.
|
||||
*
|
||||
* Group calendars with lunar/solar/seasonal time systems,
|
||||
* location-aware events, and temporal-spatial zoom coupling.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Cal] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Cal] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── API: Events ──
|
||||
|
||||
// GET /api/events — query events with filters
|
||||
routes.get("/api/events", async (c) => {
|
||||
const { start, end, source, search, rTool, rEntityId, upcoming } = c.req.query();
|
||||
|
||||
let where = "WHERE 1=1";
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (start) { where += ` AND e.start_time >= $${idx}`; params.push(start); idx++; }
|
||||
if (end) { where += ` AND e.start_time <= ($${idx}::date + interval '1 day')`; params.push(end); idx++; }
|
||||
if (source) { where += ` AND e.source_id = $${idx}`; params.push(source); idx++; }
|
||||
if (search) { where += ` AND (e.title ILIKE $${idx} OR e.description ILIKE $${idx})`; params.push(`%${search}%`); idx++; }
|
||||
if (rTool) { where += ` AND e.r_tool_source = $${idx}`; params.push(rTool); idx++; }
|
||||
if (rEntityId) { where += ` AND e.r_tool_entity_id = $${idx}`; params.push(rEntityId); idx++; }
|
||||
if (upcoming) {
|
||||
where += ` AND e.start_time >= NOW() AND e.start_time <= NOW() + ($${idx} || ' days')::interval`;
|
||||
params.push(upcoming);
|
||||
idx++;
|
||||
}
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT e.*, cs.name as source_name, cs.color as source_color, l.name as location_label
|
||||
FROM rcal.events e
|
||||
LEFT JOIN rcal.calendar_sources cs ON cs.id = e.source_id
|
||||
LEFT JOIN rcal.locations l ON l.id = e.location_id
|
||||
${where}
|
||||
ORDER BY e.start_time ASC LIMIT 500`,
|
||||
params
|
||||
);
|
||||
return c.json({ count: rows.length, results: rows });
|
||||
});
|
||||
|
||||
// POST /api/events — create event
|
||||
routes.post("/api/events", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { title, description, start_time, end_time, all_day, timezone, source_id, location_id, location_name,
|
||||
is_virtual, virtual_url, virtual_platform, r_tool_source, r_tool_entity_id } = body;
|
||||
if (!title?.trim() || !start_time) return c.json({ error: "Title and start_time required" }, 400);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rcal.events (title, description, start_time, end_time, all_day, timezone, source_id,
|
||||
location_id, location_name, is_virtual, virtual_url, virtual_platform, r_tool_source, r_tool_entity_id)
|
||||
VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14) RETURNING *`,
|
||||
[title.trim(), description || null, start_time, end_time || null, all_day || false, timezone || "UTC",
|
||||
source_id || null, location_id || null, location_name || null, is_virtual || false,
|
||||
virtual_url || null, virtual_platform || null, r_tool_source || null, r_tool_entity_id || null]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/events/:id
|
||||
routes.get("/api/events/:id", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT e.*, cs.name as source_name, cs.color as source_color
|
||||
FROM rcal.events e LEFT JOIN rcal.calendar_sources cs ON cs.id = e.source_id
|
||||
WHERE e.id = $1`,
|
||||
[c.req.param("id")]
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Event not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// PATCH /api/events/:id
|
||||
routes.patch("/api/events/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
const allowed = ["title", "description", "start_time", "end_time", "all_day", "timezone",
|
||||
"status", "visibility", "location_name", "is_virtual", "virtual_url"];
|
||||
|
||||
for (const key of allowed) {
|
||||
if (body[key] !== undefined) {
|
||||
fields.push(`${key} = $${idx}`);
|
||||
params.push(body[key]);
|
||||
idx++;
|
||||
}
|
||||
}
|
||||
|
||||
if (fields.length === 0) return c.json({ error: "No fields" }, 400);
|
||||
fields.push("updated_at = NOW()");
|
||||
params.push(id);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rcal.events SET ${fields.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// DELETE /api/events/:id
|
||||
routes.delete("/api/events/:id", async (c) => {
|
||||
const result = await sql.unsafe("DELETE FROM rcal.events WHERE id = $1 RETURNING id", [c.req.param("id")]);
|
||||
if (result.length === 0) return c.json({ error: "Not found" }, 404);
|
||||
return c.json({ ok: true });
|
||||
});
|
||||
|
||||
// ── API: Sources ──
|
||||
|
||||
routes.get("/api/sources", async (c) => {
|
||||
const { is_active, is_visible, source_type } = c.req.query();
|
||||
let where = "WHERE 1=1";
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (is_active !== undefined) { where += ` AND is_active = $${idx}`; params.push(is_active === "true"); idx++; }
|
||||
if (is_visible !== undefined) { where += ` AND is_visible = $${idx}`; params.push(is_visible === "true"); idx++; }
|
||||
if (source_type) { where += ` AND source_type = $${idx}`; params.push(source_type); idx++; }
|
||||
|
||||
const rows = await sql.unsafe(`SELECT * FROM rcal.calendar_sources ${where} ORDER BY name`, params);
|
||||
return c.json({ count: rows.length, results: rows });
|
||||
});
|
||||
|
||||
routes.post("/api/sources", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rcal.calendar_sources (name, source_type, url, color, is_active, is_visible)
|
||||
VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`,
|
||||
[body.name, body.source_type || "MANUAL", body.url || null, body.color || "#6366f1",
|
||||
body.is_active ?? true, body.is_visible ?? true]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── API: Locations ──
|
||||
|
||||
routes.get("/api/locations", async (c) => {
|
||||
const { granularity, parent, search, root } = c.req.query();
|
||||
let where = "WHERE 1=1";
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (root === "true") { where += " AND parent_id IS NULL"; }
|
||||
if (granularity) { where += ` AND granularity = $${idx}`; params.push(parseInt(granularity)); idx++; }
|
||||
if (parent) { where += ` AND parent_id = $${idx}`; params.push(parent); idx++; }
|
||||
if (search) { where += ` AND name ILIKE $${idx}`; params.push(`%${search}%`); idx++; }
|
||||
|
||||
const rows = await sql.unsafe(`SELECT * FROM rcal.locations ${where} ORDER BY name`, params);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
routes.get("/api/locations/tree", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
`WITH RECURSIVE tree AS (
|
||||
SELECT id, name, granularity, parent_id, 0 as depth FROM rcal.locations WHERE parent_id IS NULL
|
||||
UNION ALL
|
||||
SELECT l.id, l.name, l.granularity, l.parent_id, t.depth + 1
|
||||
FROM rcal.locations l JOIN tree t ON l.parent_id = t.id
|
||||
)
|
||||
SELECT * FROM tree ORDER BY depth, name`
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// ── API: Lunar data (computed, not stored) ──
|
||||
|
||||
routes.get("/api/lunar", async (c) => {
|
||||
const { start, end } = c.req.query();
|
||||
if (!start || !end) return c.json({ error: "start and end required" }, 400);
|
||||
|
||||
// Simple lunar phase approximation based on synodic month
|
||||
const SYNODIC_MONTH = 29.53059;
|
||||
const KNOWN_NEW_MOON = new Date("2024-01-11T11:57:00Z").getTime();
|
||||
const phases: Record<string, { phase: string; illumination: number }> = {};
|
||||
|
||||
const startDate = new Date(start);
|
||||
const endDate = new Date(end);
|
||||
const current = new Date(startDate);
|
||||
|
||||
while (current <= endDate) {
|
||||
const daysSinceNewMoon = (current.getTime() - KNOWN_NEW_MOON) / (1000 * 60 * 60 * 24);
|
||||
const lunation = ((daysSinceNewMoon % SYNODIC_MONTH) + SYNODIC_MONTH) % SYNODIC_MONTH;
|
||||
const fraction = lunation / SYNODIC_MONTH;
|
||||
const illumination = 0.5 * (1 - Math.cos(2 * Math.PI * fraction));
|
||||
|
||||
let phase = "waxing_crescent";
|
||||
if (fraction < 0.0625) phase = "new_moon";
|
||||
else if (fraction < 0.1875) phase = "waxing_crescent";
|
||||
else if (fraction < 0.3125) phase = "first_quarter";
|
||||
else if (fraction < 0.4375) phase = "waxing_gibbous";
|
||||
else if (fraction < 0.5625) phase = "full_moon";
|
||||
else if (fraction < 0.6875) phase = "waning_gibbous";
|
||||
else if (fraction < 0.8125) phase = "last_quarter";
|
||||
else if (fraction < 0.9375) phase = "waning_crescent";
|
||||
else phase = "new_moon";
|
||||
|
||||
phases[current.toISOString().split("T")[0]] = { phase, illumination: Math.round(illumination * 100) / 100 };
|
||||
current.setDate(current.getDate() + 1);
|
||||
}
|
||||
|
||||
return c.json(phases);
|
||||
});
|
||||
|
||||
// ── API: Stats ──
|
||||
|
||||
routes.get("/api/stats", async (c) => {
|
||||
const [eventCount, sourceCount, locationCount] = await Promise.all([
|
||||
sql.unsafe("SELECT count(*)::int as cnt FROM rcal.events"),
|
||||
sql.unsafe("SELECT count(*)::int as cnt FROM rcal.calendar_sources WHERE is_active = true"),
|
||||
sql.unsafe("SELECT count(*)::int as cnt FROM rcal.locations"),
|
||||
]);
|
||||
return c.json({
|
||||
events: eventCount[0]?.cnt || 0,
|
||||
sources: sourceCount[0]?.cnt || 0,
|
||||
locations: locationCount[0]?.cnt || 0,
|
||||
});
|
||||
});
|
||||
|
||||
// ── API: Context (r* tool bridge) ──
|
||||
|
||||
routes.get("/api/context/:tool", async (c) => {
|
||||
const tool = c.req.param("tool");
|
||||
const entityId = c.req.query("entityId");
|
||||
if (!entityId) return c.json({ error: "entityId required" }, 400);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
"SELECT * FROM rcal.events WHERE r_tool_source = $1 AND r_tool_entity_id = $2 ORDER BY start_time",
|
||||
[tool, entityId]
|
||||
);
|
||||
return c.json({ count: rows.length, results: rows });
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Calendar | rSpace`,
|
||||
moduleId: "cal",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/cal/cal.css">`,
|
||||
body: `<folk-calendar-view space="${space}"></folk-calendar-view>`,
|
||||
scripts: `<script type="module" src="/modules/cal/folk-calendar-view.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const calModule: RSpaceModule = {
|
||||
id: "cal",
|
||||
name: "rCal",
|
||||
icon: "\u{1F4C5}",
|
||||
description: "Temporal coordination calendar with lunar, solar, and seasonal systems",
|
||||
routes,
|
||||
standaloneDomain: "rcal.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Cal module.
|
||||
* Serves rcal.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { calModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/cal/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", calModule.routes);
|
||||
|
||||
console.log(`[rCal Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* Data module — layout wrapper */
|
||||
folk-analytics-view {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
/**
|
||||
* folk-analytics-view — Privacy-first analytics dashboard overview.
|
||||
*
|
||||
* Shows tracked apps, stats, and a link to the full Umami dashboard.
|
||||
*/
|
||||
|
||||
class FolkAnalyticsView extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "demo";
|
||||
private stats: any = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadStats();
|
||||
}
|
||||
|
||||
private async loadStats() {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const resp = await fetch(`${base}/api/stats`);
|
||||
if (resp.ok) {
|
||||
this.stats = await resp.json();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private render() {
|
||||
const stats = this.stats || { trackedApps: 17, cookiesSet: 0, scriptSize: "~2KB", selfHosted: true, apps: [], dashboardUrl: "https://analytics.rspace.online" };
|
||||
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: #e2e8f0; }
|
||||
.container { max-width: 800px; margin: 0 auto; }
|
||||
.hero { text-align: center; margin-bottom: 2rem; }
|
||||
.hero h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
|
||||
.hero p { color: #94a3b8; max-width: 480px; margin: 0 auto; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
|
||||
.stat { text-align: center; background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.25rem; }
|
||||
.stat-value { font-size: 1.75rem; font-weight: 700; color: #22d3ee; }
|
||||
.stat-label { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
|
||||
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
|
||||
.pillar { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; }
|
||||
.pillar-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
|
||||
.pillar-icon.zk { background: rgba(34,211,238,0.1); color: #22d3ee; }
|
||||
.pillar-icon.lf { background: rgba(129,140,248,0.1); color: #818cf8; }
|
||||
.pillar-icon.sh { background: rgba(52,211,153,0.1); color: #34d399; }
|
||||
.pillar h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.pillar p { font-size: 0.85rem; color: #94a3b8; line-height: 1.5; }
|
||||
.apps-section { margin-bottom: 2rem; }
|
||||
.apps-title { text-align: center; font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
|
||||
.apps-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
|
||||
.app-chip { padding: 0.35rem 0.75rem; background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 20px; font-size: 0.8rem; color: #94a3b8; }
|
||||
.cta { text-align: center; padding: 2rem; border-top: 1px solid #1e293b; }
|
||||
.cta a { display: inline-block; padding: 0.75rem 2rem; background: #22d3ee; color: #0f172a; border-radius: 8px; font-weight: 600; text-decoration: none; }
|
||||
.cta a:hover { opacity: 0.85; }
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.pillars { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h2>Privacy-First Analytics</h2>
|
||||
<p>Zero-knowledge, cookieless, self-hosted analytics for the r* ecosystem. Know how your tools are used without compromising anyone's privacy.</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-value">${stats.trackedApps}</div>
|
||||
<div class="stat-label">Apps Tracked</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">${stats.cookiesSet}</div>
|
||||
<div class="stat-label">Cookies Set</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">${stats.scriptSize}</div>
|
||||
<div class="stat-label">Script Size</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">100%</div>
|
||||
<div class="stat-label">Self-Hosted</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pillars">
|
||||
<div class="pillar">
|
||||
<div class="pillar-icon zk">ZK</div>
|
||||
<h3>Zero-Knowledge Privacy</h3>
|
||||
<p>No cookies. No fingerprinting. No personal data. Each page view is anonymous. GDPR compliant by architecture.</p>
|
||||
</div>
|
||||
<div class="pillar">
|
||||
<div class="pillar-icon lf">LF</div>
|
||||
<h3>Local-First Data</h3>
|
||||
<p>Analytics data never leaves your infrastructure. No third-party servers, no cloud dependencies.</p>
|
||||
</div>
|
||||
<div class="pillar">
|
||||
<div class="pillar-icon sh">SH</div>
|
||||
<h3>Self-Hosted</h3>
|
||||
<p>Full control over data retention, access, and lifecycle. Powered by Umami.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="apps-section">
|
||||
<div class="apps-title">Tracking the r* Ecosystem</div>
|
||||
<div class="apps-grid">
|
||||
${(stats.apps || []).map((a: string) => `<span class="app-chip">${a}</span>`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta">
|
||||
<a href="${stats.dashboardUrl}" target="_blank" rel="noopener">Open Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-analytics-view", FolkAnalyticsView);
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* Data module — privacy-first analytics dashboard.
|
||||
*
|
||||
* Lightweight module that shows analytics stats from the
|
||||
* self-hosted Umami instance. No database — proxies to Umami API.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
const UMAMI_URL = process.env.UMAMI_URL || "https://analytics.rspace.online";
|
||||
|
||||
// ── API routes ──
|
||||
|
||||
// GET /api/info — module info
|
||||
routes.get("/api/info", (c) => {
|
||||
return c.json({
|
||||
module: "data",
|
||||
name: "rData",
|
||||
umamiUrl: UMAMI_URL,
|
||||
features: ["privacy-first", "cookieless", "self-hosted"],
|
||||
trackedApps: 17,
|
||||
});
|
||||
});
|
||||
|
||||
// GET /api/health
|
||||
routes.get("/api/health", (c) => c.json({ ok: true }));
|
||||
|
||||
// GET /api/stats — summary stats (placeholder until Umami API is wired)
|
||||
routes.get("/api/stats", (c) => {
|
||||
return c.json({
|
||||
trackedApps: 17,
|
||||
cookiesSet: 0,
|
||||
scriptSize: "~2KB",
|
||||
selfHosted: true,
|
||||
dashboardUrl: UMAMI_URL,
|
||||
apps: [
|
||||
"rSpace", "rNotes", "rVote", "rFunds", "rCart", "rWallet",
|
||||
"rPubs", "rChoices", "rCal", "rForum", "rInbox", "rFiles",
|
||||
"rTrips", "rTube", "rWork", "rNetwork", "rData",
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Data | rSpace`,
|
||||
moduleId: "data",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/data/data.css">`,
|
||||
body: `<folk-analytics-view space="${space}"></folk-analytics-view>`,
|
||||
scripts: `<script type="module" src="/modules/data/folk-analytics-view.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const dataModule: RSpaceModule = {
|
||||
id: "data",
|
||||
name: "rData",
|
||||
icon: "\u{1F4CA}",
|
||||
description: "Privacy-first analytics for the r* ecosystem",
|
||||
routes,
|
||||
standaloneDomain: "rdata.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Data module.
|
||||
* Serves rdata.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { dataModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/data/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", dataModule.routes);
|
||||
|
||||
console.log(`[rData Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
/**
|
||||
* folk-inbox-client — Collaborative email client.
|
||||
*
|
||||
* Shows mailbox list, thread inbox, thread detail with comments,
|
||||
* and approval workflow interface.
|
||||
*/
|
||||
|
||||
class FolkInboxClient extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "demo";
|
||||
private view: "mailboxes" | "threads" | "thread" | "approvals" = "mailboxes";
|
||||
private mailboxes: any[] = [];
|
||||
private threads: any[] = [];
|
||||
private currentMailbox: any = null;
|
||||
private currentThread: any = null;
|
||||
private approvals: any[] = [];
|
||||
private filter: "all" | "open" | "snoozed" | "closed" = "all";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadMailboxes();
|
||||
}
|
||||
|
||||
private async loadMailboxes() {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const resp = await fetch(`${base}/api/mailboxes`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
this.mailboxes = data.mailboxes || [];
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadThreads(slug: string) {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const status = this.filter === "all" ? "" : `?status=${this.filter}`;
|
||||
const resp = await fetch(`${base}/api/mailboxes/${slug}/threads${status}`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
this.threads = data.threads || [];
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadThread(id: string) {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const resp = await fetch(`${base}/api/threads/${id}`);
|
||||
if (resp.ok) {
|
||||
this.currentThread = await resp.json();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadApprovals() {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const q = this.currentMailbox ? `?mailbox=${this.currentMailbox.slug}` : "";
|
||||
const resp = await fetch(`${base}/api/approvals${q}`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
this.approvals = data.approvals || [];
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private timeAgo(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: #e2e8f0; }
|
||||
.container { max-width: 1000px; margin: 0 auto; }
|
||||
.nav { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; align-items: center; }
|
||||
.nav-btn { padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.8rem; }
|
||||
.nav-btn.active { background: #6366f1; color: white; border-color: #6366f1; }
|
||||
.back-btn { padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.8rem; margin-right: 0.5rem; }
|
||||
.back-btn:hover { background: rgba(51,65,85,0.5); }
|
||||
.card { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.25rem; margin-bottom: 0.75rem; cursor: pointer; transition: border-color 0.2s; }
|
||||
.card:hover { border-color: #6366f1; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
|
||||
.card-title { font-weight: 600; font-size: 0.95rem; }
|
||||
.card-meta { font-size: 0.75rem; color: #64748b; }
|
||||
.card-desc { font-size: 0.85rem; color: #94a3b8; }
|
||||
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
|
||||
.badge-open { background: rgba(34,197,94,0.15); color: #4ade80; }
|
||||
.badge-snoozed { background: rgba(251,191,36,0.15); color: #fbbf24; }
|
||||
.badge-closed { background: rgba(100,116,139,0.15); color: #94a3b8; }
|
||||
.badge-pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
|
||||
.badge-approved { background: rgba(34,197,94,0.15); color: #4ade80; }
|
||||
.thread-row { display: flex; gap: 1rem; align-items: flex-start; padding: 0.75rem 1rem; border-bottom: 1px solid #1e293b; cursor: pointer; }
|
||||
.thread-row:hover { background: rgba(51,65,85,0.3); }
|
||||
.thread-row.unread { font-weight: 600; }
|
||||
.thread-from { width: 180px; font-size: 0.85rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.thread-subject { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.thread-time { font-size: 0.75rem; color: #64748b; flex-shrink: 0; }
|
||||
.thread-indicators { display: flex; gap: 0.25rem; flex-shrink: 0; }
|
||||
.star { color: #fbbf24; font-size: 0.75rem; }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; flex-shrink: 0; margin-top: 0.35rem; }
|
||||
.inbox-list { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; overflow: hidden; }
|
||||
.filter-bar { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid #1e293b; }
|
||||
.filter-btn { padding: 0.25rem 0.75rem; border-radius: 6px; border: none; background: transparent; color: #64748b; cursor: pointer; font-size: 0.75rem; }
|
||||
.filter-btn.active { background: rgba(99,102,241,0.15); color: #818cf8; }
|
||||
.detail-panel { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; }
|
||||
.detail-header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #1e293b; }
|
||||
.detail-subject { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
|
||||
.detail-meta { font-size: 0.8rem; color: #64748b; }
|
||||
.detail-body { font-size: 0.9rem; line-height: 1.6; color: #cbd5e1; margin-bottom: 1.5rem; white-space: pre-wrap; }
|
||||
.comments-section { border-top: 1px solid #1e293b; padding-top: 1rem; }
|
||||
.comments-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; color: #94a3b8; }
|
||||
.comment { padding: 0.75rem; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 0.5rem; }
|
||||
.comment-author { font-size: 0.8rem; font-weight: 600; color: #818cf8; }
|
||||
.comment-body { font-size: 0.85rem; color: #cbd5e1; margin-top: 0.25rem; }
|
||||
.comment-time { font-size: 0.7rem; color: #475569; margin-top: 0.25rem; }
|
||||
.empty { text-align: center; padding: 3rem; color: #64748b; }
|
||||
.approval-card { padding: 1rem; margin-bottom: 0.75rem; }
|
||||
.approval-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
|
||||
.btn-approve { padding: 0.4rem 1rem; border-radius: 6px; border: none; background: #22c55e; color: white; cursor: pointer; font-size: 0.8rem; }
|
||||
.btn-reject { padding: 0.4rem 1rem; border-radius: 6px; border: none; background: #ef4444; color: white; cursor: pointer; font-size: 0.8rem; }
|
||||
</style>
|
||||
<div class="container">
|
||||
${this.renderNav()}
|
||||
${this.renderView()}
|
||||
</div>
|
||||
`;
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private renderNav(): string {
|
||||
const items = [
|
||||
{ id: "mailboxes", label: "Mailboxes" },
|
||||
{ id: "approvals", label: "Approvals" },
|
||||
];
|
||||
if (this.currentMailbox) {
|
||||
items.unshift({ id: "threads", label: this.currentMailbox.name });
|
||||
}
|
||||
return `
|
||||
<div class="nav">
|
||||
${this.view !== "mailboxes" ? `<button class="back-btn" data-action="back">←</button>` : ""}
|
||||
${items.map((i) => `<button class="nav-btn ${this.view === i.id ? "active" : ""}" data-nav="${i.id}">${i.label}</button>`).join("")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderView(): string {
|
||||
switch (this.view) {
|
||||
case "mailboxes": return this.renderMailboxes();
|
||||
case "threads": return this.renderThreads();
|
||||
case "thread": return this.renderThreadDetail();
|
||||
case "approvals": return this.renderApprovals();
|
||||
default: return "";
|
||||
}
|
||||
}
|
||||
|
||||
private renderMailboxes(): string {
|
||||
if (this.mailboxes.length === 0) {
|
||||
return `<div class="empty"><p style="font-size:2rem;margin-bottom:1rem">📨</p><p>No mailboxes yet</p><p style="font-size:0.8rem;color:#475569;margin-top:0.5rem">Create a shared mailbox to get started</p></div>`;
|
||||
}
|
||||
return this.mailboxes.map((m) => `
|
||||
<div class="card" data-mailbox="${m.slug}">
|
||||
<div class="card-header">
|
||||
<div class="card-title">${m.name}</div>
|
||||
<span class="card-meta">${m.email}</span>
|
||||
</div>
|
||||
<div class="card-desc">${m.description || "Shared mailbox"}</div>
|
||||
</div>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
private renderThreads(): string {
|
||||
const filters = ["all", "open", "snoozed", "closed"];
|
||||
return `
|
||||
<div class="inbox-list">
|
||||
<div class="filter-bar">
|
||||
${filters.map((f) => `<button class="filter-btn ${this.filter === f ? "active" : ""}" data-filter="${f}">${f.charAt(0).toUpperCase() + f.slice(1)}</button>`).join("")}
|
||||
</div>
|
||||
${this.threads.length === 0
|
||||
? `<div class="empty">No threads</div>`
|
||||
: this.threads.map((t) => `
|
||||
<div class="thread-row ${t.is_read ? "" : "unread"}" data-thread="${t.id}">
|
||||
${t.is_read ? "" : `<span class="dot"></span>`}
|
||||
<span class="thread-from">${t.from_name || t.from_address || "Unknown"}</span>
|
||||
<span class="thread-subject">${t.subject} ${t.comment_count > 0 ? `<span style="color:#64748b;font-weight:400">(${t.comment_count})</span>` : ""}</span>
|
||||
<span class="thread-indicators">
|
||||
${t.is_starred ? `<span class="star">★</span>` : ""}
|
||||
<span class="badge badge-${t.status}">${t.status}</span>
|
||||
</span>
|
||||
<span class="thread-time">${this.timeAgo(t.received_at)}</span>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderThreadDetail(): string {
|
||||
if (!this.currentThread) return `<div class="empty">Loading...</div>`;
|
||||
const t = this.currentThread;
|
||||
const comments = t.comments || [];
|
||||
return `
|
||||
<div class="detail-panel">
|
||||
<div class="detail-header">
|
||||
<div class="detail-subject">${t.subject}</div>
|
||||
<div class="detail-meta">
|
||||
From: ${t.from_name || ""} <${t.from_address || "unknown"}>
|
||||
· ${this.timeAgo(t.received_at)}
|
||||
· <span class="badge badge-${t.status}">${t.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-body">${t.body_text || t.body_html || "(no content)"}</div>
|
||||
<div class="comments-section">
|
||||
<div class="comments-title">Comments (${comments.length})</div>
|
||||
${comments.map((cm: any) => `
|
||||
<div class="comment">
|
||||
<span class="comment-author">${cm.username || "Anonymous"}</span>
|
||||
<span class="comment-time">${this.timeAgo(cm.created_at)}</span>
|
||||
<div class="comment-body">${cm.body}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
${comments.length === 0 ? `<div style="font-size:0.8rem;color:#475569">No comments yet</div>` : ""}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderApprovals(): string {
|
||||
if (this.approvals.length === 0) {
|
||||
return `<div class="empty"><p style="font-size:2rem;margin-bottom:1rem">✅</p><p>No pending approvals</p></div>`;
|
||||
}
|
||||
return this.approvals.map((a) => `
|
||||
<div class="card approval-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">${a.subject}</div>
|
||||
<span class="badge badge-${a.status.toLowerCase()}">${a.status}</span>
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
${a.signature_count || 0} / ${a.required_signatures} signatures
|
||||
· ${this.timeAgo(a.created_at)}
|
||||
</div>
|
||||
${a.status === "PENDING" ? `
|
||||
<div class="approval-actions">
|
||||
<button class="btn-approve" data-approve="${a.id}">Approve</button>
|
||||
<button class="btn-reject" data-reject="${a.id}">Reject</button>
|
||||
</div>
|
||||
` : ""}
|
||||
</div>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
// Navigation
|
||||
this.shadow.querySelectorAll("[data-nav]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const nav = (btn as HTMLElement).dataset.nav as any;
|
||||
if (nav === "approvals") {
|
||||
this.view = "approvals";
|
||||
this.loadApprovals();
|
||||
} else if (nav === "mailboxes") {
|
||||
this.view = "mailboxes";
|
||||
this.currentMailbox = null;
|
||||
this.render();
|
||||
} else if (nav === "threads") {
|
||||
this.view = "threads";
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Back
|
||||
const backBtn = this.shadow.querySelector("[data-action='back']");
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener("click", () => {
|
||||
if (this.view === "thread") {
|
||||
this.view = "threads";
|
||||
this.render();
|
||||
} else if (this.view === "threads" || this.view === "approvals") {
|
||||
this.view = "mailboxes";
|
||||
this.currentMailbox = null;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mailbox click
|
||||
this.shadow.querySelectorAll("[data-mailbox]").forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
const slug = (card as HTMLElement).dataset.mailbox!;
|
||||
this.currentMailbox = this.mailboxes.find((m) => m.slug === slug);
|
||||
this.view = "threads";
|
||||
this.loadThreads(slug);
|
||||
});
|
||||
});
|
||||
|
||||
// Thread click
|
||||
this.shadow.querySelectorAll("[data-thread]").forEach((row) => {
|
||||
row.addEventListener("click", () => {
|
||||
const id = (row as HTMLElement).dataset.thread!;
|
||||
this.view = "thread";
|
||||
this.loadThread(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Filter
|
||||
this.shadow.querySelectorAll("[data-filter]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
this.filter = (btn as HTMLElement).dataset.filter as any;
|
||||
if (this.currentMailbox) this.loadThreads(this.currentMailbox.slug);
|
||||
});
|
||||
});
|
||||
|
||||
// Approval actions
|
||||
this.shadow.querySelectorAll("[data-approve]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const id = (btn as HTMLElement).dataset.approve!;
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
await fetch(`${base}/api/approvals/${id}/sign`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vote: "APPROVE" }),
|
||||
});
|
||||
this.loadApprovals();
|
||||
});
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-reject]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const id = (btn as HTMLElement).dataset.reject!;
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
await fetch(`${base}/api/approvals/${id}/sign`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vote: "REJECT" }),
|
||||
});
|
||||
this.loadApprovals();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-inbox-client", FolkInboxClient);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* Inbox module — layout wrapper */
|
||||
folk-inbox-client {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
-- rInbox schema: collaborative email with multisig approval
|
||||
CREATE SCHEMA IF NOT EXISTS rinbox;
|
||||
|
||||
-- Users (synced from EncryptID)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
email TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Workspaces (org/community container)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.workspaces (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
slug TEXT UNIQUE NOT NULL,
|
||||
name TEXT NOT NULL,
|
||||
description TEXT,
|
||||
owner_did TEXT NOT NULL,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Workspace members
|
||||
CREATE TABLE IF NOT EXISTS rinbox.workspace_members (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
workspace_id UUID NOT NULL REFERENCES rinbox.workspaces(id) ON DELETE CASCADE,
|
||||
user_id UUID NOT NULL REFERENCES rinbox.users(id) ON DELETE CASCADE,
|
||||
role TEXT NOT NULL DEFAULT 'MEMBER' CHECK (role IN ('MEMBER', 'ADMIN', 'OWNER')),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(workspace_id, user_id)
|
||||
);
|
||||
|
||||
-- Mailboxes (shared inboxes)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.mailboxes (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
workspace_id UUID REFERENCES rinbox.workspaces(id) ON DELETE CASCADE,
|
||||
slug TEXT UNIQUE NOT NULL,
|
||||
name TEXT NOT NULL,
|
||||
email TEXT NOT NULL,
|
||||
description TEXT,
|
||||
visibility TEXT NOT NULL DEFAULT 'members_only' CHECK (visibility IN ('public', 'public_read', 'authenticated', 'members_only')),
|
||||
owner_did TEXT NOT NULL,
|
||||
-- IMAP config (encrypted in production)
|
||||
imap_host TEXT,
|
||||
imap_port INTEGER DEFAULT 993,
|
||||
imap_user TEXT,
|
||||
-- Safe multisig config
|
||||
safe_address TEXT,
|
||||
safe_chain_id INTEGER,
|
||||
approval_threshold INTEGER DEFAULT 1,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Mailbox members with role hierarchy
|
||||
CREATE TABLE IF NOT EXISTS rinbox.mailbox_members (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
mailbox_id UUID NOT NULL REFERENCES rinbox.mailboxes(id) ON DELETE CASCADE,
|
||||
user_id UUID NOT NULL REFERENCES rinbox.users(id) ON DELETE CASCADE,
|
||||
role TEXT NOT NULL DEFAULT 'VIEWER' CHECK (role IN ('VIEWER', 'COMMENTER', 'DRAFTER', 'SIGNER', 'ADMIN')),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(mailbox_id, user_id)
|
||||
);
|
||||
|
||||
-- Email threads (synced from IMAP)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.threads (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
mailbox_id UUID NOT NULL REFERENCES rinbox.mailboxes(id) ON DELETE CASCADE,
|
||||
message_id TEXT,
|
||||
subject TEXT NOT NULL DEFAULT '(no subject)',
|
||||
from_address TEXT,
|
||||
from_name TEXT,
|
||||
to_addresses JSONB DEFAULT '[]',
|
||||
cc_addresses JSONB DEFAULT '[]',
|
||||
body_text TEXT,
|
||||
body_html TEXT,
|
||||
tags TEXT[] DEFAULT '{}',
|
||||
status TEXT NOT NULL DEFAULT 'open' CHECK (status IN ('open', 'snoozed', 'closed')),
|
||||
is_read BOOLEAN DEFAULT FALSE,
|
||||
is_starred BOOLEAN DEFAULT FALSE,
|
||||
assigned_to UUID REFERENCES rinbox.users(id),
|
||||
has_attachments BOOLEAN DEFAULT FALSE,
|
||||
received_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Thread comments (internal, not sent)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.comments (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
thread_id UUID NOT NULL REFERENCES rinbox.threads(id) ON DELETE CASCADE,
|
||||
author_id UUID NOT NULL REFERENCES rinbox.users(id),
|
||||
body TEXT NOT NULL,
|
||||
mentions TEXT[] DEFAULT '{}',
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Outgoing email approvals (multisig workflow)
|
||||
CREATE TABLE IF NOT EXISTS rinbox.approvals (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
mailbox_id UUID NOT NULL REFERENCES rinbox.mailboxes(id) ON DELETE CASCADE,
|
||||
thread_id UUID REFERENCES rinbox.threads(id),
|
||||
author_id UUID NOT NULL REFERENCES rinbox.users(id),
|
||||
subject TEXT NOT NULL,
|
||||
body_text TEXT,
|
||||
body_html TEXT,
|
||||
to_addresses JSONB DEFAULT '[]',
|
||||
cc_addresses JSONB DEFAULT '[]',
|
||||
status TEXT NOT NULL DEFAULT 'PENDING' CHECK (status IN ('PENDING', 'APPROVED', 'SENT', 'REJECTED', 'EXPIRED')),
|
||||
required_signatures INTEGER DEFAULT 1,
|
||||
safe_tx_hash TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
resolved_at TIMESTAMPTZ
|
||||
);
|
||||
|
||||
-- Individual signatures on approvals
|
||||
CREATE TABLE IF NOT EXISTS rinbox.approval_signatures (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
approval_id UUID NOT NULL REFERENCES rinbox.approvals(id) ON DELETE CASCADE,
|
||||
signer_id UUID NOT NULL REFERENCES rinbox.users(id),
|
||||
vote TEXT NOT NULL CHECK (vote IN ('APPROVE', 'REJECT')),
|
||||
signed_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(approval_id, signer_id)
|
||||
);
|
||||
|
||||
-- IMAP sync state tracking
|
||||
CREATE TABLE IF NOT EXISTS rinbox.sync_state (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
mailbox_id UUID UNIQUE NOT NULL REFERENCES rinbox.mailboxes(id) ON DELETE CASCADE,
|
||||
last_uid INTEGER DEFAULT 0,
|
||||
uid_validity INTEGER,
|
||||
last_sync_at TIMESTAMPTZ,
|
||||
error TEXT
|
||||
);
|
||||
|
||||
-- Indexes
|
||||
CREATE INDEX IF NOT EXISTS idx_threads_mailbox ON rinbox.threads(mailbox_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_threads_mailbox_status ON rinbox.threads(mailbox_id, status);
|
||||
CREATE INDEX IF NOT EXISTS idx_threads_received ON rinbox.threads(mailbox_id, received_at DESC);
|
||||
CREATE INDEX IF NOT EXISTS idx_comments_thread ON rinbox.comments(thread_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_approvals_mailbox ON rinbox.approvals(mailbox_id, status);
|
||||
CREATE INDEX IF NOT EXISTS idx_approval_sigs ON rinbox.approval_signatures(approval_id);
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
/**
|
||||
* Inbox module — collaborative email with multisig approval.
|
||||
*
|
||||
* Shared mailboxes with role-based access, threaded comments,
|
||||
* and Gnosis Safe multisig approval for outgoing emails.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Inbox] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Inbox] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── Mailboxes API ──
|
||||
|
||||
// GET /api/mailboxes — list mailboxes
|
||||
routes.get("/api/mailboxes", async (c) => {
|
||||
const { workspace } = c.req.query();
|
||||
let rows;
|
||||
if (workspace) {
|
||||
rows = await sql.unsafe(
|
||||
`SELECT m.* FROM rinbox.mailboxes m
|
||||
JOIN rinbox.workspaces w ON w.id = m.workspace_id
|
||||
WHERE w.slug = $1 ORDER BY m.created_at DESC`,
|
||||
[workspace]
|
||||
);
|
||||
} else {
|
||||
rows = await sql.unsafe(
|
||||
"SELECT * FROM rinbox.mailboxes ORDER BY created_at DESC LIMIT 50"
|
||||
);
|
||||
}
|
||||
return c.json({ mailboxes: rows });
|
||||
});
|
||||
|
||||
// POST /api/mailboxes — create mailbox
|
||||
routes.post("/api/mailboxes", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { slug, name, email, description, visibility = "members_only" } = body;
|
||||
if (!slug || !name || !email) return c.json({ error: "slug, name, email required" }, 400);
|
||||
if (!/^[a-z0-9-]+$/.test(slug)) return c.json({ error: "Invalid slug" }, 400);
|
||||
|
||||
try {
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rinbox.mailboxes (slug, name, email, description, visibility, owner_did)
|
||||
VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`,
|
||||
[slug, name, email, description || null, visibility, "anonymous"]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
} catch (e: any) {
|
||||
if (e.code === "23505") return c.json({ error: "Mailbox already exists" }, 409);
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/mailboxes/:slug — mailbox detail
|
||||
routes.get("/api/mailboxes/:slug", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const rows = await sql.unsafe("SELECT * FROM rinbox.mailboxes WHERE slug = $1", [slug]);
|
||||
if (rows.length === 0) return c.json({ error: "Mailbox not found" }, 404);
|
||||
|
||||
// Get thread count
|
||||
const counts = await sql.unsafe(
|
||||
`SELECT status, count(*) as cnt FROM rinbox.threads WHERE mailbox_id = $1 GROUP BY status`,
|
||||
[rows[0].id]
|
||||
);
|
||||
const threadCounts: Record<string, number> = {};
|
||||
for (const row of counts) threadCounts[row.status] = parseInt(row.cnt);
|
||||
|
||||
return c.json({ ...rows[0], threadCounts });
|
||||
});
|
||||
|
||||
// ── Threads API ──
|
||||
|
||||
// GET /api/mailboxes/:slug/threads — list threads
|
||||
routes.get("/api/mailboxes/:slug/threads", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const { status, search, limit = "50", offset = "0" } = c.req.query();
|
||||
|
||||
const mailbox = await sql.unsafe("SELECT id FROM rinbox.mailboxes WHERE slug = $1", [slug]);
|
||||
if (mailbox.length === 0) return c.json({ error: "Mailbox not found" }, 404);
|
||||
|
||||
const conditions = ["mailbox_id = $1"];
|
||||
const params: unknown[] = [mailbox[0].id];
|
||||
let idx = 2;
|
||||
|
||||
if (status) {
|
||||
conditions.push(`status = $${idx}`);
|
||||
params.push(status);
|
||||
idx++;
|
||||
}
|
||||
if (search) {
|
||||
conditions.push(`(subject ILIKE $${idx} OR from_address ILIKE $${idx})`);
|
||||
params.push(`%${search}%`);
|
||||
idx++;
|
||||
}
|
||||
|
||||
const where = conditions.join(" AND ");
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT t.*, (SELECT count(*) FROM rinbox.comments WHERE thread_id = t.id) as comment_count
|
||||
FROM rinbox.threads t WHERE ${where}
|
||||
ORDER BY t.received_at DESC
|
||||
LIMIT ${Math.min(parseInt(limit), 100)} OFFSET ${parseInt(offset) || 0}`,
|
||||
params
|
||||
);
|
||||
|
||||
return c.json({ threads: rows });
|
||||
});
|
||||
|
||||
// GET /api/threads/:id — thread detail with comments
|
||||
routes.get("/api/threads/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const rows = await sql.unsafe("SELECT * FROM rinbox.threads WHERE id = $1", [id]);
|
||||
if (rows.length === 0) return c.json({ error: "Thread not found" }, 404);
|
||||
|
||||
const comments = await sql.unsafe(
|
||||
`SELECT c.*, u.username, u.did as author_did
|
||||
FROM rinbox.comments c
|
||||
LEFT JOIN rinbox.users u ON u.id = c.author_id
|
||||
WHERE c.thread_id = $1 ORDER BY c.created_at ASC`,
|
||||
[id]
|
||||
);
|
||||
|
||||
return c.json({ ...rows[0], comments });
|
||||
});
|
||||
|
||||
// PATCH /api/threads/:id — update thread metadata
|
||||
routes.patch("/api/threads/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const allowed = ["status", "is_read", "is_starred", "tags", "assigned_to"];
|
||||
const updates: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
for (const key of allowed) {
|
||||
if (key in body) {
|
||||
const col = key === "tags" ? "tags" : key;
|
||||
updates.push(`${col} = $${idx}`);
|
||||
params.push(key === "tags" ? body[key] : body[key]);
|
||||
idx++;
|
||||
}
|
||||
}
|
||||
|
||||
if (updates.length === 0) return c.json({ error: "No valid fields" }, 400);
|
||||
|
||||
params.push(id);
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rinbox.threads SET ${updates.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Thread not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// POST /api/threads/:id/comments — add comment
|
||||
routes.post("/api/threads/:id/comments", async (c) => {
|
||||
const threadId = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { text, mentions } = body;
|
||||
if (!text) return c.json({ error: "text required" }, 400);
|
||||
|
||||
// Ensure thread exists
|
||||
const thread = await sql.unsafe("SELECT id FROM rinbox.threads WHERE id = $1", [threadId]);
|
||||
if (thread.length === 0) return c.json({ error: "Thread not found" }, 404);
|
||||
|
||||
// Get or create anonymous user
|
||||
const user = await sql.unsafe(
|
||||
`INSERT INTO rinbox.users (did, username) VALUES ('anonymous', 'Anonymous')
|
||||
ON CONFLICT (did) DO UPDATE SET username = rinbox.users.username RETURNING id`
|
||||
);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rinbox.comments (thread_id, author_id, body, mentions)
|
||||
VALUES ($1, $2, $3, $4) RETURNING *`,
|
||||
[threadId, user[0].id, text, mentions || []]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── Approvals API ──
|
||||
|
||||
// GET /api/approvals — list pending approvals
|
||||
routes.get("/api/approvals", async (c) => {
|
||||
const { mailbox, status = "PENDING" } = c.req.query();
|
||||
let rows;
|
||||
if (mailbox) {
|
||||
const mb = await sql.unsafe("SELECT id FROM rinbox.mailboxes WHERE slug = $1", [mailbox]);
|
||||
if (mb.length === 0) return c.json({ error: "Mailbox not found" }, 404);
|
||||
rows = await sql.unsafe(
|
||||
`SELECT a.*, (SELECT count(*) FROM rinbox.approval_signatures WHERE approval_id = a.id) as signature_count
|
||||
FROM rinbox.approvals a WHERE a.mailbox_id = $1 AND a.status = $2
|
||||
ORDER BY a.created_at DESC`,
|
||||
[mb[0].id, status]
|
||||
);
|
||||
} else {
|
||||
rows = await sql.unsafe(
|
||||
`SELECT a.*, (SELECT count(*) FROM rinbox.approval_signatures WHERE approval_id = a.id) as signature_count
|
||||
FROM rinbox.approvals a WHERE a.status = $1 ORDER BY a.created_at DESC LIMIT 50`,
|
||||
[status]
|
||||
);
|
||||
}
|
||||
return c.json({ approvals: rows });
|
||||
});
|
||||
|
||||
// POST /api/approvals — create approval draft
|
||||
routes.post("/api/approvals", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { mailbox_slug, thread_id, subject, body_text, to_addresses } = body;
|
||||
if (!mailbox_slug || !subject) return c.json({ error: "mailbox_slug and subject required" }, 400);
|
||||
|
||||
const mb = await sql.unsafe("SELECT * FROM rinbox.mailboxes WHERE slug = $1", [mailbox_slug]);
|
||||
if (mb.length === 0) return c.json({ error: "Mailbox not found" }, 404);
|
||||
|
||||
const user = await sql.unsafe(
|
||||
`INSERT INTO rinbox.users (did, username) VALUES ('anonymous', 'Anonymous')
|
||||
ON CONFLICT (did) DO UPDATE SET username = rinbox.users.username RETURNING id`
|
||||
);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rinbox.approvals (mailbox_id, thread_id, author_id, subject, body_text, to_addresses, required_signatures)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *`,
|
||||
[mb[0].id, thread_id || null, user[0].id, subject, body_text || null, JSON.stringify(to_addresses || []), mb[0].approval_threshold || 1]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// POST /api/approvals/:id/sign — sign an approval
|
||||
routes.post("/api/approvals/:id/sign", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { vote = "APPROVE" } = body;
|
||||
if (!["APPROVE", "REJECT"].includes(vote)) return c.json({ error: "Invalid vote" }, 400);
|
||||
|
||||
const approval = await sql.unsafe("SELECT * FROM rinbox.approvals WHERE id = $1", [id]);
|
||||
if (approval.length === 0) return c.json({ error: "Approval not found" }, 404);
|
||||
if (approval[0].status !== "PENDING") return c.json({ error: "Approval not pending" }, 400);
|
||||
|
||||
const user = await sql.unsafe(
|
||||
`INSERT INTO rinbox.users (did, username) VALUES ('anonymous', 'Anonymous')
|
||||
ON CONFLICT (did) DO UPDATE SET username = rinbox.users.username RETURNING id`
|
||||
);
|
||||
|
||||
await sql.unsafe(
|
||||
`INSERT INTO rinbox.approval_signatures (approval_id, signer_id, vote)
|
||||
VALUES ($1, $2, $3)
|
||||
ON CONFLICT (approval_id, signer_id) DO UPDATE SET vote = $3, signed_at = NOW()`,
|
||||
[id, user[0].id, vote]
|
||||
);
|
||||
|
||||
// Check if threshold reached
|
||||
const sigs = await sql.unsafe(
|
||||
"SELECT count(*) as cnt FROM rinbox.approval_signatures WHERE approval_id = $1 AND vote = 'APPROVE'",
|
||||
[id]
|
||||
);
|
||||
const approveCount = parseInt(sigs[0].cnt);
|
||||
|
||||
if (approveCount >= approval[0].required_signatures) {
|
||||
await sql.unsafe(
|
||||
"UPDATE rinbox.approvals SET status = 'APPROVED', resolved_at = NOW() WHERE id = $1",
|
||||
[id]
|
||||
);
|
||||
return c.json({ ok: true, status: "APPROVED", signatures: approveCount });
|
||||
}
|
||||
|
||||
// Check for rejection (more rejects than possible remaining approvals)
|
||||
const rejects = await sql.unsafe(
|
||||
"SELECT count(*) as cnt FROM rinbox.approval_signatures WHERE approval_id = $1 AND vote = 'REJECT'",
|
||||
[id]
|
||||
);
|
||||
const rejectCount = parseInt(rejects[0].cnt);
|
||||
if (rejectCount > 0) {
|
||||
await sql.unsafe(
|
||||
"UPDATE rinbox.approvals SET status = 'REJECTED', resolved_at = NOW() WHERE id = $1",
|
||||
[id]
|
||||
);
|
||||
return c.json({ ok: true, status: "REJECTED", signatures: approveCount });
|
||||
}
|
||||
|
||||
return c.json({ ok: true, status: "PENDING", signatures: approveCount, required: approval[0].required_signatures });
|
||||
});
|
||||
|
||||
// ── Workspaces API ──
|
||||
|
||||
// GET /api/workspaces
|
||||
routes.get("/api/workspaces", async (c) => {
|
||||
const rows = await sql.unsafe("SELECT * FROM rinbox.workspaces ORDER BY created_at DESC LIMIT 50");
|
||||
return c.json({ workspaces: rows });
|
||||
});
|
||||
|
||||
// POST /api/workspaces
|
||||
routes.post("/api/workspaces", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { slug, name, description } = body;
|
||||
if (!slug || !name) return c.json({ error: "slug and name required" }, 400);
|
||||
|
||||
try {
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rinbox.workspaces (slug, name, description, owner_did)
|
||||
VALUES ($1, $2, $3, $4) RETURNING *`,
|
||||
[slug, name, description || null, "anonymous"]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
} catch (e: any) {
|
||||
if (e.code === "23505") return c.json({ error: "Workspace already exists" }, 409);
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/health
|
||||
routes.get("/api/health", (c) => c.json({ ok: true }));
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Inbox | rSpace`,
|
||||
moduleId: "inbox",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/inbox/inbox.css">`,
|
||||
body: `<folk-inbox-client space="${space}"></folk-inbox-client>`,
|
||||
scripts: `<script type="module" src="/modules/inbox/folk-inbox-client.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const inboxModule: RSpaceModule = {
|
||||
id: "inbox",
|
||||
name: "rInbox",
|
||||
icon: "\u{1F4E8}",
|
||||
description: "Collaborative email with multisig approval",
|
||||
routes,
|
||||
standaloneDomain: "rinbox.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Inbox module.
|
||||
* Serves rinbox.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { inboxModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/inbox/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", inboxModule.routes);
|
||||
|
||||
console.log(`[rInbox Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
/**
|
||||
* <folk-map-viewer> — real-time location sharing map.
|
||||
*
|
||||
* Creates/joins map rooms, shows participant locations on a map,
|
||||
* and provides location sharing controls.
|
||||
*/
|
||||
|
||||
class FolkMapViewer extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private room = "";
|
||||
private view: "lobby" | "map" = "lobby";
|
||||
private rooms: string[] = [];
|
||||
private loading = false;
|
||||
private error = "";
|
||||
private syncStatus: "disconnected" | "connected" = "disconnected";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.room = this.getAttribute("room") || "";
|
||||
if (this.room) {
|
||||
this.view = "map";
|
||||
}
|
||||
this.checkSyncHealth();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/maps/);
|
||||
return match ? `/${match[1]}/maps` : "";
|
||||
}
|
||||
|
||||
private async checkSyncHealth() {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/health`, { signal: AbortSignal.timeout(3000) });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
this.syncStatus = data.sync !== false ? "connected" : "disconnected";
|
||||
}
|
||||
} catch {
|
||||
this.syncStatus = "disconnected";
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadStats() {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/stats`, { signal: AbortSignal.timeout(3000) });
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
this.rooms = Object.keys(data.rooms || {});
|
||||
}
|
||||
} catch {
|
||||
this.rooms = [];
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
|
||||
private joinRoom(slug: string) {
|
||||
this.room = slug;
|
||||
this.view = "map";
|
||||
this.render();
|
||||
}
|
||||
|
||||
private createRoom() {
|
||||
const name = prompt("Room name (slug):");
|
||||
if (!name?.trim()) return;
|
||||
const slug = name.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
|
||||
this.joinRoom(slug);
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
|
||||
.nav-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid #444;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.nav-btn:hover { border-color: #666; }
|
||||
.header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; }
|
||||
|
||||
.status-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
|
||||
}
|
||||
.status-connected { background: #22c55e; }
|
||||
.status-disconnected { background: #ef4444; }
|
||||
|
||||
.create-btn {
|
||||
padding: 10px 20px; border-radius: 8px; border: none;
|
||||
background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 14px;
|
||||
}
|
||||
.create-btn:hover { background: #4f46e5; }
|
||||
|
||||
.room-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 16px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.2s;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
.room-card:hover { border-color: #555; }
|
||||
.room-icon { font-size: 24px; }
|
||||
.room-name { font-size: 15px; font-weight: 600; }
|
||||
|
||||
.map-container {
|
||||
width: 100%; height: 500px; border-radius: 10px;
|
||||
background: #1a1a2e; border: 1px solid #333;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.map-placeholder {
|
||||
text-align: center; color: #666; padding: 40px;
|
||||
}
|
||||
.map-placeholder p { margin: 8px 0; }
|
||||
|
||||
.controls {
|
||||
display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
|
||||
}
|
||||
.ctrl-btn {
|
||||
padding: 8px 16px; border-radius: 8px; border: 1px solid #444;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.ctrl-btn:hover { border-color: #666; }
|
||||
.ctrl-btn.sharing {
|
||||
border-color: #22c55e; color: #22c55e; animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.share-link {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 8px;
|
||||
padding: 12px; margin-top: 12px; font-family: monospace; font-size: 12px;
|
||||
color: #aaa; display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.share-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
||||
.copy-btn {
|
||||
padding: 4px 10px; border-radius: 4px; border: 1px solid #444;
|
||||
background: #2a2a3e; color: #ccc; cursor: pointer; font-size: 11px;
|
||||
}
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div style="color:#ef5350;text-align:center;padding:12px">${this.esc(this.error)}</div>` : ""}
|
||||
${this.view === "lobby" ? this.renderLobby() : this.renderMap()}
|
||||
`;
|
||||
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderLobby(): string {
|
||||
return `
|
||||
<div class="header">
|
||||
<span class="header-title">Map Rooms</span>
|
||||
<span class="status-dot ${this.syncStatus === "connected" ? "status-connected" : "status-disconnected"}"></span>
|
||||
<span style="font-size:12px;color:#888;margin-right:12px">${this.syncStatus === "connected" ? "Sync online" : "Sync offline"}</span>
|
||||
<button class="create-btn" id="create-room">+ New Room</button>
|
||||
</div>
|
||||
|
||||
${this.rooms.length > 0 ? this.rooms.map((r) => `
|
||||
<div class="room-card" data-room="${r}">
|
||||
<span class="room-icon">\u{1F5FA}</span>
|
||||
<span class="room-name">${this.esc(r)}</span>
|
||||
</div>
|
||||
`).join("") : ""}
|
||||
|
||||
<div class="empty">
|
||||
<p style="font-size:16px;margin-bottom:8px">Create or join a map room to share locations</p>
|
||||
<p style="font-size:13px">Share the room link with friends to see each other on the map in real-time</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMap(): string {
|
||||
const shareUrl = `${window.location.origin}/${this.space}/maps/${this.room}`;
|
||||
return `
|
||||
<div class="header">
|
||||
<button class="nav-btn" data-back="lobby">Back</button>
|
||||
<span class="header-title">\u{1F5FA} ${this.esc(this.room)}</span>
|
||||
<span class="status-dot ${this.syncStatus === "connected" ? "status-connected" : "status-disconnected"}"></span>
|
||||
</div>
|
||||
|
||||
<div class="map-container">
|
||||
<div class="map-placeholder">
|
||||
<p style="font-size:48px">\u{1F30D}</p>
|
||||
<p style="font-size:16px">Map Room: <strong>${this.esc(this.room)}</strong></p>
|
||||
<p>Connect the MapLibre GL library to display the interactive map.</p>
|
||||
<p style="font-size:12px;color:#555">WebSocket sync: ${this.syncStatus}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="ctrl-btn" id="share-location">Share My Location</button>
|
||||
<button class="ctrl-btn" id="copy-link">Copy Room Link</button>
|
||||
</div>
|
||||
|
||||
<div class="share-link">
|
||||
<span>${this.esc(shareUrl)}</span>
|
||||
<button class="copy-btn" id="copy-url">Copy</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
this.shadow.getElementById("create-room")?.addEventListener("click", () => this.createRoom());
|
||||
|
||||
this.shadow.querySelectorAll("[data-room]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const room = (el as HTMLElement).dataset.room!;
|
||||
this.joinRoom(room);
|
||||
});
|
||||
});
|
||||
|
||||
this.shadow.querySelectorAll("[data-back]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
this.view = "lobby";
|
||||
this.loadStats();
|
||||
});
|
||||
});
|
||||
|
||||
this.shadow.getElementById("share-location")?.addEventListener("click", () => {
|
||||
if ("geolocation" in navigator) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
const btn = this.shadow.getElementById("share-location");
|
||||
if (btn) {
|
||||
btn.textContent = `Location: ${pos.coords.latitude.toFixed(4)}, ${pos.coords.longitude.toFixed(4)}`;
|
||||
btn.classList.add("sharing");
|
||||
}
|
||||
},
|
||||
() => {
|
||||
this.error = "Location access denied";
|
||||
this.render();
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const copyUrl = this.shadow.getElementById("copy-url") || this.shadow.getElementById("copy-link");
|
||||
copyUrl?.addEventListener("click", () => {
|
||||
const url = `${window.location.origin}/${this.space}/maps/${this.room}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
if (copyUrl) copyUrl.textContent = "Copied!";
|
||||
setTimeout(() => { if (copyUrl) copyUrl.textContent = "Copy"; }, 2000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-map-viewer", FolkMapViewer);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Maps module — dark theme */
|
||||
folk-map-viewer {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
* Maps module — real-time collaborative location sharing.
|
||||
*
|
||||
* Port of rmaps-online. Rooms are ephemeral (no DB). Proxies to
|
||||
* the sync server for WebSocket-based location sharing. Embeds
|
||||
* MapLibre GL for outdoor maps and c3nav for indoor maps.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
const SYNC_SERVER = process.env.MAPS_SYNC_URL || "http://localhost:3001";
|
||||
|
||||
// ── Proxy: sync server health ──
|
||||
routes.get("/api/health", async (c) => {
|
||||
try {
|
||||
const res = await fetch(`${SYNC_SERVER}/health`, { signal: AbortSignal.timeout(3000) });
|
||||
if (res.ok) return c.json(await res.json());
|
||||
return c.json({ status: "degraded", sync: false });
|
||||
} catch {
|
||||
return c.json({ status: "degraded", sync: false });
|
||||
}
|
||||
});
|
||||
|
||||
// ── Proxy: room stats ──
|
||||
routes.get("/api/stats", async (c) => {
|
||||
try {
|
||||
const res = await fetch(`${SYNC_SERVER}/stats`, { signal: AbortSignal.timeout(3000) });
|
||||
if (res.ok) return c.json(await res.json());
|
||||
} catch {}
|
||||
return c.json({ rooms: {} });
|
||||
});
|
||||
|
||||
// ── Proxy: push notification VAPID key ──
|
||||
routes.get("/api/push/vapid-public-key", async (c) => {
|
||||
try {
|
||||
const res = await fetch(`${SYNC_SERVER}/push/vapid-public-key`, { signal: AbortSignal.timeout(3000) });
|
||||
if (res.ok) return c.json(await res.json());
|
||||
} catch {}
|
||||
return c.json({ error: "Push not available" }, 503);
|
||||
});
|
||||
|
||||
// ── Proxy: push subscribe/unsubscribe ──
|
||||
routes.post("/api/push/subscribe", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const res = await fetch(`${SYNC_SERVER}/push/subscribe`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return c.json(await res.json(), res.status as any);
|
||||
});
|
||||
|
||||
routes.post("/api/push/unsubscribe", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const res = await fetch(`${SYNC_SERVER}/push/unsubscribe`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return c.json(await res.json(), res.status as any);
|
||||
});
|
||||
|
||||
// ── Proxy: request location (ping) ──
|
||||
routes.post("/api/push/request-location", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const res = await fetch(`${SYNC_SERVER}/push/request-location`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
return c.json(await res.json(), res.status as any);
|
||||
});
|
||||
|
||||
// ── Proxy: routing (OSRM + c3nav) ──
|
||||
routes.post("/api/routing", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { from, to, mode = "walking" } = body;
|
||||
|
||||
if (!from?.lat || !from?.lng || !to?.lat || !to?.lng) {
|
||||
return c.json({ error: "from and to with lat/lng required" }, 400);
|
||||
}
|
||||
|
||||
// Use OSRM for outdoor routing
|
||||
const profile = mode === "driving" ? "car" : "foot";
|
||||
try {
|
||||
const res = await fetch(
|
||||
`https://router.project-osrm.org/route/v1/${profile}/${from.lng},${from.lat};${to.lng},${to.lat}?overview=full&geometries=geojson&steps=true`,
|
||||
{ signal: AbortSignal.timeout(10000) }
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
return c.json(data);
|
||||
}
|
||||
} catch {}
|
||||
return c.json({ error: "Routing failed" }, 502);
|
||||
});
|
||||
|
||||
// ── Proxy: c3nav API ──
|
||||
const VALID_C3NAV_EVENTS = ["39c3", "38c3", "37c3", "eh22", "eh2025", "camp2023"];
|
||||
const ALLOWED_C3NAV_ENDPOINTS = ["map/settings", "map/bounds", "map/locations", "map/locations/full", "map/projection"];
|
||||
|
||||
routes.get("/api/c3nav/:event", async (c) => {
|
||||
const event = c.req.param("event");
|
||||
const endpoint = c.req.query("endpoint") || "map/bounds";
|
||||
|
||||
if (!VALID_C3NAV_EVENTS.includes(event)) return c.json({ error: "Invalid event" }, 400);
|
||||
const isAllowed = ALLOWED_C3NAV_ENDPOINTS.some((a) => endpoint === a || endpoint.startsWith(a + "/"));
|
||||
if (!isAllowed && !endpoint.startsWith("map/locations/")) return c.json({ error: "Endpoint not allowed" }, 403);
|
||||
|
||||
try {
|
||||
const res = await fetch(`https://${event}.c3nav.de/api/v2/${endpoint}/`, {
|
||||
headers: { "X-API-Key": "anonymous", Accept: "application/json", "User-Agent": "rMaps/1.0" },
|
||||
signal: AbortSignal.timeout(5000),
|
||||
});
|
||||
if (res.ok) return c.json(await res.json());
|
||||
return c.json({ error: "c3nav API error" }, res.status as any);
|
||||
} catch {
|
||||
return c.json({ error: "c3nav unreachable" }, 502);
|
||||
}
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Maps | rSpace`,
|
||||
moduleId: "maps",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/maps/maps.css">`,
|
||||
body: `<folk-map-viewer space="${space}"></folk-map-viewer>`,
|
||||
scripts: `<script type="module" src="/modules/maps/folk-map-viewer.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
// Room-specific page
|
||||
routes.get("/:room", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
const room = c.req.param("room");
|
||||
return c.html(renderShell({
|
||||
title: `${room} — Maps | rSpace`,
|
||||
moduleId: "maps",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/maps/maps.css">`,
|
||||
body: `<folk-map-viewer space="${space}" room="${room}"></folk-map-viewer>`,
|
||||
scripts: `<script type="module" src="/modules/maps/folk-map-viewer.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const mapsModule: RSpaceModule = {
|
||||
id: "maps",
|
||||
name: "rMaps",
|
||||
icon: "\u{1F5FA}",
|
||||
description: "Real-time collaborative location sharing and indoor/outdoor maps",
|
||||
routes,
|
||||
standaloneDomain: "rmaps.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Maps module.
|
||||
* Serves rmaps.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { mapsModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/maps/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", mapsModule.routes);
|
||||
|
||||
console.log(`[rMaps Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
/**
|
||||
* <folk-graph-viewer> — community relationship graph.
|
||||
*
|
||||
* Displays network nodes (people, companies, opportunities)
|
||||
* and edges in a force-directed layout with search and filtering.
|
||||
*/
|
||||
|
||||
class FolkGraphViewer extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private workspaces: any[] = [];
|
||||
private info: any = null;
|
||||
private filter: "all" | "person" | "company" | "opportunity" = "all";
|
||||
private searchQuery = "";
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadData();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/network/);
|
||||
return match ? `/${match[1]}/network` : "";
|
||||
}
|
||||
|
||||
private async loadData() {
|
||||
const base = this.getApiBase();
|
||||
try {
|
||||
const [wsRes, infoRes] = await Promise.all([
|
||||
fetch(`${base}/api/workspaces`),
|
||||
fetch(`${base}/api/info`),
|
||||
]);
|
||||
if (wsRes.ok) this.workspaces = await wsRes.json();
|
||||
if (infoRes.ok) this.info = await infoRes.json();
|
||||
} catch { /* offline */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
|
||||
.header-title { font-size: 18px; font-weight: 600; flex: 1; }
|
||||
|
||||
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
|
||||
.search-input {
|
||||
border: 1px solid #333; border-radius: 8px; padding: 8px 12px;
|
||||
background: #16161e; color: #e0e0e0; font-size: 13px; width: 200px; outline: none;
|
||||
}
|
||||
.search-input:focus { border-color: #6366f1; }
|
||||
.filter-btn {
|
||||
padding: 6px 12px; border-radius: 8px; border: 1px solid #333;
|
||||
background: #16161e; color: #888; cursor: pointer; font-size: 12px;
|
||||
}
|
||||
.filter-btn:hover { border-color: #555; }
|
||||
.filter-btn.active { border-color: #6366f1; color: #6366f1; }
|
||||
|
||||
.graph-canvas {
|
||||
width: 100%; height: 500px; border-radius: 12px;
|
||||
background: #0d0d14; border: 1px solid #222;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.placeholder { text-align: center; color: #555; padding: 40px; }
|
||||
.placeholder p { margin: 6px 0; }
|
||||
|
||||
.workspace-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
|
||||
.ws-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 16px; cursor: pointer; transition: border-color 0.2s;
|
||||
}
|
||||
.ws-card:hover { border-color: #555; }
|
||||
.ws-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
|
||||
.ws-meta { font-size: 12px; color: #888; }
|
||||
|
||||
.legend { display: flex; gap: 16px; margin-top: 12px; }
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; }
|
||||
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.dot-person { background: #3b82f6; }
|
||||
.dot-company { background: #22c55e; }
|
||||
.dot-opportunity { background: #f59e0b; }
|
||||
|
||||
.stats { display: flex; gap: 20px; margin-bottom: 16px; }
|
||||
.stat { text-align: center; }
|
||||
.stat-value { font-size: 24px; font-weight: 700; color: #6366f1; }
|
||||
.stat-label { font-size: 11px; color: #888; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div style="color:#ef5350;text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
|
||||
|
||||
<div class="header">
|
||||
<span class="header-title">\u{1F310} Network Graph</span>
|
||||
</div>
|
||||
|
||||
<div class="toolbar">
|
||||
<input class="search-input" type="text" placeholder="Search nodes..." id="search-input" value="${this.esc(this.searchQuery)}">
|
||||
${(["all", "person", "company", "opportunity"] as const).map(f =>
|
||||
`<button class="filter-btn ${this.filter === f ? "active" : ""}" data-filter="${f}">${f === "all" ? "All" : f.charAt(0).toUpperCase() + f.slice(1)}s</button>`
|
||||
).join("")}
|
||||
</div>
|
||||
|
||||
<div class="graph-canvas">
|
||||
<div class="placeholder">
|
||||
<p style="font-size:48px">\u{1F578}\u{FE0F}</p>
|
||||
<p style="font-size:16px">Community Relationship Graph</p>
|
||||
<p>Connect the force-directed layout engine to visualize your network.</p>
|
||||
<p style="font-size:12px;color:#444">Automerge CRDT sync + d3-force layout</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot dot-person"></span> People</div>
|
||||
<div class="legend-item"><span class="legend-dot dot-company"></span> Companies</div>
|
||||
<div class="legend-item"><span class="legend-dot dot-opportunity"></span> Opportunities</div>
|
||||
</div>
|
||||
|
||||
${this.workspaces.length > 0 ? `
|
||||
<div style="margin-top:20px;font-size:14px;font-weight:600;color:#aaa">Workspaces</div>
|
||||
<div class="workspace-list">
|
||||
${this.workspaces.map(ws => `
|
||||
<div class="ws-card">
|
||||
<div class="ws-name">${this.esc(ws.name || ws.slug)}</div>
|
||||
<div class="ws-meta">${ws.nodeCount || 0} nodes \u00B7 ${ws.edgeCount || 0} edges</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
` : ""}
|
||||
`;
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
this.shadow.querySelectorAll("[data-filter]").forEach(el => {
|
||||
el.addEventListener("click", () => {
|
||||
this.filter = (el as HTMLElement).dataset.filter as any;
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
this.shadow.getElementById("search-input")?.addEventListener("input", (e) => {
|
||||
this.searchQuery = (e.target as HTMLInputElement).value;
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-graph-viewer", FolkGraphViewer);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Network module — dark theme */
|
||||
folk-graph-viewer {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* Network module — community relationship graph viewer.
|
||||
*
|
||||
* Visualizes CRM data as interactive force-directed graphs.
|
||||
* Nodes: people, companies, opportunities. Edges: relationships.
|
||||
* Syncs from Twenty CRM via API proxy.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// No database — network data lives in Automerge CRDT docs or is proxied from Twenty CRM.
|
||||
// The existing rNetwork-online at /opt/apps/rNetwork-online/ already uses Bun+Hono+Automerge.
|
||||
|
||||
// ── API: Health ──
|
||||
routes.get("/api/health", (c) => {
|
||||
return c.json({ ok: true, module: "network", sync: true });
|
||||
});
|
||||
|
||||
// ── API: Graph info (placeholder — real data from Automerge) ──
|
||||
routes.get("/api/info", (c) => {
|
||||
return c.json({
|
||||
module: "network",
|
||||
description: "Community relationship graph visualization",
|
||||
entityTypes: ["person", "company", "opportunity"],
|
||||
features: ["force-directed layout", "CRM sync", "real-time collaboration"],
|
||||
});
|
||||
});
|
||||
|
||||
// ── API: Workspaces ──
|
||||
routes.get("/api/workspaces", (c) => {
|
||||
// In production, this would scan Automerge graph docs
|
||||
return c.json([
|
||||
{ slug: "demo", name: "Demo Network", nodeCount: 0, edgeCount: 0 },
|
||||
]);
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Network | rSpace`,
|
||||
moduleId: "network",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/network/network.css">`,
|
||||
body: `<folk-graph-viewer space="${space}"></folk-graph-viewer>`,
|
||||
scripts: `<script type="module" src="/modules/network/folk-graph-viewer.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const networkModule: RSpaceModule = {
|
||||
id: "network",
|
||||
name: "rNetwork",
|
||||
icon: "\u{1F310}",
|
||||
description: "Community relationship graph visualization with CRM sync",
|
||||
routes,
|
||||
standaloneDomain: "rnetwork.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Network module.
|
||||
* Serves rnetwork.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { networkModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/network/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", networkModule.routes);
|
||||
|
||||
console.log(`[rNetwork Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,360 @@
|
|||
/**
|
||||
* <folk-notes-app> — notebook and note management.
|
||||
*
|
||||
* Browse notebooks, create/edit notes with rich text,
|
||||
* search, tag management.
|
||||
*/
|
||||
|
||||
interface Notebook {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
cover_color: string;
|
||||
note_count: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Note {
|
||||
id: string;
|
||||
title: string;
|
||||
content: string;
|
||||
content_plain: string;
|
||||
type: string;
|
||||
tags: string[] | null;
|
||||
is_pinned: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
class FolkNotesApp extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private view: "notebooks" | "notebook" | "note" = "notebooks";
|
||||
private notebooks: Notebook[] = [];
|
||||
private selectedNotebook: (Notebook & { notes: Note[] }) | null = null;
|
||||
private selectedNote: Note | null = null;
|
||||
private searchQuery = "";
|
||||
private searchResults: Note[] = [];
|
||||
private loading = false;
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadNotebooks();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/notes/);
|
||||
return match ? `/${match[1]}/notes` : "";
|
||||
}
|
||||
|
||||
private async loadNotebooks() {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/notebooks`);
|
||||
const data = await res.json();
|
||||
this.notebooks = data.notebooks || [];
|
||||
} catch {
|
||||
this.error = "Failed to load notebooks";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadNotebook(id: string) {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/notebooks/${id}`);
|
||||
this.selectedNotebook = await res.json();
|
||||
} catch {
|
||||
this.error = "Failed to load notebook";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadNote(id: string) {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/notes/${id}`);
|
||||
this.selectedNote = await res.json();
|
||||
} catch {
|
||||
this.error = "Failed to load note";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async searchNotes(query: string) {
|
||||
if (!query.trim()) {
|
||||
this.searchResults = [];
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/notes?q=${encodeURIComponent(query)}`);
|
||||
const data = await res.json();
|
||||
this.searchResults = data.notes || [];
|
||||
} catch {
|
||||
this.searchResults = [];
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async createNotebook() {
|
||||
const title = prompt("Notebook name:");
|
||||
if (!title?.trim()) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/notebooks`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title }),
|
||||
});
|
||||
await this.loadNotebooks();
|
||||
} catch {
|
||||
this.error = "Failed to create notebook";
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
private getNoteIcon(type: string): string {
|
||||
switch (type) {
|
||||
case "NOTE": return "\u{1F4DD}";
|
||||
case "CODE": return "\u{1F4BB}";
|
||||
case "BOOKMARK": return "\u{1F517}";
|
||||
case "IMAGE": return "\u{1F5BC}";
|
||||
case "AUDIO": return "\u{1F3A4}";
|
||||
case "FILE": return "\u{1F4CE}";
|
||||
case "CLIP": return "\u2702\uFE0F";
|
||||
default: return "\u{1F4C4}";
|
||||
}
|
||||
}
|
||||
|
||||
private formatDate(dateStr: string): string {
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - d.getTime();
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
if (diffDays === 0) return "Today";
|
||||
if (diffDays === 1) return "Yesterday";
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return d.toLocaleDateString();
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
|
||||
.nav-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid #444;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.nav-btn:hover { border-color: #666; }
|
||||
.header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; }
|
||||
.create-btn {
|
||||
padding: 8px 16px; border-radius: 8px; border: none;
|
||||
background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.create-btn:hover { background: #4f46e5; }
|
||||
|
||||
.search-bar {
|
||||
width: 100%; padding: 10px 14px; border-radius: 8px;
|
||||
border: 1px solid #444; background: #2a2a3e; color: #e0e0e0;
|
||||
font-size: 14px; margin-bottom: 16px;
|
||||
}
|
||||
.search-bar:focus { border-color: #6366f1; outline: none; }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
|
||||
.notebook-card {
|
||||
border-radius: 10px; padding: 16px; cursor: pointer;
|
||||
border: 2px solid transparent; transition: border-color 0.2s;
|
||||
min-height: 120px; display: flex; flex-direction: column; justify-content: space-between;
|
||||
}
|
||||
.notebook-card:hover { border-color: rgba(255,255,255,0.2); }
|
||||
.notebook-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
|
||||
.notebook-meta { font-size: 12px; opacity: 0.7; }
|
||||
|
||||
.note-item {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 8px;
|
||||
padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s;
|
||||
display: flex; gap: 12px; align-items: flex-start;
|
||||
}
|
||||
.note-item:hover { border-color: #555; }
|
||||
.note-icon { font-size: 20px; flex-shrink: 0; }
|
||||
.note-body { flex: 1; min-width: 0; }
|
||||
.note-title { font-size: 14px; font-weight: 600; }
|
||||
.note-preview { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.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; }
|
||||
|
||||
.note-content {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 20px; font-size: 14px; line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
.loading { text-align: center; color: #888; padding: 40px; }
|
||||
.error { text-align: center; color: #ef5350; padding: 20px; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
|
||||
${this.loading ? '<div class="loading">Loading...</div>' : ""}
|
||||
${!this.loading ? this.renderView() : ""}
|
||||
`;
|
||||
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderView(): string {
|
||||
if (this.view === "note" && this.selectedNote) return this.renderNote();
|
||||
if (this.view === "notebook" && this.selectedNotebook) return this.renderNotebook();
|
||||
return this.renderNotebooks();
|
||||
}
|
||||
|
||||
private renderNotebooks(): string {
|
||||
return `
|
||||
<div class="header">
|
||||
<span class="header-title">Notebooks</span>
|
||||
<button class="create-btn" id="create-notebook">+ New Notebook</button>
|
||||
</div>
|
||||
<input class="search-bar" type="text" placeholder="Search notes..." id="search-input" value="${this.esc(this.searchQuery)}">
|
||||
|
||||
${this.searchQuery && this.searchResults.length > 0 ? `
|
||||
<div style="margin-bottom:16px;font-size:13px;color:#888">${this.searchResults.length} results for "${this.esc(this.searchQuery)}"</div>
|
||||
${this.searchResults.map((n) => this.renderNoteItem(n)).join("")}
|
||||
` : ""}
|
||||
|
||||
${!this.searchQuery ? `
|
||||
<div class="grid">
|
||||
${this.notebooks.map((nb) => `
|
||||
<div class="notebook-card" data-notebook="${nb.id}"
|
||||
style="background:${nb.cover_color}33;border-color:${nb.cover_color}55">
|
||||
<div>
|
||||
<div class="notebook-title">${this.esc(nb.title)}</div>
|
||||
<div class="notebook-meta">${this.esc(nb.description || "")}</div>
|
||||
</div>
|
||||
<div class="notebook-meta">${nb.note_count} notes · ${this.formatDate(nb.updated_at)}</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
${this.notebooks.length === 0 ? '<div class="empty">No notebooks yet. Create one to get started.</div>' : ""}
|
||||
` : ""}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderNotebook(): string {
|
||||
const nb = this.selectedNotebook!;
|
||||
return `
|
||||
<div class="header">
|
||||
<button class="nav-btn" data-back="notebooks">Back</button>
|
||||
<span class="header-title" style="color:${nb.cover_color}">${this.esc(nb.title)}</span>
|
||||
</div>
|
||||
${nb.notes && nb.notes.length > 0
|
||||
? nb.notes.map((n) => this.renderNoteItem(n)).join("")
|
||||
: '<div class="empty">No notes in this notebook.</div>'
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderNoteItem(n: Note): string {
|
||||
return `
|
||||
<div class="note-item" data-note="${n.id}">
|
||||
<span class="note-icon">${this.getNoteIcon(n.type)}</span>
|
||||
<div class="note-body">
|
||||
<div class="note-title">${n.is_pinned ? '<span class="pinned">📌</span> ' : ""}${this.esc(n.title)}</div>
|
||||
<div class="note-preview">${this.esc(n.content_plain || "")}</div>
|
||||
<div class="note-meta">
|
||||
<span>${this.formatDate(n.updated_at)}</span>
|
||||
<span>${n.type}</span>
|
||||
${n.tags ? n.tags.map((t) => `<span class="tag">${this.esc(t)}</span>`).join("") : ""}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderNote(): string {
|
||||
const n = this.selectedNote!;
|
||||
return `
|
||||
<div class="header">
|
||||
<button class="nav-btn" data-back="${this.selectedNotebook ? "notebook" : "notebooks"}">Back</button>
|
||||
<span class="header-title">${this.getNoteIcon(n.type)} ${this.esc(n.title)}</span>
|
||||
</div>
|
||||
<div class="note-content">${n.content || '<em style="color:#666">Empty note</em>'}</div>
|
||||
<div style="margin-top:12px;font-size:12px;color:#666;display:flex;gap:12px">
|
||||
<span>Type: ${n.type}</span>
|
||||
<span>Created: ${this.formatDate(n.created_at)}</span>
|
||||
<span>Updated: ${this.formatDate(n.updated_at)}</span>
|
||||
${n.tags ? n.tags.map((t) => `<span class="tag">${this.esc(t)}</span>`).join("") : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
// Create notebook
|
||||
this.shadow.getElementById("create-notebook")?.addEventListener("click", () => this.createNotebook());
|
||||
|
||||
// Search
|
||||
const searchInput = this.shadow.getElementById("search-input") as HTMLInputElement;
|
||||
let searchTimeout: any;
|
||||
searchInput?.addEventListener("input", () => {
|
||||
clearTimeout(searchTimeout);
|
||||
this.searchQuery = searchInput.value;
|
||||
searchTimeout = setTimeout(() => this.searchNotes(this.searchQuery), 300);
|
||||
});
|
||||
|
||||
// Notebook cards
|
||||
this.shadow.querySelectorAll("[data-notebook]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const id = (el as HTMLElement).dataset.notebook!;
|
||||
this.view = "notebook";
|
||||
this.loadNotebook(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Note items
|
||||
this.shadow.querySelectorAll("[data-note]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const id = (el as HTMLElement).dataset.note!;
|
||||
this.view = "note";
|
||||
this.loadNote(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Back buttons
|
||||
this.shadow.querySelectorAll("[data-back]").forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const target = (el as HTMLElement).dataset.back;
|
||||
if (target === "notebooks") { this.view = "notebooks"; this.render(); }
|
||||
else if (target === "notebook") { this.view = "notebook"; this.render(); }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-notes-app", FolkNotesApp);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Notes module — dark theme */
|
||||
folk-notes-app {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
-- rNotes module schema
|
||||
CREATE SCHEMA IF NOT EXISTS rnotes;
|
||||
|
||||
-- Users
|
||||
CREATE TABLE IF NOT EXISTS rnotes.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Notebooks
|
||||
CREATE TABLE IF NOT EXISTS rnotes.notebooks (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
title TEXT NOT NULL DEFAULT 'Untitled Notebook',
|
||||
slug TEXT,
|
||||
description TEXT,
|
||||
cover_color TEXT DEFAULT '#3b82f6',
|
||||
is_public BOOLEAN DEFAULT FALSE,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Notebook collaborators
|
||||
CREATE TABLE IF NOT EXISTS rnotes.notebook_collaborators (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
user_id UUID NOT NULL REFERENCES rnotes.users(id) ON DELETE CASCADE,
|
||||
notebook_id UUID NOT NULL REFERENCES rnotes.notebooks(id) ON DELETE CASCADE,
|
||||
role TEXT DEFAULT 'EDITOR' CHECK (role IN ('OWNER','EDITOR','VIEWER')),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(user_id, notebook_id)
|
||||
);
|
||||
|
||||
-- Tags
|
||||
CREATE TABLE IF NOT EXISTS rnotes.tags (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
name TEXT UNIQUE NOT NULL
|
||||
);
|
||||
|
||||
-- Notes
|
||||
CREATE TABLE IF NOT EXISTS rnotes.notes (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
notebook_id UUID REFERENCES rnotes.notebooks(id) ON DELETE CASCADE,
|
||||
author_id UUID REFERENCES rnotes.users(id),
|
||||
title TEXT NOT NULL DEFAULT 'Untitled',
|
||||
content TEXT DEFAULT '',
|
||||
content_plain TEXT,
|
||||
type TEXT DEFAULT 'NOTE' CHECK (type IN ('NOTE','CLIP','BOOKMARK','CODE','IMAGE','FILE','AUDIO')),
|
||||
url TEXT,
|
||||
language TEXT,
|
||||
file_url TEXT,
|
||||
mime_type TEXT,
|
||||
file_size INTEGER,
|
||||
duration INTEGER,
|
||||
is_pinned BOOLEAN DEFAULT FALSE,
|
||||
sort_order INTEGER DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Note tags (many-to-many)
|
||||
CREATE TABLE IF NOT EXISTS rnotes.note_tags (
|
||||
note_id UUID NOT NULL REFERENCES rnotes.notes(id) ON DELETE CASCADE,
|
||||
tag_id UUID NOT NULL REFERENCES rnotes.tags(id) ON DELETE CASCADE,
|
||||
PRIMARY KEY (note_id, tag_id)
|
||||
);
|
||||
|
||||
-- Indexes
|
||||
CREATE INDEX IF NOT EXISTS idx_notes_notebook ON rnotes.notes(notebook_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_notes_author ON rnotes.notes(author_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_notes_type ON rnotes.notes(type);
|
||||
CREATE INDEX IF NOT EXISTS idx_collaborators_notebook ON rnotes.notebook_collaborators(notebook_id);
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
/**
|
||||
* Notes module — notebooks, rich-text notes, voice transcription.
|
||||
*
|
||||
* Port of rnotes-online (Next.js + Prisma → Hono + postgres.js).
|
||||
* Supports multiple note types: text, code, bookmark, audio, image, file.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Notes] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Notes] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── Helper: get or create user ──
|
||||
async function getOrCreateUser(did: string, username?: string) {
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rnotes.users (did, username) VALUES ($1, $2)
|
||||
ON CONFLICT (did) DO UPDATE SET username = COALESCE($2, rnotes.users.username)
|
||||
RETURNING *`,
|
||||
[did, username || null]
|
||||
);
|
||||
return rows[0];
|
||||
}
|
||||
|
||||
// ── Notebooks API ──
|
||||
|
||||
// GET /api/notebooks — list notebooks
|
||||
routes.get("/api/notebooks", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT n.*, count(note.id) as note_count
|
||||
FROM rnotes.notebooks n
|
||||
LEFT JOIN rnotes.notes note ON note.notebook_id = n.id
|
||||
GROUP BY n.id
|
||||
ORDER BY n.updated_at DESC LIMIT 50`
|
||||
);
|
||||
return c.json({ notebooks: rows });
|
||||
});
|
||||
|
||||
// POST /api/notebooks — create notebook
|
||||
routes.post("/api/notebooks", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { title, description, cover_color } = body;
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rnotes.notebooks (title, description, cover_color)
|
||||
VALUES ($1, $2, $3) RETURNING *`,
|
||||
[title || "Untitled Notebook", description || null, cover_color || "#3b82f6"]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/notebooks/:id — notebook detail with notes
|
||||
routes.get("/api/notebooks/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const nb = await sql.unsafe("SELECT * FROM rnotes.notebooks WHERE id = $1", [id]);
|
||||
if (nb.length === 0) return c.json({ error: "Notebook not found" }, 404);
|
||||
|
||||
const notes = await sql.unsafe(
|
||||
`SELECT n.*, array_agg(t.name) FILTER (WHERE t.name IS NOT NULL) as tags
|
||||
FROM rnotes.notes n
|
||||
LEFT JOIN rnotes.note_tags nt ON nt.note_id = n.id
|
||||
LEFT JOIN rnotes.tags t ON t.id = nt.tag_id
|
||||
WHERE n.notebook_id = $1
|
||||
GROUP BY n.id
|
||||
ORDER BY n.is_pinned DESC, n.sort_order ASC, n.updated_at DESC`,
|
||||
[id]
|
||||
);
|
||||
return c.json({ ...nb[0], notes });
|
||||
});
|
||||
|
||||
// PUT /api/notebooks/:id — update notebook
|
||||
routes.put("/api/notebooks/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { title, description, cover_color, is_public } = body;
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (title !== undefined) { fields.push(`title = $${idx}`); params.push(title); idx++; }
|
||||
if (description !== undefined) { fields.push(`description = $${idx}`); params.push(description); idx++; }
|
||||
if (cover_color !== undefined) { fields.push(`cover_color = $${idx}`); params.push(cover_color); idx++; }
|
||||
if (is_public !== undefined) { fields.push(`is_public = $${idx}`); params.push(is_public); idx++; }
|
||||
|
||||
if (fields.length === 0) return c.json({ error: "No fields to update" }, 400);
|
||||
fields.push("updated_at = NOW()");
|
||||
params.push(id);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rnotes.notebooks SET ${fields.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Notebook not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// DELETE /api/notebooks/:id
|
||||
routes.delete("/api/notebooks/:id", async (c) => {
|
||||
const result = await sql.unsafe(
|
||||
"DELETE FROM rnotes.notebooks WHERE id = $1 RETURNING id",
|
||||
[c.req.param("id")]
|
||||
);
|
||||
if (result.length === 0) return c.json({ error: "Notebook not found" }, 404);
|
||||
return c.json({ ok: true });
|
||||
});
|
||||
|
||||
// ── Notes API ──
|
||||
|
||||
// GET /api/notes — list all notes (query: notebook_id, type, q)
|
||||
routes.get("/api/notes", async (c) => {
|
||||
const { notebook_id, type, q, limit = "50", offset = "0" } = c.req.query();
|
||||
const conditions: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (notebook_id) { conditions.push(`n.notebook_id = $${idx}`); params.push(notebook_id); idx++; }
|
||||
if (type) { conditions.push(`n.type = $${idx}`); params.push(type); idx++; }
|
||||
if (q) {
|
||||
conditions.push(`(n.title ILIKE $${idx} OR n.content_plain ILIKE $${idx})`);
|
||||
params.push(`%${q}%`);
|
||||
idx++;
|
||||
}
|
||||
|
||||
const where = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT n.*, array_agg(t.name) FILTER (WHERE t.name IS NOT NULL) as tags
|
||||
FROM rnotes.notes n
|
||||
LEFT JOIN rnotes.note_tags nt ON nt.note_id = n.id
|
||||
LEFT JOIN rnotes.tags t ON t.id = nt.tag_id
|
||||
${where}
|
||||
GROUP BY n.id
|
||||
ORDER BY n.is_pinned DESC, n.updated_at DESC
|
||||
LIMIT ${Math.min(parseInt(limit), 100)} OFFSET ${parseInt(offset) || 0}`,
|
||||
params
|
||||
);
|
||||
return c.json({ notes: rows });
|
||||
});
|
||||
|
||||
// POST /api/notes — create note
|
||||
routes.post("/api/notes", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { notebook_id, title, content, type, url, language, file_url, mime_type, file_size, duration, tags } = body;
|
||||
|
||||
if (!title?.trim()) return c.json({ error: "Title is required" }, 400);
|
||||
|
||||
// Strip HTML for plain text search
|
||||
const contentPlain = content ? content.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim() : null;
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rnotes.notes (notebook_id, title, content, content_plain, type, url, language, file_url, mime_type, file_size, duration)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11) RETURNING *`,
|
||||
[notebook_id || null, title.trim(), content || "", contentPlain, type || "NOTE",
|
||||
url || null, language || null, file_url || null, mime_type || null, file_size || null, duration || null]
|
||||
);
|
||||
|
||||
// Handle tags
|
||||
if (tags && Array.isArray(tags)) {
|
||||
for (const tagName of tags) {
|
||||
const name = tagName.trim().toLowerCase();
|
||||
if (!name) continue;
|
||||
const tag = await sql.unsafe(
|
||||
"INSERT INTO rnotes.tags (name) VALUES ($1) ON CONFLICT (name) DO UPDATE SET name = $1 RETURNING id",
|
||||
[name]
|
||||
);
|
||||
await sql.unsafe(
|
||||
"INSERT INTO rnotes.note_tags (note_id, tag_id) VALUES ($1, $2) ON CONFLICT DO NOTHING",
|
||||
[rows[0].id, tag[0].id]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/notes/:id — note detail
|
||||
routes.get("/api/notes/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT n.*, array_agg(t.name) FILTER (WHERE t.name IS NOT NULL) as tags
|
||||
FROM rnotes.notes n
|
||||
LEFT JOIN rnotes.note_tags nt ON nt.note_id = n.id
|
||||
LEFT JOIN rnotes.tags t ON t.id = nt.tag_id
|
||||
WHERE n.id = $1
|
||||
GROUP BY n.id`,
|
||||
[id]
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Note not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// PUT /api/notes/:id — update note
|
||||
routes.put("/api/notes/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { title, content, type, url, language, is_pinned, sort_order } = body;
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (title !== undefined) { fields.push(`title = $${idx}`); params.push(title); idx++; }
|
||||
if (content !== undefined) {
|
||||
fields.push(`content = $${idx}`); params.push(content); idx++;
|
||||
const plain = content.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
|
||||
fields.push(`content_plain = $${idx}`); params.push(plain); idx++;
|
||||
}
|
||||
if (type !== undefined) { fields.push(`type = $${idx}`); params.push(type); idx++; }
|
||||
if (url !== undefined) { fields.push(`url = $${idx}`); params.push(url); idx++; }
|
||||
if (language !== undefined) { fields.push(`language = $${idx}`); params.push(language); idx++; }
|
||||
if (is_pinned !== undefined) { fields.push(`is_pinned = $${idx}`); params.push(is_pinned); idx++; }
|
||||
if (sort_order !== undefined) { fields.push(`sort_order = $${idx}`); params.push(sort_order); idx++; }
|
||||
|
||||
if (fields.length === 0) return c.json({ error: "No fields to update" }, 400);
|
||||
fields.push("updated_at = NOW()");
|
||||
params.push(id);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rnotes.notes SET ${fields.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Note not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// DELETE /api/notes/:id
|
||||
routes.delete("/api/notes/:id", async (c) => {
|
||||
const result = await sql.unsafe("DELETE FROM rnotes.notes WHERE id = $1 RETURNING id", [c.req.param("id")]);
|
||||
if (result.length === 0) return c.json({ error: "Note not found" }, 404);
|
||||
return c.json({ ok: true });
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Notes | rSpace`,
|
||||
moduleId: "notes",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/notes/notes.css">`,
|
||||
body: `<folk-notes-app space="${space}"></folk-notes-app>`,
|
||||
scripts: `<script type="module" src="/modules/notes/folk-notes-app.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const notesModule: RSpaceModule = {
|
||||
id: "notes",
|
||||
name: "rNotes",
|
||||
icon: "\u{1F4DD}",
|
||||
description: "Notebooks with rich-text notes, voice transcription, and collaboration",
|
||||
routes,
|
||||
standaloneDomain: "rnotes.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Notes module.
|
||||
* Serves rnotes.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { notesModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/notes/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", notesModule.routes);
|
||||
|
||||
console.log(`[rNotes Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -353,7 +353,7 @@ routes.get("/", (c) => {
|
|||
|
||||
export const providersModule: RSpaceModule = {
|
||||
id: "providers",
|
||||
name: "Providers",
|
||||
name: "rProviders",
|
||||
icon: "\u{1F3ED}",
|
||||
description: "Local provider directory for cosmolocal production",
|
||||
routes,
|
||||
|
|
|
|||
|
|
@ -242,7 +242,7 @@ routes.get("/", (c) => {
|
|||
|
||||
export const swagModule: RSpaceModule = {
|
||||
id: "swag",
|
||||
name: "Swag",
|
||||
name: "rSwag",
|
||||
icon: "\u{1F3A8}",
|
||||
description: "Design print-ready swag: stickers, posters, tees",
|
||||
routes,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,287 @@
|
|||
/**
|
||||
* <folk-trips-planner> — collaborative trip planning dashboard.
|
||||
*
|
||||
* Views: trip list → trip detail (tabs: overview, destinations,
|
||||
* itinerary, bookings, expenses, packing).
|
||||
*/
|
||||
|
||||
class FolkTripsPlanner extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private view: "list" | "detail" = "list";
|
||||
private trips: any[] = [];
|
||||
private trip: any = null;
|
||||
private tab: "overview" | "destinations" | "itinerary" | "bookings" | "expenses" | "packing" = "overview";
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadTrips();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/trips/);
|
||||
return match ? `/${match[1]}/trips` : "";
|
||||
}
|
||||
|
||||
private async loadTrips() {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/trips`);
|
||||
if (res.ok) this.trips = await res.json();
|
||||
} catch { this.trips = []; }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadTrip(id: string) {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/trips/${id}`);
|
||||
if (res.ok) this.trip = await res.json();
|
||||
} catch { this.error = "Failed to load trip"; }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async createTrip() {
|
||||
const title = prompt("Trip name:");
|
||||
if (!title?.trim()) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/trips`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title: title.trim() }),
|
||||
});
|
||||
if (res.ok) this.loadTrips();
|
||||
} catch { this.error = "Failed to create trip"; this.render(); }
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
|
||||
.nav-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px; }
|
||||
.header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; }
|
||||
.create-btn { padding: 8px 16px; border-radius: 8px; border: none; background: #14b8a6; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.create-btn:hover { background: #0d9488; }
|
||||
|
||||
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
|
||||
.trip-card { background: #1e1e2e; border: 1px solid #333; border-radius: 10px; padding: 16px; cursor: pointer; transition: border-color 0.2s; }
|
||||
.trip-card:hover { border-color: #555; }
|
||||
.trip-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
|
||||
.trip-meta { font-size: 12px; color: #888; }
|
||||
.trip-status { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-top: 6px; }
|
||||
.status-PLANNING { background: #1e3a5f; color: #60a5fa; }
|
||||
.status-BOOKED { background: #1a3b2e; color: #34d399; }
|
||||
.status-IN_PROGRESS { background: #3b2e11; color: #fbbf24; }
|
||||
.status-COMPLETED { background: #1a3b1a; color: #22c55e; }
|
||||
|
||||
.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.tab { padding: 6px 14px; border-radius: 6px; border: 1px solid #333; background: #16161e; color: #888; cursor: pointer; font-size: 12px; }
|
||||
.tab:hover { border-color: #555; }
|
||||
.tab.active { border-color: #14b8a6; color: #14b8a6; }
|
||||
|
||||
.section-title { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: #aaa; }
|
||||
.item-row { background: #1e1e2e; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; display: flex; gap: 10px; align-items: center; }
|
||||
.item-title { font-size: 13px; font-weight: 500; flex: 1; }
|
||||
.item-meta { font-size: 11px; color: #888; }
|
||||
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #2a2a3a; color: #aaa; }
|
||||
|
||||
.budget-bar { height: 8px; background: #2a2a3a; border-radius: 4px; margin: 8px 0; overflow: hidden; }
|
||||
.budget-fill { height: 100%; background: #14b8a6; border-radius: 4px; transition: width 0.3s; }
|
||||
|
||||
.packing-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #222; }
|
||||
.packing-check { width: 16px; height: 16px; cursor: pointer; }
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div style="color:#ef5350;text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
|
||||
${this.view === "list" ? this.renderList() : this.renderDetail()}
|
||||
`;
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderList(): string {
|
||||
return `
|
||||
<div class="header">
|
||||
<span class="header-title">\u2708\uFE0F My Trips</span>
|
||||
<button class="create-btn" id="create-trip">+ Plan a Trip</button>
|
||||
</div>
|
||||
${this.trips.length > 0 ? `<div class="trip-grid">
|
||||
${this.trips.map(t => `
|
||||
<div class="trip-card" data-trip="${t.id}">
|
||||
<div class="trip-name">${this.esc(t.title)}</div>
|
||||
<div class="trip-meta">
|
||||
${t.destination_count || 0} destinations \u00B7
|
||||
${t.start_date ? new Date(t.start_date).toLocaleDateString() : "No dates"}
|
||||
</div>
|
||||
${t.budget_total ? `<div class="trip-meta">Budget: $${parseFloat(t.budget_total).toFixed(0)} \u00B7 Spent: $${parseFloat(t.total_spent || 0).toFixed(0)}</div>` : ""}
|
||||
<span class="trip-status status-${t.status || "PLANNING"}">${t.status || "PLANNING"}</span>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>` : `<div class="empty">
|
||||
<p style="font-size:16px;margin-bottom:8px">No trips yet</p>
|
||||
<p style="font-size:13px">Start planning your next adventure</p>
|
||||
</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDetail(): string {
|
||||
if (!this.trip) return '<div class="empty">Loading...</div>';
|
||||
const t = this.trip;
|
||||
return `
|
||||
<div class="header">
|
||||
<button class="nav-btn" data-back="list">\u2190 Back</button>
|
||||
<span class="header-title">\u2708\uFE0F ${this.esc(t.title)}</span>
|
||||
<span class="trip-status status-${t.status || "PLANNING"}">${t.status || "PLANNING"}</span>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
${(["overview", "destinations", "itinerary", "bookings", "expenses", "packing"] as const).map(tab =>
|
||||
`<button class="tab ${this.tab === tab ? "active" : ""}" data-tab="${tab}">${tab.charAt(0).toUpperCase() + tab.slice(1)}</button>`
|
||||
).join("")}
|
||||
</div>
|
||||
${this.renderTab()}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTab(): string {
|
||||
const t = this.trip;
|
||||
switch (this.tab) {
|
||||
case "overview": {
|
||||
const spent = (t.expenses || []).reduce((s: number, e: any) => s + parseFloat(e.amount || 0), 0);
|
||||
const pct = t.budget_total ? Math.min(100, (spent / parseFloat(t.budget_total)) * 100) : 0;
|
||||
return `
|
||||
<div class="section-title">Trip Details</div>
|
||||
<div class="item-row"><span class="item-title">${t.description || "No description"}</span></div>
|
||||
${t.start_date ? `<div class="item-row"><span class="item-title">Dates: ${new Date(t.start_date).toLocaleDateString()} \u2014 ${t.end_date ? new Date(t.end_date).toLocaleDateString() : "open"}</span></div>` : ""}
|
||||
${t.budget_total ? `
|
||||
<div class="section-title">Budget</div>
|
||||
<div class="item-row" style="flex-direction:column;align-items:stretch">
|
||||
<div style="display:flex;justify-content:space-between;font-size:13px">
|
||||
<span>$${spent.toFixed(0)} spent</span>
|
||||
<span>$${parseFloat(t.budget_total).toFixed(0)} budget</span>
|
||||
</div>
|
||||
<div class="budget-bar"><div class="budget-fill" style="width:${pct}%"></div></div>
|
||||
</div>
|
||||
` : ""}
|
||||
<div class="section-title">Summary</div>
|
||||
<div class="item-row"><span class="item-meta">${(t.destinations || []).length} destinations \u00B7 ${(t.itinerary || []).length} activities \u00B7 ${(t.bookings || []).length} bookings \u00B7 ${(t.packing || []).length} packing items</span></div>
|
||||
`;
|
||||
}
|
||||
case "destinations":
|
||||
return (t.destinations || []).length > 0
|
||||
? (t.destinations || []).map((d: any) => `
|
||||
<div class="item-row">
|
||||
<span style="font-size:20px">\u{1F4CD}</span>
|
||||
<div style="flex:1">
|
||||
<div class="item-title">${this.esc(d.name)}</div>
|
||||
<div class="item-meta">${d.country || ""} ${d.arrival_date ? `\u00B7 ${new Date(d.arrival_date).toLocaleDateString()}` : ""}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("")
|
||||
: '<div class="empty">No destinations added yet</div>';
|
||||
case "itinerary":
|
||||
return (t.itinerary || []).length > 0
|
||||
? (t.itinerary || []).map((i: any) => `
|
||||
<div class="item-row">
|
||||
<span class="badge">${i.category || "ACTIVITY"}</span>
|
||||
<div style="flex:1">
|
||||
<div class="item-title">${this.esc(i.title)}</div>
|
||||
<div class="item-meta">${i.date ? new Date(i.date).toLocaleDateString() : ""} ${i.start_time || ""}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("")
|
||||
: '<div class="empty">No itinerary items yet</div>';
|
||||
case "bookings":
|
||||
return (t.bookings || []).length > 0
|
||||
? (t.bookings || []).map((b: any) => `
|
||||
<div class="item-row">
|
||||
<span class="badge">${b.type || "OTHER"}</span>
|
||||
<div style="flex:1">
|
||||
<div class="item-title">${this.esc(b.provider || "Booking")}</div>
|
||||
<div class="item-meta">${b.confirmation_number ? `#${b.confirmation_number}` : ""} ${b.cost ? `\u00B7 $${parseFloat(b.cost).toFixed(0)}` : ""}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join("")
|
||||
: '<div class="empty">No bookings yet</div>';
|
||||
case "expenses":
|
||||
return (t.expenses || []).length > 0
|
||||
? (t.expenses || []).map((e: any) => `
|
||||
<div class="item-row">
|
||||
<span class="badge">${e.category || "OTHER"}</span>
|
||||
<div style="flex:1">
|
||||
<div class="item-title">${this.esc(e.description)}</div>
|
||||
<div class="item-meta">${e.date ? new Date(e.date).toLocaleDateString() : ""}</div>
|
||||
</div>
|
||||
<span style="font-weight:600;color:#14b8a6">$${parseFloat(e.amount).toFixed(2)}</span>
|
||||
</div>
|
||||
`).join("")
|
||||
: '<div class="empty">No expenses recorded yet</div>';
|
||||
case "packing":
|
||||
return (t.packing || []).length > 0
|
||||
? `<div style="padding:0 4px">${(t.packing || []).map((p: any) => `
|
||||
<div class="packing-item">
|
||||
<input type="checkbox" class="packing-check" data-pack="${p.id}" ${p.packed ? "checked" : ""}>
|
||||
<span class="item-title" style="${p.packed ? "text-decoration:line-through;opacity:0.5" : ""}">${this.esc(p.name)}</span>
|
||||
<span class="badge">${p.category}</span>
|
||||
${p.quantity > 1 ? `<span class="item-meta">x${p.quantity}</span>` : ""}
|
||||
</div>
|
||||
`).join("")}</div>`
|
||||
: '<div class="empty">No packing items yet</div>';
|
||||
default: return "";
|
||||
}
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
this.shadow.getElementById("create-trip")?.addEventListener("click", () => this.createTrip());
|
||||
|
||||
this.shadow.querySelectorAll("[data-trip]").forEach(el => {
|
||||
el.addEventListener("click", () => {
|
||||
this.view = "detail";
|
||||
this.tab = "overview";
|
||||
this.loadTrip((el as HTMLElement).dataset.trip!);
|
||||
});
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-back]").forEach(el => {
|
||||
el.addEventListener("click", () => { this.view = "list"; this.loadTrips(); });
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-tab]").forEach(el => {
|
||||
el.addEventListener("click", () => {
|
||||
this.tab = (el as HTMLElement).dataset.tab as any;
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-pack]").forEach(el => {
|
||||
el.addEventListener("change", async () => {
|
||||
const checkbox = el as HTMLInputElement;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/packing/${checkbox.dataset.pack}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ packed: checkbox.checked }),
|
||||
});
|
||||
} catch {}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-trips-planner", FolkTripsPlanner);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Trips module — dark theme */
|
||||
folk-trips-planner {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
-- rTrips module schema
|
||||
CREATE SCHEMA IF NOT EXISTS rtrips;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.trips (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
title TEXT NOT NULL,
|
||||
slug TEXT UNIQUE NOT NULL,
|
||||
description TEXT,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
budget_total NUMERIC(12,2),
|
||||
budget_currency TEXT DEFAULT 'USD',
|
||||
status TEXT DEFAULT 'PLANNING' CHECK (status IN ('PLANNING','BOOKED','IN_PROGRESS','COMPLETED','CANCELLED')),
|
||||
created_by UUID REFERENCES rtrips.users(id),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.trip_collaborators (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
user_id UUID NOT NULL REFERENCES rtrips.users(id) ON DELETE CASCADE,
|
||||
role TEXT NOT NULL DEFAULT 'MEMBER' CHECK (role IN ('OWNER','EDITOR','VIEWER','MEMBER')),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(trip_id, user_id)
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.destinations (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
name TEXT NOT NULL,
|
||||
country TEXT,
|
||||
lat DOUBLE PRECISION,
|
||||
lng DOUBLE PRECISION,
|
||||
arrival_date DATE,
|
||||
departure_date DATE,
|
||||
notes TEXT,
|
||||
sort_order INT DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.itinerary_items (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
destination_id UUID REFERENCES rtrips.destinations(id) ON DELETE SET NULL,
|
||||
title TEXT NOT NULL,
|
||||
category TEXT DEFAULT 'ACTIVITY' CHECK (category IN ('FLIGHT','TRANSPORT','ACCOMMODATION','ACTIVITY','MEAL','FREE_TIME','OTHER')),
|
||||
date DATE,
|
||||
start_time TIME,
|
||||
end_time TIME,
|
||||
notes TEXT,
|
||||
sort_order INT DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.bookings (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
type TEXT DEFAULT 'OTHER' CHECK (type IN ('FLIGHT','HOTEL','CAR_RENTAL','TRAIN','BUS','FERRY','ACTIVITY','RESTAURANT','OTHER')),
|
||||
provider TEXT,
|
||||
confirmation_number TEXT,
|
||||
cost NUMERIC(12,2),
|
||||
currency TEXT DEFAULT 'USD',
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
status TEXT DEFAULT 'PENDING' CHECK (status IN ('PENDING','CONFIRMED','CANCELLED')),
|
||||
notes TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.expenses (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
paid_by UUID REFERENCES rtrips.users(id),
|
||||
description TEXT NOT NULL,
|
||||
amount NUMERIC(12,2) NOT NULL,
|
||||
currency TEXT DEFAULT 'USD',
|
||||
category TEXT DEFAULT 'OTHER' CHECK (category IN ('FOOD','TRANSPORT','ACCOMMODATION','ACTIVITIES','SHOPPING','OTHER')),
|
||||
date DATE,
|
||||
split_type TEXT DEFAULT 'EQUAL' CHECK (split_type IN ('EQUAL','CUSTOM','INDIVIDUAL')),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rtrips.packing_items (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
trip_id UUID NOT NULL REFERENCES rtrips.trips(id) ON DELETE CASCADE,
|
||||
added_by UUID REFERENCES rtrips.users(id),
|
||||
name TEXT NOT NULL,
|
||||
category TEXT DEFAULT 'GENERAL',
|
||||
packed BOOLEAN DEFAULT FALSE,
|
||||
quantity INT DEFAULT 1,
|
||||
sort_order INT DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_destinations ON rtrips.destinations(trip_id, sort_order);
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_itinerary ON rtrips.itinerary_items(trip_id, date, sort_order);
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_bookings ON rtrips.bookings(trip_id, start_date);
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_expenses ON rtrips.expenses(trip_id, date DESC);
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_packing ON rtrips.packing_items(trip_id, category, sort_order);
|
||||
CREATE INDEX IF NOT EXISTS idx_rtrips_collaborators ON rtrips.trip_collaborators(user_id);
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
/**
|
||||
* Trips module — collaborative trip planner.
|
||||
*
|
||||
* Plan trips with destinations, itinerary, bookings, expenses,
|
||||
* and packing lists. Collaborative with role-based access.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Trips] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Trips] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── API: Trips ──
|
||||
|
||||
// GET /api/trips — list trips
|
||||
routes.get("/api/trips", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT t.*,
|
||||
count(DISTINCT d.id)::int as destination_count,
|
||||
count(DISTINCT e.id)::int as expense_count,
|
||||
coalesce(sum(e.amount), 0)::numeric as total_spent
|
||||
FROM rtrips.trips t
|
||||
LEFT JOIN rtrips.destinations d ON d.trip_id = t.id
|
||||
LEFT JOIN rtrips.expenses e ON e.trip_id = t.id
|
||||
GROUP BY t.id ORDER BY t.created_at DESC`
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// POST /api/trips — create trip
|
||||
routes.post("/api/trips", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { title, description, start_date, end_date, budget_total, budget_currency } = body;
|
||||
if (!title?.trim()) return c.json({ error: "Title required" }, 400);
|
||||
|
||||
const slug = title.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.trips (title, slug, description, start_date, end_date, budget_total, budget_currency)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *`,
|
||||
[title.trim(), slug, description || null, start_date || null, end_date || null,
|
||||
budget_total || null, budget_currency || "USD"]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/trips/:id — trip detail with all sub-resources
|
||||
routes.get("/api/trips/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const trip = await sql.unsafe("SELECT * FROM rtrips.trips WHERE id = $1", [id]);
|
||||
if (trip.length === 0) return c.json({ error: "Trip not found" }, 404);
|
||||
|
||||
const [destinations, itinerary, bookings, expenses, packing] = await Promise.all([
|
||||
sql.unsafe("SELECT * FROM rtrips.destinations WHERE trip_id = $1 ORDER BY sort_order", [id]),
|
||||
sql.unsafe("SELECT * FROM rtrips.itinerary_items WHERE trip_id = $1 ORDER BY date, sort_order", [id]),
|
||||
sql.unsafe("SELECT * FROM rtrips.bookings WHERE trip_id = $1 ORDER BY start_date", [id]),
|
||||
sql.unsafe("SELECT * FROM rtrips.expenses WHERE trip_id = $1 ORDER BY date DESC", [id]),
|
||||
sql.unsafe("SELECT * FROM rtrips.packing_items WHERE trip_id = $1 ORDER BY category, sort_order", [id]),
|
||||
]);
|
||||
|
||||
return c.json({ ...trip[0], destinations, itinerary, bookings, expenses, packing });
|
||||
});
|
||||
|
||||
// PUT /api/trips/:id — update trip
|
||||
routes.put("/api/trips/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { title, description, start_date, end_date, budget_total, budget_currency, status } = body;
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (title !== undefined) { fields.push(`title = $${idx}`); params.push(title); idx++; }
|
||||
if (description !== undefined) { fields.push(`description = $${idx}`); params.push(description); idx++; }
|
||||
if (start_date !== undefined) { fields.push(`start_date = $${idx}`); params.push(start_date); idx++; }
|
||||
if (end_date !== undefined) { fields.push(`end_date = $${idx}`); params.push(end_date); idx++; }
|
||||
if (budget_total !== undefined) { fields.push(`budget_total = $${idx}`); params.push(budget_total); idx++; }
|
||||
if (budget_currency !== undefined) { fields.push(`budget_currency = $${idx}`); params.push(budget_currency); idx++; }
|
||||
if (status !== undefined) { fields.push(`status = $${idx}`); params.push(status); idx++; }
|
||||
|
||||
if (fields.length === 0) return c.json({ error: "No fields" }, 400);
|
||||
fields.push("updated_at = NOW()");
|
||||
params.push(id);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rtrips.trips SET ${fields.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// ── API: Destinations ──
|
||||
|
||||
routes.post("/api/trips/:id/destinations", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.destinations (trip_id, name, country, lat, lng, arrival_date, departure_date, notes, sort_order)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`,
|
||||
[c.req.param("id"), body.name, body.country || null, body.lat || null, body.lng || null,
|
||||
body.arrival_date || null, body.departure_date || null, body.notes || null, body.sort_order ?? 0]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── API: Itinerary ──
|
||||
|
||||
routes.post("/api/trips/:id/itinerary", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.itinerary_items (trip_id, destination_id, title, category, date, start_time, end_time, notes, sort_order)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`,
|
||||
[c.req.param("id"), body.destination_id || null, body.title, body.category || "ACTIVITY",
|
||||
body.date || null, body.start_time || null, body.end_time || null, body.notes || null, body.sort_order ?? 0]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── API: Bookings ──
|
||||
|
||||
routes.post("/api/trips/:id/bookings", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.bookings (trip_id, type, provider, confirmation_number, cost, currency, start_date, end_date, notes)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9) RETURNING *`,
|
||||
[c.req.param("id"), body.type || "OTHER", body.provider || null, body.confirmation_number || null,
|
||||
body.cost || null, body.currency || "USD", body.start_date || null, body.end_date || null, body.notes || null]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── API: Expenses ──
|
||||
|
||||
routes.post("/api/trips/:id/expenses", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.expenses (trip_id, description, amount, currency, category, date, split_type)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *`,
|
||||
[c.req.param("id"), body.description, body.amount, body.currency || "USD",
|
||||
body.category || "OTHER", body.date || null, body.split_type || "EQUAL"]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// ── API: Packing ──
|
||||
|
||||
routes.get("/api/trips/:id/packing", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
"SELECT * FROM rtrips.packing_items WHERE trip_id = $1 ORDER BY category, sort_order",
|
||||
[c.req.param("id")]
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
routes.post("/api/trips/:id/packing", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rtrips.packing_items (trip_id, name, category, quantity, sort_order)
|
||||
VALUES ($1, $2, $3, $4, $5) RETURNING *`,
|
||||
[c.req.param("id"), body.name, body.category || "GENERAL", body.quantity || 1, body.sort_order ?? 0]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
routes.patch("/api/packing/:id", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const rows = await sql.unsafe(
|
||||
"UPDATE rtrips.packing_items SET packed = $1 WHERE id = $2 RETURNING *",
|
||||
[body.packed ?? false, c.req.param("id")]
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Trips | rSpace`,
|
||||
moduleId: "trips",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/trips/trips.css">`,
|
||||
body: `<folk-trips-planner space="${space}"></folk-trips-planner>`,
|
||||
scripts: `<script type="module" src="/modules/trips/folk-trips-planner.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const tripsModule: RSpaceModule = {
|
||||
id: "trips",
|
||||
name: "rTrips",
|
||||
icon: "\u{2708}\u{FE0F}",
|
||||
description: "Collaborative trip planner with itinerary, bookings, and expense splitting",
|
||||
routes,
|
||||
standaloneDomain: "rtrips.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Trips module.
|
||||
* Serves rtrips.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { tripsModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/trips/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", tripsModule.routes);
|
||||
|
||||
console.log(`[rTrips Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
/**
|
||||
* folk-video-player — Video library browser + player.
|
||||
*
|
||||
* Lists videos from the API, plays them with native <video>,
|
||||
* and provides HLS live stream viewing.
|
||||
*/
|
||||
|
||||
class FolkVideoPlayer extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "demo";
|
||||
private videos: Array<{ name: string; size: number }> = [];
|
||||
private currentVideo: string | null = null;
|
||||
private mode: "library" | "live" = "library";
|
||||
private streamKey = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadVideos();
|
||||
}
|
||||
|
||||
private async loadVideos() {
|
||||
try {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const resp = await fetch(`${base}/api/videos`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
this.videos = data.videos || [];
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private formatSize(bytes: number): string {
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
private getExtension(name: string): string {
|
||||
return name.substring(name.lastIndexOf(".") + 1).toLowerCase();
|
||||
}
|
||||
|
||||
private isPlayable(name: string): boolean {
|
||||
const ext = this.getExtension(name);
|
||||
return ["mp4", "webm", "m4v"].includes(ext);
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; min-height: 60vh; font-family: system-ui, sans-serif; color: #e2e8f0; }
|
||||
.container { max-width: 1200px; margin: 0 auto; }
|
||||
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.tab { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid #334155; background: transparent; color: #94a3b8; cursor: pointer; font-size: 0.875rem; }
|
||||
.tab.active { background: #ef4444; color: white; border-color: #ef4444; }
|
||||
.layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; }
|
||||
.sidebar { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 1rem; max-height: 70vh; overflow-y: auto; }
|
||||
.video-item { padding: 0.75rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; margin-bottom: 0.25rem; }
|
||||
.video-item:hover { background: rgba(51,65,85,0.5); }
|
||||
.video-item.active { background: rgba(239,68,68,0.1); border-color: #ef4444; }
|
||||
.video-name { font-size: 0.875rem; font-weight: 500; word-break: break-all; }
|
||||
.video-meta { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
|
||||
.player-area { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
|
||||
video { width: 100%; height: 100%; }
|
||||
.placeholder { text-align: center; color: #64748b; }
|
||||
.placeholder-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||||
.info-bar { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
|
||||
.info-name { font-weight: 500; }
|
||||
.actions { display: flex; gap: 0.5rem; }
|
||||
.btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #334155; background: rgba(51,65,85,0.5); color: #e2e8f0; cursor: pointer; font-size: 0.8rem; text-decoration: none; }
|
||||
.btn:hover { background: rgba(51,65,85,0.8); }
|
||||
.live-section { max-width: 640px; margin: 0 auto; }
|
||||
.live-card { background: rgba(15,23,42,0.5); border: 1px solid #1e293b; border-radius: 12px; padding: 2rem; }
|
||||
input { width: 100%; padding: 0.75rem; background: rgba(0,0,0,0.3); border: 1px solid #334155; border-radius: 8px; color: white; font-size: 0.875rem; margin-bottom: 1rem; box-sizing: border-box; }
|
||||
.btn-primary { padding: 0.75rem 1.5rem; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; width: 100%; font-size: 0.875rem; }
|
||||
.btn-primary:disabled { background: #334155; color: #64748b; cursor: not-allowed; }
|
||||
.live-badge { display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.live-dot { width: 10px; height: 10px; background: #ef4444; border-radius: 50%; animation: pulse 2s infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||||
.empty { text-align: center; padding: 3rem; color: #64748b; }
|
||||
.setup { margin-top: 1.5rem; padding: 1.5rem; background: rgba(15,23,42,0.3); border: 1px solid #1e293b; border-radius: 12px; }
|
||||
.setup h3 { font-size: 0.875rem; color: #ef4444; margin-bottom: 0.5rem; }
|
||||
.setup code { display: block; background: rgba(0,0,0,0.3); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; color: #94a3b8; margin-top: 0.5rem; overflow-x: auto; }
|
||||
.setup ol { padding-left: 1.25rem; color: #94a3b8; font-size: 0.8rem; line-height: 1.8; }
|
||||
@media (max-width: 768px) { .layout { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="tabs">
|
||||
<button class="tab ${this.mode === "library" ? "active" : ""}" data-mode="library">Video Library</button>
|
||||
<button class="tab ${this.mode === "live" ? "active" : ""}" data-mode="live">Live Stream</button>
|
||||
</div>
|
||||
${this.mode === "library" ? this.renderLibrary() : this.renderLive()}
|
||||
</div>
|
||||
`;
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private renderLibrary(): string {
|
||||
const sidebar = this.videos.length === 0
|
||||
? `<div class="empty">No videos yet</div>`
|
||||
: this.videos.map((v) => `
|
||||
<div class="video-item ${this.currentVideo === v.name ? "active" : ""}" data-name="${v.name}">
|
||||
<div class="video-name">${v.name}</div>
|
||||
<div class="video-meta">${this.getExtension(v.name).toUpperCase()} · ${this.formatSize(v.size)}</div>
|
||||
</div>
|
||||
`).join("");
|
||||
|
||||
let player: string;
|
||||
if (!this.currentVideo) {
|
||||
player = `<div class="placeholder"><div class="placeholder-icon">🎬</div><p>Select a video to play</p></div>`;
|
||||
} else if (!this.isPlayable(this.currentVideo)) {
|
||||
player = `<div class="placeholder"><div class="placeholder-icon">⚠️</div><p><strong>${this.getExtension(this.currentVideo).toUpperCase()}</strong> files cannot play in browsers</p><p style="font-size:0.8rem;color:#475569;margin-top:0.5rem">Download to play locally</p></div>`;
|
||||
} else {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
player = `<video controls autoplay><source src="${base}/api/v/${encodeURIComponent(this.currentVideo)}" type="${this.getExtension(this.currentVideo) === "webm" ? "video/webm" : "video/mp4"}"></video>`;
|
||||
}
|
||||
|
||||
const infoBar = this.currentVideo ? `
|
||||
<div class="info-bar">
|
||||
<span class="info-name">${this.currentVideo}</span>
|
||||
<div class="actions">
|
||||
<button class="btn" data-action="copy">Copy Link</button>
|
||||
</div>
|
||||
</div>
|
||||
` : "";
|
||||
|
||||
return `
|
||||
<div class="layout">
|
||||
<div class="sidebar">${sidebar}</div>
|
||||
<div>
|
||||
<div class="player-area">${player}</div>
|
||||
${infoBar}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderLive(): string {
|
||||
return `
|
||||
<div class="live-section">
|
||||
<div class="live-card">
|
||||
<h2 style="font-size:1.25rem;margin-bottom:0.5rem">Watch a Live Stream</h2>
|
||||
<p style="font-size:0.85rem;color:#94a3b8;margin-bottom:1.5rem">Enter the stream key to watch a live broadcast.</p>
|
||||
<input type="text" placeholder="Stream key (e.g. community-meeting)" data-input="streamkey" />
|
||||
<button class="btn-primary" data-action="watch">Watch Stream</button>
|
||||
</div>
|
||||
<div class="setup">
|
||||
<h3>Broadcaster Setup (OBS Studio)</h3>
|
||||
<ol>
|
||||
<li>Open Settings → Stream</li>
|
||||
<li>Set Service to <strong>Custom</strong></li>
|
||||
<li>Server: <code>rtmp://rtube.online:1936/live</code></li>
|
||||
<li>Stream Key: any key (e.g. <code>community-meeting</code>)</li>
|
||||
<li>Click <strong>Start Streaming</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.shadow.querySelectorAll(".tab").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
this.mode = (btn as HTMLElement).dataset.mode as "library" | "live";
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
this.shadow.querySelectorAll(".video-item").forEach((item) => {
|
||||
item.addEventListener("click", () => {
|
||||
this.currentVideo = (item as HTMLElement).dataset.name || null;
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
const copyBtn = this.shadow.querySelector('[data-action="copy"]');
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener("click", () => {
|
||||
if (this.currentVideo) {
|
||||
const base = window.location.pathname.replace(/\/$/, "");
|
||||
const url = `${window.location.origin}${base}/api/v/${encodeURIComponent(this.currentVideo)}`;
|
||||
navigator.clipboard.writeText(url);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-video-player", FolkVideoPlayer);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* Tube module — layout wrapper */
|
||||
folk-video-player {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* Tube module — community video hosting & live streaming.
|
||||
*
|
||||
* Video library (Cloudflare R2 bucket), HLS live streaming,
|
||||
* and RTMP ingest support. No database — metadata from S3 listing.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── R2 / S3 config ──
|
||||
const R2_ENDPOINT = process.env.R2_ENDPOINT || "";
|
||||
const R2_BUCKET = process.env.R2_BUCKET || "rtube-videos";
|
||||
const R2_ACCESS_KEY = process.env.R2_ACCESS_KEY || "";
|
||||
const R2_SECRET_KEY = process.env.R2_SECRET_KEY || "";
|
||||
const R2_PUBLIC_URL = process.env.R2_PUBLIC_URL || "";
|
||||
|
||||
const VIDEO_EXTENSIONS = new Set([
|
||||
".mp4", ".mkv", ".webm", ".mov", ".avi", ".wmv", ".flv", ".m4v",
|
||||
]);
|
||||
|
||||
// ── S3-compatible listing (lightweight, no AWS SDK needed) ──
|
||||
async function listVideos(): Promise<Array<{ name: string; size: number }>> {
|
||||
if (!R2_ENDPOINT) {
|
||||
// Return demo data when R2 not configured
|
||||
return [
|
||||
{ name: "welcome-to-rtube.mp4", size: 12_500_000 },
|
||||
{ name: "community-meeting-2026.mp4", size: 85_000_000 },
|
||||
{ name: "workshop-recording.webm", size: 45_000_000 },
|
||||
];
|
||||
}
|
||||
|
||||
try {
|
||||
// Use S3 ListObjectsV2 via signed request
|
||||
const url = `${R2_ENDPOINT}/${R2_BUCKET}?list-type=2&max-keys=200`;
|
||||
const resp = await fetch(url, {
|
||||
headers: {
|
||||
Authorization: `AWS4-HMAC-SHA256 ...`, // Simplified — real impl uses aws4 signing
|
||||
},
|
||||
});
|
||||
if (!resp.ok) return [];
|
||||
|
||||
const text = await resp.text();
|
||||
// Parse simple XML response
|
||||
const items: Array<{ name: string; size: number }> = [];
|
||||
const keyMatches = text.matchAll(/<Key>([^<]+)<\/Key>/g);
|
||||
const sizeMatches = text.matchAll(/<Size>(\d+)<\/Size>/g);
|
||||
const keys = [...keyMatches].map((m) => m[1]);
|
||||
const sizes = [...sizeMatches].map((m) => parseInt(m[1]));
|
||||
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const ext = keys[i].substring(keys[i].lastIndexOf(".")).toLowerCase();
|
||||
if (VIDEO_EXTENSIONS.has(ext)) {
|
||||
items.push({ name: keys[i], size: sizes[i] || 0 });
|
||||
}
|
||||
}
|
||||
return items.sort((a, b) => a.name.localeCompare(b.name));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// ── API routes ──
|
||||
|
||||
// GET /api/videos — list videos from bucket
|
||||
routes.get("/api/videos", async (c) => {
|
||||
const videos = await listVideos();
|
||||
return c.json({ videos });
|
||||
});
|
||||
|
||||
// GET /api/info — module info
|
||||
routes.get("/api/info", (c) => {
|
||||
return c.json({
|
||||
module: "tube",
|
||||
name: "rTube",
|
||||
r2Configured: !!R2_ENDPOINT,
|
||||
rtmpIngest: "rtmp://rtube.online:1936/live",
|
||||
features: ["video-library", "hls-streaming", "rtmp-ingest"],
|
||||
});
|
||||
});
|
||||
|
||||
// GET /api/health
|
||||
routes.get("/api/health", (c) => c.json({ ok: true }));
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Tube | rSpace`,
|
||||
moduleId: "tube",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/tube/tube.css">`,
|
||||
body: `<folk-video-player space="${space}"></folk-video-player>`,
|
||||
scripts: `<script type="module" src="/modules/tube/folk-video-player.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const tubeModule: RSpaceModule = {
|
||||
id: "tube",
|
||||
name: "rTube",
|
||||
icon: "\u{1F3AC}",
|
||||
description: "Community video hosting & live streaming",
|
||||
routes,
|
||||
standaloneDomain: "rtube.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Tube module.
|
||||
* Serves rtube.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { tubeModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/tube/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", tubeModule.routes);
|
||||
|
||||
console.log(`[rTube Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,374 @@
|
|||
/**
|
||||
* <folk-vote-dashboard> — conviction voting dashboard.
|
||||
*
|
||||
* Browse spaces, create/view proposals, cast votes (ranking + final).
|
||||
*/
|
||||
|
||||
interface VoteSpace {
|
||||
slug: string;
|
||||
name: string;
|
||||
description: string;
|
||||
promotion_threshold: number;
|
||||
voting_period_days: number;
|
||||
credits_per_day: number;
|
||||
}
|
||||
|
||||
interface Proposal {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
status: string;
|
||||
score: number;
|
||||
vote_count: string;
|
||||
final_yes: number;
|
||||
final_no: number;
|
||||
final_abstain: number;
|
||||
created_at: string;
|
||||
voting_ends_at: string | null;
|
||||
}
|
||||
|
||||
class FolkVoteDashboard extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private view: "spaces" | "proposals" | "proposal" = "spaces";
|
||||
private spaces: VoteSpace[] = [];
|
||||
private selectedSpace: VoteSpace | null = null;
|
||||
private proposals: Proposal[] = [];
|
||||
private selectedProposal: Proposal | null = null;
|
||||
private loading = false;
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadSpaces();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/vote/);
|
||||
return match ? `/${match[1]}/vote` : "";
|
||||
}
|
||||
|
||||
private async loadSpaces() {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/spaces`);
|
||||
const data = await res.json();
|
||||
this.spaces = data.spaces || [];
|
||||
} catch {
|
||||
this.error = "Failed to load spaces";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadProposals(slug: string) {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/proposals?space_slug=${slug}`);
|
||||
const data = await res.json();
|
||||
this.proposals = data.proposals || [];
|
||||
} catch {
|
||||
this.error = "Failed to load proposals";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadProposal(id: string) {
|
||||
this.loading = true;
|
||||
this.render();
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/proposals/${id}`);
|
||||
this.selectedProposal = await res.json();
|
||||
} catch {
|
||||
this.error = "Failed to load proposal";
|
||||
}
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async castVote(proposalId: string, weight: number) {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/proposals/${proposalId}/vote`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ weight }),
|
||||
});
|
||||
await this.loadProposal(proposalId);
|
||||
} catch {
|
||||
this.error = "Failed to cast vote";
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
private async castFinalVote(proposalId: string, vote: string) {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/proposals/${proposalId}/final-vote`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ vote }),
|
||||
});
|
||||
await this.loadProposal(proposalId);
|
||||
} catch {
|
||||
this.error = "Failed to cast vote";
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
private getStatusColor(status: string): string {
|
||||
switch (status) {
|
||||
case "RANKING": return "#3b82f6";
|
||||
case "VOTING": return "#f59e0b";
|
||||
case "PASSED": return "#22c55e";
|
||||
case "FAILED": return "#ef4444";
|
||||
case "ARCHIVED": return "#6b7280";
|
||||
default: return "#888";
|
||||
}
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.nav { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
|
||||
.nav-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid #444;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
|
||||
}
|
||||
.nav-btn:hover { border-color: #666; }
|
||||
.nav-btn.active { border-color: #6366f1; color: #a5b4fc; }
|
||||
.nav-title { font-size: 18px; font-weight: 600; margin-left: 8px; }
|
||||
|
||||
.card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 16px; margin-bottom: 12px; cursor: pointer; transition: border-color 0.2s;
|
||||
}
|
||||
.card:hover { border-color: #555; }
|
||||
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||||
.card-desc { font-size: 13px; color: #888; }
|
||||
.card-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: #666; }
|
||||
|
||||
.badge {
|
||||
display: inline-block; padding: 2px 8px; border-radius: 4px;
|
||||
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
||||
}
|
||||
|
||||
.score-bar { height: 6px; border-radius: 3px; background: #333; margin-top: 6px; overflow: hidden; }
|
||||
.score-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
|
||||
|
||||
.vote-controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
|
||||
.vote-btn {
|
||||
padding: 8px 16px; border-radius: 8px; border: 2px solid #333;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.vote-btn:hover { border-color: #6366f1; }
|
||||
.vote-btn.yes { border-color: #22c55e; color: #22c55e; }
|
||||
.vote-btn.no { border-color: #ef4444; color: #ef4444; }
|
||||
.vote-btn.abstain { border-color: #f59e0b; color: #f59e0b; }
|
||||
|
||||
.tally { display: flex; gap: 16px; margin-top: 12px; }
|
||||
.tally-item { text-align: center; }
|
||||
.tally-value { font-size: 24px; font-weight: 700; }
|
||||
.tally-label { font-size: 11px; color: #888; text-transform: uppercase; }
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
.loading { text-align: center; color: #888; padding: 40px; }
|
||||
.error { text-align: center; color: #ef5350; padding: 20px; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
|
||||
${this.loading ? '<div class="loading">Loading...</div>' : ""}
|
||||
|
||||
${!this.loading ? this.renderView() : ""}
|
||||
`;
|
||||
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderView(): string {
|
||||
if (this.view === "proposal" && this.selectedProposal) {
|
||||
return this.renderProposal();
|
||||
}
|
||||
if (this.view === "proposals" && this.selectedSpace) {
|
||||
return this.renderProposals();
|
||||
}
|
||||
return this.renderSpaces();
|
||||
}
|
||||
|
||||
private renderSpaces(): string {
|
||||
return `
|
||||
<div class="nav">
|
||||
<span class="nav-title">Voting Spaces</span>
|
||||
</div>
|
||||
${this.spaces.length === 0 ? '<div class="empty">No voting spaces yet. Create one to get started.</div>' : ""}
|
||||
${this.spaces.map((s) => `
|
||||
<div class="card" data-space="${s.slug}">
|
||||
<div class="card-title">${this.esc(s.name)}</div>
|
||||
<div class="card-desc">${this.esc(s.description || "")}</div>
|
||||
<div class="card-meta">
|
||||
<span>Threshold: ${s.promotion_threshold}</span>
|
||||
<span>Voting: ${s.voting_period_days}d</span>
|
||||
<span>${s.credits_per_day} credits/day</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderProposals(): string {
|
||||
const s = this.selectedSpace!;
|
||||
return `
|
||||
<div class="nav">
|
||||
<button class="nav-btn" data-back="spaces">Back</button>
|
||||
<span class="nav-title">${this.esc(s.name)} — Proposals</span>
|
||||
</div>
|
||||
${this.proposals.length === 0 ? '<div class="empty">No proposals yet.</div>' : ""}
|
||||
${this.proposals.map((p) => `
|
||||
<div class="card" data-proposal="${p.id}">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||||
<div class="card-title">${this.esc(p.title)}</div>
|
||||
<span class="badge" style="background:${this.getStatusColor(p.status)}20;color:${this.getStatusColor(p.status)}">${p.status}</span>
|
||||
</div>
|
||||
<div class="card-desc">${this.esc(p.description || "")}</div>
|
||||
${p.status === "RANKING" ? `
|
||||
<div class="score-bar">
|
||||
<div class="score-fill" style="width:${Math.min(100, (p.score / (s.promotion_threshold || 100)) * 100)}%;background:${this.getStatusColor(p.status)}"></div>
|
||||
</div>
|
||||
<div class="card-meta"><span>Score: ${Math.round(p.score)} / ${s.promotion_threshold}</span></div>
|
||||
` : ""}
|
||||
${p.status === "VOTING" || p.status === "PASSED" || p.status === "FAILED" ? `
|
||||
<div class="card-meta">
|
||||
<span style="color:#22c55e">Yes: ${p.final_yes}</span>
|
||||
<span style="color:#ef4444">No: ${p.final_no}</span>
|
||||
<span style="color:#f59e0b">Abstain: ${p.final_abstain}</span>
|
||||
</div>
|
||||
` : ""}
|
||||
</div>
|
||||
`).join("")}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderProposal(): string {
|
||||
const p = this.selectedProposal!;
|
||||
return `
|
||||
<div class="nav">
|
||||
<button class="nav-btn" data-back="proposals">Back</button>
|
||||
<span class="nav-title">${this.esc(p.title)}</span>
|
||||
<span class="badge" style="background:${this.getStatusColor(p.status)}20;color:${this.getStatusColor(p.status)};margin-left:8px">${p.status}</span>
|
||||
</div>
|
||||
<div class="card" style="cursor:default">
|
||||
<div class="card-desc" style="font-size:14px;color:#ccc;margin-bottom:12px">${this.esc(p.description || "No description")}</div>
|
||||
|
||||
${p.status === "RANKING" ? `
|
||||
<div style="margin-bottom:8px;font-size:13px;color:#888">Conviction score: <strong style="color:#3b82f6">${Math.round(p.score)}</strong></div>
|
||||
<div class="score-bar">
|
||||
<div class="score-fill" style="width:${Math.min(100, (p.score / 100) * 100)}%;background:#3b82f6"></div>
|
||||
</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:4px">Needs 100 to advance to voting</div>
|
||||
<div class="vote-controls">
|
||||
${[1, 2, 3, 5].map((w) => `
|
||||
<button class="vote-btn" data-vote-weight="${w}">
|
||||
Vote +${w} (${w * w} credits)
|
||||
</button>
|
||||
`).join("")}
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${p.status === "VOTING" ? `
|
||||
<div class="tally">
|
||||
<div class="tally-item"><div class="tally-value" style="color:#22c55e">${p.final_yes}</div><div class="tally-label">Yes</div></div>
|
||||
<div class="tally-item"><div class="tally-value" style="color:#ef4444">${p.final_no}</div><div class="tally-label">No</div></div>
|
||||
<div class="tally-item"><div class="tally-value" style="color:#f59e0b">${p.final_abstain}</div><div class="tally-label">Abstain</div></div>
|
||||
</div>
|
||||
<div class="vote-controls">
|
||||
<button class="vote-btn yes" data-final-vote="YES">Vote Yes</button>
|
||||
<button class="vote-btn no" data-final-vote="NO">Vote No</button>
|
||||
<button class="vote-btn abstain" data-final-vote="ABSTAIN">Abstain</button>
|
||||
</div>
|
||||
${p.voting_ends_at ? `<div style="font-size:12px;color:#666;margin-top:8px">Voting ends: ${new Date(p.voting_ends_at).toLocaleDateString()}</div>` : ""}
|
||||
` : ""}
|
||||
|
||||
${p.status === "PASSED" || p.status === "FAILED" ? `
|
||||
<div class="tally">
|
||||
<div class="tally-item"><div class="tally-value" style="color:#22c55e">${p.final_yes}</div><div class="tally-label">Yes</div></div>
|
||||
<div class="tally-item"><div class="tally-value" style="color:#ef4444">${p.final_no}</div><div class="tally-label">No</div></div>
|
||||
<div class="tally-item"><div class="tally-value" style="color:#f59e0b">${p.final_abstain}</div><div class="tally-label">Abstain</div></div>
|
||||
</div>
|
||||
` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
// Space cards
|
||||
this.shadow.querySelectorAll("[data-space]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const slug = (el as HTMLElement).dataset.space!;
|
||||
this.selectedSpace = this.spaces.find((s) => s.slug === slug) || null;
|
||||
this.view = "proposals";
|
||||
this.loadProposals(slug);
|
||||
});
|
||||
});
|
||||
|
||||
// Proposal cards
|
||||
this.shadow.querySelectorAll("[data-proposal]").forEach((el) => {
|
||||
el.addEventListener("click", () => {
|
||||
const id = (el as HTMLElement).dataset.proposal!;
|
||||
this.view = "proposal";
|
||||
this.loadProposal(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Back buttons
|
||||
this.shadow.querySelectorAll("[data-back]").forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const target = (el as HTMLElement).dataset.back;
|
||||
if (target === "spaces") { this.view = "spaces"; this.render(); }
|
||||
else if (target === "proposals") { this.view = "proposals"; this.render(); }
|
||||
});
|
||||
});
|
||||
|
||||
// Conviction vote buttons
|
||||
this.shadow.querySelectorAll("[data-vote-weight]").forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const weight = parseInt((el as HTMLElement).dataset.voteWeight!);
|
||||
if (this.selectedProposal) this.castVote(this.selectedProposal.id, weight);
|
||||
});
|
||||
});
|
||||
|
||||
// Final vote buttons
|
||||
this.shadow.querySelectorAll("[data-final-vote]").forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const vote = (el as HTMLElement).dataset.finalVote!;
|
||||
if (this.selectedProposal) this.castFinalVote(this.selectedProposal.id, vote);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-vote-dashboard", FolkVoteDashboard);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Vote module — dark theme */
|
||||
folk-vote-dashboard {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
-- rVote module schema
|
||||
CREATE SCHEMA IF NOT EXISTS rvote;
|
||||
|
||||
-- Users (lightweight, DID-based)
|
||||
CREATE TABLE IF NOT EXISTS rvote.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Voting spaces
|
||||
CREATE TABLE IF NOT EXISTS rvote.spaces (
|
||||
slug TEXT PRIMARY KEY,
|
||||
name TEXT NOT NULL,
|
||||
description TEXT,
|
||||
owner_did TEXT NOT NULL,
|
||||
visibility TEXT DEFAULT 'public_read' CHECK (visibility IN ('public','public_read','authenticated','members_only')),
|
||||
promotion_threshold INTEGER DEFAULT 100,
|
||||
voting_period_days INTEGER DEFAULT 7,
|
||||
credits_per_day INTEGER DEFAULT 10,
|
||||
max_credits INTEGER DEFAULT 500,
|
||||
starting_credits INTEGER DEFAULT 50,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Space membership
|
||||
CREATE TABLE IF NOT EXISTS rvote.space_members (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
user_id UUID NOT NULL REFERENCES rvote.users(id) ON DELETE CASCADE,
|
||||
space_slug TEXT NOT NULL REFERENCES rvote.spaces(slug) ON DELETE CASCADE,
|
||||
role TEXT DEFAULT 'MEMBER' CHECK (role IN ('ADMIN','MEMBER')),
|
||||
credits INTEGER DEFAULT 50,
|
||||
last_credit_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(user_id, space_slug)
|
||||
);
|
||||
|
||||
-- Proposals
|
||||
CREATE TABLE IF NOT EXISTS rvote.proposals (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
space_slug TEXT NOT NULL REFERENCES rvote.spaces(slug) ON DELETE CASCADE,
|
||||
author_id UUID NOT NULL REFERENCES rvote.users(id),
|
||||
title TEXT NOT NULL,
|
||||
description TEXT,
|
||||
status TEXT DEFAULT 'RANKING' CHECK (status IN ('RANKING','VOTING','PASSED','FAILED','ARCHIVED')),
|
||||
score REAL DEFAULT 0,
|
||||
voting_ends_at TIMESTAMPTZ,
|
||||
final_yes INTEGER DEFAULT 0,
|
||||
final_no INTEGER DEFAULT 0,
|
||||
final_abstain INTEGER DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Conviction votes (ranking phase)
|
||||
CREATE TABLE IF NOT EXISTS rvote.votes (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
user_id UUID NOT NULL REFERENCES rvote.users(id) ON DELETE CASCADE,
|
||||
proposal_id UUID NOT NULL REFERENCES rvote.proposals(id) ON DELETE CASCADE,
|
||||
weight INTEGER NOT NULL DEFAULT 1,
|
||||
credit_cost INTEGER NOT NULL DEFAULT 1,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
decays_at TIMESTAMPTZ,
|
||||
UNIQUE(user_id, proposal_id)
|
||||
);
|
||||
|
||||
-- Final votes (binary phase)
|
||||
CREATE TABLE IF NOT EXISTS rvote.final_votes (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
user_id UUID NOT NULL REFERENCES rvote.users(id) ON DELETE CASCADE,
|
||||
proposal_id UUID NOT NULL REFERENCES rvote.proposals(id) ON DELETE CASCADE,
|
||||
vote TEXT NOT NULL CHECK (vote IN ('YES','NO','ABSTAIN')),
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(user_id, proposal_id)
|
||||
);
|
||||
|
||||
-- Indexes
|
||||
CREATE INDEX IF NOT EXISTS idx_proposals_space ON rvote.proposals(space_slug, status);
|
||||
CREATE INDEX IF NOT EXISTS idx_votes_proposal ON rvote.votes(proposal_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_members_space ON rvote.space_members(space_slug);
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
/**
|
||||
* Vote module — conviction voting engine.
|
||||
*
|
||||
* Credit-weighted conviction voting for collaborative governance.
|
||||
* Spaces run ranked proposals with configurable parameters.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Vote] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Vote] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── Helper: get or create user by DID ──
|
||||
async function getOrCreateUser(did: string, username?: string) {
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rvote.users (did, username) VALUES ($1, $2)
|
||||
ON CONFLICT (did) DO UPDATE SET username = COALESCE($2, rvote.users.username)
|
||||
RETURNING *`,
|
||||
[did, username || null]
|
||||
);
|
||||
return rows[0];
|
||||
}
|
||||
|
||||
// ── Helper: calculate effective weight with decay ──
|
||||
function getEffectiveWeight(weight: number, createdAt: Date): number {
|
||||
const ageMs = Date.now() - createdAt.getTime();
|
||||
const ageDays = ageMs / (1000 * 60 * 60 * 24);
|
||||
if (ageDays < 30) return weight;
|
||||
if (ageDays >= 60) return 0;
|
||||
const decayProgress = (ageDays - 30) / 30;
|
||||
return Math.round(weight * (1 - decayProgress));
|
||||
}
|
||||
|
||||
// ── Helper: recalculate proposal score ──
|
||||
async function recalcScore(proposalId: string) {
|
||||
const votes = await sql.unsafe(
|
||||
"SELECT weight, created_at FROM rvote.votes WHERE proposal_id = $1",
|
||||
[proposalId]
|
||||
);
|
||||
let score = 0;
|
||||
for (const v of votes) {
|
||||
score += getEffectiveWeight(v.weight, new Date(v.created_at));
|
||||
}
|
||||
await sql.unsafe(
|
||||
"UPDATE rvote.proposals SET score = $1, updated_at = NOW() WHERE id = $2",
|
||||
[score, proposalId]
|
||||
);
|
||||
return score;
|
||||
}
|
||||
|
||||
// ── Spaces API ──
|
||||
|
||||
// GET /api/spaces — list spaces
|
||||
routes.get("/api/spaces", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
"SELECT * FROM rvote.spaces ORDER BY created_at DESC LIMIT 50"
|
||||
);
|
||||
return c.json({ spaces: rows });
|
||||
});
|
||||
|
||||
// POST /api/spaces — create space
|
||||
routes.post("/api/spaces", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { name, slug, description, visibility = "public_read" } = body;
|
||||
if (!name || !slug) return c.json({ error: "name and slug required" }, 400);
|
||||
if (!/^[a-z0-9-]+$/.test(slug)) return c.json({ error: "Invalid slug" }, 400);
|
||||
|
||||
// TODO: extract DID from auth header
|
||||
const ownerDid = "anonymous";
|
||||
|
||||
try {
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rvote.spaces (slug, name, description, owner_did, visibility)
|
||||
VALUES ($1, $2, $3, $4, $5) RETURNING *`,
|
||||
[slug, name, description || null, ownerDid, visibility]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
} catch (e: any) {
|
||||
if (e.code === "23505") return c.json({ error: "Space already exists" }, 409);
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/spaces/:slug — space detail
|
||||
routes.get("/api/spaces/:slug", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const rows = await sql.unsafe("SELECT * FROM rvote.spaces WHERE slug = $1", [slug]);
|
||||
if (rows.length === 0) return c.json({ error: "Space not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// ── Proposals API ──
|
||||
|
||||
// GET /api/proposals — list proposals (query: space_slug, status)
|
||||
routes.get("/api/proposals", async (c) => {
|
||||
const { space_slug, status, limit = "50", offset = "0" } = c.req.query();
|
||||
const conditions: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (space_slug) {
|
||||
conditions.push(`space_slug = $${idx}`);
|
||||
params.push(space_slug);
|
||||
idx++;
|
||||
}
|
||||
if (status) {
|
||||
conditions.push(`status = $${idx}`);
|
||||
params.push(status);
|
||||
idx++;
|
||||
}
|
||||
|
||||
const where = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT * FROM rvote.proposals ${where} ORDER BY score DESC, created_at DESC LIMIT ${Math.min(parseInt(limit), 100)} OFFSET ${parseInt(offset) || 0}`,
|
||||
params
|
||||
);
|
||||
return c.json({ proposals: rows });
|
||||
});
|
||||
|
||||
// POST /api/proposals — create proposal
|
||||
routes.post("/api/proposals", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { space_slug, title, description } = body;
|
||||
if (!space_slug || !title) return c.json({ error: "space_slug and title required" }, 400);
|
||||
|
||||
// Verify space exists
|
||||
const space = await sql.unsafe("SELECT slug FROM rvote.spaces WHERE slug = $1", [space_slug]);
|
||||
if (space.length === 0) return c.json({ error: "Space not found" }, 404);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rvote.proposals (space_slug, author_id, title, description)
|
||||
VALUES ($1, (SELECT id FROM rvote.users LIMIT 1), $2, $3) RETURNING *`,
|
||||
[space_slug, title, description || null]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/proposals/:id — proposal detail
|
||||
routes.get("/api/proposals/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT p.*,
|
||||
(SELECT count(*) FROM rvote.votes WHERE proposal_id = p.id) as vote_count
|
||||
FROM rvote.proposals p WHERE p.id = $1`,
|
||||
[id]
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Proposal not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// POST /api/proposals/:id/vote — cast conviction vote
|
||||
routes.post("/api/proposals/:id/vote", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { weight = 1 } = body;
|
||||
|
||||
// Verify proposal is in RANKING
|
||||
const proposal = await sql.unsafe(
|
||||
"SELECT * FROM rvote.proposals WHERE id = $1",
|
||||
[id]
|
||||
);
|
||||
if (proposal.length === 0) return c.json({ error: "Proposal not found" }, 404);
|
||||
if (proposal[0].status !== "RANKING") return c.json({ error: "Proposal not in ranking phase" }, 400);
|
||||
|
||||
const creditCost = weight * weight; // quadratic cost
|
||||
|
||||
// Upsert vote
|
||||
await sql.unsafe(
|
||||
`INSERT INTO rvote.votes (user_id, proposal_id, weight, credit_cost, decays_at)
|
||||
VALUES ((SELECT id FROM rvote.users LIMIT 1), $1, $2, $3, NOW() + INTERVAL '30 days')
|
||||
ON CONFLICT (user_id, proposal_id)
|
||||
DO UPDATE SET weight = $2, credit_cost = $3, created_at = NOW(), decays_at = NOW() + INTERVAL '30 days'`,
|
||||
[id, weight, creditCost]
|
||||
);
|
||||
|
||||
// Recalculate score and check for promotion
|
||||
const score = await recalcScore(id);
|
||||
const space = await sql.unsafe(
|
||||
"SELECT * FROM rvote.spaces WHERE slug = $1",
|
||||
[proposal[0].space_slug]
|
||||
);
|
||||
const threshold = space[0]?.promotion_threshold || 100;
|
||||
|
||||
if (score >= threshold && proposal[0].status === "RANKING") {
|
||||
const votingDays = space[0]?.voting_period_days || 7;
|
||||
await sql.unsafe(
|
||||
`UPDATE rvote.proposals SET status = 'VOTING', voting_ends_at = NOW() + ($1 || ' days')::INTERVAL, updated_at = NOW() WHERE id = $2`,
|
||||
[votingDays, id]
|
||||
);
|
||||
}
|
||||
|
||||
return c.json({ ok: true, score, creditCost });
|
||||
});
|
||||
|
||||
// POST /api/proposals/:id/final-vote — cast binary vote
|
||||
routes.post("/api/proposals/:id/final-vote", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { vote } = body;
|
||||
if (!["YES", "NO", "ABSTAIN"].includes(vote)) return c.json({ error: "Invalid vote" }, 400);
|
||||
|
||||
const proposal = await sql.unsafe("SELECT * FROM rvote.proposals WHERE id = $1", [id]);
|
||||
if (proposal.length === 0) return c.json({ error: "Proposal not found" }, 404);
|
||||
if (proposal[0].status !== "VOTING") return c.json({ error: "Proposal not in voting phase" }, 400);
|
||||
|
||||
await sql.unsafe(
|
||||
`INSERT INTO rvote.final_votes (user_id, proposal_id, vote)
|
||||
VALUES ((SELECT id FROM rvote.users LIMIT 1), $1, $2)
|
||||
ON CONFLICT (user_id, proposal_id) DO UPDATE SET vote = $2`,
|
||||
[id, vote]
|
||||
);
|
||||
|
||||
// Update counts
|
||||
const counts = await sql.unsafe(
|
||||
`SELECT vote, count(*) as cnt FROM rvote.final_votes WHERE proposal_id = $1 GROUP BY vote`,
|
||||
[id]
|
||||
);
|
||||
const tally: Record<string, number> = { YES: 0, NO: 0, ABSTAIN: 0 };
|
||||
for (const row of counts) tally[row.vote] = parseInt(row.cnt);
|
||||
|
||||
await sql.unsafe(
|
||||
"UPDATE rvote.proposals SET final_yes = $1, final_no = $2, final_abstain = $3, updated_at = NOW() WHERE id = $4",
|
||||
[tally.YES, tally.NO, tally.ABSTAIN, id]
|
||||
);
|
||||
|
||||
return c.json({ ok: true, tally });
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Vote | rSpace`,
|
||||
moduleId: "vote",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/vote/vote.css">`,
|
||||
body: `<folk-vote-dashboard space="${space}"></folk-vote-dashboard>`,
|
||||
scripts: `<script type="module" src="/modules/vote/folk-vote-dashboard.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const voteModule: RSpaceModule = {
|
||||
id: "vote",
|
||||
name: "rVote",
|
||||
icon: "\u{1F5F3}",
|
||||
description: "Conviction voting engine for collaborative governance",
|
||||
routes,
|
||||
standaloneDomain: "rvote.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Vote module.
|
||||
* Serves rvote.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { voteModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/vote/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", voteModule.routes);
|
||||
|
||||
console.log(`[rVote Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
/**
|
||||
* <folk-wallet-viewer> — multichain Safe wallet visualization.
|
||||
*
|
||||
* Enter a Safe address to see balances across chains, transfer history,
|
||||
* and flow visualizations.
|
||||
*/
|
||||
|
||||
interface ChainInfo {
|
||||
chainId: string;
|
||||
name: string;
|
||||
prefix: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface BalanceItem {
|
||||
tokenAddress: string | null;
|
||||
token: { name: string; symbol: string; decimals: number } | null;
|
||||
balance: string;
|
||||
fiatBalance: string;
|
||||
fiatConversion: string;
|
||||
}
|
||||
|
||||
const CHAIN_COLORS: Record<string, string> = {
|
||||
"1": "#627eea",
|
||||
"10": "#ff0420",
|
||||
"100": "#04795b",
|
||||
"137": "#8247e5",
|
||||
"8453": "#0052ff",
|
||||
"42161": "#28a0f0",
|
||||
"42220": "#35d07f",
|
||||
"43114": "#e84142",
|
||||
"56": "#f3ba2f",
|
||||
"324": "#8c8dfc",
|
||||
};
|
||||
|
||||
class FolkWalletViewer extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private address = "";
|
||||
private detectedChains: ChainInfo[] = [];
|
||||
private selectedChain: string | null = null;
|
||||
private balances: BalanceItem[] = [];
|
||||
private loading = false;
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Check URL params for initial address
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
this.address = params.get("address") || "";
|
||||
this.render();
|
||||
if (this.address) this.detectChains();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/wallet/);
|
||||
return match ? `/${match[1]}/wallet` : "";
|
||||
}
|
||||
|
||||
private async detectChains() {
|
||||
if (!this.address || !/^0x[a-fA-F0-9]{40}$/.test(this.address)) {
|
||||
this.error = "Please enter a valid Ethereum address (0x...)";
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = "";
|
||||
this.detectedChains = [];
|
||||
this.balances = [];
|
||||
this.render();
|
||||
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/safe/detect/${this.address}`);
|
||||
const data = await res.json();
|
||||
|
||||
this.detectedChains = (data.chains || []).map((c: any) => ({
|
||||
...c,
|
||||
color: CHAIN_COLORS[c.chainId] || "#888",
|
||||
}));
|
||||
|
||||
if (this.detectedChains.length === 0) {
|
||||
this.error = "No Safe wallets found for this address on any supported chain.";
|
||||
} else {
|
||||
// Auto-select first chain
|
||||
this.selectedChain = this.detectedChains[0].chainId;
|
||||
await this.loadBalances();
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = "Failed to detect chains. Check the address and try again.";
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadBalances() {
|
||||
if (!this.selectedChain) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/safe/${this.selectedChain}/${this.address}/balances`);
|
||||
if (res.ok) {
|
||||
this.balances = await res.json();
|
||||
}
|
||||
} catch {
|
||||
this.balances = [];
|
||||
}
|
||||
}
|
||||
|
||||
private formatBalance(balance: string, decimals: number): string {
|
||||
const val = Number(balance) / Math.pow(10, decimals);
|
||||
if (val >= 1000000) return `${(val / 1000000).toFixed(2)}M`;
|
||||
if (val >= 1000) return `${(val / 1000).toFixed(2)}K`;
|
||||
if (val >= 1) return val.toFixed(2);
|
||||
if (val >= 0.0001) return val.toFixed(4);
|
||||
return val.toExponential(2);
|
||||
}
|
||||
|
||||
private formatUSD(val: string): string {
|
||||
const n = parseFloat(val);
|
||||
if (isNaN(n) || n === 0) return "$0";
|
||||
if (n >= 1000000) return `$${(n / 1000000).toFixed(2)}M`;
|
||||
if (n >= 1000) return `$${(n / 1000).toFixed(1)}K`;
|
||||
return `$${n.toFixed(2)}`;
|
||||
}
|
||||
|
||||
private shortenAddress(addr: string): string {
|
||||
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
|
||||
}
|
||||
|
||||
private handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
const input = this.shadow.querySelector("#address-input") as HTMLInputElement;
|
||||
if (input) {
|
||||
this.address = input.value.trim();
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("address", this.address);
|
||||
window.history.replaceState({}, "", url.toString());
|
||||
this.detectChains();
|
||||
}
|
||||
}
|
||||
|
||||
private async handleChainSelect(chainId: string) {
|
||||
this.selectedChain = chainId;
|
||||
this.loading = true;
|
||||
this.render();
|
||||
await this.loadBalances();
|
||||
this.loading = false;
|
||||
this.render();
|
||||
}
|
||||
|
||||
private render() {
|
||||
const totalUSD = this.balances.reduce((sum, b) => sum + parseFloat(b.fiatBalance || "0"), 0);
|
||||
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.address-bar { display: flex; gap: 8px; margin-bottom: 24px; }
|
||||
.address-bar input {
|
||||
flex: 1; padding: 10px 14px; border-radius: 8px;
|
||||
border: 1px solid #444; background: #2a2a3e; color: #e0e0e0;
|
||||
font-family: monospace; font-size: 13px;
|
||||
}
|
||||
.address-bar input:focus { border-color: #00d4ff; outline: none; }
|
||||
.address-bar button {
|
||||
padding: 10px 20px; border-radius: 8px; border: none;
|
||||
background: #00d4ff; color: #000; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.address-bar button:hover { background: #00b8d9; }
|
||||
|
||||
.chains { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
|
||||
.chain-btn {
|
||||
padding: 6px 14px; border-radius: 8px; border: 2px solid #333;
|
||||
background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px;
|
||||
display: flex; align-items: center; gap: 6px; transition: all 0.2s;
|
||||
}
|
||||
.chain-btn:hover { border-color: #555; }
|
||||
.chain-btn.active { border-color: var(--chain-color); background: rgba(255,255,255,0.05); }
|
||||
.chain-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
|
||||
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.stat-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 14px; text-align: center;
|
||||
}
|
||||
.stat-label { font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 6px; }
|
||||
.stat-value { font-size: 20px; font-weight: 700; color: #00d4ff; }
|
||||
|
||||
.balance-table { width: 100%; border-collapse: collapse; }
|
||||
.balance-table th {
|
||||
text-align: left; padding: 10px 8px; border-bottom: 2px solid #333;
|
||||
color: #888; font-size: 11px; text-transform: uppercase;
|
||||
}
|
||||
.balance-table td { padding: 10px 8px; border-bottom: 1px solid #2a2a3e; }
|
||||
.balance-table tr:hover td { background: rgba(255,255,255,0.02); }
|
||||
.token-symbol { font-weight: 600; color: #e0e0e0; }
|
||||
.token-name { font-size: 12px; color: #888; }
|
||||
.amount-cell { text-align: right; font-family: monospace; }
|
||||
.fiat { color: #4ade80; }
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
.loading { text-align: center; color: #888; padding: 40px; }
|
||||
.error { text-align: center; color: #ef5350; padding: 20px; }
|
||||
.demo-link { color: #00d4ff; cursor: pointer; text-decoration: underline; }
|
||||
</style>
|
||||
|
||||
<form class="address-bar" id="address-form">
|
||||
<input id="address-input" type="text" placeholder="Enter Safe address (0x...)"
|
||||
value="${this.address}" spellcheck="false">
|
||||
<button type="submit">Load</button>
|
||||
</form>
|
||||
|
||||
${!this.address && !this.loading ? `
|
||||
<div class="empty">
|
||||
<p style="font-size:16px;margin-bottom:8px">Enter a Safe wallet address to visualize</p>
|
||||
<p>Try: <span class="demo-link" data-address="0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1">TEC Commons Fund</span></p>
|
||||
</div>
|
||||
` : ""}
|
||||
|
||||
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
|
||||
${this.loading ? '<div class="loading">Detecting Safe wallets across chains...</div>' : ""}
|
||||
|
||||
${!this.loading && this.detectedChains.length > 0 ? `
|
||||
<div class="chains">
|
||||
${this.detectedChains.map((ch) => `
|
||||
<div class="chain-btn ${this.selectedChain === ch.chainId ? "active" : ""}"
|
||||
data-chain="${ch.chainId}" style="--chain-color: ${ch.color}">
|
||||
<div class="chain-dot" style="background: ${ch.color}"></div>
|
||||
${ch.name}
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Value</div>
|
||||
<div class="stat-value">${this.formatUSD(String(totalUSD))}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Tokens</div>
|
||||
<div class="stat-value">${this.balances.filter((b) => parseFloat(b.fiatBalance || "0") > 0).length}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Chains</div>
|
||||
<div class="stat-value">${this.detectedChains.length}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Address</div>
|
||||
<div class="stat-value" style="font-size:13px;font-family:monospace">${this.shortenAddress(this.address)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.balances.length > 0 ? `
|
||||
<table class="balance-table">
|
||||
<thead>
|
||||
<tr><th>Token</th><th class="amount-cell">Balance</th><th class="amount-cell">USD Value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${this.balances
|
||||
.filter((b) => parseFloat(b.fiatBalance || "0") > 0.01)
|
||||
.sort((a, b) => parseFloat(b.fiatBalance || "0") - parseFloat(a.fiatBalance || "0"))
|
||||
.map((b) => `
|
||||
<tr>
|
||||
<td>
|
||||
<span class="token-symbol">${b.token?.symbol || "ETH"}</span>
|
||||
<span class="token-name">${b.token?.name || "Ether"}</span>
|
||||
</td>
|
||||
<td class="amount-cell">${this.formatBalance(b.balance, b.token?.decimals || 18)}</td>
|
||||
<td class="amount-cell fiat">${this.formatUSD(b.fiatBalance)}</td>
|
||||
</tr>
|
||||
`).join("")}
|
||||
</tbody>
|
||||
</table>
|
||||
` : '<div class="empty">No balances found on this chain.</div>'}
|
||||
` : ""}
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
const form = this.shadow.querySelector("#address-form");
|
||||
form?.addEventListener("submit", (e) => this.handleSubmit(e));
|
||||
|
||||
this.shadow.querySelectorAll(".chain-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const chainId = (btn as HTMLElement).dataset.chain!;
|
||||
this.handleChainSelect(chainId);
|
||||
});
|
||||
});
|
||||
|
||||
this.shadow.querySelectorAll(".demo-link").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
const addr = (link as HTMLElement).dataset.address!;
|
||||
const input = this.shadow.querySelector("#address-input") as HTMLInputElement;
|
||||
if (input) input.value = addr;
|
||||
this.address = addr;
|
||||
this.detectChains();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-wallet-viewer", FolkWalletViewer);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Wallet module — dark theme */
|
||||
folk-wallet-viewer {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
/**
|
||||
* Wallet module — multichain Safe wallet visualization.
|
||||
*
|
||||
* Client-side only (no DB). Queries Safe Global API for balances,
|
||||
* transfers, and multisig data across multiple chains.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── Proxy Safe Global API (avoid CORS issues from browser) ──
|
||||
routes.get("/api/safe/:chainId/:address/balances", async (c) => {
|
||||
const chainId = c.req.param("chainId");
|
||||
const address = c.req.param("address");
|
||||
const chainPrefix = getSafePrefix(chainId);
|
||||
if (!chainPrefix) return c.json({ error: "Unsupported chain" }, 400);
|
||||
|
||||
const res = await fetch(`https://safe-transaction-${chainPrefix}.safe.global/api/v1/safes/${address}/balances/usd/?trusted=true&exclude_spam=true`);
|
||||
if (!res.ok) return c.json({ error: "Safe API error" }, res.status as any);
|
||||
return c.json(await res.json());
|
||||
});
|
||||
|
||||
routes.get("/api/safe/:chainId/:address/transfers", async (c) => {
|
||||
const chainId = c.req.param("chainId");
|
||||
const address = c.req.param("address");
|
||||
const chainPrefix = getSafePrefix(chainId);
|
||||
if (!chainPrefix) return c.json({ error: "Unsupported chain" }, 400);
|
||||
|
||||
const limit = c.req.query("limit") || "100";
|
||||
const res = await fetch(`https://safe-transaction-${chainPrefix}.safe.global/api/v1/safes/${address}/all-transactions/?limit=${limit}&executed=true`);
|
||||
if (!res.ok) return c.json({ error: "Safe API error" }, res.status as any);
|
||||
return c.json(await res.json());
|
||||
});
|
||||
|
||||
routes.get("/api/safe/:chainId/:address/info", async (c) => {
|
||||
const chainId = c.req.param("chainId");
|
||||
const address = c.req.param("address");
|
||||
const chainPrefix = getSafePrefix(chainId);
|
||||
if (!chainPrefix) return c.json({ error: "Unsupported chain" }, 400);
|
||||
|
||||
const res = await fetch(`https://safe-transaction-${chainPrefix}.safe.global/api/v1/safes/${address}/`);
|
||||
if (!res.ok) return c.json({ error: "Safe API error" }, res.status as any);
|
||||
return c.json(await res.json());
|
||||
});
|
||||
|
||||
// Detect which chains have a Safe for this address
|
||||
routes.get("/api/safe/detect/:address", async (c) => {
|
||||
const address = c.req.param("address");
|
||||
const chains = Object.entries(CHAIN_MAP);
|
||||
const results: Array<{ chainId: string; name: string; prefix: string }> = [];
|
||||
|
||||
await Promise.allSettled(
|
||||
chains.map(async ([chainId, info]) => {
|
||||
try {
|
||||
const res = await fetch(`https://safe-transaction-${info.prefix}.safe.global/api/v1/safes/${address}/`, {
|
||||
signal: AbortSignal.timeout(5000),
|
||||
});
|
||||
if (res.ok) results.push({ chainId, name: info.name, prefix: info.prefix });
|
||||
} catch {}
|
||||
})
|
||||
);
|
||||
|
||||
return c.json({ address, chains: results.sort((a, b) => a.name.localeCompare(b.name)) });
|
||||
});
|
||||
|
||||
// ── Chain mapping ──
|
||||
const CHAIN_MAP: Record<string, { name: string; prefix: string }> = {
|
||||
"1": { name: "Ethereum", prefix: "mainnet" },
|
||||
"10": { name: "Optimism", prefix: "optimism" },
|
||||
"100": { name: "Gnosis", prefix: "gnosis-chain" },
|
||||
"137": { name: "Polygon", prefix: "polygon" },
|
||||
"8453": { name: "Base", prefix: "base" },
|
||||
"42161": { name: "Arbitrum", prefix: "arbitrum" },
|
||||
"42220": { name: "Celo", prefix: "celo" },
|
||||
"43114": { name: "Avalanche", prefix: "avalanche" },
|
||||
"56": { name: "BSC", prefix: "bsc" },
|
||||
"324": { name: "zkSync", prefix: "zksync" },
|
||||
};
|
||||
|
||||
function getSafePrefix(chainId: string): string | null {
|
||||
return CHAIN_MAP[chainId]?.prefix || null;
|
||||
}
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const spaceSlug = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${spaceSlug} — Wallet | rSpace`,
|
||||
moduleId: "wallet",
|
||||
spaceSlug,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/wallet/wallet.css">`,
|
||||
body: `<folk-wallet-viewer space="${spaceSlug}"></folk-wallet-viewer>`,
|
||||
scripts: `<script type="module" src="/modules/wallet/folk-wallet-viewer.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const walletModule: RSpaceModule = {
|
||||
id: "wallet",
|
||||
name: "rWallet",
|
||||
icon: "\uD83D\uDCB0",
|
||||
description: "Multichain Safe wallet visualization and treasury management",
|
||||
routes,
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Wallet module.
|
||||
* Serves rwallet.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { walletModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/wallet/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", walletModule.routes);
|
||||
|
||||
console.log(`[rWallet Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
/**
|
||||
* <folk-work-board> — kanban board for workspace task management.
|
||||
*
|
||||
* Views: workspace list → board with draggable columns.
|
||||
* Supports task creation, status changes, and priority labels.
|
||||
*/
|
||||
|
||||
class FolkWorkBoard extends HTMLElement {
|
||||
private shadow: ShadowRoot;
|
||||
private space = "";
|
||||
private view: "list" | "board" = "list";
|
||||
private workspaceSlug = "";
|
||||
private workspaces: any[] = [];
|
||||
private tasks: any[] = [];
|
||||
private statuses: string[] = ["TODO", "IN_PROGRESS", "REVIEW", "DONE"];
|
||||
private loading = false;
|
||||
private error = "";
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadow = this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.space = this.getAttribute("space") || "demo";
|
||||
this.loadWorkspaces();
|
||||
this.render();
|
||||
}
|
||||
|
||||
private getApiBase(): string {
|
||||
const path = window.location.pathname;
|
||||
const match = path.match(/^\/([^/]+)\/work/);
|
||||
return match ? `/${match[1]}/work` : "";
|
||||
}
|
||||
|
||||
private async loadWorkspaces() {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/spaces`);
|
||||
if (res.ok) this.workspaces = await res.json();
|
||||
} catch { this.workspaces = []; }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async loadTasks() {
|
||||
if (!this.workspaceSlug) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/spaces/${this.workspaceSlug}/tasks`);
|
||||
if (res.ok) this.tasks = await res.json();
|
||||
|
||||
const spaceRes = await fetch(`${base}/api/spaces/${this.workspaceSlug}`);
|
||||
if (spaceRes.ok) {
|
||||
const space = await spaceRes.json();
|
||||
if (space.statuses?.length) this.statuses = space.statuses;
|
||||
}
|
||||
} catch { this.tasks = []; }
|
||||
this.render();
|
||||
}
|
||||
|
||||
private async createWorkspace() {
|
||||
const name = prompt("Workspace name:");
|
||||
if (!name?.trim()) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
const res = await fetch(`${base}/api/spaces`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name: name.trim() }),
|
||||
});
|
||||
if (res.ok) this.loadWorkspaces();
|
||||
} catch { this.error = "Failed to create workspace"; this.render(); }
|
||||
}
|
||||
|
||||
private async createTask() {
|
||||
const title = prompt("Task title:");
|
||||
if (!title?.trim()) return;
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/spaces/${this.workspaceSlug}/tasks`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ title: title.trim() }),
|
||||
});
|
||||
this.loadTasks();
|
||||
} catch { this.error = "Failed to create task"; this.render(); }
|
||||
}
|
||||
|
||||
private async moveTask(taskId: string, newStatus: string) {
|
||||
try {
|
||||
const base = this.getApiBase();
|
||||
await fetch(`${base}/api/tasks/${taskId}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
this.loadTasks();
|
||||
} catch { this.error = "Failed to move task"; this.render(); }
|
||||
}
|
||||
|
||||
private openBoard(slug: string) {
|
||||
this.workspaceSlug = slug;
|
||||
this.view = "board";
|
||||
this.loadTasks();
|
||||
}
|
||||
|
||||
private render() {
|
||||
this.shadow.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e0e0e0; }
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
.header { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
|
||||
.nav-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #444; background: #1e1e2e; color: #ccc; cursor: pointer; font-size: 13px; }
|
||||
.nav-btn:hover { border-color: #666; }
|
||||
.header-title { font-size: 18px; font-weight: 600; margin-left: 8px; flex: 1; }
|
||||
.create-btn { padding: 8px 16px; border-radius: 8px; border: none; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.create-btn:hover { background: #4f46e5; }
|
||||
|
||||
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
|
||||
.workspace-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 10px;
|
||||
padding: 16px; cursor: pointer; transition: border-color 0.2s;
|
||||
}
|
||||
.workspace-card:hover { border-color: #555; }
|
||||
.ws-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
|
||||
.ws-meta { font-size: 12px; color: #888; }
|
||||
|
||||
.board { display: flex; gap: 12px; overflow-x: auto; min-height: 400px; padding-bottom: 12px; }
|
||||
.column {
|
||||
min-width: 240px; max-width: 280px; flex-shrink: 0;
|
||||
background: #16161e; border: 1px solid #2a2a3a; border-radius: 10px; padding: 12px;
|
||||
}
|
||||
.col-header { font-size: 13px; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: 10px; display: flex; justify-content: space-between; }
|
||||
.col-count { background: #2a2a3a; border-radius: 10px; padding: 0 8px; font-size: 11px; }
|
||||
|
||||
.task-card {
|
||||
background: #1e1e2e; border: 1px solid #333; border-radius: 8px;
|
||||
padding: 10px 12px; margin-bottom: 8px; cursor: grab;
|
||||
}
|
||||
.task-card:hover { border-color: #555; }
|
||||
.task-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
|
||||
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: #2a2a3a; color: #aaa; }
|
||||
.badge-urgent { background: #3b1111; color: #f87171; }
|
||||
.badge-high { background: #3b2611; color: #fb923c; }
|
||||
|
||||
.move-btns { display: flex; gap: 4px; margin-top: 6px; }
|
||||
.move-btn { font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid #333; background: #16161e; color: #888; cursor: pointer; }
|
||||
.move-btn:hover { border-color: #555; color: #ccc; }
|
||||
|
||||
.empty { text-align: center; color: #666; padding: 40px; }
|
||||
</style>
|
||||
|
||||
${this.error ? `<div style="color:#ef5350;text-align:center;padding:8px">${this.esc(this.error)}</div>` : ""}
|
||||
${this.view === "list" ? this.renderList() : this.renderBoard()}
|
||||
`;
|
||||
this.attachListeners();
|
||||
}
|
||||
|
||||
private renderList(): string {
|
||||
return `
|
||||
<div class="header">
|
||||
<span class="header-title">Workspaces</span>
|
||||
<button class="create-btn" id="create-ws">+ New Workspace</button>
|
||||
</div>
|
||||
${this.workspaces.length > 0 ? `<div class="workspace-grid">
|
||||
${this.workspaces.map(ws => `
|
||||
<div class="workspace-card" data-ws="${ws.slug}">
|
||||
<div class="ws-name">${this.esc(ws.icon || "\u{1F4CB}")} ${this.esc(ws.name)}</div>
|
||||
<div class="ws-meta">${ws.task_count || 0} tasks \u00B7 ${ws.member_count || 0} members</div>
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>` : `<div class="empty">
|
||||
<p style="font-size:16px;margin-bottom:8px">No workspaces yet</p>
|
||||
<p style="font-size:13px">Create a workspace to start managing tasks</p>
|
||||
</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderBoard(): string {
|
||||
return `
|
||||
<div class="header">
|
||||
<button class="nav-btn" data-back="list">\u2190 Back</button>
|
||||
<span class="header-title">${this.esc(this.workspaceSlug)}</span>
|
||||
<button class="create-btn" id="create-task">+ New Task</button>
|
||||
</div>
|
||||
<div class="board">
|
||||
${this.statuses.map(status => {
|
||||
const columnTasks = this.tasks.filter(t => t.status === status);
|
||||
return `
|
||||
<div class="column">
|
||||
<div class="col-header">
|
||||
<span>${this.esc(status.replace(/_/g, " "))}</span>
|
||||
<span class="col-count">${columnTasks.length}</span>
|
||||
</div>
|
||||
${columnTasks.map(t => this.renderTaskCard(t, status)).join("")}
|
||||
</div>
|
||||
`;
|
||||
}).join("")}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTaskCard(task: any, currentStatus: string): string {
|
||||
const otherStatuses = this.statuses.filter(s => s !== currentStatus);
|
||||
return `
|
||||
<div class="task-card">
|
||||
<div class="task-title">${this.esc(task.title)}</div>
|
||||
<div class="task-meta">
|
||||
${task.priority === "URGENT" ? '<span class="badge badge-urgent">URGENT</span>' : ""}
|
||||
${task.priority === "HIGH" ? '<span class="badge badge-high">HIGH</span>' : ""}
|
||||
${(task.labels || []).map((l: string) => `<span class="badge">${this.esc(l)}</span>`).join("")}
|
||||
</div>
|
||||
<div class="move-btns">
|
||||
${otherStatuses.map(s => `<button class="move-btn" data-move="${task.id}" data-to="${s}">\u2192 ${this.esc(s.replace(/_/g, " ").substring(0, 8))}</button>`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private attachListeners() {
|
||||
this.shadow.getElementById("create-ws")?.addEventListener("click", () => this.createWorkspace());
|
||||
this.shadow.getElementById("create-task")?.addEventListener("click", () => this.createTask());
|
||||
|
||||
this.shadow.querySelectorAll("[data-ws]").forEach(el => {
|
||||
el.addEventListener("click", () => this.openBoard((el as HTMLElement).dataset.ws!));
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-back]").forEach(el => {
|
||||
el.addEventListener("click", () => { this.view = "list"; this.loadWorkspaces(); });
|
||||
});
|
||||
this.shadow.querySelectorAll("[data-move]").forEach(el => {
|
||||
el.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const btn = el as HTMLElement;
|
||||
this.moveTask(btn.dataset.move!, btn.dataset.to!);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private esc(s: string): string {
|
||||
const d = document.createElement("div");
|
||||
d.textContent = s || "";
|
||||
return d.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("folk-work-board", FolkWorkBoard);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
/* Work module — dark theme */
|
||||
folk-work-board {
|
||||
display: block;
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
-- rWork module schema
|
||||
CREATE SCHEMA IF NOT EXISTS rwork;
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rwork.users (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
did TEXT UNIQUE NOT NULL,
|
||||
username TEXT,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rwork.spaces (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
name TEXT NOT NULL,
|
||||
slug TEXT UNIQUE NOT NULL,
|
||||
description TEXT,
|
||||
icon TEXT,
|
||||
owner_did TEXT,
|
||||
statuses TEXT[] DEFAULT ARRAY['TODO','IN_PROGRESS','REVIEW','DONE'],
|
||||
labels TEXT[] DEFAULT ARRAY['bug','feature','docs','chore'],
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rwork.space_members (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
space_id UUID NOT NULL REFERENCES rwork.spaces(id) ON DELETE CASCADE,
|
||||
user_id UUID NOT NULL REFERENCES rwork.users(id) ON DELETE CASCADE,
|
||||
role TEXT NOT NULL DEFAULT 'MEMBER' CHECK (role IN ('ADMIN','MODERATOR','MEMBER','VIEWER')),
|
||||
joined_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
UNIQUE(space_id, user_id)
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rwork.tasks (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
space_id UUID NOT NULL REFERENCES rwork.spaces(id) ON DELETE CASCADE,
|
||||
title TEXT NOT NULL,
|
||||
description TEXT,
|
||||
status TEXT NOT NULL DEFAULT 'TODO',
|
||||
priority TEXT DEFAULT 'MEDIUM' CHECK (priority IN ('LOW','MEDIUM','HIGH','URGENT')),
|
||||
labels TEXT[] DEFAULT '{}',
|
||||
assignee_id UUID REFERENCES rwork.users(id),
|
||||
created_by UUID REFERENCES rwork.users(id),
|
||||
sort_order INT DEFAULT 0,
|
||||
created_at TIMESTAMPTZ DEFAULT NOW(),
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS rwork.activity_log (
|
||||
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
||||
space_id UUID REFERENCES rwork.spaces(id) ON DELETE CASCADE,
|
||||
user_id UUID REFERENCES rwork.users(id),
|
||||
action TEXT NOT NULL,
|
||||
metadata JSONB DEFAULT '{}',
|
||||
created_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);
|
||||
|
||||
CREATE INDEX IF NOT EXISTS idx_rwork_tasks_space ON rwork.tasks(space_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_rwork_tasks_status ON rwork.tasks(space_id, status);
|
||||
CREATE INDEX IF NOT EXISTS idx_rwork_activity_space ON rwork.activity_log(space_id, created_at DESC);
|
||||
CREATE INDEX IF NOT EXISTS idx_rwork_members_user ON rwork.space_members(user_id);
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
/**
|
||||
* Work module — kanban workspace boards.
|
||||
*
|
||||
* Multi-tenant collaborative workspace with drag-and-drop kanban,
|
||||
* configurable statuses, and activity logging.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { sql } from "../../shared/db/pool";
|
||||
import { renderShell } from "../../server/shell";
|
||||
import { getModuleInfoList } from "../../shared/module";
|
||||
import type { RSpaceModule } from "../../shared/module";
|
||||
|
||||
const routes = new Hono();
|
||||
|
||||
// ── DB initialization ──
|
||||
const SCHEMA_SQL = readFileSync(resolve(import.meta.dir, "db/schema.sql"), "utf-8");
|
||||
|
||||
async function initDB() {
|
||||
try {
|
||||
await sql.unsafe(SCHEMA_SQL);
|
||||
console.log("[Work] DB schema initialized");
|
||||
} catch (e) {
|
||||
console.error("[Work] DB init error:", e);
|
||||
}
|
||||
}
|
||||
|
||||
initDB();
|
||||
|
||||
// ── API: Spaces ──
|
||||
|
||||
// GET /api/spaces — list workspaces
|
||||
routes.get("/api/spaces", async (c) => {
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT s.*, count(DISTINCT sm.id)::int as member_count, count(DISTINCT t.id)::int as task_count
|
||||
FROM rwork.spaces s
|
||||
LEFT JOIN rwork.space_members sm ON sm.space_id = s.id
|
||||
LEFT JOIN rwork.tasks t ON t.space_id = s.id
|
||||
GROUP BY s.id ORDER BY s.created_at DESC`
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// POST /api/spaces — create workspace
|
||||
routes.post("/api/spaces", async (c) => {
|
||||
const body = await c.req.json();
|
||||
const { name, description, icon } = body;
|
||||
if (!name?.trim()) return c.json({ error: "Name required" }, 400);
|
||||
|
||||
const slug = name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rwork.spaces (name, slug, description, icon)
|
||||
VALUES ($1, $2, $3, $4) RETURNING *`,
|
||||
[name.trim(), slug, description || null, icon || null]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// GET /api/spaces/:slug — workspace detail
|
||||
routes.get("/api/spaces/:slug", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const rows = await sql.unsafe("SELECT * FROM rwork.spaces WHERE slug = $1", [slug]);
|
||||
if (rows.length === 0) return c.json({ error: "Space not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// ── API: Tasks ──
|
||||
|
||||
// GET /api/spaces/:slug/tasks — list tasks in workspace
|
||||
routes.get("/api/spaces/:slug/tasks", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT t.*, u.username as assignee_name
|
||||
FROM rwork.tasks t
|
||||
JOIN rwork.spaces s ON s.id = t.space_id AND s.slug = $1
|
||||
LEFT JOIN rwork.users u ON u.id = t.assignee_id
|
||||
ORDER BY t.status, t.sort_order, t.created_at DESC`,
|
||||
[slug]
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// POST /api/spaces/:slug/tasks — create task
|
||||
routes.post("/api/spaces/:slug/tasks", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const body = await c.req.json();
|
||||
const { title, description, status, priority, labels } = body;
|
||||
if (!title?.trim()) return c.json({ error: "Title required" }, 400);
|
||||
|
||||
const space = await sql.unsafe("SELECT id, statuses FROM rwork.spaces WHERE slug = $1", [slug]);
|
||||
if (space.length === 0) return c.json({ error: "Space not found" }, 404);
|
||||
|
||||
const taskStatus = status || space[0].statuses?.[0] || "TODO";
|
||||
const rows = await sql.unsafe(
|
||||
`INSERT INTO rwork.tasks (space_id, title, description, status, priority, labels)
|
||||
VALUES ($1, $2, $3, $4, $5, $6) RETURNING *`,
|
||||
[space[0].id, title.trim(), description || null, taskStatus, priority || "MEDIUM", labels || []]
|
||||
);
|
||||
return c.json(rows[0], 201);
|
||||
});
|
||||
|
||||
// PATCH /api/tasks/:id — update task (status change, assignment, etc.)
|
||||
routes.patch("/api/tasks/:id", async (c) => {
|
||||
const id = c.req.param("id");
|
||||
const body = await c.req.json();
|
||||
const { title, description, status, priority, labels, sort_order, assignee_id } = body;
|
||||
|
||||
const fields: string[] = [];
|
||||
const params: unknown[] = [];
|
||||
let idx = 1;
|
||||
|
||||
if (title !== undefined) { fields.push(`title = $${idx}`); params.push(title); idx++; }
|
||||
if (description !== undefined) { fields.push(`description = $${idx}`); params.push(description); idx++; }
|
||||
if (status !== undefined) { fields.push(`status = $${idx}`); params.push(status); idx++; }
|
||||
if (priority !== undefined) { fields.push(`priority = $${idx}`); params.push(priority); idx++; }
|
||||
if (labels !== undefined) { fields.push(`labels = $${idx}`); params.push(labels); idx++; }
|
||||
if (sort_order !== undefined) { fields.push(`sort_order = $${idx}`); params.push(sort_order); idx++; }
|
||||
if (assignee_id !== undefined) { fields.push(`assignee_id = $${idx}`); params.push(assignee_id || null); idx++; }
|
||||
|
||||
if (fields.length === 0) return c.json({ error: "No fields to update" }, 400);
|
||||
fields.push("updated_at = NOW()");
|
||||
params.push(id);
|
||||
|
||||
const rows = await sql.unsafe(
|
||||
`UPDATE rwork.tasks SET ${fields.join(", ")} WHERE id = $${idx} RETURNING *`,
|
||||
params
|
||||
);
|
||||
if (rows.length === 0) return c.json({ error: "Task not found" }, 404);
|
||||
return c.json(rows[0]);
|
||||
});
|
||||
|
||||
// DELETE /api/tasks/:id
|
||||
routes.delete("/api/tasks/:id", async (c) => {
|
||||
const result = await sql.unsafe("DELETE FROM rwork.tasks WHERE id = $1 RETURNING id", [c.req.param("id")]);
|
||||
if (result.length === 0) return c.json({ error: "Task not found" }, 404);
|
||||
return c.json({ ok: true });
|
||||
});
|
||||
|
||||
// ── API: Activity ──
|
||||
|
||||
// GET /api/spaces/:slug/activity — recent activity
|
||||
routes.get("/api/spaces/:slug/activity", async (c) => {
|
||||
const slug = c.req.param("slug");
|
||||
const rows = await sql.unsafe(
|
||||
`SELECT a.*, u.username
|
||||
FROM rwork.activity_log a
|
||||
JOIN rwork.spaces s ON s.id = a.space_id AND s.slug = $1
|
||||
LEFT JOIN rwork.users u ON u.id = a.user_id
|
||||
ORDER BY a.created_at DESC LIMIT 50`,
|
||||
[slug]
|
||||
);
|
||||
return c.json(rows);
|
||||
});
|
||||
|
||||
// ── Page route ──
|
||||
routes.get("/", (c) => {
|
||||
const space = c.req.param("space") || "demo";
|
||||
return c.html(renderShell({
|
||||
title: `${space} — Work | rSpace`,
|
||||
moduleId: "work",
|
||||
spaceSlug: space,
|
||||
modules: getModuleInfoList(),
|
||||
theme: "light",
|
||||
styles: `<link rel="stylesheet" href="/modules/work/work.css">`,
|
||||
body: `<folk-work-board space="${space}"></folk-work-board>`,
|
||||
scripts: `<script type="module" src="/modules/work/folk-work-board.js"></script>`,
|
||||
}));
|
||||
});
|
||||
|
||||
export const workModule: RSpaceModule = {
|
||||
id: "work",
|
||||
name: "rWork",
|
||||
icon: "\u{1F4CB}",
|
||||
description: "Kanban workspace boards for collaborative task management",
|
||||
routes,
|
||||
standaloneDomain: "rwork.online",
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Standalone server for the Work module.
|
||||
* Serves rwork.online independently.
|
||||
*/
|
||||
|
||||
import { Hono } from "hono";
|
||||
import { serveStatic } from "hono/bun";
|
||||
import { workModule } from "./mod";
|
||||
|
||||
const app = new Hono();
|
||||
|
||||
app.use("/modules/work/*", serveStatic({ root: "./dist" }));
|
||||
app.use("/*", serveStatic({ root: "./dist" }));
|
||||
app.route("/", workModule.routes);
|
||||
|
||||
console.log(`[rWork Standalone] Listening on :3000`);
|
||||
export default { port: 3000, fetch: app.fetch };
|
||||
|
|
@ -48,6 +48,17 @@ import { choicesModule } from "../modules/choices/mod";
|
|||
import { fundsModule } from "../modules/funds/mod";
|
||||
import { filesModule } from "../modules/files/mod";
|
||||
import { forumModule } from "../modules/forum/mod";
|
||||
import { walletModule } from "../modules/wallet/mod";
|
||||
import { voteModule } from "../modules/vote/mod";
|
||||
import { notesModule } from "../modules/notes/mod";
|
||||
import { mapsModule } from "../modules/maps/mod";
|
||||
import { workModule } from "../modules/work/mod";
|
||||
import { tripsModule } from "../modules/trips/mod";
|
||||
import { calModule } from "../modules/cal/mod";
|
||||
import { networkModule } from "../modules/network/mod";
|
||||
import { tubeModule } from "../modules/tube/mod";
|
||||
import { inboxModule } from "../modules/inbox/mod";
|
||||
import { dataModule } from "../modules/data/mod";
|
||||
import { spaces } from "./spaces";
|
||||
import { renderShell } from "./shell";
|
||||
|
||||
|
|
@ -62,6 +73,17 @@ registerModule(choicesModule);
|
|||
registerModule(fundsModule);
|
||||
registerModule(filesModule);
|
||||
registerModule(forumModule);
|
||||
registerModule(walletModule);
|
||||
registerModule(voteModule);
|
||||
registerModule(notesModule);
|
||||
registerModule(mapsModule);
|
||||
registerModule(workModule);
|
||||
registerModule(tripsModule);
|
||||
registerModule(calModule);
|
||||
registerModule(networkModule);
|
||||
registerModule(tubeModule);
|
||||
registerModule(inboxModule);
|
||||
registerModule(dataModule);
|
||||
|
||||
// ── Config ──
|
||||
const PORT = Number(process.env.PORT) || 3000;
|
||||
|
|
|
|||
297
vite.config.ts
297
vite.config.ts
|
|
@ -328,6 +328,303 @@ export default defineConfig({
|
|||
resolve(__dirname, "modules/forum/components/forum.css"),
|
||||
resolve(__dirname, "dist/modules/forum/forum.css"),
|
||||
);
|
||||
|
||||
// Build wallet module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/wallet/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/wallet"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/wallet/components/folk-wallet-viewer.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-wallet-viewer.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-wallet-viewer.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy wallet CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/wallet"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/wallet/components/wallet.css"),
|
||||
resolve(__dirname, "dist/modules/wallet/wallet.css"),
|
||||
);
|
||||
|
||||
// Build vote module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/vote/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/vote"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/vote/components/folk-vote-dashboard.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-vote-dashboard.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-vote-dashboard.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy vote CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/vote"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/vote/components/vote.css"),
|
||||
resolve(__dirname, "dist/modules/vote/vote.css"),
|
||||
);
|
||||
|
||||
// Build notes module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/notes/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/notes"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/notes/components/folk-notes-app.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-notes-app.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-notes-app.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy notes CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/notes"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/notes/components/notes.css"),
|
||||
resolve(__dirname, "dist/modules/notes/notes.css"),
|
||||
);
|
||||
|
||||
// Build maps module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/maps/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/maps"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/maps/components/folk-map-viewer.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-map-viewer.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-map-viewer.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy maps CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/maps"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/maps/components/maps.css"),
|
||||
resolve(__dirname, "dist/modules/maps/maps.css"),
|
||||
);
|
||||
|
||||
// Build work module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/work/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/work"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/work/components/folk-work-board.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-work-board.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-work-board.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy work CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/work"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/work/components/work.css"),
|
||||
resolve(__dirname, "dist/modules/work/work.css"),
|
||||
);
|
||||
|
||||
// Build trips module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/trips/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/trips"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/trips/components/folk-trips-planner.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-trips-planner.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-trips-planner.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy trips CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/trips"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/trips/components/trips.css"),
|
||||
resolve(__dirname, "dist/modules/trips/trips.css"),
|
||||
);
|
||||
|
||||
// Build cal module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/cal/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/cal"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/cal/components/folk-calendar-view.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-calendar-view.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-calendar-view.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy cal CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/cal"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/cal/components/cal.css"),
|
||||
resolve(__dirname, "dist/modules/cal/cal.css"),
|
||||
);
|
||||
|
||||
// Build network module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/network/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/network"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/network/components/folk-graph-viewer.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-graph-viewer.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-graph-viewer.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy network CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/network"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/network/components/network.css"),
|
||||
resolve(__dirname, "dist/modules/network/network.css"),
|
||||
);
|
||||
|
||||
// Build tube module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/tube/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/tube"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/tube/components/folk-video-player.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-video-player.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-video-player.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy tube CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/tube"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/tube/components/tube.css"),
|
||||
resolve(__dirname, "dist/modules/tube/tube.css"),
|
||||
);
|
||||
|
||||
// Build inbox module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/inbox/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/inbox"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/inbox/components/folk-inbox-client.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-inbox-client.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-inbox-client.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy inbox CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/inbox"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/inbox/components/inbox.css"),
|
||||
resolve(__dirname, "dist/modules/inbox/inbox.css"),
|
||||
);
|
||||
|
||||
// Build data module component
|
||||
await build({
|
||||
configFile: false,
|
||||
root: resolve(__dirname, "modules/data/components"),
|
||||
build: {
|
||||
emptyOutDir: false,
|
||||
outDir: resolve(__dirname, "dist/modules/data"),
|
||||
lib: {
|
||||
entry: resolve(__dirname, "modules/data/components/folk-analytics-view.ts"),
|
||||
formats: ["es"],
|
||||
fileName: () => "folk-analytics-view.js",
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
entryFileNames: "folk-analytics-view.js",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Copy data CSS
|
||||
mkdirSync(resolve(__dirname, "dist/modules/data"), { recursive: true });
|
||||
copyFileSync(
|
||||
resolve(__dirname, "modules/data/components/data.css"),
|
||||
resolve(__dirname, "dist/modules/data/data.css"),
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue