web-player: split player, navigation and accent state into focused modules

web-player/src/routes/(app)/user/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { playlistCover } from '$lib/utils/hrefs';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import Page from '$lib/components/ui/layout/Page.svelte';
 	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
@@ -62,9 +63,7 @@
 						title={playlist.name}
 						subtitle={playlistMeta(playlist.trackCount)}
 						trackIds={playlist.coverTrackIds}
-						src="/api/playlists/{playlist.id}/cover?size=large&v={encodeURIComponent(
-							playlist.updatedAt
-						)}"
+						src={playlistCover(playlist, 'large')}
 						index={i}
 					/>
 				{/each}

web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte

@@ -6,7 +6,7 @@
 	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
 	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
 	import UserRow from '$lib/components/ui/media/UserRow.svelte';
-	import { appendUnique } from '$lib/data/collections';
+	import { appendUnique } from '$lib/utils/collections';
 	import { plural } from '$lib/utils/format';
 
 	let { data } = $props();