${escapeHtml(item.title)}
-
diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index 09c3509..ee28b08 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -1608,3 +1608,94 @@ textarea {
margin-top: 8px;
background: var(--bg-input);
}
+
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 20px;
+ text-align: center;
+}
+
+.empty-state__icon {
+ font-size: 28px;
+ color: var(--text-muted, #8b949e);
+ margin-bottom: 12px;
+ display: block;
+}
+
+.empty-state__title {
+ font-size: 13px;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+
+.empty-state__hint {
+ font-size: 11px;
+ color: var(--text-muted, #8b949e);
+}
+
+.type-card-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.type-card {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 10px 12px;
+ background: var(--bg-elevated, #161b22);
+ border: 1px solid var(--border-mid, #30363d);
+ border-radius: 6px;
+ cursor: pointer;
+ text-align: left;
+ transition: border-color 0.15s;
+}
+
+.type-card:hover { border-color: var(--gold-base, #a88a4a); }
+
+.type-card__icon { font-size: 20px; margin-bottom: 4px; }
+.type-card__label { font-size: 12px; font-weight: 600; }
+
+/* Toast notifications */
+.relicario-toast-container {
+ position: fixed;
+ bottom: 16px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ pointer-events: none;
+ z-index: 9999;
+}
+
+.vault-shell .relicario-toast-container {
+ left: auto;
+ right: 24px;
+ transform: none;
+}
+
+.relicario-toast {
+ padding: 8px 16px;
+ border-radius: 6px;
+ font-size: 12px;
+ opacity: 0;
+ transform: translateY(8px);
+ transition: opacity 0.2s, transform 0.2s;
+ pointer-events: none;
+}
+
+.relicario-toast--visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.relicario-toast--success { background: #1f4a24; color: #aff0b5; border: 1px solid #238636; }
+.relicario-toast--error { background: #4a1f1f; color: #f0afaf; border: 1px solid #ab2b20; }
+.relicario-toast--info { background: #1f2d4a; color: #afc8f0; border: 1px solid #1f6feb; }
+.type-card__desc { font-size: 10px; color: var(--text-muted, #8b949e); margin-top: 2px; }
diff --git a/extension/src/shared/__tests__/glyphs.test.ts b/extension/src/shared/__tests__/glyphs.test.ts
index 957c28c..312251c 100644
--- a/extension/src/shared/__tests__/glyphs.test.ts
+++ b/extension/src/shared/__tests__/glyphs.test.ts
@@ -41,3 +41,30 @@ describe('glyph constants', () => {
expect(GLYPH_NEXT).toBe('βΈ');
});
});
+
+describe('Stream A glyphs (vault tab + type icons)', () => {
+ it('exports GLYPH_VAULT_TAB as U+29C9', () => {
+ expect(glyphs.GLYPH_VAULT_TAB).toBe('β§');
+ });
+
+ it('exports per-type glyph constants', () => {
+ expect(glyphs.GLYPH_TYPE_LOGIN).toBe('β');
+ expect(glyphs.GLYPH_TYPE_SECURE_NOTE).toBe('β«');
+ expect(glyphs.GLYPH_TYPE_TOTP).toBe('β‘');
+ expect(glyphs.GLYPH_TYPE_CARD).toBe('β');
+ expect(glyphs.GLYPH_TYPE_IDENTITY).toBe('β¬');
+ expect(glyphs.GLYPH_TYPE_KEY).toBe('βΉ');
+ expect(glyphs.GLYPH_TYPE_DOCUMENT).toBe('β‘');
+ });
+
+ it('per-type glyphs are single codepoints (no emoji)', () => {
+ const typeGlyphs = [
+ glyphs.GLYPH_TYPE_LOGIN, glyphs.GLYPH_TYPE_SECURE_NOTE, glyphs.GLYPH_TYPE_TOTP,
+ glyphs.GLYPH_TYPE_CARD, glyphs.GLYPH_TYPE_IDENTITY, glyphs.GLYPH_TYPE_KEY,
+ glyphs.GLYPH_TYPE_DOCUMENT,
+ ];
+ for (const g of typeGlyphs) {
+ expect([...g].length).toBe(1);
+ }
+ });
+});
diff --git a/extension/src/shared/glyphs.ts b/extension/src/shared/glyphs.ts
index a69e3fb..71a23a7 100644
--- a/extension/src/shared/glyphs.ts
+++ b/extension/src/shared/glyphs.ts
@@ -17,6 +17,19 @@ export const GLYPH_DEVICES = 'β¬'; // sidebar devices nav
export const GLYPH_SETTINGS = 'β'; // sidebar settings nav
export const GLYPH_LOCK = 'β»'; // sidebar lock nav
export const GLYPH_NEXT = 'βΈ'; // forward / next button (matches βΎ/βΈ disclosure family)
+export const GLYPH_COPY = 'β'; // copy to clipboard
+export const GLYPH_SYNC = 'β
'; // sync / upload
+export const GLYPH_PREVIEW = 'β'; // preview / expand
+
+export const GLYPH_VAULT_TAB = 'β§'; // U+29C9 pop-out to fullscreen vault tab
+
+export const GLYPH_TYPE_LOGIN = 'β'; // login
+export const GLYPH_TYPE_SECURE_NOTE = 'β«'; // secure note
+export const GLYPH_TYPE_TOTP = 'β‘'; // totp / 2FA
+export const GLYPH_TYPE_CARD = 'β'; // card
+export const GLYPH_TYPE_IDENTITY = 'β¬'; // identity
+export const GLYPH_TYPE_KEY = 'βΉ'; // SSH / API key
+export const GLYPH_TYPE_DOCUMENT = 'β‘'; // document
/// Inline HTML snippet for the required-field pill. Use after a label's text:
/// ``
diff --git a/extension/src/shared/toast.ts b/extension/src/shared/toast.ts
new file mode 100644
index 0000000..943ea09
--- /dev/null
+++ b/extension/src/shared/toast.ts
@@ -0,0 +1,26 @@
+export function showToast(
+ message: string,
+ type: 'success' | 'error' | 'info' = 'info',
+ durationMs = 2500,
+): void {
+ let container = document.querySelectorπ
+ ${GLYPH_TYPE_DOCUMENT}
${escapeHtml(primaryRef.filename)}
β download
- ${isImageMime ? 'π preview' : ''}
+ ${isImageMime ? `${GLYPH_PREVIEW} preview` : ''}
-
- 
- Relicario
+ ('[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;
+}
+
+// ---------------------------------------------------------------------------
+// Drawer (implemented in Task 10)
+// ---------------------------------------------------------------------------
+
+function openDrawer(): void {
+ document.getElementById('vault-drawer')?.classList.add('vault-drawer--open');
+}
+
+function closeDrawer(): void {
+ state.drawerOpen = false;
+ state.selectedId = null;
+ state.selectedItem = null;
+ document.getElementById('vault-drawer')?.classList.remove('vault-drawer--open');
+}
+
+function getDrawerCoreFields(item: Item): Array<[string, string, boolean]> {
+ const core = item.core as unknown as Record;
+ if (!core) return [];
+ const fields: Array<[string, string, boolean]> = [];
+
+ switch (item.type) {
+ case 'login':
+ if ('username' in core) fields.push(['username', String(core.username ?? ''), false]);
+ if ('password' in core) fields.push(['password', 'β’β’β’β’β’β’β’β’', false]);
+ if ('url' in core) fields.push(['url', String(core.url ?? ''), true]);
+ break;
+ case 'card': {
+ if ('number' in core) fields.push(['number', String(core.number ?? ''), false]);
+ if ('holder' in core) fields.push(['holder', String(core.holder ?? ''), false]);
+ if ('expiry' in core && core.expiry) {
+ const exp = core.expiry as { month: number; year: number };
+ fields.push(['expiry', `${String(exp.month).padStart(2, '0')}/${exp.year}`, false]);
+ }
+ if ('cvv' in core) fields.push(['cvv', 'β’β’β’', false]);
+ if ('pin' in core) fields.push(['pin', 'β’β’β’β’', false]);
+ break;
+ }
+ case 'identity':
+ if ('full_name' in core) fields.push(['full name', String(core.full_name ?? ''), true]);
+ if ('email' in core) fields.push(['email', String(core.email ?? ''), true]);
+ if ('phone' in core) fields.push(['phone', String(core.phone ?? ''), false]);
+ if ('address' in core) fields.push(['address', String(core.address ?? ''), true]);
+ if ('date_of_birth' in core) fields.push(['date of birth', String(core.date_of_birth ?? ''), false]);
+ break;
+ case 'key':
+ if ('label' in core) fields.push(['label', String(core.label ?? ''), true]);
+ if ('algorithm' in core) fields.push(['algorithm', String(core.algorithm ?? ''), false]);
+ if ('public_key' in core) fields.push(['public key', String(core.public_key ?? ''), true]);
+ break;
+ case 'secure_note':
+ if ('body' in core) fields.push(['body', String(core.body ?? ''), true]);
+ break;
+ case 'totp':
+ if ('issuer' in core) fields.push(['issuer', String(core.issuer ?? ''), false]);
+ if ('label' in core) fields.push(['label', String(core.label ?? ''), false]);
+ break;
+ case 'document':
+ if ('filename' in core) fields.push(['filename', String(core.filename ?? ''), true]);
+ if ('mime_type' in core) fields.push(['type', String(core.mime_type ?? ''), false]);
+ break;
+ }
+
+ if (item.notes) fields.push(['notes', item.notes, true]);
+ return fields;
+}
+
+function renderDrawer(item: Item): void {
+ const drawer = document.getElementById('vault-drawer');
+ if (!drawer) return;
+
+ const coreFields = getDrawerCoreFields(item);
+
+ drawer.innerHTML = `
+ {
+ const resp = await sendMessage({ type: 'get_item', id });
+ if (!resp.ok) return;
+ const data = resp.data as { item: Item };
+ state.selectedId = id;
+ state.selectedItem = data.item;
+ state.drawerOpen = true;
+ renderSidebarCategories();
+ renderListPane();
+ renderDrawer(data.item);
+ openDrawer();
}
// ---------------------------------------------------------------------------
@@ -293,7 +506,8 @@ function wireSidebar(): void {
const searchInput = document.getElementById('vault-search') as HTMLInputElement | null;
searchInput?.addEventListener('input', () => {
state.searchQuery = searchInput.value;
- renderSidebarList();
+ renderSidebarCategories();
+ renderListPane();
});
// Nav buttons
@@ -313,8 +527,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') {
@@ -328,11 +541,16 @@ function wireSidebar(): void {
});
});
- // Global "/" shortcut to focus search
+ // Global "/" shortcut to focus search; Esc to close drawer
document.addEventListener('keydown', (e) => {
if (e.key === '/' && !isEditableTarget(e.target)) {
e.preventDefault();
searchInput?.focus();
+ return;
+ }
+ if (e.key === 'Escape' && state.drawerOpen) {
+ closeDrawer();
+ renderListPane();
}
});
}
@@ -346,7 +564,7 @@ function isEditableTarget(target: EventTarget | null): boolean {
}
// ---------------------------------------------------------------------------
-// Sidebar list
+// Sidebar category nav
// ---------------------------------------------------------------------------
function getFilteredEntries(): Array<[ItemId, ManifestEntry]> {
@@ -367,70 +585,96 @@ function getFilteredEntries(): Array<[ItemId, ManifestEntry]> {
return filtered;
}
-function renderSidebarList(): void {
- const container = document.getElementById('vault-sidebar-list');
+function renderSidebarCategories(): void {
+ const container = document.getElementById('vault-categories');
if (!container) return;
const filtered = getFilteredEntries();
-
- // Group by type
- const groups = new Map>();
- for (const entry of filtered) {
- const t = entry[1].type;
- if (!groups.has(t)) groups.set(t, []);
- groups.get(t)!.push(entry);
- }
-
- if (filtered.length === 0) {
- container.innerHTML = '('.vault-category-row').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ state.activeGroup = btn.dataset.group || null;
+ state.drawerOpen = false;
+ state.selectedId = null;
+ state.selectedItem = null;
+ renderSidebarCategories();
+ renderListPane();
+ closeDrawer();
});
});
}
-async function selectItem(id: ItemId): Promise {
- state.loading = true;
- const resp = await sendMessage({ type: 'get_item', id });
- if (resp.ok) {
- const data = resp.data as { item: Item };
- state.selectedId = id;
- state.selectedItem = data.item;
- state.loading = false;
- setHash('detail', id);
- renderSidebarList();
- renderPane();
- } else {
- state.loading = false;
- state.error = (resp as { error: string }).error;
+// ---------------------------------------------------------------------------
+// List pane
+// ---------------------------------------------------------------------------
+
+function renderListPane(): void {
+ const pane = document.getElementById('vault-list-pane');
+ if (!pane) return;
+
+ const group = state.activeGroup as ItemType | null;
+ let items = getFilteredEntries();
+ if (group) items = items.filter(([, e]) => e.type === group);
+
+ if (items.length === 0) {
+ pane.innerHTML = `
+ ('.vault-list-row').forEach((row) => {
+ row.addEventListener('click', async () => {
+ await selectItemForDrawer(row.dataset.id!);
+ });
+ });
}
// ---------------------------------------------------------------------------
@@ -446,8 +690,8 @@ const SAVE_HINT = isMac ? 'β+S to save' : 'Ctrl+S to save';
function renderFormWrapped(app: HTMLElement, mode: 'add' | 'edit'): void {
const itemType = state.selectedItem?.type ?? state.newType ?? 'login';
- const typeLabel = itemType.replace('_', ' ');
- const titleText = mode === 'add' ? `new ${typeLabel}` : `edit ${typeLabel}`;
+ const typeLabelText = itemType.replace('_', ' ');
+ const titleText = mode === 'add' ? `new ${typeLabelText}` : `edit ${typeLabelText}`;
const wrapper = document.createElement('div');
wrapper.className = 'form-pane';
wrapper.innerHTML = `
@@ -505,6 +749,7 @@ export const __test__ = { renderFormWrapped };
function teardownPaneComponents(): void {
teardownTrash();
teardownDevices();
+ teardownSettings();
teardownFieldHistory();
teardownBackup();
teardownImport();
@@ -554,7 +799,7 @@ function renderPane(): void {
renderDevices(pane);
break;
case 'settings':
- renderSettings(pane);
+ void renderSettings(pane);
break;
case 'settings-vault':
renderVaultSettingsView(pane);
@@ -674,7 +919,8 @@ document.addEventListener('DOMContentLoaded', async () => {
if ((route.view === 'detail' || route.view === 'edit') && route.id) {
if (state.selectedId === route.id && state.selectedItem) {
renderPane();
- renderSidebarList();
+ renderSidebarCategories();
+ renderListPane();
return;
}
// Need to fetch the item
@@ -685,7 +931,30 @@ document.addEventListener('DOMContentLoaded', async () => {
// For non-item views, just re-render the pane
state.selectedId = null;
state.selectedItem = null;
- renderSidebarList();
+ renderSidebarCategories();
+ renderListPane();
renderPane();
});
});
+
+// ---------------------------------------------------------------------------
+// Legacy selectItem β used by hash-change deep linking
+// ---------------------------------------------------------------------------
+
+async function selectItem(id: ItemId): Promise {
+ state.loading = true;
+ const resp = await sendMessage({ type: 'get_item', id });
+ if (resp.ok) {
+ const data = resp.data as { item: Item };
+ state.selectedId = id;
+ state.selectedItem = data.item;
+ state.loading = false;
+ setHash('detail', id);
+ renderSidebarCategories();
+ renderListPane();
+ renderPane();
+ } else {
+ state.loading = false;
+ state.error = (resp as { error: string }).error;
+ }
+}
- Relicario
+
+
-
+
-
-
-
-
+
+ Relicario
+
+
+
+
+ Relicario
+
- select an item
+
+
+
+
`;
wireSidebar();
+ wireBottomSheet();
}
- renderSidebarList();
- renderPane();
+ renderSidebarCategories();
+ renderListPane();
+ if (state.drawerOpen && state.selectedItem) {
+ renderDrawer(state.selectedItem);
+ }
+}
+
+// ---------------------------------------------------------------------------
+// Bottom sheet (wired in Task 11)
+// ---------------------------------------------------------------------------
+
+function wireBottomSheet(): void {
+ 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 = `
+
+ New item β choose type
+
+ ${BOTTOM_SHEET_TYPES.map((t) => `
+
+ `).join('')}
+
+ `;
+
+ sheet.classList.add('vault-bottom-sheet--open');
+ scrim.classList.add('vault-bottom-sheet-scrim--visible');
+ state.bottomSheetOpen = true;
+
+ sheet.querySelectorAll
+ ${item.type.replace('_', ' ').toUpperCase()}
+
+
+
+
+
+
+
+ `;
+
+ document.getElementById('drawer-close-btn')?.addEventListener('click', () => {
+ closeDrawer();
+ renderListPane();
+ });
+
+ document.getElementById('drawer-edit-btn')?.addEventListener('click', () => {
+ if (state.selectedId) {
+ setHash('edit', state.selectedId);
+ renderPane();
+ }
+ });
+}
+
+// ---------------------------------------------------------------------------
+// Item selection (implemented in Task 10)
+// ---------------------------------------------------------------------------
+
+async function selectItemForDrawer(id: string): Promise${escapeHtml(item.title)}
+ ${item.type === 'login' && (item.core as { url?: string }).url
+ ? `${escapeHtml((item.core as { url?: string }).url ?? '')}
`
+ : ''}
+
+ ${coreFields.map(([label, value, full]) => `
+
+
+
+ `).join('')}
+ ${escapeHtml(label)}
+ ${escapeHtml(value)}
+ no items
';
- return;
- }
-
- let html = '';
- // Stable type ordering
const typeOrder: ItemType[] = ['login', 'secure_note', 'identity', 'card', 'key', 'document', 'totp'];
+
+ const allCount = filtered.length;
+ const isAllActive = !state.activeGroup && state.view === 'list';
+
+ let html = `
+
+ `;
+
for (const t of typeOrder) {
- const items = groups.get(t);
- if (!items || items.length === 0) continue;
- html += `${typeIcon(t)} ${escapeHtml(typeLabel(t))}
`;
- for (const [id, e] of items) {
- const sel = id === state.selectedId ? ' selected' : '';
- const meta = e.icon_hint ? escapeHtml(e.icon_hint) : '';
- html += `
-
- ${escapeHtml(e.title)}
- ${meta ? `` : ''}
-
- `;
- }
+ const count = filtered.filter(([, e]) => e.type === t).length;
+ if (count === 0 && allCount > 0) continue;
+ const isActive = state.activeGroup === t;
+ html += `
+
+ `;
}
container.innerHTML = html;
- // Wire clicks
- container.querySelectorAll('.vault-entry').forEach((el) => {
- el.addEventListener('click', async () => {
- const id = (el as HTMLElement).dataset.id!;
- await selectItem(id);
+ container.querySelectorAll
+
+
+ `;
+ return;
}
+
+ pane.innerHTML = items.map(([id, e]) => {
+ const sel = id === state.selectedId ? ' vault-list-row--selected' : '';
+ const subtitle = (e as any).icon_hint ?? (e.tags?.length > 0 ? e.tags.join(', ') : '');
+ const modifiedAgo = e.modified ? relativeTime(e.modified) : '';
+ return `
+ ${state.searchQuery ? `No results for "${escapeHtml(state.searchQuery)}"` : 'No items yet'}
+ ${state.searchQuery ? 'Try a shorter search term.' : 'Click + new item to get started.'}
+
+
+
+ `;
+ }).join('');
+
+ pane.querySelectorAll
+
+ ${modifiedAgo ? `${escapeHtml(e.title)}
+ ${subtitle ? `${escapeHtml(subtitle)}
` : ''}
+ ${escapeHtml(modifiedAgo)}
` : ''}
+