From abfc5aed426fc507cb8dc161e61ec52268a09479 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Mon, 27 Apr 2026 00:42:53 -0400
Subject: [PATCH] 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>
---
 extension/src/popup/components/settings.ts |  9 +++++++++
 extension/src/popup/popup.ts               | 17 ++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/extension/src/popup/components/settings.ts b/extension/src/popup/components/settings.ts
index 2a3db15..97b2ce7 100644
--- a/extension/src/popup/components/settings.ts
+++ b/extension/src/popup/components/settings.ts
@@ -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;
diff --git a/extension/src/popup/popup.ts b/extension/src/popup/popup.ts
index c5207d2..43048c7 100644
--- a/extension/src/popup/popup.ts
+++ b/extension/src/popup/popup.ts
@@ -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;