From c7bd97462a3c4d9f1fef780a6d2322e67005a38b Mon Sep 17 00:00:00 2001
From: FrigaT <m.surov@automacon.ru>
Date: Wed, 15 Apr 2026 09:52:56 +0300
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B0=20div=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Common/ShareButton.razor       |  4 +-
 .../Common/TrackCoverWithPlay.razor           | 27 ++++-----
 .../Components/Global/AudioPlayer.razor       | 57 +++++++------------
 .../Profile/YandexTokenInstructions.razor     | 47 ++++++++-------
 PlaylistShared.Pwa/Pages/Profile.razor        |  1 +
 5 files changed, 60 insertions(+), 76 deletions(-)

diff --git a/PlaylistShared.Pwa/Components/Common/ShareButton.razor b/PlaylistShared.Pwa/Components/Common/ShareButton.razor
index 26275c3..ba9803e 100644
--- a/PlaylistShared.Pwa/Components/Common/ShareButton.razor
+++ b/PlaylistShared.Pwa/Components/Common/ShareButton.razor
@@ -15,7 +15,7 @@
             Paper="true">
     <MudPaper Class="pa-4">
         <MudText Typo="Typo.body2" Class="mb-2">Ссылка для приглашения:</MudText>
-        <div style="display: flex; gap: 8px; align-items: center;">
+        <MudStack Row Gap="2" AlignItems="AlignItems.Center">
             <MudTextField @bind-Value="_shareUrl"
                           ReadOnly="true"
                           Variant="Variant.Outlined"
@@ -26,7 +26,7 @@
                            OnClick="CopyLink"
                            Icon="@Icons.Material.Filled.ContentCopy">
             </MudIconButton>
-        </div>
+        </MudStack>
     </MudPaper>
 </MudPopover>
 
diff --git a/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor b/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
index b287a71..752ce19 100644
--- a/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
+++ b/PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor
@@ -1,29 +1,24 @@
 @using Microsoft.AspNetCore.Components.Web
 @inject IAudioPlayerService AudioPlayerService
 
-<div class="track-cover-container"
-     @onmouseenter="HandleMouseEnter"
-     @onmouseleave="HandleMouseLeave"
-     style="position: relative; display: inline-block; cursor: pointer;">
+<MudPaper Elevation="0"
+          @onmouseenter="HandleMouseEnter"
+          @onmouseleave="HandleMouseLeave"
+          style="position: relative; display: inline-block; cursor: pointer; border-radius: 4px; overflow: hidden;">
     
     <MudImage Src="@CoverUrl.FormatCoverUrl(Width, Height)" Height="@Height" Width="@Width" Class="rounded" Style="display: block;" />
     
     @if (_isHovered || IsCurrentTrackPlaying)
     {
-        <div 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;">
+        <MudPaper 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;">
             <MudIconButton Icon="@(IsCurrentTrackPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                            Color="Color.Inherit"
                            Size="Size.Large"
                            OnClick="OnPlayClick" />
-        </div>
+        </MudPaper>
     }
-</div>
+</MudPaper>
 
 @code {
     [Parameter] public string CoverUrl { get; set; } = string.Empty;
@@ -56,9 +51,9 @@
         else
         {
             await AudioPlayerService.LoadAndPlayAsync(
-                trackId: TrackId, 
-                playlistShareToken: playlistShareToken, 
-                title: TrackTitle, 
+                trackId: TrackId,
+                playlistShareToken: playlistShareToken,
+                title: TrackTitle,
                 coverUrl: CoverUrl);
         }
     }
diff --git a/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor b/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
index 8f9dcb2..ffc0feb 100644
--- a/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
+++ b/PlaylistShared.Pwa/Components/Global/AudioPlayer.razor
@@ -8,51 +8,36 @@
 @inject HttpClient Http
 
 <MudPaper Class="pa-4" Elevation="0" Width="100%" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
-    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
-        <div style="display: flex; align-items: center; gap: 12px;">
+    <MudStack Row Gap="2" AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
+        <!-- Информация о треке -->
+        <MudStack Row Gap="2" AlignItems="AlignItems.Center">
             @if (!string.IsNullOrEmpty(_currentTrackCoverUrl))
             {
                 <MudImage Src="@_currentTrackCoverUrl" Height="40" Width="40" Class="rounded" />
             }
             <MudText Typo="Typo.body1" Style="font-weight: 500;">@_currentTrackTitle</MudText>
-        </div>
+        </MudStack>
 
-        <div style="display: flex; gap: 8px;">
-            <MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
-                           Size="Size.Medium"
-                           Color="Color.Primary"
-                           OnClick="TogglePlayPause" />
-            <MudIconButton Icon="@Icons.Material.Filled.Stop"
-                           Size="Size.Medium"
-                           Color="Color.Default"
-                           OnClick="Stop" />
-        </div>
+        <!-- Кнопки управления -->
+        <MudStack Row Gap="1">
+            <MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)" Size="Size.Medium" Color="Color.Primary" OnClick="TogglePlayPause" />
+            <MudIconButton Icon="@Icons.Material.Filled.Stop" Size="Size.Medium" Color="Color.Default" OnClick="Stop" />
+        </MudStack>
 
-        <div style="flex-grow: 1; min-width: 150px;">
-            <MudSlider @bind-Value="_currentProgress"
-                       @bind-Value:event="oninput"
-                       Min="0"
-                       Max="100"
-                       Size="Size.Small"
-                       ValueChanged="@((double newValue) => SeekTo(newValue))" />
-        </div>
+        <!-- Ползунок прогресса -->
+        <MudItem Style="flex-grow: 1; min-width: 150px;">
+            <MudSlider @bind-Value="_currentProgress" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" />
+        </MudItem>
 
-        <div style="display: flex; align-items: center; gap: 12px;">
+        <!-- Время и громкость -->
+        <MudStack Row Gap="2" AlignItems="AlignItems.Center">
             <MudText Typo="Typo.body2">@_currentTime / @_totalTime</MudText>
-            <div style="display: flex; align-items: center; gap: 8px; width: 120px;">
-                <MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)"
-                               Size="Size.Small"
-                               Color="Color.Default"
-                               OnClick="ToggleMute" />
-                <MudSlider @bind-Value="_currentVolume"
-                           @bind-Value:event="oninput"
-                           Min="0"
-                           Max="100"
-                           Size="Size.Small"
-                           ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
-            </div>
-        </div>
-    </div>
+            <MudStack Row Gap="1" AlignItems="AlignItems.Center" Style="width: 120px;">
+                <MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)" Size="Size.Small" Color="Color.Default" OnClick="ToggleMute" />
+                <MudSlider @bind-Value="_currentVolume" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
+            </MudStack>
+        </MudStack>
+    </MudStack>
 </MudPaper>
 
 <audio id="@_audioId" style="display: none;"></audio>
diff --git a/PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor b/PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor
index 7501221..4539dc3 100644
--- a/PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor
+++ b/PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor
@@ -6,32 +6,35 @@
     </MudText>
 
     <!-- Вертикальный список шагов -->
-    <div class="instruction-steps">
-        <div class="step-item">
-            <div class="step-number">1</div>
-            <div class="step-content">
+    <MudStack Class="my-4">
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">2</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Авторизуйтесь в Яндексе (если ещё не вошли)
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">3</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Нажмите «Разрешить»
-            </div>
-        </div>
-        <div class="step-item">
-            <div class="step-number">4</div>
-            <div class="step-content">
+            </MudText>
+        </MudStack>
+        
+        <MudStack AlignItems="AlignItems.Center">
+            <MudPaper Elevation="0" Style="width: 28px; height: 28px; background-color: var(--mud-palette-primary); color: white; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold;">1</MudPaper>
+            <MudText>
                 Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
-            </div>
-        </div>
-    </div>
+            </MudText>
+        </MudStack>
+    </MudStack>
 
     <MudAlert Severity="Severity.Info" Class="mt-4">
         Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
diff --git a/PlaylistShared.Pwa/Pages/Profile.razor b/PlaylistShared.Pwa/Pages/Profile.razor
index 91d65a6..80aaf24 100644
--- a/PlaylistShared.Pwa/Pages/Profile.razor
+++ b/PlaylistShared.Pwa/Pages/Profile.razor
@@ -1,5 +1,6 @@
 @page "/profile"
 @using Microsoft.AspNetCore.Authorization
+@using PlaylistShared.Pwa.Components.Profile
 @using PlaylistShared.Shared.DTO
 @attribute [Authorize]
 @inject HttpClient Http