[Vue Rewrite] Starred component

[devlinjunker]

Related to #748

Follows #2306

🗒️ Summary

Started looking into how the Bookmarks app was displaying lists and a three-panel-layout and started using some code from there, but realized I should just mimic a basic use case of the current app so that it's not too large of a change and is understandable for others to review

I decided to focus on making the first iteration of the rewrite similar to the current app compact view + mark as read behavior on open (rather than scroll), as that is how I currently use the News app...

• Added VirtualScroll Component from Bookmarks App
  • each Feed Items is created as a different #default template inside of the VirtualScroll parent component, the VirtualScroll determines which ones to render and when to load more items, or the feed has reached the end of loading
  • I still need to fully explore how the :reached-end property and load-more attributes should work
  • I still need to think about unit tests here... based on the Vue documentation, my unit tests aren't really focusing on the right things... so the unit tests need more work in general here... I'm trying to maintain a standard without slowing down development too much...
• Created FeedItem component for displaying News Items
  • Copied (most of) HTML from original app and attempted to match styles
  • Added "Eye" icon for User Action to keep unread
  • Added "Star" icon to Star/Unstar behavior (and mark in backend)
  • Added MarkRead method that is triggered on expanding element (and mark in backend unless "kept unread")
  • TODO: Added "Share" Icon that needs to be built out more
• Created Starred component and route for using VirtualScroll to display starredItems fetched from Vuex store
• Added Typescript Type for FeedItem
• Added new Vuex Store file for managing items
  • store all items in allItems
  • use getter for starred
  • track total starredCount as separate number that has its own state mutation
  • SET_ITEM mutation replaces item in allItems array
• Added Unit Tests for new components (except for VirtualScroll)

✅ Checklist

• Code is properly formatted
• Sign-off message is added to all commits

- [ ] Changelog entry added for all important changes. (Can we add the label to prevent the check for changelog? )

📷 Visual

➡️ Up Next

• Reuse VirtualScroll component for:
  • display all unread
  • display all items
  • display all items in single feed
  • display all items in a folder
• Move API Requests to Service Classes (to be shared between stores and prevent stuff like having to duplicate api requests like here…)
• Sidebar Actions

[devlinjunker]

😅 phew... this is a huge undertaking! I'll try to get the next PR reusing the VirtualScroll out in the next week or so, hopefully this will start rolling faster after I get a few more of these components under my belt and get used to writing vue unit tests... I think I'm not quite doing it right