Замена div на компоненты

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>
 

PlaylistShared.Pwa/Components/Common/TrackCoverWithPlay.razor

@@ -1,29 +1,24 @@
 @using Microsoft.AspNetCore.Components.Web
 @inject IAudioPlayerService AudioPlayerService
 
-<div class="track-cover-container"
+<MudPaper Elevation="0"
           @onmouseenter="HandleMouseEnter"
           @onmouseleave="HandleMouseLeave"
-     style="position: relative; display: inline-block; cursor: pointer;">
+          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"
+        <MudPaper class="play-overlay"
-             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+                  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;">
-            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;

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;">
+    <MudStack Row Gap="2" AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
-        <div style="display: flex; align-items: center; gap: 12px;">
+        <!-- Информация о треке -->
+        <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)"
+        <MudStack Row Gap="1">
-                           Size="Size.Medium"
+            <MudIconButton Icon="@(_isPlaying? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)" Size="Size.Medium" Color="Color.Primary" OnClick="TogglePlayPause" />
-                           Color="Color.Primary"
+            <MudIconButton Icon="@Icons.Material.Filled.Stop" Size="Size.Medium" Color="Color.Default" OnClick="Stop" />
-                           OnClick="TogglePlayPause" />
+        </MudStack>
-            <MudIconButton Icon="@Icons.Material.Filled.Stop"
-                           Size="Size.Medium"
-                           Color="Color.Default"
-                           OnClick="Stop" />
-        </div>
 
-        <div style="flex-grow: 1; min-width: 150px;">
+        <!-- Ползунок прогресса -->
-            <MudSlider @bind-Value="_currentProgress"
+        <MudItem Style="flex-grow: 1; min-width: 150px;">
-                       @bind-Value:event="oninput"
+            <MudSlider @bind-Value="_currentProgress" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => SeekTo(newValue))" />
-                       Min="0"
+        </MudItem>
-                       Max="100"
-                       Size="Size.Small"
-                       ValueChanged="@((double newValue) => SeekTo(newValue))" />
-        </div>
 
-        <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;">
+            <MudStack Row Gap="1" AlignItems="AlignItems.Center" Style="width: 120px;">
-                <MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)"
+                <MudIconButton Icon="@(_currentVolume == 0 ? Icons.Material.Filled.VolumeOff : Icons.Material.Filled.VolumeUp)" Size="Size.Small" Color="Color.Default" OnClick="ToggleMute" />
-                               Size="Size.Small"
+                <MudSlider @bind-Value="_currentVolume" @bind-Value:event="oninput" Min="0" Max="100" Size="Size.Small" ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
-                               Color="Color.Default"
+            </MudStack>
-                               OnClick="ToggleMute" />
+        </MudStack>
-                <MudSlider @bind-Value="_currentVolume"
+    </MudStack>
-                           @bind-Value:event="oninput"
-                           Min="0"
-                           Max="100"
-                           Size="Size.Small"
-                           ValueChanged="@((double newValue) => ChangeVolume(newValue))" />
-            </div>
-        </div>
-    </div>
 </MudPaper>
 
 <audio id="@_audioId" style="display: none;"></audio>

PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor

@@ -6,32 +6,35 @@
     </MudText>
 
     <!-- Вертикальный список шагов -->
-    <div class="instruction-steps">
+    <MudStack Class="my-4">
-        <div class="step-item">
+        <MudStack AlignItems="AlignItems.Center">
-            <div class="step-number">1</div>
+            <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>
-            <div class="step-content">
+            <MudText>
                 Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
-            </div>
+            </MudText>
-        </div>
+        </MudStack>
-        <div class="step-item">
+        
-            <div class="step-number">2</div>
+        <MudStack AlignItems="AlignItems.Center">
-            <div class="step-content">
+            <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>
+            </MudText>
-        </div>
+        </MudStack>
-        <div class="step-item">
+        
-            <div class="step-number">3</div>
+        <MudStack AlignItems="AlignItems.Center">
-            <div class="step-content">
+            <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>
+            </MudText>
-        </div>
+        </MudStack>
-        <div class="step-item">
+        
-            <div class="step-number">4</div>
+        <MudStack AlignItems="AlignItems.Center">
-            <div class="step-content">
+            <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>
+            </MudText>
-        </div>
+        </MudStack>
-    </div>
+    </MudStack>
 
     <MudAlert Severity="Severity.Info" Class="mt-4">
         Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>

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