Create input to allow users to name their list

[yiremorlans]

Description

These changes implement an input on the Home view that allows the user to enter their own list name(letters and numbers only). From the List view, users can now check out of their current list and return to the Home view to join an existing list or create a new one.

There is a pattern attribute with a regex expression for input validation on both the Create New List input and Join Exisiting List input. This prevents punctuation and other characters such as ?!#$ from being used for list names.

This code also addresses a bug that previously allowed users to navigate to the List view without first creating a list.

Related Issue

closes #30

Acceptance Criteria

• There is an input box on the Home page above/alongside the "Create New List" button.
• Upon creation, the user is shown the name of the list via Chippy's message box.
• As Chippy's message box changes to user activity, it should always default back to a standard message that includes the user's list name.

Type of Changes

	Type
✓	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

After

Testing Steps / QA Criteria

You can check the localStorage in the browser dev tools when the list token is removed by clicking to check out to another list on the List view.

[github-actions]

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

https://tcl-56-smart-shopping-li-ffe7d--pr31-ym-user-names-lis-q1op8g6y.web.app

_{(expires Sat, 27 May 2023 19:53:42 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 9c51cec5927ae3f1253a2134be95c1a07393f9a7}

[yiremorlans]

I think this is the correct semantic choice for displaying this info, and the li element within the other li element was rendering an error on the dev browser console.

[yiremorlans]

This function was refactored to return a new Date timestamp without the hours accounted for. The difference in hours would determine the order the items were sorted and the alphabetical sorting did not look accurate because sometimes an item would be a few hours apart.

For example: Apples, Coffee, and Bananas were all purchased April 25, but because Bananas were added a little bit after Coffee the list would look like Apples, Coffee, and Bananas. With the new fix, it will render Apples, Bananas, and Coffee if they were all purchased on the same day regardless of time.

[yiremorlans]

There were merge conflicts to be resolved and it required I change the formatting of certain elements to fit into the new layout style. The UI screenshots are representative of the style prior to the stylistic changes, but the functionality introduced with checking out to a different list remains the same.