Redesign search/filter/sortby bar

[NicooleT]

Summary

Redesign trail discovery around a compact, reusable sort/search/filter toolbar, with platform-specific sorting menus and shared filter behavior.

Closes #29

Toolbar and search

• Position the toolbar above the trail list; slide it out when scrolling down and back in when scrolling up.
• Open sorting only from the Sort By trigger, rather than the empty center of the toolbar. Show the selected Name, Distance, or Rating label without truncation.
• Expand search on demand and transition the search/filter icon with scale and blur.
• Keep the search term when Return is pressed, the screen is tapped, or the back arrow returns to sorting. Return and outside taps dismiss the keyboard without clearing the results.
• Show the animated X button only for a non-empty query; X clears the text and keeps the input ready for a new search.
• Animate the chevron into the search back arrow. Keep the filter action icon-only and remove the separate trail-result total row.

Sorting and Android parity

• iOS: retain the native MenuView from @expo/ui/community/menu.
• Android: add an anchored, rounded AndroidSortMenu using expo-blur and an Android-only BlurTargetView around the trail list. Update the sort label immediately and use the same close-animation path for selecting the current option, selecting a different option, tapping outside, or pressing Android Back.
• Use a near-white light blur tint on Android light mode instead of the grey systemThinMaterialLight tint; preserve the dark-mode material tint.
• Center the TrailHead header on Android.
• The Android-only parity changes preserve the existing iOS menu, sheet animations, and unwrapped list. Earlier commits in this PR intentionally redesign the shared discovery controls.

Filter sheet

• Keep Filter trails flush with the screen bottom, including Android navigation-bar handling and an Android modal gesture root.
• Center the title, omit the X close button, and support outside-tap and handle-drag dismissal.
• Keep Region and Level choices scrollable, with a top fade when content has scrolled.
• Pin Clear and Show N trails to the bottom so the actions remain visible. Preserve the search term when opening or closing filters.

Reusable components and styling

• src/components/SearchFilterControls.tsx: controlled query/sort values, configurable options and labels, search transitions, and filter content/footer integration.
• src/components/FilterSheet.tsx: reusable modal sheet, FilterSection, and FilterChip.
• src/components/AndroidSortMenu.tsx: Android-only frosted sort popup.
• src/components/EmptyState.tsx: configurable icon, message, and optional action.
• src/hooks/useScrollVisibility.ts: scroll-driven toolbar visibility; this animates the toolbar, not individual trail cards.
• Keep trail data filtering and sorting in app/(tabs)/index.tsx. Use inline styling and shared light/dark theme tokens in the extracted UI.
• Declare the @expo/ui dependency used by the native iOS sort menu.

Validation

• npm run typecheck
• npm run lint
• git diff --check
• Local Stim launches verified on the owned iOS simulator and Google Pixel 9 Android emulator during implementation (September 9–10).
• Android: select Name/Distance, reselect the current option, dismiss by backdrop or system Back, and verify the selected trigger label and updated results.
• Android: tapping the empty toolbar center does not open sorting; filter-sheet handle drag and system Back dismiss the sheet; the Eastern Townships filter reports Show 21 trails.
• Android layout regression checks in bench/check-android-controls.mjs: logo centering and sheet-bottom coverage fail on the original screenshots and pass on the corrected screenshots.
• Android light/dark menu appearance checked; the final light-tint adjustment retains the blur. A sampled neutral menu area improved from 238.8 to 251.2 out of 255, passing the near-white visual check.
• iOS comparison for the Android-only changes: sort-menu and filter-sheet screenshots matched the baseline pixel-for-pixel below the status bar; header variation was limited to nine pixels with a one-level channel difference.
• No matching application errors in the Stim runtime checks.

Before and after evidence

Android layout and sorting

Before: the header logo was left-aligned, the filter sheet exposed a gap above the bottom navigation area, and sorting used the Android Material dropdown rather than the iOS-style popup.

After: the header is centered, the filter sheet reaches the bottom with visible footer actions, and sorting uses a rounded, frosted popup anchored to the Sort By control. These changes are Android-only.

Android menu tint — matching capture pair

Before: the material-light tint gave the popup a grey cast.

After: the light tint produces a near-white frosted surface while retaining the background blur.

Both screenshots were captured with agent-device on the same owned Pixel 9 emulator, Trails route, light theme, portrait orientation, Name sorting, empty search, and the same bundled trail data. The image attachments are pending browser sign-in; no local-only image links are included here.

Local tooling note

The development machine was upgraded from the global stim-cli package to global stim@1.0.0, and this branch's Metro supervisor was restarted successfully on port 8084. This is a local tooling change, not a new app dependency or native-project change. No Expo prebuild was run. The legacy shutdown preserved the owned emulator and its app data.