As a user, I want to be able to mark a list as important and to have important lists on top

[ahsanatzapier]

AC:

• There is a UX option available for me to pin/unpin important lists at the top
• The pinned lists are sorted in reverse add order.
• This is isolated to a per user bases.
• a11y checks have been done.
• Update the test to ensure coverage of this new functionality.

🧗🏽 Challenge

• The audience for this change is users of the smart application list who frequently access specific lists and need a way to prioritize them.
• The user wants to be able to mark a list as important so that it is displayed at the top of their lists for easier access.
• This matters because it enhances user experience by allowing users to quickly navigate to the lists they use most often, making the application more user-centric.
• This change aligns with our broader product objective of improving usability and personalization in the application.
• We will accomplish this by adding a UX option for users to pin or unpin lists, sorting pinned lists in reverse order of their pinning date.

⚡️ Solution

• The solution involves implementing a feature that allows users to pin/unpin important lists at the top of their list view. This will include front-end adjustments for the UX.
  Possible Solution: Each SingleList element will have an invisible pin icon and a state that tracks whether the list is being hovered over. Upon hovering, the pin icon becomes visible. The pin icon will have an onClick attribute that toggles the state, setting the list as pinned (true - marked as 'pinned') or unpinned (false - no longer marked as 'pinned'). When a list is pinned, the pin icon remains visible, and the list stays at the top of all lists until the pin icon is clicked again.

🎨 Designs

• Links to Figma files will be provided once the design is finalized. The design will highlight how pinned lists appear at the top and the option to pin/unpin them.

Mockups:

Hovered:

Clicked:

Pinned:

✅ Acceptance Criteria

Should describe the definition of done, not the technical how-to (technical details go in the Solution section).

• The UX option to pin/unpin lists is available and functions correctly.
• Pinned lists are sorted in reverse order of their creation date.
• This functionality is isolated to each user's account.
• Accessibility (a11y) checks have been completed and validated.
• Tests are updated to ensure coverage of this new functionality.

🚫 Out of Scope

• This issue does not include changes to the overall list sorting mechanism beyond pinning functionality.
• Follow-on work may include enhancements such as notifications for pinned lists or additional sorting options. Related GitHub issues will be linked as they arise.

📝 Notes

• Additional context includes ensuring that the pinning feature is intuitive and easy to use.
• Technical constraints include ensuring that the current data model can support the pinning functionality without significant refactoring.