From 098ac208ea59f3cfdd34382815e4b546b8183ed1 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 3 May 2026 21:21:15 -0400
Subject: [PATCH] feat(ext/settings): backup section (opens vault tab)

---
 extension/src/popup/components/settings.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/extension/src/popup/components/settings.ts b/extension/src/popup/components/settings.ts
index e975623..76e30c5 100644
--- a/extension/src/popup/components/settings.ts
+++ b/extension/src/popup/components/settings.ts
@@ -1,4 +1,4 @@
-import { sendMessage, escapeHtml } from '../../shared/state';
+import { sendMessage, escapeHtml, openVaultTab } from '../../shared/state';
 import type { VaultSettings, DeviceSettings, TrashRetention, HistoryRetention } from '../../shared/types';
 import type { ColorScheme } from '../../shared/color-scheme';
 import {
@@ -385,7 +385,19 @@ function valueToHistoryRetention(v: string): HistoryRetention {
 }
 
 function renderBackupSection(content: HTMLElement): void {
-  content.innerHTML = '<p class="muted" style="padding:20px;font-size:12px;">Backup — coming soon</p>';
+  content.innerHTML = `
+    <h3 class="settings-section-title">Backup &amp; restore</h3>
+    <div class="setting-row">
+      <div class="setting-row__info">
+        <div class="setting-row__title">Export &amp; restore backup</div>
+        <div class="setting-row__desc">Download an encrypted backup or restore from a file. Opens in the vault tab.</div>
+      </div>
+      <div class="setting-row__control">
+        <button class="btn" id="open-backup-tab" style="font-size:11px;">Open backup ▸</button>
+      </div>
+    </div>
+  `;
+  document.getElementById('open-backup-tab')?.addEventListener('click', () => openVaultTab('backup'));
 }
 
 function renderImportSection(content: HTMLElement): void {