feat: UI Overhaul

[FoxxMD]

New UI is a blank-slate implementation using most of the same backend api endpoints but leveraging all of the new debug data to render a user-friendly display of a scrobble's end-to-end lifecycle through MS, among other things.

TODO:

• Storybook implementation
  • Stories for all major components pages
• Generic Components
  • Code Block
    • Toggleable
    • Collapsible or max height with scrolling
  • Admonition for error rendering for backend errors with causes
  • JSON Diff
  • TBD
• Play Rendering
  • Basic RO data display (track/artists/MBIDs/etc.)
  • JSON View
  • Initial/Final tabs for comparing pre/post transformed Play
• Play Timeline
  • Source discovery rendering
  • Initial/Final tabs for comparing pre/post transformed Play
  • Transform Timeline
    • Timeline display for each step
      • JSON Diff of transform results + Patch fallback
      • JSON view of inputs (MB query and response)
      • Error rendering
      • Discriminate b/w success, stop, skip, preqreq failure
    • Display final transformed Play
  • Duplicate match
    • Result data rendering (score, breakdown)
    • Closest match Play rendering
  • Scrobble timeline
    • Payload as JSON view
    • Response rendering
      • Error rendering
      • Warnings
      • Response as JSON
• Source/Client Activity Log
  • Play Overview (stacked list)
    • Basic data display
    • Show status (queued, scrobbled, error)
      • Implement backend data structure
    • Retry button for failed
      • Placeholder
      • Wire up logic
    • Expand into Play Timeline
  • Virtualized list
  • Render in container with max height based on viewport
  • Sort Plays
    • By Played At timestamp
    • By Seen At (added to queue/discovered)
  • Render dividers based on day of Sort By
  • Implement queued scrobble api endpoint
  • Filter By
    • Implement logic for aggregating activity log from queued/discovered, scrobbled, failed
    • Filter by above, multiple
• Source/Client Details
  • Render Activity Log
    • Wire up "Retry All" for failed Plays
  • Show detailed status
    • Render error, if any
    • Render enabled, silenced
  • Implement settings/actions pane
    • Restart, enable/disable, silence, reauthenticate...
  • Show stats
  • Show some basic RO config?
• Source/Client Overview
  • Render basics: type, name
  • Status badge/icon with simplified status
  • Live stats: queued/failed/scrobbled count
  • Live Player
    • Re-implement old player with Chakra UI components
    • Make it more compact!
• Client/Sources Page
  • Render list of Source/Client Overview
    • Stacked list
    • Maybe expand to grid if breakpoint is large enough?
  • Filter By
    • Implement filtering buttons/chiclets for Client/Source/All
  • Render separator for clear visual discrimination between Clients/Sources
• Live Logs
  • Investigate UI solutions
    • Drawer so its always accessible?
      • Need to add UI element in a non-awkward position that is sticky on screen
    • Separate page in a sidebar or top header
• Jobs?
  • Plan for Jobs page for future scrobble import/export/migration

[FoxxMD]

For anyone interested or wants to chime in on requested features, here's the current Play Activity Log implementation. Subject to change.

[RustyNova016]

I really like that timeline feature. We can easily trace what happened to a listen like that

[4rft5]

I like the timeline feature too. My only question there is if there'll be some kind of raw data viewer for each scrobble so you can see the whole scope of the logs (would presumably be more helpful than a screenshot of the ui if making a github issue, etc)

[FoxxMD]

The current option to copy all debug data for a scrobble will still exist. That is what this timeline is based on.

Further down the line i'm also hoping I can associate individual log lines with a scrobble so they can be rendered/copied as well.