feat(mix): lava-lamp popover with RadialKnob controls + wider Mix detail body (P10 W4)

DeepDrftPublic.Client/Pages/MixDetail.razor

@@ -40,18 +40,40 @@ else
     <MixWaveformVisualizer ReleaseId="@release.Id" TrackId="@ViewModel.Track?.Id" />
 
     <div class="mix-detail-foreground">
+      <MudContainer MaxWidth="MaxWidth.Large" Class="mix-detail-container">
         <ReleaseDetailScaffold Title="@release.Title"
                                Artist="@release.Artist"
                                Track="@ViewModel.Track"
                                BackHref="/mixes"
                                BackLabel="All mixes"
                                ShowMeta="@(hasGenre || hasDate)">
-            <TopContent>
-                @* The four visualizer controls — resolution, bubblyness, detach, color-shift speed —
-                   in a row below the back button and above the masthead (spec §3). They mutate the
-                   shared MixVisualizerControlState; the backdrop bridge above pushes the uniforms. *@
-                <MixVisualizerControls />
-            </TopContent>
+            <TopRightAction>
+                @* Lava-lamp button top-right, across from the back link. Toggles a popover holding the
+                   four visualizer knobs (spec §7c/§7d). The controls themselves are unchanged — they
+                   mutate the shared MixVisualizerControlState; the backdrop bridge pushes the uniforms.
+                   The popover only progressively-discloses them off the always-visible row. *@
+                <MudTooltip Text="Visualizer settings">
+                    <MudIconButton Icon="@DDIcons.LavaLamp"
+                                   Size="Size.Large"
+                                   Color="Color.Secondary"
+                                   Disabled="@(!RendererInfo.IsInteractive)"
+                                   OnClick="@ToggleSettings"
+                                   aria-label="Visualizer settings" />
+                </MudTooltip>
+
+                @* Outside-click close via MudOverlay (the SharePopover idiom). A knob drag never lands
+                   on this overlay — the knob's own global capture overlay is a child of the popover
+                   content above it — so dragging a knob does not dismiss the popover. *@
+                <MudOverlay Visible="@_settingsOpen" OnClick="@CloseSettings" AutoClose="true" />
+
+                <MudPopover Open="@_settingsOpen"
+                            Fixed="false"
+                            AnchorOrigin="Origin.BottomRight"
+                            TransformOrigin="Origin.TopRight"
+                            Class="mix-visualizer-popover">
+                    <MixVisualizerControls />
+                </MudPopover>
+            </TopRightAction>
             <Hero>
                 <div class="mix-detail-cover">
                     @if (!string.IsNullOrEmpty(release.ImagePath))
@@ -85,9 +107,18 @@ else
                 }
             </MetaContent>
         </ReleaseDetailScaffold>
+      </MudContainer>
     </div>
 }
 
 @code {
     protected override string PersistKey => "mix-detail";
+
+    // Lava-lamp settings popover open state. Pure presentation over MixVisualizerControlState — the
+    // popover discloses the four knobs; toggling it touches no control value or bridge push.
+    private bool _settingsOpen;
+
+    private void ToggleSettings() => _settingsOpen = !_settingsOpen;
+
+    private void CloseSettings() => _settingsOpen = false;
 }