Fix deployed menu and search interactions

[Copilot]

• Reproduce and inspect deployed-behavior root causes in the React UI
• Verify baseline project checks (npm run lint, npm run build)
• Implement functional top menu interactions (open/close + navigation actions)
• Implement functional search UX and wire it to library/collection filtering
• Run lint/build to validate no regressions
• Run parallel validation and address any valid findings
• Create pull request with summary of the fix

[Copilot]

Pull request overview

This PR addresses broken/deployed UI behavior in the React app by wiring up functional top-bar menu navigation and a working search experience that filters the library/collection views.

Changes:

• Added state + UI for a toggleable navigation menu (with backdrop close + Escape-to-close).
• Added a toggleable search bar and implemented query-based filtering of books/tracks.
• Added empty-state messaging for Library/Collection when no items match the search.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The Escape handler closes the search UI (setIsSearchOpen(false)) but leaves searchQuery intact, so the library/collection stay filtered while the query is hidden. Consider clearing searchQuery when closing search (Escape and/or toggle-off), or keeping the search bar visible/indicating an active filter when a query is present to avoid confusing “missing items” states.

Suggested change

	setIsSearchOpen(false);
	setIsSearchOpen(false);
	setSearchQuery('');

[Copilot]

The search input relies on placeholder text only; it doesn’t have an accessible label. Add an explicit label (visible or screen-reader-only) or an aria-label/aria-labelledby so screen readers can announce what the field is for.

Suggested change

	onChange={(event) => setSearchQuery(event.target.value)}
	onChange={(event) => setSearchQuery(event.target.value)}
	aria-label="Search titles, authors, tags, and descriptions"

[Copilot]

The menu icon button is a toggle, but the aria-label is always “Open navigation menu” and it doesn’t expose expanded state. Update the label to reflect open/closed state and add aria-expanded (and ideally aria-controls pointing at the menu) for better accessibility.

Suggested change

	<button onClick={() => setIsMenuOpen((open) => !open)} className="text-primary hover:text-white transition-colors" aria-label="Open navigation menu">
	<button
	onClick={() => setIsMenuOpen((open) => !open)}
	className="text-primary hover:text-white transition-colors"
	aria-label={isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
	aria-expanded={isMenuOpen}
	>

[Copilot]

The backdrop for the open menu uses z-40 while the header/bottom nav use z-50, so users can still interact with those controls while the menu is open (e.g., navigate via bottom nav and leave the menu open). Consider increasing the backdrop z-index above the header/nav (and raising the menu panel above the backdrop), or otherwise ensuring navigation actions also close the menu.

Suggested change

	className="fixed inset-0 z-40 cursor-pointer bg-black/40"
	aria-label="Close navigation menu"
	/>
	<div className="fixed left-4 top-20 z-50 w-60 rounded-xl border border-outline-variant/20 bg-slate-950/95 p-3 shadow-2xl backdrop-blur-xl">
	className="fixed inset-0 z-60 cursor-pointer bg-black/40"
	aria-label="Close navigation menu"
	/>
	<div className="fixed left-4 top-20 z-70 w-60 rounded-xl border border-outline-variant/20 bg-slate-950/95 p-3 shadow-2xl backdrop-blur-xl">