From 1d4b018f9aab2fe5431490f2a680c2c515730235 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 3 May 2026 21:24:19 -0400
Subject: [PATCH] feat(ext/vault): bottom sheet type picker for new item

---
 extension/src/vault/vault.ts | 62 +++++++++++++++++++++++++++++++++---
 1 file changed, 58 insertions(+), 4 deletions(-)

diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts
index 5851cd6..3f21552 100644
--- a/extension/src/vault/vault.ts
+++ b/extension/src/vault/vault.ts
@@ -26,6 +26,20 @@ import { renderBackupPanel, teardown as teardownBackup } from './components/back
 import { renderImportPanel, teardown as teardownImport } from './components/import-panel';
 import { applyColorScheme } from '../shared/color-scheme';
 
+// ---------------------------------------------------------------------------
+// Bottom sheet type picker
+// ---------------------------------------------------------------------------
+
+const BOTTOM_SHEET_TYPES: Array<{ type: ItemType; label: string }> = [
+  { type: 'login',       label: 'Login' },
+  { type: 'secure_note', label: 'Secure Note' },
+  { type: 'totp',        label: 'TOTP' },
+  { type: 'card',        label: 'Card' },
+  { type: 'identity',    label: 'Identity' },
+  { type: 'key',         label: 'SSH / API Key' },
+  { type: 'document',    label: 'Document' },
+];
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -308,11 +322,52 @@ function renderShell(app: HTMLElement): void {
 }
 
 // ---------------------------------------------------------------------------
-// Bottom sheet (stub — wired in Task 11)
+// Bottom sheet (wired in Task 11)
 // ---------------------------------------------------------------------------
 
 function wireBottomSheet(): void {
-  // wired in Task 11
+  document.getElementById('vault-sheet-scrim')?.addEventListener('click', closeBottomSheet);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && state.bottomSheetOpen) closeBottomSheet();
+  });
+}
+
+function openBottomSheet(): void {
+  const sheet = document.getElementById('vault-bottom-sheet');
+  const scrim = document.getElementById('vault-sheet-scrim');
+  if (!sheet || !scrim) return;
+
+  sheet.innerHTML = `
+    <div class="vault-bottom-sheet__handle"></div>
+    <div class="vault-bottom-sheet__title">New item — choose type</div>
+    <div class="vault-type-grid">
+      ${BOTTOM_SHEET_TYPES.map((t) => `
+        <button class="vault-type-card" data-type="${t.type}">
+          <span class="vault-type-card__icon" aria-hidden="true">${typeIcon(t.type)}</span>
+          <span class="vault-type-card__name">${escapeHtml(t.label)}</span>
+        </button>
+      `).join('')}
+    </div>
+  `;
+
+  sheet.classList.add('vault-bottom-sheet--open');
+  scrim.classList.add('vault-bottom-sheet-scrim--visible');
+  state.bottomSheetOpen = true;
+
+  sheet.querySelectorAll<HTMLButtonElement>('[data-type]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const type = btn.dataset.type as ItemType;
+      closeBottomSheet();
+      setHash('add', type);
+      renderPane();
+    });
+  });
+}
+
+function closeBottomSheet(): void {
+  document.getElementById('vault-bottom-sheet')?.classList.remove('vault-bottom-sheet--open');
+  document.getElementById('vault-sheet-scrim')?.classList.remove('vault-bottom-sheet-scrim--visible');
+  state.bottomSheetOpen = false;
 }
 
 // ---------------------------------------------------------------------------
@@ -471,8 +526,7 @@ function wireSidebar(): void {
         state.selectedId = null;
         state.selectedItem = null;
         state.newType = null;
-        setHash('add');
-        renderPane();
+        openBottomSheet();
         return;
       }
       if (nav === 'trash' || nav === 'devices' || nav === 'settings') {