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:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user