Epic: List Interface

[nelsonic]

With #345 we've added lists as outlined in #356
Documented in: book/mvp/lists ✅
What we don't yet have is the interface for interacting with lists!

Todo

• Clarify what benefits/features lists give us; we just need a brief sentence. 💡 📝
• View/Manage existing lists including: 👀
  • Edit the text to change the display name of the list.

  Note: We need to decide if the "All" list should be re-nameable ... 💭

• Create new lists 🆕
• Move a item to a list. ➡️
  d2) Move multiple items to a list in a single action e.g: select multiple.
• Remove an item from a list Feat: implement remove_item_from_list/3 function #422
• Share a list with other people ... 🫂

Some of these features are already started in @SimonLab's Lists PR: #165
So my plan is to use that PR as the basis for this to not waste any work. 🤔

[nelsonic]

At present this is what we see when we visit http://localhost:4000/lists in the MVP on the items-list branch: #165

Similar to #396 this interface/layout needs some TLC. 🪄

[nelsonic]

I don't think the "all" list should be editable/delete-able. 💭
If anyone disagrees, please comment. 🙏 💬

[LuchoTurtle]

Don't disagree. It makes sense always to exist and it's a fundamental "view" on all items. 👌

[iteles]

If by editable you mean allow people to add or remove items from it, I agree it shouldn't be editable. It's the master list.

What I do think should exist is an option for a person to select whichever view they want as their 'home' view. I will open a separate issue for discussion as it doesn't impact this one.

[nelsonic]

Working on the layout with TailwindUI:

Just need to tidy the buttons for Edit and Delete and then we can ship this initial version.
Note: we still need to work on how to add/move an item to list: #420

[nelsonic]

Buttons themed: http://localhost:4000/lists

iOS Simulator:

Delete displays a Dialog prompt:

Note: this is not a Modal.
It's a contextual confirmation

Looks/works fine on Mobile because it's a Safari/Chrome standard feature:

Very happy for anyone else to suggest/improve the intro copy. 📝 🙏

Recommended reading: https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/

[nelsonic]

Tackling the "New List" Page next: http://localhost:4000/lists/new

[nelsonic]

New list form with basic styling:

Also applies to the Edit page:

Added Created and Last Updated columns for additional info: