Lighten active surface gradients in light mode

Extract FollowButton and shared follow/unfollow actions, reused by the user profile page.

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,

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);
     }
 }

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;
 

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");
+        }
+    }
+}

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");
 

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);

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}");

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);
         }
     }
 }

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(),

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()
         {

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.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
 
@@ -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
 

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>

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}

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}

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}

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" />
+			{:else if player.volume < 50}
+				<Volume1 class="size-icon-sm" />
+			{:else}
+				<Volume2 class="size-icon-sm" />
+			{/if}
+		</IconButton>
 		<Slider
-			value={player.volume}
+			value={player.muted ? 0 : player.volume}
 			max={100}
 			label="Volumen"
 			oninput={(value) => player.setVolume(value)}
@@ -63,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>

web-player/src/lib/components/player/Queue.svelte

@@ -5,20 +5,45 @@
 	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 X from '@lucide/svelte/icons/x';
+	import { flip } from 'svelte/animate';
-	import { fly } from 'svelte/transition';
 	import { expoOut } from 'svelte/easing';
+	import X from '@lucide/svelte/icons/x';
 
 	const upcoming = $derived.by(() => {
 		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>
 
-{#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="flex shrink-0 flex-col border-l border-hairline px-4 pt-5"
-		class="hidden shrink-0 flex-col border-l border-hairline px-4 pt-5 sm:flex"
 		style="width:var(--mf-queue-w); padding-bottom:calc(var(--mf-player-h) + 2rem)"
 	>
 		<div class="mb-5 flex items-center justify-between">
@@ -30,12 +55,13 @@
 
 		{#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}
 					artist={player.current.artist || '—'}
 					ownerUserId={player.current.ownerUserId}
+					explicit={player.current.explicit}
 					active
 				/>
 			</div>
@@ -54,27 +80,66 @@
 			{/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}
-				<ListRow
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
-					onclick={() => player.playQueueIndex(index)}
+				<div
-					size="sm"
+					draggable="true"
-					title={track.title}
+					ondragstart={(event) => {
-					subtitle={track.artist || '—'}
+						dragFrom = index;
-					subtitleHref={track.ownerUserId}
+						if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
-					trackId={track.id}
+					}}
-					class="p-2"
+					ondragover={(event) => onDragOver(event, index)}
+					ondrop={onDrop}
+					ondragend={endDrag}
+					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 }}
 				>
-					{#snippet trailing()}
+					{#if dropAt === index && dragFrom !== null}
-						{#if track.duration}
+						<div
-							<span class="shrink-0 text-xs text-fg-2 tabular-nums">{fmtTime(track.duration)}</span>
+							class="pointer-events-none absolute inset-x-2 -top-7 h-0.5 rounded-full bg-accent"
-						{/if}
+						></div>
-					{/snippet}
+					{:else if dropAt === index + 1 && dropAt === player.tracks.length && dragFrom !== null}
-				</ListRow>
+						<div
+							class="pointer-events-none absolute inset-x-2 -bottom-7 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}
+						explicit={track.explicit}
+						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}
 		</div>
 	</aside>
-{/if}
+</div>

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 />
@@ -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.7} />
+			<Heart class="size-icon-md" fill={isLiked ? 'currentColor' : 'none'} />
 		</IconButton>
 	{/if}
 </div>

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>

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>

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}

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 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
 >

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>

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)}

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>

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
+	transition:pop|global
-		? 'border border-hairline'
+	class="glass-panel rounded-panel p-1.5 {border ? 'border border-hairline' : ''} {klass}"
-		: ''} {klass}"
 	{style}
 >
 	{@render children()}

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 { pop } from '$lib/utils/transitions';
-	import type { TransitionConfig } from 'svelte/transition';
 
 	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') {
@@ -90,7 +80,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}

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>

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">

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%;

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', () => {
@@ -206,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);
 	};
 
@@ -401,6 +412,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();
@@ -433,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];
 	}
@@ -459,6 +492,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;

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);

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.
@@ -45,14 +45,16 @@ 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%)`
+			? `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%)`
@@ -61,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}))`

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);`
+	};
+}

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}

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
 };

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';
@@ -337,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}
@@ -400,12 +402,15 @@
 					<SectionHeading title="Usuarios" count={counts.Usuarios} />
 					<ul class="flex flex-col gap-1">
 						{#each capped(sfilter, users) as u (u.id)}
-							<li>
+							<li class="flex items-center gap-3">
-								<ListRow title={u.name} href="/user/{u.id}" size="lg">
+								<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>

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()}

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
 			}
 		});
 

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 = [];
@@ -130,7 +133,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 +149,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 +210,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">
@@ -224,53 +227,69 @@
 				{/if}
 			</div>
 
-			<div class="grid items-start gap-6 sm:grid-cols-[auto_1fr] sm:gap-8">
+			<Surface padding="md">
-				<Field label="Portada">
+				<div class="grid items-start gap-6 md:grid-cols-[auto_1fr] md:gap-10">
-					{#key coverResetToken}
+					<Field label="Portada" class="items-center md:items-start">
-						<ImageDropzone
+						{#key coverResetToken}
-							name="cover"
+							<ImageDropzone
-							icon={ImageIcon}
+								name="cover"
-							gradient
+								icon={ImageIcon}
-							size="hero"
+								gradient
-							onselect={() => (hasCover = true)}
+								onselect={() => (hasCover = true)}
-						/>
+							/>
-					{/key}
+						{/key}
-				</Field>
+						{#snippet hint()}
+							<p>{hasCover ? 'Portada lista' : 'Haz clic para elegir'}</p>
+						{/snippet}
+					</Field>
 
-				<Field label="Título" for="title">
+					<div class="flex min-w-0 flex-col gap-7">
-					<Input
+						<Field label="Título" for="title">
-						id="title"
+							<Input
-						name="title"
+								id="title"
-						bind:value={title}
+								name="title"
-						maxlength={MAX_TITLE}
+								bind:value={title}
-						placeholder="Nombre de la canción"
+								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>
+							{#snippet hint()}
-						<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
+								<p>Se usa como nombre público de la pista en el catálogo.</p>
-					{/snippet}
+								<span class="shrink-0 tabular-nums">{title.length}/{MAX_TITLE}</span>
-				</Field>
+							{/snippet}
-			</div>
+						</Field>
 
-			<Field label="Géneros">
+						<Field label="Géneros">
-				<div class="flex flex-wrap gap-2">
+							<div class="mb-2 flex flex-wrap gap-2">
-					{#each TRACK_GENRES as genre (genre.value)}
+								{#each TRACK_GENRES as genre (genre.value)}
-						<Chip
+									<Chip
-							selected={tags.includes(genre.value)}
+										selected={tags.includes(genre.value)}
-							disabled={tagBlocked(genre.value)}
+										disabled={tagBlocked(genre.value)}
-							onclick={() => toggleTag(genre.value)}
+										onclick={() => toggleTag(genre.value)}
-						>
+									>
-							{genre.label}
+										{genre.label}
-						</Chip>
+									</Chip>
-					{/each}
+								{/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>
+
+						<Checkbox bind:checked={isExplicit} name="isExplicit">
+							<span class="inline-flex items-center gap-2">
+								Contenido explícito
+								<ExplicitBadge />
+							</span>
+						</Checkbox>
+					</div>
 				</div>
-				{#each tags as tag (tag)}
+			</Surface>
-					<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>
 
 			<Checkbox bind:checked={acceptedTerms}>
 				Acepto los

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

@@ -1,10 +1,6 @@
 import type { PageServerLoad, Actions } from './$types';
-import {
+import { createApiClient, optionalUser, unwrapOrError } from '$lib/server/api';
-	createApiClient,
+import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
-	optionalUser,
-	requireAccessTokenAction,
-	unwrapOrError
-} from '$lib/server/api';
 
 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 }) => {
+	follow: followUserAction,
-		const accessToken = requireAccessTokenAction(locals);
+	unfollow: unfollowUserAction
-		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 };
-	}
 };

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
+	<FollowButton following={data.isFollowing} invalidateAll />
-		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>
 {/snippet}
 
 <Page>

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);

web-player/src/routes/+page.svelte

@@ -134,11 +134,11 @@
 </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"
 		>
-			<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"
 				>
@@ -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}"
@@ -209,7 +210,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
@@ -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"

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;
@@ -169,10 +168,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;
@@ -185,6 +190,40 @@
 		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 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));
@@ -203,14 +242,24 @@
 }
 @utility surface-active {
 	background-image: var(--mf-g-active);
+	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: 125% 100%;
+	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;
 }
 @utility spotlight-surface {
+	background-size:
+		125% 100%,
+		100% 100%;
+	animation: gradient-drift 18s ease-in-out infinite alternate;
 	background-image:
 		var(--mf-spotlight-bg),
 		linear-gradient(
@@ -220,13 +269,17 @@
 			transparent 92.5%
 		);
 }
+@utility glow-drift {
+	background-size: 125% 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;
 }
 
 @layer base {
 	svg.lucide {
-		stroke-width: 1.8;
+		stroke-width: 1.5;
 	}
 }
 
@@ -307,6 +360,27 @@ 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 gradient-drift {
+	from {
+		background-position: 0% 50%;
+	}
+	to {
+		background-position: 100% 50%;
+	}
+}
+
 @keyframes sheen {
 	from {
 		background-position: 200% 0;
@@ -346,6 +420,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;