refactor: extract StreamNowButton component shared by hero and nav menu

DeepDrftPublic.Client/Controls/DeepDrftHero.razor

@@ -5,7 +5,7 @@
     We craft immersive electronic soundscapes — live; built from synthesizers, drum machines, and raw intention.
 </p>
 <div class="hero-actions @AnimClass">
-    <a class="btn-primary" href="/tracks">Start Streaming</a>
+    <StreamNowButton ButtonClass="btn-primary" ButtonLabel="Start Streaming" />
     <a class="btn-ghost" href="/tracks">Browse Tracks</a>
 </div>
 

DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css

@@ -75,51 +75,9 @@
     animation-delay: 0.54s;
 }
 
-.btn-primary {
-    font-family: var(--deepdrft-font-mono);
-    font-size: 0.68rem;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--deepdrft-white);
-    background: var(--deepdrft-navy);
-    border: none;
-    padding: 1rem 2.2rem;
-    cursor: pointer;
-    text-decoration: none;
-    transition: background 0.25s, transform 0.2s;
-    display: inline-block;
-}
-
-.btn-primary:hover {
-    background: var(--deepdrft-green);
-    transform: translateY(-1px);
-}
-
-.btn-ghost {
-    font-family: var(--deepdrft-font-mono);
-    font-size: 0.68rem;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: var(--deepdrft-navy);
-    background: transparent;
-    border: 1px solid var(--deepdrft-border);
-    padding: 1rem 2.2rem;
-    cursor: pointer;
-    text-decoration: none;
-    transition: border-color 0.25s, color 0.25s;
-    display: inline-block;
-}
-
-.btn-ghost:hover { border-color: var(--deepdrft-navy); }
-
 @media (max-width: 599px) {
     .hero-actions {
         flex-direction: column;
         align-items: stretch;
     }
-
-    .btn-primary,
-    .btn-ghost {
-        text-align: center;
-    }
 }

DeepDrftPublic.Client/Controls/StreamNowButton.razor

@@ -0,0 +1,129 @@
+@using DeepDrftPublic.Client.Services
+
+<button type="button"
+        class="@ButtonClass"
+        disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
+        aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
+        @onclick="StreamNow">
+    @if (_findingTrack)
+    {
+        <span>@LoadingLabel</span>
+    }
+    else
+    {
+        <span>@ButtonLabel</span>
+    }
+</button>
+@if (_streamMessage is not null)
+{
+    <p class="stream-now-message" role="status">@_streamMessage</p>
+}
+
+@implements IDisposable
+
+@code {
+    [Parameter, EditorRequired] public required string ButtonClass { get; set; }
+    [Parameter, EditorRequired] public required string ButtonLabel { get; set; }
+    [Parameter] public string LoadingLabel { get; set; } = "Finding a track…";
+    [Parameter] public EventCallback OnStreamStarted { get; set; }
+    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    [Inject] public required ITrackDataService TrackData { get; set; }
+
+    private bool _streamLoading;
+    private bool _findingTrack;
+    private string? _streamMessage;
+    private CancellationTokenSource? _messageCts;
+
+    private const string EmptyLibraryMessage = "No tracks yet — check back soon.";
+    private const string FetchFailedMessage = "Couldn't reach the library — try again.";
+
+    private async Task StreamNow()
+    {
+        // Re-entrancy guard: the button is disabled while loading, but guard in code too so a
+        // double-dispatch can never start two concurrent streams.
+        if (_streamLoading) return;
+
+        _streamLoading = true;
+        _findingTrack = true;
+        _streamMessage = null;
+
+        // Warm the AudioContext FIRST, inside the gesture's call stack and before the network
+        // await below. Safari only lets a suspended AudioContext resume while the originating
+        // user gesture is still active; awaiting GetRandomTrack() first would consume the gesture
+        // and leave playback silently refused. PlayerService is null only outside the
+        // AudioPlayerProvider cascade (it should always be present in the public layout).
+        var warmTask = PlayerService?.WarmAudioContext() ?? Task.CompletedTask;
+
+        try
+        {
+            await warmTask;
+            var result = await TrackData.GetRandomTrack();
+
+            if (!result.Success)
+            {
+                ShowTransientMessage(FetchFailedMessage);
+                return;
+            }
+
+            if (result.Value is not { } track)
+            {
+                ShowTransientMessage(EmptyLibraryMessage);
+                return;
+            }
+
+            await OnStreamStarted.InvokeAsync();
+
+            // Track is found — flip only the label flag so the button reverts to
+            // its resting label before the stream begins, while _streamLoading stays true
+            // to keep the button disabled and the re-entrancy guard intact.
+            _findingTrack = false;
+            StateHasChanged();
+
+            if (PlayerService is not null)
+                await PlayerService.SelectTrackStreaming(track);
+        }
+        catch (Exception)
+        {
+            ShowTransientMessage(FetchFailedMessage);
+        }
+        finally
+        {
+            _streamLoading = false;
+            _findingTrack = false;
+        }
+    }
+
+    private void ShowTransientMessage(string message)
+    {
+        _streamMessage = message;
+
+        // Cancel any in-flight clear timer so the newest message gets its full display window.
+        _messageCts?.Cancel();
+        _messageCts?.Dispose();
+        _messageCts = new CancellationTokenSource();
+        var token = _messageCts.Token;
+
+        _ = ClearMessageAfterDelayAsync(token);
+    }
+
+    private async Task ClearMessageAfterDelayAsync(CancellationToken token)
+    {
+        try
+        {
+            await Task.Delay(TimeSpan.FromSeconds(4), token);
+        }
+        catch (TaskCanceledException)
+        {
+            return;
+        }
+
+        _streamMessage = null;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose()
+    {
+        _messageCts?.Cancel();
+        _messageCts?.Dispose();
+    }
+}

DeepDrftPublic.Client/Controls/StreamNowButton.razor.css

@@ -0,0 +1,7 @@
+.stream-now-message {
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.12em;
+    color: var(--deepdrft-muted);
+    margin: 0.5rem 0 0;
+}

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -1,4 +1,5 @@
 @using DeepDrftPublic.Client.Common
+@using DeepDrftPublic.Client.Controls
 @using DeepDrftPublic.Client.Services
 
 @* Desktop Menu *@
@@ -16,20 +17,7 @@
         </ul>
 
         <div class="dd-nav-actions">
-            <button type="button"
+            <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;" />
-                    class="dd-nav-cta"
-                    disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
-                    aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
-                    @onclick="StreamNow">
-                @if (_findingTrack)
-                {
-                    <span>Finding a track&#8230;</span>
-                }
-                else
-                {
-                    <span>Stream Now &#9654;</span>
-                }
-            </button>
             @* <button type="button" *@
             @*         class="dd-nav-toggle" *@
             @*         aria-label="Toggle dark mode" *@
@@ -38,11 +26,6 @@
             @*     @((MarkupString)DarkLightModeIconSvg) *@
             @* </button> *@
         </div>
-
-        @if (_streamMessage is not null)
-        {
-            <p class="dd-nav-stream-message" role="status">@_streamMessage</p>
-        }
     </nav>
 </div>
 
@@ -78,147 +61,23 @@
                     </li>
                 }
                 <li>
-                    <button type="button"
+                    <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;" OnStreamStarted="CloseMobileMenu" />
-                            class="dd-nav-cta"
-                            disabled="@(_streamLoading || !RendererInfo.IsInteractive)"
-                            aria-busy="@_streamLoading.ToString().ToLowerInvariant()"
-                            @onclick="StreamNowMobile">
-                        @if (_findingTrack)
-                        {
-                            <span>Finding a track&#8230;</span>
-                        }
-                        else
-                        {
-                            <span>Stream Now &#9654;</span>
-                        }
-                    </button>
                 </li>
             </ul>
         }
-
-        @if (_streamMessage is not null)
-        {
-            <p class="dd-nav-stream-message" role="status">@_streamMessage</p>
-        }
     </nav>
 </div>
 
-@implements IDisposable
-
 @code {
     [Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
-    [Inject] public required ITrackDataService TrackData { get; set; }
-    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
 
     // Elevation is vestigial under the frosted-glass design but kept on the parameter
     // surface so MainLayout's <DeepDrftMenu Elevation="..."> call site stays intact.
     [Parameter] public int Elevation { get; set; }
     [Parameter] public required bool IsDarkMode { get; set; }
     [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
-    
+
     private bool _mobileMenuOpen;
-    private bool _streamLoading;
-    private bool _findingTrack;
-    private string? _streamMessage;
-    private CancellationTokenSource? _messageCts;
-
-    private const string EmptyLibraryMessage = "No tracks yet — check back soon.";
-    private const string FetchFailedMessage = "Couldn't reach the library — try again.";
-
-    private Task StreamNow() => StreamNowCore(closeMobileMenu: false);
-
-    private Task StreamNowMobile() => StreamNowCore(closeMobileMenu: true);
-
-    private async Task StreamNowCore(bool closeMobileMenu)
-    {
-        // Re-entrancy guard: the button is disabled while loading, but guard in code too so a
-        // double-dispatch can never start two concurrent streams.
-        if (_streamLoading) return;
-
-        _streamLoading = true;
-        _findingTrack = true;
-        _streamMessage = null;
-
-        // Warm the AudioContext FIRST, inside the gesture's call stack and before the network
-        // await below. Safari only lets a suspended AudioContext resume while the originating
-        // user gesture is still active; awaiting GetRandomTrack() first would consume the gesture
-        // and leave playback silently refused. PlayerService is null only outside the
-        // AudioPlayerProvider cascade (it should always be present in the public layout).
-        var warmTask = PlayerService?.WarmAudioContext() ?? Task.CompletedTask;
-
-        try
-        {
-            await warmTask;
-            var result = await TrackData.GetRandomTrack();
-
-            if (!result.Success)
-            {
-                ShowTransientMessage(FetchFailedMessage);
-                return;
-            }
-
-            if (result.Value is not { } track)
-            {
-                ShowTransientMessage(EmptyLibraryMessage);
-                return;
-            }
-
-            if (closeMobileMenu)
-                _mobileMenuOpen = false;
-
-            // Track is found — flip only the label flag so the button reverts to
-            // "Stream Now ▶" before the stream begins, while _streamLoading stays true
-            // to keep the button disabled and the re-entrancy guard intact.
-            _findingTrack = false;
-            StateHasChanged();
-
-            if (PlayerService is not null)
-                await PlayerService.SelectTrackStreaming(track);
-        }
-        catch (Exception)
-        {
-            ShowTransientMessage(FetchFailedMessage);
-        }
-        finally
-        {
-            _streamLoading = false;
-            _findingTrack = false;
-        }
-    }
-
-    private void ShowTransientMessage(string message)
-    {
-        _streamMessage = message;
-
-        // Cancel any in-flight clear timer so the newest message gets its full display window.
-        _messageCts?.Cancel();
-        _messageCts?.Dispose();
-        _messageCts = new CancellationTokenSource();
-        var token = _messageCts.Token;
-
-        _ = ClearMessageAfterDelayAsync(token);
-    }
-
-    private async Task ClearMessageAfterDelayAsync(CancellationToken token)
-    {
-        try
-        {
-            await Task.Delay(TimeSpan.FromSeconds(4), token);
-        }
-        catch (TaskCanceledException)
-        {
-            return;
-        }
-
-        _streamMessage = null;
-        await InvokeAsync(StateHasChanged);
-    }
-
-    public void Dispose()
-    {
-        _messageCts?.Cancel();
-        _messageCts?.Dispose();
-    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css

@@ -90,7 +90,7 @@
 }
 
 /* Stream Now CTA — square pill, navy on warm white */
-.dd-nav-cta {
+::deep .dd-nav-cta {
     display: inline-block;
     font-family: var(--deepdrft-font-mono);
     font-size: 0.68rem;
@@ -106,18 +106,18 @@
     transition: background 0.25s ease;
 }
 
-.dd-nav-cta:hover,
+::deep .dd-nav-cta:hover,
-.dd-nav-cta:focus-visible {
+::deep .dd-nav-cta:focus-visible {
     background: var(--deepdrft-green);
 }
 
-.dd-nav-dark .dd-nav-cta {
+.dd-nav-dark ::deep .dd-nav-cta {
     color: var(--deepdrft-white);
     background: var(--deepdrft-primary);
 }
 
-.dd-nav-dark .dd-nav-cta:hover,
+.dd-nav-dark ::deep .dd-nav-cta:hover,
-.dd-nav-dark .dd-nav-cta:focus-visible {
+.dd-nav-dark ::deep .dd-nav-cta:focus-visible {
     background: var(--deepdrft-senary);
 }
 
@@ -207,7 +207,7 @@
     padding: 0.6rem 0;
 }
 
-.dd-nav-links-mobile .dd-nav-cta {
+.dd-nav-links-mobile ::deep .dd-nav-cta {
     margin-top: 0.5rem;
     text-align: center;
 }

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -378,3 +378,51 @@ h2, h3, h4, h5, h6,
         flex-direction: column;
     }
 }
+
+/* =============================================================================
+   BUTTON UTILITIES  (btn-primary, btn-ghost)
+   ============================================================================= */
+
+.btn-primary {
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--deepdrft-white);
+    background: var(--deepdrft-navy);
+    border: none;
+    padding: 1rem 2.2rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.25s, transform 0.2s;
+    display: inline-block;
+}
+
+.btn-primary:hover {
+    background: var(--deepdrft-green);
+    transform: translateY(-1px);
+}
+
+.btn-ghost {
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--deepdrft-navy);
+    background: transparent;
+    border: 1px solid var(--deepdrft-border);
+    padding: 1rem 2.2rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color 0.25s, color 0.25s;
+    display: inline-block;
+}
+
+.btn-ghost:hover { border-color: var(--deepdrft-navy); }
+
+@media (max-width: 599px) {
+    .btn-primary,
+    .btn-ghost {
+        text-align: center;
+    }
+}