51255b3583
Introduces vault-context.ts (VaultView/HashRoute/VaultState types, the VaultController contract, and the pure helpers escapeHtml/typeIcon/typeLabel/ getFilteredEntries). Extracts the shell concerns — render entry, lock screen, 3-column shell scaffolding, type picker panel, color-scheme apply, and the session_expired listener — into vault-shell.ts. vault.ts now assembles the ctx object and delegates shell rendering through it. No behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
754 lines
26 KiB
TypeScript
754 lines
26 KiB
TypeScript
/// Vault tab entry point — full "desktop-like" sidebar + pane layout.
|
|
///
|
|
/// Registers as the shared state host so popup components (item-detail,
|
|
/// item-form, trash, devices, settings, etc.) render natively in the
|
|
/// vault tab's pane area.
|
|
|
|
import type { Request, Response } from '../shared/messages';
|
|
import type {
|
|
ItemId, ItemType, ManifestEntry, Item, VaultSettings, GeneratorRequest,
|
|
} from '../shared/types';
|
|
import { registerHost } from '../shared/state';
|
|
import { type ErrorCta } from '../shared/error-copy';
|
|
import { relativeTime } from '../shared/relative-time';
|
|
import { renderItemDetail } from '../popup/components/item-detail';
|
|
import { renderItemForm } from '../popup/components/item-form';
|
|
import { renderTrash, teardown as teardownTrash } from '../popup/components/trash';
|
|
import { renderDevices, teardown as teardownDevices } from '../popup/components/devices';
|
|
import { renderSettings, teardownSettings } from '../popup/components/settings';
|
|
import { renderVaultSettings as renderVaultSettingsView } from '../popup/components/settings-vault';
|
|
import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history';
|
|
import { renderItemHistoryIndex, teardown as teardownHistoryIndex } from '../popup/components/item-history-index';
|
|
import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel';
|
|
import { renderImportPanel, teardown as teardownImport } from './components/import-panel';
|
|
import {
|
|
type VaultController, type VaultState, type VaultView, type HashRoute,
|
|
escapeHtml, typeIcon, typeLabel, getFilteredEntries,
|
|
} from './vault-context';
|
|
import {
|
|
render, applyShellViewClass,
|
|
openTypePanel, closeTypePanel, applyVaultColorScheme,
|
|
wireSessionExpiredListener,
|
|
} from './vault-shell';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function sendMessage(request: Request): Promise<Response> {
|
|
return new Promise((resolve) => {
|
|
chrome.runtime.sendMessage(request, (response: Response) => {
|
|
// MV3 service workers are evicted after ~30s idle, which wipes the
|
|
// in-memory session/manifest/gitHost. The fullscreen tab stays open
|
|
// and has no signal that the SW restarted — the next RPC just comes
|
|
// back `vault_locked`. Treat that as "session lost" and force the
|
|
// lock screen so the user can re-enter their passphrase. Skip for
|
|
// is_unlocked / unlock themselves to avoid loops on cold start.
|
|
if (
|
|
response &&
|
|
!response.ok &&
|
|
response.error === 'vault_locked' &&
|
|
request.type !== 'is_unlocked' &&
|
|
request.type !== 'unlock' &&
|
|
state.unlocked
|
|
) {
|
|
state.unlocked = false;
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
state.entries = [];
|
|
state.error = 'Session expired — please unlock again.';
|
|
render(ctx);
|
|
}
|
|
resolve(response);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Hash routing
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function parseHash(): HashRoute {
|
|
let raw = window.location.hash.replace(/^#\/?/, '');
|
|
if (!raw) return { view: 'list' };
|
|
|
|
// Normalize legacy bookmarks: #field-history/<id> → #history/<id>
|
|
if (raw.startsWith('field-history/')) {
|
|
raw = 'history/' + raw.slice('field-history/'.length);
|
|
window.location.hash = raw;
|
|
}
|
|
|
|
const parts = raw.split('/');
|
|
const view = parts[0] as VaultView;
|
|
|
|
switch (view) {
|
|
case 'detail':
|
|
case 'edit':
|
|
return { view, id: parts[1] };
|
|
case 'add':
|
|
return { view, type: parts[1] };
|
|
case 'history':
|
|
return parts[1]
|
|
? { view: 'field-history', id: parts[1] }
|
|
: { view: 'history' };
|
|
case 'trash':
|
|
case 'devices':
|
|
case 'settings':
|
|
case 'settings-vault':
|
|
case 'field-history':
|
|
case 'backup':
|
|
case 'import':
|
|
return { view };
|
|
default:
|
|
return { view: 'list' };
|
|
}
|
|
}
|
|
|
|
function setHash(view: VaultView, param?: string): void {
|
|
const fragment = param ? `${view}/${param}` : view;
|
|
window.location.hash = fragment === 'list' ? '' : fragment;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// State
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const state: VaultState = {
|
|
unlocked: false,
|
|
view: 'list',
|
|
entries: [],
|
|
selectedId: null,
|
|
selectedItem: null,
|
|
selectedIndex: 0,
|
|
searchQuery: '',
|
|
activeGroup: null,
|
|
drawerOpen: false,
|
|
typePanelOpen: false,
|
|
vaultSettings: null,
|
|
generatorDefaults: null,
|
|
error: null,
|
|
loading: false,
|
|
newType: null,
|
|
capturedTabId: null,
|
|
capturedUrl: '',
|
|
historyItemId: null,
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Controller — carries state + cross-module re-render hooks
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const ctx: VaultController = {
|
|
state,
|
|
sendMessage,
|
|
render: () => render(ctx),
|
|
renderPane: () => renderPane(),
|
|
renderListPane: () => renderListPane(),
|
|
renderSidebarCategories: () => renderSidebarCategories(),
|
|
renderDrawer: (item) => renderDrawer(item),
|
|
applyShellViewClass: () => applyShellViewClass(ctx),
|
|
setHash,
|
|
openDrawer: () => openDrawer(),
|
|
closeDrawer: () => closeDrawer(),
|
|
selectItemForDrawer: (id) => selectItemForDrawer(id),
|
|
openTypePanel: () => openTypePanel(ctx),
|
|
closeTypePanel: () => closeTypePanel(ctx),
|
|
wireSidebar: () => wireSidebar(),
|
|
loadManifest: () => loadManifest(),
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Register as shared state host
|
|
// ---------------------------------------------------------------------------
|
|
|
|
registerHost({
|
|
getState: () => state,
|
|
setState: (partial) => {
|
|
Object.assign(state, partial);
|
|
renderPane();
|
|
},
|
|
navigate: (view, extras) => {
|
|
Object.assign(state, { view, error: null, loading: false, ...extras });
|
|
setHash(view as VaultView);
|
|
applyShellViewClass(ctx);
|
|
renderSidebarCategories();
|
|
if (state.view === 'list') renderListPane();
|
|
renderPane();
|
|
},
|
|
sendMessage,
|
|
escapeHtml,
|
|
popOutToTab: () => {},
|
|
isInTab: () => true,
|
|
openVaultTab: () => {},
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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<string, unknown>;
|
|
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 = `
|
|
<div class="vault-drawer__header">
|
|
<span class="vault-drawer__type-pill">${item.type.replace('_', ' ').toUpperCase()}</span>
|
|
<div class="vault-drawer__actions">
|
|
<button class="btn" id="drawer-edit-btn" style="font-size:11px;">edit</button>
|
|
<button class="vault-drawer__close" id="drawer-close-btn" title="Close (Esc)">✕</button>
|
|
</div>
|
|
</div>
|
|
<div class="vault-drawer__body">
|
|
<div class="vault-drawer__title">${escapeHtml(item.title)}</div>
|
|
${item.type === 'login' && (item.core as { url?: string }).url
|
|
? `<div class="vault-drawer__subtitle">${escapeHtml((item.core as { url?: string }).url ?? '')}</div>`
|
|
: ''}
|
|
<div class="vault-drawer__field-grid">
|
|
${coreFields.map(([label, value, full]) => `
|
|
<div class="vault-drawer__field${full ? ' vault-drawer__field--full' : ''}">
|
|
<div class="vault-drawer__field-label">${escapeHtml(label)}</div>
|
|
<div class="vault-drawer__field-value">${escapeHtml(value)}</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
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<void> {
|
|
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();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sidebar wiring
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function wireSidebar(): void {
|
|
// Search
|
|
const searchInput = document.getElementById('vault-search') as HTMLInputElement | null;
|
|
searchInput?.addEventListener('input', () => {
|
|
state.searchQuery = searchInput.value;
|
|
renderSidebarCategories();
|
|
renderListPane();
|
|
});
|
|
|
|
// Nav buttons
|
|
document.querySelectorAll('.vault-sidebar__nav-item').forEach((btn) => {
|
|
btn.addEventListener('click', async () => {
|
|
const nav = (btn as HTMLElement).dataset.nav;
|
|
if (nav === 'lock') {
|
|
await sendMessage({ type: 'lock' });
|
|
state.unlocked = false;
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
state.entries = [];
|
|
render(ctx);
|
|
return;
|
|
}
|
|
if (nav === 'add') {
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
state.newType = null;
|
|
state.drawerOpen = false;
|
|
closeDrawer();
|
|
openTypePanel(ctx);
|
|
return;
|
|
}
|
|
if (nav === 'trash' || nav === 'devices' || nav === 'settings' || nav === 'history') {
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
state.newType = null;
|
|
state.drawerOpen = false;
|
|
state.view = nav;
|
|
setHash(nav);
|
|
applyShellViewClass(ctx);
|
|
renderPane();
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
|
|
// 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();
|
|
}
|
|
});
|
|
}
|
|
|
|
function isEditableTarget(target: EventTarget | null): boolean {
|
|
if (!(target instanceof HTMLElement)) return false;
|
|
const tag = target.tagName;
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
|
|
if (target.isContentEditable) return true;
|
|
return false;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sidebar category nav
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function renderSidebarCategories(): void {
|
|
const container = document.getElementById('vault-categories');
|
|
if (!container) return;
|
|
|
|
const filtered = getFilteredEntries(state);
|
|
const typeOrder: ItemType[] = ['login', 'secure_note', 'identity', 'card', 'key', 'document', 'totp'];
|
|
|
|
const allCount = filtered.length;
|
|
const isAllActive = !state.activeGroup && state.view === 'list';
|
|
|
|
let html = `
|
|
<button class="vault-category-row ${isAllActive ? 'vault-category-row--active' : ''}" data-group="">
|
|
<span class="vault-category-row__icon">◈</span>
|
|
<span class="vault-category-row__label vault-sidebar__category-label">All items</span>
|
|
<span class="vault-category-row__count vault-sidebar__category-count">${allCount}</span>
|
|
</button>
|
|
`;
|
|
|
|
for (const t of typeOrder) {
|
|
const count = filtered.filter(([, e]) => e.type === t).length;
|
|
// Always show Login (staple type); hide other types when empty.
|
|
if (count === 0 && t !== 'login') continue;
|
|
const isActive = state.activeGroup === t;
|
|
html += `
|
|
<button class="vault-category-row ${isActive ? 'vault-category-row--active' : ''}" data-group="${t}">
|
|
<span class="vault-category-row__icon">${typeIcon(t)}</span>
|
|
<span class="vault-category-row__label vault-sidebar__category-label">${typeLabel(t)}</span>
|
|
<span class="vault-category-row__count vault-sidebar__category-count">${count}</span>
|
|
</button>
|
|
`;
|
|
}
|
|
|
|
container.innerHTML = html;
|
|
|
|
container.querySelectorAll<HTMLButtonElement>('.vault-category-row').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
state.activeGroup = btn.dataset.group || null;
|
|
state.drawerOpen = false;
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
state.view = 'list';
|
|
setHash('list');
|
|
applyShellViewClass(ctx);
|
|
renderSidebarCategories();
|
|
renderListPane();
|
|
closeDrawer();
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 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(state);
|
|
if (group) items = items.filter(([, e]) => e.type === group);
|
|
|
|
if (items.length === 0) {
|
|
pane.innerHTML = `
|
|
<div class="empty-state">
|
|
<span class="empty-state__icon" aria-hidden="true">${state.searchQuery ? '⊘' : '◈'}</span>
|
|
<div class="empty-state__title">${state.searchQuery ? `No results for "${escapeHtml(state.searchQuery)}"` : 'No items yet'}</div>
|
|
<div class="empty-state__hint">${state.searchQuery ? 'Try a shorter search term.' : 'Click + new item to get started.'}</div>
|
|
</div>
|
|
`;
|
|
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 `
|
|
<div class="vault-list-row${sel}" data-id="${escapeHtml(id)}">
|
|
<div class="vault-list-row__icon" aria-hidden="true">${typeIcon(e.type)}</div>
|
|
<div class="vault-list-row__text">
|
|
<div class="vault-list-row__title">${escapeHtml(e.title)}</div>
|
|
${subtitle ? `<div class="vault-list-row__subtitle">${escapeHtml(subtitle)}</div>` : ''}
|
|
</div>
|
|
${modifiedAgo ? `<div class="vault-list-row__age">${escapeHtml(modifiedAgo)}</div>` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
pane.querySelectorAll<HTMLElement>('.vault-list-row').forEach((row) => {
|
|
row.addEventListener('click', async () => {
|
|
await selectItemForDrawer(row.dataset.id!);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Platform-aware save hint
|
|
// ---------------------------------------------------------------------------
|
|
|
|
const isMac = navigator.platform.toLowerCase().includes('mac');
|
|
const SAVE_HINT = isMac ? '⌘+S to save' : 'Ctrl+S to save';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Fullscreen form wrapper — sticky save bar + scrollable content + header
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function renderFormWrapped(app: HTMLElement, mode: 'add' | 'edit'): void {
|
|
const itemType = state.selectedItem?.type ?? state.newType ?? 'login';
|
|
const typeLabelText = itemType.replace('_', ' ');
|
|
const titleText = mode === 'add' ? `new ${typeLabelText}` : `edit ${typeLabelText}`;
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'form-pane';
|
|
wrapper.innerHTML = `
|
|
<div class="fullscreen-form-header">
|
|
<div>
|
|
<div class="title">${titleText}</div>
|
|
<div class="sub" id="form-dirty-sub">no changes</div>
|
|
</div>
|
|
<div class="hint">${SAVE_HINT}</div>
|
|
</div>
|
|
<div class="form-scroll" id="form-scroll"></div>
|
|
<div class="sticky-save-bar">
|
|
<button class="btn-secondary" id="form-cancel">cancel</button>
|
|
<button class="btn-primary" id="form-save">save</button>
|
|
</div>
|
|
`;
|
|
// Remove pane padding so form-pane can fill height cleanly
|
|
app.style.padding = '0';
|
|
app.style.overflow = 'hidden';
|
|
app.replaceChildren(wrapper);
|
|
|
|
const scrollEl = wrapper.querySelector('#form-scroll') as HTMLElement;
|
|
renderItemForm(scrollEl, mode);
|
|
|
|
const subEl = wrapper.querySelector('#form-dirty-sub') as HTMLElement;
|
|
let isDirty = false;
|
|
const markDirty = () => {
|
|
if (isDirty) return;
|
|
isDirty = true;
|
|
subEl.textContent = 'unsaved · esc to cancel';
|
|
};
|
|
const markClean = () => {
|
|
isDirty = false;
|
|
subEl.textContent = 'no changes';
|
|
};
|
|
scrollEl.addEventListener('input', markDirty, true);
|
|
scrollEl.addEventListener('change', markDirty, true);
|
|
|
|
wrapper.querySelector('#form-cancel')?.addEventListener('click', () => {
|
|
markClean();
|
|
(scrollEl.querySelector('#cancel-btn') as HTMLButtonElement | null)?.click();
|
|
});
|
|
wrapper.querySelector('#form-save')?.addEventListener('click', () => {
|
|
markClean();
|
|
(scrollEl.querySelector('#save-btn') as HTMLButtonElement | null)?.click();
|
|
});
|
|
}
|
|
|
|
export const __test__ = { renderFormWrapped };
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Pane rendering — delegates to shared popup components
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function teardownPaneComponents(): void {
|
|
teardownTrash();
|
|
teardownDevices();
|
|
teardownSettings();
|
|
teardownFieldHistory();
|
|
teardownHistoryIndex();
|
|
teardownBackup();
|
|
teardownImport();
|
|
}
|
|
|
|
function renderPane(): void {
|
|
const pane = document.getElementById('vault-pane');
|
|
if (!pane) return;
|
|
|
|
teardownPaneComponents();
|
|
|
|
const route = parseHash();
|
|
// Keep state.view in sync with hash for components that read it
|
|
state.view = route.view;
|
|
applyShellViewClass(ctx);
|
|
|
|
pane.className = 'vault-pane';
|
|
|
|
switch (route.view) {
|
|
case 'detail':
|
|
if (state.selectedItem) {
|
|
renderItemDetail(pane);
|
|
} else {
|
|
pane.className = 'vault-pane vault-pane--empty';
|
|
pane.innerHTML = 'select an item';
|
|
}
|
|
break;
|
|
case 'add':
|
|
// Prefer hash type for deep-links; otherwise keep the in-memory value
|
|
// set by the type-selection click handler (which calls setState →
|
|
// renderPane before the URL hash has been updated to include the type).
|
|
state.newType = (route.type as ItemType) ?? state.newType ?? null;
|
|
// Use the form wrapper (sticky bar + header) when a type is already chosen.
|
|
// Without a type the type-selection screen renders — no sticky bar needed.
|
|
if (state.newType) {
|
|
renderFormWrapped(pane, 'add');
|
|
} else {
|
|
renderItemForm(pane, 'add');
|
|
}
|
|
break;
|
|
case 'edit':
|
|
renderFormWrapped(pane, 'edit');
|
|
break;
|
|
case 'trash':
|
|
renderTrash(pane);
|
|
break;
|
|
case 'devices':
|
|
renderDevices(pane);
|
|
break;
|
|
case 'settings':
|
|
void renderSettings(pane);
|
|
break;
|
|
case 'settings-vault':
|
|
renderVaultSettingsView(pane);
|
|
break;
|
|
case 'field-history':
|
|
renderFieldHistory(pane);
|
|
break;
|
|
case 'history':
|
|
renderItemHistoryIndex(pane);
|
|
break;
|
|
case 'backup':
|
|
renderBackupPanel(pane);
|
|
break;
|
|
case 'import':
|
|
renderImportPanel(pane);
|
|
break;
|
|
default:
|
|
pane.className = 'vault-pane vault-pane--empty';
|
|
pane.innerHTML = 'select an item';
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Data loading
|
|
// ---------------------------------------------------------------------------
|
|
|
|
async function loadManifest(): Promise<void> {
|
|
const listResp = await sendMessage({ type: 'list_items' });
|
|
if (listResp.ok) {
|
|
const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
|
|
state.entries = data.items;
|
|
}
|
|
|
|
const vsResp = await sendMessage({ type: 'get_vault_settings' });
|
|
if (vsResp.ok) {
|
|
const data = vsResp.data as { settings: VaultSettings };
|
|
state.vaultSettings = data.settings;
|
|
state.generatorDefaults = data.settings.generator_defaults;
|
|
}
|
|
|
|
// Handle deep link from hash
|
|
const route = parseHash();
|
|
if (route.view === 'detail' && route.id) {
|
|
const itemResp = await sendMessage({ type: 'get_item', id: route.id });
|
|
if (itemResp.ok) {
|
|
const data = itemResp.data as { item: Item };
|
|
state.selectedId = route.id;
|
|
state.selectedItem = data.item;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Init
|
|
// ---------------------------------------------------------------------------
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await applyVaultColorScheme();
|
|
|
|
// Delegated handler for .error-cta buttons — set up once on the stable root.
|
|
const app = document.getElementById('vault-app')!;
|
|
app.addEventListener('click', (e) => {
|
|
const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('.error-cta');
|
|
if (!btn) return;
|
|
const cta = btn.dataset.cta as ErrorCta['action'];
|
|
switch (cta) {
|
|
case 'unlock': {
|
|
document.getElementById('vault-passphrase')?.focus();
|
|
break;
|
|
}
|
|
case 'open_setup': {
|
|
void chrome.tabs.create({ url: chrome.runtime.getURL('setup.html') });
|
|
break;
|
|
}
|
|
case 'reload_extension': {
|
|
chrome.runtime.reload();
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Check if already unlocked
|
|
const resp = await sendMessage({ type: 'is_unlocked' });
|
|
if (resp.ok) {
|
|
const data = resp.data as { unlocked: boolean };
|
|
if (data.unlocked) {
|
|
state.unlocked = true;
|
|
await loadManifest();
|
|
}
|
|
}
|
|
|
|
render(ctx);
|
|
|
|
wireSessionExpiredListener(ctx);
|
|
|
|
// Hash change listener
|
|
window.addEventListener('hashchange', () => {
|
|
if (!state.unlocked) return;
|
|
|
|
const route = parseHash();
|
|
state.view = route.view;
|
|
applyShellViewClass(ctx);
|
|
|
|
// If navigating to a detail/edit view for an item we already have loaded
|
|
if ((route.view === 'detail' || route.view === 'edit') && route.id) {
|
|
if (state.selectedId === route.id && state.selectedItem) {
|
|
renderPane();
|
|
renderSidebarCategories();
|
|
if (state.view === 'list') renderListPane();
|
|
return;
|
|
}
|
|
// Need to fetch the item
|
|
selectItem(route.id);
|
|
return;
|
|
}
|
|
|
|
// For non-item views, just re-render the pane
|
|
state.selectedId = null;
|
|
state.selectedItem = null;
|
|
renderSidebarCategories();
|
|
if (state.view === 'list') renderListPane();
|
|
renderPane();
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Legacy selectItem — used by hash-change deep linking
|
|
// ---------------------------------------------------------------------------
|
|
|
|
async function selectItem(id: ItemId): Promise<void> {
|
|
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;
|
|
}
|
|
}
|