Added favicon

AnimeAnnouncer.Web/AnimeAnnouncer.Web.csproj

@@ -10,4 +10,21 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <!-- SDK container publishing (dotnet publish -t:PublishContainer). The Web SDK
+       includes Microsoft.NET.Build.Containers, so no Dockerfile is needed; the
+       base image is inferred from TargetFramework (aspnet:8.0). -->
+  <PropertyGroup Label="Container">
+    <ContainerRepository>animeannouncer-web</ContainerRepository>
+    <!-- Add a version alongside it at publish time:
+         dotnet publish ... -p:ContainerImageTags='"1.1.0;latest"' -->
+    <ContainerImageTags>latest</ContainerImageTags>
+    <!-- The aspnet base image ships a non-root 'app' user; 8080 is unprivileged. -->
+    <ContainerUser>app</ContainerUser>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <!-- Matches ASPNETCORE_HTTP_PORTS, which the aspnet:8.0 image defaults to 8080. -->
+    <ContainerPort Include="8080" Type="tcp" />
+  </ItemGroup>
+
 </Project>

AnimeAnnouncer.Web/Pages/Index.cshtml

@@ -1,17 +1,17 @@
-@page
+@page
 @model IndexModel
 @{
     ViewData["Title"] = "Airing Soon Anime";
 }
 
-<div class="container-fluid airing-container">
+<div class="airing-container">
     <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
         <h1 class="display-5 mb-0 d-flex align-items-center flex-wrap">
             <span>🗓️ Airing Soon Anime</span>
             <span class="badge rounded-pill bg-dark text-white ms-2 fs-6">@(Model.AiringShows == null ? "No data" : (Model.AiringShows.Count + (Model.AiringShows.Count == 1 ? " show" : " shows")))</span>
         </h1>
     </div>
-    <p class="lead text-secondary mb-4">Anime with an upcoming or recent latest episode, fetched from the TMDB cache. Sorted by air date (<strong>newest first</strong>).</p>
+    <p class="lead text-secondary mb-4">Anime with an upcoming or recent latest episode, drawn from the TMDB and AniList caches. Sorted by air date (<strong>soonest first</strong>).</p>
 
     @if (!string.IsNullOrEmpty(Model.ErrorMessage))
     {
@@ -32,93 +32,181 @@
     }
     else
     {
-        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6 g-4">
+        <div class="airing-list">
             @foreach (var show in Model.AiringShows)
             {
-                <div class="col">
+                <article class="airing-row @(show.IsFuture ? "is-upcoming" : "is-aired")">
-                    <div class="card h-100 anime-card @(show.IsFuture ? "border-danger" : "")">
+                    @if (!string.IsNullOrWhiteSpace(show.HeroImageUrl))
-                        <div class="anime-poster-container">
+                    {
+                        <div class="airing-backdrop" style="background-image: url('@show.HeroImageUrl');" aria-hidden="true"></div>
+                    }
+                    <div class="airing-scrim" aria-hidden="true"></div>
+
+                    <div class="airing-content">
+                        <div class="airing-poster">
                             @if (!string.IsNullOrWhiteSpace(show.PosterUrl))
                             {
-                                <img src="@show.PosterUrl" class="anime-poster" alt="@show.Title" title="@show.Title" loading="lazy" />
+                                <img src="@show.PosterUrl" alt="@show.Title poster" title="@show.Title" loading="lazy" />
                             }
                             else
                             {
-                                <div class="anime-poster d-flex align-items-center justify-content-center text-secondary">
+                                <div class="airing-poster-placeholder"><span>🗂️</span></div>
-                                    <span class="display-4">🗂️</span>
+                            }
+                            @if (show.LatestSeasonNumber.HasValue && show.LatestSeasonNumber > 0)
+                            {
+                                <span class="airing-poster-tag">Season @show.LatestSeasonNumber</span>
+                            }
+                        </div>
+
+                        <div class="airing-body">
+                            <header class="airing-header">
+                                <div class="airing-titles">
+                                    <h2 class="airing-title">@show.Title</h2>
+                                    @if (show.AlternateTitles.Count > 0)
+                                    {
+                                        <p class="airing-alt-titles">@string.Join("  ·  ", show.AlternateTitles)</p>
+                                    }
+                                </div>
+                                <div class="airing-scores">
+                                    @if (show.VoteAverage.HasValue && show.VoteAverage > 0)
+                                    {
+                                        <span class="score-chip score-tmdb" title="TMDB user score">
+                                            <span class="score-value">@string.Format("{0:0.0}", show.VoteAverage)</span>
+                                            <span class="score-source">TMDB</span>
+                                        </span>
+                                    }
+                                    @if (show.AnilistScore.HasValue && show.AnilistScore > 0)
+                                    {
+                                        <span class="score-chip score-anilist" title="AniList average score">
+                                            <span class="score-value">@string.Format("{0:0.0}", show.AnilistScore)</span>
+                                            <span class="score-source">AniList</span>
+                                        </span>
+                                    }
+                                </div>
+                            </header>
+
+                            <div class="airing-meta">
+                                @if (show.LatestEpisodeNumber > 0)
+                                {
+                                    <span class="meta-chip">
+                                        @if (show.TotalEpisodes.HasValue && show.TotalEpisodes > 0)
+                                        {
+                                            <text>Episode @show.LatestEpisodeNumber of @show.TotalEpisodes</text>
+                                        }
+                                        else
+                                        {
+                                            <text>Episode @show.LatestEpisodeNumber</text>
+                                        }
+                                    </span>
+                                }
+                                @if (show.LatestOrdinalEpisodeNumber.HasValue && show.LatestOrdinalEpisodeNumber > 0)
+                                {
+                                    <span class="meta-chip">@show.LatestOrdinalEpisodeNumber episodes overall</span>
+                                }
+                                @if (!string.IsNullOrWhiteSpace(show.AnilistStatus))
+                                {
+                                    <span class="meta-chip">@show.AnilistStatus</span>
+                                }
+                                @if (show.SeasonYear.HasValue)
+                                {
+                                    <span class="meta-chip">@show.SeasonYear</span>
+                                }
+                                @if (show.IsFinaleNext && show.IsFuture)
+                                {
+                                    <span class="meta-chip meta-chip-finale">🏁 Season finale</span>
+                                }
+                            </div>
+
+                            @if (show.Genres.Count > 0 || show.Tags.Count > 0)
+                            {
+                                <div class="airing-taxonomy">
+                                    @foreach (var genre in show.Genres)
+                                    {
+                                        <span class="genre-chip">@genre</span>
+                                    }
+                                    @foreach (var tag in show.VisibleTags)
+                                    {
+                                        <span class="tag-chip">#@tag</span>
+                                    }
+                                    @if (show.OverflowTags.Count > 0)
+                                    {
+                                        <details class="tag-overflow">
+                                            <summary class="tag-chip tag-more">+@show.OverflowTags.Count more</summary>
+                                            @foreach (var tag in show.OverflowTags)
+                                            {
+                                                <span class="tag-chip">#@tag</span>
+                                            }
+                                        </details>
+                                    }
                                 </div>
                             }
 
-                            @if (show.VoteAverage.HasValue && show.VoteAverage > 0)
+                            @if (show.EpisodeProgressPercent.HasValue)
                             {
-                                <span class="position-absolute top-0 start-0 badge rounded-pill bg-warning text-dark m-2 shadow-sm">⭐ @string.Format("{0:0.0}", show.VoteAverage)</span>
+                                <div class="airing-progress" title="@show.LatestEpisodeNumber of @show.TotalEpisodes episodes aired">
+                                    <div class="airing-progress-bar" style="width: @(show.EpisodeProgressPercent)%;"></div>
+                                </div>
                             }
 
+                            @if (!string.IsNullOrWhiteSpace(show.Overview))
+                            {
+                                <p class="airing-overview">
+                                    @if (show.OverviewIsSeasonSpecific && show.LatestSeasonNumber > 0)
+                                    {
+                                        <span class="overview-label">Season @show.LatestSeasonNumber —</span>
+                                    }
+                                    @show.Overview
+                                </p>
+                            }
+                            else
+                            {
+                                <p class="airing-overview text-secondary fst-italic">No overview available.</p>
+                            }
+
+                            <footer class="airing-footer">
+                                <a href="https://www.themoviedb.org/tv/@show.ShowID" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-light">TMDB</a>
+                                @if (!string.IsNullOrWhiteSpace(show.AnilistUrl))
+                                {
+                                    <a href="@show.AnilistUrl" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-info">AniList</a>
+                                }
+
+                                @if (show.SecondaryImages.Count > 0)
+                                {
+                                    <div class="airing-gallery">
+                                        @foreach (var image in show.SecondaryImages)
+                                        {
+                                            <a href="@image.Url" target="_blank" rel="noopener noreferrer"
+                                               class="gallery-thumb" title="@image.Label (@image.Source)">
+                                                <img src="@image.Url" alt="@show.Title — @image.Label" loading="lazy" />
+                                            </a>
+                                        }
+                                    </div>
+                                }
+                            </footer>
+                        </div>
+
+                        <aside class="airing-countdown">
                             @if (show.EffectiveLastAirDate.HasValue)
                             {
                                 @if (show.IsFuture)
                                 {
-                                    <span class="position-absolute top-0 end-0 badge rounded-pill bg-danger text-white m-2 shadow-sm">Airs in @Math.Max(show.DaysUntil, 1)d</span>
+                                    <span class="countdown-number">@Math.Max(show.DaysUntil, 1)</span>
+                                    <span class="countdown-unit">@(Math.Max(show.DaysUntil, 1) == 1 ? "day" : "days") away</span>
                                 }
                                 else
                                 {
-                                    <span class="position-absolute top-0 end-0 badge rounded-pill bg-secondary text-white m-2 shadow-sm">Aired @Math.Abs(show.DaysUntil)d ago</span>
+                                    <span class="countdown-number">@Math.Abs(show.DaysUntil)</span>
+                                    <span class="countdown-unit">@(Math.Abs(show.DaysUntil) == 1 ? "day" : "days") ago</span>
                                 }
-                            }
+                                <span class="countdown-date" title="@show.AirDateLongFormatted">@show.AirDateFormatted</span>
-                        </div>
-
-                        <div class="card-body d-flex flex-column">
-                            <h5 class="card-title text-truncate" title="@show.Title">@show.Title</h5>
-
-                            <div class="show-meta mb-2 d-flex flex-wrap gap-1">
-                                @if (show.LatestSeasonNumber.HasValue && show.LatestSeasonNumber > 0)
-                                {
-                                    <span class="badge rounded-pill bg-light text-dark border">Season @show.LatestSeasonNumber</span>
-                                }
-                                @if (show.LatestEpisodeNumber > 0)
-                                {
-                                    @if (show.LastEpisodeNumber.HasValue && show.LastEpisodeNumber > 0)
-                                    {
-                                        <span class="badge rounded-pill bg-light text-dark border">Ep @show.LatestEpisodeNumber / @show.LastEpisodeNumber</span>
                             }
                             else
                             {
-                                        <span class="badge rounded-pill bg-light text-dark border">Ep @show.LatestEpisodeNumber</span>
+                                <span class="countdown-unit">Air date unknown</span>
-                                    }
-                                }
-                                @if (show.LatestOrdinalEpisodeNumber.HasValue && show.LatestOrdinalEpisodeNumber > 0)
-                                {
-                                    <span class="badge rounded-pill bg-light text-dark border">Total: @show.LatestOrdinalEpisodeNumber</span>
                             }
+                        </aside>
                     </div>
-
+                </article>
-                            <div class="show-dates mb-2">
-                                @if (show.EffectiveLastAirDate.HasValue)
-                                {
-                                    <small class="text-primary fw-semibold">📅 Last air date: @show.AirDateFormatted</small>
-                                }
-                                else
-                                {
-                                    <small class="text-secondary">📅 Last air date: @show.AirDateFormatted</small>
-                                }
-                            </div>
-                        </div>
-
-                        <div class="card-footer bg-transparent border-top-0 pt-0">
-                            @if (!string.IsNullOrWhiteSpace(show.Overview))
-                            {
-                                <p class="show-overview text-muted" title="@show.Overview">@show.Overview</p>
-                            }
-                            else
-                            {
-                                <p class="show-overview text-secondary fst-italic">No overview available.</p>
-                            }
-                            <div class="d-grid mt-2">
-                                <a href="https://www.themoviedb.org/tv/@show.ShowID" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary">View on TMDB</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             }
         </div>
     }

AnimeAnnouncer.Web/Pages/Index.cshtml.cs

@@ -1,3 +1,5 @@
+using System.Net;
+using System.Text.RegularExpressions;
 using AnimeAnnouncer.Cache;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 
@@ -50,10 +52,23 @@ public class IndexModel : PageModel
                     _logger.LogWarning(ex, "Failed to retrieve cache item for title: {Title}", airingItem.Title);
                 }
 
+                // The announcer stores Anilist details under a parallel key using the same
+                // title, so the two caches line up one-to-one when Anilist was consulted.
+                AnilistCacheItem? anilistItem = null;
+                try
+                {
+                    anilistItem = await _tmdbCache.GetCacheItem<AnilistCacheItem>($"AnilistCache-{airingItem.Title}");
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogWarning(ex, "Failed to retrieve Anilist cache item for title: {Title}", airingItem.Title);
+                }
+
                 viewModels.Add(new AiringShowViewModel
                 {
                     AiringSoon = airingItem,
-                    CachedDetails = cacheItem
+                    CachedDetails = cacheItem,
+                    AnilistDetails = anilistItem
                 });
             }
 
@@ -80,10 +95,20 @@ public class IndexModel : PageModel
         }
     }
 
+    public class ShowImage
+    {
+        public required string Url { get; set; }
+        public required string Label { get; set; }
+        public required string Source { get; set; }
+    }
+
     public class AiringShowViewModel
     {
+        private static readonly Regex HtmlTagPattern = new("<[^>]+>", RegexOptions.Compiled);
+
         public required AiringSoonItem AiringSoon { get; set; }
         public TMDBCacheItem? CachedDetails { get; set; }
+        public AnilistCacheItem? AnilistDetails { get; set; }
 
         public string Title => AiringSoon.Title;
         public int ShowID => AiringSoon.ShowID;
@@ -95,25 +120,152 @@ public class IndexModel : PageModel
         public int? LatestSeasonNumber => CachedDetails?.LatestSeasonNumber;
         public int? LatestOrdinalEpisodeNumber => CachedDetails?.LatestOrdinalEpisodeNumber;
         public double? VoteAverage => CachedDetails?.VoteAverage;
-        public string? Overview => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview)
-            ? CachedDetails.LatestSeasonOverview
-            : CachedDetails?.Overview;
 
-        public string? PosterUrl
+        // --- Anilist ---------------------------------------------------------
+
+        public bool HasAnilist => AnilistDetails != null;
+        public int? AnilistShowID => AnilistDetails?.ShowID;
+        public string? AnilistUrl => AnilistShowID.HasValue ? $"https://anilist.co/anime/{AnilistShowID}" : null;
+
+        /// <summary>Anilist's 0-100 score, rescaled to the 0-10 range TMDB uses.</summary>
+        public double? AnilistScore => AnilistDetails?.AverageScore.HasValue == true
+            ? AnilistDetails.AverageScore!.Value / 10.0
+            : null;
+
+        public string? AnilistStatus => string.IsNullOrWhiteSpace(AnilistDetails?.Status)
+            ? null
+            // Anilist statuses arrive as enum names like RELEASING / NOT_YET_RELEASED.
+            : string.Join(' ', AnilistDetails.Status.Split('_', StringSplitOptions.RemoveEmptyEntries)
+                .Select(word => char.ToUpperInvariant(word[0]) + word[1..].ToLowerInvariant()));
+
+        public int? SeasonYear => AnilistDetails?.SeasonYear;
+
+        /// <summary>Total episode count, preferring Anilist which the announcer treats as more reliable.</summary>
+        public int? TotalEpisodes => AnilistDetails?.Episodes ?? (LastEpisodeNumber > 0 ? LastEpisodeNumber : null);
+
+        /// <summary>Alternate titles worth showing, i.e. anything that is not just the display title again.</summary>
+        public List<string> AlternateTitles
         {
             get
             {
-                if (!string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonPosterPath))
+                var candidates = new[] { AnilistDetails?.RomajiTitle, AnilistDetails?.NativeTitle, AnilistDetails?.EnglishTitle };
-                    return CachedDetails.LatestSeasonPosterPath;
+                return candidates
-                if (!string.IsNullOrWhiteSpace(CachedDetails?.PosterPath))
+                    .Where(t => !string.IsNullOrWhiteSpace(t))
-                    return CachedDetails.PosterPath;
+                    .Select(t => t!.Trim())
-                //if (!string.IsNullOrWhiteSpace(CachedDetails?.AnilistPosterPath))
+                    .Where(t => !string.Equals(t, Title, StringComparison.OrdinalIgnoreCase))
-                //    return CachedDetails.AnilistPosterPath;
+                    .Distinct(StringComparer.OrdinalIgnoreCase)
-                return null;
+                    .ToList();
             }
         }
 
-        public string? BackdropUrl => CachedDetails?.BackdropPath;
+        // --- Genres & tags ---------------------------------------------------
+
+        /// <summary>How many tags are shown before the rest are tucked behind a "more" toggle.</summary>
+        public const int VisibleTagCount = 10;
+
+        /// <summary>
+        /// Genres from both sources, AniList first. TMDB's "Animation" genre is dropped since every
+        /// show on this page is anime, so it carries no information.
+        /// </summary>
+        public List<string> Genres => MergeDistinct(AnilistDetails?.Genres, CachedDetails?.Genres)
+            .Where(g => !string.Equals(g, "Animation", StringComparison.OrdinalIgnoreCase))
+            .ToList();
+
+        /// <summary>AniList tags followed by TMDB keywords, minus anything already listed as a genre.</summary>
+        public List<string> Tags
+        {
+            get
+            {
+                var genres = new HashSet<string>(Genres, StringComparer.OrdinalIgnoreCase);
+                return MergeDistinct(AnilistDetails?.Tags, CachedDetails?.Keywords)
+                    .Where(t => !genres.Contains(t))
+                    .ToList();
+            }
+        }
+
+        public List<string> VisibleTags => Tags.Take(VisibleTagCount).ToList();
+        public List<string> OverflowTags => Tags.Skip(VisibleTagCount).ToList();
+
+        private static IEnumerable<string> MergeDistinct(params IEnumerable<string>?[] sources) =>
+            sources
+                .Where(s => s != null)
+                .SelectMany(s => s!)
+                .Where(s => !string.IsNullOrWhiteSpace(s))
+                .Select(s => s.Trim())
+                .Distinct(StringComparer.OrdinalIgnoreCase);
+
+        /// <summary>Anilist descriptions are HTML fragments; flatten them to plain text for display.</summary>
+        public string? AnilistDescription
+        {
+            get
+            {
+                if (string.IsNullOrWhiteSpace(AnilistDetails?.Description))
+                    return null;
+
+                var text = AnilistDetails.Description
+                    .Replace("<br>", " ", StringComparison.OrdinalIgnoreCase)
+                    .Replace("<br/>", " ", StringComparison.OrdinalIgnoreCase)
+                    .Replace("<br />", " ", StringComparison.OrdinalIgnoreCase);
+                text = WebUtility.HtmlDecode(HtmlTagPattern.Replace(text, string.Empty));
+                text = Regex.Replace(text, @"\s{2,}", " ").Trim();
+
+                return string.IsNullOrWhiteSpace(text) ? null : text;
+            }
+        }
+
+        public string? Overview => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview)
+            ? CachedDetails.LatestSeasonOverview
+            : (!string.IsNullOrWhiteSpace(CachedDetails?.Overview) ? CachedDetails.Overview : AnilistDescription);
+
+        /// <summary>True when <see cref="Overview"/> describes the current season rather than the series.</summary>
+        public bool OverviewIsSeasonSpecific => !string.IsNullOrWhiteSpace(CachedDetails?.LatestSeasonOverview);
+
+        // --- Artwork ---------------------------------------------------------
+
+        public string? SeasonPosterUrl => Clean(CachedDetails?.LatestSeasonPosterPath);
+        public string? ShowPosterUrl => Clean(CachedDetails?.PosterPath);
+        public string? BackdropUrl => Clean(CachedDetails?.BackdropPath);
+        public string? AnilistCoverUrl => Clean(AnilistDetails?.CoverImageUrl);
+        public string? AnilistBannerUrl => Clean(AnilistDetails?.BannerImageUrl);
+
+        /// <summary>The tall artwork shown alongside the entry; the season's own poster wins when present.</summary>
+        public string? PosterUrl => SeasonPosterUrl ?? ShowPosterUrl ?? AnilistCoverUrl;
+
+        /// <summary>The wide artwork used as the row background.</summary>
+        public string? HeroImageUrl => BackdropUrl ?? AnilistBannerUrl;
+
+        /// <summary>Every distinct piece of artwork, for the secondary thumbnail strip.</summary>
+        public List<ShowImage> Gallery
+        {
+            get
+            {
+                var images = new List<ShowImage>();
+
+                void Add(string? url, string label, string source)
+                {
+                    if (string.IsNullOrWhiteSpace(url))
+                        return;
+                    if (images.Any(i => string.Equals(i.Url, url, StringComparison.OrdinalIgnoreCase)))
+                        return;
+                    images.Add(new ShowImage { Url = url, Label = label, Source = source });
+                }
+
+                // The primary poster is already displayed beside the row, so start after it.
+                Add(SeasonPosterUrl, $"Season {LatestSeasonNumber} poster", "TMDB");
+                Add(ShowPosterUrl, "Series poster", "TMDB");
+                Add(AnilistCoverUrl, "Cover art", "AniList");
+                Add(BackdropUrl, "Backdrop", "TMDB");
+                Add(AnilistBannerUrl, "Banner", "AniList");
+
+                return images;
+            }
+        }
+
+        /// <summary>Gallery entries other than the one already shown as the main poster.</summary>
+        public List<ShowImage> SecondaryImages =>
+            Gallery.Where(i => !string.Equals(i.Url, PosterUrl, StringComparison.OrdinalIgnoreCase)).ToList();
+
+        // --- Air dates -------------------------------------------------------
 
         public DateTime AirReferenceNow => DateTime.Now;
 
@@ -145,6 +297,24 @@ public class IndexModel : PageModel
                 return date.HasValue ? date.Value.ToString("MM/dd/yyyy") : "Unknown";
             }
         }
+
+        public string? AirDateLongFormatted => EffectiveLastAirDate?.ToString("dddd, MMMM d, yyyy");
+
+        /// <summary>How far into the season the latest aired episode sits, as a percentage.</summary>
+        public int? EpisodeProgressPercent
+        {
+            get
+            {
+                var total = TotalEpisodes;
+                if (!total.HasValue || total.Value <= 0 || LatestEpisodeNumber <= 0)
+                    return null;
+                return (int)Math.Round(Math.Clamp(LatestEpisodeNumber / (double)total.Value, 0, 1) * 100);
             }
         }
 
+        /// <summary>True when the upcoming episode is the last one of the season.</summary>
+        public bool IsFinaleNext => TotalEpisodes.HasValue && LatestEpisodeNumber > 0 && LatestEpisodeNumber >= TotalEpisodes.Value;
+
+        private static string? Clean(string? value) => string.IsNullOrWhiteSpace(value) ? null : value.Trim();
+    }
+}

AnimeAnnouncer.Web/Pages/Shared/_Layout.cshtml

@@ -4,6 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"] - AnimeAnnouncer.Web</title>
+    <link rel="icon" href="~/favicon.ico" sizes="any" asp-append-version="true" />
+    <link rel="icon" type="image/png" href="~/favicon.png" sizes="192x192" asp-append-version="true" />
+    <link rel="apple-touch-icon" href="~/favicon.png" asp-append-version="true" />
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/AnimeAnnouncer.Web.styles.css" asp-append-version="true" />

AnimeAnnouncer.Web/wwwroot/css/site.css

@@ -41,55 +41,420 @@ a:hover {
   color: #e9ecef;
 }
 
-/* --- Anime airing-soon cards --- */
+/* --- Airing-soon rows -------------------------------------------------
-.anime-card {
+   Each show gets one full-width horizontal row: the TMDB backdrop (or the
+   AniList banner as a fallback) fills the row behind a scrim, the season
+   poster anchors the left edge, and the remaining artwork appears as a
+   thumbnail strip in the footer. */
+.airing-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.airing-row {
+  position: relative;
+  overflow: hidden;
+  border-radius: 1rem;
+  background-color: #1a1a1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.airing-row:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.55);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.airing-row.is-upcoming {
+  border-left: 4px solid #ff6b6b;
+}
+
+.airing-row.is-aired {
+  border-left: 4px solid rgba(255, 255, 255, 0.18);
+}
+
+.airing-backdrop {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center 25%;
+  opacity: 0.6;
+  transform: scale(1.02);
+  transition: opacity 0.3s ease, transform 0.4s ease;
+}
+
+.airing-row:hover .airing-backdrop {
+  opacity: 0.8;
+  transform: scale(1.05);
+}
+
+/* Keeps the text readable regardless of how bright the backdrop is. */
+.airing-scrim {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.86) 40%, rgba(18, 18, 18, 0.35) 100%),
+    linear-gradient(0deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.2) 65%);
+}
+
+.airing-content {
+  position: relative;
+  display: flex;
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+/* --- Poster --- */
+.airing-poster {
+  position: relative;
+  flex: 0 0 170px;
+  aspect-ratio: 2 / 3;
   border-radius: 0.75rem;
   overflow: hidden;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  background-color: #1e1e1e;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.anime-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
-}
-
-.anime-poster-container {
-  position: relative;
-  height: 320px;
   background-color: #2a2a2a;
-  overflow: hidden;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
 }
 
-.anime-poster {
+.airing-poster img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
-  transition: transform 0.3s ease;
 }
 
-.anime-card:hover .anime-poster {
+.airing-poster-placeholder {
-  transform: scale(1.03);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 3rem;
+  color: #6c757d;
 }
 
-.show-overview {
+.airing-poster-tag {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0.3rem 0.5rem;
+  text-align: center;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #f8f9fa;
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(2px);
+}
+
+/* --- Body --- */
+.airing-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.airing-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.airing-titles {
+  min-width: 0;
+}
+
+.airing-title {
+  margin: 0;
+  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2.1rem);
+  font-weight: 700;
+  line-height: 1.15;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+}
+
+.airing-alt-titles {
+  margin: 0.25rem 0 0;
+  font-size: 0.85rem;
+  color: #adb5bd;
+}
+
+.airing-scores {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.score-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 3.6rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 0.6rem;
+  background: rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(4px);
+}
+
+.score-value {
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.score-source {
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #adb5bd;
+}
+
+.score-tmdb .score-value {
+  color: #ffd43b;
+}
+
+.score-anilist .score-value {
+  color: #02a9ff;
+}
+
+/* --- Metadata --- */
+.airing-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.meta-chip {
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  color: #e9ecef;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  backdrop-filter: blur(4px);
+}
+
+.meta-chip-finale {
+  color: #ffd43b;
+  border-color: rgba(255, 212, 59, 0.5);
+  background: rgba(255, 212, 59, 0.12);
+}
+
+/* --- Genres & tags --- */
+.airing-taxonomy {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.genre-chip {
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #d0bfff;
+  background: rgba(151, 117, 250, 0.18);
+  border: 1px solid rgba(151, 117, 250, 0.45);
+  backdrop-filter: blur(4px);
+}
+
+.tag-chip {
+  padding: 0.1rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.72rem;
+  color: #ced4da;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* The overflow list flows inline with the other chips once opened. */
+.tag-overflow {
+  display: contents;
+}
+
+.tag-overflow > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.tag-overflow > summary::-webkit-details-marker {
+  display: none;
+}
+
+.tag-more {
+  color: #74c0fc;
+  border-style: dashed;
+}
+
+.tag-overflow[open] > .tag-more {
+  display: none;
+}
+
+.airing-progress {
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  overflow: hidden;
+}
+
+.airing-progress-bar {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #4dabf7, #02a9ff);
+}
+
+.airing-overview {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: #dee2e6;
+  /* Full-width rows fit most synopses; only the longest ones get clipped. */
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.45;
-  font-size: 0.875rem;
-  min-height: 5.1em;
-  margin-bottom: 0.5rem;
-  white-space: normal;
-  word-break: normal;
   overflow-wrap: break-word;
 }
 
+.overview-label {
+  font-weight: 600;
+  color: #adb5bd;
+}
+
+.airing-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 0.5rem;
+}
+
+.airing-gallery {
+  display: flex;
+  gap: 0.4rem;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+
+.gallery-thumb {
+  display: block;
+  height: 46px;
+  border-radius: 0.35rem;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  opacity: 0.75;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.gallery-thumb:hover {
+  opacity: 1;
+  transform: translateY(-2px);
+}
+
+.gallery-thumb img {
+  height: 46px;
+  width: auto;
+  display: block;
+}
+
+/* --- Countdown --- */
+.airing-countdown {
+  flex: 0 0 8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding-left: 1rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.countdown-number {
+  font-size: 3rem;
+  font-weight: 800;
+  line-height: 1;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
+}
+
+.is-upcoming .countdown-number {
+  color: #ff8787;
+}
+
+.is-aired .countdown-number {
+  color: #adb5bd;
+}
+
+.countdown-unit {
+  font-size: 0.85rem;
+  color: #ced4da;
+}
+
+.countdown-date {
+  margin-top: 0.35rem;
+  font-size: 0.78rem;
+  color: #adb5bd;
+}
+
+/* --- Narrower viewports --- */
+@media (max-width: 991.98px) {
+  .airing-poster {
+    flex-basis: 140px;
+  }
+
+  .countdown-number {
+    font-size: 2.25rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .airing-content {
+    flex-wrap: wrap;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .airing-poster {
+    flex-basis: 110px;
+    align-self: flex-start;
+  }
+
+  .airing-body {
+    flex-basis: 0;
+  }
+
+  /* The countdown drops below the row rather than squeezing the synopsis. */
+  .airing-countdown {
+    order: 3;
+    flex: 0 0 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 0.5rem;
+    padding-left: 0;
+    padding-top: 0.75rem;
+    border-left: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .countdown-number {
+    font-size: 1.5rem;
+  }
+
+  .airing-header {
+    flex-direction: column;
+  }
+
+  .airing-overview {
+    -webkit-line-clamp: 10;
+  }
+}
+
 /* --- Wide / ultra-wide / 4K display support ---
    Bootstrap 5's ".container" tops out at max-width: 1320px starting at its
    largest built-in breakpoint (1400px) and never grows beyond that, so on

AnimeAnnouncer/Anilist.cs

@@ -38,6 +38,12 @@ public class Anilist
         return result;
     }
 
+    public async Task<List<String>> GetMediaTags(int mediaId)
+    {
+        var results = await client.GetMediaTagsAsync(mediaId);
+        return results.Select(p => p.Name).ToList();
+    }
+
     private async Task Authenticate()
     {
         Boolean success = await client.TryAuthenticateAsync(Token);

AnimeAnnouncer/Cache/AnilistCacheItem.cs

@@ -16,10 +16,12 @@ namespace AnimeAnnouncer.Cache
         public string? BannerImageUrl { get; set; }
         public string? CoverImageUrl { get; set; }
         public int? AverageScore { get; set; }
+        public List<String> Genres { get; set; }
+        public List<String> Tags { get; set; }
         
         public DateTime? Updated { get; set; }
 
-        public static AnilistCacheItem FromMedia(Media media)
+        public static AnilistCacheItem FromMedia(Media media, List<String> tags)
         {
             return new AnilistCacheItem
             {
@@ -34,7 +36,9 @@ namespace AnimeAnnouncer.Cache
                 Description = media.Description,
                 BannerImageUrl = media.BannerImageUrl?.ToString(),
                 CoverImageUrl = media.Cover?.ExtraLargeImageUrl?.ToString(),
-                AverageScore = media.AverageScore
+                AverageScore = media.AverageScore,
+                Genres = media.Genres.ToList(),
+                Tags = tags
             };
         }
     }

AnimeAnnouncer/Cache/TMDBCacheItem.cs

@@ -24,6 +24,8 @@ namespace AnimeAnnouncer.Cache
         
         public DateTime? Updated { get; set; }
 
+        public List<String> Genres { get; set; }
+        public List<String> Keywords { get; set; }
         
     }
 }

AnimeAnnouncer/Program.cs

@@ -10,6 +10,7 @@ using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Logging;
 using TMDbLib.Client;
 using TMDbLib.Objects.Authentication;
+using TMDbLib.Objects.TvShows;
 
 namespace AnimeAnnouncer
 {
@@ -183,7 +184,7 @@ namespace AnimeAnnouncer
                 //supposedShowId = searchResults.Results.First().Id;
                 supposedShowId = searchResults.Results.OrderBy(r => ComputeLevenshteinDistance(title, r.Name)).First().Id;
 
-                var showResult = await tmdbClient.GetTvShowAsync(supposedShowId);
+                var showResult = await tmdbClient.GetTvShowAsync(supposedShowId, TvShowMethods.Keywords);
 
                 var latestSeason = showResult.Seasons.Where(s => s.AirDate.HasValue && s.AirDate.Value < DateTime.Now).OrderByDescending(s => s.SeasonNumber).FirstOrDefault();
 
@@ -234,7 +235,8 @@ namespace AnimeAnnouncer
                             var anilistMedia = await anilistClient.RetrieveAiringShowInformation(title);
                             if (anilistMedia != null)
                             {
-                                anilistCacheItem = AnilistCacheItem.FromMedia(anilistMedia);
+                                var tags = await anilistClient.GetMediaTags(anilistMedia.Id);
+                                anilistCacheItem = AnilistCacheItem.FromMedia(anilistMedia, tags);
                                 anilistCacheItem.Updated = DateTime.Now;
                                 _ = tmdbCache.SetCacheItem($"AnilistCache-{title}", anilistCacheItem);
                             }
@@ -290,7 +292,9 @@ namespace AnimeAnnouncer
                             LastAirDate = lastAirDate,
                             LatestEpisodeNumber = latestEpisodeNumber,
                             AnilistPopulated = anilistPosterPath != null,
-                            Updated = DateTime.Now
+                            Updated = DateTime.Now,
+                            Keywords = showResult.Keywords != null ? showResult.Keywords.Results.Select(p => p.Name).ToList() : new  List<string>(),
+                            Genres = showResult.Genres != null ? showResult.Genres.Select(p => p.Name).ToList() : new  List<string>(),
                         };
                         _ = tmdbCache.SetCacheItem($"ShowCache-{title}", cachedShow);
                         Console.WriteLine($"{title} Added to cache");
@@ -396,7 +400,7 @@ namespace AnimeAnnouncer
                 try
                 {
                     _ = tmdbCache.SetPair($"ShowAnnounced-{supposedShowId}", latestSeasonNumber.ToString());
-                    PostStatus(cachedShow);
+                    _ = PostStatus(cachedShow);
                 }
                 catch(Exception ex)
                 {
@@ -469,7 +473,7 @@ namespace AnimeAnnouncer
             */
         }
 
-        private static async void PostStatus(TMDBCacheItem cachedShow)
+        private static async Task PostStatus(TMDBCacheItem cachedShow)
         {
             //get poster
             String? posterUrl = cachedShow.LatestSeasonPosterPath ?? cachedShow.PosterPath;
@@ -521,7 +525,7 @@ namespace AnimeAnnouncer
             }
             else
             {
-                if(existingAiringItem.LatestEpisodeNumber >= cachedShow.LatestEpisodeNumber)
+                if(existingAiringItem.LatestEpisodeNumber >= cachedShow.LatestEpisodeNumber && existingAiringItem.LastAirDate == airingSoonItem.LastAirDate)
                 {
                     Console.WriteLine($"Not updating {cachedShow.Title} airdate due to episode number not incrementing");
                     return;