Merge branch 'dev'
CI/CD / deploy (push) Successful in 2m23s
Details
CI/CD / deploy (push) Successful in 2m23s
Details
This commit is contained in:
commit
8e69a34d35
|
|
@ -880,6 +880,7 @@ export class CommunitySync extends EventTarget {
|
|||
*/
|
||||
#applyDocToDOM(): void {
|
||||
const shapes = this.#doc.shapes || {};
|
||||
const validIds = new Set<string>();
|
||||
|
||||
for (const [id, shapeData] of Object.entries(shapes)) {
|
||||
const d = shapeData as Record<string, unknown>;
|
||||
|
|
@ -890,6 +891,7 @@ export class CommunitySync extends EventTarget {
|
|||
&& (fb as Record<string, number>)[this.#localDID]) {
|
||||
continue;
|
||||
}
|
||||
validIds.add(id);
|
||||
this.#applyShapeToDOM(shapeData);
|
||||
// If forgotten by others (but not this user), emit state-changed for fade visual
|
||||
if (fb && typeof fb === 'object' && Object.keys(fb).length > 0) {
|
||||
|
|
@ -899,6 +901,13 @@ export class CommunitySync extends EventTarget {
|
|||
}
|
||||
}
|
||||
|
||||
// Prune stale DOM shapes that are deleted, forgotten, or no longer in the doc
|
||||
for (const id of this.#shapes.keys()) {
|
||||
if (!validIds.has(id)) {
|
||||
this.#removeShapeFromDOM(id);
|
||||
}
|
||||
}
|
||||
|
||||
// Notify event bus if there are any events to process
|
||||
if (this.#doc.eventLog && this.#doc.eventLog.length > 0) {
|
||||
this.dispatchEvent(new CustomEvent("eventlog-changed"));
|
||||
|
|
|
|||
|
|
@ -1069,11 +1069,10 @@ export function renderShell(opts: ShellOptions): string {
|
|||
})();
|
||||
|
||||
// Reconcile remote layer changes (shared by BroadcastChannel + Automerge)
|
||||
function reconcileRemoteLayers(remoteLayers) {
|
||||
// Guard: never let remote sync wipe all tabs when we have an active module.
|
||||
// Empty remote layers indicate a CRDT initial state or sync race, not
|
||||
// an intentional "close everything" action.
|
||||
if (remoteLayers.length === 0 && currentModuleId) {
|
||||
function reconcileRemoteLayers(remoteLayers, fromUserAction) {
|
||||
// Guard: never let remote sync wipe all tabs when we have an active module,
|
||||
// UNLESS this came from a deliberate user action (e.g. close-all via BroadcastChannel).
|
||||
if (remoteLayers.length === 0 && currentModuleId && !fromUserAction) {
|
||||
// Keep local layers intact — remote has nothing useful
|
||||
tabBar.setLayers(layers);
|
||||
return;
|
||||
|
|
@ -1105,7 +1104,7 @@ export function renderShell(opts: ShellOptions): string {
|
|||
if (e.data?.type !== 'tabs-sync') return;
|
||||
const remoteLayers = e.data.layers || [];
|
||||
for (const mid of (e.data.closed || [])) _closedModuleIds.add(mid);
|
||||
reconcileRemoteLayers(remoteLayers);
|
||||
reconcileRemoteLayers(remoteLayers, true);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -1126,8 +1125,9 @@ export function renderShell(opts: ShellOptions): string {
|
|||
.then(r => r.ok ? r.json() : null)
|
||||
.then(data => {
|
||||
if (!data?.tabs || !Array.isArray(data.tabs) || data.tabs.length === 0) {
|
||||
// Server has nothing — push localStorage tabs up
|
||||
saveTabs();
|
||||
// Server has no saved tabs. Only push if user has meaningful local tabs
|
||||
// (not just the auto-added current module)
|
||||
if (layers.length > 1) saveTabs();
|
||||
return;
|
||||
}
|
||||
// Server-authoritative: adopt server tabs exactly.
|
||||
|
|
@ -1522,23 +1522,22 @@ export function renderShell(opts: ShellOptions): string {
|
|||
|
||||
const localActiveId = 'layer-' + currentModuleId;
|
||||
|
||||
// Merge: Automerge layers win if they exist, otherwise seed from localStorage
|
||||
// User's saved tabs are authoritative — sync Automerge to match.
|
||||
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);
|
||||
|
||||
// Remove Automerge-only layers that the user doesn't have open
|
||||
for (const rl of remoteLayers) {
|
||||
if (!layers.find(l => l.moduleId === rl.moduleId)) {
|
||||
sync.removeLayer(rl.id);
|
||||
}
|
||||
layers = deduplicateLayers(sync.getLayers());
|
||||
tabBar.setLayers(layers);
|
||||
tabBar.setFlows(sync.getFlows());
|
||||
} else {
|
||||
// First connection: push all localStorage tabs into Automerge
|
||||
}
|
||||
// Add user's tabs that aren't in Automerge yet
|
||||
for (const l of layers) {
|
||||
if (!remoteLayers.find(rl => rl.moduleId === l.moduleId)) {
|
||||
sync.addLayer(l);
|
||||
}
|
||||
}
|
||||
tabBar.setFlows(sync.getFlows());
|
||||
|
||||
// Active tab stays local — always matches the URL
|
||||
tabBar.setAttribute('active', localActiveId);
|
||||
|
|
@ -1575,7 +1574,7 @@ export function renderShell(opts: ShellOptions): string {
|
|||
// Never touch the active tab: it's managed locally by TabCache
|
||||
// and the tab-bar component via layer-switch events.
|
||||
sync.addEventListener('change', () => {
|
||||
reconcileRemoteLayers(sync.getLayers());
|
||||
reconcileRemoteLayers(sync.getLayers(), false);
|
||||
tabBar.setFlows(sync.getFlows());
|
||||
const viewMode = sync.doc.layerViewMode;
|
||||
if (viewMode) tabBar.setAttribute('view-mode', viewMode);
|
||||
|
|
|
|||
|
|
@ -470,9 +470,10 @@ export class RStackIdentity extends HTMLElement {
|
|||
const cached = localStorage.getItem(CACHE_KEY);
|
||||
if (cached) {
|
||||
try {
|
||||
const { ts, ok } = JSON.parse(cached);
|
||||
if (Date.now() - ts < 30 * 60 * 1000) {
|
||||
if (!ok) this.#showRecoveryDot();
|
||||
const c = JSON.parse(cached);
|
||||
if (Date.now() - c.ts < 30 * 60 * 1000) {
|
||||
if (!c.socialRecovery) this.#showRecoveryDot();
|
||||
if (!c.email || !c.multiDevice || !c.socialRecovery) this.#showAccountDot();
|
||||
return;
|
||||
}
|
||||
} catch { /* stale cache */ }
|
||||
|
|
@ -484,9 +485,9 @@ export class RStackIdentity extends HTMLElement {
|
|||
});
|
||||
if (!res.ok) return;
|
||||
const status = await res.json();
|
||||
const recoveryOk = status.socialRecovery === true;
|
||||
localStorage.setItem(CACHE_KEY, JSON.stringify({ ts: Date.now(), ok: recoveryOk }));
|
||||
if (!recoveryOk) this.#showRecoveryDot();
|
||||
localStorage.setItem(CACHE_KEY, JSON.stringify({ ts: Date.now(), email: !!status.email, multiDevice: !!status.multiDevice, socialRecovery: !!status.socialRecovery }));
|
||||
if (!status.socialRecovery) this.#showRecoveryDot();
|
||||
if (!status.email || !status.multiDevice || !status.socialRecovery) this.#showAccountDot();
|
||||
} catch { /* offline */ }
|
||||
}
|
||||
|
||||
|
|
@ -499,6 +500,14 @@ export class RStackIdentity extends HTMLElement {
|
|||
wrap.appendChild(dot);
|
||||
}
|
||||
|
||||
#showAccountDot() {
|
||||
const btn = this.#shadow.querySelector('[data-action="my-account"]');
|
||||
if (!btn || btn.querySelector(".acct-alert-dot")) return;
|
||||
const dot = document.createElement("span");
|
||||
dot.className = "acct-alert-dot";
|
||||
btn.appendChild(dot);
|
||||
}
|
||||
|
||||
async #checkDeviceNudge() {
|
||||
const session = getSession();
|
||||
if (!session?.accessToken) return;
|
||||
|
|
@ -1360,10 +1369,6 @@ export class RStackIdentity extends HTMLElement {
|
|||
let devicesLoaded = false;
|
||||
let devicesLoading = false;
|
||||
|
||||
let addresses: { id: string; street: string; city: string; state: string; zip: string; country: string }[] = [];
|
||||
let addressesLoaded = false;
|
||||
let addressesLoading = false;
|
||||
|
||||
// Connections data
|
||||
let connectionsLoaded = false;
|
||||
let connectionsLoading = false;
|
||||
|
|
@ -1418,7 +1423,6 @@ export class RStackIdentity extends HTMLElement {
|
|||
${renderEmailSection()}
|
||||
${renderDeviceSection()}
|
||||
${renderRecoverySection()}
|
||||
${renderAddressSection()}
|
||||
|
||||
<div class="account-section account-section--inline${!backupEnabled ? " section--warning" : ""}">
|
||||
<div class="account-section-header">
|
||||
|
|
@ -1714,52 +1718,7 @@ export class RStackIdentity extends HTMLElement {
|
|||
</div>`;
|
||||
};
|
||||
|
||||
const renderAddressSection = () => {
|
||||
const isOpen = openSection === "address";
|
||||
let body = "";
|
||||
if (isOpen) {
|
||||
if (addressesLoading) {
|
||||
body = `<div class="account-section-body"><div style="text-align:center;padding:1rem;color:var(--rs-text-secondary)"><span class="spinner"></span> Loading addresses...</div></div>`;
|
||||
} else {
|
||||
const listHTML = addresses.length > 0
|
||||
? `<div class="contact-list">${addresses.map(a => `
|
||||
<div class="contact-item">
|
||||
<div style="display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-size:0.85rem">
|
||||
<span>${a.street.replace(/</g, "<")}</span>
|
||||
<span style="color:var(--rs-text-secondary)">${a.city.replace(/</g, "<")}, ${a.state.replace(/</g, "<")} ${a.zip.replace(/</g, "<")} ${a.country.replace(/</g, "<")}</span>
|
||||
</div>
|
||||
<button class="contact-remove" data-remove-address="${a.id}">×</button>
|
||||
</div>
|
||||
`).join("")}</div>` : "";
|
||||
|
||||
body = `
|
||||
<div class="account-section-body">
|
||||
<div class="address-form">
|
||||
<input class="input" id="acct-street" type="text" placeholder="Street address" />
|
||||
<div class="address-row">
|
||||
<input class="input" id="acct-city" type="text" placeholder="City" />
|
||||
<input class="input" id="acct-state" type="text" placeholder="State" />
|
||||
</div>
|
||||
<div class="address-row">
|
||||
<input class="input" id="acct-zip" type="text" placeholder="ZIP / Postal code" />
|
||||
<input class="input" id="acct-country" type="text" placeholder="Country" />
|
||||
</div>
|
||||
<button class="btn btn--primary" data-action="save-address" style="align-self:flex-start">Save Address</button>
|
||||
</div>
|
||||
${listHTML}
|
||||
<div class="error" id="address-error"></div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
return `
|
||||
<div class="account-section${isOpen ? " open" : ""}">
|
||||
<div class="account-section-header" data-section="address">
|
||||
<span>🏠 Postal Address</span>
|
||||
<span class="section-arrow">${isOpen ? "▾" : "▸"}</span>
|
||||
</div>
|
||||
${body}
|
||||
</div>`;
|
||||
};
|
||||
|
||||
const renderShortcutsSection = () => {
|
||||
const isOpen = openSection === "shortcuts";
|
||||
|
|
@ -1944,31 +1903,6 @@ export class RStackIdentity extends HTMLElement {
|
|||
render();
|
||||
};
|
||||
|
||||
const loadAddresses = async () => {
|
||||
if (addressesLoaded || addressesLoading) return;
|
||||
addressesLoading = true;
|
||||
render();
|
||||
try {
|
||||
const res = await fetch(`${ENCRYPTID_URL}/api/user/addresses`, {
|
||||
headers: { Authorization: `Bearer ${getAccessToken()}` },
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
addresses = (data.addresses || []).map((a: any) => {
|
||||
try {
|
||||
const decoded = JSON.parse(atob(a.ciphertext));
|
||||
return { id: a.id, ...decoded };
|
||||
} catch {
|
||||
return { id: a.id, street: "", city: "", state: "", zip: "", country: "" };
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch { /* offline */ }
|
||||
addressesLoaded = true;
|
||||
addressesLoading = false;
|
||||
render();
|
||||
};
|
||||
|
||||
const loadDevices = async () => {
|
||||
if (devicesLoaded || devicesLoading) return;
|
||||
devicesLoading = true;
|
||||
|
|
@ -2003,7 +1937,6 @@ export class RStackIdentity extends HTMLElement {
|
|||
const section = (el as HTMLElement).dataset.section!;
|
||||
openSection = openSection === section ? null : section;
|
||||
if (openSection === "recovery") loadGuardians();
|
||||
if (openSection === "address") loadAddresses();
|
||||
if (openSection === "device") loadDevices();
|
||||
if (openSection === "connections") loadConnections();
|
||||
render();
|
||||
|
|
@ -2261,58 +2194,6 @@ export class RStackIdentity extends HTMLElement {
|
|||
showWalkthrough = false; walkthroughStep = 0; render();
|
||||
});
|
||||
|
||||
// Address: save
|
||||
overlay.querySelector('[data-action="save-address"]')?.addEventListener("click", async () => {
|
||||
const street = (overlay.querySelector("#acct-street") as HTMLInputElement)?.value.trim() || "";
|
||||
const city = (overlay.querySelector("#acct-city") as HTMLInputElement)?.value.trim() || "";
|
||||
const state = (overlay.querySelector("#acct-state") as HTMLInputElement)?.value.trim() || "";
|
||||
const zip = (overlay.querySelector("#acct-zip") as HTMLInputElement)?.value.trim() || "";
|
||||
const country = (overlay.querySelector("#acct-country") as HTMLInputElement)?.value.trim() || "";
|
||||
const err = overlay.querySelector("#address-error") as HTMLElement;
|
||||
const btn = overlay.querySelector('[data-action="save-address"]') as HTMLButtonElement;
|
||||
|
||||
if (!street || !city) { err.textContent = "Street and city are required."; return; }
|
||||
err.textContent = "";
|
||||
btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> Saving...';
|
||||
|
||||
const payload = { street, city, state, zip, country };
|
||||
const ciphertext = btoa(JSON.stringify(payload));
|
||||
|
||||
try {
|
||||
const res = await fetch(`${ENCRYPTID_URL}/api/user/addresses`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", Authorization: `Bearer ${getAccessToken()}` },
|
||||
body: JSON.stringify({ ciphertext }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || "Failed to save address");
|
||||
addresses.push({ id: data.id || data.address?.id || String(Date.now()), ...payload });
|
||||
render();
|
||||
} catch (e: any) {
|
||||
btn.disabled = false; btn.innerHTML = "Save Address";
|
||||
err.textContent = e.message;
|
||||
}
|
||||
});
|
||||
|
||||
// Address: remove
|
||||
overlay.querySelectorAll("[data-remove-address]").forEach(el => {
|
||||
el.addEventListener("click", async () => {
|
||||
const id = (el as HTMLElement).dataset.removeAddress!;
|
||||
const err = overlay.querySelector("#address-error") as HTMLElement;
|
||||
try {
|
||||
const res = await fetch(`${ENCRYPTID_URL}/api/user/addresses/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: { Authorization: `Bearer ${getAccessToken()}` },
|
||||
});
|
||||
if (!res.ok) throw new Error("Failed to remove address");
|
||||
addresses = addresses.filter(a => a.id !== id);
|
||||
render();
|
||||
} catch (e: any) {
|
||||
if (err) err.textContent = e.message;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Device: rename credential
|
||||
overlay.querySelectorAll("[data-rename-credential]").forEach(el => {
|
||||
el.addEventListener("click", async () => {
|
||||
|
|
@ -2820,6 +2701,13 @@ const STYLES = `
|
|||
0%, 100% { box-shadow: 0 0 4px rgba(248,113,113,0.4); }
|
||||
50% { box-shadow: 0 0 10px rgba(248,113,113,0.8); }
|
||||
}
|
||||
/* Account alert dot on "My Account" dropdown item */
|
||||
.acct-alert-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: #f87171; margin-left: auto; flex-shrink: 0;
|
||||
box-shadow: 0 0 6px rgba(248,113,113,0.6);
|
||||
animation: recovery-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Persona switcher in dropdown */
|
||||
.dropdown-label {
|
||||
|
|
|
|||
Loading…
Reference in New Issue