feat: persistent inline header search with overlay results

Replaces the hidden toggle-based mobile search bar with a permanently
visible pill-shaped search input in the header row, next to the logo.

- Search is always visible — no button click required
- Typing shows a floating overlay with library results (artists, albums,
  songs) without navigating away from the current page
- Clearing the input or navigating to any page closes the overlay silently
- The ✕ clear button appears only while text is present
- navigate() now calls closeHeaderSearch() so results disappear cleanly
  when tapping any result or bottom nav tab
- Old toggleMobileSearch / closeMobileSearch kept as no-op stubs for safety

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-05-27 12:55:26 +02:00
1 parent b7afa19f70
commit 36f968881b
5 files changed
+48 -38

No files matched your search

+6
View File
@@ -63,6 +63,12 @@ html.ns-authed #setup-screen{display:none}
.search-box input::placeholder{color:var(--text3)}
.search-box svg{flex-shrink:0;color:var(--text3)}
.header-search-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:7px 12px;cursor:text;transition:border-color .2s}
.header-search-wrap:focus-within{border-color:var(--border2)}
.header-search-wrap svg{flex-shrink:0;color:var(--text3)}
.header-search-wrap input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:14px}
.header-search-wrap input::placeholder{color:var(--text3)}
nav{flex:1;overflow-y:auto;padding:4px 10px}
.nav-section{margin-bottom:18px}
.nav-section-title{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);padding:0 8px;margin-bottom:3px}