diff options
| author | Adam Mathes <adam@adammathes.com> | 2026-02-13 20:49:06 -0800 |
|---|---|---|
| committer | Adam Mathes <adam@adammathes.com> | 2026-02-13 20:49:06 -0800 |
| commit | 819a39a21ac992b1393244a4c283bbb125208c69 (patch) | |
| tree | 77aabc1465648de5fedf0900c97b593452747b80 /vanilla | |
| parent | d438ff62ad8ba890fbab5380785b723ed25afd34 (diff) | |
| download | neko-819a39a21ac992b1393244a4c283bbb125208c69.tar.gz neko-819a39a21ac992b1393244a4c283bbb125208c69.tar.bz2 neko-819a39a21ac992b1393244a4c283bbb125208c69.zip | |
feat(vanilla): implement search (NK-2ypbgd)
Diffstat (limited to 'vanilla')
| -rw-r--r-- | vanilla/app.js | 15 | ||||
| -rw-r--r-- | vanilla/index.html | 16 | ||||
| -rw-r--r-- | vanilla/style.css | 13 |
3 files changed, 41 insertions, 3 deletions
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 = '<div class="loading">Loading items...</div>'; @@ -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 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -7,9 +8,16 @@ <link rel="stylesheet" href="style.css"> <style> /* Minimal reset for now, proper styles in style.css */ - body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; } + body, + html { + margin: 0; + padding: 0; + height: 100%; + font-family: sans-serif; + } </style> </head> + <body> <div id="app"> <aside id="sidebar"> @@ -17,6 +25,9 @@ <h1>🐱 Neko</h1> </header> <nav id="feeds-nav"> + <div class="search-container"> + <input type="text" id="search-input" placeholder="Search items..." /> + </div> <div class="loading">Loading feeds...</div> </nav> </aside> @@ -31,4 +42,5 @@ </div> <script src="app.js"></script> </body> -</html> + +</html>
\ 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; |