feat(ext/popup): wire navigation for trash, devices, field-history screens

Adds View variants, render cases, teardown calls, and entry points
in settings menu for trash and devices.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-27 00:42:53 -04:00
parent b55c59bd35
commit abfc5aed42
2 changed files with 25 additions and 1 deletions

View File

@@ -54,6 +54,11 @@ export async function renderSettings(app: HTMLElement): Promise<void> {
</div>
</div>
<div style="margin-bottom:16px;">
<button class="btn" id="trash-btn" style="width:100%;margin-bottom:8px;">🗑️ Trash</button>
<button class="btn" id="devices-btn" style="width:100%;margin-bottom:8px;">🔐 Devices</button>
</div>
<div>
<div style="font-size:12px; color:#8b949e; margin-bottom:6px;">blacklisted sites</div>
<div id="blacklist-container">
@@ -68,6 +73,10 @@ export async function renderSettings(app: HTMLElement): Promise<void> {
navigate('locked');
});
// Navigation buttons
document.getElementById('trash-btn')?.addEventListener('click', () => navigate('trash'));
document.getElementById('devices-btn')?.addEventListener('click', () => navigate('devices'));
// Capture enabled toggle
document.getElementById('capture-enabled')?.addEventListener('change', async (e) => {
const checked = (e.target as HTMLInputElement).checked;

View File

@@ -11,7 +11,12 @@ import { renderItemDetail } from './components/item-detail';
import { renderItemForm } from './components/item-form';
import { renderSettings } from './components/settings';
import { renderVaultSettings } from './components/settings-vault';
import { renderTrash } from './components/trash';
import { renderDevices } from './components/devices';
import { renderFieldHistory } from './components/field-history';
import { teardown as teardownTrash } from './components/trash';
import { teardown as teardownDevices } from './components/devices';
import { teardown as teardownFieldHistory } from './components/field-history';
// --- Escape HTML to prevent XSS ---
export function escapeHtml(str: string): string {
@@ -25,7 +30,7 @@ export function escapeHtml(str: string): string {
// --- State ---
export type View = 'locked' | 'list' | 'detail' | 'add' | 'edit' | 'settings' | 'settings-vault' | 'field-history';
export type View = 'locked' | 'list' | 'detail' | 'add' | 'edit' | 'settings' | 'settings-vault' | 'trash' | 'devices' | 'field-history';
export interface PopupState {
view: View;
@@ -131,6 +136,10 @@ function render(): void {
const app = document.getElementById('app');
if (!app) return;
teardownTrash();
teardownDevices();
teardownFieldHistory();
switch (currentState.view) {
case 'locked':
renderUnlock(app);
@@ -153,6 +162,12 @@ function render(): void {
case 'settings-vault':
renderVaultSettings(app);
break;
case 'trash':
renderTrash(app);
break;
case 'devices':
renderDevices(app);
break;
case 'field-history':
renderFieldHistory(app);
break;