alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/vault): bottom sheet type picker for new item

Browse Source
This commit is contained in:
adlee-was-taken
2026-05-03 21:24:19 -04:00
parent 882a89bedd
commit 1d4b018f9a
1 changed files with 58 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
extension/src/vault/vault.ts
View File

@@ -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') {