Submitted query reflected in visible heading or result-count label

When a user submits Italian restaurants and the results page renders without echoing that query anywhere on-screen, the user has no confirmation that their search was understood. They cannot tell whether the page is filtered, whether typos were preserved, or whether they landed on the wrong route. This is a fundamental user-experience failure: the results page must close the feedback loop by reflecting the exact string the user typed, otherwise trust in the search breaks down and the user re-enters the query or bounces.

Read the query from the URL search params and render it in the page heading with the result count. Edit app/listings/results/page.tsx:

const query = searchParams.get('q') ?? ''
return (
  <>
    <h1>Results for "{decodeURIComponent(query)}"</h1>
    <p>{count} listings found</p>
  </>
)

Decode the parameter so characters like %20 render as spaces.

• ID: directory-search-discovery.search-input.query-reflection

• Severity: high

• What to look for: Enumerate all relevant files and After submitting a search, check whether the results page shows the submitted query clearly. Look for a heading like "Results for: 'your search'" or a label like "Found 12 results" that includes the search term. The query should be visible without requiring the user to look at the URL.

• Pass criteria: At least 1 conforming pattern must exist. After searching, the results page displays a heading or label that clearly shows the search term the user submitted. Example: "Showing 8 results for 'Italian restaurants'" or "Results: 'pizza near me'". Report the count of conforming instances found even on pass.

• Fail criteria: The search term is not visible anywhere on the results page except in the URL bar. The user has no indication what search they performed.

• Skip (N/A) when: Search is not implemented. Signal: no search input or results page found.

• Detail on fail: "Results page shows only a count ('8 results') but not the search term. User cannot see what they searched for except in the URL bar."

• Remediation: Display the search query prominently on your results page:

  // pages/listings/results.tsx (or app/listings/results/page.tsx)
  import { useSearchParams } from 'next/navigation'
  
  export default function ResultsPage() {
    const searchParams = useSearchParams()
    const query = searchParams.get('q')
    const count = 12 // from API
  
    return (
      <div>
        <h1>Results for "{query}"</h1>
        <p>{count} listings found</p>
        {/* results grid */}
      </div>
    )
  }
  

  Ensure the query is URL-decoded so it displays correctly to the user.