Адаптивность шаринга

PlaylistShared.Pwa/Components/Common/ShareButton.razor

@@ -5,7 +5,6 @@
 <MudIconButton Icon="@Icons.Material.Filled.Share"
                Color="Color.Default"
                OnClick="@TogglePopover"
-               Title="Поделиться"
                Size="Size.Medium" />
 
 <MudPopover Open="@_popoverOpen"

PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackSection.razor

@@ -46,7 +46,7 @@
                         <MudGrid>
                             @foreach (var artist in _searchResult.Artists)
                             {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
+                                <MudItem xs="4" sm="3" md="3" lg="2">
                                     <ArtistCard Item="artist" OnClick="() => SearchTracksByEntity(artist.Id, artist.Name, TrackSearchType.Artist)" />
                                 </MudItem>
                             }
@@ -61,7 +61,7 @@
                         <MudGrid>
                             @foreach (var album in _searchResult.Albums)
                             {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
+                                <MudItem xs="4" sm="3" md="3" lg="2">
                                     <AlbumCard Item="album" OnClick="() => SearchTracksByEntity(album.Id, album.Title, TrackSearchType.Album)" />
                                 </MudItem>
                             }
@@ -76,7 +76,7 @@
                         <MudGrid>
                             @foreach (var playlist in _searchResult.Playlists)
                             {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
+                                <MudItem xs="4" sm="3" md="3" lg="2">
                                     <PlaylistCard Item="playlist" OnClick="() => SearchTracksByEntity(playlist.Uuid, playlist.Title, TrackSearchType.Playlist)" />
                                 </MudItem>
                             }

PlaylistShared.Pwa/Components/SharedPlaylist/PlaylistHeader.razor

@@ -8,41 +8,53 @@
 @inject ISnackbar Snackbar
 @inject IDialogService DialogService
 
-<MudStack Row AlignItems="AlignItems.Center">
+<MudStack Row AlignItems="AlignItems.Center" Spacing="2">
     @if (!string.IsNullOrEmpty(Playlist?.CoverUrl))
     {
-        <MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(80, 80)" Height="80" Width="80" Class="rounded" />
+        <MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(60, 60)" Height="60" Width="60" Class="rounded shadow-sm" />
     }
-    <MudStack>
+    
-        <MudStack Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
+    <MudStack Spacing="0" Class="flex-grow-1">
-            <MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
+        <MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
-                     Typo="Typo.h5" 
+                 Typo="Typo.h6" Target="_blank" Underline="Underline.Hover" Class="d-flex align-center">
-                     Target="_blank" 
-                     Underline="Underline.Hover">
                 @Playlist?.Title
-                <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
+            <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
-            </MudLink>
+        </MudLink>
-
+    </MudStack>
-            <ShareButton />
 
+    <MudStack Row AlignItems="AlignItems.Center" Spacing="0">
+        @* ПК ВЕРСИЯ: Показываем все кнопки *@
+        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
             <MudIconButton Icon="@(_isFavorite? Icons.Material.Filled.Star : Icons.Material.Outlined.StarBorder)"
-                            Color="Color.Warning"
+                           Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
-                            OnClick="ToggleFavorite"
+            <ShareButton />
-                            Disabled="_favoriteLoading"
-                            Size="Size.Medium" />
-
             @if (_isCreator && _isAuthenticated)
             {
-                <MudIconButton Icon="@Icons.Material.Filled.Settings"
+                <MudIconButton Icon="@Icons.Material.Filled.Settings" OnClick="OpenPermissionsDialog" Size="Size.Medium" />
-                               Color="Color.Default"
-                               OnClick="OpenPermissionsDialog"
-                               Title="Настройки доступа"
-                               Size="Size.Medium" />
             }
-        </MudStack>
+        </MudHidden>
+
+        @* МОБИЛЬНАЯ ВЕРСИЯ: Уводим в многоточие *@
+        <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert>
+            <MudMenu Icon="@Icons.Material.Filled.MoreVert" AnchorOrigin="Origin.BottomRight" TransformOrigin="Origin.TopRight">
+                <MudMenuItem>
+                    <MudIconButton Icon="@(_isFavorite? Icons.Material.Filled.Star : Icons.Material.Outlined.StarBorder)"
+                                   Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
+                </MudMenuItem>
+                <MudMenuItem>
+                    <ShareButton />
+                </MudMenuItem>
+                @if (_isCreator && _isAuthenticated)
+                {
+                    <MudMenuItem Icon="@Icons.Material.Filled.Settings" OnClick="OpenPermissionsDialog">
+                    </MudMenuItem>
+                }
+            </MudMenu>
+        </MudHidden>
     </MudStack>
 </MudStack>
 
+
 @code {
     [Parameter] public SharedPlaylistDto? Playlist { get; set; }
     [Parameter] public EventCallback OnPermissionsChanged { get; set; }

PlaylistShared.Pwa/Pages/SharedPlaylistView.razor

@@ -14,7 +14,7 @@
 @inject AuthenticationStateProvider AuthProvider
 @inject IDialogService DialogService
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4" Style="height: 100%;">
+<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-1" Style="height: 100%;">
     @if (_loading)
     {
         <MudProgressCircular Indeterminate />
@@ -25,67 +25,105 @@
     }
     else
     {
-        <MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
+        @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
-            <FirstPanel>
+        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert>
-                <MudCard Class="d-flex flex-column" Style="height: 100%;">
+            <MudGrid Spacing="2" Class="flex-grow-1" Style="height: 100%;">
-                    <MudCardHeader>
+                <MudItem xs="12" md="6" Style="height: 100%;">
-                        <CardHeaderContent>
+                    @PlaylistCardContent
-                            <PlaylistHeader Playlist="@_playlist" />
+                </MudItem>
-                        </CardHeaderContent>
-                    </MudCardHeader>
 
-                    <MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
-                        <MudItem>                              
-                            <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" Size="Size.Medium" />
-                        </MudItem>
-
-                        <MudTable Items="@_tracks"
-                                  Virtualize
-                                  Hover
-                                  Elevation="0"
-                                  Class="d-flex flex-grow-1 flex-column"
-                                  Style="min-height: 0;"
-                                  Breakpoint="Breakpoint.Sm"
-                                  Loading="@_tracksLoading">
-                            <RowTemplate>
-                                <MudTd Class="pa-1" Style="width: 100%;">
-                                    <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
-                                </MudTd>
-                                @if (_canRemove)
-                                {
-                                    <MudTd Class="pa-1">
-                                        <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="() => RemoveTrack(context)" />
-                                    </MudTd>
-                                }
-                            </RowTemplate>
-                        </MudTable>
-                    </MudCardContent>
-                </MudCard>
-            </FirstPanel>
-            <SecondPanel>
                 @if (_canAdd)
                 {
-                    <MudCard Class="d-flex flex-column" Style="height: 100%;">
+                    <MudItem xs="12" md="6" Style="height: 100%;">
-                        <MudCardHeader>
+                        @AddTrackCardContent
-                            <CardHeaderContent>
+                    </MudItem>
-                                <MudText Typo="Typo.h5" Color="Color.Primary">Добавление треков</MudText>
-                            </CardHeaderContent>
-                        </MudCardHeader>
-
-                        <MudCardContent Class="flex-grow-1 d-flex flex-column" Style="overflow: hidden;">
-                            <AddTrackSection ShareToken="@Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
-                        </MudCardContent>
-                    </MudCard>
                 }
-            </SecondPanel>
+            </MudGrid>
-        </MudSplitPanel>
+        </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>
+
+                    <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>
+
+                @* Кастомная панель навигации внизу *@
+                @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" />
+                                <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
+                                               Color="@(_activeMobileTab == 1 ? Color.Primary : Color.Default)"
+                                               OnClick="() => _activeMobileTab = 1" />
+                        </MudNavMenu>
+                    </MudPaper>
+                }
+            </div>
+        </MudHidden>
     }
 </MudContainer>
 
-
 @code {
     [Parameter] public string Token { get; set; }
 
+    private RenderFragment PlaylistCardContent => __builder =>
+    {
+        <MudCard Elevation="0" Class="d-flex flex-column" Style="height: 100%;">
+            <MudCardHeader>
+                <CardHeaderContent>
+                    <PlaylistHeader Playlist="@_playlist" />
+                </CardHeaderContent>
+                <CardHeaderActions>
+                    <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadTracks" Disabled="@_tracksLoading" />
+                </CardHeaderActions>
+            </MudCardHeader>
+
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+                <MudTable Items="@_tracks" Virtualize Hover Elevation="0" Breakpoint="Breakpoint.None" Class="d-flex flex-grow-1 flex-column" Style="min-height: 0;">
+                    <RowTemplate>
+                        <MudTd Class="pa-1" Style="width: 100%;">
+                            <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
+                        </MudTd>
+                        @if (_canRemove)
+                        {
+                            <MudTd Class="pa-1">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => RemoveTrack(context)" />
+                            </MudTd>
+                        }
+                    </RowTemplate>
+                </MudTable>
+            </MudCardContent>
+        </MudCard>
+    };
+
+    private RenderFragment AddTrackCardContent => __builder =>
+    {
+        <MudPaper Class="pa-4 d-flex flex-column" Elevation="1" Style="height: 100%; overflow: hidden;">
+            <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
+            <MudItem class="flex-grow-1 overflow-auto">
+                <AddTrackSection ShareToken="@Token" OnTrackAdded="LoadTracks" OnTrackRemoved="LoadTracks" ExistingTrackIds="_existingTrackIds" />
+            </MudItem>
+        </MudPaper>
+    };
+
+    private int _activeMobileTab = 0;
+
     private HashSet<string> _existingTrackIds = new();
     private bool _firstLoadExistingTrackIds;
     private List<YandexTrack> _tracks = new();
@@ -164,6 +202,7 @@
             if (response?.Success == true)
             {
                 _playlist = response.Data;
+                _activeMobileTab = 0;
 
                 await ConfigurePermissions();
             }