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

fix(collab): rename Solo/Share to Online/Offline, use EncryptID usernames 

Swap toggle labels to Online/Offline (more intuitive). Resolve canvas
peer usernames from encryptid_session instead of rspace-username fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-24 17:45:55 -07:00
parent 1cbee3e4d1
commit cefc1aa5b7
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
shared/components/rstack-collab-overlay.ts
View File

@ -4,7 +4,7 @@
* Features:
* - "N online" badge (top-right pill with colored dots)
* - People panel dropdown (click badge to open)
* - Solo/Share mode toggle in panel
* - Online/Offline mode toggle in panel
* - Remote cursors (SVG arrows with username labels, viewport-relative)
* - Focus highlighting (colored outline rings on data-collab-id elements)
* - Auto-discovery via rspace-doc-subscribe events from runtime
@ -438,7 +438,7 @@ export class RStackCollabOverlay extends HTMLElement {
fragments.push(`<div class="conn-notice">${this.#escHtml(msg)}</div>`);
}
// Self row with Solo/Share toggle
// Self row with Online/Offline toggle
const isSolo = this.#soloMode;
const selfModule = this.#moduleId || '';
fragments.push(`
@ -448,9 +448,9 @@ export class RStackCollabOverlay extends HTMLElement {
<span class="name">${this.#escHtml(this.#localUsername)} <span class="you-tag">(you)</span></span>
${selfModule ? `<span class="peer-context">${this.#escHtml(selfModule)}</span>` : ''}
</div>
<span class="mode-toggle" title="Toggle cursor sharing with other users">
<button class="mode-solo ${isSolo ? 'active' : ''}" data-action="solo">Solo</button>
<button class="mode-multi ${isSolo ? '' : 'active'}" data-action="share">Share</button>
<span class="mode-toggle" title="Toggle your online presence">
<button class="mode-solo ${isSolo ? '' : 'active'}" data-action="share">Online</button>
<button class="mode-multi ${isSolo ? 'active' : ''}" data-action="solo">Offline</button>
</span>
</div>
`);
@ -845,7 +845,7 @@ const OVERLAY_CSS = `
font-weight: normal;
}
/* ── Mode toggle (Solo/Share) ── */
/* ── Mode toggle (Online/Offline) ── */
.mode-toggle {
display: flex;

9
website/canvas.html
View File

@ -3030,7 +3030,14 @@
// Initialize Presence for real-time cursors
const peerId = generatePeerId();
const storedUsername = localStorage.getItem("rspace-username") || `User ${peerId.slice(0, 4)}`;
const storedUsername = (() => {
try {
const s = JSON.parse(localStorage.getItem("encryptid_session") || "{}");
if (s?.username) return s.username;
if (s?.displayName) return s.displayName;
} catch {}
return localStorage.getItem("rspace-username") || `User ${peerId.slice(0, 4)}`;
})();
const presence = new PresenceManager(canvas, peerId, storedUsername);
// Initialize Comment Pin Manager