Changes

web-player/src/routes/(app)/playlists/+page.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <svelte:head>
-	<title>Mis listas · Musify</title>
+	<title>Mis listas</title>
 	<meta name="description" content="Mis listas en Musify." />
 </svelte:head>
 

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

@@ -36,7 +36,7 @@
 </script>
 
 <svelte:head>
-	<title>{playlist.name} · Musify</title>
+	<title>{playlist.name}</title>
 	<meta name="description" content="Playlist {playlist.name} en Musify." />
 </svelte:head>
 

web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -24,21 +23,12 @@
 		$props();
 </script>
 
-<a
-	href="/playlists"
-	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
->
-	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-		<ArrowLeft class="h-4 w-4" />
-	</span>
-	Volver a tus listas
-</a>
+<BackLink href="/playlists" label="Volver a tus listas" />
 
 <div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
 	<PlaylistArt
 		playlistId={id}
 		{trackIds}
-		hue={hueFor(id)}
 		size="large"
 		version={updatedAt}
 		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -9,7 +9,6 @@
 		youTubeThumbnailUrl,
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime, fmtDate } from '$lib/format';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -48,7 +47,6 @@
 				coverSrc={isPendingYouTubeTrack(track) && track.externalId
 					? youTubeThumbnailUrl(track.externalId)
 					: undefined}
-				hue={hueFor(track.id)}
 				explicit={track.isExplicit}
 				onClick={() => playFrom(i)}
 			>

web-player/src/routes/(app)/playlists/[id]/components/SuggestionsTable.svelte

@@ -7,7 +7,6 @@
 		type ApiTrackLike,
 		type QueueItem
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import type { YouTubeSong } from '$lib/types';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
@@ -92,7 +91,6 @@
 					title={item.kind === 'youtube' ? item.song.title : item.track.title}
 					artist={item.kind === 'youtube' ? item.song.artist : item.track.artist}
 					coverSrc={item.kind === 'youtube' ? item.song.thumbnailUrl : undefined}
-					hue={hueFor(idFor(item))}
 					explicit={item.kind === 'youtube' && item.song.isExplicit}
 					onClick={() => playFrom(i)}
 				>