Review filtering by star rating is functional

On products with 50+ reviews, shoppers looking to validate a concern — say, "does this fail after six months?" — cannot surface 1-star and 2-star reviews without scrolling through dozens of positives. A star-rating filter lets them find that signal in one click, which increases time-on-page and reduces refund rates because buyers self-disqualify before purchase instead of after. Without filters, low-rated reviews get drowned and the product reads falsely uniform.

Render a components/ReviewFilter.tsx component with a checkbox per rating level (1-5), track selected ratings in state, and pass them to the review query as a WHERE rating IN (...) clause. Keep the control visible above the review list:

{[5, 4, 3, 2, 1].map(rating => (
  <label key={rating}>
    <input
      type="checkbox"
      checked={selectedRatings.includes(rating)}
      onChange={(e) => toggle(rating, e.target.checked)}
    />
    {rating} stars
  </label>
))}

• ID: ecommerce-reviews.display-ux.review-filtering

• Severity: low

• What to look for: List all filter controls in the review display area. For each filter, count the number of rating levels it supports (1-star through 5-star). Verify the filter onChange handler triggers a re-query or client-side filter that changes the displayed reviews.

• Pass criteria: A filter control exists supporting at least 5 rating levels (1 through 5 stars) and successfully filters reviews by the selected rating when activated. The filter must produce a visible change in the displayed review list.

• Fail criteria: No filter control exists, or the filter UI renders but has no functional onChange handler that actually filters the review list.

• Skip (N/A) when: The project has fewer than 10 reviews total in the database, making filtering impractical.

• Detail on fail: "No star rating filter found in review display components. Users cannot narrow 47 reviews by rating."

• Remediation: Add a filter component in components/ReviewFilter.tsx:

  // components/ReviewFilter.tsx
  export function ReviewFilter({ selectedRatings, onFilter }) {
    return (
      <div className="rating-filters">
        {[5, 4, 3, 2, 1].map(rating => (
          <label key={rating}>
            <input
              type="checkbox"
              checked={selectedRatings.includes(rating)}
              onChange={(e) => {
                if (e.target.checked) {
                  onFilter([...selectedRatings, rating])
                } else {
                  onFilter(selectedRatings.filter(r => r !== rating))
                }
              }}
            />
            {rating}⭐
          </label>
        ))}
      </div>
    )
  }