feat: search result modal

[micahkepe]

Description

This PR completely overhauls the search experience by replacing the basic dropdown results list with a modern, full-featured search modal. The new modal provides a polished, app-like search interface with keyboard navigation, result counts, and smooth animations.

Key Features

Search Modal Interface

• Centered modal overlay with backdrop blur effect
• Smooth slide-up animation on open
• Clean, modern design that matches the theme aesthetic
• Responsive design for mobile devices and short viewports

Enhanced User Experience

• Keyboard Navigation: Navigate results with ↑↓ arrow keys, select with Enter, close with Escape
• Results Count: Displays "X results for 'query'" with the search term highlighted
• Visual Feedback: Hover and keyboard selection states for search results
• Auto-focus: Modal input automatically receives focus when opened
• Quick Access: Press / key anywhere to instantly open search

Technical Improvements

• Body Scroll Lock: Prevents background scrolling when modal is open, with proper scroll position restoration
• Layout Shift Prevention: Calculates scrollbar width and adds padding compensation
• Custom Scrollbar: Minimal 6px scrollbar with transparent track for results list
• Light/Dark Theme Support: Complete styling for both color schemes
• Accessibility: Proper ARIA attributes and semantic HTML elements

Before vs After

Before:

• Simple dropdown below search input
• No keyboard navigation
• Results appeared inline with page content
• Basic styling with limited interactivity

After:

• Dedicated modal overlay with backdrop
• Full keyboard navigation support
• Results displayed in centered, focused modal
• Rich interactions including hover states, keyboard selection, click-to-navigate
• Result count display
• Professional scrollbar styling
• Smooth animations and transitions

Implementation Details

CSS Architecture (sass/parts/_search.scss)

• New modal structure with fixed positioning and z-index layering
• Backdrop overlay with blur effect
• Responsive breakpoints for mobile (<768px) and short viewports
• Custom scrollbar styling for webkit and Firefox
• Comprehensive light theme support throughout
• Animation keyframes for fadeIn and slideUp effects

JavaScript Functionality (static/js/search.js)

• showSearchModal(): Handles modal opening, scroll locking, and focus management
• hideSearchModal(): Handles modal closing and scroll restoration
• updateResultsCount(): Displays formatted result count with singular/plural handling
• updateSelection(): Manages keyboard navigation state
• Enhanced event handlers for keyboard navigation (ArrowUp, ArrowDown, Enter, Escape)
• Click and hover handlers for mouse interaction
• XSS protection via escapeHtml() for user input

HTML Structure (templates/macros/index_macros.html)

• Moved modal outside search container for proper positioning
• Added backdrop element
• Added results count display element
• Added modal header, footer with keyboard hints
• Used semantic <dialog> element for modal

Related Issue(s)

N/A - This is an enhancement to improve the search UX

Screenshots