Redesign the Trails sort, search, and filter controls

[NicooleT]

Summary

Replace the current filter and Name/Distance/Rating segmented control with a compact, progressive sort/search/filter interaction.

Default state

• Show “Sort By Name” on the left, with only the selected value (“Name”) in bold.
• Pressing the sort text opens a bottom sheet containing Name, Distance, and Rating choices.
• Show a search icon button on the right.

Search state

• Pressing the search button expands a search input across the available width and focuses it.
• Show a filter button on the right side of the expanded search input.

Filter state

• Pressing the filter button smoothly reduces the search input width.
• Slide up a modal/bottom sheet with the existing Region and Level filter selections.

Acceptance criteria

• Selecting Name, Distance, or Rating updates the list order and the bold value in “Sort By …”.
• The sort bottom sheet indicates the current selection and is dismissible.
• Search expansion and contraction are smooth and do not cause content overlap or clipping.
• The search field filters trail results and remains usable with the keyboard open.
• The filter modal preserves the existing Region and Level behavior and current selections.
• Controls have accessible labels, appropriate touch targets, and work in light and dark modes.
• Layout remains usable on compact screen widths and with larger text sizes.

Related

This redesign replaces the current segmented Name/Distance/Rating toggle interaction described in #27.