Changing sort updates results without losing filters or pagination

When changing sort order wipes active filters, the user watches their carefully refined query collapse back to the unfiltered state in one click. They rebuild the filters, sort again, and it collapses again — or they give up. This is a state-management bug that reads to the user as the directory being fundamentally unreliable. Sort is a refinement of the existing result set, not a reset, and confusing the two guarantees the user never trusts the interface enough to commit to a listing.

Update the sort query parameter by cloning the existing URLSearchParams, setting only sort and resetting page to 1, then calling router.push. Do not construct a new params object from scratch. Edit components/SortControl.tsx:

const params = new URLSearchParams(searchParams)
params.set('sort', newSort)
params.set('page', '1')
router.push(`?${params}`)

This preserves category, price, and every other active filter.

• ID: directory-search-discovery.results-sorting.sort-preserves-state

• Severity: high

• What to look for: Enumerate all relevant files and Apply multiple filters and navigate to page 2. Then change the sort method. Observe whether the filters remain active, the page resets to 1 (expected), and the results reorder according to the new sort. Verify that changing sort does not clear filters or reset to an unexpected page.

• Pass criteria: At least 1 conforming pattern must exist. Changing sort updates the result order without removing active filters. The page may reset to 1 (expected behavior), but filters remain in place. URL updates to reflect the new sort while preserving filter parameters.

• Fail criteria: Changing sort clears all filters, or causes an error, or the results do not reorder, or unexpected behavior occurs.

• Skip (N/A) when: Results are not sortable or filters are not implemented. Signal: no sort control or filters found.

• Detail on fail: "Applying sort 'Highest Rating' clears all active filters. Should preserve filters and reorder results." or "Sort change causes page to load with filters removed."

• Remediation: Update URL with new sort parameter while preserving existing filters:

  // components/SortControl.tsx
  import { useSearchParams } from 'next/navigation'
  import { useRouter } from 'next/navigation'
  
  export function SortControl() {
    const searchParams = useSearchParams()
    const router = useRouter()
    const currentSort = searchParams.get('sort') || 'relevance'
  
    const handleSortChange = (newSort) => {
      const params = new URLSearchParams(searchParams)
      params.set('sort', newSort)
      params.set('page', '1') // reset to page 1
      router.push(`?${params}`)
    }
  
    return (
      <select value={currentSort} onChange={e => handleSortChange(e.target.value)}>
        <option value="relevance">Relevance</option>
        <option value="rating">Rating</option>
      </select>
    )
  }
  

  This preserves all other query parameters (filters) while updating the sort.