From 819a39a21ac992b1393244a4c283bbb125208c69 Mon Sep 17 00:00:00 2001 From: Adam Mathes Date: Fri, 13 Feb 2026 20:49:06 -0800 Subject: feat(vanilla): implement search (NK-2ypbgd) --- vanilla/app.js | 15 ++++++++++++++- vanilla/index.html | 16 ++++++++++++++-- vanilla/style.css | 13 +++++++++++++ 3 files changed, 41 insertions(+), 3 deletions(-) (limited to 'vanilla') diff --git a/vanilla/app.js b/vanilla/app.js index 048a446..f36037b 100644 --- a/vanilla/app.js +++ b/vanilla/app.js @@ -1,6 +1,18 @@ document.addEventListener('DOMContentLoaded', () => { fetchFeeds(); fetchItems(); // Default to fetching recent items + + const searchInput = document.getElementById('search-input'); + searchInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + const query = searchInput.value.trim(); + if (query) { + document.getElementById('feed-title').textContent = `Search: ${query}`; + document.querySelectorAll('.feed-item').forEach(el => el.classList.remove('active')); + fetchItems(null, null, query); + } + } + }); }); async function fetchFeeds() { @@ -15,7 +27,7 @@ async function fetchFeeds() { } } -async function fetchItems(feedId = null, filter = null) { +async function fetchItems(feedId = null, filter = null, query = null) { const listEl = document.getElementById('entries-list'); listEl.innerHTML = '
Loading items...
'; @@ -24,6 +36,7 @@ async function fetchItems(feedId = null, filter = null) { if (feedId) params.append('feed_id', feedId); if (filter === 'unread') params.append('read_filter', 'unread'); if (filter === 'starred') params.append('starred', 'true'); + if (query) params.append('q', query); if ([...params].length > 0) { url += '?' + params.toString(); diff --git a/vanilla/index.html b/vanilla/index.html index 98d505b..1cfea4f 100644 --- a/vanilla/index.html +++ b/vanilla/index.html @@ -1,5 +1,6 @@ + @@ -7,9 +8,16 @@ +
@@ -31,4 +42,5 @@
- + + \ No newline at end of file diff --git a/vanilla/style.css b/vanilla/style.css index 729787b..573248d 100644 --- a/vanilla/style.css +++ b/vanilla/style.css @@ -39,6 +39,19 @@ body { font-size: 1.2rem; } +.search-container { + padding: 0.5rem; + border-bottom: 1px solid var(--border-color); +} + +#search-input { + width: 100%; + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 4px; + box-sizing: border-box; +} + #feeds-nav { flex: 1; overflow-y: auto; -- cgit v1.2.3