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:
1 parent
b7afa19f70
commit
36f968881b
5 files changed
+48
-38
No files matched your search
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user