1037 lines
27 KiB
TypeScript
1037 lines
27 KiB
TypeScript
import { FolkShape } from "./folk-shape";
|
||
import { css, html } from "./tags";
|
||
import { rspaceNavUrl } from "../shared/url-helpers";
|
||
|
||
/**
|
||
* <folk-rapp> — Embeds a live rApp module as a shape on the canvas.
|
||
*
|
||
* Unlike folk-embed (generic URL iframe), folk-rapp understands the module
|
||
* system: it stores moduleId + spaceSlug, derives the iframe URL, shows
|
||
* the module's icon/badge in the header, and can switch modules in-place.
|
||
*
|
||
* PostMessage protocol:
|
||
* Parent → iframe: { source: "rspace-parent", type: "context", shapeId, space, moduleId }
|
||
* iframe → parent: { source: "rspace-canvas", type: "shape-updated", ... } (from CommunitySync)
|
||
* iframe → parent: { source: "rspace-rapp", type: "navigate", moduleId }
|
||
*/
|
||
|
||
// Module metadata for header display (subset of rstack-app-switcher badges)
|
||
const MODULE_META: Record<string, { badge: string; color: string; name: string; icon: string }> = {
|
||
rnotes: { badge: "rN", color: "#fcd34d", name: "rNotes", icon: "📝" },
|
||
rphotos: { badge: "rPh", color: "#f9a8d4", name: "rPhotos", icon: "📸" },
|
||
rbooks: { badge: "rB", color: "#fda4af", name: "rBooks", icon: "📚" },
|
||
rpubs: { badge: "rP", color: "#fda4af", name: "rPubs", icon: "📖" },
|
||
rfiles: { badge: "rFi", color: "#67e8f9", name: "rFiles", icon: "📁" },
|
||
rwork: { badge: "rWo", color: "#cbd5e1", name: "rWork", icon: "📋" },
|
||
rforum: { badge: "rFo", color: "#fcd34d", name: "rForum", icon: "💬" },
|
||
rinbox: { badge: "rI", color: "#a5b4fc", name: "rInbox", icon: "📧" },
|
||
rtube: { badge: "rTu", color: "#f9a8d4", name: "rTube", icon: "🎬" },
|
||
rfunds: { badge: "rF", color: "#bef264", name: "rFunds", icon: "🌊" },
|
||
rwallet: { badge: "rW", color: "#fde047", name: "rWallet", icon: "💰" },
|
||
rvote: { badge: "rV", color: "#c4b5fd", name: "rVote", icon: "🗳️" },
|
||
rcart: { badge: "rCt", color: "#fdba74", name: "rCart", icon: "🛒" },
|
||
rdata: { badge: "rD", color: "#d8b4fe", name: "rData", icon: "📊" },
|
||
rnetwork: { badge: "rNe", color: "#93c5fd", name: "rNetwork", icon: "🌍" },
|
||
rsplat: { badge: "r3", color: "#d8b4fe", name: "rSplat", icon: "🔮" },
|
||
rswag: { badge: "rSw", color: "#fda4af", name: "rSwag", icon: "🎨" },
|
||
rchoices: { badge: "rCo", color: "#f0abfc", name: "rChoices", icon: "🤔" },
|
||
rcal: { badge: "rC", color: "#7dd3fc", name: "rCal", icon: "📅" },
|
||
rtrips: { badge: "rT", color: "#6ee7b7", name: "rTrips", icon: "✈️" },
|
||
rmaps: { badge: "rM", color: "#86efac", name: "rMaps", icon: "🗺️" },
|
||
};
|
||
|
||
const styles = css`
|
||
:host {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #1e293b;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
|
||
min-width: 200px;
|
||
min-height: 120px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rapp-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.rapp-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 6px 10px;
|
||
background: var(--rapp-color, #334155);
|
||
color: #0f172a;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
cursor: move;
|
||
user-select: none;
|
||
border-radius: 10px 10px 0 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rapp-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
position: relative;
|
||
}
|
||
|
||
.rapp-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 5px;
|
||
background: rgba(0, 0, 0, 0.15);
|
||
font-size: 0.55rem;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rapp-name {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rapp-icon {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.rapp-actions {
|
||
display: flex;
|
||
gap: 2px;
|
||
}
|
||
|
||
.rapp-actions button {
|
||
background: transparent;
|
||
border: none;
|
||
color: #0f172a;
|
||
cursor: pointer;
|
||
padding: 2px 5px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
transition: opacity 0.15s, background 0.15s;
|
||
}
|
||
|
||
.rapp-actions button:hover {
|
||
opacity: 1;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.rapp-content {
|
||
flex: 1;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Transparent overlay intercepts wheel/pointer events so canvas zoom + selection work */
|
||
.rapp-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 10;
|
||
background: transparent;
|
||
cursor: move;
|
||
}
|
||
|
||
/* In editing mode, hide overlay so iframe becomes interactive */
|
||
:host(:state(editing)) .rapp-overlay {
|
||
display: none;
|
||
}
|
||
|
||
.rapp-iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
border-radius: 0 0 10px 10px;
|
||
}
|
||
|
||
.rapp-loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
gap: 12px;
|
||
color: #64748b;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.rapp-loading .spinner {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: 2px solid rgba(100, 116, 139, 0.3);
|
||
border-top-color: #64748b;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.rapp-error {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
gap: 8px;
|
||
color: #ef4444;
|
||
font-size: 13px;
|
||
padding: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Module picker (shown when no moduleId set) */
|
||
.rapp-picker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 12px;
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.rapp-picker-title {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #94a3b8;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.rapp-picker-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
color: #e2e8f0;
|
||
font-size: 13px;
|
||
border: none;
|
||
background: transparent;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.rapp-picker-item:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.rapp-picker-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 5px;
|
||
font-size: 0.5rem;
|
||
font-weight: 900;
|
||
color: #0f172a;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Module switcher dropdown */
|
||
.rapp-switcher {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
margin-top: 4px;
|
||
min-width: 180px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
background: #1e293b;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||
padding: 4px;
|
||
z-index: 100;
|
||
display: none;
|
||
}
|
||
|
||
.rapp-switcher.open {
|
||
display: block;
|
||
}
|
||
|
||
.rapp-switcher-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 5px 8px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
color: #e2e8f0;
|
||
font-size: 12px;
|
||
border: none;
|
||
background: transparent;
|
||
width: 100%;
|
||
text-align: left;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
.rapp-switcher-item:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.rapp-switcher-item.active {
|
||
background: rgba(6, 182, 212, 0.15);
|
||
}
|
||
|
||
.rapp-switcher-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 4px;
|
||
font-size: 0.45rem;
|
||
font-weight: 900;
|
||
color: #0f172a;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Status indicator for postMessage connection */
|
||
.rapp-status {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #475569;
|
||
flex-shrink: 0;
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.rapp-status.connected {
|
||
background: #22c55e;
|
||
}
|
||
|
||
/* Widget mode styles */
|
||
.rapp-widget {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
padding: 10px 12px;
|
||
color: #e2e8f0;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rapp-widget:hover {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
.rapp-widget-stat {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #f8fafc;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.rapp-widget-divider {
|
||
border: none;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.rapp-widget-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rapp-widget-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: #cbd5e1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rapp-widget-row .bullet {
|
||
color: #64748b;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rapp-widget-row .label {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rapp-widget-row .value {
|
||
margin-left: auto;
|
||
color: #94a3b8;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rapp-widget-empty {
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.rapp-widget-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4px;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rapp-widget-thumb {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
background: #334155;
|
||
}
|
||
|
||
/* Mode toggle button active state */
|
||
.rapp-actions button.active {
|
||
opacity: 1;
|
||
background: rgba(0, 0, 0, 0.15);
|
||
}
|
||
`;
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
"folk-rapp": FolkRApp;
|
||
}
|
||
}
|
||
|
||
// API endpoint config per module for widget mode
|
||
const WIDGET_API: Record<string, { path: string; transform: (data: any) => WidgetData }> = {
|
||
rinbox: {
|
||
path: "/api/mailboxes",
|
||
transform: (data) => {
|
||
const mailboxes = data?.mailboxes || [];
|
||
const totalThreads = mailboxes.reduce((sum: number, m: any) => sum + (m.threadCount || 0), 0);
|
||
return {
|
||
stat: `${totalThreads} thread${totalThreads !== 1 ? "s" : ""}`,
|
||
rows: mailboxes.slice(0, 3).map((m: any) => ({
|
||
label: m.name || m.slug,
|
||
value: `${m.threadCount || 0}`,
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rphotos: {
|
||
path: "/api/assets",
|
||
transform: (data) => {
|
||
const assets = data?.assets || [];
|
||
return {
|
||
stat: `${assets.length} photo${assets.length !== 1 ? "s" : ""}`,
|
||
thumbs: assets.slice(0, 4).map((a: any) => a.id),
|
||
};
|
||
},
|
||
},
|
||
rcal: {
|
||
path: "/api/events?upcoming=true&limit=3",
|
||
transform: (data) => {
|
||
const events = data?.results || [];
|
||
return {
|
||
stat: `${data?.count ?? events.length} event${(data?.count ?? events.length) !== 1 ? "s" : ""}`,
|
||
rows: events.slice(0, 3).map((ev: any) => ({
|
||
label: ev.title || ev.summary || "Untitled",
|
||
value: ev.start ? new Date(ev.start).toLocaleDateString(undefined, { month: "short", day: "numeric" }) : "",
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rwork: {
|
||
path: "/api/spaces",
|
||
transform: (data) => {
|
||
const spaces = Array.isArray(data) ? data : [];
|
||
const totalTasks = spaces.reduce((sum: number, s: any) => sum + (s.taskCount || 0), 0);
|
||
return {
|
||
stat: `${totalTasks} task${totalTasks !== 1 ? "s" : ""}`,
|
||
rows: spaces.slice(0, 3).map((s: any) => ({
|
||
label: s.name || s.slug,
|
||
value: `${s.taskCount || 0}`,
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rnotes: {
|
||
path: "/api/notebooks",
|
||
transform: (data) => {
|
||
const notebooks = data?.notebooks || [];
|
||
return {
|
||
stat: `${notebooks.length} notebook${notebooks.length !== 1 ? "s" : ""}`,
|
||
rows: notebooks.slice(0, 3).map((n: any) => ({
|
||
label: n.title || n.name || "Untitled",
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rfunds: {
|
||
path: "/api/flows",
|
||
transform: (data) => {
|
||
const flows = Array.isArray(data) ? data : [];
|
||
const active = flows.filter((f: any) => f.status === "active").length;
|
||
return {
|
||
stat: `${active} active flow${active !== 1 ? "s" : ""}`,
|
||
rows: flows.slice(0, 3).map((f: any) => ({
|
||
label: f.name || f.id,
|
||
value: f.status || "",
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rschedule: {
|
||
path: "/api/jobs",
|
||
transform: (data) => {
|
||
const jobs = data?.results || [];
|
||
return {
|
||
stat: `${data?.count ?? jobs.length} job${(data?.count ?? jobs.length) !== 1 ? "s" : ""}`,
|
||
rows: jobs.slice(0, 3).map((j: any) => ({
|
||
label: j.name || j.id,
|
||
value: j.enabled === false ? "paused" : "active",
|
||
})),
|
||
};
|
||
},
|
||
},
|
||
rnetwork: {
|
||
path: "/api/graph",
|
||
transform: (data) => {
|
||
const nodes = data?.nodes?.length ?? 0;
|
||
const edges = data?.edges?.length ?? 0;
|
||
return {
|
||
stat: `${nodes} node${nodes !== 1 ? "s" : ""}`,
|
||
rows: [
|
||
{ label: "Nodes", value: `${nodes}` },
|
||
{ label: "Edges", value: `${edges}` },
|
||
],
|
||
};
|
||
},
|
||
},
|
||
};
|
||
|
||
interface WidgetData {
|
||
stat: string;
|
||
rows?: { label: string; value?: string }[];
|
||
thumbs?: string[]; // rphotos asset IDs for thumbnail grid
|
||
}
|
||
|
||
export class FolkRApp extends FolkShape {
|
||
static override tagName = "folk-rapp";
|
||
|
||
static {
|
||
const sheet = new CSSStyleSheet();
|
||
const parentRules = Array.from(FolkShape.styles.cssRules)
|
||
.map((r) => r.cssText)
|
||
.join("\n");
|
||
const childRules = Array.from(styles.cssRules)
|
||
.map((r) => r.cssText)
|
||
.join("\n");
|
||
sheet.replaceSync(`${parentRules}\n${childRules}`);
|
||
this.styles = sheet;
|
||
}
|
||
|
||
#moduleId: string = "";
|
||
#spaceSlug: string = "";
|
||
#mode: "widget" | "iframe" = "widget";
|
||
#iframe: HTMLIFrameElement | null = null;
|
||
#contentEl: HTMLElement | null = null;
|
||
#messageHandler: ((e: MessageEvent) => void) | null = null;
|
||
#statusEl: HTMLElement | null = null;
|
||
#refreshTimer: ReturnType<typeof setInterval> | null = null;
|
||
#modeToggleBtn: HTMLButtonElement | null = null;
|
||
|
||
get moduleId() { return this.#moduleId; }
|
||
set moduleId(value: string) {
|
||
if (this.#moduleId === value) return;
|
||
this.#moduleId = value;
|
||
this.requestUpdate("moduleId");
|
||
this.dispatchEvent(new CustomEvent("content-change"));
|
||
this.#renderContent();
|
||
}
|
||
|
||
get spaceSlug() { return this.#spaceSlug; }
|
||
set spaceSlug(value: string) {
|
||
if (this.#spaceSlug === value) return;
|
||
this.#spaceSlug = value;
|
||
this.requestUpdate("spaceSlug");
|
||
this.dispatchEvent(new CustomEvent("content-change"));
|
||
this.#renderContent();
|
||
}
|
||
|
||
get mode() { return this.#mode; }
|
||
set mode(value: "widget" | "iframe") {
|
||
if (this.#mode === value) return;
|
||
this.#mode = value;
|
||
this.dispatchEvent(new CustomEvent("content-change"));
|
||
this.#updateModeToggle();
|
||
this.#renderContent();
|
||
}
|
||
|
||
override createRenderRoot() {
|
||
const root = super.createRenderRoot();
|
||
|
||
// Prefer JS-set properties (from newShape props); fall back to HTML attributes
|
||
if (!this.#moduleId) this.#moduleId = this.getAttribute("module-id") || "";
|
||
if (!this.#spaceSlug) this.#spaceSlug = this.getAttribute("space-slug") || "";
|
||
const attrMode = this.getAttribute("mode");
|
||
if (attrMode === "iframe" || attrMode === "widget") this.#mode = attrMode;
|
||
|
||
// Auto-derive spaceSlug from current URL if not explicitly provided (/{space}/canvas → space)
|
||
if (!this.#spaceSlug) {
|
||
const pathParts = window.location.pathname.split("/").filter(Boolean);
|
||
if (pathParts.length >= 1) this.#spaceSlug = pathParts[0];
|
||
}
|
||
|
||
const meta = MODULE_META[this.#moduleId];
|
||
const headerColor = meta?.color || "#475569";
|
||
const headerName = meta?.name || this.#moduleId || "rApp";
|
||
const headerBadge = meta?.badge || "r?";
|
||
const headerIcon = meta?.icon || "📱";
|
||
|
||
const wrapper = document.createElement("div");
|
||
wrapper.className = "rapp-wrapper";
|
||
wrapper.innerHTML = html`
|
||
<div class="header rapp-header" data-drag style="--rapp-color: ${headerColor}">
|
||
<div class="rapp-header-left">
|
||
<span class="rapp-badge">${headerBadge}</span>
|
||
<span class="rapp-name">${headerName}</span>
|
||
<span class="rapp-icon">${headerIcon}</span>
|
||
<span class="rapp-status" title="Not connected"></span>
|
||
<div class="rapp-switcher"></div>
|
||
</div>
|
||
<div class="rapp-actions">
|
||
<button class="mode-toggle-btn" title="Toggle widget/iframe mode">${this.#mode === "widget" ? "□" : "▪"}</button>
|
||
<button class="switch-btn" title="Switch module">⇄</button>
|
||
<button class="open-tab-btn" title="Open in tab">↗</button>
|
||
<button class="close-btn" title="Close">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="rapp-content"></div>
|
||
`;
|
||
|
||
const slot = root.querySelector("slot");
|
||
const containerDiv = slot?.parentElement as HTMLElement;
|
||
if (containerDiv) {
|
||
containerDiv.replaceWith(wrapper);
|
||
}
|
||
|
||
this.#contentEl = wrapper.querySelector(".rapp-content") as HTMLElement;
|
||
this.#statusEl = wrapper.querySelector(".rapp-status") as HTMLElement;
|
||
this.#modeToggleBtn = wrapper.querySelector(".mode-toggle-btn") as HTMLButtonElement;
|
||
const switchBtn = wrapper.querySelector(".switch-btn") as HTMLButtonElement;
|
||
const openTabBtn = wrapper.querySelector(".open-tab-btn") as HTMLButtonElement;
|
||
const closeBtn = wrapper.querySelector(".close-btn") as HTMLButtonElement;
|
||
const switcherEl = wrapper.querySelector(".rapp-switcher") as HTMLElement;
|
||
|
||
// Mode toggle: widget ↔ iframe
|
||
this.#modeToggleBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.mode = this.#mode === "widget" ? "iframe" : "widget";
|
||
});
|
||
|
||
// Module switcher dropdown
|
||
this.#buildSwitcher(switcherEl);
|
||
switchBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
switcherEl.classList.toggle("open");
|
||
});
|
||
|
||
// Close switcher when clicking elsewhere
|
||
const closeSwitcher = () => switcherEl.classList.remove("open");
|
||
root.addEventListener("click", closeSwitcher);
|
||
|
||
// Open in tab — navigate to the module's page via tab bar
|
||
openTabBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
if (this.#moduleId && this.#spaceSlug) {
|
||
window.location.href = rspaceNavUrl(this.#spaceSlug, this.#moduleId);
|
||
}
|
||
});
|
||
|
||
// Close button
|
||
closeBtn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
this.dispatchEvent(new CustomEvent("close"));
|
||
});
|
||
|
||
// Set up postMessage listener
|
||
this.#messageHandler = (e: MessageEvent) => this.#handleMessage(e);
|
||
window.addEventListener("message", this.#messageHandler);
|
||
|
||
// Load content
|
||
if (this.#moduleId) {
|
||
this.#renderContent();
|
||
} else {
|
||
this.#showPicker();
|
||
}
|
||
|
||
return root;
|
||
}
|
||
|
||
disconnectedCallback() {
|
||
super.disconnectedCallback?.();
|
||
if (this.#messageHandler) {
|
||
window.removeEventListener("message", this.#messageHandler);
|
||
this.#messageHandler = null;
|
||
}
|
||
if (this.#refreshTimer) {
|
||
clearInterval(this.#refreshTimer);
|
||
this.#refreshTimer = null;
|
||
}
|
||
}
|
||
|
||
#buildSwitcher(switcherEl: HTMLElement) {
|
||
const items = Object.entries(MODULE_META)
|
||
.map(([id, meta]) => `
|
||
<button class="rapp-switcher-item ${id === this.#moduleId ? "active" : ""}" data-module="${id}">
|
||
<span class="rapp-switcher-badge" style="background: ${meta.color}">${meta.badge}</span>
|
||
<span>${meta.name} ${meta.icon}</span>
|
||
</button>
|
||
`)
|
||
.join("");
|
||
|
||
switcherEl.innerHTML = items;
|
||
|
||
switcherEl.querySelectorAll(".rapp-switcher-item").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
const modId = (btn as HTMLElement).dataset.module;
|
||
if (modId && modId !== this.#moduleId) {
|
||
this.moduleId = modId;
|
||
this.#buildSwitcher(switcherEl);
|
||
}
|
||
switcherEl.classList.remove("open");
|
||
});
|
||
});
|
||
}
|
||
|
||
/** Handle postMessage from embedded iframe */
|
||
#handleMessage(e: MessageEvent) {
|
||
if (!this.#iframe) return;
|
||
|
||
// Only accept messages from our iframe
|
||
if (e.source !== this.#iframe.contentWindow) return;
|
||
|
||
const msg = e.data;
|
||
if (!msg || typeof msg !== "object") return;
|
||
|
||
// CommunitySync shape updates from the embedded module
|
||
if (msg.source === "rspace-canvas" && msg.type === "shape-updated") {
|
||
this.dispatchEvent(new CustomEvent("rapp-data", {
|
||
detail: { moduleId: this.#moduleId, shapeId: msg.shapeId, data: msg.data },
|
||
bubbles: true,
|
||
}));
|
||
|
||
// Mark as connected
|
||
if (this.#statusEl) {
|
||
this.#statusEl.classList.add("connected");
|
||
this.#statusEl.title = "Connected — receiving data";
|
||
}
|
||
}
|
||
|
||
// Navigation request from embedded module
|
||
if (msg.source === "rspace-rapp" && msg.type === "navigate" && msg.moduleId) {
|
||
this.moduleId = msg.moduleId;
|
||
}
|
||
}
|
||
|
||
/** Send context to the iframe after it loads */
|
||
#sendContext() {
|
||
if (!this.#iframe?.contentWindow) return;
|
||
try {
|
||
this.#iframe.contentWindow.postMessage({
|
||
source: "rspace-parent",
|
||
type: "context",
|
||
shapeId: this.id,
|
||
space: this.#spaceSlug,
|
||
moduleId: this.#moduleId,
|
||
embedded: true,
|
||
}, "*");
|
||
} catch {
|
||
// cross-origin or iframe not ready
|
||
}
|
||
}
|
||
|
||
#updateModeToggle() {
|
||
if (this.#modeToggleBtn) {
|
||
this.#modeToggleBtn.textContent = this.#mode === "widget" ? "□" : "▪";
|
||
this.#modeToggleBtn.title = this.#mode === "widget" ? "Expand to iframe" : "Collapse to widget";
|
||
}
|
||
}
|
||
|
||
/** Derive the base module URL path, accounting for subdomain routing */
|
||
#getModulePath(): string {
|
||
if (!this.#spaceSlug) {
|
||
const pathParts = window.location.pathname.split("/").filter(Boolean);
|
||
if (pathParts.length >= 1) this.#spaceSlug = pathParts[0];
|
||
}
|
||
const space = this.#spaceSlug || "demo";
|
||
const hostname = window.location.hostname;
|
||
const onSubdomain = hostname.split(".").length >= 3 && hostname.startsWith(space + ".");
|
||
return onSubdomain ? `/${this.#moduleId}` : `/${space}/${this.#moduleId}`;
|
||
}
|
||
|
||
/** Route to the right render method based on current mode */
|
||
#renderContent() {
|
||
if (!this.#contentEl || !this.#moduleId) return;
|
||
|
||
// Clear refresh timer
|
||
if (this.#refreshTimer) {
|
||
clearInterval(this.#refreshTimer);
|
||
this.#refreshTimer = null;
|
||
}
|
||
|
||
// Update header
|
||
this.#updateHeader();
|
||
|
||
if (this.#mode === "widget") {
|
||
this.#loadWidget();
|
||
} else {
|
||
this.#loadIframe();
|
||
}
|
||
}
|
||
|
||
#updateHeader() {
|
||
const meta = MODULE_META[this.#moduleId];
|
||
const header = this.shadowRoot?.querySelector(".rapp-header") as HTMLElement;
|
||
if (header && meta) {
|
||
header.style.setProperty("--rapp-color", meta.color);
|
||
const badge = header.querySelector(".rapp-badge");
|
||
const name = header.querySelector(".rapp-name");
|
||
const icon = header.querySelector(".rapp-icon");
|
||
if (badge) badge.textContent = meta.badge;
|
||
if (name) name.textContent = meta.name;
|
||
if (icon) icon.textContent = meta.icon;
|
||
}
|
||
}
|
||
|
||
/** Iframe mode: load the full rApp in an iframe with overlay for event capture */
|
||
#loadIframe() {
|
||
if (!this.#contentEl) return;
|
||
|
||
// Reset connection status
|
||
if (this.#statusEl) {
|
||
this.#statusEl.classList.remove("connected");
|
||
this.#statusEl.title = "Loading...";
|
||
}
|
||
|
||
const meta = MODULE_META[this.#moduleId];
|
||
|
||
// Show loading state
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-overlay"></div>
|
||
<div class="rapp-loading">
|
||
<div class="spinner"></div>
|
||
<span>Loading ${meta?.name || this.#moduleId}...</span>
|
||
</div>
|
||
`;
|
||
|
||
const iframeUrl = this.#getModulePath();
|
||
|
||
const iframe = document.createElement("iframe");
|
||
iframe.className = "rapp-iframe";
|
||
iframe.src = iframeUrl;
|
||
iframe.loading = "lazy";
|
||
iframe.allow = "clipboard-write";
|
||
|
||
iframe.addEventListener("load", () => {
|
||
const loading = this.#contentEl?.querySelector(".rapp-loading");
|
||
if (loading) loading.remove();
|
||
this.#sendContext();
|
||
});
|
||
|
||
iframe.addEventListener("error", () => {
|
||
if (this.#contentEl) {
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-overlay"></div>
|
||
<div class="rapp-error">
|
||
<span>Failed to load ${meta?.name || this.#moduleId}</span>
|
||
<button class="rapp-picker-item" style="justify-content: center; color: #94a3b8;">
|
||
Retry
|
||
</button>
|
||
</div>
|
||
`;
|
||
this.#contentEl.querySelector("button")?.addEventListener("click", () => this.#loadIframe());
|
||
}
|
||
});
|
||
|
||
this.#contentEl.appendChild(iframe);
|
||
this.#iframe = iframe;
|
||
}
|
||
|
||
/** Widget mode: fetch data from module API and render a compact card */
|
||
#loadWidget() {
|
||
if (!this.#contentEl) return;
|
||
|
||
this.#iframe = null;
|
||
|
||
// Reset status — widget mode doesn't use postMessage connection
|
||
if (this.#statusEl) {
|
||
this.#statusEl.classList.remove("connected");
|
||
this.#statusEl.title = "Widget mode";
|
||
}
|
||
|
||
const meta = MODULE_META[this.#moduleId];
|
||
|
||
// Show loading
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-loading">
|
||
<div class="spinner"></div>
|
||
<span>Loading ${meta?.name || this.#moduleId}...</span>
|
||
</div>
|
||
`;
|
||
|
||
// Fetch and render
|
||
this.#fetchAndRenderWidget();
|
||
|
||
// Auto-refresh every 60 seconds
|
||
this.#refreshTimer = setInterval(() => this.#fetchAndRenderWidget(), 60_000);
|
||
}
|
||
|
||
async #fetchAndRenderWidget() {
|
||
if (!this.#contentEl || this.#mode !== "widget") return;
|
||
|
||
const apiConfig = WIDGET_API[this.#moduleId];
|
||
if (!apiConfig) {
|
||
this.#renderWidgetFallback();
|
||
return;
|
||
}
|
||
|
||
const basePath = this.#getModulePath();
|
||
const url = `${basePath}${apiConfig.path}`;
|
||
|
||
try {
|
||
const res = await fetch(url);
|
||
if (!res.ok) throw new Error(`${res.status}`);
|
||
const data = await res.json();
|
||
const widgetData = apiConfig.transform(data);
|
||
this.#renderWidgetCard(widgetData);
|
||
} catch {
|
||
this.#renderWidgetFallback();
|
||
}
|
||
}
|
||
|
||
#renderWidgetCard(data: WidgetData) {
|
||
if (!this.#contentEl) return;
|
||
|
||
const meta = MODULE_META[this.#moduleId];
|
||
const basePath = this.#getModulePath();
|
||
|
||
let listHtml = "";
|
||
|
||
if (data.thumbs && data.thumbs.length > 0) {
|
||
// Photo grid mode
|
||
const thumbItems = data.thumbs
|
||
.map((id) => `<img class="rapp-widget-thumb" src="${basePath}/api/assets/${id}/thumbnail" alt="" loading="lazy" />`)
|
||
.join("");
|
||
listHtml = `<div class="rapp-widget-grid">${thumbItems}</div>`;
|
||
} else if (data.rows && data.rows.length > 0) {
|
||
const rowItems = data.rows
|
||
.map((r) => `
|
||
<div class="rapp-widget-row">
|
||
<span class="bullet">•</span>
|
||
<span class="label">${this.#escapeHtml(r.label)}</span>
|
||
${r.value ? `<span class="value">${this.#escapeHtml(r.value)}</span>` : ""}
|
||
</div>
|
||
`)
|
||
.join("");
|
||
listHtml = `
|
||
<hr class="rapp-widget-divider" />
|
||
<div class="rapp-widget-list">${rowItems}</div>
|
||
`;
|
||
} else {
|
||
listHtml = `<span class="rapp-widget-empty">No data yet</span>`;
|
||
}
|
||
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-widget" title="Click to open ${meta?.name || this.#moduleId}">
|
||
<div class="rapp-widget-stat">${this.#escapeHtml(data.stat)}</div>
|
||
${listHtml}
|
||
</div>
|
||
`;
|
||
|
||
// Click widget → navigate to full module
|
||
this.#contentEl.querySelector(".rapp-widget")?.addEventListener("click", () => {
|
||
if (this.#moduleId && this.#spaceSlug) {
|
||
window.location.href = rspaceNavUrl(this.#spaceSlug, this.#moduleId);
|
||
}
|
||
});
|
||
}
|
||
|
||
/** Fallback widget when no API config exists or fetch fails */
|
||
#renderWidgetFallback() {
|
||
if (!this.#contentEl) return;
|
||
|
||
const meta = MODULE_META[this.#moduleId];
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-widget" title="Click to open ${meta?.name || this.#moduleId}">
|
||
<div class="rapp-widget-stat">${meta?.icon || "📱"} ${meta?.name || this.#moduleId}</div>
|
||
<span class="rapp-widget-empty">Could not load data</span>
|
||
</div>
|
||
`;
|
||
|
||
this.#contentEl.querySelector(".rapp-widget")?.addEventListener("click", () => {
|
||
if (this.#moduleId && this.#spaceSlug) {
|
||
window.location.href = rspaceNavUrl(this.#spaceSlug, this.#moduleId);
|
||
}
|
||
});
|
||
}
|
||
|
||
#escapeHtml(str: string): string {
|
||
const div = document.createElement("div");
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
#showPicker() {
|
||
if (!this.#contentEl) return;
|
||
|
||
const items = Object.entries(MODULE_META)
|
||
.map(([id, meta]) => `
|
||
<button class="rapp-picker-item" data-module="${id}">
|
||
<span class="rapp-picker-badge" style="background: ${meta.color}">${meta.badge}</span>
|
||
<span>${meta.name}</span>
|
||
<span>${meta.icon}</span>
|
||
</button>
|
||
`)
|
||
.join("");
|
||
|
||
this.#contentEl.innerHTML = `
|
||
<div class="rapp-picker">
|
||
<span class="rapp-picker-title">Choose an rApp to embed</span>
|
||
${items}
|
||
</div>
|
||
`;
|
||
|
||
this.#contentEl.querySelectorAll(".rapp-picker-item").forEach((btn) => {
|
||
btn.addEventListener("click", () => {
|
||
const modId = (btn as HTMLElement).dataset.module;
|
||
if (modId) {
|
||
this.moduleId = modId;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
override toJSON() {
|
||
return {
|
||
...super.toJSON(),
|
||
type: "folk-rapp",
|
||
moduleId: this.#moduleId,
|
||
spaceSlug: this.#spaceSlug,
|
||
mode: this.#mode,
|
||
};
|
||
}
|
||
}
|