feat(ext/popup): vault-settings screen (retention + generator + origin-ack revoke)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
236
extension/src/popup/components/settings-vault.ts
Normal file
236
extension/src/popup/components/settings-vault.ts
Normal file
@@ -0,0 +1,236 @@
|
||||
/// Vault-level settings screen. Covers retention (trash + field history),
|
||||
/// generator defaults (preview + "configure" → opens popover), and
|
||||
/// autofill origin-ack revocation.
|
||||
|
||||
import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup';
|
||||
import type {
|
||||
VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest,
|
||||
} from '../../shared/types';
|
||||
import { openGeneratorPopover } from './generator-popover';
|
||||
|
||||
let pendingSettings: VaultSettings | null = null;
|
||||
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
|
||||
|
||||
export function teardown(): void {
|
||||
if (activeKeyHandler) {
|
||||
document.removeEventListener('keydown', activeKeyHandler);
|
||||
activeKeyHandler = null;
|
||||
}
|
||||
pendingSettings = null;
|
||||
}
|
||||
|
||||
// --- Retention helpers ---
|
||||
|
||||
function trashRetentionToValue(r: TrashRetention): string {
|
||||
if (r.kind === 'forever') return 'forever';
|
||||
return `days:${r.value}`;
|
||||
}
|
||||
|
||||
function valueToTrashRetention(v: string): TrashRetention {
|
||||
if (v === 'forever') return { kind: 'forever' };
|
||||
const m = /^days:(\d+)$/.exec(v);
|
||||
if (m) return { kind: 'days', value: Number(m[1]) };
|
||||
return { kind: 'forever' };
|
||||
}
|
||||
|
||||
function historyRetentionToValue(r: HistoryRetention): string {
|
||||
if (r.kind === 'forever') return 'forever';
|
||||
if (r.kind === 'last_n') return `last_n:${r.value}`;
|
||||
return `days:${r.value}`;
|
||||
}
|
||||
|
||||
function valueToHistoryRetention(v: string): HistoryRetention {
|
||||
if (v === 'forever') return { kind: 'forever' };
|
||||
const mLast = /^last_n:(\d+)$/.exec(v);
|
||||
if (mLast) return { kind: 'last_n', value: Number(mLast[1]) };
|
||||
const mDays = /^days:(\d+)$/.exec(v);
|
||||
if (mDays) return { kind: 'days', value: Number(mDays[1]) };
|
||||
return { kind: 'forever' };
|
||||
}
|
||||
|
||||
// --- Generator summary ---
|
||||
|
||||
function generatorSummary(req: GeneratorRequest): string {
|
||||
if (req.kind === 'random') {
|
||||
const classes: string[] = [];
|
||||
if (req.classes.lower) classes.push('lower');
|
||||
if (req.classes.upper) classes.push('upper');
|
||||
if (req.classes.digits) classes.push('digits');
|
||||
if (req.classes.symbols) classes.push('symbols');
|
||||
const sc = req.symbol_charset.kind;
|
||||
return `Random, ${req.length} chars, ${classes.join('+') || 'no classes'}, ${sc} symbols`;
|
||||
}
|
||||
return `BIP39, ${req.word_count} words, "${req.separator}" separator, ${req.capitalization}`;
|
||||
}
|
||||
|
||||
// --- Time formatting ---
|
||||
|
||||
function relativeTime(unixSec: number): string {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const diff = now - unixSec;
|
||||
if (diff < 60) return 'just now';
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
|
||||
// --- Render ---
|
||||
|
||||
export function renderVaultSettings(app: HTMLElement): void {
|
||||
const state = getState();
|
||||
const base = state.vaultSettings;
|
||||
if (!base) {
|
||||
app.innerHTML = `<div class="pad"><p class="muted">Vault settings not loaded yet.</p></div>`;
|
||||
return;
|
||||
}
|
||||
pendingSettings = JSON.parse(JSON.stringify(base)) as VaultSettings;
|
||||
|
||||
function rerender(): void {
|
||||
if (!pendingSettings) return;
|
||||
const acksEntries = Object.entries(pendingSettings.autofill_origin_acks)
|
||||
.sort(([, a], [, b]) => b - a);
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="pad">
|
||||
<div class="settings-header">
|
||||
<button class="btn" id="back-btn">← back</button>
|
||||
<h3 style="margin:0;">vault settings</h3>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="settings-section__title">retention</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">trash</span>
|
||||
<select id="trash-retention">
|
||||
<option value="forever">Forever</option>
|
||||
<option value="days:7">7 days</option>
|
||||
<option value="days:30">30 days</option>
|
||||
<option value="days:60">60 days</option>
|
||||
<option value="days:90">90 days</option>
|
||||
<option value="days:180">180 days</option>
|
||||
<option value="days:365">365 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-row__label">field history</span>
|
||||
<select id="history-retention">
|
||||
<option value="forever">Forever</option>
|
||||
<option value="last_n:3">Last 3</option>
|
||||
<option value="last_n:5">Last 5</option>
|
||||
<option value="last_n:10">Last 10</option>
|
||||
<option value="days:30">30 days</option>
|
||||
<option value="days:90">90 days</option>
|
||||
<option value="days:365">365 days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="settings-section__title">generator</div>
|
||||
<p class="gen-preview-line">${escapeHtml(generatorSummary(pendingSettings.generator_defaults))}</p>
|
||||
<button class="btn" id="configure-gen">configure ▾</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<div class="settings-section__title">autofill origins</div>
|
||||
${acksEntries.length === 0
|
||||
? `<p class="muted">No origins acknowledged yet.</p>`
|
||||
: acksEntries.map(([host, ts]) => `
|
||||
<div class="ack-row">
|
||||
<span class="ack-row__host">${escapeHtml(host)}</span>
|
||||
<span class="ack-row__meta">${escapeHtml(relativeTime(ts))}</span>
|
||||
<button class="ack-row__revoke" data-revoke="${escapeHtml(host)}">revoke</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
|
||||
<div class="settings-footer">
|
||||
<button class="btn" id="discard-btn">discard</button>
|
||||
<button class="btn btn-primary" id="save-btn" disabled>save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Set current select values
|
||||
(document.getElementById('trash-retention') as HTMLSelectElement).value =
|
||||
trashRetentionToValue(pendingSettings.trash_retention);
|
||||
(document.getElementById('history-retention') as HTMLSelectElement).value =
|
||||
historyRetentionToValue(pendingSettings.field_history_retention);
|
||||
|
||||
wireHandlers();
|
||||
updateSaveEnabled();
|
||||
}
|
||||
|
||||
function updateSaveEnabled(): void {
|
||||
const saveBtn = document.getElementById('save-btn') as HTMLButtonElement | null;
|
||||
if (!saveBtn || !pendingSettings || !base) return;
|
||||
const changed = JSON.stringify(pendingSettings) !== JSON.stringify(base);
|
||||
saveBtn.disabled = !changed;
|
||||
}
|
||||
|
||||
function wireHandlers(): void {
|
||||
document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
|
||||
document.getElementById('discard-btn')?.addEventListener('click', () => navigate('list'));
|
||||
|
||||
document.getElementById('trash-retention')?.addEventListener('change', (e) => {
|
||||
if (!pendingSettings) return;
|
||||
pendingSettings.trash_retention = valueToTrashRetention((e.target as HTMLSelectElement).value);
|
||||
updateSaveEnabled();
|
||||
});
|
||||
|
||||
document.getElementById('history-retention')?.addEventListener('change', (e) => {
|
||||
if (!pendingSettings) return;
|
||||
pendingSettings.field_history_retention = valueToHistoryRetention((e.target as HTMLSelectElement).value);
|
||||
updateSaveEnabled();
|
||||
});
|
||||
|
||||
document.querySelectorAll<HTMLButtonElement>('[data-revoke]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (!pendingSettings) return;
|
||||
const host = btn.dataset.revoke ?? '';
|
||||
delete pendingSettings.autofill_origin_acks[host];
|
||||
rerender();
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('configure-gen')?.addEventListener('click', (e) => {
|
||||
if (!pendingSettings) return;
|
||||
const anchor = e.currentTarget as HTMLElement;
|
||||
openGeneratorPopover({
|
||||
anchor,
|
||||
initial: pendingSettings.generator_defaults,
|
||||
onPicked: () => {/* no-op — user is here to save as default, not pick */},
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('save-btn')?.addEventListener('click', async () => {
|
||||
if (!pendingSettings) return;
|
||||
const resp = await sendMessage({ type: 'update_vault_settings', settings: pendingSettings });
|
||||
if (resp.ok) {
|
||||
// Refresh cached state and navigate back.
|
||||
const refreshed = await sendMessage({ type: 'get_vault_settings' });
|
||||
if (refreshed.ok && refreshed.data) {
|
||||
const vs = (refreshed.data as { settings: VaultSettings }).settings;
|
||||
if (vs) {
|
||||
setState({ vaultSettings: vs, generatorDefaults: vs.generator_defaults });
|
||||
}
|
||||
}
|
||||
navigate('list');
|
||||
} else {
|
||||
setState({ error: resp.error });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
rerender();
|
||||
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (activeKeyHandler) document.removeEventListener('keydown', activeKeyHandler);
|
||||
activeKeyHandler = null;
|
||||
navigate('list');
|
||||
}
|
||||
};
|
||||
activeKeyHandler = handler;
|
||||
document.addEventListener('keydown', handler);
|
||||
}
|
||||
Reference in New Issue
Block a user