Улучшена адаптивность для телефонов. Добавлен новый ContextActionBarService

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -2,6 +2,7 @@
 <PageTitle>@_playlist?.Title - Playlist Share</PageTitle>
 
 @using PlaylistShared.Pwa.Components.Common
+@using PlaylistShared.Pwa.Components.Global
 @using PlaylistShared.Pwa.Components.SharedPlaylist
 @using PlaylistShared.Pwa.Components.SharedPlaylist.Cards
 @using PlaylistShared.Shared.DTO
@@ -16,60 +17,73 @@
 @inject IDialogService DialogService
 
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
-    @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
-    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
-        <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
-            <MudItem xs="12" md="6" Style="height: 100%;">
-                @PlaylistCardContent
-            </MudItem>
+    <MudStack Style="height: 100%;" StretchItems="StretchItems.Start" Spacing="2">
+        @*Первый элемент растянется на всю высоту*@
+        <MudItem Style="min-height: 0; height: 100%;">
 
-            @if (_canAdd)
-            {
-                <MudItem xs="12" md="6" Style="height: 100%;">
-                    @AddTrackCardContent
-                </MudItem>
-            }
-        </MudGrid>
-    </MudHidden>
-        
-    @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
-    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
-        <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
-        
-            @* Область контента: оба компонента здесь всегда *@
-            <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
-                <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                    <div class="flex-grow-1 overflow-auto pb-1">
+            @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
+            <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
+                <MudGrid Spacing="2" Class="flex-grow-1 pt-2" Style="height: 100%;">
+                    <MudItem xs="12" md="6" Style="height: 100%; overflow-y: auto;">
                         @PlaylistCardContent
-                    </div>
-                </div>
-                
-                @if (_canAdd)
-                {
-                <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
-                    <div class="flex-grow-1 overflow-auto pb-1">
-                        @AddTrackCardContent
-                    </div>
-                </div>
-                }
-            </div>
+                    </MudItem>
 
-            @* Кастомная панель навигации внизу *@
-            @if (_canAdd)
-            {
-                <MudPaper Elevation="0" Class="py-1">
-                    <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
-                        <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
-                                        Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
-                                        OnClick="() => _activeMobileTab = 0" />
+                    @if (_canAdd)
+                    {
+                        <MudItem xs="12" md="6" Style="height: 100%; overflow-y: auto;">
+                            @AddTrackCardContent
+                        </MudItem>
+                    }
+                </MudGrid>
+                <ContextualBarContent />
+            </MudHidden>
+        
+            @* --- ВЕРСИЯ ДЛЯ МОБИЛОК (вкладки внизу) --- *@
+            <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
+                <div class="d-flex flex-column pa-0 ma-0" style="height: 100%; min-height: 0;">
+        
+                    @* Область контента: оба компонента здесь всегда *@
+                    <div class="flex-grow-1 relative pa-0" style="min-height: 0;">
+                        <div class="@(_activeMobileTab == 0 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                            <div class="flex-grow-1 overflow-auto pb-1">
+                                @PlaylistCardContent
+                            </div>
+                        </div>
+                
+                        @if (_canAdd)
+                        {
+                        <div class="@(_activeMobileTab == 1 ? "d-flex" : "d-none") flex-column" style="height: 100%;">
+                            <div class="flex-grow-1 overflow-auto pb-1">
+                                @AddTrackCardContent
+                            </div>
+                        </div>
+                        }
+                    </div>
+
+                    @* Кастомная панель навигации внизу *@
+                    <ContextualBarContent Bottom>
+                        <MudNavMenu Margin="Margin.None" Class="d-flex flex-row justify-space-around">
+                            <MudIconButton Icon="@Icons.Material.Filled.LibraryMusic"
+                                            Color="@(_activeMobileTab == 0 ? Color.Primary : Color.Default)"
+                                            OnClick="() => _activeMobileTab = 0" />
+                            @if (_canAdd)
+                            {   
                             <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
                                             Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
                                             OnClick="() => _activeMobileTab = 1" />
-                    </MudNavMenu>
-                </MudPaper>
-            }
-        </div>
-    </MudHidden>
+                            }
+                        </MudNavMenu>
+                    
+                    </ContextualBarContent>
+                </div>
+            </MudHidden>
+        </MudItem>
+
+        @*Второй элемент - плеер. Привязан к нижней части контейнера*@
+        <MudItem>
+            <AudioPlayer />
+        </MudItem>
+    </MudStack>
 </MudContainer>
 
 <style>
@@ -97,7 +111,7 @@
     private RenderFragment PlaylistCardContent => __builder =>
     {
         <MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
-            <MudCardHeader>
+            <MudCardHeader Class="py-0">
                 <CardHeaderContent>
                     @if(_loading)
                     {
@@ -113,7 +127,7 @@
                 </CardHeaderActions>
             </MudCardHeader>
 
-            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column py-0">
                 @if (_loading || _tracksLoading)
                 {
                     <TrackItemSkeleton />
@@ -150,8 +164,8 @@
     private RenderFragment AddTrackCardContent => __builder =>
     {
         <MudCard Class="d-flex flex-column" Elevation="0" Style="height: 100%;">
-            <MudCardHeader>
-                <MudStack Style="width: 100%;">
+            <MudCardHeader Class="py-0">
+                <MudStack Style="width: 100%;" Spacing="0">
                     <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
                     <MudTextField @bind-Value="_searchQuery"
                                   @bind-Value:after="OnSearchQueryChanged"
@@ -177,7 +191,7 @@
                 </MudStack>
             </MudCardHeader>
 
-            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column py-0">
                 @if (_isSearching)
                 {