Доработка отображение треков в секции добавления

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

@@ -1,312 +0,0 @@
-@using PlaylistShared.Pwa.Components.Common
-@using PlaylistShared.Pwa.Components.SharedPlaylist.Cards
-@using PlaylistShared.Shared.DTO
-@using PlaylistShared.Shared.Enums
-@using PlaylistShared.Shared.SharedPlaylist
-@using PlaylistShared.Shared.Yandex
-@inject HttpClient Http
-@inject ISnackbar Snackbar
-
-<MudStack Style="height: 100%; overflow: hidden;">
-    <MudItem>
-        <MudTextField @bind-Value="_searchQuery"
-                      @bind-Value:after="OnSearchQueryChanged"
-                      Variant="Variant.Outlined"
-                      FullWidth
-                      Label="Название или ссылка на трек Яндекс.Музыки"
-                      Disabled="@_isSearching"
-                      Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary" />
-
-        <MudToggleGroup T="TrackSearchType"
-                        @bind-Value="_searchType"
-                        @bind-Value:after="OnSearchTypeChanged"
-                        Size="Size.Small"
-                        Color="Color.Primary"
-                        Disabled="@(_isSearching)">
-            <MudToggleItem Value="TrackSearchType.All" Text="Все" />
-            <MudToggleItem Value="TrackSearchType.Track" Text="Треки" />
-            <MudToggleItem Value="TrackSearchType.Album" Text="Альбомы" />
-            <MudToggleItem Value="TrackSearchType.Playlist" Text="Плейлисты" />
-            <MudToggleItem Value="TrackSearchType.Artist" Text="Исполнители" />
-        </MudToggleGroup>
-    </MudItem>
-
-    <MudItem Style="overflow: auto; flex-grow:1;">
-        @if (_isSearching)
-        {
-            <MudProgressCircular Indeterminate Class="mx-auto my-8" />
-        }
-        else if (_searchResult != null)
-        {
-            <MudExpansionPanels>
-                @* Секция исполнителей *@
-                @if (_searchResult?.Artists != null)
-                {
-                    <MudExpansionPanel Text="Исполнители" Expanded="true">
-                        <MudGrid>
-                            @foreach (var artist in _searchResult.Artists)
-                            {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
-                                    <ArtistCard Item="artist" OnClick="() => SearchTracksByEntity(artist.Id, artist.Name, TrackSearchType.Artist)" />
-                                </MudItem>
-                            }
-                        </MudGrid>
-                    </MudExpansionPanel>
-                }
-
-                @* Секция альбомов *@
-                @if (_searchResult?.Albums != null)
-                {
-                    <MudExpansionPanel Text="Альбомы" Expanded="true">
-                        <MudGrid>
-                            @foreach (var album in _searchResult.Albums)
-                            {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
-                                    <AlbumCard Item="album" OnClick="() => SearchTracksByEntity(album.Id, album.Title, TrackSearchType.Album)" />
-                                </MudItem>
-                            }
-                        </MudGrid>
-                    </MudExpansionPanel>
-                }
-
-                @* Секция плейлистов *@
-                @if (_searchResult?.Playlists != null)
-                {
-                    <MudExpansionPanel Text="Плейлисты" Expanded="true">
-                        <MudGrid>
-                            @foreach (var playlist in _searchResult.Playlists)
-                            {
-                                <MudItem xs="12" sm="6" md="3" lg="2">
-                                    <PlaylistCard Item="playlist" OnClick="() => SearchTracksByEntity(playlist.Uuid, playlist.Title, TrackSearchType.Playlist)" />
-                                </MudItem>
-                            }
-                        </MudGrid>
-                    </MudExpansionPanel>
-                }
-
-                @* Секция треков *@
-                @if (_searchResult?.Tracks != null)
-                {
-                    <MudExpansionPanel Text="Треки" Expanded="true">
-                        <MudTable Items="@_searchResult.Tracks"
-                                    Hover
-                                    Elevation="0"
-                                    Class="d-flex flex-grow-1 flex-column"
-                                    Style="min-height: 0;"
-                                    Breakpoint="Breakpoint.Sm">
-                            <RowTemplate>
-                                <MudTd Class="pa-1" Style="width: 100%;">
-                                    <TrackItem Track="@context" PlaylistShareToken="@ShareToken" />
-                                </MudTd>
-                                <MudTd Class="pa-1">
-                                    <MudToggleIconButton Toggled="@ExistingTrackIds.Contains(context.TrackId)"
-                                                            Icon="@Icons.Material.Filled.AddCircle"
-                                                            Color="@Color.Primary"
-                                                            ToggledIcon="@Icons.Material.Filled.RemoveCircle"
-                                                            ToggledColor="@Color.Error"
-                                                            ToggledChanged="() => ToggleTrack(context)" />
-                                </MudTd>
-                            </RowTemplate>
-                        </MudTable>
-                    </MudExpansionPanel>
-                }
-            </MudExpansionPanels>
-        }
-    </MudItem>
-</MudStack>
-
-@code {
-    [Parameter] public string ShareToken { get; set; } = string.Empty;
-    [Parameter] public EventCallback OnTrackAdded { get; set; }
-    [Parameter] public EventCallback OnTrackRemoved { get; set; }
-    [Parameter] public HashSet<string> ExistingTrackIds { get; set; } = new();
-
-    private string _searchQuery = "";
-    private bool _isSearching = false;
-    private TrackSearchType _searchType = TrackSearchType.All;
-    private YandexSearchResult? _searchResult = null;
-
-    private async Task OnSearchQueryChanged()
-    {
-        await SearchTracks(byId: false);
-    }
-
-    private async Task OnSearchTypeChanged()
-    {
-        await SearchTracks(byId: false);
-    }
-
-    private async Task SearchTracks(bool byId = false, string? forcedQuery = null)
-    {
-        var query = forcedQuery ?? _searchQuery;
-        if (string.IsNullOrWhiteSpace(query))
-        {
-            _searchResult = null;
-            return;
-        }
-
-        var type = _searchType;
-
-        // Распознавание ссылки Яндекс.Музыки
-        if (!byId && Uri.TryCreate(query, UriKind.Absolute, out var uri) && uri.Host == "music.yandex.ru")
-        {
-            try
-            {
-                (type, query) = ParseYandexMusicUrl(uri);
-                byId = true;
-            }
-            catch (Exception ex)
-            {
-                Snackbar.Add($"Ошибка распознавания URL: {ex.Message}", Severity.Error);
-                return;
-            }
-        }
-
-        _isSearching = true;
-        _searchResult = null;
-        StateHasChanged();
-
-        try
-        {
-            var url = $"/api/yandexsearch/search?query={Uri.EscapeDataString(query)}&searchType={Uri.EscapeDataString(type.ToString())}&limit=20";
-            if (byId)
-                url += "&byId=true";
-            if (!string.IsNullOrEmpty(ShareToken))
-                url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";
-
-            var response = await Http.GetFromJsonAsync<ApiResponse<YandexSearchResult>>(url);
-            if (response?.Success == true)
-            {
-                _searchResult = response.Data ?? new YandexSearchResult();
-            }
-            else
-            {
-                Snackbar.Add(response?.Error?.Message ?? "Ошибка поиска", Severity.Error);
-                _searchResult = null;
-            }
-        }
-        catch (Exception ex)
-        {
-            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
-            _searchResult = null;
-        }
-        finally
-        {
-            _isSearching = false;
-            StateHasChanged();
-        }
-    }
-
-    private async Task SearchTracksByEntity(string entityId, string title, TrackSearchType entityType)
-    {
-        // Переключаем тип и ищем по ID
-        _searchType = entityType;
-        _searchQuery = title;
-        await SearchTracks(byId: true, forcedQuery: entityId);
-    }
-
-    private async Task ToggleTrack(YandexTrack track)
-    {
-        if (ExistingTrackIds.Contains(track.TrackId))
-            await RemoveTrack(track);
-        else
-            await AddTrack(track);
-    }
-
-    private async Task RemoveTrack(YandexTrack track)
-    {
-        if (!ExistingTrackIds.Remove(track.TrackId)) return;
-
-        try
-        {
-            await RemoveTrackById(track.TrackId);
-            await OnTrackRemoved.InvokeAsync();
-            Snackbar.Add($"Трек \"{track.Title}\" удален", Severity.Success, c => c.SnackbarVariant = Variant.Outlined);
-        }
-        catch (Exception ex)
-        {
-            Snackbar.Add($"{ex.Message}", Severity.Error);
-            ExistingTrackIds.Add(track.TrackId);
-        }
-        finally
-        {
-            StateHasChanged();
-        }
-    }
-
-    private async Task RemoveTrackById(string trackId)
-    {
-        var request = new UpdateTrackListRequest { TrackIds = new List<string> { trackId } };
-        var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/remove-tracks", request);
-        if (response.IsSuccessStatusCode)
-        {
-            await OnTrackAdded.InvokeAsync();
-        }
-        else
-        {
-            var error = await response.Content.ReadFromJsonAsync<ApiResponse<object>>();
-            throw new Exception(error?.Error?.Message ?? "Ошибка удаления трека");
-        }
-    }
-
-    private async Task AddTrack(YandexTrack track)
-    {
-        if (ExistingTrackIds.Contains(track.TrackId)) return;
-        ExistingTrackIds.Add(track.TrackId);
-
-        try
-        {
-            await AddTrackById(track.TrackId);
-            await OnTrackAdded.InvokeAsync();
-            Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success, c => c.SnackbarVariant = Variant.Outlined);
-        }
-        catch (Exception ex)
-        {
-            Snackbar.Add($"{ex.Message}", Severity.Error);
-            ExistingTrackIds.Remove(track.TrackId);
-        }
-        finally
-        {
-            StateHasChanged();
-        }
-    }
-
-    private async Task AddTrackById(string trackId)
-    {
-        var request = new UpdateTrackListRequest { TrackIds = new List<string> { trackId } };
-        var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/add-tracks", request);
-        if (response.IsSuccessStatusCode)
-        {
-            await OnTrackAdded.InvokeAsync();
-        }
-        else
-        {
-            var error = await response.Content.ReadFromJsonAsync<ApiResponse<object>>();
-            throw new Exception(error?.Error?.Message ?? "Ошибка добавления трека");
-        }
-    }
-
-    private static (TrackSearchType Type, string Id) ParseYandexMusicUrl(Uri uri)
-    {
-        var segments = uri.AbsolutePath.Split('/', StringSplitOptions.RemoveEmptyEntries);
-        
-        var dataMap = segments
-            .Select((val, idx) => new { val, idx })
-            .GroupBy(x => x.idx / 2)
-            .ToDictionary(
-                g => g.First().val,
-                g => g.ElementAtOrDefault(1)?.val
-            );
-
-        if (dataMap.TryGetValue("track", out var trackId) && !string.IsNullOrEmpty(trackId))
-            return (TrackSearchType.Track, trackId);
-        if (dataMap.TryGetValue("album", out var albumId) && !string.IsNullOrEmpty(albumId))
-            return (TrackSearchType.Album, albumId);
-        if (dataMap.TryGetValue("playlist", out var playlistId) && !string.IsNullOrEmpty(playlistId))
-            return (TrackSearchType.Playlist, playlistId);
-        if (dataMap.TryGetValue("artist", out var artistId) && !string.IsNullOrEmpty(artistId))
-            return (TrackSearchType.Artist, artistId);
-
-        throw new ArgumentException("Unsupported URL pattern");
-    }
-}

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">
-            <MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
-                     Typo="Typo.h5" 
-                     Target="_blank" 
-                     Underline="Underline.Hover">
+    
+    <MudStack Spacing="0" Class="flex-grow-1">
+        <MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
+                 Typo="Typo.h6" Target="_blank" Underline="Underline.Hover" Class="d-flex align-center">
                 @Playlist?.Title
-                <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
-            </MudLink>
-
-            <ShareButton />
+            <MudIcon Icon="@Icons.Material.Filled.OpenInNew" Size="Size.Small" Class="ml-1" />
+        </MudLink>
+    </MudStack>
 
+    <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"
-                            OnClick="ToggleFavorite"
-                            Disabled="_favoriteLoading"
-                            Size="Size.Medium" />
-
+                           Color="Color.Warning" OnClick="ToggleFavorite" Disabled="_favoriteLoading" Size="Size.Medium" />
+            <ShareButton />
             @if (_isCreator && _isAuthenticated)
             {
-                <MudIconButton Icon="@Icons.Material.Filled.Settings"
-                               Color="Color.Default"
-                               OnClick="OpenPermissionsDialog"
-                               Title="Настройки доступа"
-                               Size="Size.Medium" />
+                <MudIconButton Icon="@Icons.Material.Filled.Settings" OnClick="OpenPermissionsDialog" 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

@@ -3,6 +3,7 @@
 
 @using PlaylistShared.Pwa.Components.Common
 @using PlaylistShared.Pwa.Components.SharedPlaylist
+@using PlaylistShared.Pwa.Components.SharedPlaylist.Cards
 @using PlaylistShared.Shared.DTO
 @using PlaylistShared.Shared.Enums
 @using PlaylistShared.Pwa.Services
@@ -14,7 +15,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,88 +26,268 @@
     }
     else
     {
-        <MudSplitPanel Class="flex-grow-1" Style="height: 100%;">
-            <FirstPanel>
-                <MudCard Class="d-flex flex-column" Style="height: 100%;">
-                    <MudCardHeader>
-                        <CardHeaderContent>
-                            <PlaylistHeader Playlist="@_playlist" />
-                        </CardHeaderContent>
-                    </MudCardHeader>
+        @* --- ВЕРСИЯ ДЛЯ ПК (сетка) --- *@
+        <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>
 
-                    <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%;">
-                        <MudCardHeader>
-                            <CardHeaderContent>
-                                <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>
+                    <MudItem xs="12" md="6" Style="height: 100%;">
+                        @AddTrackCardContent
+                    </MudItem>
                 }
-            </SecondPanel>
-        </MudSplitPanel>
+            </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">
+                            @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>
 
+<style>
+    .horizontal-scroll-container {
+        display: flex;
+        overflow-x: auto;
+        gap: 12px;
+        padding-bottom: 8px;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+    }
+    .horizontal-scroll-container > div {
+        scroll-snap-align: start;
+        flex: 0 0 auto; /* Запрещает карточкам сжиматься */
+    }
+    /* Скрываем скроллбар для эстетики */
+    .horizontal-scroll-container::-webkit-scrollbar { display: none; }
+    .horizontal-scroll-container { -ms-overflow-style: none; scrollbar-width: none; }
+</style>
 
 @code {
+    /// <summary>Токен расшаренного плейлиста</summary>
     [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" Hover Elevation="0" Breakpoint="Breakpoint.None" Style="min-height: 0;">
+                    <RowTemplate>
+                        <MudTd Class="py-1 px-0" Style="width: 100%;">
+                            <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
+                        </MudTd>
+                        @if (_canRemove)
+                        {
+                            <MudTd Class="py-1 px-0">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" Size="Size.Small" OnClick="() => OnRemoveTrack(context)" />
+                            </MudTd>
+                        }
+                    </RowTemplate>
+                </MudTable>
+            </MudCardContent>
+        </MudCard>
+    };
+
+    private RenderFragment AddTrackCardContent => __builder =>
+    {
+        <MudCard Class="d-flex flex-column" Elevation="0" Style="height: 100%;">
+            <MudCardHeader>
+                <MudStack>
+                    <MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-4">Добавление треков</MudText>
+                    <MudTextField @bind-Value="_searchQuery"
+                                  @bind-Value:after="OnSearchQueryChanged"
+                                  Variant="Variant.Outlined"
+                                  FullWidth
+                                  Label="Название или ссылка на трек"
+                                  Disabled="@_isSearching"
+                                  Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary" />
+
+                    <MudToggleGroup T="TrackSearchType"
+                                    @bind-Value="_searchType"
+                                    @bind-Value:after="OnSearchTypeChanged"
+                                    Size="Size.Small"
+                                    Color="Color.Primary"
+                                    Disabled="@(_isSearching)">
+                        <MudToggleItem Value="TrackSearchType.All" Text="Все" />
+                        <MudToggleItem Value="TrackSearchType.Track" Text="Треки" />
+                        <MudToggleItem Value="TrackSearchType.Album" Text="Альбомы" />
+                        <MudToggleItem Value="TrackSearchType.Playlist" Text="Плейлисты" />
+                        <MudToggleItem Value="TrackSearchType.Artist" Text="Исполнители" />
+                    </MudToggleGroup>
+                </MudStack>
+            </MudCardHeader>
+
+            <MudCardContent Class="flex-grow-1 overflow-auto flex-column">
+                @if (_isSearching)
+                {
+                    <MudProgressCircular Indeterminate Class="mx-auto my-8" />
+                }
+                else if (_searchResult != null)
+                {
+                    @* Секция исполнителей *@
+                    @if (_searchResult?.Artists?.Any() == true)
+                    {
+                        <MudText Typo="Typo.h6" Class="mt-4 mb-2 ml-2">Исполнители</MudText>
+                        <div class="horizontal-scroll-container px-2">
+                            @foreach (var artist in _searchResult.Artists)
+                            {
+                                <div style="width: 70px;">
+                                    <ArtistCard Item="artist" OnClick="() => SearchTracksByEntity(artist.Id, artist.Name, TrackSearchType.Artist)" />
+                                </div>
+                            }
+                        </div>
+                    }
+
+                    @* Секция альбомов *@
+                    @if (_searchResult?.Albums?.Any() == true)
+                    {
+                        <MudText Typo="Typo.h6" Class="mt-4 mb-2 ml-2">Альбомы</MudText>
+                        <div class="horizontal-scroll-container px-2">
+                            @foreach (var album in _searchResult.Albums)
+                            {
+                                <div style="width: 70px;">
+                                    <AlbumCard Item="album" OnClick="() => SearchTracksByEntity(album.Id, album.Title, TrackSearchType.Album)" />
+                                </div>
+                            }
+                        </div>
+                    }
+
+                    @* Секция плейлистов *@
+                    @if (_searchResult?.Playlists?.Any() == true)
+                    {
+                        <MudText Typo="Typo.h6" Class="mt-4 mb-2 ml-2">Плейлисты</MudText>
+                        <div class="horizontal-scroll-container px-2">
+                            @foreach (var playlist in _searchResult.Playlists)
+                            {
+                                <div style="width: 70px;">
+                                    <PlaylistCard Item="playlist" OnClick="() => SearchTracksByEntity(playlist.Uuid, playlist.Title, TrackSearchType.Playlist)" />
+                                </div>
+                            }
+                        </div>
+                    }
+
+                    @* Секция треков *@
+                    @if (_searchResult?.Tracks != null)
+                    {
+                        <MudText Typo="Typo.h6" Class="mt-4 mb-2 ml-2">Треки</MudText>
+                        <MudTable Items="@_searchResult.Tracks"
+                                    Hover
+                                    Elevation="0"
+                                    Style="min-height: 0; height: 100%;"
+                                    Breakpoint="Breakpoint.None">
+                            <RowTemplate>
+                                <MudTd Class="py-1 px-0" Style="width: 100%;">
+                                    <TrackItem Track="@context" PlaylistShareToken="@Token" CanPlay="@_canPlay" />
+                                </MudTd>
+                                @if (_canAdd)
+                                {
+                         
+                                    <MudTd Class="py-1 px-0">
+                                        <MudToggleIconButton Toggled="@_existingTrackIds.Contains(context.TrackId)"
+                                                                Icon="@Icons.Material.Filled.AddCircle"
+                                                                Color="@Color.Primary"
+                                                                ToggledIcon="@Icons.Material.Filled.RemoveCircle"
+                                                                ToggledColor="@Color.Error"
+                                                                ToggledChanged="() => ToggleTrack(context)" />
+                                    </MudTd>   
+                                }
+                            </RowTemplate>
+                        </MudTable>
+                    }
+                }
+            </MudCardContent>
+        </MudCard>
+    };
+
+    /// <summary>Активная вкладка для моб.версии (0 = плейлист, 1 = добавление треков)</summary>
+    private int _activeMobileTab = 0;
+
+    /// <summary>
+    /// Список ID треков, уже добавленных в плейлист. 
+    /// Используется для быстрого определения, добавлен трек или нет, при отображении результатов поиска.
+    /// </summary>
     private HashSet<string> _existingTrackIds = new();
-    private bool _firstLoadExistingTrackIds;
+    /// <summary>
+    /// Список добавленных в плейлист треков.
+    /// </summary>
     private List<YandexTrack> _tracks = new();
 
+    /// <summary>Свойства плейлиста.</summary>
     private SharedPlaylistDto? _playlist;
-    private bool _loading = true;
-    private bool _isAuthenticated;
+    /// <summary>Пользователь является создателем плейлиста.</summary>
     private bool _isCreator;
+    /// <summary>Пользователь имеет право воспроизведения треков.</summary>
     private bool _canPlay;
+    /// <summary>Пользователь имеет право добавления треков в плейлист.</summary>
     private bool _canAdd;
+    /// <summary>Пользователь имеет право удаления треков из плейлиста.</summary>
     private bool _canRemove;
-    private UpdatePermissionsDto _editPermissions = new();
-    private bool _savingPermissions;
+    /// <summary>Пользователь авторизован из под учетной записи.</summary>
+    private bool _isAuthenticated;
+    /// <summary>Текущий ID пользователя, если авторизован.</summary>
     private string? _currentUserId;
 
-    private bool _isFavorite = false;
-    private bool _favoriteLoading = false;
+    /// <summary>Состояние: Происходит загрузка плейлиста.</summary>
+    private bool _loading = true;
+    /// <summary>Состояние: Происходит загрузка треков плейлиста.</summary>
     private bool _tracksLoading;
 
-    private string _trackLink = "";
-    private bool _addingTrack;
+    /********************************
+     * Вкладка добавления треков
+    *********************************/
+    /// <summary>Строка запроса поиска.</summary>
+    private string _searchQuery = "";
+    /// <summary>Тип поиска.</summary>
+    private TrackSearchType _searchType = TrackSearchType.All;
+    /// <summary>Состояние: Происходит поиск.</summary>
+    private bool _isSearching = false;
+    
+    /// <summary>Результат поиска.</summary>
+    private YandexSearchResult? _searchResult = null;
 
     protected override async Task OnInitializedAsync()
     {
@@ -117,6 +298,7 @@
         await LoadTracks();
     }
 
+    /// <summary>Установка разрешений.</summary>
     private async Task ConfigurePermissions()
     {
         if (_playlist is null)
@@ -142,20 +324,10 @@
             || _playlist.PlayPermission == ViewPermission.Everyone
             || (_playlist.PlayPermission == ViewPermission.AuthorizedOnly && _isAuthenticated);
 
-            if (_isCreator && _isAuthenticated)
-            {
-                _editPermissions = new UpdatePermissionsDto
-                {
-                    ViewPermission = _playlist.ViewPermission,
-                    AddPermission = _playlist.AddPermission,
-                    RemovePermission = _playlist.RemovePermission,
-                    PlayPermission = _playlist.PlayPermission,
-                };
-            }
-
         }
     }
-
+    
+    /// <summary>Загрузка плейлиста.</summary>
     private async Task LoadPlaylist()
     {
         try
@@ -164,6 +336,7 @@
             if (response?.Success == true)
             {
                 _playlist = response.Data;
+                _activeMobileTab = 0;
 
                 await ConfigurePermissions();
             }
@@ -182,7 +355,8 @@
             StateHasChanged();
         }
     }
-
+    
+    /// <summary>Загрузка треков.</summary>
     private async Task LoadTracks()
     {
         if (_playlist == null) return;
@@ -195,7 +369,7 @@
             if (response?.Success == true && response.Data != null)
             {
                 _tracks = response.Data.Tracks;
-                _existingTrackIds = _tracks.Select(t => t.TrackId).ToHashSet();
+                await GenerateUniqTrackIds();
             }
             else
             {
@@ -214,7 +388,13 @@
         }
     }
 
-    private async Task RemoveTrack(YandexTrack track)
+    private async Task GenerateUniqTrackIds()
+    {
+        _existingTrackIds = _tracks.Select(t => t.TrackId).ToHashSet();
+    }
+
+    /// <summary>Удаление трека из списка плейлиста</summary>
+    private async Task OnRemoveTrack(YandexTrack track)
     {
         var confirmed = await DialogService.ShowMessageBoxAsync(
             "Подтверждение удаления",
@@ -223,6 +403,46 @@
 
         if (confirmed != true) return;
 
+        await RemoveTrack(track);
+    }
+
+
+    
+    #region Добавление/удаление трека
+    /// <summary>Добавление трека.</summary>
+    private async Task AddTrack(YandexTrack track)
+    {
+        if (_existingTrackIds.Contains(track.TrackId)) return;
+
+        try
+        {
+            var request = new UpdateTrackListRequest { TrackIds = new List<string> { track.TrackId } };
+            var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{Token}/add-tracks", request);
+            if (response.IsSuccessStatusCode)
+            {
+                Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success, c => c.SnackbarVariant = Variant.Outlined);
+                _tracks.Add(track);
+                await GenerateUniqTrackIds();
+            }
+            else
+            {
+                var error = await response.Content.ReadFromJsonAsync<ApiResponse<object>>();
+                Snackbar.Add(error?.Error?.Message ?? "Ошибка добавления трека", Severity.Error);
+            }
+            
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+        }
+        StateHasChanged();
+    }
+
+    /// <summary>Удаление трека.</summary>
+    private async Task RemoveTrack(YandexTrack track)
+    {
+        if (!_existingTrackIds.Contains(track.TrackId)) return;
+
         try
         {
             var request = new UpdateTrackListRequest { TrackIds = new List<string> { track.TrackId } };
@@ -230,7 +450,8 @@
             if (response.IsSuccessStatusCode)
             {
                 Snackbar.Add("Трек удалён", Severity.Success);
-                await LoadTracks();
+                _tracks.Remove(track);
+                await GenerateUniqTrackIds();
             }
             else
             {
@@ -242,5 +463,129 @@
         {
             Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
         }
+        StateHasChanged();
     }
+    #endregion
+
+    #region Вкладка Добавление треков
+    private async Task OnSearchQueryChanged()
+    {
+        await SearchTracks(byId: false);
+    }
+
+    private async Task OnSearchTypeChanged()
+    {
+        await SearchTracks(byId: false);
+    }
+
+    /// <summary>
+    /// Поиск трека
+    /// </summary>
+    /// <param name="byId">По ID</param>
+    /// <param name="forcedQuery">Принудительный запрос</param>
+    /// <returns></returns>
+    private async Task SearchTracks(bool byId = false, string? forcedQuery = null)
+    {
+        var query = forcedQuery ?? _searchQuery;
+        if (string.IsNullOrWhiteSpace(query))
+        {
+            _searchResult = null;
+            return;
+        }
+
+        var type = _searchType;
+
+        // Распознавание ссылки Яндекс.Музыки
+        if (!byId && Uri.TryCreate(query, UriKind.Absolute, out var uri) && uri.Host == "music.yandex.ru")
+        {
+            try
+            {
+                (type, query) = ParseYandexMusicUrl(uri);
+                byId = true;
+            }
+            catch (Exception ex)
+            {
+                Snackbar.Add($"Ошибка распознавания URL: {ex.Message}", Severity.Error);
+                return;
+            }
+        }
+
+        _isSearching = true;
+        _searchResult = null;
+        StateHasChanged();
+
+        try
+        {
+            var url = $"/api/yandexsearch/search?query={Uri.EscapeDataString(query)}&searchType={Uri.EscapeDataString(type.ToString())}&limit=20";
+            if (byId)
+                url += "&byId=true";
+            if (!string.IsNullOrEmpty(Token))
+                url += $"&shared_id={Uri.EscapeDataString(Token)}";
+
+            var response = await Http.GetFromJsonAsync<ApiResponse<YandexSearchResult>>(url);
+            if (response?.Success == true)
+            {
+                _searchResult = response.Data ?? new YandexSearchResult();
+            }
+            else
+            {
+                Snackbar.Add(response?.Error?.Message ?? "Ошибка поиска", Severity.Error);
+                _searchResult = null;
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+            _searchResult = null;
+        }
+        finally
+        {
+            _isSearching = false;
+            StateHasChanged();
+        }
+    }
+    
+    /// <summary>Поиск по определенному типу результата.</summary>
+    private async Task SearchTracksByEntity(string entityId, string title, TrackSearchType entityType)
+    {
+        // Переключаем тип и ищем по ID
+        _searchType = entityType;
+        _searchQuery = title;
+        await SearchTracks(byId: true, forcedQuery: entityId);
+    }
+    
+    /// <summary>Переключатель "Добавление/Удаление" трека</summary>
+    private async Task ToggleTrack(YandexTrack track)
+    {
+        if (_existingTrackIds.Contains(track.TrackId))
+            await RemoveTrack(track);
+        else
+            await AddTrack(track);
+    }
+    
+    /// <summary>Парсинг ссылки на яндекс трек</summary>
+    private static (TrackSearchType Type, string Id) ParseYandexMusicUrl(Uri uri)
+    {
+        var segments = uri.AbsolutePath.Split('/', StringSplitOptions.RemoveEmptyEntries);
+        
+        var dataMap = segments
+            .Select((val, idx) => new { val, idx })
+            .GroupBy(x => x.idx / 2)
+            .ToDictionary(
+                g => g.First().val,
+                g => g.ElementAtOrDefault(1)?.val
+            );
+
+        if (dataMap.TryGetValue("track", out var trackId) && !string.IsNullOrEmpty(trackId))
+            return (TrackSearchType.Track, trackId);
+        if (dataMap.TryGetValue("album", out var albumId) && !string.IsNullOrEmpty(albumId))
+            return (TrackSearchType.Album, albumId);
+        if (dataMap.TryGetValue("playlist", out var playlistId) && !string.IsNullOrEmpty(playlistId))
+            return (TrackSearchType.Playlist, playlistId);
+        if (dataMap.TryGetValue("artist", out var artistId) && !string.IsNullOrEmpty(artistId))
+            return (TrackSearchType.Artist, artistId);
+
+        throw new ArgumentException("Unsupported URL pattern");
+    }
+    #endregion
 }