diff --git a/index.html b/index.html index 27bd576..9be13a3 100644 --- a/index.html +++ b/index.html @@ -103,30 +103,28 @@
${e.message}
`; } } -// ─── MOBILE SEARCH ─── -export function onMobileSearch(val) { - clearTimeout(S._mobileSearchTimer); - if(!val.trim()) { navigate('home'); return; } - navigate('search'); - S._mobileSearchTimer = setTimeout(() => doLocalSearch(val), 300); +// ─── HEADER SEARCH (persistent inline bar) ─── +export function onHeaderSearch(val) { + const overlay = document.getElementById('header-search-overlay'); + const clearBtn = document.getElementById('header-search-clear'); + if (clearBtn) clearBtn.style.display = val ? 'block' : 'none'; + clearTimeout(S._headerSearchTimer); + if (!val.trim()) { if (overlay) overlay.style.display = 'none'; return; } + if (overlay) overlay.style.display = 'block'; + const el = document.getElementById('header-search-results'); + S._headerSearchTimer = setTimeout(() => doLocalSearch(val, el), 300); } +// ─── MOBILE SEARCH (legacy no-op — replaced by inline header search) ─── +export function onMobileSearch(val) { onHeaderSearch(val); } + // ─── GLOBAL (ITUNES) SEARCH ─── export function onGlobalSearch(val) { clearTimeout(S.globalSearchTimer); diff --git a/styles.css b/styles.css index 95dcae3..d2d6db3 100644 --- a/styles.css +++ b/styles.css @@ -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}