feat(ext/popup): empty states with glyph icons in item-list

This commit is contained in:
adlee-was-taken
2026-05-03 21:05:15 -04:00
parent 8b197a7525
commit b768f649a2
2 changed files with 47 additions and 4 deletions

View File

@@ -34,14 +34,30 @@ function typeIcon(t: ItemType): string {
function buildRowsHtml(): string {
const state = getState();
const filtered = getFilteredEntries();
return filtered.length > 0
? filtered.map(([id, e], i) => `
if (filtered.length > 0) {
return filtered.map(([id, e], i) => `
<div class="entry-row ${i === state.selectedIndex ? 'selected' : ''}" data-id="${escapeHtml(id)}" data-index="${i}">
<span class="entry-name"><span class="type-icon" aria-hidden="true">${typeIcon(e.type)}</span> ${escapeHtml(e.title)}${e.attachment_summaries.length > 0 ? ' <span class="entry-row__attach-indicator" title="has attachments">⊕</span>' : ''}</span>
<span class="entry-meta">${escapeHtml(metaLine(e))}</span>
</div>
`).join('')
: '<div class="empty">no items</div>';
`).join('');
}
if (state.searchQuery) {
return `
<div class="empty-state">
<span class="empty-state__icon" aria-hidden="true">⊘</span>
<div class="empty-state__title">No results for "${escapeHtml(state.searchQuery)}"</div>
<div class="empty-state__hint">Try a shorter search term.</div>
</div>
`;
}
return `
<div class="empty-state">
<span class="empty-state__icon" aria-hidden="true">◈</span>
<div class="empty-state__title">No items yet</div>
<div class="empty-state__hint">Press <kbd>+</kbd> to add your first item.</div>
</div>
`;
}
function updateItemList(): void {