This new format only includes data needed for the client to update and should be nicer to work with since its not randomly nested!
Properties dont line up to those in the spotify API but idc

TODO:
- reimplement new /now-playing-sse
- reimplement update functionality

In order to ensure that this works even if the server crashes and the token expires before the server reboots, after each request the refresh token is written to `./.refreshToken`.
When the sdk is required, first the refresh token is loaded from the file, before being used to make a raw API request to get a new access token. This response is validated to make sure all required fields are present before being passed to the sdk.
If any of this fails, an unhandled exception is thrown since this is unrecoverable but should only run at server start

(like seriously spotify is typing ur apis really so hard. i changed like 1 line and fixed a couple issues which cascaded from it. Cmon)

Given an array `tabs` with elements in the format `{ id, label, content }`, a labeled radio item will be generated, which, when checked, makes the associated tab display: block, unless overridden by the variable --display.
Currently planning to add an "icon" slot for an imported image or url, and replace content with a component

- 🟠 figure out what causes "The connection to http://localhost:3000/now-playing-sse was interrupted while the page was loading." error
- 🟠 preload all assets
- 🟠 figure out why firefox warns about unused box-circle-mask.png preload when it is used in bsky pfp in landing

Updated TODO list:

TODO:
- ✅ [DONE] resolve issue where focusing on artists when artist list updates closes the metadata changes (fix: move focus to equivalent index in artist list)
- ✅ [DONE] stop updating the data so frequently (only update on change)
- ✅ [DONE] hide popup when nothing playing
- 🟠 pause record player if nothing playing
- 🟠 pause record head if nothing playing
- ✅ [DONE] make record head move to stop position when changing song
- ✅ [DONE] remove randomness from record head animation
- ❌ [MARKED AS WONT-FIX] prolong the record head animation to 3 mins/length of song when js is enabled, to sync up better with real world (if it looks good)
- ❌ [MARKED AS WONT-FIX] crossfade animations for images when changing song
- 🟠 figure out what causes "The connection to http://localhost:3000/now-playing-sse was interrupted while the page was loading." error
- 🟠 preload all assets
- 🟠 figure out why firefox warns about unused box-circle-mask.png preload when it is used in bsky pfp in landing
- ❌ [MARKED AS CANT-BE-FUCKED] split up NowPlaying component if needed as is getting quite large

- nothingPlaying simply prevents the popup appearing.

- updateMetadata naively updates title, album, and art, since all of those can be updated in place.
- The complexity in the artists update is because if the innerHTML is replaced and the user is tabbed onto one of the artists, the page will delete the focus, confusing the user and interrupting them. To avoid this, the array of artists is updated in place, with extra artists added and removed as needed. If an artist is removed, focus is sent to the last artist which could receive focus, to reduce disruption

- elIs takes an Element | null (ex: from document.querySelector()), and a class (ex: HTMLAnchorElement), then returns the element if it exists and is an instanceof the class, and throws an error if its null or the wrong type. Also optionally takes a name for the error message. This should be used when it's known that the element will be of a given type and it's critical failure if its wrong.

- querySelector wraps elIs by performing the query for you, to reduce line length.

- querySelectorAll performs elIs/querySelector on a nodelist. Again to reduce line length

This will be used to prevent rerenders when the song hasn't changed and reduce the chance of unexpected behaviour

TODO:
- resolve issue where focusing on artists when artist list updates closes the metadata changes (fix: move focus to equivalent index in artist list)
- stop updating the data so frequently (only update on change)
- hide popup when nothing playing
- pause record player if nothing playing
- pause record head if nothing playing
- make record head move to stop position when changing song
- remove randomness from record head animation
- prolong the record head animation to 3 mins/length of song when js is enabled, to sync up better with real world (if it looks good)
- crossfade animations for images when changing song
- figure out what causes "The connection to http://localhost:3000/now-playing-sse was interrupted while the page was loading." error
- preload all assets
- figure out why firefox warns about unused box-circle-mask.png preload when it is used in bsky pfp in landing
- split up NowPlaying component if needed as is getting quite large

- .player now can be focused by tab index or clicking
- now-playing now delegates focus (tapping el focuses first focusable child + :focus === :focus-within but extends out shadowroot)

this will be used to show song metadata (artist, album, spotify links)