From b768f649a20175ddcb7775bee73ce76be852bfbb Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 3 May 2026 21:05:15 -0400
Subject: [PATCH] feat(ext/popup): empty states with glyph icons in item-list

---
 extension/src/popup/components/item-list.ts | 24 +++++++++++++++---
 extension/src/popup/styles.css              | 27 +++++++++++++++++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/extension/src/popup/components/item-list.ts b/extension/src/popup/components/item-list.ts
index 11de5da..f46b7ba 100644
--- a/extension/src/popup/components/item-list.ts
+++ b/extension/src/popup/components/item-list.ts
@@ -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 {
diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index 09c3509..f1a73a7 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -1608,3 +1608,30 @@ 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);
+}