diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css index d506c18..467d727 100644 --- a/extension/src/vault/vault.css +++ b/extension/src/vault/vault.css @@ -150,6 +150,7 @@ body { align-items: center; gap: 6px; padding: 12px 16px; + /* rgba channels derived from --danger (#ab2b20 = rgb(171, 43, 32)) */ border: 1px solid rgba(171, 43, 32, 0.4); border-radius: 6px; background: rgba(171, 43, 32, 0.08); diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts index 5c240c6..1f11f6c 100644 --- a/extension/src/vault/vault.ts +++ b/extension/src/vault/vault.ts @@ -220,24 +220,6 @@ function renderLockScreen(app: HTMLElement): void { `; - app.querySelector('.error-cta')?.addEventListener('click', (e) => { - const cta = (e.currentTarget as HTMLElement).dataset.cta as ErrorCta['action']; - switch (cta) { - case 'unlock': { - document.getElementById('vault-passphrase')?.focus(); - break; - } - case 'open_setup': { - void chrome.tabs.create({ url: chrome.runtime.getURL('setup.html') }); - break; - } - case 'reload_extension': { - chrome.runtime.reload(); - break; - } - } - }); - const input = document.getElementById('vault-passphrase') as HTMLInputElement; const btn = document.getElementById('vault-unlock-btn')!; @@ -626,6 +608,28 @@ async function loadManifest(): Promise { // --------------------------------------------------------------------------- document.addEventListener('DOMContentLoaded', async () => { + // Delegated handler for .error-cta buttons — set up once on the stable root. + const app = document.getElementById('vault-app')!; + app.addEventListener('click', (e) => { + const btn = (e.target as HTMLElement).closest('.error-cta'); + if (!btn) return; + const cta = btn.dataset.cta as ErrorCta['action']; + switch (cta) { + case 'unlock': { + document.getElementById('vault-passphrase')?.focus(); + break; + } + case 'open_setup': { + void chrome.tabs.create({ url: chrome.runtime.getURL('setup.html') }); + break; + } + case 'reload_extension': { + chrome.runtime.reload(); + break; + } + } + }); + // Check if already unlocked const resp = await sendMessage({ type: 'is_unlocked' }); if (resp.ok) {