Добавлена подсветка воспроизводимой песни

PlaylistShared.Pwa/Components/Common/ShareButton.razor

@@ -14,7 +14,7 @@
             Paper="true">
     <MudPaper Class="pa-4">
         <MudText Typo="Typo.body2" Class="mb-2">Ссылка для приглашения:</MudText>
-        <MudStack Row Gap="2" AlignItems="AlignItems.Center">
+        <MudStack Row Spacing="2" AlignItems="AlignItems.Center">
             <MudTextField @bind-Value="_shareUrl"
                           ReadOnly="true"
                           Variant="Variant.Outlined"

PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor

@@ -6,18 +6,17 @@
 <MudItem @onmouseenter="HandleMouseEnter"
           @onmouseleave="HandleMouseLeave"
           style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden;">
-    
+
     <MudImage Src="@Track?.CoverUri.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
-    
-    @if (CanPlay && (_isHovered || IsCurrentTrackPlaying))
+
+    @if (CanPlay)
     {
-        <MudItem class="play-overlay"
-                 style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: opacity 0.2s ease; cursor: pointer;">
-            <MudIconButton Icon="@(IsCurrentTrackPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
+        <div class="play-overlay @(_isHovered || IsCurrentTrackPlaying ? "play-overlay--visible" : "")">
+            <MudIconButton Icon="@(IsCurrentTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                            Color="Color.Inherit"
                            Size="Size.Large"
                            OnClick="OnPlayClick" />
-        </MudItem>
+        </div>
     }
 </MudItem>
 

PlaylistShared.Pwa/Components/Common/TrackItem.razor

@@ -3,7 +3,7 @@
 @using PlaylistShared.Pwa.Extensions
 @using PlaylistShared.Shared.Yandex
 
-<MudStack Row AlignItems="AlignItems.Center">
+<MudStack Row AlignItems="AlignItems.Center" Class="@(IsCurrentTrack ? "current-track" : "")">
     <!-- Обложка с фиксированной шириной -->
     <MudItem>
         <TrackCoverWithPlay TrackId="@Track.TrackId"
@@ -31,13 +31,26 @@
 
     <!-- Длительность (фиксированная ширина по содержимому) -->
     <MudItem>
-        <MudText Typo="Typo.body2">@Track.DurationMs.FormatDuration()</MudText>
+        @if (IsCurrentTrack)
+        {
+            <MudIcon Icon="@Icons.Material.Filled.GraphicEq" Color="Color.Primary" Size="Size.Small" Class="mr-1 eq-animate" Style="vertical-align: middle;" />
+        }
+        <MudText Typo="Typo.body2" Inline Color="@(IsCurrentTrack ? Color.Primary : Color.Default)">@Track.DurationMs.FormatDuration()</MudText>
     </MudItem>
 </MudStack>
 
+<style>
+    .current-track {
+        background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
+        border-radius: 6px;
+        box-shadow: inset 2px 0 0 var(--mud-palette-primary);
+    }
+</style>
+
 @code {
     [Parameter] public YandexTrack Track { get; set; } = null!;
     [Parameter] public string PlaylistShareToken { get; set; } = string.Empty;
     [Parameter] public bool CanPlay { get; set; } = true;
     [Parameter] public string? AddedByName { get; set; }
+    [Parameter] public bool IsCurrentTrack { get; set; }
 }