Clear all filters control resets to unfiltered state in one action

Users accumulate filters exploratively — they click a category, a price range, a rating threshold, then realize they want to start over. Without a clear-all control, they must find and click the remove button on each chip one at a time, or figure out that clicking the filter again toggles it off. Both paths take 4-8 seconds of friction at the moment the user most wants to restart their exploration. A single Clear all button resolves this to one click and signals that the interface respects the user's time.

Add a Clear all button inside the filter panel header that calls a handler resetting every filter key to null or default. Hide the button when no filters are active so it doesn't add noise. Edit components/FilterPanel.tsx:

{Object.values(filters).some(Boolean) && (
  <button onClick={() => onChange({ category: null, price: null, rating: null })}>
    Clear all
  </button>
)}

• ID: clear-all-button

• Severity: high

• What to look for: Enumerate all relevant files and Apply 2-3 filters. Look for a "Clear all filters" button, "Reset filters" link, or similar control. Click it and verify that all filters are removed in a single action and results revert to unfiltered.

• Pass criteria: A "Clear all" or "Reset filters" button is present (easily visible, not hidden in a menu). Clicking it removes all active filters and returns results to the full, unfiltered state.

• Fail criteria: No "Clear all filters" control exists, or clicking it does not clear all filters (only clears some).

• Skip (N/A) when: Directory has fewer than 3 filterable attributes (see Global N/A Rule).

• Detail on fail: "No 'Clear all filters' button found. User must manually deselect each filter to reset." or "'Reset filters' button clears only some filters, leaving one or more filters active."

• Remediation: Add a clear-all button in your filter panel:

  // components/FilterPanel.tsx
  export function FilterPanel({ filters, onChange }) {
    const handleClearAll = () => {
      onChange({ category: null, price: null, rating: null })
    }
  
    return (
      <div className="filter-panel">
        <div className="flex justify-between items-center mb-4">
          <h3>Filters</h3>
          {Object.values(filters).some(v => v) && (
            <button onClick={handleClearAll} className="text-sm text-blue-600">
              Clear all
            </button>
          )}
        </div>
        {/* filter controls */}
      </div>
    )
  }
  

  Show the button only when at least one filter is active.