Issue 7: Adding list filtering

[bbland1]

For an example of how to fill this template out, see this Pull Request.

Description

Allowing users to search through their list will help them cut down on clutter and focus on items they’re looking for.

Related Issue

Closes #7

Acceptance Criteria

• A form is added to the top of the List view, above the shopping list
• The form includes the following elements
  • A text field (with semantic <label>!) which narrows down the list as the user types
  • When there’s text in the field, some kind of button (e.g., an X) to clear the field. When the field is cleared, the list is reset to its unfiltered state.

Type of Changes

	Type
✓	💯 Enhancement
✓	✨ New Feature

Updates

Before

After

Screen.Recording.2024-08-28.at.10.22.56.PM.mov

Testing Steps / QA Criteria

• Visit the preview URL for this PR
• Sign in to the application
• Click a list that you want view on homepage
• Navigate to list view
• Type into the the search bar at the top of the list
• Hit the x in the box when ready to clear the search

[github-actions]

Visit the preview URL for this PR (updated for commit 243b675):

https://tcl-77-smart-shopping-list--pr29-fz-bb-filter-shoppin-jmib3sm3.web.app

_{(expires Sun, 08 Sep 2024 05:45:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[tannaurus]

Left some tiny thoughts but approved! Great work!

[eternalmaha]

This was such a thoughtful addition!!!! big praise!! I like that you added this because it keeps the user experience in mind.

[eternalmaha]

Great Job Yall!!! I really enjoyed watching the issue expand and evolve as the days went on!! Seems like you guys experimented with a lot