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

fix: tab bar persistence + iframe loading/error states 

Tabs now persist in localStorage across page navigations so opening
a new rApp adds it alongside existing tabs instead of replacing them.
Iframe shell shows a loading spinner with 12s timeout and error panel
when standalone apps are unreachable. Converts rSwag to iframe shell.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-25 18:19:07 -08:00
parent 5c2c7f418b
commit fa6a2ce36b
2 changed files with 205 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/swag/mod.ts
View File

@ -11,7 +11,7 @@ import { mkdir, writeFile, readFile, readdir, stat } from "node:fs/promises";
import { join } from "node:path";
import { getProduct, PRODUCTS } from "./products";
import { processImage } from "./process-image";
import { renderShell } from "../../server/shell";
import { renderShell, renderIframeShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -228,15 +228,13 @@ routes.get("/api/artifact/:id", async (c) => {
// ── Page route: swag designer ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderShell({
return c.html(renderIframeShell({
title: `Swag Designer | rSpace`,
moduleId: "swag",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
styles: `<link rel="stylesheet" href="/modules/swag/swag.css">`,
body: `<folk-swag-designer></folk-swag-designer>`,
scripts: `<script type="module" src="/modules/swag/folk-swag-designer.js"></script>`,
standaloneDomain: "swag.mycofi.earth",
}));
});

271
server/shell.ts
View File

@ -128,132 +128,157 @@ export function renderShell(opts: ShellOptions): string {
};
// ── Tab bar / Layer system initialization ──
// Tabs persist in localStorage so they survive full-page navigations.
// When a user opens a new rApp (via the app switcher or tab-add),
// the next page load reads the existing tabs and adds the new module.
const tabBar = document.querySelector('rstack-tab-bar');
const spaceSlug = '${escapeAttr(spaceSlug)}';
const currentModuleId = '${escapeAttr(moduleId)}';
const TABS_KEY = 'rspace_tabs_' + spaceSlug;
const moduleList = ${moduleListJSON};
if (tabBar) {
// Default layer: current module (bootstrap if no layers saved yet)
const defaultLayer = {
id: 'layer-' + currentModuleId,
moduleId: currentModuleId,
label: ${JSON.stringify(modules.find((m: any) => m.id === moduleId)?.name || moduleId)},
order: 0,
color: '',
visible: true,
createdAt: Date.now(),
};
// Helper: look up a module's display name
function getModuleLabel(id) {
const m = moduleList.find(mod => mod.id === id);
return m ? m.name : id;
}
// Set the current module as the active layer
tabBar.setLayers([defaultLayer]);
tabBar.setAttribute('active', defaultLayer.id);
// Helper: create a layer object
function makeLayer(id, order) {
return {
id: 'layer-' + id,
moduleId: id,
label: getModuleLabel(id),
order: order,
color: '',
visible: true,
createdAt: Date.now(),
};
}
// Listen for tab events
// ── Restore tabs from localStorage ──
let layers;
try {
const saved = localStorage.getItem(TABS_KEY);
layers = saved ? JSON.parse(saved) : [];
if (!Array.isArray(layers)) layers = [];
} catch(e) { layers = []; }
// Ensure the current module is in the tab list
if (!layers.find(l => l.moduleId === currentModuleId)) {
layers.push(makeLayer(currentModuleId, layers.length));
}
// Persist immediately (includes the newly-added tab)
localStorage.setItem(TABS_KEY, JSON.stringify(layers));
// Render all tabs with the current one active
tabBar.setLayers(layers);
tabBar.setAttribute('active', 'layer-' + currentModuleId);
// Helper: save current tab list to localStorage
function saveTabs() {
localStorage.setItem(TABS_KEY, JSON.stringify(layers));
}
// ── Tab events ──
tabBar.addEventListener('layer-switch', (e) => {
const { moduleId } = e.detail;
saveTabs();
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
});
tabBar.addEventListener('layer-add', (e) => {
const { moduleId } = e.detail;
// Navigate to the new module (layer will be persisted when sync connects)
// Add the new module before navigating so the next page sees it
if (!layers.find(l => l.moduleId === moduleId)) {
layers.push(makeLayer(moduleId, layers.length));
}
saveTabs();
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
});
tabBar.addEventListener('layer-close', (e) => {
const { layerId } = e.detail;
tabBar.removeLayer(layerId);
// If we closed the active layer, switch to first remaining
const remaining = tabBar.querySelectorAll?.('[data-layer-id]');
// The tab bar handles this internally
layers = layers.filter(l => l.id !== layerId);
saveTabs();
// If we closed the active tab, switch to the first remaining
if (layerId === 'layer-' + currentModuleId && layers.length > 0) {
window.location.href = window.__rspaceNavUrl(spaceSlug, layers[0].moduleId);
}
});
tabBar.addEventListener('view-toggle', (e) => {
const { mode } = e.detail;
// When switching to stack view, emit event for canvas to connect
document.dispatchEvent(new CustomEvent('layer-view-mode', { detail: { mode } }));
});
// Expose tabBar for CommunitySync integration
window.__rspaceTabBar = tabBar;
// If CommunitySync is available, wire up layer persistence
// ── CommunitySync: merge with Automerge once connected ──
document.addEventListener('community-sync-ready', (e) => {
const sync = e.detail?.sync;
if (!sync) return;
// Load persisted layers
const layers = sync.getLayers();
if (layers.length > 0) {
// Merge: Automerge layers win if they exist, otherwise seed from localStorage
const remoteLayers = sync.getLayers();
if (remoteLayers.length > 0) {
// Ensure current module is also in the Automerge set
if (!remoteLayers.find(l => l.moduleId === currentModuleId)) {
const newLayer = makeLayer(currentModuleId, remoteLayers.length);
sync.addLayer(newLayer);
}
layers = sync.getLayers();
tabBar.setLayers(layers);
const activeId = sync.doc.activeLayerId;
if (activeId) tabBar.setAttribute('active', activeId);
tabBar.setFlows(sync.getFlows());
} else {
// First visit: save the default layer
sync.addLayer(defaultLayer);
sync.setActiveLayer(defaultLayer.id);
// First connection: push all localStorage tabs into Automerge
for (const l of layers) {
sync.addLayer(l);
}
sync.setActiveLayer('layer-' + currentModuleId);
}
// Keep localStorage in sync
saveTabs();
// Sync layer changes back to Automerge
tabBar.addEventListener('layer-switch', (e) => {
sync.setActiveLayer(e.detail.layerId);
});
// Layer add via tab bar (persist new layer)
tabBar.addEventListener('layer-add', (e) => {
const { moduleId } = e.detail;
const newLayer = {
id: 'layer-' + moduleId,
moduleId,
label: moduleId,
order: sync.getLayers().length,
color: '',
visible: true,
createdAt: Date.now(),
};
const newLayer = makeLayer(moduleId, sync.getLayers().length);
sync.addLayer(newLayer);
});
// Layer close (remove from Automerge)
tabBar.addEventListener('layer-close', (e) => {
sync.removeLayer(e.detail.layerId);
});
// Layer reorder
tabBar.addEventListener('layer-reorder', (e) => {
const { layerId, newIndex } = e.detail;
sync.updateLayer(layerId, { order: newIndex });
// Reindex all layers
const layers = sync.getLayers();
layers.forEach((l, i) => {
if (l.order !== i) sync.updateLayer(l.id, { order: i });
});
const all = sync.getLayers();
all.forEach((l, i) => { if (l.order !== i) sync.updateLayer(l.id, { order: i }); });
});
tabBar.addEventListener('flow-create', (e) => { sync.addFlow(e.detail.flow); });
tabBar.addEventListener('flow-remove', (e) => { sync.removeFlow(e.detail.flowId); });
tabBar.addEventListener('view-toggle', (e) => { sync.setLayerViewMode(e.detail.mode); });
// Flow creation from stack view drag-to-connect
tabBar.addEventListener('flow-create', (e) => {
sync.addFlow(e.detail.flow);
});
// Flow removal from stack view right-click
tabBar.addEventListener('flow-remove', (e) => {
sync.removeFlow(e.detail.flowId);
});
// View mode persistence
tabBar.addEventListener('view-toggle', (e) => {
sync.setLayerViewMode(e.detail.mode);
});
// Listen for remote layer/flow changes
// Listen for remote changes
sync.addEventListener('change', () => {
tabBar.setLayers(sync.getLayers());
layers = sync.getLayers();
tabBar.setLayers(layers);
tabBar.setFlows(sync.getFlows());
const activeId = sync.doc.activeLayerId;
if (activeId) tabBar.setAttribute('active', activeId);
const viewMode = sync.doc.layerViewMode;
if (viewMode) tabBar.setAttribute('view-mode', viewMode);
saveTabs(); // keep localStorage in sync
});
});
}
@ -429,13 +454,28 @@ export function renderIframeShell(opts: IframeShellOptions): string {
const { standaloneDomain, path = "", ...shellOpts } = opts;
const iframeSrc = `https://${standaloneDomain}${path}`;
const moduleName = shellOpts.modules.find(m => m.id === shellOpts.moduleId)?.name || shellOpts.moduleId;
return renderShell({
...shellOpts,
body: `<iframe id="rspace-module-frame"
src="${escapeAttr(iframeSrc)}"
class="rspace-iframe"
allow="camera;microphone;fullscreen;autoplay;clipboard-write;web-share"
loading="lazy"></iframe>`,
body: `<div id="rspace-iframe-loading" class="rspace-iframe-loading">
<div class="rspace-iframe-loading__spinner"></div>
<p class="rspace-iframe-loading__text">Loading ${escapeHtml(moduleName)}...</p>
</div>
<div id="rspace-iframe-error" class="rspace-iframe-error" style="display:none">
<div class="rspace-iframe-error__icon">&#x26A0;</div>
<h3 class="rspace-iframe-error__title">${escapeHtml(moduleName)} is not available</h3>
<p class="rspace-iframe-error__text">The standalone app at <code>${escapeHtml(standaloneDomain)}</code> didn't respond.</p>
<div class="rspace-iframe-error__actions">
<button onclick="location.reload()" class="rspace-iframe-error__btn">Retry</button>
<a href="https://${escapeAttr(standaloneDomain)}" target="_blank" rel="noopener" class="rspace-iframe-error__btn rspace-iframe-error__btn--secondary">Open directly &rarr;</a>
</div>
</div>
<iframe id="rspace-module-frame"
src="${escapeAttr(iframeSrc)}"
class="rspace-iframe"
allow="camera;microphone;fullscreen;autoplay;clipboard-write;web-share"
loading="lazy"></iframe>`,
styles: `<style>
#app.iframe-layout {
padding-top: 92px;
@ -443,21 +483,104 @@ export function renderIframeShell(opts: IframeShellOptions): string {
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.rspace-iframe {
flex: 1;
width: 100%;
border: none;
background: #0a0a0a;
opacity: 0;
transition: opacity 0.3s ease;
}
.rspace-iframe.loaded { opacity: 1; }
.rspace-iframe-loading {
position: absolute;
inset: 92px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background: #0a0a0a;
z-index: 1;
}
.rspace-iframe-loading__spinner {
width: 36px; height: 36px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #14b8a6;
border-radius: 50%;
animation: rspace-spin 0.8s linear infinite;
}
@keyframes rspace-spin { to { transform: rotate(360deg); } }
.rspace-iframe-loading__text {
color: #64748b; font-size: 0.9rem; margin: 0;
}
.rspace-iframe-error {
position: absolute;
inset: 92px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #0a0a0a;
z-index: 2;
text-align: center;
padding: 24px;
}
.rspace-iframe-error__icon {
font-size: 2.5rem; opacity: 0.5;
}
.rspace-iframe-error__title {
color: #e2e8f0; font-size: 1.1rem; margin: 0;
}
.rspace-iframe-error__text {
color: #64748b; font-size: 0.85rem; margin: 0; max-width: 400px;
}
.rspace-iframe-error__text code {
color: #94a3b8; background: rgba(255,255,255,0.06);
padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;
}
.rspace-iframe-error__actions {
display: flex; gap: 10px; margin-top: 8px;
}
.rspace-iframe-error__btn {
padding: 8px 18px; border-radius: 8px; font-size: 0.82rem;
font-weight: 600; cursor: pointer; border: none;
background: #14b8a6; color: white; text-decoration: none;
transition: opacity 0.15s;
}
.rspace-iframe-error__btn:hover { opacity: 0.85; }
.rspace-iframe-error__btn--secondary {
background: rgba(255,255,255,0.08); color: #94a3b8;
}
</style>`,
scripts: `<script type="module">
document.getElementById('app')?.classList.add('iframe-layout');
// Identity bridge: forward EncryptID session to the embedded app
const frame = document.getElementById('rspace-module-frame');
const loadingEl = document.getElementById('rspace-iframe-loading');
const errorEl = document.getElementById('rspace-iframe-error');
let loaded = false;
// Timeout: if the iframe hasn't signalled a load after 12s, show error
const timeout = setTimeout(() => {
if (!loaded) {
loadingEl?.remove();
if (errorEl) errorEl.style.display = 'flex';
}
}, 12000);
if (frame) {
frame.addEventListener('load', () => {
loaded = true;
clearTimeout(timeout);
loadingEl?.remove();
errorEl?.remove();
frame.classList.add('loaded');
// Identity bridge: forward EncryptID session to the embedded app
try {
const raw = localStorage.getItem('encryptid_session');
if (raw) {
@ -471,6 +594,16 @@ export function renderIframeShell(opts: IframeShellOptions): string {
} catch(e) {}
});
// Also detect load failure via error event
frame.addEventListener('error', () => {
if (!loaded) {
loaded = true;
clearTimeout(timeout);
loadingEl?.remove();
if (errorEl) errorEl.style.display = 'flex';
}
});
// Listen for navigation messages from the iframe
window.addEventListener('message', (e) => {
if (e.origin !== 'https://${escapeAttr(standaloneDomain)}') return;