web-player: consistent imports, tokens, glossary and app route grouping

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

@@ -205,7 +205,7 @@
 		{/if}
 
 		<section>
-			<SectionHeading title="Mixes" subtitle="Generados a partir de lo que más repites" />
+			<SectionHeading title="Mezclas" subtitle="Generados a partir de lo que más repites" />
 			{#if data.mixes.length > 0}
 				<div class="grid-tiles">
 					{#each data.mixes as mix, i (mix.id)}
@@ -255,11 +255,11 @@
 			{:else}
 				<EmptyState
 					icon={ListMusic}
-					title="Todavía no tienes listas"
-					description="Crea tu primera lista y añádele canciones de tu biblioteca."
+					title="Todavía no tienes playlists"
+					description="Crea tu primera playlist y añádele canciones de tu biblioteca."
 				>
 					{#snippet actions()}
-						<Button href="/playlists">Crear lista</Button>
+						<Button href="/playlists">Crear playlist</Button>
 					{/snippet}
 				</EmptyState>
 			{/if}

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

@@ -28,7 +28,7 @@
 		{#snippet actions()}
 			{#if items.length > 0}
 				<Button onclick={() => (creating = true)}>
-					<Plus class="size-4" />
+					<Plus class="size-icon-sm" />
 					Nuevo álbum
 				</Button>
 			{/if}

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

@@ -36,7 +36,7 @@
 		{#snippet actions()}
 			{#if items.length > 0}
 				<Button href="/upload">
-					<Upload class="size-4" />
+					<Upload class="size-icon-sm" />
 					Subir canción
 				</Button>
 			{/if}
@@ -62,7 +62,7 @@
 		>
 			{#snippet actions()}
 				<Button href="/upload">
-					<Upload class="size-4" />
+					<Upload class="size-icon-sm" />
 					Sube la primera
 				</Button>
 			{/snippet}

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

@@ -59,7 +59,7 @@
 				onclick={() => playShuffled(tracks)}
 				disabled={tracks.length === 0}
 			>
-				<Shuffle class="size-4" />
+				<Shuffle class="size-icon-sm" />
 				Aleatorio
 			</Button>
 		{/snippet}

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

@@ -19,18 +19,18 @@
 </script>
 
 <svelte:head>
-	<title>Mis listas</title>
-	<meta name="description" content="Mis listas en Musify." />
+	<title>Mis playlists</title>
+	<meta name="description" content="Mis playlists en Musify." />
 </svelte:head>
 
 <Page>
 	<PageHeader
-		title="Mis listas"
+		title="Mis playlists"
 		description={items.length > 0 ? summary : 'Crea y organiza tus colecciones.'}
 	>
 		{#snippet actions()}
 			{#if items.length > 0}
-				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva playlist</Button>
 			{/if}
 		{/snippet}
 	</PageHeader>
@@ -51,11 +51,11 @@
 	{:else}
 		<EmptyState
 			icon={ListMusic}
-			title="Todavía no tienes listas"
+			title="Todavía no tienes playlists"
 			description="Crea la primera y añádele canciones de tu biblioteca."
 		>
 			{#snippet actions()}
-				<Button onclick={() => createPlaylistModal.show()}>Crear nueva lista</Button>
+				<Button onclick={() => createPlaylistModal.show()}>Crear nueva playlist</Button>
 			{/snippet}
 		</EmptyState>
 	{/if}

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

@@ -133,7 +133,7 @@
 								: 'bg-accent-btn text-accent-soft'}"
 						>
 							{#if stepStates[i] === 'done'}
-								<Check class="size-3.5" />
+								<Check class="size-icon-xs" />
 							{:else}
 								{i + 1}
 							{/if}

web-player/src/routes/layout.css

@@ -82,6 +82,10 @@
 	}
 }
 
+@utility focus-ring {
+	@apply focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none;
+}
+
 @utility track-grid {
 	grid-template-columns: var(--mf-track-cols-mobile);