diff --git a/src/popup/popup.js b/src/popup/popup.js
index 49d3e55..8e044e8 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -19,6 +19,7 @@ import {
updateSelectBtn,
} from './list.js';
import { closeMuteDropdown, initMuteUi, registerMuteListeners, updateMuteBtn } from './mute-ui.js';
+import { initSearchUi, registerSearchListeners, updateSearchBtn } from './search-ui.js';
import { api, dimmedMessages, els, state } from './state.js';
import { sendMessage, setLoading, showError } from './utils.js';
@@ -54,6 +55,7 @@ export async function loadState() {
updateMarkAllBtn();
updateSelectBtn();
updateMuteBtn();
+ updateSearchBtn();
els.addBtn.hidden = state.accounts.length > 0;
setLoading(false);
}
@@ -76,7 +78,9 @@ async function refresh({ silent = false } = {}) {
initActions({ refresh, loadState });
initMuteUi({ loadState });
initList({ loadState });
+initSearchUi({ renderList });
registerMuteListeners();
+registerSearchListeners();
// ── Detail back button ─────────────────────────────────────────────────────
els.backBtn.addEventListener('click', () => {
diff --git a/src/popup/search-ui.js b/src/popup/search-ui.js
new file mode 100644
index 0000000..4d3dfcb
--- /dev/null
+++ b/src/popup/search-ui.js
@@ -0,0 +1,72 @@
+import { els, state } from './state.js';
+
+// Injected by popup.js via initSearchUi() to avoid circular dependencies.
+let _renderList;
+
+export function initSearchUi({ renderList }) {
+ _renderList = renderList;
+}
+
+// Clears the query and collapses the bar without re-rendering. Callers that
+// render on their own (e.g. the tab-switch handler) use this directly; the
+// interactive close path uses closeSearch() which also re-renders.
+export function resetSearch() {
+ state.searchQuery = '';
+ els.searchInput.value = '';
+ els.searchBar.hidden = true;
+ els.searchBtn.classList.remove('active');
+ els.searchBtn.setAttribute('aria-expanded', 'false');
+}
+
+export function closeSearch() {
+ resetSearch();
+ _renderList();
+}
+
+export function openSearch() {
+ els.searchBar.hidden = false;
+ els.searchBtn.classList.add('active');
+ els.searchBtn.setAttribute('aria-expanded', 'true');
+ els.searchInput.focus();
+}
+
+// Shows the search button only when the active account has cached messages.
+// Mirrors updateSelectBtn / updateMarkAllBtn gating. Closes an open bar if the
+// active inbox no longer has any messages to search.
+export function updateSearchBtn() {
+ const account = state.accounts.find((a) => a.id === state.activeAccountId) || null;
+ const hasMessages = (account?.messages?.length || 0) > 0;
+ els.searchBtn.hidden = !hasMessages;
+ if (!hasMessages && !els.searchBar.hidden) {
+ closeSearch();
+ }
+}
+
+export function registerSearchListeners() {
+ els.searchBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ if (els.searchBar.hidden) {
+ openSearch();
+ } else {
+ closeSearch();
+ }
+ });
+
+ els.searchInput.addEventListener('input', () => {
+ state.searchQuery = els.searchInput.value;
+ _renderList();
+ });
+
+ els.searchInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ closeSearch();
+ els.searchBtn.focus();
+ }
+ });
+
+ els.searchClearBtn.addEventListener('click', () => {
+ closeSearch();
+ els.searchBtn.focus();
+ });
+}
diff --git a/src/popup/search.js b/src/popup/search.js
new file mode 100644
index 0000000..87a28fa
--- /dev/null
+++ b/src/popup/search.js
@@ -0,0 +1,16 @@
+export function matchesQuery(message, query) {
+ const q = query.trim().toLowerCase();
+ if (!q) {
+ return true;
+ }
+ const fields = [message.from?.name, message.from?.email, message.subject, message.snippet];
+ return fields.some((f) => typeof f === 'string' && f.toLowerCase().includes(q));
+}
+
+export function filterMessages(messages, query) {
+ const q = query.trim();
+ if (!q) {
+ return messages;
+ }
+ return messages.filter((m) => matchesQuery(m, q));
+}
diff --git a/src/popup/state.js b/src/popup/state.js
index 70fda5d..c631e25 100644
--- a/src/popup/state.js
+++ b/src/popup/state.js
@@ -9,6 +9,7 @@ export const state = {
selectedMessages: new Set(),
expandedThreads: new Set(),
globalMute: null,
+ searchQuery: '',
};
// Message IDs marked read in 'dim' mode — cleared on every loadState().
@@ -35,6 +36,10 @@ export const els = {
selectBtn: document.getElementById('select-btn'),
onboardingAddBtn: document.getElementById('onboarding-add-btn'),
optionsBtn: document.getElementById('options-btn'),
+ searchBtn: document.getElementById('search-btn'),
+ searchBar: document.getElementById('search-bar'),
+ searchInput: document.getElementById('search-input'),
+ searchClearBtn: document.getElementById('search-clear-btn'),
pagination: document.getElementById('pagination'),
paginationPrev: document.getElementById('pagination-prev'),
paginationNext: document.getElementById('pagination-next'),
diff --git a/tests/unit/search.test.js b/tests/unit/search.test.js
new file mode 100644
index 0000000..fe28a0f
--- /dev/null
+++ b/tests/unit/search.test.js
@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+import { filterMessages, matchesQuery } from '../../src/popup/search.js';
+
+const msg = (over = {}) => ({
+ id: 'm1',
+ threadId: 't1',
+ from: { name: 'Jane Doe', email: 'jane@example.com' },
+ subject: 'Quarterly invoice',
+ snippet: 'Please find attached the report',
+ internalDate: 1000,
+ ...over,
+});
+
+describe('matchesQuery', () => {
+ it('matches on sender name (case-insensitive)', () => {
+ expect(matchesQuery(msg(), 'jane')).toBe(true);
+ expect(matchesQuery(msg(), 'DOE')).toBe(true);
+ });
+
+ it('matches on sender email', () => {
+ expect(matchesQuery(msg(), 'example.com')).toBe(true);
+ });
+
+ it('matches on subject', () => {
+ expect(matchesQuery(msg(), 'invoice')).toBe(true);
+ });
+
+ it('matches on snippet', () => {
+ expect(matchesQuery(msg(), 'report')).toBe(true);
+ });
+
+ it('returns false when no field contains the query', () => {
+ expect(matchesQuery(msg(), 'zzz')).toBe(false);
+ });
+
+ it('tolerates missing fields', () => {
+ expect(matchesQuery({ id: 'x' }, 'anything')).toBe(false);
+ });
+});
+
+describe('filterMessages', () => {
+ const messages = [
+ msg({ id: 'a', subject: 'invoice due', from: { name: 'Acme', email: 'a@acme.com' } }),
+ msg({
+ id: 'b',
+ subject: 'lunch?',
+ from: { name: 'Bob', email: 'bob@x.com' },
+ snippet: 'pizza',
+ }),
+ ];
+
+ it('returns the input unchanged for an empty query', () => {
+ expect(filterMessages(messages, '')).toBe(messages);
+ });
+
+ it('returns the input unchanged for a whitespace-only query', () => {
+ expect(filterMessages(messages, ' ')).toBe(messages);
+ });
+
+ it('returns only matching messages', () => {
+ const result = filterMessages(messages, 'invoice');
+ expect(result).toHaveLength(1);
+ expect(result[0].id).toBe('a');
+ });
+
+ it('returns an empty array when nothing matches', () => {
+ expect(filterMessages(messages, 'zzz')).toEqual([]);
+ });
+
+ it('keeps a thread member that matches (filter is per-message)', () => {
+ const thread = [
+ msg({ id: 'c', threadId: 'tX', subject: 'no match here', snippet: 'plain' }),
+ msg({ id: 'd', threadId: 'tX', subject: 'has invoice', snippet: 'plain' }),
+ ];
+ const result = filterMessages(thread, 'invoice');
+ expect(result.map((m) => m.id)).toEqual(['d']);
+ });
+});