From fa28bfb5cc9e8f0a00e63fb237a99f48afee9269 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sun, 7 Jun 2026 16:38:37 -0400
Subject: [PATCH] feat: add Share popover to track detail page

---
 .../Controls/SharePopover.razor               | 61 +++++++++++++
 .../Controls/SharePopover.razor.cs            | 91 +++++++++++++++++++
 DeepDrftPublic.Client/Pages/TrackDetail.razor |  7 +-
 .../wwwroot/styles/deepdrft-styles.css        | 17 ++++
 4 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 DeepDrftPublic.Client/Controls/SharePopover.razor
 create mode 100644 DeepDrftPublic.Client/Controls/SharePopover.razor.cs

diff --git a/DeepDrftPublic.Client/Controls/SharePopover.razor b/DeepDrftPublic.Client/Controls/SharePopover.razor
new file mode 100644
index 0000000..ffcb536
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/SharePopover.razor
@@ -0,0 +1,61 @@
+@namespace DeepDrftPublic.Client.Controls
+
+<MudTooltip Text="Share">
+    <MudIconButton Icon="@Icons.Material.Filled.Share"
+                   Size="Size.Large"
+                   Color="Color.Secondary"
+                   OnClick="@Toggle"
+                   aria-label="Share this track" />
+</MudTooltip>
+
+<MudOverlay Visible="@_open" OnClick="@Close" AutoClose="true" />
+
+<MudPopover Open="@_open"
+            Fixed="false"
+            AnchorOrigin="Origin.BottomRight"
+            TransformOrigin="Origin.TopRight"
+            Class="deepdrft-share-popover">
+    <MudStack Spacing="2" Class="deepdrft-share-popover-body">
+
+        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
+            <MudButton StartIcon="@Icons.Material.Filled.Link"
+                       Variant="Variant.Text"
+                       Color="Color.Primary"
+                       OnClick="@CopyLink">
+                Copy link
+            </MudButton>
+            @if (_linkCopied)
+            {
+                <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
+            }
+        </MudStack>
+
+        <MudDivider />
+
+        <MudCheckBox @bind-Value="Embed" Color="Color.Primary" Label="Embed player" Dense="true" />
+
+        @if (_embed)
+        {
+            <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
+                <MudTextField Value="@EmbedSnippet"
+                              T="string"
+                              ReadOnly="true"
+                              Variant="Variant.Outlined"
+                              Lines="3"
+                              Margin="Margin.Dense"
+                              Class="deepdrft-share-embed-field" />
+                <MudStack AlignItems="AlignItems.Center" Spacing="0">
+                    <MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
+                                   Color="Color.Primary"
+                                   OnClick="@CopyEmbed"
+                                   aria-label="Copy embed snippet" />
+                    @if (_embedCopied)
+                    {
+                        <MudText Typo="Typo.caption" Color="Color.Success">Copied!</MudText>
+                    }
+                </MudStack>
+            </MudStack>
+        }
+
+    </MudStack>
+</MudPopover>
diff --git a/DeepDrftPublic.Client/Controls/SharePopover.razor.cs b/DeepDrftPublic.Client/Controls/SharePopover.razor.cs
new file mode 100644
index 0000000..7017f3c
--- /dev/null
+++ b/DeepDrftPublic.Client/Controls/SharePopover.razor.cs
@@ -0,0 +1,91 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace DeepDrftPublic.Client.Controls;
+
+/// <summary>
+/// Share affordance for the track detail page: a popover offering a canonical-link copy
+/// and an optional iframe embed snippet. Clipboard writes go through navigator.clipboard;
+/// each copy shows a transient "Copied!" confirmation that resets after a short delay.
+/// </summary>
+public partial class SharePopover : ComponentBase, IDisposable
+{
+    [Parameter] public string? EntryKey { get; set; }
+
+    [Inject] public required NavigationManager Navigation { get; set; }
+    [Inject] public required IJSRuntime JS { get; set; }
+
+    private bool _open;
+    private bool _embed;
+    private bool _linkCopied;
+    private bool _embedCopied;
+
+    private readonly CancellationTokenSource _cts = new();
+
+    private bool Embed
+    {
+        get => _embed;
+        set
+        {
+            _embed = value;
+            if (!value) _embedCopied = false;
+        }
+    }
+
+    private string TrackUrl => $"{Navigation.BaseUri}track/{EntryKey}";
+
+    private string EmbedSnippet =>
+        $"""<iframe src="{Navigation.BaseUri}FramePlayer?TrackEntryKey={EntryKey}" width="640" height="96" frameborder="0" style="border-radius:8px;" allow="autoplay"></iframe>""";
+
+    private void Toggle() => _open = !_open;
+
+    private void Close() => _open = false;
+
+    private async Task CopyLink()
+    {
+        if (await CopyToClipboard(TrackUrl))
+        {
+            _linkCopied = true;
+            await ResetAfterDelay(() => _linkCopied = false);
+        }
+    }
+
+    private async Task CopyEmbed()
+    {
+        if (await CopyToClipboard(EmbedSnippet))
+        {
+            _embedCopied = true;
+            await ResetAfterDelay(() => _embedCopied = false);
+        }
+    }
+
+    private async Task<bool> CopyToClipboard(string text)
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
+            return true;
+        }
+        catch (Exception)
+        {
+            return false;
+        }
+    }
+
+    private async Task ResetAfterDelay(Action reset)
+    {
+        try
+        {
+            await Task.Delay(1500, _cts.Token);
+        }
+        catch (TaskCanceledException)
+        {
+            return;
+        }
+
+        reset();
+        StateHasChanged();
+    }
+
+    public void Dispose() => _cts.Cancel();
+}
diff --git a/DeepDrftPublic.Client/Pages/TrackDetail.razor b/DeepDrftPublic.Client/Pages/TrackDetail.razor
index c997b6f..73884e8 100644
--- a/DeepDrftPublic.Client/Pages/TrackDetail.razor
+++ b/DeepDrftPublic.Client/Pages/TrackDetail.razor
@@ -57,9 +57,10 @@ else if (ViewModel.Track is not null)
                 <MudText Typo="Typo.h6" Color="Color.Primary">@track.Artist</MudText>
             </div>
             
-            <div>
+            <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
+                <SharePopover EntryKey="@track.EntryKey" />
                 <PlayStateIcon Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack"/>
-            </div>
+            </MudStack>
         </MudStack>
 
         <div class="deepdrft-track-detail-cover">
@@ -67,8 +68,6 @@ else if (ViewModel.Track is not null)
                 <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
             </MudPaper>
         </div>
-        
-        
 
         @if (hasMeta)
         {
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index aeb5efe..ce30251 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -339,6 +339,23 @@ h2, h3, h4, h5, h6,
     font-family: var(--deepdrft-font-mono) !important;
 }
 
+.deepdrft-share-popover-body {
+    padding: 0.75rem 1rem;
+    min-width: 280px;
+    max-width: 360px;
+}
+
+/* Monospace snippet so the iframe markup stays legible inside the readonly field. */
+.deepdrft-share-embed-field {
+    flex: 1 1 auto;
+}
+
+.deepdrft-share-embed-field .mud-input-slot {
+    font-family: var(--deepdrft-font-mono) !important;
+    font-size: 0.75rem;
+    word-break: break-all;
+}
+
 /* display:contents so the anchor wraps the card's cover and title without
    introducing its own box — the container's positioning context and the
    content column's flex layout are both preserved. */