Fix newsletter pages: fix mobile banner title, fix Home/Newsletter subnav behavior, and preserve stats on refresh (#449)

* Initial plan

* fix: remove newsletter homepage button, fix mobile banner title, fix newsletter button color

* feat: add Home nav button and active-state highlighting for Home/Newsletter in homepage SubNav

* fix: guard test FindIndex results and clarify CSS cascade comment

* fix: match homepage subnav button gap to section pages (spacing-1)

* fix: keep newsletter stats on refresh and reorder homepage toolbar buttons

* refactor: clarify subnav stats fetch gating and ordering tests

* fix: adjust mobile homepage subnav stat chip visibility

* test: cover mobile new label markup hook in SubNav

* fix: hide total stat chip on mobile subnav

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Reinier <reinier.vanmaanen@xebia.com>

Author: Copilot

src/TechHub.Web/Components/Header.razor

@@ -13,7 +13,7 @@
      With custom banner (home, about, not-found, error pages):
        <Header CustomBannerTitle="Tech Hub" CustomBannerDescription="..." RssFeedUrl="/all/feed.xml" ShowNewsletter="true" />
        <Header CustomBannerTitle="About Us" CustomBannerDescription="..." HideStats="true" ShowDiscord="true" />
-       <Header CustomBannerTitle="Newsletter" CustomBannerDescription="..." ShowHomepageButton="true" />
+       <Header CustomBannerTitle="Newsletter" CustomBannerDescription="..." />
      
      Without section/banner (fallback):
        <Header />
@@ -37,20 +37,20 @@
     }
     else if (!string.IsNullOrEmpty(CustomBannerTitle))
     {
-        <SectionBanner Title="@CustomBannerTitle" Description="@CustomBannerDescription" RssFeedUrl="@RssFeedUrl" />
+        <SectionBanner Title="@CustomBannerTitle" Description="@CustomBannerDescription" RssFeedUrl="@RssFeedUrl" IsHomepage="@IsHomepage" />
         @if (!HideSubNav)
         {
-            <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomepageButton="@ShowHomepageButton" />
+            <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomeButton="@ShowHomeButton" />
         }
     }
     else if (ChildContent != null)
     {
         @ChildContent
-        <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomepageButton="@ShowHomepageButton" />
+        <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomeButton="@ShowHomeButton" />
     }
     else
     {
-        <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomepageButton="@ShowHomepageButton" />
+        <SubNav Sections="@SectionCache.Sections" RssFeedUrl="@RssFeedUrl" ShowNewsletter="@ShowNewsletter" HideStats="@HideStats" ShowDiscord="@ShowDiscord" ShowHomeButton="@ShowHomeButton" />
     }
 </header>
 
@@ -83,10 +83,16 @@
     public bool ShowDiscord { get; set; }
 
     /// <summary>
-    /// When true, renders a Homepage button in the SubNav. Used on the Newsletter page.
+    /// When true, renders a "Home" button in the SubNav that is highlighted when on the homepage.
     /// </summary>
     [Parameter]
-    public bool ShowHomepageButton { get; set; }
+    public bool ShowHomeButton { get; set; }
+
+    /// <summary>
+    /// When true, renders the SectionBanner with homepage-specific styling and "Home" as the mobile title.
+    /// </summary>
+    [Parameter]
+    public bool IsHomepage { get; set; }
 
     /// <summary>
     /// When true, hides the SubNav completely. Used on pages where navigation is not needed (e.g. Newsletter).

src/TechHub.Web/Components/Layout/MainLayout.razor

@@ -18,7 +18,8 @@
         CustomBannerDescription="@_customBannerDescription"
         HideStats="@_hideStats"
         ShowDiscord="@_showDiscord"
-        ShowHomepageButton="@_showHomepageButton"
+        IsHomepage="@_isHomepage"
+        ShowHomeButton="@_showHomeButton"
         HideSubNav="@_hideSubNav" />
 
 @if (_isInvalid)
@@ -65,7 +66,8 @@ else
     private bool _showNewsletter;
     private bool _hideStats;
     private bool _showDiscord;
-    private bool _showHomepageButton;
+    private bool _isHomepage;
+    private bool _showHomeButton;
     private bool _hideSubNav;
     private bool _isInvalid;
     private TechHub.Core.Models.Section? _currentSection;
@@ -110,7 +112,8 @@ else
         _showNewsletter = false;
         _hideStats = false;
         _showDiscord = false;
-        _showHomepageButton = false;
+        _isHomepage = false;
+        _showHomeButton = false;
         _hideSubNav = false;
 
         // Try to match first URL segment to a known section
@@ -166,6 +169,8 @@ else
                 _customBannerDescription = "Your source for Microsoft technology news, tutorials, and community content";
                 _currentRssFeedUrl = "/all/feed.xml";
                 _showNewsletter = true;
+                _showHomeButton = true;
+                _isHomepage = true;
                 break;
             case "about":
                 _customBannerTitle = "About Us";
@@ -176,7 +181,8 @@ else
             case "newsletter":
                 _customBannerTitle = "Newsletter";
                 _customBannerDescription = "Subscribe to weekly roundups and daily overviews for your favourite sections";
-                _showHomepageButton = true;
+                _showNewsletter = true;
+                _showHomeButton = true;
                 break;
             case "not-found":
                 _customBannerTitle = "Not Found";

src/TechHub.Web/Components/SectionBanner.razor

@@ -50,17 +50,24 @@
     [Parameter]
     public Section? Section { get; set; }
 
+    /// <summary>
+    /// When true, renders the banner with homepage-specific styling (home-banner CSS class)
+    /// and shows "Home" as the mobile title instead of the page title.
+    /// </summary>
+    [Parameter]
+    public bool IsHomepage { get; set; }
+
     // Computed properties - prefer Section data if available
     private string DisplayTitle => Section?.Title ?? Title ?? string.Empty;
     private string? DisplayDescription => Section?.Description ?? Description;
     private string BackgroundClass => Section != null
     ? $"section-banner-bg-{Section.Name}"
     : BackgroundCssClass ?? "section-banner-bg-none";
 
-    private string CssClass => Section == null && string.IsNullOrEmpty(BackgroundCssClass) ? "home-banner" : "";
+    private string CssClass => IsHomepage ? "home-banner" : "";
 
     /// <summary>
     /// Mobile title: shows "Home" for homepage, otherwise same as DisplayTitle.
     /// </summary>
-    private string MobileTitle => Section == null && string.IsNullOrEmpty(BackgroundCssClass) ? "Home" : DisplayTitle;
+    private string MobileTitle => IsHomepage ? "Home" : DisplayTitle;
 }

src/TechHub.Web/Components/SubNav.razor

@@ -9,14 +9,15 @@
      Section page:  <SubNav Section="@sectionData" RssFeedUrl="/ai/feed.xml" ShowNewsletter="true" />
      Homepage:      <SubNav Sections="@allSections" RssFeedUrl="/all/feed.xml" ShowNewsletter="true" />
      About page:    <SubNav Sections="@allSections" HideStats="true" ShowDiscord="true" />
-     Newsletter:    <SubNav Sections="@allSections" ShowHomepageButton="true" />
+     Newsletter:    <SubNav Sections="@allSections" />
    ============================================================================ *@
 
 @using TechHub.Core.Models
 @using TechHub.Web.Services
 @inject NavigationManager Navigation
 @inject IJSRuntime JS
 @inject HomepageStatsState HomepageStats
+@inject ITechHubApiClient ApiClient
 @implements IDisposable
 
 @if (Section != null)
@@ -86,43 +87,43 @@
         </div>
     </nav>
 }
-else if (Sections != null && Sections.Any())
+else if (Sections != null && HasHomepageContent)
 {
     @* Homepage SubNav: stat buttons + Newsletter; visible on desktop and mobile (no dropdown) *@
     <nav class="sub-nav sub-nav-homepage-visible" aria-label="Site navigation">
         <div class="sub-nav-wrapper">
+            @if (ShowHomeButton)
+            {
+                <a href="/" class="btn-subnav @(IsHomepageActive() ? "active" : "")" aria-label="Homepage">
+                    Home
+                </a>
+            }
+            @if (ShowNewsletter)
+            {
+                <a href="/newsletter/subscribe" class="btn-subnav btn-subnav-action @(IsActive("/newsletter") ? "active" : "")" aria-label="Subscribe to newsletter">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></svg>
+                    Newsletter
+                </a>
+            }
             @if (!HideStats && HomepageStats.TotalCount.HasValue)
             {
                 @if (HomepageStats.RecentCount is > 0)
                 {
                     <a href="/all?from=@HomepageStats.WeekAgoDate" class="btn-subnav btn-subnav-action btn-subnav-stat-new" aria-label="@HomepageStats.RecentCount new items this week">
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg><span>@HomepageStats.RecentCount<span class="stat-chip-new-label"> new this week</span></span>
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg><span>@HomepageStats.RecentCount<span class="stat-chip-new-label"> new<span class="stat-chip-new-label-suffix"> this week</span></span></span>
                     </a>
                 }
                 <a href="/all" class="btn-subnav btn-subnav-action btn-subnav-stat-total" aria-label="@HomepageStats.TotalCount items total">
                     <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg><span>@HomepageStats.TotalCount.Value.ToString("N0", System.Globalization.CultureInfo.InvariantCulture)<span class="stat-chip-total-label"> items total</span></span>
                 </a>
             }
-            @if (ShowNewsletter)
-            {
-                <a href="/newsletter/subscribe" class="btn-subnav btn-subnav-action btn-subnav-newsletter" aria-label="Subscribe to newsletter">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" /></svg>
-                    Newsletter
-                </a>
-            }
             @if (ShowDiscord)
             {
                 <a href="https://discord.gg/cURHV9TvFS" target="_blank" rel="noopener noreferrer" class="btn-subnav btn-subnav-action btn-subnav-discord" aria-label="Join our Discord server">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057.1 18.08.114 18.1.132 18.112a19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
                     Find us on GitHub Community Discord
                 </a>
             }
-            @if (ShowHomepageButton)
-            {
-                <a href="/" class="btn-subnav btn-subnav-action btn-subnav-newsletter">
-                    Homepage
-                </a>
-            }
         </div>
     </nav>
 }
@@ -144,6 +145,13 @@ else if (Sections != null && Sections.Any())
     [Parameter]
     public string? RssFeedUrl { get; set; }
 
+    /// <summary>
+    /// When true, renders a "Home" button to the left of the stats in the homepage-style SubNav.
+    /// The button is visually highlighted (active) when the user is on the homepage.
+    /// </summary>
+    [Parameter]
+    public bool ShowHomeButton { get; set; }
+
     /// <summary>
     /// When true, renders a Newsletter subscribe button in the action area.
     /// </summary>
@@ -162,13 +170,13 @@ else if (Sections != null && Sections.Any())
     [Parameter]
     public bool ShowDiscord { get; set; }
 
-    /// <summary>
-    /// When true, renders a Homepage button. Used on the Newsletter page for quick back-navigation.
-    /// </summary>
-    [Parameter]
-    public bool ShowHomepageButton { get; set; }
-
-    private bool HasActions => !string.IsNullOrEmpty(RssFeedUrl) || ShowNewsletter;
+    private bool HasHomepageActions => ShowHomeButton || ShowNewsletter || ShowDiscord || !string.IsNullOrEmpty(RssFeedUrl);
+    private bool HasHomepageContent => HasHomepageActions || (!HideStats && HomepageStats.TotalCount.HasValue);
+    private bool ShouldFetchHomepageStats => Section == null
+                                             && Sections != null
+                                             && HasHomepageActions
+                                             && !HideStats
+                                             && !HomepageStats.TotalCount.HasValue;
 
     private bool dropdownOpen;
 
@@ -274,6 +282,32 @@ else if (Sections != null && Sections.Any())
         HomepageStats.OnChanged += OnHomepageStatsChanged;
     }
 
+    protected override async Task OnParametersSetAsync()
+    {
+        if (ShouldFetchHomepageStats)
+        {
+            var weekAgoDate = GetWeekAgoDate();
+            var recentItemsTask = ApiClient.GetCollectionItemsAsync("all", "all", take: 1, fromDate: weekAgoDate);
+            var allItemsTask = ApiClient.GetCollectionItemsAsync("all", "all", take: 1);
+
+            await Task.WhenAll(recentItemsTask, allItemsTask);
+
+            var recentCount = (await recentItemsTask)?.TotalCount;
+            var totalCount = (await allItemsTask)?.TotalCount;
+
+            HomepageStats.Update(recentCount, totalCount, weekAgoDate, Sections?.Count() ?? 0);
+        }
+    }
+
+    private static string GetWeekAgoDate()
+    {
+        var brussels = TimeZoneInfo.FindSystemTimeZoneById("Europe/Brussels");
+        return TimeZoneInfo.ConvertTime(DateTimeOffset.UtcNow, brussels)
+            .Date
+            .AddDays(-7)
+            .ToString("yyyy-MM-dd");
+    }
+
     private void OnHomepageStatsChanged()
     {
         InvokeAsync(StateHasChanged);
@@ -292,6 +326,17 @@ else if (Sections != null && Sections.Any())
         HomepageStats.OnChanged -= OnHomepageStatsChanged;
     }
 
+    /// <summary>
+    /// Determines if the user is currently on the homepage (path is exactly "/").
+    /// Used specifically for the Home button active state; avoids the prefix-match
+    /// in IsActive which would match "/" against every URL.
+    /// </summary>
+    private bool IsHomepageActive()
+    {
+        var currentPath = new Uri(Navigation.Uri).AbsolutePath.TrimEnd('/');
+        return string.IsNullOrEmpty(currentPath);
+    }
+
     /// <summary>
     /// Determines if the given URL should be visually highlighted in the subnav.
     /// Matches both exact pages and content detail pages under a collection.

src/TechHub.Web/Components/SubNav.razor.css

@@ -267,7 +267,7 @@ html.keyboard-nav .btn-subnav:focus-visible {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--spacing-2);
+    gap: var(--spacing-1);
 }
 
 /* Stat buttons: standalone button-style chips for stats */
@@ -289,12 +289,13 @@ html.keyboard-nav .btn-subnav:focus-visible {
 }
 
 @media (max-width: 640px) {
-    /* On small mobile, show only icon + number — hide all label text */
-    .stat-chip-new-label {
+    /* On small mobile, keep "new" text and hide "this week" + total chip */
+    .stat-chip-new-label-suffix,
+    .stat-chip-total-label {
         display: none;
     }
 
-    .stat-chip-total-label {
+    .btn-subnav-action.btn-subnav-stat-total {
         display: none;
     }
 }
@@ -329,29 +330,33 @@ html.keyboard-nav .btn-subnav:focus-visible {
     }
 }
 
-.btn-subnav-newsletter {
+.btn-subnav-discord {
     border-color: var(--color-purple-bright);
     color: var(--color-purple-bright);
 }
 
 @media (hover: hover) {
-    .btn-subnav-newsletter:hover {
+    .btn-subnav-discord:hover {
         background: var(--color-purple-dark);
         color: var(--color-text-on-emphasis);
         border-color: var(--color-purple-medium);
     }
 }
 
-.btn-subnav-discord {
+/* Newsletter/Home nav button active state — overrides btn-subnav-action secondary color.
+   .btn-subnav-action is declared later in the file than .btn-subnav.active, so at equal
+   specificity it would win and reset the color. This rule restores the active appearance. */
+.btn-subnav-action.active {
+    color: var(--color-text-on-emphasis);
+    background: var(--color-purple-dark);
     border-color: var(--color-purple-bright);
-    color: var(--color-purple-bright);
 }
 
 @media (hover: hover) {
-    .btn-subnav-discord:hover {
-        background: var(--color-purple-dark);
+    .btn-subnav-action.active:hover {
+        background: var(--color-purple-medium);
         color: var(--color-text-on-emphasis);
-        border-color: var(--color-purple-medium);
+        text-decoration: none;
     }
 }