[GOOD FIRST ISSUE]: Add active filter counter badge and Clear all action in Section Directory

[Hanu2908]

Task summary

Display an active filter counter badge with singular/plural formatting and add a 1-tap "Clear all" action in the Section Directory.

Estimated scope / difficulty

Starter (1 to 2 hours)

Motivation and context

When searching for section members by batch, role, or profile tags, students currently have no visual indicator showing how many filters are active, and have to manually toggle each filter off one by one.

Relevant files and code pointers

• src/pages/app/SectionDirectoryPage.tsx
• tests/unit/components.test.tsx

Acceptance criteria

• Calculate active filter count deterministically:
  • Batch: selectedBatch !== 'all' -> +1
  • Role: selectedRole !== 'all' -> +1
  • Tags: selectedTags.length -> +N
  • (Example: Batch 1 + CR + Hosteller = 3 active filters)
• When count is 0: badge and "Clear all" button are hidden.
• When count is 1: displays "1 filter active".
• When count > 1: displays "N filters active".
• Clicking "Clear all" resets all filters back to default (selectedBatch = 'all', selectedRole = 'all', selectedTags = []).
• Unit tests added covering:
  • Default state (count 0, badge hidden)
  • Single filter applied ("1 filter active")
  • Multiple filters applied ("N filters active")
  • "Clear all" execution restoring default state.
• npm test and npm run lint pass with 0 errors.

Implementation guide and hints

Look at the filter state declarations in src/pages/app/SectionDirectoryPage.tsx. Derive activeFilterCount as a computed constant from existing state variables.