refactor: tighten the home typography and card craft

The playlist cards were showing "No description was pr…" because the API
stored that English sentence whenever a playlist was created without a
description. Descriptions are optional now and the old rows are cleared.

Section headings drop to 18/20px so they stop competing with the content,
and the space moved from inside the sections to between them.

The three media cards repeated the same anchor, art class and label
block, so they share a MediaCard that also carries the hover lift the
track tiles already had.

backend/Musify.Api/DataTransferObjects/PlayLists/CreatePlayListRequest.cs

@@ -2,5 +2,5 @@ namespace Musify.Api.DataTransferObjects.PlayLists;
 
 public record CreatePlayListRequest(
     string Name,
-    string Description,
+    string? Description,
     Guid? PictureIntentId);

backend/Musify.Api/Endpoints/PlayListEndpoints.cs

@@ -181,12 +181,8 @@ public static class PlayListEndpoints
         CreatePlayListRequest request,
         CancellationToken cancellationToken)
     {
-        var description = string.IsNullOrWhiteSpace(request.Description)
-            ? "No description was provided."
-            : request.Description;
-
         var result = await mediator.Send(
-            new CreatePlayListCommand(currentUser.RequiredId, request.Name, description, request.PictureIntentId),
+            new CreatePlayListCommand(currentUser.RequiredId, request.Name, request.Description, request.PictureIntentId),
             cancellationToken);
 
         return result.ToCreatedResult(playList => $"/playlists/{playList.Id}");

backend/Musify.Application/PlayLists/CreatePlayList.cs

@@ -16,7 +16,7 @@ namespace Musify.Application.PlayLists
     public record CreatePlayListCommand(
         long UserId,
         string Name,
-        string Description,
+        string? Description,
         Guid? PictureIntentId)
         : ICommand<ErrorOr<PlayListApplicationResponse>>;
 
@@ -58,7 +58,7 @@ namespace Musify.Application.PlayLists
                 UserId = request.UserId,
                 Name = request.Name,
                 NormalizedName = request.Name.Trim().ToUpperInvariant(),
-                Description = request.Description,
+                Description = string.IsNullOrWhiteSpace(request.Description) ? null : request.Description.Trim(),
                 Pictures = pictureIntent == null ? null
                     : new PlayListPictures { OriginalName = pictureIntent.ObjectName }
             };

backend/Musify.Domain/Entities/PlayList.cs

@@ -1,4 +1,4 @@
-using System.ComponentModel.DataAnnotations;
+using System.ComponentModel.DataAnnotations;
 using System.ComponentModel.DataAnnotations.Schema;
 
 using Musify.Domain.Abstractions;
@@ -24,7 +24,6 @@ namespace Musify.Domain.Entities
         [MaxLength(50)]
         public required string NormalizedName { get; set; }
 
-        [Required]
         [MaxLength(256)]
         public string? Description { get; set; }
 

backend/Musify.Infrastructure/Persistence/Migrations/20260721190735_MakePlayListDescriptionOptional.cs

@@ -0,0 +1,46 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Musify.Infrastructure.Persistence.Migrations
+{
+    /// <inheritdoc />
+    public partial class MakePlayListDescriptionOptional : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<string>(
+                name: "Description",
+                table: "PlayLists",
+                type: "character varying(256)",
+                maxLength: 256,
+                nullable: true,
+                oldClrType: typeof(string),
+                oldType: "character varying(256)",
+                oldMaxLength: 256);
+
+            migrationBuilder.Sql(
+                """
+                UPDATE "PlayLists" SET "Description" = NULL
+                WHERE "Description" = 'No description was provided.';
+                """);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterColumn<string>(
+                name: "Description",
+                table: "PlayLists",
+                type: "character varying(256)",
+                maxLength: 256,
+                nullable: false,
+                defaultValue: "",
+                oldClrType: typeof(string),
+                oldType: "character varying(256)",
+                oldMaxLength: 256,
+                oldNullable: true);
+        }
+    }
+}

backend/Musify.Infrastructure/Persistence/Migrations/DatabaseModelSnapshot.cs

@@ -409,7 +409,6 @@ namespace Musify.Infrastructure.Persistence.Migrations
                         .HasColumnType("timestamp with time zone");
 
                     b.Property<string>("Description")
-                        .IsRequired()
                         .HasMaxLength(256)
                         .HasColumnType("character varying(256)");
 

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

@@ -22,7 +22,7 @@
 <header
 	class="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-line bg-bg/85 page-x backdrop-blur-md md:hidden"
 >
-	<a href="/" class="text-lg font-extrabold tracking-wide">Musify</a>
+	<a href="/" class="text-lg font-semibold tracking-wide">Musify</a>
 
 	<div class="relative" bind:this={menuRef}>
 		<button

web-player/src/lib/components/ui/AlbumCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
 	import Cover from './Cover.svelte';
 	import { hueFor } from '$lib/theme/color';
@@ -45,12 +46,14 @@
 	);
 </script>
 
-<a
+<MediaCard
 	href={href ?? `/albums/${id}`}
-	class="group animate-enter min-w-0 text-left"
-	style="animation-delay:{index * 45}ms"
+	{title}
+	subtitle={meta}
+	{index}
 	oncontextmenu={onContextMenu}
 >
+	{#snippet art(artClass)}
 		{#if coverSrc}
 			<Cover
 				trackId={id}
@@ -58,17 +61,10 @@
 				hue={hueFor(id)}
 				size="large"
 				alt={title}
-			class="aspect-square w-full rounded-art shadow-art transition group-hover:shadow-art-lg"
+				class={artClass}
 			/>
 		{:else}
-		<PlaylistArt
-			{trackIds}
-			hue={hueFor(id)}
-			class="aspect-square w-full rounded-art shadow-art transition group-hover:shadow-art-lg"
-		/>
+			<PlaylistArt {trackIds} hue={hueFor(id)} class={artClass} />
 		{/if}
-	<div class="mt-2.5 truncate text-fg">{title}</div>
-	{#if meta}
-		<div class="mt-0.5 truncate text-sm text-fg-3">{meta}</div>
-	{/if}
-</a>
+	{/snippet}
+</MediaCard>

web-player/src/lib/components/ui/EmptyState.svelte

@@ -20,7 +20,7 @@
 		</span>
 	{/if}
 	{#if title}
-		<h3 class="mt-5 text-2xl font-bold tracking-tight text-fg">{title}</h3>
+		<h3 class="mt-5 text-2xl font-semibold tracking-tight text-fg">{title}</h3>
 	{/if}
 	{#if description}
 		<p class="mt-2 text-fg-2">{description}</p>

web-player/src/lib/components/ui/MediaCard.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+	export const mediaCardArt =
+		'aspect-square w-full rounded-art shadow-art transition duration-300 ease-out group-hover:-translate-y-1 group-hover:shadow-art-lg';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href: string;
+		title: string;
+		subtitle?: string | null;
+		index?: number;
+		oncontextmenu?: (event: MouseEvent) => void;
+		art: Snippet<[string]>;
+	}
+
+	let { href, title, subtitle, index = 0, oncontextmenu, art }: Props = $props();
+</script>
+
+<a
+	{href}
+	class="group animate-enter min-w-0 text-left"
+	style="animation-delay:{index * 45}ms"
+	{oncontextmenu}
+>
+	{@render art(mediaCardArt)}
+	<div class="mt-2.5 truncate text-fg transition-colors group-hover:text-accent-soft">{title}</div>
+	{#if subtitle}
+		<div class="mt-0.5 truncate text-sm text-fg-3">{subtitle}</div>
+	{/if}
+</a>

web-player/src/lib/components/ui/MediaGrid.svelte

@@ -11,7 +11,7 @@
 
 	let {
 		as = 'div',
-		min = '200px',
+		min = '165px',
 		minMobile = '150px',
 		class: klass = '',
 		children

web-player/src/lib/components/ui/MixCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import MediaCard from './MediaCard.svelte';
 	import MixArt from './MixArt.svelte';
 	import { hueFor } from '$lib/theme/color';
 	import type { Mix } from '$lib/mixes';
@@ -13,19 +14,13 @@
 	const count = $derived(Number(mix.itemCount));
 </script>
 
-<a
+<MediaCard
 	href="/mixes/{mix.id}"
-	class="group animate-enter min-w-0 text-left"
-	style="animation-delay:{index * 45}ms"
+	title={mix.title}
+	subtitle="{count} {count === 1 ? 'canción' : 'canciones'}"
+	{index}
 >
-	<MixArt
-		items={mix.items}
-		hue={hueFor(mix.id)}
-		class="aspect-square w-full rounded-art shadow-art transition group-hover:shadow-art-lg"
-	/>
-	<div class="mt-2.5 truncate text-fg">{mix.title}</div>
-	<div class="mt-0.5 truncate text-sm text-fg-3">
-		{count}
-		{count === 1 ? 'canción' : 'canciones'}
-	</div>
-</a>
+	{#snippet art(artClass)}
+		<MixArt items={mix.items} hue={hueFor(mix.id)} class={artClass} />
+	{/snippet}
+</MediaCard>

web-player/src/lib/components/ui/Modal.svelte

@@ -82,7 +82,7 @@
 		>
 			{#if title}
 				<div class="flex items-center justify-between">
-					<h2 class="text-lg font-bold tracking-tight text-fg">{title}</h2>
+					<h2 class="text-lg font-semibold tracking-tight text-fg">{title}</h2>
 					<IconButton label="Cerrar" onclick={onClose}>
 						<X class="h-4 w-4" />
 					</IconButton>

web-player/src/lib/components/ui/PageHeader.svelte

@@ -13,7 +13,7 @@
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between {klass}">
 	<div class="min-w-0">
-		<h1 class="text-2xl font-bold tracking-tight text-fg sm:text-4xl">{title}</h1>
+		<h1 class="text-2xl font-semibold tracking-tight text-fg sm:text-4xl">{title}</h1>
 		{#if subtitle}
 			<p class="mt-2 text-sm text-fg-2 sm:text-base">{subtitle}</p>
 		{/if}

web-player/src/lib/components/ui/PlaylistCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
 	import { hueFor } from '$lib/theme/color';
 
@@ -14,20 +15,8 @@
 	let { id, name, description, trackIds, updatedAt, index = 0 }: Props = $props();
 </script>
 
-<a
-	href="/playlists/{id}"
-	class="group animate-enter min-w-0 text-left"
-	style="animation-delay:{index * 45}ms"
->
-	<PlaylistArt
-		playlistId={id}
-		{trackIds}
-		hue={hueFor(id)}
-		version={updatedAt}
-		class="aspect-square w-full rounded-art shadow-art transition group-hover:shadow-art-lg"
-	/>
-	<div class="mt-2.5 truncate text-fg">{name}</div>
-	{#if description}
-		<div class="mt-0.5 truncate text-sm text-fg-3">{description}</div>
-	{/if}
-</a>
+<MediaCard href="/playlists/{id}" title={name} subtitle={description} {index}>
+	{#snippet art(artClass)}
+		<PlaylistArt playlistId={id} {trackIds} hue={hueFor(id)} version={updatedAt} class={artClass} />
+	{/snippet}
+</MediaCard>

web-player/src/lib/components/ui/SectionHeading.svelte

@@ -11,10 +11,12 @@
 </script>
 
 {#if actions}
-	<div class="mb-4 flex items-center justify-between gap-4 sm:mb-6 {klass}">
-		<h2 class="text-xl font-bold text-fg sm:text-2xl">{title}</h2>
+	<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass}">
+		<h2 class="text-lg font-semibold tracking-tight text-fg sm:text-xl">{title}</h2>
 		{@render actions()}
 	</div>
 {:else}
-	<h2 class="mb-4 text-xl font-bold text-fg sm:mb-6 sm:text-2xl {klass}">{title}</h2>
+	<h2 class="mb-3 text-lg font-semibold tracking-tight text-fg sm:mb-4 sm:text-xl {klass}">
+		{title}
+	</h2>
 {/if}

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

@@ -77,7 +77,7 @@
 </Modal>
 
 <Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
-	<h2 class="text-lg font-bold tracking-tight text-fg">
+	<h2 class="text-lg font-semibold tracking-tight text-fg">
 		¿Eliminar «{album.title}»?
 	</h2>
 	<p class="mt-2 text-base text-fg-3">

web-player/src/routes/(app)/albums/[id]/components/AlbumHeader.svelte

@@ -64,7 +64,7 @@
 	<div class="min-w-0 flex-1">
 		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Álbum</p>
 		<h1
-			class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 		>
 			{title}
 		</h1>

web-player/src/routes/(app)/albums/youtube/[albumId]/+page.svelte

@@ -103,7 +103,7 @@
 				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} · YouTube Music
 			</p>
 			<h1
-				class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 			>
 				{album.title}
 			</h1>

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

@@ -85,7 +85,7 @@
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
 			<h1
-				class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 			>
 				{mix.title}
 			</h1>

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

@@ -79,7 +79,7 @@
 </Modal>
 
 <Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
-	<h2 class="text-lg font-bold tracking-tight text-fg">
+	<h2 class="text-lg font-semibold tracking-tight text-fg">
 		¿Eliminar «{playlist.name}»?
 	</h2>
 	<p class="mt-2 text-base text-fg-3">

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

@@ -46,7 +46,7 @@
 	<div class="min-w-0 flex-1">
 		<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
 		<h1
-			class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
+			class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
 		>
 			{name}
 		</h1>

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

@@ -141,7 +141,7 @@
 			>
 				<Check class="h-8 w-8" strokeWidth={2.5} />
 			</span>
-			<h2 class="mt-6 text-2xl font-bold tracking-tight text-fg">¡Subida!</h2>
+			<h2 class="mt-6 text-2xl font-semibold tracking-tight text-fg">¡Subida!</h2>
 			<p class="mt-3 text-fg-2">
 				«{publishedTitle}» se está procesando. Aparecerá lista para reproducir en tu biblioteca en
 				unos momentos.

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

@@ -178,14 +178,14 @@
 	></div>
 	<div class="animate-enter relative flex flex-col gap-2 sm:gap-2.5">
 		<p class="text-sm tracking-[0.14em] text-fg-2 uppercase sm:text-base">{data.greeting}</p>
-		<h1 class="max-w-160 text-3xl leading-[1.05] font-extrabold text-fg sm:text-5xl">
+		<h1 class="max-w-160 text-3xl leading-[1.05] font-semibold text-fg sm:text-5xl">
 			Tu música. Sin límites.
 		</h1>
 	</div>
 </section>
 
 {#if recentlyPlayed.length > 0}
-	<section class="page-x pt-5 pb-3 sm:pt-6">
+	<section class="page-x pt-10 sm:pt-14">
 		<SectionHeading title="Volver a escuchar" />
 		<MediaGrid min="280px" minMobile="220px">
 			{#each recentlyPlayed as track, i (track.id)}
@@ -228,7 +228,7 @@
 {/if}
 
 {#if mixes.length > 0 || playlists.length > 0}
-	<section class="grid gap-x-8 gap-y-5 page-x pt-5 pb-3 sm:pt-6 lg:grid-cols-2">
+	<section class="grid gap-x-8 gap-y-10 page-x pt-10 sm:pt-14 lg:grid-cols-2">
 		{#if mixes.length > 0}
 			<div class="min-w-0">
 				<SectionHeading title="Hechas para ti" />
@@ -269,7 +269,7 @@
 {/if}
 
 {#if albums.length > 0}
-	<section class="page-x pt-5 pb-3 sm:pt-6">
+	<section class="page-x pt-10 sm:pt-14">
 		<SectionHeading title="Álbumes escuchados recientemente">
 			{#snippet actions()}
 				<a href="/albums" class="text-sm text-fg-3 transition hover:text-accent-soft">Ver todos</a>
@@ -290,7 +290,7 @@
 	</section>
 {/if}
 
-<section class="page-x pt-5 pb-10 sm:pt-6">
+<section class="page-x pt-10 pb-16 sm:pt-14">
 	<SectionHeading title="Descubrir" />
 	{#if latest.length > 0}
 		<MediaGrid as="ul">
@@ -299,6 +299,7 @@
 					id={targetId(item)}
 					title={targetTitle(item)}
 					artist={targetArtist(item)}
+					coverShape="round"
 					coverSrc={targetCoverSrc(item)}
 					hue={hueFor(targetId(item))}
 					explicit={targetExplicit(item)}

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

@@ -13,10 +13,10 @@
 
 <div class="grid min-h-screen place-items-center bg-bg px-6 text-fg">
 	<div class="flex w-full max-w-110 flex-col items-center gap-9 text-center">
-		<div class="text-3xl font-extrabold tracking-tight">Musify</div>
+		<div class="text-3xl font-semibold tracking-tight">Musify</div>
 
 		<div>
-			<h1 class="text-4xl font-extrabold tracking-tight">Tu música. Sin límites.</h1>
+			<h1 class="text-4xl font-semibold tracking-tight">Tu música. Sin límites.</h1>
 			<p class="mt-3 text-base text-fg-2">Inicia sesión para continuar.</p>
 		</div>