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

refactor(ext/vault): extract vault-sidebar.ts with debounced search (Plan C Phase 4)

Browse Source 
Moves the sidebar column out of vault.ts/vault-shell.ts into vault-sidebar.ts:
its markup (now incl. an empty #vault-status-slot footer for Phase 6), the
category nav rendering, nav-button wiring, and search. The search input gains
an 80ms trailing-edge debounce (P2 fix — it re-filtered on every keystroke).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-05-31 15:39:26 -04:00
parent 51255b3583
commit 9049512e0d
4 changed files with 186 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,13 +23,14 @@ import { renderBackupPanel, teardown as teardownBackup } from './components/back
import { renderImportPanel, teardown as teardownImport } from './components/import-panel';
import {
type VaultController, type VaultState, type VaultView, type HashRoute,
escapeHtml, typeIcon, typeLabel, getFilteredEntries,
escapeHtml, typeIcon, getFilteredEntries,
} from './vault-context';
import {
render, applyShellViewClass,
openTypePanel, closeTypePanel, applyVaultColorScheme,
wireSessionExpiredListener,
} from './vault-shell';
import { wireSidebar, renderSidebarCategories } from './vault-sidebar';
// ---------------------------------------------------------------------------
// Helpers
@@ -144,7 +145,7 @@ const ctx: VaultController = {
render: () => render(ctx),
renderPane: () => renderPane(),
renderListPane: () => renderListPane(),
renderSidebarCategories: () => renderSidebarCategories(),
renderSidebarCategories: () => renderSidebarCategories(ctx),
renderDrawer: (item) => renderDrawer(item),
applyShellViewClass: () => applyShellViewClass(ctx),
setHash,
@@ -153,7 +154,7 @@ const ctx: VaultController = {
selectItemForDrawer: (id) => selectItemForDrawer(id),
openTypePanel: () => openTypePanel(ctx),
closeTypePanel: () => closeTypePanel(ctx),
wireSidebar: () => wireSidebar(),
wireSidebar: () => wireSidebar(ctx),
loadManifest: () => loadManifest(),
};
@@ -171,7 +172,7 @@ registerHost({
Object.assign(state, { view, error: null, loading: false, ...extras });
setHash(view as VaultView);
applyShellViewClass(ctx);
renderSidebarCategories();
renderSidebarCategories(ctx);
if (state.view === 'list') renderListPane();
renderPane();
},
@@ -302,137 +303,12 @@ async function selectItemForDrawer(id: string): Promise<void> {
state.selectedId = id;
state.selectedItem = data.item;
state.drawerOpen = true;
renderSidebarCategories();
renderSidebarCategories(ctx);
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
// ---------------------------------------------------------------------------
@@ -712,7 +588,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if ((route.view === 'detail' || route.view === 'edit') && route.id) {
if (state.selectedId === route.id && state.selectedItem) {
renderPane();
renderSidebarCategories();
renderSidebarCategories(ctx);
if (state.view === 'list') renderListPane();
return;
}
@@ -724,7 +600,7 @@ document.addEventListener('DOMContentLoaded', async () => {
// For non-item views, just re-render the pane
state.selectedId = null;
state.selectedItem = null;
renderSidebarCategories();
renderSidebarCategories(ctx);
if (state.view === 'list') renderListPane();
renderPane();
});
@@ -743,7 +619,7 @@ async function selectItem(id: ItemId): Promise<void> {
state.selectedItem = data.item;
state.loading = false;
setHash('detail', id);
renderSidebarCategories();
renderSidebarCategories(ctx);
renderListPane();
renderPane();
} else {