From ec5b84f748db45fab5e29ed368629e6128668325 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Sun, 20 Sep 2026 22:14:48 +0200
Subject: [PATCH] =?UTF-8?q?web-player:=20P0=20=E2=80=94=20l=C3=ADnea=20bas?=
 =?UTF-8?q?e=20y=20bugs=20sueltos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrige eslint (imports muertos en liked), tamaño de título ausente en
MediaCard, clases no excluyentes en las filas del spotlight de Inicio,
tipografía del modal de borrado de álbumes, text-base inútil en botones
de icono (Sidebar, Queue) y borra Badge.svelte (sin usos).
---
 web-player/docs/frontend-refactor-plan.md     |  2 +-
 web-player/src/lib/components/Sidebar.svelte  |  2 +-
 .../src/lib/components/player/Queue.svelte    |  2 +-
 web-player/src/lib/components/ui/Badge.svelte | 23 -------------------
 .../src/lib/components/ui/MediaCard.svelte    |  2 +-
 .../src/routes/(app)/albums/[id]/+page.svelte |  2 +-
 .../src/routes/(app)/liked/+page.svelte       |  2 --
 web-player/src/routes/+page.svelte            |  4 ++--
 8 files changed, 7 insertions(+), 32 deletions(-)
 delete mode 100644 web-player/src/lib/components/ui/Badge.svelte

diff --git a/web-player/docs/frontend-refactor-plan.md b/web-player/docs/frontend-refactor-plan.md
index 7abcd56..a240e96 100644
--- a/web-player/docs/frontend-refactor-plan.md
+++ b/web-player/docs/frontend-refactor-plan.md
@@ -772,7 +772,7 @@ Tareas:
 
 | Parte | Estado | Commit | Notas / decisiones tomadas |
 | ----- | ------ | ------ | -------------------------- |
-| P0    | ⬜     |        |                            |
+| P0    | ✅     | (pendiente) | Button primary/secondary se mantienen iguales (decisión del usuario) |
 | P1    | ⬜     |        |                            |
 | P2    | ⬜     |        |                            |
 | P3    | ⬜     |        |                            |
diff --git a/web-player/src/lib/components/Sidebar.svelte b/web-player/src/lib/components/Sidebar.svelte
index bc7582e..1e2a797 100644
--- a/web-player/src/lib/components/Sidebar.svelte
+++ b/web-player/src/lib/components/Sidebar.svelte
@@ -81,7 +81,7 @@
 					type="button"
 					onclick={() => createPlaylistModal.show()}
 					aria-label="Crear playlist"
-					class="text-base text-muted transition-colors hover:text-fg"
+					class="text-muted transition-colors hover:text-fg"
 				>
 					<Plus class="h-3.5 w-3.5" strokeWidth={1.25} />
 				</button>
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 6c0599c..da41e33 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -26,7 +26,7 @@
 				type="button"
 				onclick={() => queuePanel.close()}
 				aria-label="Cerrar cola"
-				class="text-base text-fg-3 transition-colors hover:text-fg"
+				class="text-fg-3 transition-colors hover:text-fg"
 			>
 				<X class="h-4 w-4" />
 			</button>
diff --git a/web-player/src/lib/components/ui/Badge.svelte b/web-player/src/lib/components/ui/Badge.svelte
deleted file mode 100644
index 7e35326..0000000
--- a/web-player/src/lib/components/ui/Badge.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		tone?: 'neutral' | 'accent' | 'danger';
-		class?: string;
-		children: Snippet;
-	}
-
-	let { tone = 'neutral', class: klass = '', children }: Props = $props();
-
-	const tones = {
-		neutral: 'bg-surface-2 text-fg',
-		accent: 'bg-accent/20 text-accent',
-		danger: 'bg-danger/10 text-danger-fg'
-	};
-</script>
-
-<span
-	class="shrink-0 rounded-full px-2 py-0.5 text-sm leading-none font-semibold {tones[tone]} {klass}"
->
-	{@render children()}
-</span>
diff --git a/web-player/src/lib/components/ui/MediaCard.svelte b/web-player/src/lib/components/ui/MediaCard.svelte
index 26843da..84b2fd4 100644
--- a/web-player/src/lib/components/ui/MediaCard.svelte
+++ b/web-player/src/lib/components/ui/MediaCard.svelte
@@ -25,7 +25,7 @@
 	{oncontextmenu}
 >
 	{@render art(mediaCardArt)}
-	<div class="mt-2.5 truncate text-fg">{title}</div>
+	<div class="mt-2.5 truncate text-sm text-fg">{title}</div>
 	{#if subtitle}
 		<div class="mt-0.5 truncate text-xs text-fg-3">{subtitle}</div>
 	{/if}
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index c2c7889..b154179 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -79,7 +79,7 @@
 	<h2 class="text-lg font-semibold tracking-tight text-fg">
 		¿Eliminar «{album.title}»?
 	</h2>
-	<p class="mt-2 text-base text-fg-3">
+	<p class="mt-2.5 text-sm leading-[1.65] text-fg-2">
 		Esta acción no se puede deshacer. Las canciones que contiene seguirán en tu biblioteca.
 	</p>
 	<div class="mt-6 flex items-center justify-end gap-3">
diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte
index 4801b3d..7fcbee3 100644
--- a/web-player/src/routes/(app)/liked/+page.svelte
+++ b/web-player/src/routes/(app)/liked/+page.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Heart from '@lucide/svelte/icons/heart';
-	import Play from '@lucide/svelte/icons/play';
-	import Pause from '@lucide/svelte/icons/pause';
 	import X from '@lucide/svelte/icons/x';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 18b15b8..aa06778 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -286,11 +286,11 @@
 								e.preventDefault();
 								playSpotlightTrack(i);
 							}}
-							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors hover:bg-hover {isTargetCurrent(
+							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors {isTargetCurrent(
 								target
 							)
 								? 'bg-accent-tint'
-								: ''}"
+								: 'hover:bg-hover'}"
 						>
 							<span class="w-5 shrink-0  text-center text-xs text-muted tabular-nums"
 								>{i + 1}</span