feat: change heading based on filter

[elle-l-em]

Description

Change the heading text so that it reflects the current tab. Previously, all tabs said "remaining", now they say:

• All: "N tasks"
• Active: "N tasks remaining" (same as before)
• Completed: "N tasks completed"

Motivation

I started using this and was confused that when I went to my completed tasks, it said those tasks were still "remaining". All the tab filters say "remaining" but I think of "remaining" tasks as the tasks still left to do, not the completed ones. Now the header text appropriately reflects the active filter.

Additional details

None

Related issues and pull requests

None

[github-actions]

It looks like this is your first pull request. 🎉
Thank you for your contribution! One of the project maintainers will triage
and assign the pull request for review. We appreciate your patience. To
safeguard the health of the project, please take a moment to read our
code of conduct.

[bsmth]

Nice, thank you. I think that's a good improvement. Would you be able to also update the doc here?

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state#deleting_tasks_from_state_and_ui

We can add a new section about making the heading consistent, showing the code addition here, then update the final code block at the end of the article. Does that make sense?