From 13adb144a6b0532f6b639c53cc2deb244662a7da Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sun, 7 Jun 2026 06:53:21 -0400
Subject: [PATCH] feature: Mobile Menu & Style Polish

---
 .../AudioPlayerBar/AudioPlayerBar.razor.css   |  6 +-
 .../Controls/PlayStateIcon.razor              | 41 +++++-----
 .../Controls/PlayStateIcon.razor.css          | 15 +++-
 .../Layout/DeepDrftFooter.razor               |  5 +-
 .../Layout/DeepDrftMenu.razor                 | 78 +++++++------------
 DeepDrftPublic.Client/Layout/Pages.cs         |  7 +-
 .../wwwroot/styles/deepdrft-tokens.css        |  1 +
 7 files changed, 69 insertions(+), 84 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index 1cced0f..7363e5c 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -46,8 +46,8 @@
 /* Minimized floating dock — positioning + hover only; colour from MudFab */
 .minimized-dock {
     position: fixed;
-    bottom: 60px;
-    right: 60px;
+    bottom: 30px;
+    right: 30px;
     z-index: 1300;
 }
 
@@ -56,7 +56,7 @@
 }
 
 @media (max-width: 768px) {
-    ::deep .minimized-dock {
+    .minimized-dock {
         bottom: 15px;
         right: 15px;
     }
diff --git a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
index 30d5bfa..8317591 100644
--- a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
+++ b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor
@@ -1,21 +1,22 @@
 @namespace DeepDrftPublic.Client.Controls
-
-@if (!RendererInfo.IsInteractive)
-{
-    @* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
-       button has no wired click handler, so clicks would vanish. Show a spinner in its place
-       until the component hydrates, at which point it re-renders into the live button. *@
-    <MudProgressCircular Color="Color"
-                         Size="Size"
-                         Indeterminate="true"
-                         Class="mud-icon-button" />
-}
-else
-{
-    <MudIconButton Icon="@Icon"
-                   Color="Color"
-                   Size="Size"
-                   Disabled="@Disabled"
-                   OnClick="@OnToggle"
-                   Class="xxxx"/>
-}
+<div class="icon-container">
+    @if (!RendererInfo.IsInteractive)
+    {
+        @* Interactive runtime (WASM, or Server on first visit) not attached yet — the prerendered
+           button has no wired click handler, so clicks would vanish. Show a spinner in its place
+           until the component hydrates, at which point it re-renders into the live button. *@
+        <MudProgressCircular Color="Color"
+                             Size="Size"
+                             Indeterminate="true"
+                             Class="mud-icon-button" />
+    }
+    else
+    {
+        
+        <MudIconButton Icon="@Icon"
+                       Color="Color"
+                       Size="Size"
+                       Disabled="@Disabled"
+                       OnClick="@OnToggle"/>
+    }
+</div>
diff --git a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
index 64e8c42..a7d846d 100644
--- a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
+++ b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
@@ -1,7 +1,14 @@
-::deep .xxxx {
-    background-color: var(--deepdrft-muted)
+.icon-container {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    background-color: var(--deepdrft-soft);
+    border-radius: 50%;
+    height: 60px;
+    width: 60px;
+    transition: background-color 1s ease-in-out;
 }
 
-::deep .xxxx:hover {
-    background-color: color-mix(var(--deepdrft-muted), var(--deepdrft-navy));
+.icon-container:hover {
+    background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
 }
\ No newline at end of file
diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor
index 2238093..88653d8 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor
+++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor
@@ -1,9 +1,6 @@
 <footer class="deepdrft-footer">
-    <div class="deepdrft-footer-logo">Deep <span>DRFT</span></div>
+    <div class="deepdrft-footer-logo d-none d-sm-inline">Deep <span>DRFT</span></div>
     <ul class="deepdrft-footer-links">
-        <li><a href="/tracks">Listen</a></li>
-        <li><a href="#">Sessions</a></li>
-        <li><a href="/tracks">Archive</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
diff --git a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
index 00b5c06..fd34263 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+++ b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
@@ -1,12 +1,11 @@
 @using DeepDrftPublic.Client.Common
 @using DeepDrftPublic.Client.Services
-@implements IAsyncDisposable
 
-<nav class="@NavClass">
-    <a class="dd-nav-brand" href="/">Deep DRFT</a>
+@* Desktop Menu *@
+<div class="d-none d-sm-flex">
+    <nav class="@NavClass">
+        <a class="dd-nav-brand" href="/">Deep DRFT</a>
 
-    @if (_isDesktop)
-    {
         <ul class="dd-nav-links">
             @foreach (var navPage in Pages.MenuPages)
             {
@@ -18,25 +17,30 @@
 
         <div class="dd-nav-actions">
             <a href="/tracks" class="dd-nav-cta">Stream Now &#9654;</a>
-            <button type="button"
-                    class="dd-nav-toggle"
-                    aria-label="Toggle dark mode"
-                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
-                    @onclick="DarkModeToggle">
-                @((MarkupString)DarkLightModeIconSvg)
-            </button>
+            @* <button type="button" *@
+            @*         class="dd-nav-toggle" *@
+            @*         aria-label="Toggle dark mode" *@
+            @*         aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
+            @*         @onclick="DarkModeToggle"> *@
+            @*     @((MarkupString)DarkLightModeIconSvg) *@
+            @* </button> *@
         </div>
-    }
-    else
-    {
+    </nav>
+</div>
+
+@* Mobile Menu *@
+<div class="d-flex d-sm-none">
+    <nav class="@NavClass">
+        <a class="dd-nav-brand" href="/">Deep DRFT</a>
+        
         <div class="dd-nav-actions">
-            <button type="button"
-                    class="dd-nav-toggle"
-                    aria-label="Toggle dark mode"
-                    aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()"
-                    @onclick="DarkModeToggle">
-                @((MarkupString)DarkLightModeIconSvg)
-            </button>
+            @* <button type="button" *@
+            @*         class="dd-nav-toggle" *@
+            @*         aria-label="Toggle dark mode" *@
+            @*         aria-pressed="@IsDarkMode.ToString().ToLowerInvariant()" *@
+            @*         @onclick="DarkModeToggle"> *@
+            @*     @((MarkupString)DarkLightModeIconSvg) *@
+            @* </button> *@
             <button type="button"
                     class="dd-nav-hamburger"
                     aria-label="Toggle navigation"
@@ -60,11 +64,10 @@
                 </li>
             </ul>
         }
-    }
-</nav>
+    </nav>
+</div>
 
 @code {
-    [Inject] public required IBrowserViewportService BrowserViewportService { get; set; }
     [Inject] public required DarkModeCookieService DarkModeCookieService { get; set; }
 
     // Elevation is vestigial under the frosted-glass design but kept on the parameter
@@ -72,10 +75,8 @@
     [Parameter] public int Elevation { get; set; }
     [Parameter] public required bool IsDarkMode { get; set; }
     [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
-
-    private bool _isDesktop = true;
+    
     private bool _mobileMenuOpen;
-    private Guid _viewportSubscriptionId;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -91,30 +92,9 @@
             // parent so the menu's IsDarkMode parameter stays consistent with DarkModeSettings.
             IsDarkMode = DarkModeCookieService.GetDarkMode();
             await IsDarkModeChanged.InvokeAsync(IsDarkMode);
-
-            _viewportSubscriptionId = Guid.NewGuid();
-            await BrowserViewportService.SubscribeAsync(
-                _viewportSubscriptionId,
-                args =>
-                {
-                    _isDesktop = args.Breakpoint >= Breakpoint.Sm;
-                    if (_isDesktop)
-                    {
-                        _mobileMenuOpen = false;
-                    }
-                    InvokeAsync(StateHasChanged);
-                },
-                new ResizeOptions { NotifyOnBreakpointOnly = true },
-                fireImmediately: true);
         }
     }
 
-    public async ValueTask DisposeAsync()
-    {
-        if (_viewportSubscriptionId != Guid.Empty)
-            await BrowserViewportService.UnsubscribeAsync(_viewportSubscriptionId);
-    }
-
     private string NavClass => IsDarkMode ? "dd-nav dd-nav-dark" : "dd-nav dd-nav-light";
 
     private string DarkLightModeIconSvg => IsDarkMode ? DDIcons.GasLampLit : DDIcons.GasLamp;
diff --git a/DeepDrftPublic.Client/Layout/Pages.cs b/DeepDrftPublic.Client/Layout/Pages.cs
index db4f850..a00b966 100644
--- a/DeepDrftPublic.Client/Layout/Pages.cs
+++ b/DeepDrftPublic.Client/Layout/Pages.cs
@@ -13,10 +13,9 @@ public static class Pages
 {
     public static readonly List<PageRoute> MenuPages =
     [
-        new() { Name = "Listen",   Route = "/tracks",   Icon = Icons.Material.Filled.LibraryMusic },
-        new() { Name = "Sessions", Route = "#",         Icon = Icons.Material.Filled.Album },          // TODO: placeholder until Sessions ships
-        new() { Name = "Archive",  Route = "#",         Icon = Icons.Material.Filled.FolderOpen },     // TODO: placeholder until Archive ships
-        new() { Name = "About",    Route = "#",         Icon = Icons.Material.Filled.Info },           // TODO: placeholder until About ships
+        new() { Name = "Releases",   Route = "/tracks",   Icon = Icons.Material.Filled.LibraryMusic },
+        new() { Name = "Sessions", Route = "#",         Icon = Icons.Material.Filled.Piano },          // TODO: placeholder until Sessions ships
+        new() { Name = "Mixes",  Route = "#",         Icon = Icons.Material.Filled.Album },     // TODO: placeholder until Mixes ships
     ];
 
     public static readonly List<PageRoute> AllPages = 
diff --git a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
index 7928f63..952ef4c 100644
--- a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+++ b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
@@ -13,6 +13,7 @@
     --deepdrft-green-accent: #3D7A68;
     --deepdrft-green-interactive: #429d6a;
     --deepdrft-muted: #8A9BB0;
+    --deepdrft-soft: #e3e7ec;
     --deepdrft-white: #FAFAF8;
     --deepdrft-border: rgba(13, 27, 42, 0.10);
     --deepdrft-border-green: rgba(26, 60, 52, 0.20);