From 7b72db8a24abe980f82687d1fa64901a7f497a38 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:28:07 +0200
Subject: [PATCH 01/26] Add ambient drift animation to app backdrop; adjust
 inset and handle reduced motion

---
 web-player/src/routes/layout.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 4d2eea9..caba038 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -169,10 +169,16 @@
 @utility app-backdrop {
 	pointer-events: none;
 	position: fixed;
-	inset: 0;
+	inset: -10%;
 	z-index: -10;
 	background-color: var(--mf-bg);
 	background-image: var(--mf-ambient);
+	animation: ambient-drift 48s ease-in-out infinite alternate;
+	will-change: transform;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
 }
 @utility app-vignette {
 	pointer-events: none;
@@ -307,6 +313,18 @@ button:disabled {
 	}
 }
 
+@keyframes ambient-drift {
+	0% {
+		transform: translate3d(-3%, -2%, 0) scale(1);
+	}
+	50% {
+		transform: translate3d(2%, 3%, 0) scale(1.06);
+	}
+	100% {
+		transform: translate3d(3%, -1%, 0) scale(1.02);
+	}
+}
+
 @keyframes sheen {
 	from {
 		background-position: 200% 0;
-- 
2.54.0


From f8d431a0d74645c4743187c36d6cd29ee6e88dc6 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:28:17 +0200
Subject: [PATCH 02/26] Implement volume control with mute functionality;
 update PlayerState to manage muted state

---
 .../lib/components/player/PlayerBar.svelte    | 19 +++++++++++++++++--
 web-player/src/lib/player/player.svelte.ts    | 15 +++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 3b14356..27ff684 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -6,7 +6,9 @@
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { fmtTime } from '$lib/utils/format';
+	import Volume1 from '@lucide/svelte/icons/volume-1';
 	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import VolumeX from '@lucide/svelte/icons/volume-x';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 
 	function seek(value: number) {
@@ -48,9 +50,22 @@
 		</div>
 	</div>
 	<div class="hidden w-(--mf-player-side-w) shrink-0 items-center justify-end gap-3.5 sm:flex">
-		<Volume2 class="size-icon-sm shrink-0 text-fg-2" strokeWidth={1.8} />
+		<IconButton
+			label={player.muted ? 'Activar sonido' : 'Silenciar'}
+			tone="plain"
+			size="xs"
+			onclick={() => player.toggleMute()}
+		>
+			{#if player.muted || player.volume === 0}
+				<VolumeX class="size-icon-sm" strokeWidth={1.8} />
+			{:else if player.volume < 50}
+				<Volume1 class="size-icon-sm" strokeWidth={1.8} />
+			{:else}
+				<Volume2 class="size-icon-sm" strokeWidth={1.8} />
+			{/if}
+		</IconButton>
 		<Slider
-			value={player.volume}
+			value={player.muted ? 0 : player.volume}
 			max={100}
 			label="Volumen"
 			oninput={(value) => player.setVolume(value)}
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index e34af4c..dbf6927 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -119,6 +119,7 @@ class PlayerState {
 	playing = $state(false);
 	progress = $state(0);
 	volume = $state(browser ? Number(localStorage.getItem('player.volume') ?? 100) : 100);
+	muted = $state(browser ? localStorage.getItem('player.muted') === 'true' : false);
 	loading = $state(false);
 	recentlyPlayed = $state<PlayerTrack[]>([]);
 	playlists = $state<Playlist[]>([]);
@@ -148,6 +149,7 @@ class PlayerState {
 		const audio = new Audio();
 		audio.preload = 'auto';
 		audio.volume = this.volume / 100;
+		audio.muted = this.muted;
 		audio.addEventListener('durationchange', () => this.#syncDuration(audio.duration));
 		audio.addEventListener('loadedmetadata', () => this.#syncDuration(audio.duration));
 		audio.addEventListener('play', () => {
@@ -401,6 +403,18 @@ class PlayerState {
 		else audio.pause();
 	}
 
+	toggleMute() {
+		this.#applyMuted(!this.muted);
+		if (!this.muted && this.volume === 0) this.setVolume(50);
+	}
+
+	#applyMuted(value: boolean) {
+		this.muted = value;
+		const audio = this.#audioEl();
+		if (audio) audio.muted = value;
+		if (browser) localStorage.setItem('player.muted', String(value));
+	}
+
 	next() {
 		if (this.tracks.length === 0) return;
 		const idx = this.#index();
@@ -459,6 +473,7 @@ class PlayerState {
 
 	setVolume(value: number) {
 		this.volume = Math.min(100, Math.max(0, Math.round(value)));
+		if (this.muted && this.volume > 0) this.#applyMuted(false);
 		const audio = this.#audioEl();
 		if (audio) {
 			audio.volume = this.volume / 100;
-- 
2.54.0


From 805e521b1d175fc6c9cefaa7a2ce854b6ae73105 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:36:01 +0200
Subject: [PATCH 03/26] Animate ambient background, add mute toggle and smooth
 queue panel

---
 .../src/lib/components/player/Queue.svelte       | 13 +++++++------
 web-player/src/routes/layout.css                 | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 26964d8..384aff5 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -6,8 +6,6 @@
 	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
-	import { fly } from 'svelte/transition';
-	import { expoOut } from 'svelte/easing';
 
 	const upcoming = $derived.by(() => {
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
@@ -15,10 +13,13 @@
 	});
 </script>
 
-{#if queuePanel.open}
+<div
+	class="queue-shell max-sm:hidden"
+	data-open={queuePanel.open ? '' : undefined}
+	inert={!queuePanel.open}
+>
 	<aside
-		transition:fly={{ x: 24, duration: 200, easing: expoOut }}
-		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
+		class="flex shrink-0 flex-col border-l border-hairline px-4 pt-5"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
@@ -77,4 +78,4 @@
 			{/each}
 		</div>
 	</aside>
-{/if}
+</div>
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index caba038..90f8b79 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -191,6 +191,22 @@
 		transparent 62%
 	);
 }
+@utility queue-shell {
+	display: flex;
+	justify-content: flex-end;
+	flex-shrink: 0;
+	overflow: hidden;
+	width: 0;
+	visibility: hidden;
+	transition:
+		width var(--mf-motion-slow) ease-in-out,
+		visibility var(--mf-motion-slow);
+
+	&[data-open] {
+		width: var(--mf-queue-w);
+		visibility: visible;
+	}
+}
 @utility app-main {
 	--mf-dock-h: 0px;
 	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));
-- 
2.54.0


From 55cc803708a115bac9867dba3fef2cdffef948b9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:37:41 +0200
Subject: [PATCH 04/26] Drift accent gradients on buttons, hero, spotlight,
 active rows and modals

---
 .../src/lib/components/player/Queue.svelte    |  2 +-
 .../lib/components/ui/overlay/Modal.svelte    |  2 +-
 web-player/src/routes/+page.svelte            |  4 ++--
 web-player/src/routes/layout.css              | 24 +++++++++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 384aff5..bc89e63 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -31,7 +31,7 @@
 
 		{#if player.current.id}
 			<p class="mb-3 text-eyebrow text-fg-2">Reproduciendo</p>
-			<div class="mb-6 rounded-control surface-active p-2.5">
+			<div class="mb-6 surface-active rounded-control p-2.5">
 				<MediaIdentity
 					trackId={player.current.id}
 					title={player.current.title}
diff --git a/web-player/src/lib/components/ui/overlay/Modal.svelte b/web-player/src/lib/components/ui/overlay/Modal.svelte
index cdb0045..a9e0391 100644
--- a/web-player/src/lib/components/ui/overlay/Modal.svelte
+++ b/web-player/src/lib/components/ui/overlay/Modal.svelte
@@ -90,7 +90,7 @@
 		<div
 			bind:this={panel}
 			transition:pop={{ duration: 200 }}
-			class="glass-panel max-h-[85dvh] w-full overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
+			class="glass-panel max-h-[85dvh] w-full glow-drift overflow-y-auto {maxWidth} rounded-panel p-5 outline-none sm:p-6 {panelClass}"
 			role="dialog"
 			aria-modal="true"
 			aria-label={title}
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index ee3d1e5..dd16253 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -134,7 +134,7 @@
 </svelte:head>
 
 <Page>
-	<div class="relative overflow-hidden rounded-panel-lg hero-surface px-6 py-8 sm:px-9 sm:py-8.5">
+	<div class="relative hero-surface overflow-hidden rounded-panel-lg px-6 py-8 sm:px-9 sm:py-8.5">
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
 		>
@@ -209,7 +209,7 @@
 		{#if spotlight}
 			<section>
 				<div
-					class="grid grid-cols-1 overflow-hidden rounded-panel-lg spotlight-surface lg:grid-cols-2"
+					class="grid spotlight-surface grid-cols-1 overflow-hidden rounded-panel-lg lg:grid-cols-2"
 				>
 					<div class="flex flex-col justify-center p-8 sm:p-9">
 						<div
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 90f8b79..6dc0bc7 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -225,14 +225,24 @@
 }
 @utility surface-active {
 	background-image: var(--mf-g-active);
+	background-size: 180% 100%;
+	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility surface-active-hover {
 	background-image: var(--mf-g-hover);
+	background-size: 180% 100%;
+	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility hero-surface {
 	background-image: var(--mf-hero-bg);
+	background-size: 180% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility spotlight-surface {
+	background-size:
+		180% 100%,
+		100% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
 	background-image:
 		var(--mf-spotlight-bg),
 		linear-gradient(
@@ -242,6 +252,10 @@
 			transparent 92.5%
 		);
 }
+@utility glow-drift {
+	background-size: 180% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
+}
 @utility field-control {
 	@apply w-full rounded-control bg-surface py-3 text-sm text-fg transition placeholder:text-fg-2 focus:bg-surface-2 focus:outline-none;
 }
@@ -341,6 +355,15 @@ button:disabled {
 	}
 }
 
+@keyframes gradient-drift {
+	from {
+		background-position: 0% 50%;
+	}
+	to {
+		background-position: 100% 50%;
+	}
+}
+
 @keyframes sheen {
 	from {
 		background-position: 200% 0;
@@ -380,6 +403,7 @@ button:disabled {
 	*::before,
 	*::after {
 		animation-duration: 0.001ms !important;
+		animation-iteration-count: 1 !important;
 		animation-delay: 0ms !important;
 		transition-duration: 0.001ms !important;
 		scroll-behavior: auto !important;
-- 
2.54.0


From bf19bb31f9e0793ee9d86751ef39e8cade759d64 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:40:22 +0200
Subject: [PATCH 05/26] Make accent hue crossfade between songs last 2 to 4
 seconds

---
 web-player/CLAUDE.md                 | 2 +-
 web-player/src/routes/+layout.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 20035f7..fc1f190 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -63,7 +63,7 @@ Every animation follows one scale of three durations and one easing curve, all d
 
 Entrances and movement always use `--mf-ease` (`ease-snappy` in Tailwind, `expoOut` in Svelte transitions), which feels immediate because most of the motion happens at the start. Color transitions keep the Tailwind default curve. Overlays must feel instant: the modal backdrop uses `transition:fade={{ duration: 200 }}` and the panel uses a local `pop` transition (opacity + scale + translateY, `expoOut`, 200ms) mirroring `animate-pop`'s keyframes — both directives so the modal fades and pops on close too, not just on open, and the whole thing settles in 200ms. Staggered lists use `--i` with 40ms steps capped at ten items.
 
-The only exceptions are looping indicators (equalizer bars, pulse, spin, sheen) and the accent hue crossfade in `+layout.svelte` (600ms), which is ambient and meant to be slow. Do not add new durations or curves; if something needs a different feel, pick the closest step of the scale. `prefers-reduced-motion` disables everything globally in `layout.css`.
+The only exceptions are looping indicators (equalizer bars, pulse, spin, sheen) and the accent hue crossfade in `+layout.svelte` (a random 2 to 4 seconds per song change), which is ambient and meant to be slow. Do not add new durations or curves; if something needs a different feel, pick the closest step of the scale. `prefers-reduced-motion` disables everything globally in `layout.css`.
 
 ## Auth
 
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 169fcc7..0f15ca8 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -74,7 +74,7 @@
 		if (dh > 180) dh -= 360;
 		else if (dh < -180) dh += 360;
 		const start = performance.now();
-		const duration = 600;
+		const duration = 2000 + Math.random() * 2000;
 		const tick = (now: number) => {
 			const t = Math.min(1, (now - start) / duration);
 			const eased = 1 - Math.pow(1 - t, 3);
-- 
2.54.0


From 26bb8a50a37616e7ef82285a14683ed125be8817 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:48:39 +0200
Subject: [PATCH 06/26] Solid player bar, gradient sliders and smooth progress

---
 .../src/lib/components/player/TrackInfo.svelte      |  4 ++--
 .../src/lib/components/ui/primitives/Slider.svelte  | 13 ++++++++++++-
 web-player/src/lib/player/player.svelte.ts          | 13 +++++++++++--
 web-player/src/lib/theme/tokens.ts                  |  4 +++-
 web-player/src/routes/layout.css                    |  3 +--
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte
index b73caf7..7ab220e 100644
--- a/web-player/src/lib/components/player/TrackInfo.svelte
+++ b/web-player/src/lib/components/player/TrackInfo.svelte
@@ -39,7 +39,7 @@
 	{:else}
 		<div class="size-cover-sm shrink-0 rounded-art bg-surface md:size-cover-md"></div>
 	{/if}
-	<div class="min-w-0 flex-1">
+	<div class="min-w-0">
 		<div class="flex min-w-0 items-center gap-1.5">
 			{#if player.current.explicit}
 				<ExplicitBadge />
@@ -60,7 +60,7 @@
 			pressed={isLiked}
 			onclick={toggleLike}
 		>
-			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.7} />
+			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.25} />
 		</IconButton>
 	{/if}
 </div>
diff --git a/web-player/src/lib/components/ui/primitives/Slider.svelte b/web-player/src/lib/components/ui/primitives/Slider.svelte
index 1c65511..75eeb2b 100644
--- a/web-player/src/lib/components/ui/primitives/Slider.svelte
+++ b/web-player/src/lib/components/ui/primitives/Slider.svelte
@@ -24,7 +24,7 @@
 	oninput={handleInput}
 	aria-label={label}
 	class="mf-slider mf-slider-{variant}"
-	style="background:linear-gradient(to right, var(--mf-text-2) {percent}%, var(--mf-track) {percent}%)"
+	style="--p:{percent}%"
 />
 
 <style>
@@ -35,6 +35,17 @@
 		border-radius: 100px;
 		outline: none;
 		cursor: pointer;
+		background-image:
+			linear-gradient(
+				to right,
+				transparent var(--p),
+				color-mix(in srgb, var(--mf-text) 12%, var(--mf-bg)) var(--p)
+			),
+			var(--mf-slider-fill);
+		background-size:
+			100% 100%,
+			300% 100%;
+		animation: gradient-drift 10s linear infinite alternate;
 	}
 	.mf-slider-seek {
 		width: 100%;
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index dbf6927..67f2fd8 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -208,10 +208,19 @@ class PlayerState {
 		});
 	}
 
-	#tickProgress = () => {
+	#clockTime = 0;
+	#clockStamp = 0;
+
+	#tickProgress = (now: number) => {
 		const audio = this.#audio;
 		if (!audio) return;
-		this.progress = audio.currentTime;
+		if (audio.currentTime !== this.#clockTime) {
+			this.#clockTime = audio.currentTime;
+			this.#clockStamp = now;
+		}
+		const elapsed = Math.min(0.25, (now - this.#clockStamp) / 1000);
+		const smooth = this.#clockTime + (audio.paused ? 0 : elapsed * audio.playbackRate);
+		this.progress = Math.min(smooth, Number.isFinite(audio.duration) ? audio.duration : smooth);
 		this.#rafId = requestAnimationFrame(this.#tickProgress);
 	};
 
diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b24f645..b3fdf5b 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -45,11 +45,13 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 		'--mf-bg': light ? `oklch(0.975 0.012 ${H})` : `oklch(0.068 0.008 ${H})`,
 		'--mf-elevated': light ? `oklch(0.99 0.008 ${H})` : `oklch(0.12 0.012 ${H})`,
 		'--mf-panel-bg': light ? 'rgba(255, 255, 255, 0.28)' : 'rgba(0, 0, 0, 0.16)',
-		'--mf-bar-bg': light ? `oklch(0.99 0.01 ${H} / 0.86)` : `oklch(0.105 0.012 ${H} / 0.9)`,
 		'--mf-hairline': light ? `oklch(0.3 0.02 ${H} / 0.06)` : `oklch(0.62 0.02 ${H} / 0.05)`,
 		'--mf-ambient': light
 			? `radial-gradient(80% 70% at 12% 0%, ${glow(0.9, 0.05, 0.55)}, transparent 75%), radial-gradient(70% 60% at 88% 8%, ${glow(0.92, 0.035, 0.4)}, transparent 75%), radial-gradient(90% 70% at 50% 110%, ${glow(0.93, 0.03, 0.35)}, transparent 80%), linear-gradient(180deg, ${glow(0.96, 0.02, 0.4)}, transparent 60%)`
 			: `radial-gradient(75% 65% at 12% 0%, ${glow(0.3, 0.045, 0.5)}, transparent 75%), radial-gradient(65% 55% at 85% 5%, ${glow(0.24, 0.035, 0.35)}, transparent 75%), radial-gradient(90% 70% at 50% 105%, ${glow(0.18, 0.025, 0.3)}, transparent 80%), linear-gradient(180deg, ${glow(0.14, 0.02, 0.35)}, transparent 55%)`,
+		'--mf-slider-fill': light
+			? `linear-gradient(90deg, oklch(0.5 0.1 ${H}), oklch(0.68 0.11 ${r(h + 18, 1)}), oklch(0.5 0.1 ${H}))`
+			: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
 		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
 		'--mf-hero-bg': light
 			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 6dc0bc7..0ba001c 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -131,9 +131,8 @@
 	transition-duration: var(--default-transition-duration);
 }
 @utility glass-bar {
-	background-color: var(--mf-bar-bg);
+	background-color: var(--mf-bg);
 	border-top: 1px solid var(--mf-hairline);
-	backdrop-filter: blur(24px);
 }
 @utility grid-cards {
 	display: grid;
-- 
2.54.0


From cbbde957737e0f616c00e824ab23a5c191ed9ace Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:55:00 +0200
Subject: [PATCH 07/26] Set global icon stroke width and remove per-icon
 strokeWidth props

---
 web-player/CLAUDE.md                                      | 2 +-
 web-player/src/lib/components/layout/MobileHeader.svelte  | 2 +-
 web-player/src/lib/components/layout/Sidebar.svelte       | 6 +++---
 web-player/src/lib/components/layout/TabsBar.svelte       | 2 +-
 web-player/src/lib/components/layout/TopBar.svelte        | 4 ++--
 web-player/src/lib/components/player/PlayerBar.svelte     | 8 ++++----
 web-player/src/lib/components/player/TrackInfo.svelte     | 4 ++--
 .../src/lib/components/player/TransportControls.svelte    | 4 ++--
 .../src/lib/components/ui/forms/ImageDropzone.svelte      | 2 +-
 web-player/src/lib/components/ui/media/TrackList.svelte   | 2 +-
 web-player/src/lib/components/ui/overlay/Dialog.svelte    | 2 +-
 .../src/lib/components/ui/primitives/Checkbox.svelte      | 1 -
 .../src/lib/components/ui/primitives/EmptyState.svelte    | 2 +-
 web-player/src/routes/(app)/albums/+page.svelte           | 2 +-
 web-player/src/routes/(app)/liked/+page.svelte            | 2 +-
 web-player/src/routes/(app)/upload/+page.svelte           | 8 ++++----
 web-player/src/routes/layout.css                          | 2 +-
 17 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index fc1f190..153300d 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -55,7 +55,7 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili
 - **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth.
 - **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in `scripts/check-tokens.mjs` (the stagger variable `--i`, tile hue, menu position, progress width, `text-[clamp(…)]`, `leading-[…]` on login's display type, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `my-`/`py-[Ndvh]` for vertical centering, `transition-[filter]` on genre tiles, and `bg-[image:var(--mf-*)]`). Everything else should become a token.
 - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
-- Known and accepted gap (documented in `scripts/check-tokens.mjs`): icon `strokeWidth={n}` isn't unified yet. There are 13 different values spread across almost every component, and migrating them to `stroke-thin/regular/bold` recipes safely would require visually confirming that `lucide-svelte` actually respects `stroke-width` through CSS, so that was left out of the last pass.
+- **Icon stroke:** one global rule (`svg.lucide { stroke-width: 1.25 }` in `layout.css`) sets the stroke for every icon. Never pass `strokeWidth` to an icon, since any CSS rule overrides the SVG attribute and it would do nothing. For a different stroke on one icon, use a Tailwind `stroke-*` utility.
 
 ## Motion
 
diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index 26f9750..98c3062 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/web-player/src/lib/components/layout/MobileHeader.svelte
@@ -44,7 +44,7 @@
 		</AccountMenu>
 	{:else}
 		<IconButton href="/auth/login" reload label="Iniciar sesión" shape="round" size="md">
-			<LogIn class="size-icon-lg" strokeWidth={2} />
+			<LogIn class="size-icon-lg" />
 		</IconButton>
 	{/if}
 </header>
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index 562c24d..b1322e0 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -48,7 +48,7 @@
 					? 'bg-surface-2 text-fg'
 					: 'text-fg-2 hover:bg-hover hover:text-fg'}"
 			>
-				<link.icon class="size-icon-md shrink-0" strokeWidth={1.5} />
+				<link.icon class="size-icon-md shrink-0" />
 				<span class="flex-1 truncate">{link.label}</span>
 				{#if link.count}
 					<span class="text-xs text-fg-2 tabular-nums">{link.count}</span>
@@ -68,7 +68,7 @@
 					size="xs"
 					onclick={() => createPlaylistModal.show()}
 				>
-					<Plus class="size-icon-sm text-fg-2" strokeWidth={1.25} />
+					<Plus class="size-icon-sm text-fg-2" />
 				</IconButton>
 			{/if}
 		</div>
@@ -93,7 +93,7 @@
 					onclick={() => createPlaylistModal.show()}
 					class="flex items-center gap-2 rounded-control px-3 py-2 text-xs text-fg-2 transition-colors hover:bg-hover hover:text-fg-2"
 				>
-					<Plus class="size-3.5" strokeWidth={1.8} />
+					<Plus class="size-3.5" />
 					Crear tu primera lista
 				</button>
 			{/each}
diff --git a/web-player/src/lib/components/layout/TabsBar.svelte b/web-player/src/lib/components/layout/TabsBar.svelte
index 9bf19b0..4d79360 100644
--- a/web-player/src/lib/components/layout/TabsBar.svelte
+++ b/web-player/src/lib/components/layout/TabsBar.svelte
@@ -30,7 +30,7 @@
 				? 'text-fg'
 				: 'text-fg-2'}"
 		>
-			<link.icon class="size-4" strokeWidth={1.6} />
+			<link.icon class="size-4" />
 			<span class="text-xs font-medium">{link.label}</span>
 		</a>
 	{/each}
diff --git a/web-player/src/lib/components/layout/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte
index 897f2cb..b81907f 100644
--- a/web-player/src/lib/components/layout/TopBar.svelte
+++ b/web-player/src/lib/components/layout/TopBar.svelte
@@ -62,14 +62,14 @@
 		size="xs"
 		onclick={() => history.back()}
 	>
-		<ChevronLeft class="size-icon-sm" strokeWidth={1.9} />
+		<ChevronLeft class="size-icon-sm" />
 	</IconButton>
 
 	<form onsubmit={onSubmit} class="max-w-search min-w-0 flex-1">
 		<label
 			class="flex h-9.5 w-full items-center gap-2.5 rounded-control bg-surface-2 px-3.5 transition focus-within:bg-surface-hover"
 		>
-			<Search class="size-4 shrink-0 text-fg-2" strokeWidth={1.8} />
+			<Search class="size-4 shrink-0 text-fg-2" />
 			<input
 				type="text"
 				bind:this={searchInput}
diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 27ff684..1e0feb6 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -57,11 +57,11 @@
 			onclick={() => player.toggleMute()}
 		>
 			{#if player.muted || player.volume === 0}
-				<VolumeX class="size-icon-sm" strokeWidth={1.8} />
+				<VolumeX class="size-icon-sm" />
 			{:else if player.volume < 50}
-				<Volume1 class="size-icon-sm" strokeWidth={1.8} />
+				<Volume1 class="size-icon-sm" />
 			{:else}
-				<Volume2 class="size-icon-sm" strokeWidth={1.8} />
+				<Volume2 class="size-icon-sm" />
 			{/if}
 		</IconButton>
 		<Slider
@@ -78,7 +78,7 @@
 			pressed={queuePanel.open}
 			onclick={() => queuePanel.toggle()}
 		>
-			<ListMusic class="size-icon-sm" strokeWidth={1.8} />
+			<ListMusic class="size-icon-sm" />
 		</IconButton>
 	</div>
 </div>
diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte
index 7ab220e..4d7d336 100644
--- a/web-player/src/lib/components/player/TrackInfo.svelte
+++ b/web-player/src/lib/components/player/TrackInfo.svelte
@@ -56,11 +56,11 @@
 		<IconButton
 			label={isLiked ? 'Quitar de Me gusta' : 'Añadir a Me gusta'}
 			tone="plain"
-			size="xs"
+			size="md"
 			pressed={isLiked}
 			onclick={toggleLike}
 		>
-			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} strokeWidth={1.25} />
+			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} />
 		</IconButton>
 	{/if}
 </div>
diff --git a/web-player/src/lib/components/player/TransportControls.svelte b/web-player/src/lib/components/player/TransportControls.svelte
index d87b730..7360ec8 100644
--- a/web-player/src/lib/components/player/TransportControls.svelte
+++ b/web-player/src/lib/components/player/TransportControls.svelte
@@ -26,7 +26,7 @@
 			aria-label="Aleatorio"
 			class="transition-colors hover:text-fg {player.shuffle ? 'text-accent' : 'text-fg-2'}"
 		>
-			<Shuffle class="size-4" strokeWidth={1.8} />
+			<Shuffle class="size-4" />
 		</button>
 	{/if}
 
@@ -58,7 +58,7 @@
 			aria-label="Repetir"
 			class="transition-colors hover:text-fg {player.repeat ? 'text-accent' : 'text-fg-2'}"
 		>
-			<Repeat class="size-4" strokeWidth={1.8} />
+			<Repeat class="size-4" />
 		</button>
 	{/if}
 </div>
diff --git a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
index 3e41a63..087af50 100644
--- a/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
+++ b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
@@ -68,6 +68,6 @@
 			class="h-full w-full object-cover"
 		/>
 	{:else}
-		<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-fg-2'}" strokeWidth={1.3} />
+		<Icon class="size-icon-xl {gradient ? 'text-on-art/70' : 'text-fg-2'}" />
 	{/if}
 </label>
diff --git a/web-player/src/lib/components/ui/media/TrackList.svelte b/web-player/src/lib/components/ui/media/TrackList.svelte
index 083b80b..24d53c5 100644
--- a/web-player/src/lib/components/ui/media/TrackList.svelte
+++ b/web-player/src/lib/components/ui/media/TrackList.svelte
@@ -95,7 +95,7 @@
 		style="--mf-track-cols:{gridColumns}; --mf-track-cols-mobile:{gridColumnsMobile}"
 	>
 		{#if index}
-			<Hash size={16} strokeWidth={1.5} />
+			<Hash size={16} />
 		{/if}
 		<span>Título</span>
 		{#each columns as column (column)}
diff --git a/web-player/src/lib/components/ui/overlay/Dialog.svelte b/web-player/src/lib/components/ui/overlay/Dialog.svelte
index e6e0d72..db14898 100644
--- a/web-player/src/lib/components/ui/overlay/Dialog.svelte
+++ b/web-player/src/lib/components/ui/overlay/Dialog.svelte
@@ -24,7 +24,7 @@
 >
 	{#if tone === 'danger'}
 		<span class="mb-4 grid size-10 place-items-center rounded-full bg-danger/12 text-danger-fg">
-			<CircleAlert class="size-icon-md" strokeWidth={2} />
+			<CircleAlert class="size-icon-md" />
 		</span>
 	{/if}
 	<h2 class="text-display-3 text-fg">{title}</h2>
diff --git a/web-player/src/lib/components/ui/primitives/Checkbox.svelte b/web-player/src/lib/components/ui/primitives/Checkbox.svelte
index 46ded56..08a8df9 100644
--- a/web-player/src/lib/components/ui/primitives/Checkbox.svelte
+++ b/web-player/src/lib/components/ui/primitives/Checkbox.svelte
@@ -22,7 +22,6 @@
 		/>
 		<Check
 			class="pointer-events-none absolute size-3.5 text-ink opacity-0 transition peer-checked:opacity-100"
-			strokeWidth={3}
 		/>
 	</span>
 	<span class="cursor-pointer">{@render children()}</span>
diff --git a/web-player/src/lib/components/ui/primitives/EmptyState.svelte b/web-player/src/lib/components/ui/primitives/EmptyState.svelte
index bef42bf..eba8f0f 100644
--- a/web-player/src/lib/components/ui/primitives/EmptyState.svelte
+++ b/web-player/src/lib/components/ui/primitives/EmptyState.svelte
@@ -15,7 +15,7 @@
 
 <div class="flex flex-col items-center rounded-panel px-6 py-16 text-center {klass}">
 	{#if Icon}
-		<Icon class="size-icon-xl text-fg-2" strokeWidth={1.25} />
+		<Icon class="size-icon-xl text-fg-2" />
 	{/if}
 	{#if title}
 		<h3 class="mt-6 text-display-3 text-fg">
diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte
index aaf0870..8acc28c 100644
--- a/web-player/src/routes/(app)/albums/+page.svelte
+++ b/web-player/src/routes/(app)/albums/+page.svelte
@@ -27,7 +27,7 @@
 		{#snippet actions()}
 			{#if items.length > 0}
 				<Button onclick={() => (creating = true)}>
-					<Plus class="size-4" strokeWidth={2.5} />
+					<Plus class="size-4" />
 					Nuevo álbum
 				</Button>
 			{/if}
diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte
index 0a110db..b511784 100644
--- a/web-player/src/routes/(app)/liked/+page.svelte
+++ b/web-player/src/routes/(app)/liked/+page.svelte
@@ -39,7 +39,7 @@
 			<div
 				class="grid size-cover-hero shrink-0 place-items-center rounded-art-lg bg-[image:var(--mf-liked-grad)] sm:size-cover-hero-sm"
 			>
-				<Heart class="size-icon-xl text-on-art/90" fill="currentColor" strokeWidth={0} />
+				<Heart class="size-icon-xl text-on-art/90" fill="currentColor" />
 			</div>
 		{/snippet}
 		{#snippet actions()}
diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 28e907d..45d423a 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -130,7 +130,7 @@
 								: 'bg-accent-btn text-accent-soft'}"
 						>
 							{#if stepStates[i] === 'done'}
-								<Check class="size-3.5" strokeWidth={2.5} />
+								<Check class="size-3.5" />
 							{:else}
 								{i + 1}
 							{/if}
@@ -146,7 +146,7 @@
 	{#if status === 'done'}
 		<Surface padding="lg" class="mt-10 bg-accent-tint text-center">
 			<span class="mx-auto grid size-14 place-items-center rounded-full bg-accent-soft text-ink">
-				<Check class="size-7" strokeWidth={2.5} />
+				<Check class="size-7" />
 			</span>
 			<h2 class="mt-6 font-display text-2xl font-semibold tracking-display text-fg">¡Subida!</h2>
 			<p class="mt-3 text-sm text-fg-2">
@@ -207,9 +207,9 @@
 					aria-label="Seleccionar archivo de audio"
 				/>
 				{#if audioName === ''}
-					<Headphones class="size-9 text-fg-2 sm:size-10" strokeWidth={1.4} />
+					<Headphones class="size-9 text-fg-2 sm:size-10" />
 				{:else}
-					<Music class="size-9 text-accent-soft sm:size-10" strokeWidth={1.4} />
+					<Music class="size-9 text-accent-soft sm:size-10" />
 				{/if}
 				{#if audioName === ''}
 					<p class="mt-4 text-sm font-medium text-fg">
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 0ba001c..80cfea5 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -261,7 +261,7 @@
 
 @layer base {
 	svg.lucide {
-		stroke-width: 1.8;
+		stroke-width: 1.5;
 	}
 }
 
-- 
2.54.0


From 1b98a75c0e02604667e5c70bc9a518504c0257a9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:59:13 +0200
Subject: [PATCH 08/26] Added shadow

---
 web-player/src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index dd16253..8075739 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -138,7 +138,7 @@
 		<div
 			class="relative flex flex-col items-start gap-7 lg:flex-row lg:flex-wrap lg:items-end lg:justify-between"
 		>
-			<div class="animate-enter max-w-hero min-w-65">
+			<div class="animate-enter max-w-hero min-w-65 dark:shadow-accent">
 				<h1
 					class="font-display text-3xl leading-tight font-medium tracking-tight text-pretty text-fg sm:text-4xl"
 				>
-- 
2.54.0


From 5049b0ba9101501882557535a9dbd02f7d788b9e Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:59:24 +0200
Subject: [PATCH 09/26] Update global icon stroke width to 1.5 in layout.css

---
 web-player/CLAUDE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 153300d..3cd9c5b 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -55,7 +55,7 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili
 - **Colors:** always use `--mf-*`/`text-*`/`bg-*`/`border-*` from `theme.css`/`tokens.ts`. Never a literal hex or `rgba()` inside a `.svelte` file; those literals only belong in `theme.css`/`tokens.ts` as the source of truth.
 - **Inline `style="…"` and arbitrary `-[…]` values:** only the ones whitelisted in `scripts/check-tokens.mjs` (the stagger variable `--i`, tile hue, menu position, progress width, `text-[clamp(…)]`, `leading-[…]` on login's display type, `grid-cols-[auto_1fr]`, `max-h-[85dvh]`, `my-`/`py-[Ndvh]` for vertical centering, `transition-[filter]` on genre tiles, and `bg-[image:var(--mf-*)]`). Everything else should become a token.
 - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
-- **Icon stroke:** one global rule (`svg.lucide { stroke-width: 1.25 }` in `layout.css`) sets the stroke for every icon. Never pass `strokeWidth` to an icon, since any CSS rule overrides the SVG attribute and it would do nothing. For a different stroke on one icon, use a Tailwind `stroke-*` utility.
+- **Icon stroke:** one global rule (`svg.lucide { stroke-width: 1.5 }` in `layout.css`) sets the stroke for every icon. Never pass `strokeWidth` to an icon, since any CSS rule overrides the SVG attribute and it would do nothing. For a different stroke on one icon, use a Tailwind `stroke-*` utility.
 
 ## Motion
 
-- 
2.54.0


From d8530b920933495eb992afa63686c7315ec4b1e6 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:01:51 +0200
Subject: [PATCH 10/26] Animate menu close with shared pop transition

---
 .../src/lib/components/ui/overlay/GlassMenu.svelte |  7 ++++---
 .../src/lib/components/ui/overlay/Modal.svelte     | 12 +-----------
 web-player/src/lib/utils/transitions.ts            | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 web-player/src/lib/utils/transitions.ts

diff --git a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
index af452f3..9b7dbde 100644
--- a/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
+++ b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
+	import { pop } from '$lib/utils/transitions';
+
 	interface Props {
 		class?: string;
 		style?: string;
@@ -12,9 +14,8 @@
 </script>
 
 <div
-	class="glass-panel animate-pop rounded-panel p-1.5 {border
-		? 'border border-hairline'
-		: ''} {klass}"
+	transition:pop|global
+	class="glass-panel rounded-panel p-1.5 {border ? 'border border-hairline' : ''} {klass}"
 	{style}
 >
 	{@render children()}
diff --git a/web-player/src/lib/components/ui/overlay/Modal.svelte b/web-player/src/lib/components/ui/overlay/Modal.svelte
index a9e0391..557ec30 100644
--- a/web-player/src/lib/components/ui/overlay/Modal.svelte
+++ b/web-player/src/lib/components/ui/overlay/Modal.svelte
@@ -3,8 +3,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import IconButton from '../primitives/IconButton.svelte';
 	import { fade } from 'svelte/transition';
-	import { expoOut } from 'svelte/easing';
-	import type { TransitionConfig } from 'svelte/transition';
+	import { pop } from '$lib/utils/transitions';
 
 	interface Props {
 		open: boolean;
@@ -48,15 +47,6 @@
 		);
 	}
 
-	function pop(node: Element, { duration = 200 }: { duration?: number } = {}): TransitionConfig {
-		return {
-			duration,
-			easing: expoOut,
-			css: (t) =>
-				`opacity: ${t}; transform: scale(${0.98 + 0.02 * t}) translateY(${0.25 * (1 - t)}rem);`
-		};
-	}
-
 	function onWindowKeydown(event: KeyboardEvent) {
 		if (!open) return;
 		if (event.key === 'Escape') {
diff --git a/web-player/src/lib/utils/transitions.ts b/web-player/src/lib/utils/transitions.ts
new file mode 100644
index 0000000..de4ed78
--- /dev/null
+++ b/web-player/src/lib/utils/transitions.ts
@@ -0,0 +1,14 @@
+import { expoOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+
+export function pop(
+	node: Element,
+	{ duration = 200 }: { duration?: number } = {}
+): TransitionConfig {
+	return {
+		duration,
+		easing: expoOut,
+		css: (t) =>
+			`opacity: ${t}; transform: scale(${0.98 + 0.02 * t}) translateY(${0.25 * (1 - t)}rem);`
+	};
+}
-- 
2.54.0


From 2cb560fda435ba6c7ef990c0121f6390c6adcb4d Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:07:50 +0200
Subject: [PATCH 11/26] Keep light mode gradients visible while drifting

---
 web-player/src/lib/theme/tokens.ts |  4 ++--
 web-player/src/routes/layout.css   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b3fdf5b..8b8431b 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -54,7 +54,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
 		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
 		'--mf-hero-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.93, 0.03, 0.52)} 60%)`
 			: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
@@ -63,7 +63,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
 			: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
 		'--mf-spotlight-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.93, 0.03, 0.47)} 55%)`
 			: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
 		'--mf-cover-grad': light
 			? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 80cfea5..00c8f0b 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -224,22 +224,22 @@
 }
 @utility surface-active {
 	background-image: var(--mf-g-active);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility surface-active-hover {
 	background-image: var(--mf-g-hover);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility hero-surface {
 	background-image: var(--mf-hero-bg);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility spotlight-surface {
 	background-size:
-		180% 100%,
+		125% 100%,
 		100% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 	background-image:
@@ -252,7 +252,7 @@
 		);
 }
 @utility glow-drift {
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility field-control {
-- 
2.54.0


From 2fe26b15ddaee2d5bcaeb3f62a425277049df4d8 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:10:21 +0200
Subject: [PATCH 12/26] Allow reordering upcoming tracks in the queue by drag
 and drop

---
 .../src/lib/components/player/Queue.svelte    | 74 +++++++++++++++----
 web-player/src/lib/player/player.svelte.ts    | 10 +++
 2 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index bc89e63..d84f6a9 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -11,6 +11,28 @@
 		const idx = player.tracks.findIndex((t) => t.id === player.currentId);
 		return idx === -1 ? player.tracks : player.tracks.slice(idx + 1);
 	});
+
+	let dragFrom = $state<number | null>(null);
+	let dropAt = $state<number | null>(null);
+
+	function onDragOver(event: DragEvent, index: number) {
+		if (dragFrom === null) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		dropAt = event.clientY < rect.top + rect.height / 2 ? index : index + 1;
+	}
+
+	function onDrop(event: DragEvent) {
+		event.preventDefault();
+		if (dragFrom !== null && dropAt !== null) player.moveQueueItem(dragFrom, dropAt);
+		endDrag();
+	}
+
+	function endDrag() {
+		dragFrom = null;
+		dropAt = null;
+	}
 </script>
 
 <div
@@ -58,21 +80,45 @@
 		<div class="flex flex-1 flex-col gap-px overflow-y-auto">
 			{#each upcoming as track, i (track.id)}
 				{@const index = player.tracks.length - upcoming.length + i}
-				<ListRow
-					onclick={() => player.playQueueIndex(index)}
-					size="sm"
-					title={track.title}
-					subtitle={track.artist || '—'}
-					subtitleHref={track.ownerUserId}
-					trackId={track.id}
-					class="p-2"
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					draggable="true"
+					ondragstart={(event) => {
+						dragFrom = index;
+						if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+					}}
+					ondragover={(event) => onDragOver(event, index)}
+					ondrop={onDrop}
+					ondragend={endDrag}
+					class="relative transition-opacity {dragFrom === index ? 'opacity-40' : ''}"
 				>
-					{#snippet trailing()}
-						{#if track.duration}
-							<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(track.duration)}</span>
-						{/if}
-					{/snippet}
-				</ListRow>
+					{#if dropAt === index && dragFrom !== null}
+						<div
+							class="pointer-events-none absolute inset-x-2 top-0 h-0.5 rounded-full bg-accent"
+						></div>
+					{:else if dropAt === index + 1 && dropAt === player.tracks.length && dragFrom !== null}
+						<div
+							class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent"
+						></div>
+					{/if}
+					<ListRow
+						onclick={() => player.playQueueIndex(index)}
+						size="sm"
+						title={track.title}
+						subtitle={track.artist || '—'}
+						subtitleHref={track.ownerUserId}
+						trackId={track.id}
+						class="p-2"
+					>
+						{#snippet trailing()}
+							{#if track.duration}
+								<span class="shrink-0 text-xs text-fg-2 tabular-nums"
+									>{fmtTime(track.duration)}</span
+								>
+							{/if}
+						{/snippet}
+					</ListRow>
+				</div>
 			{:else}
 				<p class="px-2 py-6 text-center text-xs text-fg-2">No hay más canciones en la cola.</p>
 			{/each}
diff --git a/web-player/src/lib/player/player.svelte.ts b/web-player/src/lib/player/player.svelte.ts
index 67f2fd8..c43c7e4 100644
--- a/web-player/src/lib/player/player.svelte.ts
+++ b/web-player/src/lib/player/player.svelte.ts
@@ -456,6 +456,16 @@ class PlayerState {
 		this.#loadCurrent();
 	}
 
+	moveQueueItem(from: number, insertAt: number) {
+		if (from < 0 || from >= this.tracks.length) return;
+		const target = insertAt > from ? insertAt - 1 : insertAt;
+		if (target === from) return;
+		const tracks = [...this.tracks];
+		const [item] = tracks.splice(from, 1);
+		tracks.splice(target, 0, item);
+		this.tracks = tracks;
+	}
+
 	clearUpcoming() {
 		this.tracks = this.currentId === null ? [] : [this.current];
 	}
-- 
2.54.0


From 89820c13775fd3a26ce8839be63acf009e4b0e8b Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:10:46 +0200
Subject: [PATCH 13/26] Fix gradient background syntax in Artwork component

---
 web-player/src/lib/components/ui/media/Artwork.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/media/Artwork.svelte b/web-player/src/lib/components/ui/media/Artwork.svelte
index 65c27f2..1eee6cf 100644
--- a/web-player/src/lib/components/ui/media/Artwork.svelte
+++ b/web-player/src/lib/components/ui/media/Artwork.svelte
@@ -125,7 +125,7 @@
 			</svg>
 		</div>
 	{:else if fallback === 'gradient'}
-		<div class="h-full w-full bg-[image:var(--mf-cover-grad)]"></div>
+		<div class="h-full w-full bg-(image:--mf-cover-grad)"></div>
 	{:else}
 		<div class="h-full w-full bg-surface"></div>
 	{/if}
-- 
2.54.0


From 74cf534be54ccd8653663f14b597164745cfc24f Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:18:21 +0200
Subject: [PATCH 14/26] Animate queue drag and drop reordering

---
 .../src/lib/components/player/Queue.svelte    | 24 +++++++++++++++----
 web-player/src/routes/layout.css              | 18 ++++++++++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index d84f6a9..ea997d5 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -5,6 +5,8 @@
 	import ListRow from '$lib/components/ui/media/ListRow.svelte';
 	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
+	import { flip } from 'svelte/animate';
+	import { expoOut } from 'svelte/easing';
 	import X from '@lucide/svelte/icons/x';
 
 	const upcoming = $derived.by(() => {
@@ -77,7 +79,12 @@
 			{/if}
 		</div>
 
-		<div class="flex flex-1 flex-col gap-px overflow-y-auto">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="flex flex-1 flex-col gap-px overflow-y-auto"
+			ondragover={(event) => dragFrom !== null && event.preventDefault()}
+			ondrop={onDrop}
+		>
 			{#each upcoming as track, i (track.id)}
 				{@const index = player.tracks.length - upcoming.length + i}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -90,15 +97,24 @@
 					ondragover={(event) => onDragOver(event, index)}
 					ondrop={onDrop}
 					ondragend={endDrag}
-					class="relative transition-opacity {dragFrom === index ? 'opacity-40' : ''}"
+					class="queue-row"
+					data-dragging={dragFrom === index ? '' : undefined}
+					data-drop={dragFrom === null
+						? undefined
+						: dropAt === index
+							? 'before'
+							: dropAt === index + 1 && index === player.tracks.length - 1
+								? 'after'
+								: undefined}
+					animate:flip={{ duration: 300, easing: expoOut }}
 				>
 					{#if dropAt === index && dragFrom !== null}
 						<div
-							class="pointer-events-none absolute inset-x-2 top-0 h-0.5 rounded-full bg-accent"
+							class="pointer-events-none absolute inset-x-2 -top-7 h-0.5 rounded-full bg-accent"
 						></div>
 					{:else if dropAt === index + 1 && dropAt === player.tracks.length && dragFrom !== null}
 						<div
-							class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent"
+							class="pointer-events-none absolute inset-x-2 -bottom-7 h-0.5 rounded-full bg-accent"
 						></div>
 					{/if}
 					<ListRow
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 00c8f0b..2c1d861 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -206,6 +206,24 @@
 		visibility: visible;
 	}
 }
+@utility queue-row {
+	position: relative;
+	transition:
+		margin var(--mf-motion-base) var(--mf-ease),
+		opacity var(--mf-motion-base) var(--mf-ease),
+		scale var(--mf-motion-base) var(--mf-ease);
+
+	&[data-dragging] {
+		opacity: 0.4;
+		scale: 0.97;
+	}
+	&[data-drop='before'] {
+		margin-top: --spacing(14);
+	}
+	&[data-drop='after'] {
+		margin-bottom: --spacing(14);
+	}
+}
 @utility app-main {
 	--mf-dock-h: 0px;
 	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));
-- 
2.54.0


From 339fcb56ad791a5ebcbcf9c70ee9b8300ea8d4a9 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:24:57 +0200
Subject: [PATCH 15/26] Semibold

---
 .../src/routes/(app)/upload/+page.svelte      | 97 ++++++++++---------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 45d423a..625e593 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -224,53 +224,62 @@
 				{/if}
 			</div>
 
-			<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8">
-				<Field label="Portada">
-					{#key coverResetToken}
-						<ImageDropzone
-							name="cover"
-							icon={ImageIcon}
-							gradient
-							size="hero"
-							onselect={() => (hasCover = true)}
-						/>
-					{/key}
-				</Field>
+			<Surface padding="md">
+				<div class="grid items-start gap-6 md:grid-cols-[auto_1fr] md:gap-10">
+					<Field label="Portada" class="items-center md:items-start">
+						{#key coverResetToken}
+							<ImageDropzone
+								name="cover"
+								icon={ImageIcon}
+								gradient
+								onselect={() => (hasCover = true)}
+							/>
+						{/key}
+						{#snippet hint()}
+							<p>{hasCover ? 'Portada lista' : 'Haz clic para elegir'}</p>
+						{/snippet}
+					</Field>
 
-				<Field label="Título" for="title">
-					<Input
-						id="title"
-						name="title"
-						bind:value={title}
-						maxlength={MAX_TITLE}
-						placeholder="Nombre de la canción"
-					/>
-					{#snippet hint()}
-						<p>Se usa como nombre público de la pista en el catálogo.</p>
-						<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
-					{/snippet}
-				</Field>
-			</div>
+					<div class="flex min-w-0 flex-col gap-7">
+						<Field label="Título" for="title">
+							<Input
+								id="title"
+								name="title"
+								bind:value={title}
+								maxlength={MAX_TITLE}
+								placeholder="Nombre de la canción"
+							/>
+							{#snippet hint()}
+								<p>Se usa como nombre público de la pista en el catálogo.</p>
+								<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
+							{/snippet}
+						</Field>
 
-			<Field label="Géneros">
-				<div class="flex flex-wrap gap-2">
-					{#each TRACK_GENRES as genre (genre.value)}
-						<Chip
-							selected={tags.includes(genre.value)}
-							disabled={tagBlocked(genre.value)}
-							onclick={() => toggleTag(genre.value)}
-						>
-							{genre.label}
-						</Chip>
-					{/each}
+						<Field label="Géneros">
+							<div class="mb-2 flex flex-wrap gap-2">
+								{#each TRACK_GENRES as genre (genre.value)}
+									<Chip
+										selected={tags.includes(genre.value)}
+										disabled={tagBlocked(genre.value)}
+										onclick={() => toggleTag(genre.value)}
+									>
+										{genre.label}
+									</Chip>
+								{/each}
+							</div>
+							{#each tags as tag (tag)}
+								<input type="hidden" name="tags" value={tag} />
+							{/each}
+							{#snippet hint()}
+								<p>
+									Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.
+								</p>
+								<span class="shrink-0 tabular-nums">{tags.length} elegidos</span>
+							{/snippet}
+						</Field>
+					</div>
 				</div>
-				{#each tags as tag (tag)}
-					<input type="hidden" name="tags" value={tag} />
-				{/each}
-				{#snippet hint()}
-					<p>Elige al menos uno. Algunos géneros no se pueden combinar, como Metal con Ambient.</p>
-				{/snippet}
-			</Field>
+			</Surface>
 
 			<Checkbox bind:checked={acceptedTerms}>
 				Acepto los
-- 
2.54.0


From 84408b842b42bbe4067959d49b206324f3fe0792 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:25:04 +0200
Subject: [PATCH 16/26] Semibold

---
 web-player/src/lib/components/ui/media/ExplicitBadge.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
index 356e61d..99e7728 100644
--- a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
+++ b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <span
-	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-2 text-xs leading-4 font-bold text-bg {klass}"
+	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-2 text-xs leading-4 font-semibold text-bg {klass}"
 	title="Contenido explícito"
 	aria-label="Contenido explícito">E</span
 >
-- 
2.54.0


From 72cbc18a4837f477149da440463e86e5509d8195 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:34:56 +0200
Subject: [PATCH 17/26] Add follow button next to each user in search results

Extract FollowButton and shared follow/unfollow actions, reused by the user profile page.
---
 .../components/ui/media/FollowButton.svelte   | 44 +++++++++++++++++++
 web-player/src/lib/server/followActions.ts    | 28 ++++++++++++
 .../src/routes/(app)/explore/+page.server.ts  | 27 +++++++++++-
 .../src/routes/(app)/explore/+page.svelte     |  8 +++-
 .../routes/(app)/user/[id]/+page.server.ts    | 27 ++----------
 .../src/routes/(app)/user/[id]/+page.svelte   | 35 ++-------------
 6 files changed, 110 insertions(+), 59 deletions(-)
 create mode 100644 web-player/src/lib/components/ui/media/FollowButton.svelte
 create mode 100644 web-player/src/lib/server/followActions.ts

diff --git a/web-player/src/lib/components/ui/media/FollowButton.svelte b/web-player/src/lib/components/ui/media/FollowButton.svelte
new file mode 100644
index 0000000..e477343
--- /dev/null
+++ b/web-player/src/lib/components/ui/media/FollowButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { enhance } from '$app/forms';
+	import Button from '../primitives/Button.svelte';
+
+	interface Props {
+		following: boolean;
+		userId?: string;
+		invalidateAll?: boolean;
+		class?: string;
+	}
+
+	let { following: initial, userId, invalidateAll = false, class: klass = '' }: Props = $props();
+
+	let following = $state(untrack(() => initial));
+	let submitting = $state(false);
+</script>
+
+<form
+	method="POST"
+	action={following ? '?/unfollow' : '?/follow'}
+	class={klass}
+	use:enhance={() => {
+		submitting = true;
+		return async ({ result, update }) => {
+			if (result.type === 'success' && typeof result.data?.following === 'boolean')
+				following = result.data.following;
+			await update({ reset: false, invalidateAll });
+			submitting = false;
+		};
+	}}
+>
+	{#if userId}
+		<input type="hidden" name="userId" value={userId} />
+	{/if}
+	<Button
+		type="submit"
+		size="sm"
+		variant={following ? 'secondary' : 'primary'}
+		disabled={submitting}
+	>
+		{following ? 'Dejar de seguir' : 'Seguir'}
+	</Button>
+</form>
diff --git a/web-player/src/lib/server/followActions.ts b/web-player/src/lib/server/followActions.ts
new file mode 100644
index 0000000..9a7e8df
--- /dev/null
+++ b/web-player/src/lib/server/followActions.ts
@@ -0,0 +1,28 @@
+import { fail, type RequestEvent } from '@sveltejs/kit';
+import { createApiClient, requireAccessTokenAction } from '$lib/server/api';
+
+async function setFollowing({ request, params, locals, fetch }: RequestEvent, follow: boolean) {
+	const accessToken = requireAccessTokenAction(locals);
+	if (typeof accessToken !== 'string') return accessToken;
+
+	const form = await request.formData();
+	const id = String(form.get('userId') ?? '') || String(params.id ?? '');
+	if (!id) return fail(400, { message: 'Falta el usuario.' });
+
+	const api = createApiClient({ fetch, accessToken });
+	const options = { params: { path: { id } } };
+	const { error } = follow
+		? await api.POST('/users/{id}/follow', options)
+		: await api.DELETE('/users/{id}/follow', options);
+
+	if (error) {
+		return fail(502, {
+			message: follow ? 'No se pudo seguir al usuario.' : 'No se pudo dejar de seguir al usuario.'
+		});
+	}
+
+	return { following: follow, userId: id };
+}
+
+export const followUserAction = (event: RequestEvent) => setFollowing(event, true);
+export const unfollowUserAction = (event: RequestEvent) => setFollowing(event, false);
diff --git a/web-player/src/routes/(app)/explore/+page.server.ts b/web-player/src/routes/(app)/explore/+page.server.ts
index 51f7f37..227e316 100644
--- a/web-player/src/routes/(app)/explore/+page.server.ts
+++ b/web-player/src/routes/(app)/explore/+page.server.ts
@@ -1,6 +1,7 @@
 import type { PageServerLoad, Actions } from './$types';
 import { createApiClient, unwrapOrError } from '$lib/server/api';
 import { addAlbumToPlaylistAction, addTrackAction } from '$lib/server/playlistActions';
+import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
 import {
 	EXPLORE_ALBUMS_PAGE_SIZE,
 	EXPLORE_PAGE_SIZE as PAGE_SIZE,
@@ -45,16 +46,38 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 
 	const tracks = unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.');
 
+	const userItems = usersRes?.data?.items ?? [];
+	const followedIds = user
+		? await Promise.all(
+				userItems
+					.filter((u) => u.id !== user.sub)
+					.map((u) =>
+						api
+							.GET('/users/{id}/is-following', { params: { path: { id: u.id } } })
+							.then((res) => (res.data ? u.id : null))
+							.catch(() => null)
+					)
+			)
+		: [];
+	const followed = new Set(followedIds);
+
 	return {
 		query,
 		tracks,
 		albums: (albumsRes?.data?.items ?? []).map((item) => item.album),
-		users: usersRes?.data?.items ?? [],
+		users: userItems.map((u) => ({
+			...u,
+			isSelf: user?.sub === u.id,
+			isFollowing: followed.has(u.id)
+		})),
+		canFollow: !!user,
 		playlists: playlistsRes?.data?.items ?? []
 	};
 };
 
 export const actions: Actions = {
 	addTrack: addTrackAction,
-	addAlbumToPlaylist: addAlbumToPlaylistAction
+	addAlbumToPlaylist: addAlbumToPlaylistAction,
+	follow: followUserAction,
+	unfollow: unfollowUserAction
 };
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 4d90242..28de335 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -10,6 +10,7 @@
 	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
 	import Artwork from '$lib/components/ui/media/Artwork.svelte';
 	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import FollowButton from '$lib/components/ui/media/FollowButton.svelte';
 	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
 	import EqBars from '$lib/components/ui/media/EqBars.svelte';
 	import ListRow from '$lib/components/ui/media/ListRow.svelte';
@@ -400,12 +401,15 @@
 					<SectionHeading title="Usuarios" count={counts.Usuarios} />
 					<ul class="flex flex-col gap-1">
 						{#each capped(sfilter, users) as u (u.id)}
-							<li>
-								<ListRow title={u.name} href="/user/{u.id}" size="lg">
+							<li class="flex items-center gap-3">
+								<ListRow title={u.name} href="/user/{u.id}" size="lg" class="min-w-0 flex-1">
 									{#snippet art()}
 										<Avatar name={u.name} src={u.profilePictureUrl} size="md" />
 									{/snippet}
 								</ListRow>
+								{#if data.canFollow && !u.isSelf}
+									<FollowButton following={u.isFollowing} userId={u.id} class="shrink-0" />
+								{/if}
 							</li>
 						{/each}
 					</ul>
diff --git a/web-player/src/routes/(app)/user/[id]/+page.server.ts b/web-player/src/routes/(app)/user/[id]/+page.server.ts
index eff5b2c..a936bef 100644
--- a/web-player/src/routes/(app)/user/[id]/+page.server.ts
+++ b/web-player/src/routes/(app)/user/[id]/+page.server.ts
@@ -1,10 +1,6 @@
 import type { PageServerLoad, Actions } from './$types';
-import {
-	createApiClient,
-	optionalUser,
-	requireAccessTokenAction,
-	unwrapOrError
-} from '$lib/server/api';
+import { createApiClient, optionalUser, unwrapOrError } from '$lib/server/api';
+import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
 
 const PROFILE_PLAYLISTS_PAGE_SIZE = 50;
 
@@ -55,21 +51,6 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch, parent
 };
 
 export const actions: Actions = {
-	follow: async ({ params, locals, fetch }) => {
-		const accessToken = requireAccessTokenAction(locals);
-		if (typeof accessToken !== 'string') return accessToken;
-
-		const api = createApiClient({ fetch, accessToken });
-		await api.POST('/users/{id}/follow', { params: { path: { id: params.id } } });
-		return { following: true };
-	},
-
-	unfollow: async ({ params, locals, fetch }) => {
-		const accessToken = requireAccessTokenAction(locals);
-		if (typeof accessToken !== 'string') return accessToken;
-
-		const api = createApiClient({ fetch, accessToken });
-		await api.DELETE('/users/{id}/follow', { params: { path: { id: params.id } } });
-		return { following: false };
-	}
+	follow: followUserAction,
+	unfollow: unfollowUserAction
 };
diff --git a/web-player/src/routes/(app)/user/[id]/+page.svelte b/web-player/src/routes/(app)/user/[id]/+page.svelte
index 1c57924..5de8dd2 100644
--- a/web-player/src/routes/(app)/user/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/user/[id]/+page.svelte
@@ -1,29 +1,19 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
-	import { enhance } from '$app/forms';
 	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';
 	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
-	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import FollowButton from '$lib/components/ui/media/FollowButton.svelte';
 	import Avatar from '$lib/components/ui/media/Avatar.svelte';
 	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
 	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { plural, playlistMeta } from '$lib/utils/format';
 
-	let { data, form } = $props();
+	let { data } = $props();
 
 	const profile = $derived(data.profile);
 	const playlists = $derived(data.playlists);
 	const canFollow = $derived(!data.isOwnProfile && !data.isAnonymous);
-
-	let following = $state(untrack(() => data.isFollowing));
-	let submitting = $state(false);
-
-	$effect(() => {
-		if (form && 'following' in form && typeof form.following === 'boolean')
-			following = form.following;
-	});
 </script>
 
 <svelte:head>
@@ -32,26 +22,7 @@
 </svelte:head>
 
 {#snippet followAction()}
-	<form
-		method="POST"
-		action={following ? '?/unfollow' : '?/follow'}
-		use:enhance={() => {
-			submitting = true;
-			return async ({ update }) => {
-				await update();
-				submitting = false;
-			};
-		}}
-	>
-		<Button
-			type="submit"
-			size="sm"
-			variant={following ? 'secondary' : 'primary'}
-			disabled={submitting}
-		>
-			{following ? 'Dejar de seguir' : 'Seguir'}
-		</Button>
-	</form>
+	<FollowButton following={data.isFollowing} invalidateAll />
 {/snippet}
 
 <Page>
-- 
2.54.0


From cc7afe43260b06239ab5d89227fb7052669c05f7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:41:57 +0200
Subject: [PATCH 18/26] Add explicit flag to tracks and mark it on upload

---
 .../Musify.Application/Tracks/CreateTrack.cs  |    4 +-
 .../Responses/TrackApplicationResponse.cs     |    6 +-
 backend/Core/Musify.Domain/Entities/Track.cs  |    3 +
 ...60923203135_AddTrackIsExplicit.Designer.cs | 1167 +++++++++++++++++
 .../20260923203135_AddTrackIsExplicit.cs      |   29 +
 .../Migrations/DatabaseModelSnapshot.cs       |    3 +
 .../Tracks/CreateTrackRequest.cs              |    3 +-
 .../Musify.Api/Endpoints/TrackEndpoints.cs    |    2 +-
 .../Shared/TrackApplicationResponseTests.cs   |   11 +
 .../TestSupport/TestEntities.cs               |    4 +-
 .../Tracks/CreateTrackCommandHandlerTests.cs  |   20 +
 web-player/src/lib/api/schema.d.ts            |  526 ++++----
 .../src/lib/components/player/Queue.svelte    |    2 +
 .../components/ui/media/ExplicitBadge.svelte  |    2 +-
 .../src/routes/(app)/upload/+page.server.ts   |    4 +-
 .../src/routes/(app)/upload/+page.svelte      |   10 +
 web-player/src/routes/+page.svelte            |    2 +
 17 files changed, 1531 insertions(+), 267 deletions(-)
 create mode 100644 backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.Designer.cs
 create mode 100644 backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.cs

diff --git a/backend/Core/Musify.Application/Tracks/CreateTrack.cs b/backend/Core/Musify.Application/Tracks/CreateTrack.cs
index 1b4ff52..4e37204 100644
--- a/backend/Core/Musify.Application/Tracks/CreateTrack.cs
+++ b/backend/Core/Musify.Application/Tracks/CreateTrack.cs
@@ -18,7 +18,8 @@ namespace Musify.Application.Tracks
         string Title,
         Guid PictureIntentId,
         Guid AudioIntentId,
-        IReadOnlyCollection<Genre> Tags)
+        IReadOnlyCollection<Genre> Tags,
+        bool IsExplicit = false)
         : ICommand<ErrorOr<TrackApplicationResponse>>;
 
     public class CreateTrackCommandHandler(
@@ -83,6 +84,7 @@ namespace Musify.Application.Tracks
                 NormalizedTitle = request.Title.ToUpperInvariant(),
                 OwnerUserId = user.Id,
                 Owner = user,
+                IsExplicit = request.IsExplicit,
                 Pictures = new TrackPictures
                 {
                     OriginalName = pictureIntent.ObjectName,
diff --git a/backend/Core/Musify.Application/Tracks/Responses/TrackApplicationResponse.cs b/backend/Core/Musify.Application/Tracks/Responses/TrackApplicationResponse.cs
index 02f87de..2748ded 100644
--- a/backend/Core/Musify.Application/Tracks/Responses/TrackApplicationResponse.cs
+++ b/backend/Core/Musify.Application/Tracks/Responses/TrackApplicationResponse.cs
@@ -15,7 +15,8 @@ namespace Musify.Application.Tracks.Responses
         DateTime CreatedAt,
         DateTime UpdatedAt,
         [property: JsonConverter(typeof(LongAsStringConverter))] long OwnerUserId,
-        IReadOnlyCollection<Genre> Tags)
+        IReadOnlyCollection<Genre> Tags,
+        bool IsExplicit)
     {
         public static TrackApplicationResponse FromEntity(Track track, int listensCount) =>
             new(
@@ -28,6 +29,7 @@ namespace Musify.Application.Tracks.Responses
                 track.CreatedAt,
                 track.UpdatedAt,
                 track.OwnerUserId,
-                track.Tags.Select(tag => tag.Tag).ToList());
+                track.Tags.Select(tag => tag.Tag).ToList(),
+                track.IsExplicit);
     }
 }
diff --git a/backend/Core/Musify.Domain/Entities/Track.cs b/backend/Core/Musify.Domain/Entities/Track.cs
index 439970e..e892b48 100644
--- a/backend/Core/Musify.Domain/Entities/Track.cs
+++ b/backend/Core/Musify.Domain/Entities/Track.cs
@@ -31,6 +31,9 @@ namespace Musify.Domain.Entities
         [Required]
         public LifeCycleStatus LifeCycleStatus { get; set; } = LifeCycleStatus.Active;
 
+        [Required]
+        public bool IsExplicit { get; set; }
+
         [Required]
         public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
 
diff --git a/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.Designer.cs b/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.Designer.cs
new file mode 100644
index 0000000..8cea96c
--- /dev/null
+++ b/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.Designer.cs
@@ -0,0 +1,1167 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Musify.Domain.ValueObjects;
+using Musify.Infrastructure.Persistence;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Musify.Infrastructure.Persistence.Migrations
+{
+    [DbContext(typeof(Database))]
+    [Migration("20260923203135_AddTrackIsExplicit")]
+    partial class AddTrackIsExplicit
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.12")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.HasPostgresEnum(modelBuilder, "genre", new[] { "ambient", "blues", "classical", "country", "drum_and_bass", "dubstep", "electronic", "folk", "funk", "hip_hop", "house", "indie", "jazz", "k_pop", "latin", "lofi", "metal", "pop", "punk", "reggae", "reggaeton", "rn_b", "rock", "soul", "techno", "trance" });
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("MassTransit.EntityFrameworkCoreIntegration.InboxState", b =>
+                {
+                    b.Property<long>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("bigint");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<long>("Id"));
+
+                    b.Property<DateTime?>("Consumed")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<Guid>("ConsumerId")
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime?>("Delivered")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<DateTime?>("ExpirationTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long?>("LastSequenceNumber")
+                        .HasColumnType("bigint");
+
+                    b.Property<Guid>("LockId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("MessageId")
+                        .HasColumnType("uuid");
+
+                    b.Property<int>("ReceiveCount")
+                        .HasColumnType("integer");
+
+                    b.Property<DateTime>("Received")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<byte[]>("RowVersion")
+                        .IsConcurrencyToken()
+                        .ValueGeneratedOnAddOrUpdate()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Delivered");
+
+                    b.ToTable("InboxState");
+                });
+
+            modelBuilder.Entity("MassTransit.EntityFrameworkCoreIntegration.OutboxMessage", b =>
+                {
+                    b.Property<long>("SequenceNumber")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("bigint");
+
+                    NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<long>("SequenceNumber"));
+
+                    b.Property<string>("Body")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<Guid?>("ConversationId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid?>("CorrelationId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("DestinationAddress")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<DateTime?>("EnqueueTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<DateTime?>("ExpirationTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("FaultAddress")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("Headers")
+                        .HasColumnType("text");
+
+                    b.Property<Guid?>("InboxConsumerId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid?>("InboxMessageId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid?>("InitiatorId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("MessageId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("MessageType")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<Guid?>("OutboxId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Properties")
+                        .HasColumnType("text");
+
+                    b.Property<Guid?>("RequestId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("ResponseAddress")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<DateTime>("SentTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("SourceAddress")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.HasKey("SequenceNumber");
+
+                    b.HasIndex("EnqueueTime");
+
+                    b.HasIndex("ExpirationTime");
+
+                    b.HasIndex("OutboxId", "SequenceNumber")
+                        .IsUnique();
+
+                    b.HasIndex("InboxMessageId", "InboxConsumerId", "SequenceNumber")
+                        .IsUnique();
+
+                    b.ToTable("OutboxMessage");
+                });
+
+            modelBuilder.Entity("MassTransit.EntityFrameworkCoreIntegration.OutboxState", b =>
+                {
+                    b.Property<Guid>("OutboxId")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("Created")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<DateTime?>("Delivered")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long?>("LastSequenceNumber")
+                        .HasColumnType("bigint");
+
+                    b.Property<Guid>("LockId")
+                        .HasColumnType("uuid");
+
+                    b.Property<byte[]>("RowVersion")
+                        .IsConcurrencyToken()
+                        .ValueGeneratedOnAddOrUpdate()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("OutboxId");
+
+                    b.HasIndex("Created");
+
+                    b.ToTable("OutboxState");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Album", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Description")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<int>("LifeCycleStatus")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("NormalizedTitle")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<long>("OwnerUserId")
+                        .HasColumnType("bigint");
+
+                    b.Property<int?>("ReleaseYear")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("OwnerUserId");
+
+                    b.ToTable("Albums");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.AlbumHasTrack", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("AddedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<Guid>("AlbumId")
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.Property<int>("TrackNumber")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId");
+
+                    b.HasIndex("AlbumId", "TrackId")
+                        .IsUnique();
+
+                    b.ToTable("AlbumHasTrack");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.ListeningHistory", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("ListenedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("ListeningHistory");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Mix", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<int>("Position")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Subtitle")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId", "Position");
+
+                    b.ToTable("Mixes");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.MixItem", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("MixId")
+                        .HasColumnType("uuid");
+
+                    b.Property<int>("Position")
+                        .HasColumnType("integer");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId");
+
+                    b.HasIndex("MixId", "Position");
+
+                    b.ToTable("MixItems");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.PlayList", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Description")
+                        .HasMaxLength(256)
+                        .HasColumnType("character varying(256)");
+
+                    b.Property<int>("LifeCycleStatus")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(50)
+                        .HasColumnType("character varying(50)");
+
+                    b.Property<string>("NormalizedName")
+                        .IsRequired()
+                        .HasMaxLength(50)
+                        .HasColumnType("character varying(50)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.Property<int>("Visibility")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasDefaultValue(0);
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("PlayLists");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.PlayListHasTrack", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("AddedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<Guid>("PlayListId")
+                        .HasColumnType("uuid");
+
+                    b.Property<int>("Position")
+                        .HasColumnType("integer");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("PlayListId");
+
+                    b.HasIndex("TrackId");
+
+                    b.ToTable("PlayListHasTrack");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Track", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<double>("DurationSeconds")
+                        .HasColumnType("double precision");
+
+                    b.Property<bool>("IsExplicit")
+                        .HasColumnType("boolean");
+
+                    b.Property<int>("LifeCycleStatus")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("NormalizedTitle")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<long>("OwnerUserId")
+                        .HasColumnType("bigint");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("OwnerUserId");
+
+                    b.ToTable("Tracks");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.TrackLike", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId");
+
+                    b.HasIndex("UserId", "TrackId")
+                        .IsUnique();
+
+                    b.ToTable("TrackLikes");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.TrackTag", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<Genre>("Tag")
+                        .HasColumnType("genre");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId", "Tag")
+                        .IsUnique();
+
+                    b.ToTable("TrackTags");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Upload", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Bucket")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedTime")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Key")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<int>("State")
+                        .HasColumnType("integer");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Upload");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UploadIntent", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Bucket")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long?>("ExpectedSizeBytes")
+                        .HasColumnType("bigint");
+
+                    b.Property<DateTime>("ExpiresAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("Key")
+                        .IsRequired()
+                        .HasMaxLength(512)
+                        .HasColumnType("character varying(512)");
+
+                    b.Property<string>("ObjectName")
+                        .IsRequired()
+                        .HasMaxLength(128)
+                        .HasColumnType("character varying(128)");
+
+                    b.Property<int>("Purpose")
+                        .HasColumnType("integer");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("integer");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("UploadIntents");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.User", b =>
+                {
+                    b.Property<long>("Id")
+                        .HasColumnType("bigint");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("FirstName")
+                        .HasMaxLength(48)
+                        .HasColumnType("character varying(48)");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(48)
+                        .HasColumnType("character varying(48)");
+
+                    b.Property<string>("NormalizedName")
+                        .IsRequired()
+                        .HasMaxLength(48)
+                        .HasColumnType("character varying(48)");
+
+                    b.Property<string>("ProfilePictureUrl")
+                        .HasMaxLength(2048)
+                        .HasColumnType("character varying(2048)");
+
+                    b.Property<string>("SecondName")
+                        .HasMaxLength(48)
+                        .HasColumnType("character varying(48)");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UserFollow", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<long>("FollowedId")
+                        .HasColumnType("bigint");
+
+                    b.Property<long>("FollowerId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("FollowedId");
+
+                    b.HasIndex("FollowerId", "FollowedId")
+                        .IsUnique();
+
+                    b.ToTable("UserFollows");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UserHasTrack", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.Property<Guid>("TrackId")
+                        .HasColumnType("uuid");
+
+                    b.Property<long>("UserId")
+                        .HasColumnType("bigint");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("TrackId");
+
+                    b.HasIndex("UserId");
+
+                    b.ToTable("UserHasTrack");
+                });
+
+            modelBuilder.Entity("Musify.Infrastructure.MassTransit.Sagas.AlbumProcessingState", b =>
+                {
+                    b.Property<Guid>("CorrelationId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Bucket")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("CurrentState")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<string>("PictureKey")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("CorrelationId");
+
+                    b.ToTable("AlbumProcessingState");
+                });
+
+            modelBuilder.Entity("Musify.Infrastructure.MassTransit.Sagas.PlayListProcessingState", b =>
+                {
+                    b.Property<Guid>("CorrelationId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("Bucket")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("CurrentState")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<string>("PictureKey")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("CorrelationId");
+
+                    b.ToTable("PlayListProcessingState");
+                });
+
+            modelBuilder.Entity("Musify.Infrastructure.MassTransit.Sagas.TrackProcessingState", b =>
+                {
+                    b.Property<Guid>("CorrelationId")
+                        .HasColumnType("uuid");
+
+                    b.Property<string>("AudioKey")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("AudioProcessed")
+                        .HasColumnType("boolean");
+
+                    b.Property<string>("Bucket")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<string>("CurrentState")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<string>("PictureKey")
+                        .HasColumnType("text");
+
+                    b.Property<bool>("PictureProcessed")
+                        .HasColumnType("boolean");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("CorrelationId");
+
+                    b.ToTable("TrackProcessingState");
+                });
+
+            modelBuilder.Entity("MassTransit.EntityFrameworkCoreIntegration.OutboxMessage", b =>
+                {
+                    b.HasOne("MassTransit.EntityFrameworkCoreIntegration.OutboxState", null)
+                        .WithMany()
+                        .HasForeignKey("OutboxId");
+
+                    b.HasOne("MassTransit.EntityFrameworkCoreIntegration.InboxState", null)
+                        .WithMany()
+                        .HasForeignKey("InboxMessageId", "InboxConsumerId")
+                        .HasPrincipalKey("MessageId", "ConsumerId");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Album", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "Owner")
+                        .WithMany()
+                        .HasForeignKey("OwnerUserId")
+                        .OnDelete(DeleteBehavior.Restrict)
+                        .IsRequired();
+
+                    b.OwnsOne("Musify.Domain.ValueObjects.AlbumPictures", "Pictures", b1 =>
+                        {
+                            b1.Property<Guid>("AlbumId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<string>("LargeName")
+                                .IsRequired()
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("LargePictureName");
+
+                            b1.Property<string>("MediumName")
+                                .IsRequired()
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("MediumPictureName");
+
+                            b1.Property<string>("OriginalName")
+                                .IsRequired()
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("OriginalPictureName");
+
+                            b1.Property<string>("SmallName")
+                                .IsRequired()
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("SmallPictureName");
+
+                            b1.HasKey("AlbumId");
+
+                            b1.ToTable("Albums");
+
+                            b1.WithOwner()
+                                .HasForeignKey("AlbumId");
+                        });
+
+                    b.Navigation("Owner");
+
+                    b.Navigation("Pictures");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.AlbumHasTrack", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Album", "Album")
+                        .WithMany("AlbumTracks")
+                        .HasForeignKey("AlbumId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany("AlbumTracks")
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Album");
+
+                    b.Navigation("Track");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.ListeningHistory", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany("ListeningHistories")
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany("ListeningHistories")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Track");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Mix", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.MixItem", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Mix", "Mix")
+                        .WithMany("Items")
+                        .HasForeignKey("MixId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany()
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Mix");
+
+                    b.Navigation("Track");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.PlayList", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany("PlayLists")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.OwnsOne("Musify.Domain.ValueObjects.PlayListPictures", "Pictures", b1 =>
+                        {
+                            b1.Property<Guid>("PlayListId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<string>("LargeName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("LargePictureName");
+
+                            b1.Property<string>("MediumName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("MediumPictureName");
+
+                            b1.Property<string>("OriginalName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("OriginalPictureName");
+
+                            b1.Property<string>("SmallName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("SmallPictureName");
+
+                            b1.HasKey("PlayListId");
+
+                            b1.ToTable("PlayLists");
+
+                            b1.WithOwner()
+                                .HasForeignKey("PlayListId");
+                        });
+
+                    b.Navigation("Pictures");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.PlayListHasTrack", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.PlayList", "PlayList")
+                        .WithMany("PlayListTracks")
+                        .HasForeignKey("PlayListId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany("PlayListTracks")
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("PlayList");
+
+                    b.Navigation("Track");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Track", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "Owner")
+                        .WithMany()
+                        .HasForeignKey("OwnerUserId")
+                        .OnDelete(DeleteBehavior.Restrict)
+                        .IsRequired();
+
+                    b.OwnsOne("Musify.Domain.ValueObjects.TrackAudio", "Audio", b1 =>
+                        {
+                            b1.Property<Guid>("TrackId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<bool>("DownloadRequested")
+                                .HasColumnType("boolean")
+                                .HasColumnName("DownloadRequested");
+
+                            b1.Property<string>("FolderName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("AudioFolderName");
+
+                            b1.Property<DateTime?>("LastRetryAt")
+                                .HasColumnType("timestamp with time zone")
+                                .HasColumnName("LastRetryAt");
+
+                            b1.Property<string>("OriginalName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("OriginalAudioName");
+
+                            b1.Property<int>("RetryCount")
+                                .HasColumnType("integer")
+                                .HasColumnName("RetryCount");
+
+                            b1.Property<int>("TranscodeStatus")
+                                .HasColumnType("integer")
+                                .HasColumnName("AudioTranscodeProcessingStatus");
+
+                            b1.HasKey("TrackId");
+
+                            b1.ToTable("Tracks");
+
+                            b1.WithOwner()
+                                .HasForeignKey("TrackId");
+                        });
+
+                    b.OwnsOne("Musify.Domain.ValueObjects.TrackPictures", "Pictures", b1 =>
+                        {
+                            b1.Property<Guid>("TrackId")
+                                .HasColumnType("uuid");
+
+                            b1.Property<string>("LargeName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("LargePictureName");
+
+                            b1.Property<string>("MediumName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("MediumPictureName");
+
+                            b1.Property<string>("OriginalName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("OriginalPictureName");
+
+                            b1.Property<int>("ProcessingStatus")
+                                .HasColumnType("integer")
+                                .HasColumnName("PicturesProcessingStatus");
+
+                            b1.Property<string>("SmallName")
+                                .HasMaxLength(64)
+                                .HasColumnType("character varying(64)")
+                                .HasColumnName("SmallPictureName");
+
+                            b1.HasKey("TrackId");
+
+                            b1.ToTable("Tracks");
+
+                            b1.WithOwner()
+                                .HasForeignKey("TrackId");
+                        });
+
+                    b.Navigation("Audio")
+                        .IsRequired();
+
+                    b.Navigation("Owner");
+
+                    b.Navigation("Pictures")
+                        .IsRequired();
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.TrackLike", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany()
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Track");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.TrackTag", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany("Tags")
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Track");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UploadIntent", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany()
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UserFollow", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.User", "Followed")
+                        .WithMany()
+                        .HasForeignKey("FollowedId")
+                        .OnDelete(DeleteBehavior.Restrict)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.User", "Follower")
+                        .WithMany()
+                        .HasForeignKey("FollowerId")
+                        .OnDelete(DeleteBehavior.Restrict)
+                        .IsRequired();
+
+                    b.Navigation("Followed");
+
+                    b.Navigation("Follower");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.UserHasTrack", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Track", "Track")
+                        .WithMany("UserTracks")
+                        .HasForeignKey("TrackId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.HasOne("Musify.Domain.Entities.User", "User")
+                        .WithMany("UserTracks")
+                        .HasForeignKey("UserId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Track");
+
+                    b.Navigation("User");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Album", b =>
+                {
+                    b.Navigation("AlbumTracks");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Mix", b =>
+                {
+                    b.Navigation("Items");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.PlayList", b =>
+                {
+                    b.Navigation("PlayListTracks");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.Track", b =>
+                {
+                    b.Navigation("AlbumTracks");
+
+                    b.Navigation("ListeningHistories");
+
+                    b.Navigation("PlayListTracks");
+
+                    b.Navigation("Tags");
+
+                    b.Navigation("UserTracks");
+                });
+
+            modelBuilder.Entity("Musify.Domain.Entities.User", b =>
+                {
+                    b.Navigation("ListeningHistories");
+
+                    b.Navigation("PlayLists");
+
+                    b.Navigation("UserTracks");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.cs b/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.cs
new file mode 100644
index 0000000..3cbf32a
--- /dev/null
+++ b/backend/Core/Musify.Infrastructure/Persistence/Migrations/20260923203135_AddTrackIsExplicit.cs
@@ -0,0 +1,29 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Musify.Infrastructure.Persistence.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddTrackIsExplicit : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<bool>(
+                name: "IsExplicit",
+                table: "Tracks",
+                type: "boolean",
+                nullable: false,
+                defaultValue: false);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "IsExplicit",
+                table: "Tracks");
+        }
+    }
+}
diff --git a/backend/Core/Musify.Infrastructure/Persistence/Migrations/DatabaseModelSnapshot.cs b/backend/Core/Musify.Infrastructure/Persistence/Migrations/DatabaseModelSnapshot.cs
index 91f3231..7d4af2d 100644
--- a/backend/Core/Musify.Infrastructure/Persistence/Migrations/DatabaseModelSnapshot.cs
+++ b/backend/Core/Musify.Infrastructure/Persistence/Migrations/DatabaseModelSnapshot.cs
@@ -427,6 +427,9 @@ namespace Musify.Infrastructure.Persistence.Migrations
                     b.Property<double>("DurationSeconds")
                         .HasColumnType("double precision");
 
+                    b.Property<bool>("IsExplicit")
+                        .HasColumnType("boolean");
+
                     b.Property<int>("LifeCycleStatus")
                         .HasColumnType("integer");
 
diff --git a/backend/Hosts/Musify.Api/DataTransferObjects/Tracks/CreateTrackRequest.cs b/backend/Hosts/Musify.Api/DataTransferObjects/Tracks/CreateTrackRequest.cs
index 6623318..5e95895 100644
--- a/backend/Hosts/Musify.Api/DataTransferObjects/Tracks/CreateTrackRequest.cs
+++ b/backend/Hosts/Musify.Api/DataTransferObjects/Tracks/CreateTrackRequest.cs
@@ -6,4 +6,5 @@ public record CreateTrackRequest(
     string Title,
     Guid PictureIntentId,
     Guid AudioIntentId,
-    IReadOnlyCollection<Genre> Tags);
+    IReadOnlyCollection<Genre> Tags,
+    bool IsExplicit = false);
diff --git a/backend/Hosts/Musify.Api/Endpoints/TrackEndpoints.cs b/backend/Hosts/Musify.Api/Endpoints/TrackEndpoints.cs
index b285245..e032de9 100644
--- a/backend/Hosts/Musify.Api/Endpoints/TrackEndpoints.cs
+++ b/backend/Hosts/Musify.Api/Endpoints/TrackEndpoints.cs
@@ -147,7 +147,7 @@ public static class TrackEndpoints
         CancellationToken cancellationToken)
     {
         var result = await mediator.Send(
-            new CreateTrackCommand(currentUser.RequiredId, request.Title, request.PictureIntentId, request.AudioIntentId, request.Tags),
+            new CreateTrackCommand(currentUser.RequiredId, request.Title, request.PictureIntentId, request.AudioIntentId, request.Tags, request.IsExplicit),
             cancellationToken);
 
         return result.ToCreatedResult(track => $"/tracks/{track.Id}");
diff --git a/backend/Tests/Musify.Application.Tests/Shared/TrackApplicationResponseTests.cs b/backend/Tests/Musify.Application.Tests/Shared/TrackApplicationResponseTests.cs
index a708efa..dae34fd 100644
--- a/backend/Tests/Musify.Application.Tests/Shared/TrackApplicationResponseTests.cs
+++ b/backend/Tests/Musify.Application.Tests/Shared/TrackApplicationResponseTests.cs
@@ -17,6 +17,17 @@ namespace Musify.Application.Tests.Shared
             Assert.Equal("The Owner", response.Artist);
             Assert.Equal(owner.Id, response.OwnerUserId);
             Assert.Equal(3, response.ListensCount);
+            Assert.False(response.IsExplicit);
+        }
+
+        [Fact]
+        public void FromEntity_CopiesExplicitFlag()
+        {
+            var track = TestEntities.Track(TestEntities.User(), isExplicit: true);
+
+            var response = TrackApplicationResponse.FromEntity(track, listensCount: 0);
+
+            Assert.True(response.IsExplicit);
         }
     }
 }
diff --git a/backend/Tests/Musify.Application.Tests/TestSupport/TestEntities.cs b/backend/Tests/Musify.Application.Tests/TestSupport/TestEntities.cs
index 3dce496..e0850b8 100644
--- a/backend/Tests/Musify.Application.Tests/TestSupport/TestEntities.cs
+++ b/backend/Tests/Musify.Application.Tests/TestSupport/TestEntities.cs
@@ -56,7 +56,8 @@ namespace Musify.Application.Tests.TestSupport
             TrackPictures? pictures = null,
             TrackAudio? audio = null,
             LifeCycleStatus lifeCycleStatus = LifeCycleStatus.Active,
-            IEnumerable<Genre>? tags = null)
+            IEnumerable<Genre>? tags = null,
+            bool isExplicit = false)
         {
             var track = new Track
             {
@@ -64,6 +65,7 @@ namespace Musify.Application.Tests.TestSupport
                 NormalizedTitle = title.ToUpperInvariant(),
                 DurationSeconds = durationSeconds,
                 LifeCycleStatus = lifeCycleStatus,
+                IsExplicit = isExplicit,
                 OwnerUserId = owner.Id,
                 Owner = owner,
                 Pictures = pictures ?? ProcessedPictures(),
diff --git a/backend/Tests/Musify.Application.Tests/Tracks/CreateTrackCommandHandlerTests.cs b/backend/Tests/Musify.Application.Tests/Tracks/CreateTrackCommandHandlerTests.cs
index de7ebbb..6b9a610 100644
--- a/backend/Tests/Musify.Application.Tests/Tracks/CreateTrackCommandHandlerTests.cs
+++ b/backend/Tests/Musify.Application.Tests/Tracks/CreateTrackCommandHandlerTests.cs
@@ -58,6 +58,26 @@ namespace Musify.Application.Tests.Tracks
             Assert.Equal(ProcessingStatus.Pending, stored.Audio.TranscodeStatus);
         }
 
+        [Theory]
+        [InlineData(true)]
+        [InlineData(false)]
+        public async Task Handle_StoresExplicitFlag(bool isExplicit)
+        {
+            var user = TestEntities.User();
+            var (picture, audio) = SeedIntents(user.Id);
+            await SeedAsync(user, picture, audio);
+
+            var command = new CreateTrackCommand(user.Id, "My Song", picture.Id, audio.Id, [Genre.Pop], isExplicit);
+
+            var result = await CreateHandler().Handle(command, TestContext.Current.CancellationToken);
+
+            Assert.False(result.IsError);
+            Assert.Equal(isExplicit, result.Value.IsExplicit);
+            var stored = await Database.Tracks.FindAsync([result.Value.Id], TestContext.Current.CancellationToken);
+            Assert.NotNull(stored);
+            Assert.Equal(isExplicit, stored.IsExplicit);
+        }
+
         [Fact]
         public async Task Handle_NoTags_ReturnsValidationError()
         {
diff --git a/web-player/src/lib/api/schema.d.ts b/web-player/src/lib/api/schema.d.ts
index 0854e6d..4af5481 100644
--- a/web-player/src/lib/api/schema.d.ts
+++ b/web-player/src/lib/api/schema.d.ts
@@ -1,4 +1,7 @@
-
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
 
 export interface paths {
     "/albums": {
@@ -8,10 +11,10 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Albums, Optionally Filtered By Title. */
         get: operations["GetAlbums"];
         put?: never;
-        
+        /** Create A New Album. */
         post: operations["CreateAlbum"];
         delete?: never;
         options?: never;
@@ -26,7 +29,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get An Album By Id. */
         get: operations["GetAlbumById"];
         put?: never;
         post?: never;
@@ -43,7 +46,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Albums For A User. */
         get: operations["GetAlbumsByUserId"];
         put?: never;
         post?: never;
@@ -60,7 +63,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get The Albums The Current User Listened To Most Recently. */
         get: operations["GetRecentlyListenedAlbums"];
         put?: never;
         post?: never;
@@ -77,7 +80,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get The Tracks Of An Album Ordered By Track Number. */
         get: operations["GetAlbumTracks"];
         put?: never;
         post?: never;
@@ -94,7 +97,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get An Album Cover Image. */
         get: operations["GetAlbumCover"];
         put?: never;
         post?: never;
@@ -113,7 +116,7 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Request A Pre-Signed URL To Upload An Album Picture. */
         post: operations["RequestAlbumPictureUpload"];
         delete?: never;
         options?: never;
@@ -129,10 +132,10 @@ export interface paths {
             cookie?: never;
         };
         get?: never;
-        
+        /** Update An Album. */
         put: operations["UpdateAlbum"];
         post?: never;
-        
+        /** Delete An Album. */
         delete: operations["DeleteAlbum"];
         options?: never;
         head?: never;
@@ -148,9 +151,9 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Add One Of Your Uploaded Tracks To An Album. */
         post: operations["AddTrackToAlbum"];
-        
+        /** Remove A Track From An Album. */
         delete: operations["RemoveTrackFromAlbum"];
         options?: never;
         head?: never;
@@ -164,7 +167,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get The Public Playback Configuration (Whether Anonymous Listening Is Allowed). Works Anonymously. */
         get: operations["GetPlaybackPublicConfig"];
         put?: never;
         post?: never;
@@ -181,7 +184,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get The Current User'S Liked Tracks. */
         get: operations["GetLikedTracks"];
         put?: never;
         post?: never;
@@ -200,7 +203,7 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Like Or Unlike A Track By Id. */
         post: operations["ToggleTrackLike"];
         delete?: never;
         options?: never;
@@ -215,7 +218,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get The Server-Generated Mixes Of The Current User. */
         get: operations["GetMixes"];
         put?: never;
         post?: never;
@@ -232,7 +235,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A Mix With All Of Its Songs. */
         get: operations["GetMixById"];
         put?: never;
         post?: never;
@@ -249,10 +252,10 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated PlayLists. */
         get: operations["GetPlayLists"];
         put?: never;
-        
+        /** Create A New PlayList. */
         post: operations["CreatePlayList"];
         delete?: never;
         options?: never;
@@ -267,7 +270,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A PlayList By Id. */
         get: operations["GetPlayListById"];
         put?: never;
         post?: never;
@@ -284,7 +287,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated PlayLists For A User. */
         get: operations["GetPlayListsByUserId"];
         put?: never;
         post?: never;
@@ -301,10 +304,10 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Tracks Of A PlayList. */
         get: operations["GetPlayListTracks"];
         put?: never;
-        
+        /** Add One Of Your Tracks To A PlayList. */
         post: operations["AddPlayListTrack"];
         delete?: never;
         options?: never;
@@ -319,7 +322,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A PlayList Cover Image. */
         get: operations["GetPlayListCover"];
         put?: never;
         post?: never;
@@ -337,10 +340,10 @@ export interface paths {
             cookie?: never;
         };
         get?: never;
-        
+        /** Update An Existing PlayList. */
         put: operations["UpdatePlayList"];
         post?: never;
-        
+        /** Delete A PlayList. */
         delete: operations["DeletePlayList"];
         options?: never;
         head?: never;
@@ -356,7 +359,7 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Request A Pre-Signed URL To Upload A PlayList Picture. */
         post: operations["RequestPlayListPictureUpload"];
         delete?: never;
         options?: never;
@@ -374,7 +377,7 @@ export interface paths {
         get?: never;
         put?: never;
         post?: never;
-        
+        /** Remove A Track From A PlayList. */
         delete: operations["RemoveTrackFromPlayList"];
         options?: never;
         head?: never;
@@ -388,10 +391,10 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Tracks, Optionally Filtered By Name. */
         get: operations["GetTracks"];
         put?: never;
-        
+        /** Create A New Track. */
         post: operations["CreateTrack"];
         delete?: never;
         options?: never;
@@ -406,7 +409,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A Track By Id. */
         get: operations["GetTrackById"];
         put?: never;
         post?: never;
@@ -423,7 +426,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A Track Cover Image. */
         get: operations["GetTrackCover"];
         put?: never;
         post?: never;
@@ -440,7 +443,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A Streaming Manifest URL And Ticket For A Track. Works Anonymously When The Playback Configuration Allows It. */
         get: operations["GetTrackStream"];
         put?: never;
         post?: never;
@@ -457,7 +460,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Tracks For A User. */
         get: operations["GetTracksByUserId"];
         put?: never;
         post?: never;
@@ -477,7 +480,7 @@ export interface paths {
         get?: never;
         put?: never;
         post?: never;
-        
+        /** Delete A Track. */
         delete: operations["DeleteTrack"];
         options?: never;
         head?: never;
@@ -493,7 +496,7 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Request Pre-Signed URLs To Upload Track Picture And Audio. */
         post: operations["RequestTrackUploadUrls"];
         delete?: never;
         options?: never;
@@ -508,10 +511,10 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get Paginated Users. */
         get: operations["GetUsers"];
         put?: never;
-        
+        /** Create A New User. */
         post: operations["CreateUser"];
         delete?: never;
         options?: never;
@@ -526,7 +529,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A User By Id. */
         get: operations["GetUserById"];
         put?: never;
         post?: never;
@@ -543,7 +546,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A User'S Listening History. */
         get: operations["GetListeningHistory"];
         put?: never;
         post?: never;
@@ -553,23 +556,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/users/{id}/last-listened-track": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-
-        get: operations["GetLastTrackListenedByUserId"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/users/{id}/listening-stats": {
         parameters: {
             query?: never;
@@ -577,7 +563,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-
+        /** Get A User'S Listening Stats For The Current Week And Streak. */
         get: operations["GetListeningStats"];
         put?: never;
         post?: never;
@@ -587,6 +573,23 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/users/{id}/last-listened-track": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get The Last Track A User Listened To. */
+        get: operations["GetLastTrackListenedByUserId"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/users/{id}/profile": {
         parameters: {
             query?: never;
@@ -594,7 +597,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Get A User'S Public Profile, Including Follower Counts. */
         get: operations["GetUserProfile"];
         put?: never;
         post?: never;
@@ -611,7 +614,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
-        
+        /** Check Whether The Current User Follows Another User. */
         get: operations["IsFollowingUser"];
         put?: never;
         post?: never;
@@ -630,9 +633,9 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        
+        /** Follow A User. */
         post: operations["FollowUser"];
-        
+        /** Unfollow A User. */
         delete: operations["UnfollowUser"];
         options?: never;
         head?: never;
@@ -644,36 +647,36 @@ export type webhooks = Record<string, never>;
 export interface components {
     schemas: {
         AddPlayListTrackRequest: {
-            
+            /** Format: uuid */
             trackId: string;
         };
         AlbumApplicationResponse: {
-            
+            /** Format: uuid */
             id: string;
             title: string;
             description: null | string;
-            
+            /** Format: int32 */
             releaseYear: null | number | string;
             ownerUserId: string;
-            
+            /** Format: int32 */
             trackCount: number | string;
             smallImageKeyName: null | string;
             mediumImageKeyName: null | string;
             largeImageKeyName: null | string;
-            
+            /** Format: date-time */
             createdAt: string;
-            
+            /** Format: date-time */
             updatedAt: string;
             coverTrackIds: string[];
         };
         AlbumPictureUploadResponse: {
-            
+            /** Format: uuid */
             intentId: string;
             bucket: string;
             key: string;
             pictureName: string;
             contentType: string;
-            
+            /** Format: int32 */
             expiresInSeconds: number | string;
             uploadUrl: string;
         };
@@ -682,13 +685,13 @@ export interface components {
         };
         AlbumsSearchResponse: {
             items: components["schemas"]["AlbumSearchItemResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasPreviousPage: boolean;
             hasNextPage: boolean;
@@ -696,38 +699,41 @@ export interface components {
         CreateAlbumRequest: {
             title: string;
             description: null | string;
-            
+            /** Format: int32 */
             releaseYear: null | number | string;
-            
+            /** Format: uuid */
             pictureIntentId: string;
         };
         CreatePlayListRequest: {
             name: string;
             description: null | string;
-            
+            /** Format: uuid */
             pictureIntentId: null | string;
             visibility?: components["schemas"]["PlaylistVisibility"];
         };
         CreateTrackRequest: {
             title: string;
-            
+            /** Format: uuid */
             pictureIntentId: string;
-            
+            /** Format: uuid */
             audioIntentId: string;
             tags: components["schemas"]["Genre"][];
+            /** @default false */
+            isExplicit: boolean;
         };
-        Genre: "Pop" | "Rock" | "HipHop" | "RnB" | "Jazz" | "Blues" | "Classical" | "Electronic" | "House" | "Techno" | "Trance" | "Dubstep" | "DrumAndBass" | "Metal" | "Punk" | "Reggae" | "Reggaeton" | "Country" | "Folk" | "Indie" | "KPop" | "Latin" | "Soul" | "Funk" | "Ambient" | "Lofi";
         CreateUserRequest: {
-            
+            /** Format: int64 */
             id: number | string;
             name: string;
             firstName: null | string;
             secondName: null | string;
         };
+        /** @enum {unknown} */
+        Genre: "Pop" | "Rock" | "HipHop" | "RnB" | "Jazz" | "Blues" | "Classical" | "Electronic" | "House" | "Techno" | "Trance" | "Dubstep" | "DrumAndBass" | "Metal" | "Punk" | "Reggae" | "Reggaeton" | "Country" | "Folk" | "Indie" | "KPop" | "Latin" | "Soul" | "Funk" | "Ambient" | "Lofi";
         HttpValidationProblemDetails: {
             type?: null | string;
             title?: null | string;
-            
+            /** Format: int32 */
             status?: null | number | string;
             detail?: null | string;
             instance?: null | string;
@@ -736,91 +742,91 @@ export interface components {
             };
         };
         ListeningStatsResponse: {
-            
+            /** Format: int32 */
             tracksThisWeek: number | string;
-            
+            /** Format: int32 */
             secondsThisWeek: number | string;
-            
+            /** Format: int32 */
             streakDays: number | string;
         };
         MixApplicationResponse: {
-            
+            /** Format: uuid */
             id: string;
             title: string;
             subtitle: null | string;
-            
+            /** Format: int32 */
             itemCount: number | string;
             items: components["schemas"]["MixItemApplicationResponse"][];
         };
         MixItemApplicationResponse: {
-            
+            /** Format: uuid */
             trackId: string;
             title: string;
             artist: null | string;
-            
+            /** Format: double */
             durationSeconds: number | string;
-            
+            /** Format: int32 */
             listensCount: number | string;
         };
         PaginatedResponseOfAlbumApplicationResponse: {
             items: components["schemas"]["AlbumApplicationResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
         PaginatedResponseOfPlayListApplicationResponse: {
             items: components["schemas"]["PlayListApplicationResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
         PaginatedResponseOfTrackApplicationResponse: {
             items: components["schemas"]["TrackApplicationResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
         PaginatedResponseOfUserApplicationResponse: {
             items: components["schemas"]["UserApplicationResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
         PlaybackPublicConfigResponse: {
             allowAnonymousListening: boolean;
-            
+            /** Format: int32 */
             anonymousFragmentSeconds: number | string;
         };
         PlayListApplicationResponse: {
-            
+            /** Format: uuid */
             id: string;
             name: string;
             description: null | string;
@@ -828,37 +834,37 @@ export interface components {
             mediumImageKeyName: null | string;
             largeImageKeyName: null | string;
             visibility: components["schemas"]["PlaylistVisibility"];
-            
+            /** Format: date-time */
             createdAt: string;
-            
+            /** Format: date-time */
             updatedAt: string;
             coverTrackIds: string[];
         };
         PlayListPictureUploadResponse: {
-            
+            /** Format: uuid */
             intentId: string;
             bucket: string;
             key: string;
             pictureName: string;
             contentType: string;
-            
+            /** Format: int32 */
             expiresInSeconds: number | string;
             uploadUrl: string;
         };
-        
+        /** @enum {unknown} */
         PlaylistVisibility: "Private" | "Public";
-        
+        /** @enum {unknown} */
         ProcessingStatus: "Pending" | "Processing" | "Completed" | "Failed";
         RequestAlbumPictureUploadRequest: {
             fileType: string;
             contentType: string;
-            
+            /** Format: int64 */
             expectedSizeBytes?: null | number | string;
         };
         RequestPlayListPictureUploadRequest: {
             fileType: string;
             contentType: string;
-            
+            /** Format: int64 */
             expectedSizeBytes?: null | number | string;
         };
         RequestTrackUploadUrlsRequest: {
@@ -866,43 +872,45 @@ export interface components {
             pictureContentType: string;
             audioFileType: string;
             audioContentType: string;
-            
+            /** Format: int64 */
             expectedPictureSizeBytes?: null | number | string;
-            
+            /** Format: int64 */
             expectedAudioSizeBytes?: null | number | string;
         };
         ToggleLikeRequest: {
-            
+            /** Format: uuid */
             trackId: string;
         };
         TrackApplicationResponse: {
-            
+            /** Format: uuid */
             id: string;
             title: string;
             artist: null | string;
             audioStatus: components["schemas"]["ProcessingStatus"];
-            
+            /** Format: double */
             duration: number | string;
-            
+            /** Format: int32 */
             listensCount: number | string;
-            
+            /** Format: date-time */
             createdAt: string;
-            
+            /** Format: date-time */
             updatedAt: string;
             ownerUserId: string;
+            tags: components["schemas"]["Genre"][];
+            isExplicit: boolean;
         };
         TrackSearchItemResponse: {
             track: components["schemas"]["TrackApplicationResponse"];
         };
         TracksSearchResponse: {
             items: components["schemas"]["TrackSearchItemResponse"][];
-            
+            /** Format: int32 */
             pageNumber: number | string;
-            
+            /** Format: int32 */
             pageSize: number | string;
-            
+            /** Format: int32 */
             pageCount: number | string;
-            
+            /** Format: int32 */
             totalItemCount: number | string;
             hasPreviousPage: boolean;
             hasNextPage: boolean;
@@ -910,13 +918,13 @@ export interface components {
         TrackStreamResponse: {
             manifestUrl: string;
             ticket: string;
-            
+            /** Format: int32 */
             expiresInSeconds: number | string;
         };
         TrackUploadUrlsResponse: {
-            
+            /** Format: uuid */
             pictureIntentId: string;
-            
+            /** Format: uuid */
             audioIntentId: string;
             bucket: string;
             pictureKey: string;
@@ -927,21 +935,21 @@ export interface components {
             audioName: string;
             audioContentType: string;
             audioUploadUrl: string;
-            
+            /** Format: int32 */
             expiresInSeconds: number | string;
         };
         UpdateAlbumRequest: {
             newTitle: string;
             newDescription: null | string;
-            
+            /** Format: int32 */
             newReleaseYear: null | number | string;
-            
+            /** Format: uuid */
             newPictureIntentId: null | string;
         };
         UpdatePlayListRequest: {
             newName: null | string;
             newDescription: null | string;
-            
+            /** Format: uuid */
             newPictureIntentId: null | string;
             newVisibility?: null | components["schemas"]["PlaylistVisibility"];
         };
@@ -951,9 +959,9 @@ export interface components {
             firstName: null | string;
             secondName: null | string;
             profilePictureUrl: null | string;
-            
+            /** Format: date-time */
             createdAt: string;
-            
+            /** Format: date-time */
             updatedAt: string;
         };
         UserProfileResponse: {
@@ -962,11 +970,11 @@ export interface components {
             firstName: null | string;
             secondName: null | string;
             profilePictureUrl: null | string;
-            
+            /** Format: date-time */
             createdAt: string;
-            
+            /** Format: int32 */
             followersCount: number | string;
-            
+            /** Format: int32 */
             followingCount: number | string;
         };
     };
@@ -991,7 +999,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1015,7 +1023,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description Created */
             201: {
                 headers: {
                     [name: string]: unknown;
@@ -1024,7 +1032,7 @@ export interface operations {
                     "application/json": components["schemas"]["AlbumApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1033,14 +1041,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1060,7 +1068,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1069,7 +1077,7 @@ export interface operations {
                     "application/json": components["schemas"]["AlbumApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1092,7 +1100,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1101,7 +1109,7 @@ export interface operations {
                     "application/json": components["schemas"]["PaginatedResponseOfAlbumApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1121,7 +1129,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1130,7 +1138,7 @@ export interface operations {
                     "application/json": components["schemas"]["AlbumApplicationResponse"][];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
@@ -1153,7 +1161,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1162,7 +1170,7 @@ export interface operations {
                     "application/json": components["schemas"]["PaginatedResponseOfTrackApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1184,14 +1192,14 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1213,7 +1221,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1222,7 +1230,7 @@ export interface operations {
                     "application/json": components["schemas"]["AlbumPictureUploadResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1231,14 +1239,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1262,7 +1270,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1271,7 +1279,7 @@ export interface operations {
                     "application/json": components["schemas"]["AlbumApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1280,14 +1288,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1307,21 +1315,21 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1342,28 +1350,28 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -1384,21 +1392,21 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1416,7 +1424,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1439,7 +1447,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1448,7 +1456,7 @@ export interface operations {
                     "application/json": components["schemas"]["PaginatedResponseOfTrackApplicationResponse"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
@@ -1470,7 +1478,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1479,14 +1487,14 @@ export interface operations {
                     "application/json": boolean;
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1504,7 +1512,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1513,7 +1521,7 @@ export interface operations {
                     "application/json": components["schemas"]["MixApplicationResponse"][];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
@@ -1533,7 +1541,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1542,14 +1550,14 @@ export interface operations {
                     "application/json": components["schemas"]["MixApplicationResponse"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1570,7 +1578,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1594,7 +1602,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description Created */
             201: {
                 headers: {
                     [name: string]: unknown;
@@ -1603,7 +1611,7 @@ export interface operations {
                     "application/json": components["schemas"]["PlayListApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1612,14 +1620,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1639,7 +1647,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1648,7 +1656,7 @@ export interface operations {
                     "application/json": components["schemas"]["PlayListApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1673,7 +1681,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1698,7 +1706,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1707,7 +1715,7 @@ export interface operations {
                     "application/json": components["schemas"]["PaginatedResponseOfTrackApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1731,7 +1739,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description Created */
             201: {
                 headers: {
                     [name: string]: unknown;
@@ -1740,21 +1748,21 @@ export interface operations {
                     "application/json": components["schemas"]["TrackApplicationResponse"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -1776,14 +1784,14 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1807,7 +1815,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1816,7 +1824,7 @@ export interface operations {
                     "application/json": components["schemas"]["PlayListApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1825,14 +1833,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1852,21 +1860,21 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1888,7 +1896,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1897,7 +1905,7 @@ export interface operations {
                     "application/json": components["schemas"]["PlayListPictureUploadResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -1906,14 +1914,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1934,21 +1942,21 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -1970,7 +1978,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -1994,7 +2002,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description Created */
             201: {
                 headers: {
                     [name: string]: unknown;
@@ -2003,7 +2011,7 @@ export interface operations {
                     "application/json": components["schemas"]["TrackApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -2012,21 +2020,21 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -2046,7 +2054,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2055,7 +2063,7 @@ export interface operations {
                     "application/json": components["schemas"]["TrackApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2077,14 +2085,14 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2104,7 +2112,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2113,14 +2121,14 @@ export interface operations {
                     "application/json": components["schemas"]["TrackStreamResponse"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2144,7 +2152,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2166,28 +2174,28 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -2209,7 +2217,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2218,7 +2226,7 @@ export interface operations {
                     "application/json": components["schemas"]["TrackUploadUrlsResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -2227,21 +2235,21 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -2263,7 +2271,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2287,7 +2295,7 @@ export interface operations {
             };
         };
         responses: {
-            
+            /** @description Created */
             201: {
                 headers: {
                     [name: string]: unknown;
@@ -2296,7 +2304,7 @@ export interface operations {
                     "application/json": components["schemas"]["UserApplicationResponse"];
                 };
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -2305,7 +2313,7 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Conflict */
             409: {
                 headers: {
                     [name: string]: unknown;
@@ -2325,7 +2333,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2334,7 +2342,7 @@ export interface operations {
                     "application/json": components["schemas"]["UserApplicationResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2354,7 +2362,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2363,7 +2371,7 @@ export interface operations {
                     "application/json": components["schemas"]["TrackApplicationResponse"][];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2383,7 +2391,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2405,7 +2413,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2414,7 +2422,7 @@ export interface operations {
                     "application/json": components["schemas"]["TrackApplicationResponse"];
                 };
             };
-
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2434,7 +2442,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2443,7 +2451,7 @@ export interface operations {
                     "application/json": components["schemas"]["UserProfileResponse"];
                 };
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2463,7 +2471,7 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description OK */
             200: {
                 headers: {
                     [name: string]: unknown;
@@ -2472,7 +2480,7 @@ export interface operations {
                     "application/json": boolean;
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
@@ -2492,14 +2500,14 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Bad Request */
             400: {
                 headers: {
                     [name: string]: unknown;
@@ -2508,14 +2516,14 @@ export interface operations {
                     "application/problem+json": components["schemas"]["HttpValidationProblemDetails"];
                 };
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Not Found */
             404: {
                 headers: {
                     [name: string]: unknown;
@@ -2535,14 +2543,14 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            
+            /** @description No Content */
             204: {
                 headers: {
                     [name: string]: unknown;
                 };
                 content?: never;
             };
-            
+            /** @description Unauthorized */
             401: {
                 headers: {
                     [name: string]: unknown;
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index ea997d5..2265456 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -61,6 +61,7 @@
 					title={player.current.title}
 					artist={player.current.artist || '—'}
 					ownerUserId={player.current.ownerUserId}
+					explicit={player.current.explicit}
 					active
 				/>
 			</div>
@@ -123,6 +124,7 @@
 						title={track.title}
 						subtitle={track.artist || '—'}
 						subtitleHref={track.ownerUserId}
+						explicit={track.explicit}
 						trackId={track.id}
 						class="p-2"
 					>
diff --git a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
index 99e7728..9522fb8 100644
--- a/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
+++ b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <span
-	class="grid size-4 shrink-0 place-items-center rounded-tag bg-fg-2 text-xs leading-4 font-semibold text-bg {klass}"
+	class="grid size-4 shrink-0 place-items-center rounded-tag border border-accent/30 bg-accent-tint pt-px text-xs leading-none font-normal text-accent-soft {klass}"
 	title="Contenido explícito"
 	aria-label="Contenido explícito">E</span
 >
diff --git a/web-player/src/routes/(app)/upload/+page.server.ts b/web-player/src/routes/(app)/upload/+page.server.ts
index 53a7bdd..1809b7f 100644
--- a/web-player/src/routes/(app)/upload/+page.server.ts
+++ b/web-player/src/routes/(app)/upload/+page.server.ts
@@ -25,6 +25,7 @@ export const actions: Actions = {
 		const audio = form.get('audio');
 		const cover = form.get('cover');
 		const rawTags = form.getAll('tags').map(String);
+		const isExplicit = form.get('isExplicit') === 'on';
 
 		if (title === '' || title.length > MAX_TITLE) {
 			return fail(400, { message: 'El título es obligatorio (máx. 100 caracteres).' });
@@ -90,7 +91,8 @@ export const actions: Actions = {
 				title,
 				pictureIntentId: urls.pictureIntentId,
 				audioIntentId: urls.audioIntentId,
-				tags
+				tags,
+				isExplicit
 			}
 		});
 
diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 625e593..ba9b3da 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -13,6 +13,7 @@
 	import Input from '$lib/components/ui/primitives/Input.svelte';
 	import Checkbox from '$lib/components/ui/primitives/Checkbox.svelte';
 	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
 	import Chip from '$lib/components/ui/primitives/Chip.svelte';
 	import { TRACK_GENRES, areCompatible, type TrackGenre } from '$lib/data/trackGenres';
 
@@ -29,6 +30,7 @@
 	let dragging = $state(false);
 	let status = $state<Status>('idle');
 	let acceptedTerms = $state(false);
+	let isExplicit = $state(false);
 	let errorMsg = $state('');
 	let errorDetail = $state('');
 	let tags = $state<TrackGenre[]>([]);
@@ -101,6 +103,7 @@
 		coverResetToken += 1;
 		status = 'idle';
 		acceptedTerms = false;
+		isExplicit = false;
 		errorMsg = '';
 		errorDetail = '';
 		tags = [];
@@ -277,6 +280,13 @@
 								<span class="shrink-0 tabular-nums">{tags.length} elegidos</span>
 							{/snippet}
 						</Field>
+
+						<Checkbox bind:checked={isExplicit} name="isExplicit">
+							<span class="inline-flex items-center gap-2">
+								Contenido explícito
+								<ExplicitBadge />
+							</span>
+						</Checkbox>
 					</div>
 				</div>
 			</Surface>
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 8075739..906c6e6 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -195,6 +195,7 @@
 							title={item.title}
 							subtitle={item.artist}
 							subtitleHref={item.ownerUserId}
+							explicit={item.explicit}
 							trackId={item.id}
 							class="animate-enter"
 							style="--i:{i}"
@@ -252,6 +253,7 @@
 								title={track.title}
 								subtitle={track.artist}
 								subtitleHref={track.ownerUserId}
+								explicit={track.isExplicit}
 							>
 								{#snippet leading()}
 									<span class="w-5 shrink-0 text-center text-xs text-fg-2 tabular-nums"
-- 
2.54.0


From fd0a39b87905b52fe0f840156bf9fe58c0299e3c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:42:28 +0200
Subject: [PATCH 19/26] IsExplicit

---
 web-player/src/routes/(app)/explore/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 28de335..36c08f8 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -338,6 +338,7 @@
 										title={track.title}
 										subtitle={track.artist}
 										subtitleHref={track.ownerUserId}
+										explicit={track.isExplicit}
 										active={player.current.id === track.id}
 										size="lg"
 										trackId={track.id}
-- 
2.54.0


From b9a40186b149b2907f61a309bfd86950a8d0d341 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:44:42 +0200
Subject: [PATCH 20/26] Lighten active surface gradients in light mode

---
 web-player/src/lib/theme/tokens.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index 8b8431b..be8a7e9 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -22,10 +22,10 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 	const g = (l1: number, c1: number, a1: number, l2: number, c2: number, a2: number) =>
 		`linear-gradient(90deg, oklch(${l1} ${c1} ${H} / ${a1}), oklch(${l2} ${c2} ${H} / ${a2}))`;
 	const gActive = light
-		? g(0.82, 0.05, 0.55, 0.87, 0.035, 0.36)
+		? g(0.86, 0.04, 0.45, 0.9, 0.03, 0.28)
 		: g(0.46, 0.06, 0.34, 0.4, 0.045, 0.22);
 	const gHover = light
-		? g(0.86, 0.035, 0.38, 0.9, 0.025, 0.24)
+		? g(0.9, 0.03, 0.34, 0.93, 0.02, 0.2)
 		: g(0.42, 0.045, 0.26, 0.38, 0.035, 0.17);
 	const glow = (l: number, c: number, a: number) => `oklch(${l} ${c} ${H} / ${a})`;
 	// Fixed danger hue so error dialogs read red whatever the theme hue is.
-- 
2.54.0


From cb046bba9e8301c4cf928af317a0550cd622c6d5 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:55:14 +0200
Subject: [PATCH 21/26] Let users browse followers and following lists

Following lists are public; followers are visible to the user and to mutual followers.
Adds GET /users/{id}/followers and /following, exposes isFollowing and canViewFollowers
on the profile, and returns isFollowedByViewer from user search so the web player no
longer calls /is-following per user.
---
 .../Users/FollowVisibility.cs                 |  30 +++++
 .../Users/GetUserFollowers.cs                 |  46 +++++++
 .../Users/GetUserFollowing.cs                 |  43 +++++++
 .../Users/GetUserProfile.cs                   |  18 ++-
 .../Core/Musify.Application/Users/GetUsers.cs |  20 ++-
 .../Users/Responses/UserSummaryResponse.cs    |  13 ++
 .../Musify.Api/Endpoints/UserEndpoints.cs     |  45 ++++++-
 .../GetUserFollowersQueryHandlerTests.cs      |  95 ++++++++++++++
 .../GetUserFollowingQueryHandlerTests.cs      |  75 +++++++++++
 .../Users/GetUserProfileQueryHandlerTests.cs  |  40 ++++++
 .../Users/GetUsersQueryHandlerTests.cs        |  14 ++
 web-player/CLAUDE.md                          |   2 +-
 web-player/src/lib/api/schema.d.ts            | 121 +++++++++++++++++-
 .../components/ui/layout/PageHeader.svelte    |   6 +-
 .../lib/components/ui/media/UserRow.svelte    |  28 ++++
 web-player/src/lib/config.ts                  |   1 +
 web-player/src/lib/server/follows.ts          |  17 +++
 web-player/src/lib/types.ts                   |   2 +
 web-player/src/params/followList.ts           |   5 +
 .../src/routes/(app)/explore/+page.server.ts  |  23 +---
 .../src/routes/(app)/explore/+page.svelte     |  13 +-
 .../routes/(app)/user/[id]/+page.server.ts    |  10 +-
 .../src/routes/(app)/user/[id]/+page.svelte   |  21 ++-
 .../[id]/[list=followList]/+page.server.ts    |  32 +++++
 .../user/[id]/[list=followList]/+page.svelte  |  93 ++++++++++++++
 .../users/[id]/[list=followList]/+server.ts   |  19 +++
 26 files changed, 768 insertions(+), 64 deletions(-)
 create mode 100644 backend/Core/Musify.Application/Users/FollowVisibility.cs
 create mode 100644 backend/Core/Musify.Application/Users/GetUserFollowers.cs
 create mode 100644 backend/Core/Musify.Application/Users/GetUserFollowing.cs
 create mode 100644 backend/Core/Musify.Application/Users/Responses/UserSummaryResponse.cs
 create mode 100644 backend/Tests/Musify.Application.Tests/Users/GetUserFollowersQueryHandlerTests.cs
 create mode 100644 backend/Tests/Musify.Application.Tests/Users/GetUserFollowingQueryHandlerTests.cs
 create mode 100644 web-player/src/lib/components/ui/media/UserRow.svelte
 create mode 100644 web-player/src/lib/server/follows.ts
 create mode 100644 web-player/src/params/followList.ts
 create mode 100644 web-player/src/routes/(app)/user/[id]/[list=followList]/+page.server.ts
 create mode 100644 web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
 create mode 100644 web-player/src/routes/api/users/[id]/[list=followList]/+server.ts

diff --git a/backend/Core/Musify.Application/Users/FollowVisibility.cs b/backend/Core/Musify.Application/Users/FollowVisibility.cs
new file mode 100644
index 0000000..b3c45a8
--- /dev/null
+++ b/backend/Core/Musify.Application/Users/FollowVisibility.cs
@@ -0,0 +1,30 @@
+using Microsoft.EntityFrameworkCore;
+using Musify.Application.Contracts;
+
+namespace Musify.Application.Users
+{
+    public static class FollowVisibility
+    {
+        public static async Task<bool> CanViewFollowersAsync(
+            IDatabase database,
+            long? viewerId,
+            long userId,
+            CancellationToken cancellationToken)
+        {
+            if (viewerId is not { } viewer)
+                return false;
+
+            if (viewer == userId)
+                return true;
+
+            var mutualRows = await database.UserFollows
+                .AsNoTracking()
+                .CountAsync(f =>
+                    (f.FollowerId == viewer && f.FollowedId == userId) ||
+                    (f.FollowerId == userId && f.FollowedId == viewer),
+                    cancellationToken);
+
+            return mutualRows == 2;
+        }
+    }
+}
diff --git a/backend/Core/Musify.Application/Users/GetUserFollowers.cs b/backend/Core/Musify.Application/Users/GetUserFollowers.cs
new file mode 100644
index 0000000..e5b0d9e
--- /dev/null
+++ b/backend/Core/Musify.Application/Users/GetUserFollowers.cs
@@ -0,0 +1,46 @@
+using ErrorOr;
+using Mediator;
+using Microsoft.EntityFrameworkCore;
+using Musify.Application.Contracts;
+using Musify.Application.Shared;
+using Musify.Application.Users.Responses;
+using X.PagedList.EF;
+
+namespace Musify.Application.Users
+{
+    public record GetUserFollowersQuery(long? ViewerId, long UserId, int PageNumber, int PageSize)
+        : IQuery<ErrorOr<PaginatedResponse<UserSummaryResponse>>>;
+
+    public class GetUserFollowersQueryHandler(IDatabase database)
+        : IQueryHandler<GetUserFollowersQuery, ErrorOr<PaginatedResponse<UserSummaryResponse>>>
+    {
+        public async ValueTask<ErrorOr<PaginatedResponse<UserSummaryResponse>>> Handle(GetUserFollowersQuery request, CancellationToken cancellationToken)
+        {
+            if (!await database.Users.AnyAsync(u => u.Id == request.UserId, cancellationToken))
+                return Error.NotFound();
+
+            if (!await FollowVisibility.CanViewFollowersAsync(database, request.ViewerId, request.UserId, cancellationToken))
+                return Error.Forbidden();
+
+            var followsQuery = database.UserFollows
+                .AsNoTracking()
+                .Where(f => f.FollowedId == request.UserId);
+
+            var totalCount = await followsQuery.CountAsync(cancellationToken);
+            var viewerId = request.ViewerId;
+
+            var page = await followsQuery
+                .OrderByDescending(f => f.CreatedAt)
+                .Select(f => new UserSummaryResponse(
+                    f.Follower.Id,
+                    f.Follower.Name,
+                    f.Follower.FirstName,
+                    f.Follower.SecondName,
+                    f.Follower.ProfilePictureUrl,
+                    viewerId != null && database.UserFollows.Any(v => v.FollowerId == viewerId && v.FollowedId == f.FollowerId)))
+                .ToPagedListAsync(request.PageNumber, request.PageSize, totalCount, cancellationToken);
+
+            return PaginatedResponse<UserSummaryResponse>.FromPagedList(page);
+        }
+    }
+}
diff --git a/backend/Core/Musify.Application/Users/GetUserFollowing.cs b/backend/Core/Musify.Application/Users/GetUserFollowing.cs
new file mode 100644
index 0000000..baa9221
--- /dev/null
+++ b/backend/Core/Musify.Application/Users/GetUserFollowing.cs
@@ -0,0 +1,43 @@
+using ErrorOr;
+using Mediator;
+using Microsoft.EntityFrameworkCore;
+using Musify.Application.Contracts;
+using Musify.Application.Shared;
+using Musify.Application.Users.Responses;
+using X.PagedList.EF;
+
+namespace Musify.Application.Users
+{
+    public record GetUserFollowingQuery(long? ViewerId, long UserId, int PageNumber, int PageSize)
+        : IQuery<ErrorOr<PaginatedResponse<UserSummaryResponse>>>;
+
+    public class GetUserFollowingQueryHandler(IDatabase database)
+        : IQueryHandler<GetUserFollowingQuery, ErrorOr<PaginatedResponse<UserSummaryResponse>>>
+    {
+        public async ValueTask<ErrorOr<PaginatedResponse<UserSummaryResponse>>> Handle(GetUserFollowingQuery request, CancellationToken cancellationToken)
+        {
+            if (!await database.Users.AnyAsync(u => u.Id == request.UserId, cancellationToken))
+                return Error.NotFound();
+
+            var followsQuery = database.UserFollows
+                .AsNoTracking()
+                .Where(f => f.FollowerId == request.UserId);
+
+            var totalCount = await followsQuery.CountAsync(cancellationToken);
+            var viewerId = request.ViewerId;
+
+            var page = await followsQuery
+                .OrderByDescending(f => f.CreatedAt)
+                .Select(f => new UserSummaryResponse(
+                    f.Followed.Id,
+                    f.Followed.Name,
+                    f.Followed.FirstName,
+                    f.Followed.SecondName,
+                    f.Followed.ProfilePictureUrl,
+                    viewerId != null && database.UserFollows.Any(v => v.FollowerId == viewerId && v.FollowedId == f.FollowedId)))
+                .ToPagedListAsync(request.PageNumber, request.PageSize, totalCount, cancellationToken);
+
+            return PaginatedResponse<UserSummaryResponse>.FromPagedList(page);
+        }
+    }
+}
diff --git a/backend/Core/Musify.Application/Users/GetUserProfile.cs b/backend/Core/Musify.Application/Users/GetUserProfile.cs
index 4d897d2..7066d90 100644
--- a/backend/Core/Musify.Application/Users/GetUserProfile.cs
+++ b/backend/Core/Musify.Application/Users/GetUserProfile.cs
@@ -7,7 +7,7 @@ using Musify.Application.Serialization;
 
 namespace Musify.Application.Users
 {
-    public record GetUserProfileQuery(long UserId) : IQuery<ErrorOr<UserProfileResponse>>;
+    public record GetUserProfileQuery(long UserId, long? ViewerId = null) : IQuery<ErrorOr<UserProfileResponse>>;
 
     public record UserProfileResponse(
         [property: JsonConverter(typeof(LongAsStringConverter))] long Id,
@@ -17,7 +17,9 @@ namespace Musify.Application.Users
         string? ProfilePictureUrl,
         DateTime CreatedAt,
         int FollowersCount,
-        int FollowingCount);
+        int FollowingCount,
+        bool IsFollowing,
+        bool CanViewFollowers);
 
     public class GetUserProfileQueryHandler(IDatabase database)
         : IQueryHandler<GetUserProfileQuery, ErrorOr<UserProfileResponse>>
@@ -49,6 +51,14 @@ namespace Musify.Application.Users
                 .AsNoTracking()
                 .CountAsync(f => f.FollowerId == request.UserId, cancellationToken);
 
+            var isFollowing = request.ViewerId is { } viewerId && viewerId != request.UserId &&
+                await database.UserFollows
+                    .AsNoTracking()
+                    .AnyAsync(f => f.FollowerId == viewerId && f.FollowedId == request.UserId, cancellationToken);
+
+            var canViewFollowers = await FollowVisibility.CanViewFollowersAsync(
+                database, request.ViewerId, request.UserId, cancellationToken);
+
             return new UserProfileResponse(
                 user.Id,
                 user.Name,
@@ -57,7 +67,9 @@ namespace Musify.Application.Users
                 user.ProfilePictureUrl,
                 user.CreatedAt,
                 followersCount,
-                followingCount);
+                followingCount,
+                isFollowing,
+                canViewFollowers);
         }
     }
 }
diff --git a/backend/Core/Musify.Application/Users/GetUsers.cs b/backend/Core/Musify.Application/Users/GetUsers.cs
index 90955bb..7023c84 100644
--- a/backend/Core/Musify.Application/Users/GetUsers.cs
+++ b/backend/Core/Musify.Application/Users/GetUsers.cs
@@ -8,13 +8,13 @@ using Musify.Application.Contracts;
 
 namespace Musify.Application.Users
 {
-    public record GetUsersQuery(int PageNumber, int PageSize, string? UsernameSearch)
-        : IQuery<ErrorOr<PaginatedResponse<UserApplicationResponse>>>;
+    public record GetUsersQuery(int PageNumber, int PageSize, string? UsernameSearch, long? ViewerId = null)
+        : IQuery<ErrorOr<PaginatedResponse<UserSummaryResponse>>>;
 
     public class GetUsersQueryHandler(IDatabase database)
-        : IQueryHandler<GetUsersQuery, ErrorOr<PaginatedResponse<UserApplicationResponse>>>
+        : IQueryHandler<GetUsersQuery, ErrorOr<PaginatedResponse<UserSummaryResponse>>>
     {
-        public async ValueTask<ErrorOr<PaginatedResponse<UserApplicationResponse>>> Handle(GetUsersQuery request, CancellationToken cancellationToken)
+        public async ValueTask<ErrorOr<PaginatedResponse<UserSummaryResponse>>> Handle(GetUsersQuery request, CancellationToken cancellationToken)
         {
             var usersQuery = database.Users
                 .AsNoTracking()
@@ -27,11 +27,19 @@ namespace Musify.Application.Users
             }
 
             var totalCount = await usersQuery.CountAsync(cancellationToken);
+            var viewerId = request.ViewerId;
             var pagedUsers = await usersQuery
-                .Select(u => UserApplicationResponse.FromEntity(u))
+                .OrderBy(u => u.Name)
+                .Select(u => new UserSummaryResponse(
+                    u.Id,
+                    u.Name,
+                    u.FirstName,
+                    u.SecondName,
+                    u.ProfilePictureUrl,
+                    viewerId != null && database.UserFollows.Any(f => f.FollowerId == viewerId && f.FollowedId == u.Id)))
                 .ToPagedListAsync(request.PageNumber, request.PageSize, totalCount, cancellationToken);
 
-            return PaginatedResponse<UserApplicationResponse>.FromPagedList(pagedUsers);
+            return PaginatedResponse<UserSummaryResponse>.FromPagedList(pagedUsers);
         }
     }
 }
diff --git a/backend/Core/Musify.Application/Users/Responses/UserSummaryResponse.cs b/backend/Core/Musify.Application/Users/Responses/UserSummaryResponse.cs
new file mode 100644
index 0000000..6d0af7f
--- /dev/null
+++ b/backend/Core/Musify.Application/Users/Responses/UserSummaryResponse.cs
@@ -0,0 +1,13 @@
+using System.Text.Json.Serialization;
+using Musify.Application.Serialization;
+
+namespace Musify.Application.Users.Responses
+{
+    public record UserSummaryResponse(
+        [property: JsonConverter(typeof(LongAsStringConverter))] long Id,
+        string Name,
+        string? FirstName,
+        string? SecondName,
+        string? ProfilePictureUrl,
+        bool IsFollowedByViewer);
+}
diff --git a/backend/Hosts/Musify.Api/Endpoints/UserEndpoints.cs b/backend/Hosts/Musify.Api/Endpoints/UserEndpoints.cs
index c1c97f3..63448eb 100644
--- a/backend/Hosts/Musify.Api/Endpoints/UserEndpoints.cs
+++ b/backend/Hosts/Musify.Api/Endpoints/UserEndpoints.cs
@@ -21,7 +21,7 @@ public static class UserEndpoints
         group.MapGet("/", GetUsers)
             .WithName("GetUsers")
             .WithSummary("Get Paginated Users.")
-            .Produces<PaginatedResponse<UserApplicationResponse>>();
+            .Produces<PaginatedResponse<UserSummaryResponse>>();
 
         group.MapGet("/{id}", GetUserById)
             .WithName("GetUserById")
@@ -52,6 +52,19 @@ public static class UserEndpoints
             .Produces<UserProfileResponse>()
             .Produces(StatusCodes.Status404NotFound);
 
+        group.MapGet("/{id}/followers", GetFollowers)
+            .WithName("GetUserFollowers")
+            .WithSummary("Get The Users Following A User. Visible To The User And To Mutual Followers.")
+            .Produces<PaginatedResponse<UserSummaryResponse>>()
+            .Produces(StatusCodes.Status403Forbidden)
+            .Produces(StatusCodes.Status404NotFound);
+
+        group.MapGet("/{id}/following", GetFollowing)
+            .WithName("GetUserFollowing")
+            .WithSummary("Get The Users A User Follows.")
+            .Produces<PaginatedResponse<UserSummaryResponse>>()
+            .Produces(StatusCodes.Status404NotFound);
+
         group.MapGet("/{id}/is-following", IsFollowing)
             .WithName("IsFollowingUser")
             .WithSummary("Check Whether The Current User Follows Another User.")
@@ -88,12 +101,13 @@ public static class UserEndpoints
 
     private static async Task<IResult> GetUsers(
         IMediator mediator,
+        CurrentUser currentUser,
         CancellationToken cancellationToken,
         string? usernameSearch,
         int pageNumber = 1,
         int pageSize = 10)
     {
-        var result = await mediator.Send(new GetUsersQuery(pageNumber, pageSize, usernameSearch), cancellationToken);
+        var result = await mediator.Send(new GetUsersQuery(pageNumber, pageSize, usernameSearch, currentUser.Id), cancellationToken);
         return result.ToHttpResult();
     }
 
@@ -133,10 +147,35 @@ public static class UserEndpoints
 
     private static async Task<IResult> GetUserProfile(
         IMediator mediator,
+        CurrentUser currentUser,
         long id,
         CancellationToken cancellationToken)
     {
-        var result = await mediator.Send(new GetUserProfileQuery(id), cancellationToken);
+        var result = await mediator.Send(new GetUserProfileQuery(id, currentUser.Id), cancellationToken);
+        return result.ToHttpResult();
+    }
+
+    private static async Task<IResult> GetFollowers(
+        IMediator mediator,
+        CurrentUser currentUser,
+        long id,
+        CancellationToken cancellationToken,
+        int pageNumber = 1,
+        int pageSize = 20)
+    {
+        var result = await mediator.Send(new GetUserFollowersQuery(currentUser.Id, id, pageNumber, pageSize), cancellationToken);
+        return result.ToHttpResult();
+    }
+
+    private static async Task<IResult> GetFollowing(
+        IMediator mediator,
+        CurrentUser currentUser,
+        long id,
+        CancellationToken cancellationToken,
+        int pageNumber = 1,
+        int pageSize = 20)
+    {
+        var result = await mediator.Send(new GetUserFollowingQuery(currentUser.Id, id, pageNumber, pageSize), cancellationToken);
         return result.ToHttpResult();
     }
 
diff --git a/backend/Tests/Musify.Application.Tests/Users/GetUserFollowersQueryHandlerTests.cs b/backend/Tests/Musify.Application.Tests/Users/GetUserFollowersQueryHandlerTests.cs
new file mode 100644
index 0000000..825e7ff
--- /dev/null
+++ b/backend/Tests/Musify.Application.Tests/Users/GetUserFollowersQueryHandlerTests.cs
@@ -0,0 +1,95 @@
+using ErrorOr;
+using Musify.Application.Shared;
+using Musify.Application.Tests.TestSupport;
+using Musify.Application.Users;
+using Musify.Application.Users.Responses;
+using Musify.Domain.Entities;
+using Xunit;
+
+namespace Musify.Application.Tests.Users
+{
+    public sealed class GetUserFollowersQueryHandlerTests : HandlerTestBase
+    {
+        private GetUserFollowersQueryHandler CreateHandler() => new(Database);
+
+        private async Task<ErrorOr<PaginatedResponse<UserSummaryResponse>>> Send(long? viewerId, long userId) =>
+            await CreateHandler().Handle(new GetUserFollowersQuery(viewerId, userId, 1, 20), TestContext.Current.CancellationToken);
+
+        [Fact]
+        public async Task Handle_OwnProfile_ReturnsFollowers()
+        {
+            var user = TestEntities.User(1, "user");
+            var follower = TestEntities.User(2, "follower");
+            await SeedAsync(user, follower, new UserFollow { FollowerId = follower.Id, FollowedId = user.Id });
+
+            var result = await Send(user.Id, user.Id);
+
+            Assert.False(result.IsError);
+            var item = Assert.Single(result.Value.Items);
+            Assert.Equal(follower.Id, item.Id);
+            Assert.False(item.IsFollowedByViewer);
+        }
+
+        [Fact]
+        public async Task Handle_MutualFollow_ReturnsFollowersWithViewerFollowState()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            var other = TestEntities.User(3, "other");
+            await SeedAsync(
+                viewer, user, other,
+                new UserFollow { FollowerId = viewer.Id, FollowedId = user.Id },
+                new UserFollow { FollowerId = user.Id, FollowedId = viewer.Id },
+                new UserFollow { FollowerId = other.Id, FollowedId = user.Id },
+                new UserFollow { FollowerId = viewer.Id, FollowedId = other.Id });
+
+            var result = await Send(viewer.Id, user.Id);
+
+            Assert.False(result.IsError);
+            Assert.Equal(2, result.Value.TotalItemCount);
+            Assert.All(result.Value.Items, item => Assert.Equal(item.Id == other.Id, item.IsFollowedByViewer));
+        }
+
+        [Fact]
+        public async Task Handle_ViewerFollowsButNotFollowedBack_ReturnsForbidden()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            await SeedAsync(viewer, user, new UserFollow { FollowerId = viewer.Id, FollowedId = user.Id });
+
+            var result = await Send(viewer.Id, user.Id);
+
+            Assert.Equal(ErrorType.Forbidden, result.FirstError.Type);
+        }
+
+        [Fact]
+        public async Task Handle_FollowedByUserButNotFollowingBack_ReturnsForbidden()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            await SeedAsync(viewer, user, new UserFollow { FollowerId = user.Id, FollowedId = viewer.Id });
+
+            var result = await Send(viewer.Id, user.Id);
+
+            Assert.Equal(ErrorType.Forbidden, result.FirstError.Type);
+        }
+
+        [Fact]
+        public async Task Handle_Anonymous_ReturnsForbidden()
+        {
+            await SeedAsync(TestEntities.User(1, "user"));
+
+            var result = await Send(null, 1);
+
+            Assert.Equal(ErrorType.Forbidden, result.FirstError.Type);
+        }
+
+        [Fact]
+        public async Task Handle_UserMissing_ReturnsNotFound()
+        {
+            var result = await Send(1, 404);
+
+            Assert.Equal(ErrorType.NotFound, result.FirstError.Type);
+        }
+    }
+}
diff --git a/backend/Tests/Musify.Application.Tests/Users/GetUserFollowingQueryHandlerTests.cs b/backend/Tests/Musify.Application.Tests/Users/GetUserFollowingQueryHandlerTests.cs
new file mode 100644
index 0000000..c074d00
--- /dev/null
+++ b/backend/Tests/Musify.Application.Tests/Users/GetUserFollowingQueryHandlerTests.cs
@@ -0,0 +1,75 @@
+using ErrorOr;
+using Musify.Application.Tests.TestSupport;
+using Musify.Application.Users;
+using Musify.Domain.Entities;
+using Xunit;
+
+namespace Musify.Application.Tests.Users
+{
+    public sealed class GetUserFollowingQueryHandlerTests : HandlerTestBase
+    {
+        private GetUserFollowingQueryHandler CreateHandler() => new(Database);
+
+        [Fact]
+        public async Task Handle_Anonymous_ReturnsFollowedUsers()
+        {
+            var user = TestEntities.User(1, "user");
+            var followedA = TestEntities.User(2, "followedA");
+            var followedB = TestEntities.User(3, "followedB");
+            await SeedAsync(
+                user, followedA, followedB,
+                new UserFollow { FollowerId = user.Id, FollowedId = followedA.Id },
+                new UserFollow { FollowerId = user.Id, FollowedId = followedB.Id });
+
+            var result = await CreateHandler().Handle(new GetUserFollowingQuery(null, user.Id, 1, 20), TestContext.Current.CancellationToken);
+
+            Assert.False(result.IsError);
+            Assert.Equal(2, result.Value.TotalItemCount);
+            Assert.All(result.Value.Items, item => Assert.False(item.IsFollowedByViewer));
+        }
+
+        [Fact]
+        public async Task Handle_Viewer_MarksUsersTheViewerFollows()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            var followedA = TestEntities.User(3, "followedA");
+            var followedB = TestEntities.User(4, "followedB");
+            await SeedAsync(
+                viewer, user, followedA, followedB,
+                new UserFollow { FollowerId = user.Id, FollowedId = followedA.Id },
+                new UserFollow { FollowerId = user.Id, FollowedId = followedB.Id },
+                new UserFollow { FollowerId = viewer.Id, FollowedId = followedA.Id });
+
+            var result = await CreateHandler().Handle(new GetUserFollowingQuery(viewer.Id, user.Id, 1, 20), TestContext.Current.CancellationToken);
+
+            Assert.False(result.IsError);
+            Assert.All(result.Value.Items, item => Assert.Equal(item.Id == followedA.Id, item.IsFollowedByViewer));
+        }
+
+        [Fact]
+        public async Task Handle_Pagination_ReturnsRequestedPage()
+        {
+            await SeedAsync(
+                TestEntities.User(1, "user"), TestEntities.User(2, "a"), TestEntities.User(3, "b"), TestEntities.User(4, "c"),
+                new UserFollow { FollowerId = 1, FollowedId = 2 },
+                new UserFollow { FollowerId = 1, FollowedId = 3 },
+                new UserFollow { FollowerId = 1, FollowedId = 4 });
+
+            var result = await CreateHandler().Handle(new GetUserFollowingQuery(null, 1, 2, 2), TestContext.Current.CancellationToken);
+
+            Assert.False(result.IsError);
+            Assert.Single(result.Value.Items);
+            Assert.Equal(3, result.Value.TotalItemCount);
+            Assert.False(result.Value.HasNextPage);
+        }
+
+        [Fact]
+        public async Task Handle_UserMissing_ReturnsNotFound()
+        {
+            var result = await CreateHandler().Handle(new GetUserFollowingQuery(null, 404, 1, 20), TestContext.Current.CancellationToken);
+
+            Assert.Equal(ErrorType.NotFound, result.FirstError.Type);
+        }
+    }
+}
diff --git a/backend/Tests/Musify.Application.Tests/Users/GetUserProfileQueryHandlerTests.cs b/backend/Tests/Musify.Application.Tests/Users/GetUserProfileQueryHandlerTests.cs
index 57b734e..45665aa 100644
--- a/backend/Tests/Musify.Application.Tests/Users/GetUserProfileQueryHandlerTests.cs
+++ b/backend/Tests/Musify.Application.Tests/Users/GetUserProfileQueryHandlerTests.cs
@@ -30,6 +30,46 @@ namespace Musify.Application.Tests.Users
             Assert.Equal(1, result.Value.FollowingCount);
         }
 
+        [Fact]
+        public async Task Handle_MutualFollow_ViewerCanSeeFollowersAndIsFollowing()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            await SeedAsync(
+                viewer, user,
+                new UserFollow { FollowerId = viewer.Id, FollowedId = user.Id },
+                new UserFollow { FollowerId = user.Id, FollowedId = viewer.Id });
+
+            var result = await CreateHandler().Handle(new GetUserProfileQuery(user.Id, viewer.Id), TestContext.Current.CancellationToken);
+
+            Assert.True(result.Value.IsFollowing);
+            Assert.True(result.Value.CanViewFollowers);
+        }
+
+        [Fact]
+        public async Task Handle_OneWayFollow_ViewerCannotSeeFollowers()
+        {
+            var viewer = TestEntities.User(1, "viewer");
+            var user = TestEntities.User(2, "user");
+            await SeedAsync(viewer, user, new UserFollow { FollowerId = viewer.Id, FollowedId = user.Id });
+
+            var result = await CreateHandler().Handle(new GetUserProfileQuery(user.Id, viewer.Id), TestContext.Current.CancellationToken);
+
+            Assert.True(result.Value.IsFollowing);
+            Assert.False(result.Value.CanViewFollowers);
+        }
+
+        [Fact]
+        public async Task Handle_OwnProfile_CanSeeFollowersButIsNotFollowing()
+        {
+            await SeedAsync(TestEntities.User(1, "user"));
+
+            var result = await CreateHandler().Handle(new GetUserProfileQuery(1, 1), TestContext.Current.CancellationToken);
+
+            Assert.False(result.Value.IsFollowing);
+            Assert.True(result.Value.CanViewFollowers);
+        }
+
         [Fact]
         public async Task Handle_UserMissing_ReturnsNotFound()
         {
diff --git a/backend/Tests/Musify.Application.Tests/Users/GetUsersQueryHandlerTests.cs b/backend/Tests/Musify.Application.Tests/Users/GetUsersQueryHandlerTests.cs
index f60f180..a57cfb4 100644
--- a/backend/Tests/Musify.Application.Tests/Users/GetUsersQueryHandlerTests.cs
+++ b/backend/Tests/Musify.Application.Tests/Users/GetUsersQueryHandlerTests.cs
@@ -1,5 +1,6 @@
 using Musify.Application.Tests.TestSupport;
 using Musify.Application.Users;
+using Musify.Domain.Entities;
 using Xunit;
 
 namespace Musify.Application.Tests.Users
@@ -30,5 +31,18 @@ namespace Musify.Application.Tests.Users
             var user = Assert.Single(result.Value.Items);
             Assert.Equal(1, user.Id);
         }
+
+        [Fact]
+        public async Task Handle_Viewer_MarksFollowedUsers()
+        {
+            await SeedAsync(
+                TestEntities.User(1, "viewer"), TestEntities.User(2, "alice"), TestEntities.User(3, "bob"),
+                new UserFollow { FollowerId = 1, FollowedId = 2 });
+
+            var result = await CreateHandler().Handle(new GetUsersQuery(PageNumber: 1, PageSize: 10, UsernameSearch: null, ViewerId: 1), TestContext.Current.CancellationToken);
+
+            Assert.False(result.IsError);
+            Assert.All(result.Value.Items, item => Assert.Equal(item.Id == 2, item.IsFollowedByViewer));
+        }
     }
 }
diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index 3cd9c5b..e1da22c 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -42,7 +42,7 @@ npm run lint:tokens      # scripts/check-tokens.mjs, the design system guardrail
   - `media/` for music domain display components (Artwork, TrackList, MediaCard, PlayButton, and so on).
   - `forms/` for composite entity forms (AlbumForm, PlaylistForm, CoverForm, ImageDropzone).
   - `layout/` for page level scaffolding (Page, PageHeader, SectionHeading). This is different from `components/layout/` above, which is the global app chrome.
-- Auth routes live under `src/routes/auth/`: `+page.svelte` is the login screen, and `login/`, `logout/`, `callback/` are the OIDC endpoints. The public user profile route is `src/routes/(app)/user/[id]/`.
+- Auth routes live under `src/routes/auth/`: `+page.svelte` is the login screen, and `login/`, `logout/`, `callback/` are the OIDC endpoints. The public user profile route is `src/routes/(app)/user/[id]/`, and its followers/following lists share one route, `user/[id]/[list=followList]/` (matcher in `src/params/followList.ts`).
 
 ## Styles
 
diff --git a/web-player/src/lib/api/schema.d.ts b/web-player/src/lib/api/schema.d.ts
index 4af5481..3c0035e 100644
--- a/web-player/src/lib/api/schema.d.ts
+++ b/web-player/src/lib/api/schema.d.ts
@@ -607,6 +607,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/users/{id}/followers": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get The Users Following A User. Visible To The User And To Mutual Followers. */
+        get: operations["GetUserFollowers"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/users/{id}/following": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get The Users A User Follows. */
+        get: operations["GetUserFollowing"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/users/{id}/is-following": {
         parameters: {
             query?: never;
@@ -807,8 +841,8 @@ export interface components {
             hasNextPage: boolean;
             hasPreviousPage: boolean;
         };
-        PaginatedResponseOfUserApplicationResponse: {
-            items: components["schemas"]["UserApplicationResponse"][];
+        PaginatedResponseOfUserSummaryResponse: {
+            items: components["schemas"]["UserSummaryResponse"][];
             /** Format: int32 */
             pageNumber: number | string;
             /** Format: int32 */
@@ -976,6 +1010,16 @@ export interface components {
             followersCount: number | string;
             /** Format: int32 */
             followingCount: number | string;
+            isFollowing: boolean;
+            canViewFollowers: boolean;
+        };
+        UserSummaryResponse: {
+            id: string;
+            name: string;
+            firstName: null | string;
+            secondName: null | string;
+            profilePictureUrl: null | string;
+            isFollowedByViewer: boolean;
         };
     };
     responses: never;
@@ -2277,7 +2321,7 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["PaginatedResponseOfUserApplicationResponse"];
+                    "application/json": components["schemas"]["PaginatedResponseOfUserSummaryResponse"];
                 };
             };
         };
@@ -2460,6 +2504,77 @@ export interface operations {
             };
         };
     };
+    GetUserFollowers: {
+        parameters: {
+            query?: {
+                pageNumber?: number | string;
+                pageSize?: number | string;
+            };
+            header?: never;
+            path: {
+                id: number | string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PaginatedResponseOfUserSummaryResponse"];
+                };
+            };
+            /** @description Forbidden */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    GetUserFollowing: {
+        parameters: {
+            query?: {
+                pageNumber?: number | string;
+                pageSize?: number | string;
+            };
+            header?: never;
+            path: {
+                id: number | string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PaginatedResponseOfUserSummaryResponse"];
+                };
+            };
+            /** @description Not Found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
     IsFollowingUser: {
         parameters: {
             query?: never;
diff --git a/web-player/src/lib/components/ui/layout/PageHeader.svelte b/web-player/src/lib/components/ui/layout/PageHeader.svelte
index 2cd8dc0..645d727 100644
--- a/web-player/src/lib/components/ui/layout/PageHeader.svelte
+++ b/web-player/src/lib/components/ui/layout/PageHeader.svelte
@@ -5,7 +5,7 @@
 		title: string;
 		eyebrow?: string;
 		description?: string;
-		meta?: string;
+		meta?: string | Snippet;
 		cover?: Snippet;
 		actions?: Snippet;
 		align?: 'center' | 'end';
@@ -45,8 +45,10 @@
 			{#if description}
 				<p class="mt-3 max-w-2xl text-body text-fg-2">{description}</p>
 			{/if}
-			{#if meta}
+			{#if typeof meta === 'string'}
 				<p class="mt-3 text-sm text-fg-2">{meta}</p>
+			{:else if meta}
+				<p class="mt-3 text-sm text-fg-2">{@render meta()}</p>
 			{/if}
 		</div>
 		{#if actions && !cover}
diff --git a/web-player/src/lib/components/ui/media/UserRow.svelte b/web-player/src/lib/components/ui/media/UserRow.svelte
new file mode 100644
index 0000000..a9201e5
--- /dev/null
+++ b/web-player/src/lib/components/ui/media/UserRow.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import ListRow from './ListRow.svelte';
+	import Avatar from './Avatar.svelte';
+	import FollowButton from './FollowButton.svelte';
+
+	interface Props {
+		user: {
+			id: string;
+			name: string;
+			profilePictureUrl: string | null;
+			isFollowedByViewer: boolean;
+		};
+		canFollow?: boolean;
+	}
+
+	let { user, canFollow = false }: Props = $props();
+</script>
+
+<div class="flex items-center gap-3">
+	<ListRow title={user.name} href="/user/{user.id}" size="lg" class="min-w-0 flex-1">
+		{#snippet art()}
+			<Avatar name={user.name} src={user.profilePictureUrl} size="md" />
+		{/snippet}
+	</ListRow>
+	{#if canFollow}
+		<FollowButton following={user.isFollowedByViewer} userId={user.id} class="shrink-0" />
+	{/if}
+</div>
diff --git a/web-player/src/lib/config.ts b/web-player/src/lib/config.ts
index 19ab8b8..8b94487 100644
--- a/web-player/src/lib/config.ts
+++ b/web-player/src/lib/config.ts
@@ -17,5 +17,6 @@ export const HOME_POPULAR_MAX = 8;
 export const PLAYLIST_PICKER_PAGE_SIZE = 50;
 export const LIKED_TRACKS_PAGE_SIZE = 500;
 export const EXPLORE_USERS_LIMIT = 12;
+export const FOLLOW_LIST_PAGE_SIZE = 30;
 export const MENU_WIDTH = 240;
 export const SUBMENU_WIDTH = 256;
diff --git a/web-player/src/lib/server/follows.ts b/web-player/src/lib/server/follows.ts
new file mode 100644
index 0000000..c51719c
--- /dev/null
+++ b/web-player/src/lib/server/follows.ts
@@ -0,0 +1,17 @@
+import type { createApiClient } from '$lib/server/api';
+import type { FollowList } from '$lib/types';
+
+type ApiClient = ReturnType<typeof createApiClient>;
+
+export function fetchFollowList(
+	api: ApiClient,
+	list: FollowList,
+	id: string,
+	pageNumber: number,
+	pageSize: number
+) {
+	const options = { params: { path: { id }, query: { pageNumber, pageSize } } };
+	return list === 'followers'
+		? api.GET('/users/{id}/followers', options)
+		: api.GET('/users/{id}/following', options);
+}
diff --git a/web-player/src/lib/types.ts b/web-player/src/lib/types.ts
index bb2191e..dddcee1 100644
--- a/web-player/src/lib/types.ts
+++ b/web-player/src/lib/types.ts
@@ -4,3 +4,5 @@ export interface SessionUser {
 	email: string;
 	picture: string;
 }
+
+export type FollowList = 'followers' | 'following';
diff --git a/web-player/src/params/followList.ts b/web-player/src/params/followList.ts
new file mode 100644
index 0000000..2e95370
--- /dev/null
+++ b/web-player/src/params/followList.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+import type { FollowList } from '$lib/types';
+
+export const match = ((param: string): param is FollowList =>
+	param === 'followers' || param === 'following') satisfies ParamMatcher;
diff --git a/web-player/src/routes/(app)/explore/+page.server.ts b/web-player/src/routes/(app)/explore/+page.server.ts
index 227e316..176bde1 100644
--- a/web-player/src/routes/(app)/explore/+page.server.ts
+++ b/web-player/src/routes/(app)/explore/+page.server.ts
@@ -46,31 +46,12 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 
 	const tracks = unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.');
 
-	const userItems = usersRes?.data?.items ?? [];
-	const followedIds = user
-		? await Promise.all(
-				userItems
-					.filter((u) => u.id !== user.sub)
-					.map((u) =>
-						api
-							.GET('/users/{id}/is-following', { params: { path: { id: u.id } } })
-							.then((res) => (res.data ? u.id : null))
-							.catch(() => null)
-					)
-			)
-		: [];
-	const followed = new Set(followedIds);
-
 	return {
 		query,
 		tracks,
 		albums: (albumsRes?.data?.items ?? []).map((item) => item.album),
-		users: userItems.map((u) => ({
-			...u,
-			isSelf: user?.sub === u.id,
-			isFollowing: followed.has(u.id)
-		})),
-		canFollow: !!user,
+		users: usersRes?.data?.items ?? [],
+		viewerId: user?.sub ?? null,
 		playlists: playlistsRes?.data?.items ?? []
 	};
 };
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 36c08f8..a8c8d35 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -10,7 +10,7 @@
 	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
 	import Artwork from '$lib/components/ui/media/Artwork.svelte';
 	import Avatar from '$lib/components/ui/media/Avatar.svelte';
-	import FollowButton from '$lib/components/ui/media/FollowButton.svelte';
+	import UserRow from '$lib/components/ui/media/UserRow.svelte';
 	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
 	import EqBars from '$lib/components/ui/media/EqBars.svelte';
 	import ListRow from '$lib/components/ui/media/ListRow.svelte';
@@ -402,15 +402,8 @@
 					<SectionHeading title="Usuarios" count={counts.Usuarios} />
 					<ul class="flex flex-col gap-1">
 						{#each capped(sfilter, users) as u (u.id)}
-							<li class="flex items-center gap-3">
-								<ListRow title={u.name} href="/user/{u.id}" size="lg" class="min-w-0 flex-1">
-									{#snippet art()}
-										<Avatar name={u.name} src={u.profilePictureUrl} size="md" />
-									{/snippet}
-								</ListRow>
-								{#if data.canFollow && !u.isSelf}
-									<FollowButton following={u.isFollowing} userId={u.id} class="shrink-0" />
-								{/if}
+							<li>
+								<UserRow user={u} canFollow={data.viewerId !== null && data.viewerId !== u.id} />
 							</li>
 						{/each}
 					</ul>
diff --git a/web-player/src/routes/(app)/user/[id]/+page.server.ts b/web-player/src/routes/(app)/user/[id]/+page.server.ts
index a936bef..9675eaa 100644
--- a/web-player/src/routes/(app)/user/[id]/+page.server.ts
+++ b/web-player/src/routes/(app)/user/[id]/+page.server.ts
@@ -39,15 +39,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch, parent
 
 	const isOwnProfile = viewer !== null && viewer.sub === params.id;
 
-	const isFollowing =
-		viewer && !isOwnProfile
-			? await api
-					.GET('/users/{id}/is-following', { params: { path: { id: params.id } } })
-					.then((res) => res.data ?? false)
-					.catch(() => false)
-			: false;
-
-	return { profile, playlists, isOwnProfile, isFollowing, isAnonymous: viewer === null };
+	return { profile, playlists, isOwnProfile, isAnonymous: viewer === null };
 };
 
 export const actions: Actions = {
diff --git a/web-player/src/routes/(app)/user/[id]/+page.svelte b/web-player/src/routes/(app)/user/[id]/+page.svelte
index 5de8dd2..322cfbe 100644
--- a/web-player/src/routes/(app)/user/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/user/[id]/+page.svelte
@@ -22,18 +22,27 @@
 </svelte:head>
 
 {#snippet followAction()}
-	<FollowButton following={data.isFollowing} invalidateAll />
+	<FollowButton following={profile.isFollowing} invalidateAll />
+{/snippet}
+
+{#snippet followStats()}
+	{@const followers = plural(Number(profile.followersCount), 'seguidor', 'seguidores')}
+	{#if data.isOwnProfile || profile.canViewFollowers}
+		<a href="/user/{profile.id}/followers" class="transition-colors hover:text-fg">{followers}</a>
+	{:else}
+		<span>{followers}</span>
+	{/if}
+	·
+	<a href="/user/{profile.id}/following" class="transition-colors hover:text-fg">
+		{profile.followingCount} siguiendo
+	</a>
 {/snippet}
 
 <Page>
 	<PageHeader
 		eyebrow="Perfil"
 		title={profile.name}
-		meta="{plural(
-			Number(profile.followersCount),
-			'seguidor',
-			'seguidores'
-		)} · {profile.followingCount} siguiendo"
+		meta={followStats}
 		align="center"
 		actions={canFollow ? followAction : undefined}
 	>
diff --git a/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.server.ts b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.server.ts
new file mode 100644
index 0000000..66dd166
--- /dev/null
+++ b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.server.ts
@@ -0,0 +1,32 @@
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient, optionalUser, unwrapOrError } from '$lib/server/api';
+import { fetchFollowList } from '$lib/server/follows';
+import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
+import { FOLLOW_LIST_PAGE_SIZE } from '$lib/config';
+
+export const load: PageServerLoad = async ({ params, locals, url, fetch, parent }) => {
+	const { allowAnonymousListening } = await parent();
+	const viewer = optionalUser(locals, url, allowAnonymousListening);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+
+	const [profileRes, listRes] = await Promise.all([
+		api.GET('/users/{id}/profile', { params: { path: { id: params.id } } }),
+		fetchFollowList(api, params.list, params.id, 1, FOLLOW_LIST_PAGE_SIZE)
+	]);
+
+	const profile = unwrapOrError(profileRes, 'Usuario no encontrado.', 404);
+	const forbidden = listRes.response?.status === 403;
+
+	return {
+		list: params.list,
+		profile,
+		users: forbidden ? null : unwrapOrError(listRes, 'No se pudo cargar la lista.'),
+		forbidden,
+		viewerId: viewer?.sub ?? null
+	};
+};
+
+export const actions: Actions = {
+	follow: followUserAction,
+	unfollow: unfollowUserAction
+};
diff --git a/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
new file mode 100644
index 0000000..e87c147
--- /dev/null
+++ b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Users from '@lucide/svelte/icons/users';
+	import Lock from '@lucide/svelte/icons/lock';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import UserRow from '$lib/components/ui/media/UserRow.svelte';
+	import { appendUnique } from '$lib/data/collections';
+	import { plural } from '$lib/utils/format';
+
+	let { data, form } = $props();
+
+	type ListUser = NonNullable<typeof data.users>['items'][number];
+
+	let items = $state<ListUser[]>([]);
+	let page = $state(1);
+	let hasMore = $state(false);
+	let loadingMore = $state(false);
+
+	$effect(() => {
+		items = data.users?.items ?? [];
+		page = Number(data.users?.pageNumber ?? 1);
+		hasMore = data.users?.hasNextPage ?? false;
+	});
+
+	const isFollowers = $derived(data.list === 'followers');
+	const title = $derived(isFollowers ? 'Seguidores' : 'Siguiendo');
+	const total = $derived(Number(data.users?.totalItemCount ?? 0));
+
+	async function loadMore() {
+		if (loadingMore) return;
+		loadingMore = true;
+		try {
+			const res = await fetch(`/api/users/${data.profile.id}/${data.list}?pageNumber=${page + 1}`);
+			if (!res.ok) throw new Error(String(res.status));
+			const next = (await res.json()) as NonNullable<typeof data.users>;
+			items = appendUnique(items, next.items, (u) => u.id);
+			page = Number(next.pageNumber);
+			hasMore = next.hasNextPage;
+		} catch {
+			hasMore = false;
+		} finally {
+			loadingMore = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{title} · {data.profile.name}</title>
+</svelte:head>
+
+<Page>
+	<PageHeader
+		eyebrow={data.profile.name}
+		{title}
+		meta={data.forbidden
+			? undefined
+			: isFollowers
+				? plural(total, 'seguidor', 'seguidores')
+				: plural(total, 'usuario', 'usuarios')}
+	/>
+
+	{#if form?.message}
+		<Alert class="mb-4">{form.message}</Alert>
+	{/if}
+
+	{#if data.forbidden}
+		<EmptyState
+			icon={Lock}
+			title="Seguidores privados"
+			description="Solo puedes ver los seguidores de {data.profile.name} si os seguís mutuamente."
+		/>
+	{:else if items.length === 0}
+		<EmptyState
+			icon={Users}
+			title={isFollowers ? 'Sin seguidores' : 'No sigue a nadie'}
+			description={isFollowers
+				? `Todavía nadie sigue a ${data.profile.name}.`
+				: `${data.profile.name} todavía no sigue a nadie.`}
+		/>
+	{:else}
+		<ul class="flex flex-col gap-1">
+			{#each items as user (user.id)}
+				<li>
+					<UserRow {user} canFollow={data.viewerId !== null && data.viewerId !== user.id} />
+				</li>
+			{/each}
+		</ul>
+		<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
+	{/if}
+</Page>
diff --git a/web-player/src/routes/api/users/[id]/[list=followList]/+server.ts b/web-player/src/routes/api/users/[id]/[list=followList]/+server.ts
new file mode 100644
index 0000000..b90b4a8
--- /dev/null
+++ b/web-player/src/routes/api/users/[id]/[list=followList]/+server.ts
@@ -0,0 +1,19 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { createApiClient, unwrapOrError } from '$lib/server/api';
+import { fetchFollowList } from '$lib/server/follows';
+import { FOLLOW_LIST_PAGE_SIZE } from '$lib/config';
+
+export const GET: RequestHandler = async ({ params, url, locals, fetch }) => {
+	const pageNumber = Math.max(1, Number(url.searchParams.get('pageNumber')) || 1);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+	const result = await fetchFollowList(
+		api,
+		params.list,
+		params.id,
+		pageNumber,
+		FOLLOW_LIST_PAGE_SIZE
+	);
+
+	return json(unwrapOrError(result, 'No se pudo cargar la lista.', result.response?.status));
+};
-- 
2.54.0


From b39e55fd87f3a1fbe2fb0e7b0be59f125e0035c7 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 23:15:15 +0200
Subject: [PATCH 22/26] Restore master hero and spotlight gradients and sway
 them in place

---
 web-player/src/lib/theme/tokens.ts | 12 ++++----
 web-player/src/routes/layout.css   | 45 ++++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index be8a7e9..0f3bc4c 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -53,18 +53,18 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			? `linear-gradient(90deg, oklch(0.5 0.1 ${H}), oklch(0.68 0.11 ${r(h + 18, 1)}), oklch(0.5 0.1 ${H}))`
 			: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
 		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
-		'--mf-hero-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.93, 0.03, 0.52)} 60%)`
-			: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`,
+		'--mf-hero-c1': light ? glow(0.9, 0.04, 0.6) : glow(0.24, 0.04, 0.55),
+		'--mf-hero-c2': light ? glow(0.96, 0.02, 0.4) : glow(0.14, 0.02, 0.35),
+		'--mf-hero-c3': light ? glow(0.96, 0.02, 0.4) : glow(0.12, 0.015, 0.25),
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
 			: `linear-gradient(135deg, ${glow(0.3, 0.045, 0.4)} 0%, ${glow(0.2, 0.03, 0.15)} 35%, transparent 70%)`,
 		'--mf-modal-glow-danger': light
 			? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
 			: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
-		'--mf-spotlight-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.93, 0.03, 0.47)} 55%)`
-			: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
+		'--mf-spotlight-c1': light ? glow(0.9, 0.04, 0.55) : glow(0.22, 0.04, 0.5),
+		'--mf-spotlight-c2': light ? glow(0.96, 0.02, 0.35) : glow(0.13, 0.02, 0.3),
+		'--mf-spotlight-c3': light ? glow(0.96, 0.02, 0.35) : glow(0.11, 0.015, 0.2),
 		'--mf-cover-grad': light
 			? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
 			: `linear-gradient(150deg, oklch(0.34 0.03 ${H}), oklch(0.18 0.015 ${H}))`
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 2c1d861..813d6cb 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -251,17 +251,23 @@
 	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility hero-surface {
-	background-image: var(--mf-hero-bg);
-	background-size: 125% 100%;
-	animation: gradient-drift 18s ease-in-out infinite alternate;
+	background-image: linear-gradient(
+		var(--gd-angle),
+		var(--mf-hero-c1),
+		var(--mf-hero-c2) calc(60% + var(--gd-shift)),
+		var(--mf-hero-c3)
+	);
+	animation: gradient-sway 18s ease-in-out infinite alternate;
 }
 @utility spotlight-surface {
-	background-size:
-		125% 100%,
-		100% 100%;
-	animation: gradient-drift 18s ease-in-out infinite alternate;
+	animation: gradient-sway 18s ease-in-out infinite alternate;
 	background-image:
-		var(--mf-spotlight-bg),
+		linear-gradient(
+			var(--gd-angle),
+			var(--mf-spotlight-c1),
+			var(--mf-spotlight-c2) calc(55% + var(--gd-shift)),
+			var(--mf-spotlight-c3)
+		),
 		linear-gradient(
 			to right,
 			transparent 50%,
@@ -372,6 +378,29 @@ button:disabled {
 	}
 }
 
+@property --gd-angle {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 120deg;
+}
+
+@property --gd-shift {
+	syntax: '<percentage>';
+	inherits: false;
+	initial-value: 0%;
+}
+
+@keyframes gradient-sway {
+	from {
+		--gd-angle: 110deg;
+		--gd-shift: -8%;
+	}
+	to {
+		--gd-angle: 132deg;
+		--gd-shift: 12%;
+	}
+}
+
 @keyframes gradient-drift {
 	from {
 		background-position: 0% 50%;
-- 
2.54.0


From 7316e355ee8267dc9b8eb00cd541bc2483429038 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 23:20:27 +0200
Subject: [PATCH 23/26] Add a second greeting variant per time slot

---
 web-player/src/lib/server/greeting.ts | 106 +++++++++++++-------------
 1 file changed, 55 insertions(+), 51 deletions(-)

diff --git a/web-player/src/lib/server/greeting.ts b/web-player/src/lib/server/greeting.ts
index 5375451..b9baee9 100644
--- a/web-player/src/lib/server/greeting.ts
+++ b/web-player/src/lib/server/greeting.ts
@@ -17,69 +17,72 @@ const BIRTHDAY_MESSAGE = 'Hoy toca celebrar. Tú eliges la música.';
 
 const HOUR_SLOTS = [6, 9, 12, 15, 18, 21, 24];
 
-const WEEKLY_SCHEDULE: string[][] = [
+const WEEKLY_SCHEDULE: [string, string][][] = [
 	[
-		'Domingo de madrugada.',
-		'Buenos días. Tómate el domingo con calma.',
-		'Domingo. Empieza despacio.',
-		'Una mañana tranquila merece buena música.',
-		'Domingo por la tarde. Hora de bajar el ritmo.',
-		'La semana empieza a despedirse.',
-		'Una última canción antes de volver a empezar.'
+		['Domingo de madrugada.', 'Madrugada de domingo. Todo va más lento.'],
+		['Buenos días. Tómate el domingo con calma.', 'Buenos días. Hoy nadie tiene prisa.'],
+		['Domingo. Empieza despacio.', 'Un domingo así pide algo tranquilo.'],
+		['Una mañana tranquila merece buena música.', 'Domingo al mediodía. Pon algo que abrace.'],
+		[
+			'Domingo por la tarde. Hora de bajar el ritmo.',
+			'La tarde del domingo se disfruta con calma.'
+		],
+		['La semana empieza a despedirse.', 'El domingo se va apagando. Deja que suene.'],
+		['Una última canción antes de volver a empezar.', 'Cierra el domingo con algo que te guste.']
 	],
 	[
-		'La semana acaba de empezar.',
-		'Buenos días. Empezamos otra semana.',
-		'Lunes. Dale una banda sonora al día.',
-		'Una pausa musical para este lunes.',
-		'El lunes todavía no ha terminado.',
-		'El lunes ya empieza a quedar atrás.',
-		'Sobrevive al lunes con una última canción.'
+		['La semana acaba de empezar.', 'Ya es lunes, aunque aún sea de noche.'],
+		['Buenos días. Empezamos otra semana.', 'Lunes por la mañana. Arranca con buen pie.'],
+		['Lunes. Dale una banda sonora al día.', 'El lunes se lleva mejor con música.'],
+		['Una pausa musical para este lunes.', 'Mediodía de lunes. Te has ganado un respiro.'],
+		['El lunes todavía no ha terminado.', 'Media tarde de lunes. Aguanta un poco más.'],
+		['El lunes ya empieza a quedar atrás.', 'Casi lo has conseguido. Un lunes menos.'],
+		['Sobrevive al lunes con una última canción.', 'Lunes superado. Ahora, lo que tú quieras.']
 	],
 	[
-		'La noche sigue sonando.',
-		'Buenos días. Martes en marcha.',
-		'La semana ya está cogiendo ritmo.',
-		'Martes al mediodía. ¿Qué escuchamos?',
-		'Una tarde cualquiera necesita música.',
-		'El día empieza a bajar el ritmo.',
-		'Un martes más llega a su fin.'
+		['La noche sigue sonando.', 'Martes de madrugada. La música no duerme.'],
+		['Buenos días. Martes en marcha.', 'Martes. Ya estás más despierto que ayer.'],
+		['La semana ya está cogiendo ritmo.', 'El martes ya tiene su propio compás.'],
+		['Martes al mediodía. ¿Qué escuchamos?', 'A mitad del martes. Una canción de por medio.'],
+		['Una tarde cualquiera necesita música.', 'Tarde de martes. Ponle algo con ritmo.'],
+		['El día empieza a bajar el ritmo.', 'Cae la tarde. Es buen momento para poner algo.'],
+		['Un martes más llega a su fin.', 'El martes se acaba. Ciérralo con música.']
 	],
 	[
-		'Mitad de semana, mitad de noche.',
-		'Buenos días. Ya es miércoles.',
-		'Ya estamos en el ecuador de la semana.',
-		'Miércoles al mediodía. Un poco de música.',
-		'La semana ya va cuesta abajo.',
-		'Unas canciones para terminar el miércoles.',
-		'Mitad de semana superada.'
+		['Mitad de semana, mitad de noche.', 'Miércoles de madrugada. Justo en el centro.'],
+		['Buenos días. Ya es miércoles.', 'Miércoles. La semana ya está de tu lado.'],
+		['Ya estamos en el ecuador de la semana.', 'Ecuador de la semana. Lo peor ya pasó.'],
+		['Miércoles al mediodía. Un poco de música.', 'Un descanso en pleno miércoles.'],
+		['La semana ya va cuesta abajo.', 'Miércoles por la tarde. Todo empieza a rodar.'],
+		['Unas canciones para terminar el miércoles.', 'El miércoles se despide. Ponle banda sonora.'],
+		['Mitad de semana superada.', 'Ya solo queda bajar la cuesta.']
 	],
 	[
-		'Una noche más antes del fin de semana.',
-		'Buenos días. Ya casi estamos.',
-		'Jueves. El fin de semana se acerca.',
-		'Una pausa musical antes de seguir.',
-		'Queda poco para desconectar.',
-		'Ya se empieza a notar el viernes.',
-		'Una noche más y llega el fin de semana.'
+		['Una noche más antes del fin de semana.', 'Jueves de madrugada. Queda menos.'],
+		['Buenos días. Ya casi estamos.', 'Jueves. Hoy se huele el viernes.'],
+		['Jueves. El fin de semana se acerca.', 'Un jueves con buena música se pasa volando.'],
+		['Una pausa musical antes de seguir.', 'Mediodía de jueves. Toca recargar pilas.'],
+		['Queda poco para desconectar.', 'Tarde de jueves. El fin de semana asoma.'],
+		['Ya se empieza a notar el viernes.', 'El jueves ya está de salida.'],
+		['Una noche más y llega el fin de semana.', 'Última noche de la semana laboral. Que suene.']
 	],
 	[
-		'La semana ha terminado. La noche continúa.',
-		'Buenos días. Es viernes.',
-		'Viernes. Hoy suena diferente.',
-		'Ya huele a fin de semana.',
-		'Últimas horas de la semana.',
-		'Se acabó la semana. Dale al play.',
-		'Viernes por la noche. Tú eliges la banda sonora.'
+		['La semana ha terminado. La noche continúa.', 'Viernes de madrugada. Aún queda noche.'],
+		['Buenos días. Es viernes.', 'Viernes. Hoy ya se nota el ambiente.'],
+		['Viernes. Hoy suena diferente.', 'Es viernes. Sube el volumen.'],
+		['Ya huele a fin de semana.', 'Mediodía de viernes. Casi libre.'],
+		['Últimas horas de la semana.', 'Tarde de viernes. La semana ya es historia.'],
+		['Se acabó la semana. Dale al play.', 'Empieza el fin de semana. Que empiece con música.'],
+		['Viernes por la noche. Tú eliges la banda sonora.', 'Noche de viernes. Que no falte música.']
 	],
 	[
-		'La noche es joven. Que siga sonando.',
-		'Buenos días. Hoy no hay prisa.',
-		'Sábado. Empieza el día a tu ritmo.',
-		'Mediodía de sábado. ¿Qué ponemos?',
-		'Una tarde de sábado pide música.',
-		'El sábado todavía tiene mucho por delante.',
-		'Esta noche puede sonar cualquier cosa.'
+		['La noche es joven. Que siga sonando.', 'Sábado de madrugada. La fiesta no acaba.'],
+		['Buenos días. Hoy no hay prisa.', 'Sábado por la mañana. Sin alarma y con música.'],
+		['Sábado. Empieza el día a tu ritmo.', 'Hoy manda el sábado. Tú pones el ritmo.'],
+		['Mediodía de sábado. ¿Qué ponemos?', 'Sábado al mediodía. Hora de elegir banda sonora.'],
+		['Una tarde de sábado pide música.', 'Tarde de sábado. Sin planes también se disfruta.'],
+		['El sábado todavía tiene mucho por delante.', 'Cae el sábado y aún queda mucho por sonar.'],
+		['Esta noche puede sonar cualquier cosa.', 'Noche de sábado. Todo vale, elige tú.']
 	]
 ];
 
@@ -99,5 +102,6 @@ export function pickGreeting(date: Date, birthday?: Birthday | null): string {
 
 	const hour = date.getHours();
 	const slot = HOUR_SLOTS.findIndex((until) => hour < until);
-	return WEEKLY_SCHEDULE[date.getDay()][slot === -1 ? 0 : slot];
+	const variant = Math.floor(date.getTime() / 86_400_000) % 2;
+	return WEEKLY_SCHEDULE[date.getDay()][slot === -1 ? 0 : slot][variant];
 }
-- 
2.54.0


From 0f28e19c1d26e3142e86b757a745612288c7beea Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 23:20:27 +0200
Subject: [PATCH 24/26] Remove follow button from user rows

---
 .../lib/components/ui/media/UserRow.svelte    | 20 ++++++-------------
 .../src/routes/(app)/explore/+page.svelte     |  2 +-
 .../user/[id]/[list=followList]/+page.svelte  |  2 +-
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/web-player/src/lib/components/ui/media/UserRow.svelte b/web-player/src/lib/components/ui/media/UserRow.svelte
index a9201e5..e873ce1 100644
--- a/web-player/src/lib/components/ui/media/UserRow.svelte
+++ b/web-player/src/lib/components/ui/media/UserRow.svelte
@@ -1,28 +1,20 @@
 <script lang="ts">
 	import ListRow from './ListRow.svelte';
 	import Avatar from './Avatar.svelte';
-	import FollowButton from './FollowButton.svelte';
 
 	interface Props {
 		user: {
 			id: string;
 			name: string;
 			profilePictureUrl: string | null;
-			isFollowedByViewer: boolean;
 		};
-		canFollow?: boolean;
 	}
 
-	let { user, canFollow = false }: Props = $props();
+	let { user }: Props = $props();
 </script>
 
-<div class="flex items-center gap-3">
-	<ListRow title={user.name} href="/user/{user.id}" size="lg" class="min-w-0 flex-1">
-		{#snippet art()}
-			<Avatar name={user.name} src={user.profilePictureUrl} size="md" />
-		{/snippet}
-	</ListRow>
-	{#if canFollow}
-		<FollowButton following={user.isFollowedByViewer} userId={user.id} class="shrink-0" />
-	{/if}
-</div>
+<ListRow title={user.name} href="/user/{user.id}" size="lg" class="min-w-0 flex-1">
+	{#snippet art()}
+		<Avatar name={user.name} src={user.profilePictureUrl} size="md" />
+	{/snippet}
+</ListRow>
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index a8c8d35..8e7ff6d 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -403,7 +403,7 @@
 					<ul class="flex flex-col gap-1">
 						{#each capped(sfilter, users) as u (u.id)}
 							<li>
-								<UserRow user={u} canFollow={data.viewerId !== null && data.viewerId !== u.id} />
+								<UserRow user={u} />
 							</li>
 						{/each}
 					</ul>
diff --git a/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
index e87c147..7dde364 100644
--- a/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
+++ b/web-player/src/routes/(app)/user/[id]/[list=followList]/+page.svelte
@@ -84,7 +84,7 @@
 		<ul class="flex flex-col gap-1">
 			{#each items as user (user.id)}
 				<li>
-					<UserRow {user} canFollow={data.viewerId !== null && data.viewerId !== user.id} />
+					<UserRow {user} />
 				</li>
 			{/each}
 		</ul>
-- 
2.54.0


From cfdc61a4b84a87930612b803147f500901e79054 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 23:52:27 +0200
Subject: [PATCH 25/26] Scroll content inside the shell so the player shares
 the ambient backdrop

The player dock used to sit fixed over the scrolling page, so it needed an
opaque background. The shell is now a fixed-height frame where only the
content column scrolls, letting the dock stay transparent like the sidebar
and queue. Scroll reset/restore on navigation moves to restoreScroll(), and
the stable scrollbar gutter moves from <html> to the content scroller.
---
 web-player/CLAUDE.md                          |  6 +++-
 web-player/src/app.html                       |  2 +-
 .../src/lib/components/layout/Sidebar.svelte  |  4 +--
 .../src/lib/components/layout/TabsBar.svelte  |  2 +-
 .../lib/components/player/PlayerBar.svelte    |  4 +--
 .../lib/components/player/PlayerDock.svelte   |  4 +--
 .../src/lib/components/player/Queue.svelte    |  6 ++--
 web-player/src/lib/state/navigation.svelte.ts | 22 +++++++++++-
 web-player/src/routes/+layout.svelte          | 34 +++++++++++--------
 web-player/src/routes/layout.css              | 19 ++++-------
 10 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/web-player/CLAUDE.md b/web-player/CLAUDE.md
index e1da22c..444ea62 100644
--- a/web-player/CLAUDE.md
+++ b/web-player/CLAUDE.md
@@ -57,9 +57,13 @@ The design system lives in `src/routes/layout.css` (`@theme` tokens plus `@utili
 - Reach for these base components before creating a new one: `Artwork`, `Avatar`, `ListRow`, `MediaIdentity`, `TrackList`, `MediaCard`, `PageHeader`, `ContextMenu`, `ConfirmDialog`, `PlayButton`, `Slider`, `Logo`, `Chip`, `SegmentedControl`, `CoverForm`.
 - **Icon stroke:** one global rule (`svg.lucide { stroke-width: 1.5 }` in `layout.css`) sets the stroke for every icon. Never pass `strokeWidth` to an icon, since any CSS rule overrides the SVG attribute and it would do nothing. For a different stroke on one icon, use a Tailwind `stroke-*` utility.
 
+## App shell
+
+The shell in `src/routes/+layout.svelte` is a fixed `h-dvh` frame: Sidebar | (content column over PlayerDock) | Queue. Only the content column (`app-scroll`) scrolls, so nothing ever passes under the dock and the chrome can stay transparent over `app-backdrop`. Because the window never scrolls, scroll reset/restore on navigation is handled by `restoreScroll()` in `$lib/state/navigation.svelte.ts`; don't use `window.scrollTo`/`scrollY`.
+
 ## Motion
 
-Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`, cover zoom on hover and the player dock padding.
+Every animation follows one scale of three durations and one easing curve, all defined in `theme.css`. Fast (`--mf-motion-fast`, 150ms) is for hover, focus and press feedback: color, opacity and small scale changes. Plain `transition` or `transition-colors` already uses it because it is the Tailwind default, so never write `duration-150`. Base (`--mf-motion-base`, 200ms) is for things that appear on top of the page or move inside a control: modals, menus, the queue panel, `animate-pop`, `animate-fade` and the segmented control thumb. Slow (`--mf-motion-slow`, 300ms) is for content entering the page and larger movement: `animate-enter`, cover zoom on hover.
 
 Entrances and movement always use `--mf-ease` (`ease-snappy` in Tailwind, `expoOut` in Svelte transitions), which feels immediate because most of the motion happens at the start. Color transitions keep the Tailwind default curve. Overlays must feel instant: the modal backdrop uses `transition:fade={{ duration: 200 }}` and the panel uses a local `pop` transition (opacity + scale + translateY, `expoOut`, 200ms) mirroring `animate-pop`'s keyframes — both directives so the modal fades and pops on close too, not just on open, and the whole thing settles in 200ms. Staggered lists use `--i` with 40ms steps capped at ten items.
 
diff --git a/web-player/src/app.html b/web-player/src/app.html
index 4d12503..58bf673 100644
--- a/web-player/src/app.html
+++ b/web-player/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="scrollbar-stable">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index b1322e0..7649cf9 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/web-player/src/lib/components/layout/Sidebar.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <aside
-	class="hidden shrink-0 flex-col border-r border-hairline p-5 lg:flex"
+	class="hidden min-h-0 shrink-0 flex-col border-r border-hairline p-5 lg:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<a href="/" class="mb-4">
@@ -73,7 +73,7 @@
 			{/if}
 		</div>
 
-		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-icon-md">
+		<div class="flex min-h-0 flex-1 flex-col gap-px overflow-y-auto pb-icon-md">
 			{#each playlists as playlist (playlist.id)}
 				{@const active = page.url.pathname === `/playlists/${playlist.id}`}
 				<ListRow
diff --git a/web-player/src/lib/components/layout/TabsBar.svelte b/web-player/src/lib/components/layout/TabsBar.svelte
index 4d79360..001bfd0 100644
--- a/web-player/src/lib/components/layout/TabsBar.svelte
+++ b/web-player/src/lib/components/layout/TabsBar.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <nav
-	class="pointer-events-auto flex items-center justify-around glass-bar px-4 py-2 lg:hidden {klass}"
+	class="pointer-events-auto flex items-center justify-around px-4 py-2 glass-bar lg:hidden {klass}"
 	style="padding-bottom:calc(0.4375rem + var(--mf-safe-b))"
 >
 	{#each links as link (link.href)}
diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 1e0feb6..0e2551e 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/web-player/src/lib/components/player/PlayerBar.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <div
-	class="animate-enter pointer-events-auto flex items-center gap-icon-md glass-bar px-4 py-3 sm:hidden"
+	class="animate-enter pointer-events-auto flex items-center gap-icon-md px-4 py-3 glass-bar sm:hidden"
 >
 	<div class="min-w-0 flex-1">
 		<TrackInfo compact />
@@ -26,7 +26,7 @@
 </div>
 
 <div
-	class="animate-enter pointer-events-auto hidden items-center gap-5 glass-bar px-4 py-3 sm:flex"
+	class="animate-enter pointer-events-auto hidden items-center gap-5 px-4 py-3 glass-bar sm:flex"
 >
 	<div class="w-(--mf-player-side-w) min-w-0 shrink-0">
 		<TrackInfo />
diff --git a/web-player/src/lib/components/player/PlayerDock.svelte b/web-player/src/lib/components/player/PlayerDock.svelte
index cdfbade..6540b90 100644
--- a/web-player/src/lib/components/player/PlayerDock.svelte
+++ b/web-player/src/lib/components/player/PlayerDock.svelte
@@ -13,9 +13,7 @@
 	const hasTrack = $derived(player.currentId !== null);
 </script>
 
-<div
-	class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-sticky) flex flex-col lg:left-(--mf-sidebar-w)"
->
+<div class="flex shrink-0 flex-col">
 	{#if hasTrack}
 		<PlayerBar />
 	{/if}
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 2265456..20b5a96 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/web-player/src/lib/components/player/Queue.svelte
@@ -43,8 +43,8 @@
 	inert={!queuePanel.open}
 >
 	<aside
-		class="flex shrink-0 flex-col border-l border-hairline px-4 pt-5"
-		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
+		class="flex min-h-0 shrink-0 flex-col border-l border-hairline px-4 pt-5 pb-5"
+		style="width:var(--mf-queue-w)"
 	>
 		<div class="mb-5 flex items-center justify-between">
 			<h2 class="font-display text-base font-medium tracking-tight text-fg">En cola</h2>
@@ -82,7 +82,7 @@
 
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="flex flex-1 flex-col gap-px overflow-y-auto"
+			class="flex min-h-0 flex-1 flex-col gap-px overflow-y-auto"
 			ondragover={(event) => dragFrom !== null && event.preventDefault()}
 			ondrop={onDrop}
 		>
diff --git a/web-player/src/lib/state/navigation.svelte.ts b/web-player/src/lib/state/navigation.svelte.ts
index 0d32598..afb3f44 100644
--- a/web-player/src/lib/state/navigation.svelte.ts
+++ b/web-player/src/lib/state/navigation.svelte.ts
@@ -1,4 +1,4 @@
-import { afterNavigate } from '$app/navigation';
+import { afterNavigate, beforeNavigate } from '$app/navigation';
 import type { LucideIcon } from '@lucide/svelte';
 import Home from '@lucide/svelte/icons/house';
 import Compass from '@lucide/svelte/icons/compass';
@@ -55,6 +55,26 @@ export function trackNavigation() {
 	});
 }
 
+const scrollPositions = new Map<number, number>();
+
+export function restoreScroll(getScroller: () => HTMLElement | undefined) {
+	let current: number | null = null;
+
+	beforeNavigate(() => {
+		const scroller = getScroller();
+		if (current !== null && scroller) scrollPositions.set(current, scroller.scrollTop);
+	});
+
+	afterNavigate((nav) => {
+		current = historyIndex();
+		const scroller = getScroller();
+		if (!scroller || nav.type === 'enter' || nav.to?.url.hash) return;
+		const saved =
+			nav.type === 'popstate' && current !== null ? scrollPositions.get(current) : undefined;
+		scroller.scrollTop = saved ?? 0;
+	});
+}
+
 export function previousPage(): PageRef | null {
 	return visited.get(index - 1) ?? null;
 }
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 0f15ca8..a39df73 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -19,12 +19,15 @@
 	import { ACCENT_HUE } from '$lib/theme/color';
 	import { buildThemeTokens, applyThemeTokens, tokensToCss } from '$lib/theme/tokens';
 	import { themeMode } from '$lib/theme/mode.svelte';
-	import { trackNavigation } from '$lib/state/navigation.svelte';
+	import { trackNavigation, restoreScroll } from '$lib/state/navigation.svelte';
 	import { page } from '$app/state';
 
 	let { children, data } = $props();
 
+	let scroller = $state<HTMLElement>();
+
 	trackNavigation();
+	restoreScroll(() => scroller);
 
 	$effect(() => {
 		if (data.likedTracks?.length) liked.hydrate(data.likedTracks);
@@ -35,7 +38,6 @@
 	});
 
 	const isAuthPage = $derived(page.url.pathname === '/auth');
-	const hasTrack = $derived(player.currentId !== null);
 
 	const initialThemeCss = `:root{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'dark'))}}:root[data-theme='light']{${tokensToCss(buildThemeTokens(ACCENT_HUE, 'light'))}}`;
 
@@ -101,28 +103,30 @@
 		{@render children()}
 	</div>
 {:else}
-	<div class="relative flex min-h-screen text-fg antialiased">
+	<div class="relative flex h-dvh overflow-hidden text-fg antialiased">
 		<div class="app-backdrop"></div>
 		<div class="app-vignette"></div>
 
 		<Sidebar user={data.user} playlists={data.sidebarPlaylists ?? []} />
 
-		<div class="flex min-w-0 flex-1">
-			<div class="flex min-w-0 flex-1 flex-col">
-				<MobileHeader user={data.user} accountUrl={data.accountUrl} />
-				<TopBar user={data.user} accountUrl={data.accountUrl} />
-				<main class="flex-1 app-main" data-has-track={hasTrack ? '' : undefined}>
-					{#key page.url.pathname}
-						<div class="animate-fade">{@render children()}</div>
-					{/key}
-				</main>
+		<div class="flex min-w-0 flex-1 flex-col">
+			<div class="flex min-h-0 flex-1">
+				<div bind:this={scroller} class="flex min-w-0 flex-1 app-scroll flex-col">
+					<MobileHeader user={data.user} accountUrl={data.accountUrl} />
+					<TopBar user={data.user} accountUrl={data.accountUrl} />
+					<main class="flex-1">
+						{#key page.url.pathname}
+							<div class="animate-fade">{@render children()}</div>
+						{/key}
+					</main>
+				</div>
+
+				<Queue />
 			</div>
 
-			<Queue />
+			<PlayerDock user={data.user} />
 		</div>
 
-		<PlayerDock user={data.user} />
-
 		<Modal
 			open={createPlaylistModal.open}
 			onClose={() => createPlaylistModal.close()}
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 813d6cb..23d1ddf 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -98,10 +98,6 @@
 	}
 }
 
-@utility scrollbar-stable {
-	scrollbar-gutter: stable;
-}
-
 @utility text-display-1 {
 	@apply font-display text-3xl font-medium tracking-tight sm:text-4xl;
 }
@@ -131,7 +127,6 @@
 	transition-duration: var(--default-transition-duration);
 }
 @utility glass-bar {
-	background-color: var(--mf-bg);
 	border-top: 1px solid var(--mf-hairline);
 }
 @utility grid-cards {
@@ -224,14 +219,12 @@
 		margin-bottom: --spacing(14);
 	}
 }
-@utility app-main {
-	--mf-dock-h: 0px;
-	padding-bottom: calc(var(--mf-nav-h) + var(--mf-safe-b) + var(--mf-dock-h));
-	transition: padding var(--mf-motion-slow) var(--mf-ease);
-
-	&[data-has-track] {
-		--mf-dock-h: var(--mf-player-h);
-	}
+@utility app-scroll {
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	scrollbar-gutter: stable;
+	scrollbar-width: thin;
+	scrollbar-color: var(--mf-scrollbar) transparent;
 }
 @utility genre-tile {
 	background: linear-gradient(
-- 
2.54.0


From 430c711ff2d0e680f347f4f55cc4a8be47113c4c Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 23:59:45 +0200
Subject: [PATCH 26/26] Refactor CI/CD workflow to improve database migration
 process and key generation

---
 .gitea/workflows/ci-cd.yml | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/.gitea/workflows/ci-cd.yml b/.gitea/workflows/ci-cd.yml
index af0d417..0871a84 100644
--- a/.gitea/workflows/ci-cd.yml
+++ b/.gitea/workflows/ci-cd.yml
@@ -86,11 +86,23 @@ jobs:
           git fetch origin master
           git reset --hard origin/master
 
-      - name: Migrate database, generate keys
+      - name: Generate stream-ticket keys
         run: |
           set -euo pipefail
           cd "$DEPLOY_PATH"
-          $COMPOSE up -d wait-for-postgres keys-init migrate
+          $COMPOSE run --rm --no-deps keys-init
+
+      # The migrations are baked into the migrator image, so it is rebuilt on
+      # every deploy (plain `up` would reuse the stale image and re-apply the
+      # old migrations). `run --rm` starts wait-for-postgres, blocks until the
+      # migration finishes and propagates its exit code, so a failed migration
+      # aborts the deploy before the new API is started against an old schema.
+      - name: Migrate database
+        run: |
+          set -euo pipefail
+          cd "$DEPLOY_PATH"
+          $COMPOSE build migrate
+          $COMPOSE run --rm migrate
 
       # Both jobs verify themselves through the public auth./s3. URLs, served
       # by the shared edge nginx (Infrastructure's edge/), and are idempotent.
-- 
2.54.0