backend/Musify.Application/Albums/GetRecentlyListenedAlbums.cs

@@ -36,7 +36,7 @@ namespace Musify.Application.Albums
 
             var albumIds = ranked.Select(entry => entry.AlbumId).ToList();
 
-            var albums = await database.UserAlbums
+            var albums = await database.Albums
                 .AsNoTracking()
                 .Where(album => albumIds.Contains(album.Id))
                 .Select(album => new

backend/Musify.Application/Albums/Responses/AlbumApplicationResponse.cs

@@ -14,7 +14,9 @@ namespace Musify.Application.Albums.Responses
         string? LargeImageKeyName,
         DateTime CreatedAt,
         DateTime UpdatedAt,
-        IReadOnlyList<Guid> CoverTrackIds)
+        IReadOnlyList<Guid> CoverTrackIds,
+        string? YouTubeAlbumId = null,
+        string? ThumbnailUrl = null)
     {
         public const int CoverTrackCount = 4;
 
@@ -37,5 +39,28 @@ namespace Musify.Application.Albums.Responses
                 album.UpdatedAt,
                 coverTrackIds ?? []);
         }
+
+        public static AlbumApplicationResponse FromEntity(
+            Album album,
+            int trackCount,
+            IReadOnlyList<Guid>? coverTrackIds = null)
+        {
+            var externalAlbum = album as ExternalAlbum;
+            return new AlbumApplicationResponse(
+                album.Id,
+                album.Title,
+                album.Description,
+                album.ReleaseYear,
+                album is UserAlbum userAlbum ? userAlbum.OwnerUserId : 0,
+                trackCount,
+                album.Pictures?.SmallName,
+                album.Pictures?.MediumName,
+                album.Pictures?.LargeName,
+                album.CreatedAt,
+                album.UpdatedAt,
+                coverTrackIds ?? [],
+                externalAlbum?.ExternalId,
+                externalAlbum?.ThumbnailUrl);
+        }
     }
 }

backend/Musify.Application/Configuration/PlayListConfiguration.cs

@@ -12,6 +12,10 @@ namespace Musify.Application.Configuration
 
         [Required]
         public PlayListPicturesSizes PicturesSizes { get; set; } = new PlayListPicturesSizes();
+
+        public bool SeedPresetPictures { get; set; } = true;
+
+        public bool OverwritePresetPictures { get; set; } = false;
     }
 
     public class PlayListRoutes

backend/Musify.Application/Contracts/IDatabase.cs

@@ -13,6 +13,8 @@ namespace Musify.Application.Contracts
 
         DbSet<UserAlbum> UserAlbums { get; }
 
+        DbSet<ExternalAlbum> ExternalAlbums { get; }
+
         DbSet<AlbumHasTrack> AlbumHasTracks { get; }
 
         DbSet<Track> Tracks { get; }

backend/Musify.Application/PlayLists/GetPlayListsByUserId.cs

@@ -1,11 +1,12 @@
 using ErrorOr;
+using Mediator;
 using Microsoft.EntityFrameworkCore;
-using Musify.Application.Shared;
+using Musify.Application.Contracts;
 using Musify.Application.PlayLists.Responses;
+using Musify.Application.Shared;
+using Musify.Domain.ValueObjects;
 using X.PagedList;
 using X.PagedList.EF;
-using Mediator;
-using Musify.Application.Contracts;
 
 namespace Musify.Application.PlayLists
 {
@@ -35,6 +36,7 @@ namespace Musify.Application.PlayLists
 
             var pagedEntities = await playListsQuery
                 .OrderBy(p => p.CreatedAt)
+                .Where(p => p.LifeCycleStatus == LifeCycleStatus.Active)
                 .Select(p => new
                 {
                     PlayList = p,
@@ -43,7 +45,7 @@ namespace Musify.Application.PlayLists
                         .Take(PlayListApplicationResponse.CoverTrackCount)
                         .Select(plt => plt.TrackId)
                         .ToList()
-                })
+                } )
                 .ToPagedListAsync(request.PageNumber, request.PageSize, totalCount, cancellationToken);
 
             var pagedPlayLists = new StaticPagedList<PlayListApplicationResponse>(

backend/Musify.Application/Services/YouTubeTrackProvisioner.cs

@@ -96,6 +96,108 @@ public sealed class YouTubeTrackProvisioner(
         }
     }
 
+    public async Task MaterializeAlbumAsync(string albumExternalId, YouTubeAlbumDetail detail, CancellationToken cancellationToken)
+    {
+        var validTracks = detail.Tracks
+            .Where(track => !string.IsNullOrEmpty(track.VideoId))
+            .ToList();
+        if (validTracks.Count == 0)
+            return;
+
+        var album = await GetOrCreateExternalAlbumAsync(albumExternalId, detail.Album.Title, detail.Album.ThumbnailUrl, cancellationToken);
+
+        var videoIds = validTracks.Select(track => track.VideoId).ToList();
+
+        var tracksByVideoId = await database.ExternalTracks
+            .Where(track => track.Source == TrackSource.YouTube && videoIds.Contains(track.ExternalId))
+            .ToDictionaryAsync(track => track.ExternalId, cancellationToken);
+
+        var linkedTrackIds = (await database.AlbumHasTracks
+            .Where(albumTrack => albumTrack.AlbumId == album.Id)
+            .Select(albumTrack => albumTrack.TrackId)
+            .ToListAsync(cancellationToken))
+            .ToHashSet();
+
+        if (tracksByVideoId.Count == validTracks.Count && linkedTrackIds.Count >= validTracks.Count)
+            return;
+
+        var artistRefs = detail.Album.Artists
+            .GroupBy(artistRef => artistRef.Id ?? artistRef.Name.ToUpperInvariant())
+            .Select(group => group.First())
+            .ToList();
+
+        var albumArtists = new List<Artist>();
+        foreach (var artistRef in artistRefs)
+            albumArtists.Add(await GetOrCreateArtistAsync(artistRef, cancellationToken));
+
+        foreach (var albumTrack in validTracks)
+        {
+            if (!tracksByVideoId.TryGetValue(albumTrack.VideoId, out var track))
+            {
+                track = BuildStubTrack(albumTrack);
+                await database.ExternalTracks.AddAsync(track, cancellationToken);
+
+                for (var position = 0; position < albumArtists.Count; position++)
+                {
+                    await database.TrackArtists.AddAsync(new TrackArtist
+                    {
+                        TrackId = track.Id,
+                        ArtistId = albumArtists[position].Id,
+                        Position = position
+                    }, cancellationToken);
+                }
+
+                tracksByVideoId[albumTrack.VideoId] = track;
+            }
+
+            if (linkedTrackIds.Contains(track.Id))
+                continue;
+
+            await database.AlbumHasTracks.AddAsync(new AlbumHasTrack
+            {
+                AlbumId = album.Id,
+                TrackId = track.Id,
+                TrackNumber = albumTrack.TrackNumber
+            }, cancellationToken);
+            linkedTrackIds.Add(track.Id);
+        }
+
+        try
+        {
+            await database.SaveChangesAsync(cancellationToken);
+            logger.LogInformation("Materialized YouTube album {AlbumId} ({TrackCount} tracks)", albumExternalId, validTracks.Count);
+        }
+        catch (DbUpdateException exception)
+        {
+            logger.LogWarning(exception, "Race while materializing YouTube album {AlbumId}", albumExternalId);
+        }
+    }
+
+    private ExternalTrack BuildStubTrack(YouTubeAlbumTrack albumTrack)
+    {
+        var title = Truncate(albumTrack.Title, 200);
+        return new ExternalTrack
+        {
+            Title = title,
+            NormalizedTitle = title.ToUpperInvariant(),
+            Source = TrackSource.YouTube,
+            ExternalId = albumTrack.VideoId,
+            DurationSeconds = albumTrack.DurationSeconds,
+            Pictures = new TrackPictures
+            {
+                SmallName = trackConfiguration.Routes.PresetSmallPicture,
+                MediumName = trackConfiguration.Routes.PresetMediumPicture,
+                LargeName = trackConfiguration.Routes.PresetLargePicture,
+                ProcessingStatus = ProcessingStatus.Pending
+            },
+            Audio = new TrackAudio
+            {
+                DownloadRequested = false,
+                TranscodeStatus = ProcessingStatus.Pending
+            }
+        };
+    }
+
     private async Task<Artist> GetOrCreateArtistAsync(YouTubeArtistRef reference, CancellationToken cancellationToken)
     {
         var name = Truncate(reference.Name, 200);
@@ -127,6 +229,37 @@ public sealed class YouTubeTrackProvisioner(
         }
     }
 
+    private async Task<ExternalAlbum> GetOrCreateExternalAlbumAsync(string externalId, string name, string? thumbnailUrl, CancellationToken cancellationToken)
+    {
+        var existing = await database.ExternalAlbums
+            .SingleOrDefaultAsync(album => album.Source == TrackSource.YouTube && album.ExternalId == externalId, cancellationToken);
+        if (existing is not null)
+            return existing;
+
+        var title = Truncate(name, 200);
+        var album = new ExternalAlbum
+        {
+            Title = title,
+            NormalizedTitle = title.ToUpperInvariant(),
+            Source = TrackSource.YouTube,
+            ExternalId = externalId,
+            ThumbnailUrl = string.IsNullOrEmpty(thumbnailUrl) ? null : Truncate(thumbnailUrl, 512)
+        };
+
+        await database.ExternalAlbums.AddAsync(album, cancellationToken);
+
+        try
+        {
+            await database.SaveChangesAsync(cancellationToken);
+            return album;
+        }
+        catch (DbUpdateException)
+        {
+            database.ExternalAlbums.Remove(album);
+            return await database.ExternalAlbums.SingleAsync(a => a.Source == TrackSource.YouTube && a.ExternalId == externalId, cancellationToken);
+        }
+    }
+
     private static string Truncate(string value, int maxLength) =>
         value.Length <= maxLength ? value : value[..maxLength];
 }

backend/Musify.Application/YouTube/GetYouTubeAlbum.cs

@@ -1,13 +1,18 @@
 using ErrorOr;
 using Mediator;
+using Microsoft.Extensions.Logging;
 using Musify.Application.Contracts;
+using Musify.Application.Services;
 
 namespace Musify.Application.YouTube
 {
     public record GetYouTubeAlbumQuery(string AlbumId)
         : IQuery<ErrorOr<YouTubeAlbumDetail>>;
 
-    public class GetYouTubeAlbumQueryHandler(IYouTubeMusicService youTubeMusicService)
+    public class GetYouTubeAlbumQueryHandler(
+        IYouTubeMusicService youTubeMusicService,
+        YouTubeTrackProvisioner provisioner,
+        ILogger<GetYouTubeAlbumQueryHandler> logger)
         : IQueryHandler<GetYouTubeAlbumQuery, ErrorOr<YouTubeAlbumDetail>>
     {
         public async ValueTask<ErrorOr<YouTubeAlbumDetail>> Handle(GetYouTubeAlbumQuery request, CancellationToken cancellationToken)
@@ -15,7 +20,20 @@ namespace Musify.Application.YouTube
             if (string.IsNullOrEmpty(request.AlbumId))
                 return Error.Validation(description: "The album id must not be empty.");
 
-            return await youTubeMusicService.GetAlbumAsync(request.AlbumId, cancellationToken);
+            var result = await youTubeMusicService.GetAlbumAsync(request.AlbumId, cancellationToken);
+            if (result.IsError)
+                return result;
+
+            try
+            {
+                await provisioner.MaterializeAlbumAsync(request.AlbumId, result.Value, cancellationToken);
+            }
+            catch (Exception exception)
+            {
+                logger.LogWarning(exception, "Failed to materialize YouTube album {AlbumId}", request.AlbumId);
+            }
+
+            return result;
         }
     }
 }

backend/Musify.Domain/Entities/ExternalAlbum.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel.DataAnnotations;
+using Musify.Domain.ValueObjects;
+
+namespace Musify.Domain.Entities
+{
+    public class ExternalAlbum : Album
+    {
+        [Required]
+        public required TrackSource Source { get; set; }
+
+        [Required]
+        [MaxLength(64)]
+        public required string ExternalId { get; set; }
+
+        [MaxLength(512)]
+        public string? ThumbnailUrl { get; set; }
+    }
+}

backend/Musify.Domain/Entities/UserAlbum.cs

@@ -9,7 +9,7 @@ namespace Musify.Domain.Entities
         [Required]
         public required long OwnerUserId { get; set; }
 
-        [ForeignKey(nameof(OwnerUserId))]
+        [ForeignKey(nameof(OwnerUserId)) ]
         public User Owner { get; set; }
     }
 }

backend/Musify.Infrastructure/Helpers/YouTubeThumbNailHelper.cs

@@ -1,6 +1,6 @@
-namespace Musify.Infrastructure.Services
+namespace Musify.Infrastructure.Helpers
 {
-    public static class YouTubeThumbnail
+    public static class YouTubeThumbNailHelper
     {
         public static bool IsSquare(string url) =>
             url.Contains("googleusercontent.com", StringComparison.OrdinalIgnoreCase);
@@ -38,7 +38,7 @@ namespace Musify.Infrastructure.Services
             if (lastSlash < 0)
                 return path;
 
-            return $"{path[..lastSlash]}/{YtImgFileName(size)}";
+            return $"{path[..lastSlash] }/{YtImgFileName(size) }";
         }
 
         private static string YtImgFileName(int size) => size switch
@@ -50,6 +50,6 @@ namespace Musify.Infrastructure.Services
         };
 
         private static bool IsSizeSuffix(ReadOnlySpan<char> suffix) =>
-            suffix.Length > 1 && (suffix[0] is 'w' or 's' or 'h') && char.IsDigit(suffix[1]);
+            suffix.Length > 1 && (suffix[0] is 'w' or 's' or 'h') && char.IsDigit(suffix[1] );
     }
 }

backend/Musify.Infrastructure/Musify.Infrastructure.csproj

@@ -43,4 +43,8 @@
     <Folder Include="Persistence\Migrations\" />
   </ItemGroup>
 
+  <ItemGroup>
+    <EmbeddedResource Include="Assets\PlayListDefaultCover.png" LogicalName="Musify.Infrastructure.Assets.PlayListDefaultCover.png" />
+  </ItemGroup>
+
 </Project>

backend/Musify.Infrastructure/Persistence/Database.cs

@@ -117,6 +117,13 @@ namespace Musify.Infrastructure.Persistence
                 .HasForeignKey(album => album.OwnerUserId)
                 .OnDelete(DeleteBehavior.Restrict);
 
+            modelBuilder.Entity<ExternalAlbum>()
+                .ToTable("ExternalAlbums");
+
+            modelBuilder.Entity<ExternalAlbum>()
+                .HasIndex(album => new { album.Source, album.ExternalId })
+                .IsUnique();
+
             modelBuilder.Entity<AlbumHasTrack>()
                 .HasOne(albumTrack => albumTrack.Album)
                 .WithMany(album => album.AlbumTracks)
@@ -176,6 +183,8 @@ namespace Musify.Infrastructure.Persistence
 
         public DbSet<UserAlbum> UserAlbums => Set<UserAlbum>();
 
+        public DbSet<ExternalAlbum> ExternalAlbums => Set<ExternalAlbum>();
+
         public DbSet<AlbumHasTrack> AlbumHasTracks => Set<AlbumHasTrack>();
 
         public DbSet<UserHasTrack> UserHasTracks => Set<UserHasTrack>();

backend/Musify.Infrastructure/Persistence/Migrations/20260724181012_AddExternalAlbums.cs

@@ -0,0 +1,47 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Musify.Infrastructure.Persistence.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddExternalAlbums : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "ExternalAlbums",
+                columns: table => new
+                {
+                    Id = table.Column<Guid>(type: "uuid", nullable: false),
+                    Source = table.Column<int>(type: "integer", nullable: false),
+                    ExternalId = table.Column<string>(type: "character varying(64)", maxLength: 64, nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_ExternalAlbums", x => x.Id);
+                    table.ForeignKey(
+                        name: "FK_ExternalAlbums_Albums_Id",
+                        column: x => x.Id,
+                        principalTable: "Albums",
+                        principalColumn: "Id",
+                        onDelete: ReferentialAction.Cascade);
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "IX_ExternalAlbums_Source_ExternalId",
+                table: "ExternalAlbums",
+                columns: new[] { "Source", "ExternalId" },
+                unique: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "ExternalAlbums");
+        }
+    }
+}

backend/Musify.Infrastructure/Persistence/Migrations/20260724182659_AddExternalAlbumThumbnail.cs

@@ -0,0 +1,29 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Musify.Infrastructure.Persistence.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddExternalAlbumThumbnail : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "ThumbnailUrl",
+                table: "ExternalAlbums",
+                type: "character varying(512)",
+                maxLength: 512,
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "ThumbnailUrl",
+                table: "ExternalAlbums");
+        }
+    }
+}

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

@@ -720,6 +720,28 @@ namespace Musify.Infrastructure.Persistence.Migrations
                     b.ToTable("TrackProcessingState");
                 });
 
+            modelBuilder.Entity("Musify.Domain.Entities.ExternalAlbum", b =>
+                {
+                    b.HasBaseType("Musify.Domain.Entities.Album");
+
+                    b.Property<string>("ExternalId")
+                        .IsRequired()
+                        .HasMaxLength(64)
+                        .HasColumnType("character varying(64)");
+
+                    b.Property<int>("Source")
+                        .HasColumnType("integer");
+
+                    b.Property<string>("ThumbnailUrl")
+                        .HasMaxLength(512)
+                        .HasColumnType("character varying(512)");
+
+                    b.HasIndex("Source", "ExternalId")
+                        .IsUnique();
+
+                    b.ToTable("ExternalAlbums", (string)null);
+                });
+
             modelBuilder.Entity("Musify.Domain.Entities.UserAlbum", b =>
                 {
                     b.HasBaseType("Musify.Domain.Entities.Album");
@@ -1082,6 +1104,15 @@ namespace Musify.Infrastructure.Persistence.Migrations
                     b.Navigation("User");
                 });
 
+            modelBuilder.Entity("Musify.Domain.Entities.ExternalAlbum", b =>
+                {
+                    b.HasOne("Musify.Domain.Entities.Album", null)
+                        .WithOne()
+                        .HasForeignKey("Musify.Domain.Entities.ExternalAlbum", "Id")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+                });
+
             modelBuilder.Entity("Musify.Domain.Entities.UserAlbum", b =>
                 {
                     b.HasOne("Musify.Domain.Entities.Album", null)

backend/Musify.Infrastructure/Services/PlayListPresetSeeder.cs

@@ -0,0 +1,85 @@
+using System.Reflection;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Hosting;
+using Microsoft.Extensions.Logging;
+using Musify.Application.Configuration;
+using Musify.Application.Contracts;
+
+namespace Musify.Infrastructure.Services
+{
+    public class PlayListPresetSeeder(IServiceScopeFactory scopeFactory, ILogger<PlayListPresetSeeder> logger)
+        : BackgroundService
+    {
+        private const string SourceResourceName = "Musify.Infrastructure.Assets.PlayListDefaultCover.png";
+        private const string WebpContentType = "image/webp";
+
+        protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+        {
+            using var scope = scopeFactory.CreateScope();
+            var services = scope.ServiceProvider;
+
+            var playListConfiguration = services.GetRequiredService<PlayListConfiguration>();
+            if (!playListConfiguration.SeedPresetPictures)
+                return;
+
+            try
+            {
+                await SeedAsync(services, playListConfiguration, stoppingToken);
+            }
+            catch (Exception exception)
+            {
+                logger.LogError(exception, "Failed to seed playlist preset pictures");
+            }
+        }
+
+        private async Task SeedAsync(IServiceProvider services, PlayListConfiguration configuration, CancellationToken cancellationToken)
+        {
+            var storage = services.GetRequiredService<IStorageService>();
+            var pictures = services.GetRequiredService<IPictureService>();
+            var bucket = services.GetRequiredService<ApplicationStorageConfiguration>().Bucket;
+
+            var source = LoadSourceBytes();
+
+            var routes = configuration.Routes;
+            var sizes = configuration.PicturesSizes;
+
+            var targets = new (string Key, int Width, int Height)[]
+            {
+                (routes.BuildOriginalPicturePath(routes.PresetOriginalPicture), sizes.LargePictureWidth, sizes.LargePictureHeight),
+                (routes.PresetSmallPicturePath, sizes.SmallPictureWidth, sizes.SmallPictureHeight),
+                (routes.PresetMediumPicturePath, sizes.MediumPictureWidth, sizes.MediumPictureHeight),
+                (routes.PresetLargePicturePath, sizes.LargePictureWidth, sizes.LargePictureHeight),
+            };
+
+            foreach (var target in targets)
+            {
+                if (!configuration.OverwritePresetPictures)
+                {
+                    var existing = await storage.HeadObjectAsync(bucket, target.Key, cancellationToken);
+                    if (existing is not null)
+                    {
+                        logger.LogDebug("Playlist preset picture already present at {Bucket}/{Key}", bucket, target.Key);
+                        continue;
+                    }
+                }
+
+                using var sourceStream = new MemoryStream(source, writable: false);
+                await using var resized = await pictures.ResizePictureAsWebpAsync(sourceStream, target.Width, target.Height, cancellationToken);
+                await storage.UploadFileAsync(resized, WebpContentType, bucket, target.Key, cancellationToken);
+
+                logger.LogInformation("Seeded playlist preset picture {Bucket}/{Key} ({Width}x{Height})", bucket, target.Key, target.Width, target.Height);
+            }
+        }
+
+        private static byte[] LoadSourceBytes()
+        {
+            var assembly = Assembly.GetExecutingAssembly();
+            using var stream = assembly.GetManifestResourceStream(SourceResourceName)
+                ?? throw new InvalidOperationException($"Embedded resource '{SourceResourceName}' was not found.");
+
+            using var memory = new MemoryStream();
+            stream.CopyTo(memory);
+            return memory.ToArray();
+        }
+    }
+}

backend/Musify.Infrastructure/Services/ServicesDependencyInjection.cs

@@ -45,6 +45,12 @@ namespace Musify.Infrastructure.Services
             return serviceDescriptors;
         }
 
+        public static IServiceCollection AddPlayListPresetSeeder(this IServiceCollection serviceDescriptors, IConfiguration configuration)
+        {
+            serviceDescriptors.AddHostedService<PlayListPresetSeeder>();
+            return serviceDescriptors;
+        }
+
         public static IServiceCollection AddUploadIntentConfiguration(this IServiceCollection serviceDescriptors, IConfiguration configuration)
         {
             serviceDescriptors.AddValidatedOptions<UploadIntentConfiguration>(configuration, UploadIntentConfiguration.SectionName);

backend/Musify.Infrastructure/Services/YouTubeMusicService.cs

@@ -3,6 +3,7 @@ using Microsoft.Extensions.Caching.Memory;
 using Microsoft.Extensions.Logging;
 using Musify.Application.Contracts;
 using Musify.Infrastructure.Configuration;
+using Musify.Infrastructure.Helpers;
 using YouTubeMusicAPI.Client;
 using YouTubeMusicAPI.Models.Search;
 using YouTubeMusicAPI.Models.Streaming;
@@ -260,7 +261,7 @@ namespace Musify.Infrastructure.Services
                     videoId,
                     info.Name,
                     string.Join(", ", info.Artists.Select(artist => artist.Name)),
-                    string.Empty,
+                    info.Album?.Name ?? string.Empty,
                     (int)info.Duration.TotalSeconds,
                     PickThumbnail(info.Thumbnails),
                     info.IsExplicit,
@@ -278,13 +279,13 @@ namespace Musify.Infrastructure.Services
         }
 
         public string ResolveArtworkUrl(string thumbnailUrl) =>
-            YouTubeThumbnail.WithSize(thumbnailUrl, configuration.ArtworkSize);
+            YouTubeThumbNailHelper.WithSize(thumbnailUrl, configuration.ArtworkSize);
 
         private string PickThumbnail(IEnumerable<YouTubeMusicAPI.Models.Thumbnail> thumbnails)
         {
             var ordered = thumbnails.OrderBy(thumbnail => thumbnail.Width).ToList();
 
-            var square = ordered.Where(thumbnail => YouTubeThumbnail.IsSquare(thumbnail.Url)).ToList();
+            var square = ordered.Where(thumbnail => YouTubeThumbNailHelper.IsSquare(thumbnail.Url)).ToList();
             var candidates = square.Count > 0 ? square : ordered;
 
             var chosen = candidates.FirstOrDefault(thumbnail => thumbnail.Width >= configuration.ThumbnailSize)
@@ -292,7 +293,7 @@ namespace Musify.Infrastructure.Services
 
             return chosen is null
                 ? string.Empty
-                : YouTubeThumbnail.WithSize(chosen.Url, configuration.ThumbnailSize);
+                : YouTubeThumbNailHelper.WithSize(chosen.Url, configuration.ThumbnailSize);
         }
 
         private static string SearchCacheKey(string token) => $"yt-search:{token}";

backend/Musify.Worker/AppSettings.json

@@ -47,7 +47,9 @@
             "MediumPictureHeight": 256,
             "LargePictureWidth": 512,
             "LargePictureHeight": 512
-        }
+        },
+        "SeedPresetPictures": true,
+        "OverwritePresetPictures": false
     },
     "Track": {
         "Routes": {

backend/Musify.Worker/Program.cs

@@ -34,6 +34,7 @@ services.AddAudioTranscoder(configuration);
 services.AddYouTubeDownloader(configuration);
 services.AddHttpClient();
 services.AddPictureService(configuration);
+services.AddPlayListPresetSeeder(configuration);
 services.AddDatabase(configuration);
 services.AddMassTransitConsumers(configuration);
 services.AddUploadIntentJobs(configuration);

web-player/src/app.d.ts

@@ -6,6 +6,10 @@ declare global {
 			user: SessionUser | null;
 			accessToken: string | null;
 		}
+
+		interface PageData {
+			section?: string | null;
+		}
 	}
 }
 

web-player/src/lib/api/schema.d.ts

@@ -582,6 +582,8 @@ export interface components {
             /** Format: date-time */
             updatedAt: string;
             coverTrackIds: string[];
+            youTubeAlbumId: null | string;
+            thumbnailUrl: null | string;
         };
         CreateAlbumRequest: {
             title: string;

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

@@ -26,7 +26,6 @@
 	import { enhance } from '$app/forms';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		menu: AlbumMenuState;
@@ -94,7 +93,6 @@
 									<PlaylistArt
 										playlistId={playlist.id}
 										trackIds={[]}
-										hue={hueFor(playlist.id)}
 										size="small"
 										class="h-9 w-9 shrink-0 rounded-control"
 									/>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { isSectionActive } from '$lib/navigation.svelte';
 	import Home from '@lucide/svelte/icons/house';
 	import Search from '@lucide/svelte/icons/search';
 	import Music from '@lucide/svelte/icons/music';
@@ -13,7 +14,7 @@
 	];
 
 	function isActive(href: string) {
-		return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+		return isSectionActive(href, page.url.pathname, page.data.section);
 	}
 </script>
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { isSectionActive } from '$lib/navigation.svelte';
 	import type { SessionUser } from '$lib/types';
 	import Home from '@lucide/svelte/icons/house';
 	import Search from '@lucide/svelte/icons/search';
@@ -42,7 +43,7 @@
 	];
 
 	function isActive(href: string) {
-		return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+		return isSectionActive(href, page.url.pathname, page.data.section);
 	}
 
 	$effect(() => {

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

@@ -22,7 +22,6 @@
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		menu: ContextMenuState;
@@ -105,7 +104,6 @@
 									<PlaylistArt
 										playlistId={playlist.id}
 										trackIds={[]}
-										hue={hueFor(playlist.id)}
 										size="small"
 										class="h-9 w-9 shrink-0 rounded-control"
 									/>

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

@@ -35,7 +35,7 @@
 			type="button"
 			onclick={seek}
 			aria-label="Barra de progreso"
-			class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track transition-[height] hover:h-2"
+			class="group relative h-1.5 flex-1 cursor-pointer rounded-full bg-track"
 		>
 			<div
 				class="absolute inset-y-0 left-0 rounded-full bg-accent/60 group-hover:brightness-110"

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

@@ -9,15 +9,13 @@
 		<Cover
 			trackId={player.current.id}
 			src={player.current.coverUrl}
-			hue={player.current.hue}
 			size="small"
 			alt={player.current.title}
 			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
 		/>
 	{:else}
 		<div
-			class="h-11 w-11 shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
+			class="h-11 w-11 shrink-0 rounded-lg bg-surface shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)] md:h-13 md:w-13"
-			style="background:{player.artGradient}"
 		></div>
 	{/if}
 	<div class="min-w-0">

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

@@ -2,7 +2,6 @@
 	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
 	import Cover from './Cover.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -55,16 +54,9 @@
 >
 	{#snippet art(artClass)}
 		{#if coverSrc}
-			<Cover
+			<Cover trackId={id} src={coverSrc} size="large" alt={title} class={artClass} />
-				trackId={id}
-				src={coverSrc}
-				hue={hueFor(id)}
-				size="large"
-				alt={title}
-				class={artClass}
-			/>
 		{:else}
-			<PlaylistArt {trackIds} hue={hueFor(id)} class={artClass} />
+			<PlaylistArt {trackIds} class={artClass} />
 		{/if}
 	{/snippet}
 </MediaCard>

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

@@ -1,13 +1,10 @@
 <script lang="ts">
-	import { gradientForHue, hueFor } from '$lib/theme/color';
-
 	interface Props {
-		id: string;
 		name: string;
 		size?: number;
 	}
 
-	let { id, name, size = 108 }: Props = $props();
+	let { name, size = 108 }: Props = $props();
 
 	const initials = $derived(
 		name
@@ -21,8 +18,8 @@
 
 <div class="flex flex-col items-center gap-2.5 text-center" style="width:{size}px">
 	<div
-		class="relative grid shrink-0 place-items-center overflow-hidden rounded-full shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/artist:shadow-art-lg"
+		class="relative grid shrink-0 place-items-center overflow-hidden rounded-full bg-surface shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/artist:shadow-art-lg"
-		style="width:{size}px;height:{size}px;background:{gradientForHue(hueFor(id))}"
+		style="width:{size}px;height:{size}px"
 	>
 		<div
 			class="pointer-events-none absolute inset-0"

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import { previousPage } from '$lib/navigation.svelte';
+
+	interface Props {
+		href: string;
+		label: string;
+	}
+
+	let { href, label }: Props = $props();
+
+	const previous = $derived(previousPage());
+	const target = $derived(previous ?? { url: href, label });
+
+	function onclick(event: MouseEvent) {
+		if (!previous) return;
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+			return;
+		event.preventDefault();
+		history.back();
+	}
+</script>
+
+<a
+	href={target.url}
+	{onclick}
+	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
+>
+	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
+		<ArrowLeft class="h-4 w-4" />
+	</span>
+	{target.label}
+</a>

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

@@ -1,11 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { gradientForHue } from '$lib/theme/color';
 	import { thumbnailSrc } from '$lib/thumbnails';
 
 	interface Props {
 		trackId: string | number;
-		hue: number;
 		size?: 'small' | 'medium' | 'large';
 		src?: string | null;
 		alt?: string;
@@ -16,7 +14,6 @@
 
 	let {
 		trackId,
-		hue,
 		size = 'medium',
 		src,
 		alt = '',
@@ -26,7 +23,6 @@
 	}: Props = $props();
 
 	let failed = $state(false);
-	let loaded = $state(false);
 
 	const imageSrc = $derived(
 		src ? (thumbnailSrc(src, size) ?? src) : `/api/tracks/${trackId}/cover?size=${size}`
@@ -35,16 +31,10 @@
 	$effect(() => {
 		imageSrc;
 		failed = false;
-		loaded = false;
 	});
 </script>
 
-<div
+<div class="relative overflow-hidden bg-surface {klass}" role="presentation" {oncontextmenu}>
-	class="relative overflow-hidden {klass}"
-	style={loaded && !failed ? undefined : `background:${gradientForHue(hue)}`}
-	role="presentation"
-	{oncontextmenu}
->
 	{#if !failed}
 		<img
 			src={imageSrc}
@@ -52,7 +42,6 @@
 			loading="lazy"
 			decoding="async"
 			fetchpriority="low"
-			onload={() => (loaded = true)}
 			onerror={() => (failed = true)}
 			class="h-full w-full object-cover"
 		/>

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

@@ -1,15 +1,13 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
 	import { mixItemKey, type MixItem } from '$lib/mixes';
 
 	interface Props {
 		items: MixItem[];
-		hue: number;
 		class?: string;
 	}
 
-	let { items, hue, class: klass = '' }: Props = $props();
+	let { items, class: klass = '' }: Props = $props();
 
 	const tiles = $derived(items.slice(0, 4));
 </script>
@@ -20,7 +18,6 @@
 			<Cover
 				trackId={item.trackId ?? item.videoId ?? ''}
 				src={item.thumbnailUrl}
-				hue={hueFor(mixItemKey(item))}
 				size="small"
 				class="h-full w-full"
 			/>
@@ -30,10 +27,9 @@
 	<Cover
 		trackId={tiles[0].trackId ?? tiles[0].videoId ?? ''}
 		src={tiles[0].thumbnailUrl}
-		hue={hueFor(mixItemKey(tiles[0]))}
 		size="medium"
 		class={klass}
 	/>
 {:else}
-	<div class={klass} style="background:{gradientForHue(hue)}"></div>
+	<div class="bg-surface {klass}"></div>
 {/if}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
+	import type { Mix } from '$lib/mixes';
-	import { mixItemKey, type Mix } from '$lib/mixes';
 
 	interface Props {
 		mix: Mix;
@@ -25,40 +24,40 @@
 
 <a
 	href="/mixes/{mix.id}"
-	class="group/tile animate-enter relative block overflow-hidden rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset hover:shadow-art-lg focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {klass}"
+	class="group/tile animate-enter relative block overflow-hidden rounded-art ring-1 ring-line transition duration-300 ease-out [clip-path:inset(0_round_var(--radius-art))] ring-inset focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none {klass}"
-	style="animation-delay:{Math.min(index, 10) * 45}ms;background:{gradientForHue(hueFor(mix.id))}"
+	style="animation-delay:{Math.min(index, 10) * 45}ms"
 >
-{#if tiles.length > 0}
+	{#if tiles.length > 0}
+		<div class="absolute inset-0 flex transition duration-300 ease-out">
+			{#each tiles as item, i (i)}
+				<Cover
+					trackId={item.trackId ?? item.videoId ?? ''}
+					src={item.thumbnailUrl}
+					size="medium"
+					class="aspect-square h-full shrink-0"
+				/>
+			{/each}
+		</div>
+	{/if}
 	<div
-		class="absolute inset-0 flex transition duration-300 ease-out group-hover/tile:scale-[1.01]"
+		class="pointer-events-none absolute inset-0 bg-linear-to-t from-scrim/85 via-scrim/65 to-scrim/40 {banner
-	>
+			? 'sm:bg-linear-to-r'
-		{#each tiles as item, i (i)}
+			: ''}"
-			<Cover
+	></div>
-				trackId={item.trackId ?? item.videoId ?? ''}
-				src={item.thumbnailUrl}
-				hue={hueFor(mixItemKey(item))}
-				size="medium"
-				class="aspect-square h-full shrink-0"
-			/>
-		{/each}
-	</div>
-{/if}
-<div
-	class="pointer-events-none absolute inset-0 bg-black/10 transition-colors duration-300 group-hover/tile:bg-black/20"
-></div>
 	<div
-		class="group relative flex h-full flex-col justify-end p-3 sm:p-4 {banner
+		class="pointer-events-none absolute inset-0 bg-scrim/25 opacity-0 transition-opacity duration-300 group-hover/tile:opacity-100"
+	></div>
+	<div
+		class="relative flex h-full flex-col justify-end p-3 sm:p-4 {banner
 			? 'sm:flex-row sm:items-center sm:justify-between sm:gap-4'
 			: ''}"
 	>
 		<div class="min-w-0">
-			<div
+			<div class="truncate text-on-art {featured ? 'text-xl sm:text-2xl' : 'text-base'}">
-				class="truncate text-white {featured ? 'text-xl sm:text-2xl' : 'text-base'} group-hover:text-accent-soft transition-colors"
-			>
 				{mix.title}
 			</div>
 			{#if mix.subtitle}
-				<div class="mt-0.5 truncate text-xs text-muted sm:text-sm">{mix.subtitle}</div>
+				<div class="mt-0.5 truncate text-xs text-on-art/75 sm:text-sm">{mix.subtitle}</div>
 			{/if}
 		</div>
 	</div>

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

@@ -1,17 +1,15 @@
 <script lang="ts">
 	import Cover from './Cover.svelte';
-	import { gradientForHue, hueFor } from '$lib/theme/color';
 
 	interface Props {
 		playlistId?: string;
 		trackIds: (string | number)[];
-		hue: number;
 		size?: 'small' | 'medium' | 'large';
 		version?: string;
 		class?: string;
 	}
 
-	let { playlistId, trackIds, hue, size = 'medium', version, class: klass = '' }: Props = $props();
+	let { playlistId, trackIds, size = 'medium', version, class: klass = '' }: Props = $props();
 
 	let coverFailed = $state(false);
 
@@ -20,7 +18,7 @@
 </script>
 
 {#if playlistId && !coverFailed}
-	<div class="relative overflow-hidden {klass}" style="background:{gradientForHue(hue)}">
+	<div class="relative overflow-hidden bg-surface {klass}">
 		<img
 			src="/api/playlists/{playlistId}/cover?size={size}{version
 				? `&v=${encodeURIComponent(version)}`
@@ -34,11 +32,11 @@
 {:else if mosaic}
 	<div class="grid grid-cols-2 grid-rows-2 overflow-hidden {klass}">
 		{#each trackIds.slice(0, 4) as id (id)}
-			<Cover trackId={id} hue={hueFor(id)} size="small" class="h-full w-full" />
+			<Cover trackId={id} size="small" class="h-full w-full" />
 		{/each}
 	</div>
 {:else if single !== null}
-	<Cover trackId={single} hue={hueFor(single)} size="medium" class={klass} />
+	<Cover trackId={single} size="medium" class={klass} />
 {:else}
-	<div class={klass} style="background:{gradientForHue(hue)}"></div>
+	<div class="bg-surface {klass}"></div>
 {/if}

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import MediaCard from './MediaCard.svelte';
 	import PlaylistArt from './PlaylistArt.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -17,6 +16,6 @@
 
 <MediaCard href="/playlists/{id}" title={name} subtitle={description} {index}>
 	{#snippet art(artClass)}
-		<PlaylistArt playlistId={id} {trackIds} hue={hueFor(id)} version={updatedAt} class={artClass} />
+		<PlaylistArt playlistId={id} {trackIds} version={updatedAt} class={artClass} />
 	{/snippet}
 </MediaCard>

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

@@ -18,9 +18,7 @@
 		{@render actions()}
 	</div>
 {:else}
-	<h2
+	<h2 class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}">
-		class="mb-3 font-display font-medium text-fg sm:mb-4 sm:text-xl {klass}"
-	>
 		{title}
 	</h2>
 {/if}

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

@@ -9,7 +9,6 @@
 		artist?: string | null;
 		coverSrc?: string | null;
 		coverSize?: string;
-		hue: number;
 		explicit?: boolean;
 		titleClass?: string;
 		onClick: () => void;
@@ -23,7 +22,6 @@
 		artist,
 		coverSrc,
 		coverSize = 'h-[42px] w-[42px]',
-		hue,
 		explicit = false,
 		titleClass = '',
 		onClick,
@@ -36,7 +34,6 @@
 	<Cover
 		{trackId}
 		src={coverSrc}
-		{hue}
 		size="small"
 		alt={title}
 		class="{coverSize} shrink-0 rounded-control"

web-player/src/lib/config.ts

@@ -7,6 +7,7 @@ export const ALBUM_TRACKS_PAGE_SIZE = 200;
 export const ALBUM_EARLIEST_YEAR = 1877;
 export const LIBRARY_PICKER_PAGE_SIZE = 50;
 export const EXPLORE_ALBUMS_PAGE_SIZE = 10;
+export const EXPLORE_ALBUMS_LIMIT = 18;
 export const HOME_LATEST_PAGE_SIZE = 10;
 export const HOME_ALBUMS_LIMIT = 12;
 export const HOME_MIXES_BENTO = 5;

web-player/src/lib/navigation.svelte.ts

@@ -0,0 +1,57 @@
+import { afterNavigate } from '$app/navigation';
+
+const HISTORY_INDEX = 'sveltekit:history';
+
+const LABELS: [RegExp, string][] = [
+	[/^\/$/, 'Volver al inicio'],
+	[/^\/explore\/?$/, 'Volver a explorar'],
+	[/^\/playlists\/[^/]+/, 'Volver a la lista'],
+	[/^\/playlists\/?$/, 'Volver a tus listas'],
+	[/^\/albums\/youtube\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/[^/]+/, 'Volver al álbum'],
+	[/^\/albums\/?$/, 'Volver a tus álbumes'],
+	[/^\/library\/?$/, 'Volver a tus canciones'],
+	[/^\/upload\/?$/, 'Volver a subir música'],
+	[/^\/mixes\/[^/]+/, 'Volver a la mezcla']
+];
+
+export interface PageRef {
+	url: string;
+	label: string;
+}
+
+const visited = new Map<number, PageRef>();
+let index = $state(-1);
+
+function labelFor(pathname: string): string | null {
+	for (const [pattern, label] of LABELS) {
+		if (pattern.test(pathname)) return label;
+	}
+	return null;
+}
+
+function historyIndex(): number | null {
+	const value = history.state?.[HISTORY_INDEX];
+	return typeof value === 'number' ? value : null;
+}
+
+export function trackNavigation() {
+	afterNavigate((nav) => {
+		const at = historyIndex();
+		if (at === null) return;
+		const url = nav.to?.url;
+		const label = url ? labelFor(url.pathname) : null;
+		if (url && label) visited.set(at, { url: url.pathname + url.search, label });
+		else visited.delete(at);
+		index = at;
+	});
+}
+
+export function previousPage(): PageRef | null {
+	return visited.get(index - 1) ?? null;
+}
+
+export function isSectionActive(href: string, pathname: string, section?: string | null): boolean {
+	if (section !== undefined) return section === href;
+	return href === '/' ? pathname === '/' : pathname.startsWith(href);
+}

web-player/src/lib/player/player.svelte.ts

@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { HUES, accentForHue, gradientForHue, hueFor } from '$lib/theme/color';
+import { DEFAULT_ACCENT } from '$lib/theme/color';
 import { extractAccent, type Accent } from '$lib/theme/palette';
 import { thumbnailSrc } from '$lib/thumbnails';
 
@@ -10,7 +10,6 @@ export interface PlayerTrack {
 	title: string;
 	artist: string;
 	duration: number;
-	hue: number;
 	source: TrackSourceKind;
 	coverUrl?: string;
 	explicit?: boolean;
@@ -91,7 +90,6 @@ const EMPTY: PlayerTrack = {
 	title: '',
 	artist: '',
 	duration: 0,
-	hue: HUES[0],
 	source: 'local'
 };
 
@@ -101,7 +99,6 @@ function toTrack(item: QueueItem): PlayerTrack {
 		title: item.title,
 		artist: item.artist ?? '',
 		duration: 0,
-		hue: hueFor(item.id),
 		explicit: item.explicit,
 		source: item.source ?? 'local',
 		coverUrl: item.coverUrl
@@ -120,7 +117,6 @@ class PlayerState {
 	playlists = $state<Playlist[]>([]);
 
 	accentColor = $state<string | null>(null);
-	gradientColor = $state<string | null>(null);
 
 	#audio: HTMLAudioElement | null = null;
 	#loadToken = 0;
@@ -129,8 +125,7 @@ class PlayerState {
 	#rafId: number | null = null;
 
 	current = $derived(this.tracks.find((t) => t.id === this.currentId) ?? EMPTY);
-	accent = $derived(this.accentColor ?? accentForHue(this.current.hue));
+	accent = $derived(this.accentColor ?? DEFAULT_ACCENT);
-	artGradient = $derived(this.gradientColor ?? gradientForHue(this.current.hue));
 	progressPercent = $derived(
 		this.current.duration > 0 ? Math.min(100, (this.progress / this.current.duration) * 100) : 0
 	);
@@ -250,7 +245,6 @@ class PlayerState {
 		const cached = this.#accentCache.get(key);
 		if (cached) {
 			this.accentColor = cached.accent;
-			this.gradientColor = cached.gradient;
 			return;
 		}
 		const result = await extractAccent(
@@ -260,10 +254,8 @@ class PlayerState {
 		if (result) {
 			this.#accentCache.set(key, result);
 			this.accentColor = result.accent;
-			this.gradientColor = result.gradient;
 		} else {
 			this.accentColor = null;
-			this.gradientColor = null;
 		}
 	}
 
@@ -335,14 +327,6 @@ class PlayerState {
 			.filter((t): t is PlayerTrack => Boolean(t));
 	}
 
-	mosaicFor(ids: (string | number)[]): string[] {
-		const gradients = this.playlistTracks(ids)
-			.slice(0, 4)
-			.map((t) => gradientForHue(t.hue));
-		while (gradients.length < 4) gradients.push('var(--mf-surface)');
-		return gradients;
-	}
-
 	playQueue(list: QueueItem[], startIndex = 0) {
 		if (list.length === 0) return;
 		this.tracks = list.map(toTrack);

web-player/src/lib/theme/color.ts

@@ -1,20 +1,5 @@
-export const HUES = [145, 330, 40, 152, 300, 200, 10, 120, 280];
-
 export const ACCENT_LIGHTNESS = 60;
 export const ACCENT_CHROMA = 0.17;
 export const ACCENT_HUE = 145;
 
-export function hueFor(id: string | number): number {
+export const DEFAULT_ACCENT = `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${ACCENT_HUE})`;
-	const text = String(id);
-	let hash = 0;
-	for (let i = 0; i < text.length; i++) hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
-	return HUES[hash % HUES.length];
-}
-
-export function accentForHue(hue: number): string {
-	return `oklch(${ACCENT_LIGHTNESS}% ${ACCENT_CHROMA} ${hue})`;
-}
-
-export function gradientForHue(hue: number): string {
-	return `linear-gradient(135deg, oklch(70% 0.15 ${hue}), oklch(36% 0.13 ${hue + 28}))`;
-}

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

@@ -18,7 +18,7 @@
 </script>
 
 <svelte:head>
-	<title>Álbumes · Musify</title>
+	<title>Álbumes</title>
 	<meta name="description" content="Los álbumes que has publicado con tu música subida." />
 </svelte:head>
 

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

@@ -38,7 +38,9 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
 		(track) => track.source === 'Local' && !inAlbum.has(track.id)
 	);
 
-	return { album, tracks, library, isOwner: Number(album.ownerUserId) === Number(user.sub) };
+	const isOwner = Number(album.ownerUserId) === Number(user.sub);
+
+	return { album, tracks, library, isOwner, section: isOwner ? '/albums' : null };
 };
 
 export const actions: Actions = {

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

@@ -31,13 +31,12 @@
 </script>
 
 <svelte:head>
-	<title>{album.title} · Musify</title>
+	<title>{album.title}</title>
-	<meta name="description" content="Álbum {album.title} en Musify." />
+	<meta name="description" content="Álbum {album.title}." />
 </svelte:head>
 
 <Page>
 	<AlbumHeader
-		id={album.id}
 		title={album.title}
 		description={album.description ?? undefined}
 		releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}

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

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
-		id: string;
 		title: string;
 		description?: string;
 		releaseYear?: number;
@@ -22,7 +20,6 @@
 	}
 
 	let {
-		id,
 		title,
 		description,
 		releaseYear,
@@ -44,20 +41,14 @@
 	);
 </script>
 
-<a
+<BackLink
-	href="/albums"
+	href={isOwner ? '/albums' : '/'}
-	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
+	label={isOwner ? 'Volver a tus álbumes' : 'Volver al inicio'}
->
+/>
-	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-		<ArrowLeft class="h-4 w-4" />
-	</span>
-	Volver a tus álbumes
-</a>
 
 <div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
 	<PlaylistArt
 		{trackIds}
-		hue={hueFor(id)}
 		size="large"
 		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
 	/>

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

@@ -7,7 +7,6 @@
 		toQueueItems,
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
 	import TrackTable from '$lib/components/ui/TrackTable.svelte';
@@ -43,7 +42,6 @@
 				trackId={track.id}
 				title={track.title}
 				artist={track.artist}
-				hue={hueFor(track.id)}
 				explicit={track.isExplicit}
 				onClick={() => playFrom(i)}
 			/>

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

@@ -2,7 +2,6 @@
 	import { enhance } from '$app/forms';
 	import Plus from '@lucide/svelte/icons/plus';
 	import { player, toQueueItems, type ApiTrackLike } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -34,7 +33,6 @@
 					trackId={track.id}
 					title={track.title}
 					artist={track.artist}
-					hue={hueFor(track.id)}
 					explicit={track.isExplicit}
 					onClick={() => playFrom(i)}
 				>

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

@@ -18,7 +18,7 @@ export const load: PageServerLoad = async ({ params, locals, url, fetch }) => {
 
 	const album = unwrapOrError(albumRes, 'No se pudo cargar el álbum de YouTube Music.', 404);
 
-	return { album, playlists: playlistsRes.data?.items ?? [] };
+	return { album, playlists: playlistsRes.data?.items ?? [], section: null };
 };
 
 export const actions: Actions = {

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

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import { player, type QueueItem } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Cover from '$lib/components/ui/Cover.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
@@ -73,26 +72,17 @@
 </script>
 
 <svelte:head>
-	<title>{album.title} · Musify</title>
+	<title>{album.title}</title>
-	<meta name="description" content="Álbum {album.title} de {album.artist} en YouTube Music." />
+	<meta name="description" content="Álbum {album.title} de {album.artist}," />
 </svelte:head>
 
 <Page>
-	<a
+	<BackLink href="/explore" label="Volver a explorar" />
-		href="/explore"
-		class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
-	>
-		<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-			<ArrowLeft class="h-4 w-4" />
-		</span>
-		Volver a explorar
-	</a>
 
 	<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
 		<Cover
 			trackId={album.albumId}
 			src={album.thumbnailUrl}
-			hue={hueFor(album.albumId)}
 			size="large"
 			alt={album.title}
 			class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
@@ -100,7 +90,7 @@
 		/>
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">
-				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} · YouTube Music
+				{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'}
 			</p>
 			<h1
 				class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
@@ -154,7 +144,6 @@
 					title={track.title}
 					artist={album.artist}
 					coverSrc={album.thumbnailUrl}
-					hue={hueFor(track.videoId)}
 					explicit={track.isExplicit}
 					onClick={() => playFrom(i)}
 				/>

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

@@ -19,8 +19,7 @@
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import { EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
+	import { EXPLORE_ALBUMS_LIMIT, EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
-	import { hueFor } from '$lib/theme/color';
 	import type { YouTubeSong } from '$lib/types';
 	import TrackContextMenu, {
 		contextMenuStateFor,
@@ -113,10 +112,12 @@
 	type YouTubeAlbum = (typeof data.youtubeAlbums)[number];
 	type AlbumEntry = { kind: 'local'; album: LocalAlbum } | { kind: 'youtube'; album: YouTubeAlbum };
 
-	const albumEntries = $derived<AlbumEntry[]>([
+	const albumEntries = $derived<AlbumEntry[]>(
-		...albums.map((album) => ({ kind: 'local' as const, album })),
+		[
-		...youtubeAlbums.map((album) => ({ kind: 'youtube' as const, album }))
+			...albums.map((album) => ({ kind: 'local' as const, album })),
-	]);
+			...youtubeAlbums.map((album) => ({ kind: 'youtube' as const, album }))
+		].slice(0, EXPLORE_ALBUMS_LIMIT)
+	);
 
 	const hasAlbums = $derived(albumEntries.length > 0);
 	const hasUsers = $derived(users.length > 0);
@@ -215,7 +216,7 @@
 </script>
 
 <svelte:head>
-	<title>Buscar · Musify</title>
+	<title>Buscar</title>
 	<meta name="description" content="Busca canciones, álbumes y usuarios en Musify." />
 </svelte:head>
 
@@ -261,7 +262,6 @@
 								<div class="relative">
 									<PlaylistArt
 										trackIds={entry.album.coverTrackIds}
-										hue={hueFor(entry.album.id)}
 										class="aspect-square w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
 									/>
 								</div>
@@ -285,7 +285,6 @@
 									<Cover
 										trackId={entry.album.albumId}
 										src={entry.album.thumbnailUrl}
-										hue={hueFor(entry.album.albumId)}
 										size="large"
 										alt={entry.album.title}
 										class="aspect-square w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
@@ -316,7 +315,7 @@
 						class="group/artist animate-enter shrink-0"
 						style="animation-delay:{Math.min(i, 10) * 45}ms"
 					>
-						<ArtistAvatar id={u.id} name={u.name} size={96} />
+						<ArtistAvatar name={u.name} size={96} />
 						<div class="mt-1 w-24 truncate text-center text-xs text-fg-3">@{u.handle}</div>
 					</div>
 				{/each}
@@ -339,7 +338,6 @@
 							<Cover
 								trackId={targetId(item)}
 								src={targetCoverSrc(item)}
-								hue={hueFor(targetId(item))}
 								size="small"
 								alt={targetTitle(item)}
 								class="h-11 w-11 shrink-0 rounded-control shadow-art ring-1 ring-line ring-inset"

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

@@ -4,7 +4,6 @@
 	import X from '@lucide/svelte/icons/x';
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime, fmtDate } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
@@ -28,7 +27,7 @@
 </script>
 
 <svelte:head>
-	<title>Tus canciones subidas · Musify</title>
+	<title>Tus canciones subidas</title>
 	<meta name="description" content="Todas tus canciones subidas a Musify." />
 </svelte:head>
 
@@ -65,12 +64,7 @@
 						playing={player.playing}
 						onToggle={() => togglePlay(i)}
 					/>
-					<TrackTitleCell
+					<TrackTitleCell trackId={track.id} title={track.title} onClick={() => togglePlay(i)} />
-						trackId={track.id}
-						title={track.title}
-						hue={hueFor(track.id)}
-						onClick={() => togglePlay(i)}
-					/>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
 					<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>

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

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import { player } from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import { shuffle } from '$lib/collections';
 	import Page from '$lib/components/ui/Page.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import MixArt from '$lib/components/ui/MixArt.svelte';
@@ -61,27 +60,15 @@
 </script>
 
 <svelte:head>
-	<title>{mix.title} · Musify</title>
+	<title>{mix.title}</title>
 	<meta name="description" content="Mezcla {mix.title}, hecha para ti." />
 </svelte:head>
 
 <Page>
-	<a
+	<BackLink href="/" label="Volver al inicio" />
-		href="/"
-		class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
-	>
-		<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-			<ArrowLeft class="h-4 w-4" />
-		</span>
-		Volver al inicio
-	</a>
 
 	<div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
-		<MixArt
+		<MixArt {items} class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44" />
-			{items}
-			hue={hueFor(mix.id)}
-			class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"
-		/>
 		<div class="min-w-0 flex-1">
 			<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
 			<h1
@@ -133,7 +120,6 @@
 					title={targetTitle(targets[i])}
 					artist={targetArtist(targets[i])}
 					coverSrc={targetCoverSrc(targets[i])}
-					hue={hueFor(mixItemKey(item))}
 					explicit={item.isExplicit}
 					onClick={() => playFrom(i)}
 				/>

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

@@ -41,7 +41,7 @@
 </script>
 
 <svelte:head>
-	<title>Mis listas · Musify</title>
+	<title>Mis listas</title>
 	<meta name="description" content="Mis listas en Musify." />
 </svelte:head>
 

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

@@ -36,7 +36,7 @@
 </script>
 
 <svelte:head>
-	<title>{playlist.name} · Musify</title>
+	<title>{playlist.name}</title>
 	<meta name="description" content="Playlist {playlist.name} en Musify." />
 </svelte:head>
 

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
+	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import { hueFor } from '$lib/theme/color';
 
 	interface Props {
 		id: string;
@@ -24,21 +23,12 @@
 		$props();
 </script>
 
-<a
+<BackLink href="/playlists" label="Volver a tus listas" />
-	href="/playlists"
-	class="group inline-flex items-center text-fg-3 transition-colors hover:text-accent-soft"
->
-	<span class="grid h-8 w-8 place-items-center transition-colors group-hover:text-accent-soft">
-		<ArrowLeft class="h-4 w-4" />
-	</span>
-	Volver a tus listas
-</a>
 
 <div class="mt-5 flex flex-col gap-5 sm:mt-6 sm:flex-row sm:items-end sm:gap-6">
 	<PlaylistArt
 		playlistId={id}
 		{trackIds}
-		hue={hueFor(id)}
 		size="large"
 		version={updatedAt}
 		class="h-36 w-36 shrink-0 rounded-art-lg shadow-art-lg sm:h-44 sm:w-44"

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

@@ -9,7 +9,6 @@
 		youTubeThumbnailUrl,
 		type ApiTrackLike
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime, fmtDate } from '$lib/format';
 	import Badge from '$lib/components/ui/Badge.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
@@ -48,7 +47,6 @@
 				coverSrc={isPendingYouTubeTrack(track) && track.externalId
 					? youTubeThumbnailUrl(track.externalId)
 					: undefined}
-				hue={hueFor(track.id)}
 				explicit={track.isExplicit}
 				onClick={() => playFrom(i)}
 			>

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

@@ -7,7 +7,6 @@
 		type ApiTrackLike,
 		type QueueItem
 	} from '$lib/player/player.svelte';
-	import { hueFor } from '$lib/theme/color';
 	import { fmtTime } from '$lib/format';
 	import type { YouTubeSong } from '$lib/types';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
@@ -92,7 +91,6 @@
 					title={item.kind === 'youtube' ? item.song.title : item.track.title}
 					artist={item.kind === 'youtube' ? item.song.artist : item.track.artist}
 					coverSrc={item.kind === 'youtube' ? item.song.thumbnailUrl : undefined}
-					hue={hueFor(idFor(item))}
 					explicit={item.kind === 'youtube' && item.song.isExplicit}
 					onClick={() => playFrom(i)}
 				>

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

@@ -102,7 +102,7 @@
 </script>
 
 <svelte:head>
-	<title>Subir música · Musify</title>
+	<title>Subir música</title>
 	<meta name="description" content="Sube tus canciones a Musify: portada, audio y título." />
 </svelte:head>
 

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

@@ -10,13 +10,28 @@
 	import MobileNav from '$lib/components/MobileNav.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { ACCENT_LIGHTNESS, ACCENT_CHROMA, ACCENT_HUE } from '$lib/theme/color';
+	import { trackNavigation } from '$lib/navigation.svelte';
 	import { page } from '$app/state';
 
 	let { children, data } = $props();
 
+	trackNavigation();
+
 	const isAuthPage = $derived(page.url.pathname === '/login');
 	const hasTrack = $derived(player.currentId !== null);
 
+	function isTypingTarget(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		if (target.isContentEditable) return true;
+		return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'].includes(target.tagName);
+	}
+
+	function onWindowKeydown(event: KeyboardEvent) {
+		if (event.code !== 'Space' || isTypingTarget(event.target)) return;
+		event.preventDefault();
+		player.toggle();
+	}
+
 	$effect(() => {
 		document.documentElement.classList.toggle('home', page.url.pathname === '/');
 	});
@@ -59,6 +74,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
 {#if isAuthPage || !data.user}

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Music from '@lucide/svelte/icons/music';
 	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 	import { player, toQueueItems, type QueueItem } from '$lib/player/player.svelte';
 	import {
@@ -13,14 +12,12 @@
 		targetTitle,
 		type TrackTarget
 	} from '$lib/tracks';
-	import { hueFor } from '$lib/theme/color';
 	import Cover from '$lib/components/ui/Cover.svelte';
 	import PlaylistArt from '$lib/components/ui/PlaylistArt.svelte';
 	import MixBentoTile from '$lib/components/ui/MixBentoTile.svelte';
 	import Rail from '$lib/components/ui/Rail.svelte';
 	import CoverBadge from '$lib/components/ui/CoverBadge.svelte';
 	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import TrackContextMenu, {
@@ -30,6 +27,8 @@
 	import type { YouTubeSong } from '$lib/types';
 	import { appendUnique } from '$lib/collections';
 	import { HOME_LATEST_PAGE_SIZE } from '$lib/config';
+	import EmptyState from '$lib/components/ui/EmptyState.svelte';
+	import Music from '@lucide/svelte/icons/music';
 
 	let { data } = $props();
 
@@ -138,187 +137,202 @@
 	</div>
 </section>
 
-{#if recentlyPlayed.length > 0}
+<div class="flex flex-col gap-10 page-x py-4 sm:py-6">
-	<section class="page-x pt-6 sm:pt-8">
+	{#if recentlyPlayed.length > 0}
-		<div
+		<section>
-			class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
+			<SectionHeading title="Recientemente reproducidas" />
-		>
+			<div
-			{#each recentlyPlayed as track, i (track.id)}
+				class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"
-				<button
-					type="button"
-					onclick={() => playRecent(i)}
-					oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(track))}
-					aria-label="{player.current.id === track.id && player.playing
-						? 'Pausar'
-						: 'Reproducir'} {track.title}"
-					class="group/row flex min-w-0 items-center gap-3 rounded-control bg-surface p-2.5 text-left transition duration-200"
-				>
-					<Cover
-						trackId={track.id}
-						src={track.coverUrl}
-						hue={hueFor(track.id)}
-						size="small"
-						alt={track.title}
-						class="h-14 w-14 shrink-0 rounded-control shadow-art transition duration-200"
-					>
-						{#if player.current.id === track.id}
-							<NowPlaying paused={!player.playing} />
-						{/if}
-					</Cover>
-					<div class="min-w-0">
-						<div class="flex min-w-0 items-center gap-1.5">
-							{#if track.explicit}
-								<ExplicitBadge />
-							{/if}
-							<span class="truncate text-fg transition-colors group-hover/row:text-accent-soft">
-								{track.title}
-							</span>
-						</div>
-						{#if track.artist}
-							<div class="truncate text-sm text-muted">{track.artist}</div>
-						{/if}
-					</div>
-				</button>
-			{/each}
-		</div>
-	</section>
-{/if}
-
-{#if albums.length > 0}
-	<section class="page-x pt-10">
-		<SectionHeading title="Álbumes recién escuchados">
-			{#snippet actions()}
-				<a href="/albums" class="text-sm text-fg-3 transition hover:text-accent-soft">Ver todos</a>
-			{/snippet}
-		</SectionHeading>
-		<Rail>
-			{#each albums as album, i (album.id)}
-				<a
-					href="/albums/{album.id}"
-					class="group/card animate-enter block w-[168px] shrink-0 rounded-art focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-					style="animation-delay:{Math.min(i, 10) * 45}ms"
-				>
-					<div class="relative">
-						<PlaylistArt
-							trackIds={album.coverTrackIds}
-							hue={hueFor(album.id)}
-							class="h-[168px] w-[168px] rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
-						/>
-						<CoverBadge label="Álbum" />
-					</div>
-					<div class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft">
-						{album.title}
-					</div>
-					<div class="mt-0.5 truncate text-sm text-fg-3">{albumCaption(album)}</div>
-				</a>
-			{/each}
-		</Rail>
-	</section>
-{/if}
-
-{#if mixes.length > 0}
-	<section class="page-x pt-10">
-		<div class="grid grid-cols-2 gap-3 sm:auto-rows-25 sm:grid-cols-4 sm:gap-4">
-			{#each mixes as mix, i (mix.id)}
-				<MixBentoTile
-					{mix}
-					index={i}
-					featured={i === 0}
-					banner={i === 4}
-					class={i === 0
-						? 'col-span-2 min-h-42 sm:row-span-2 sm:min-h-0'
-						: i === 1
-							? 'col-span-2 min-h-30 sm:min-h-0'
-							: i === 4
-								? 'col-span-2 min-h-24 sm:col-span-4 sm:min-h-0'
-								: 'min-h-30 sm:min-h-0'}
-				/>
-			{/each}
-		</div>
-	</section>
-{/if}
-
-{#if playlists.length > 0}
-	<section class="page-x pt-10">
-		<Rail>
-			{#each playlists as playlist, i (playlist.id)}
-				<a
-					href="/playlists/{playlist.id}"
-					class="group/card animate-enter block w-36 shrink-0 rounded-art focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-					style="animation-delay:{Math.min(i, 10) * 45}ms"
-				>
-					<PlaylistArt
-						playlistId={playlist.id}
-						trackIds={playlist.coverTrackIds}
-						hue={hueFor(playlist.id)}
-						version={playlist.updatedAt}
-						class="h-36 w-36 rounded-art"
-					/>
-					<div class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft">
-						{playlist.name}
-					</div>
-					<div class="mt-0.5 truncate text-sm text-muted">{playlist.description}</div>
-				</a>
-			{/each}
-			<a
-				href="/playlists"
-				class="grid h-36 w-36 shrink-0 place-items-center text-fg-3 transition-colors hover:text-accent-soft"
 			>
-				<div class="flex flex-col items-center gap-2">
+				{#each recentlyPlayed as track, i (track.id)}
-					<span class="grid h-8 w-8 place-items-center">
+					<button
-						<ArrowRight class="h-4 w-4" />
+						type="button"
-					</span>
+						onclick={() => playRecent(i)}
-					Ver todas
+						oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(track))}
-				</div>
+						aria-label="{player.current.id === track.id && player.playing
-			</a>
+							? 'Pausar'
-		</Rail>
+							: 'Reproducir'} {track.title}"
-	</section>
+						class="group/row flex min-w-0 items-center gap-3 rounded-control bg-surface p-2.5 text-left transition duration-200"
-{/if}
+					>
-
-{#if newTargets.length > 0}
-	<section class="page-x pt-10">
-		<SectionHeading title="Canciones nuevas" />
-		<Rail>
-			{#each newTargets as target, i (targetId(target))}
-				<button
-					type="button"
-					onclick={() => playNew(i)}
-					oncontextmenu={(e) => openContextMenu(e, target)}
-					aria-label="Reproducir {targetTitle(target)}"
-					class="group/card animate-enter block w-[148px] shrink-0 rounded-art text-left focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
-					style="animation-delay:{Math.min(i, 10) * 45}ms"
-				>
-					<div class="relative h-[198px] w-[148px]">
 						<Cover
-							trackId={targetId(target)}
+							trackId={track.id}
-							src={targetCoverSrc(target)}
+							src={track.coverUrl}
-							hue={hueFor(targetId(target))}
+							size="small"
-							size="medium"
+							alt={track.title}
-							alt={targetTitle(target)}
+							class="h-14 w-14 shrink-0 rounded-control shadow-art transition duration-200"
-							class="h-full w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
 						>
-							{#if isTargetCurrent(target)}
+							{#if player.current.id === track.id}
 								<NowPlaying paused={!player.playing} />
 							{/if}
 						</Cover>
-						<CoverBadge label="Nuevo" />
+						<div class="min-w-0">
-					</div>
+							<div class="flex min-w-0 items-center gap-1.5">
-					<div class="mt-2.5 flex min-w-0 items-center gap-1.5">
+								{#if track.explicit}
-						{#if targetExplicit(target)}
+									<ExplicitBadge />
-							<ExplicitBadge />
+								{/if}
+								<span class="truncate text-fg transition-colors group-hover/row:text-accent-soft">
+									{track.title}
+								</span>
+							</div>
+							{#if track.artist}
+								<div class="truncate text-sm text-muted">{track.artist}</div>
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+		</section>
+	{/if}
+
+	{#if albums.length > 0}
+		<section>
+			<SectionHeading title="Álbumes recientes" />
+			<Rail>
+				{#each albums as album, i (album.id)}
+					<a
+						href={album.youTubeAlbumId
+							? `/albums/youtube/${album.youTubeAlbumId}`
+							: `/albums/${album.id}`}
+						class="group/card animate-enter block w-42 shrink-0 rounded-art focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+						style="animation-delay:{Math.min(i, 10) * 45}ms"
+					>
+						<div class="relative">
+							{#if album.thumbnailUrl}
+								<Cover
+									trackId={album.id}
+									src={album.thumbnailUrl}
+									size="large"
+									alt={album.title}
+									class="h-52 w-42 rounded-art shadow-art ring-line transition duration-300 ease-out"
+								/>
+							{:else}
+								<PlaylistArt
+									trackIds={album.coverTrackIds}
+									class="h-56 w-48 rounded-art shadow-art ring-line transition duration-300 ease-out"
+								/>
+							{/if}
+						</div>
+						<div class="mt-2.5 text-fg transition-colors group-hover/card:text-accent-soft">
+							{album.title}
+						</div>
+						<div class="mt-0.5 text-sm text-fg-3">{albumCaption(album)}</div>
+					</a>
+				{/each}
+			</Rail>
+		</section>
+	{/if}
+
+	{#if mixes.length > 0}
+		<section>
+			<SectionHeading title="Mezclas" />
+			<div class="grid grid-cols-2 gap-3 sm:auto-rows-25 sm:grid-cols-4 sm:gap-4">
+				{#each mixes as mix, i (mix.id)}
+					<MixBentoTile
+						{mix}
+						index={i}
+						featured={i === 0}
+						banner={i === 4}
+						class={i === 0
+							? 'col-span-2 min-h-42 sm:row-span-2 sm:min-h-0'
+							: i === 1
+								? 'col-span-2 min-h-30 sm:min-h-0'
+								: i === 4
+									? 'col-span-2 min-h-24 sm:col-span-4 sm:min-h-0'
+									: 'min-h-30 sm:min-h-0'}
+					/>
+				{/each}
+			</div>
+		</section>
+	{/if}
+
+	{#if playlists.length > 0}
+		<section>
+			<SectionHeading title="Listas de reproducción" />
+			<Rail>
+				{#each playlists as playlist, i (playlist.id)}
+					<a
+						href="/playlists/{playlist.id}"
+						class="group/card animate-enter block w-38 shrink-0 rounded-art"
+						style="animation-delay:{Math.min(i, 10) * 45}ms"
+					>
+						<PlaylistArt
+							playlistId={playlist.id}
+							trackIds={playlist.coverTrackIds}
+							version={playlist.updatedAt}
+							class="h-38 w-38 rounded-art"
+						/>
+						<div
+							class="mt-2.5 truncate text-fg transition-colors group-hover/card:text-accent-soft"
+						>
+							{playlist.name}
+						</div>
+						{#if playlist.description}
+							<div class="mt-0.5 truncate text-sm text-muted">{playlist.description}</div>
 						{/if}
-						<span class="truncate text-fg transition-colors group-hover/card:text-accent-soft">
+					</a>
-							{targetTitle(target)}
+				{/each}
+				<a
+					href="/playlists"
+					class="grid h-36 w-36 shrink-0 place-items-center text-fg-3 transition-colors hover:text-accent-soft"
+				>
+					<div class="flex flex-col items-center gap-2">
+						<span class="grid h-8 w-8 place-items-center">
+							<ArrowRight class="h-4 w-4" />
 						</span>
+						Ver todas
 					</div>
-					{#if targetArtist(target)}
+				</a>
-						<div class="mt-0.5 truncate text-sm text-fg-3">{targetArtist(target)}</div>
+			</Rail>
-					{/if}
+		</section>
-				</button>
+	{/if}
-			{/each}
+
-		</Rail>
+	{#if newTargets.length > 0}
-	</section>
+		<section>
-{/if}
+			<SectionHeading title="Canciones nuevas" />
+			<Rail>
+				{#each newTargets as target, i (targetId(target))}
+					<button
+						type="button"
+						onclick={() => playNew(i)}
+						oncontextmenu={(e) => openContextMenu(e, target)}
+						aria-label="Reproducir {targetTitle(target)}"
+						class="group/card animate-enter block w-[148px] shrink-0 rounded-art text-left focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none"
+						style="animation-delay:{Math.min(i, 10) * 45}ms"
+					>
+						<div class="relative h-[198px] w-[148px]">
+							<Cover
+								trackId={targetId(target)}
+								src={targetCoverSrc(target)}
+								size="medium"
+								alt={targetTitle(target)}
+								class="h-full w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"
+							>
+								{#if isTargetCurrent(target)}
+									<NowPlaying paused={!player.playing} />
+								{/if}
+							</Cover>
+							<CoverBadge label="Nuevo" />
+						</div>
+						<div class="mt-2.5 flex min-w-0 items-center gap-1.5">
+							{#if targetExplicit(target)}
+								<ExplicitBadge />
+							{/if}
+							<span class="truncate text-fg transition-colors group-hover/card:text-accent-soft">
+								{targetTitle(target)}
+							</span>
+						</div>
+						{#if targetArtist(target)}
+							<div class="mt-0.5 truncate text-sm text-fg-3">{targetArtist(target)}</div>
+						{/if}
+					</button>
+				{/each}
+			</Rail>
+		</section>
+	{/if}
+	{#if recentlyPlayed.length === 0 && albums.length === 0 && mixes.length === 0 && playlists.length === 0 && newTargets.length === 0}
+		<EmptyState icon={Music} title="Todavía no hay música" description="Sube tu música o explora nuevas canciones, álbumes y listas de reproducción." />
+	{/if}
+</div>
 
 <!---
 <section class="page-x pt-10 pb-16">
@@ -337,7 +351,6 @@
 						<Cover
 							trackId={targetId(target)}
 							src={targetCoverSrc(target)}
-							hue={hueFor(targetId(target))}
 							size="medium"
 							alt={targetTitle(target)}
 							class="h-full w-full rounded-art shadow-art ring-1 ring-line transition duration-300 ease-out ring-inset group-hover/card:shadow-art-lg"

web-player/src/routes/layout.css

@@ -37,10 +37,10 @@
 }
 
 @utility page-x {
-	padding-inline: --spacing(6);
+	padding-inline: --spacing(4);
 
 	@media (width >= 40rem) {
-		padding-inline: --spacing(10);
+		padding-inline: --spacing(8);
 	}
 }
 

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

@@ -7,7 +7,7 @@
 </script>
 
 <svelte:head>
-	<title>Iniciar sesión · Musify</title>
+	<title>Iniciar sesión</title>
 	<meta name="description" content="Inicia sesión o crea una cuenta en Musify." />
 </svelte:head>