Переработана страница поиска и добавления треков в плейлист

PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackBySearch.razor

@@ -3,65 +3,56 @@
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 
-<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
-    <div style="display: flex; gap: 8px; margin-bottom: 16px;">
-        <MudTextField @bind-Value="_searchQuery"
-                      Label="Название трека или исполнитель"
-                      Variant="Variant.Outlined"
-                      FullWidth="true"
-                      OnKeyUp="@(async (e) => { if (e.Key == "Enter") await SearchTracks(); })"
-                      Placeholder="Например: Bohemian Rhapsody" />
-        <MudButton Variant="Variant.Filled"
-                   Color="Color.Primary"
-                   OnClick="SearchTracks"
-                   Disabled="_isSearching"
-                   StartIcon="@Icons.Material.Filled.Search">
-            Искать
-        </MudButton>
-    </div>
+<MudStack AlignItems="AlignItems.Center">
+    <MudTextField @bind-Value="_searchQuery"
+                    Label="Название трека или исполнитель"
+                    Variant="Variant.Outlined"
+                    Disabled="@_isSearching"
+                    FullWidth="true"
+                    OnKeyUp="@(async (e) => { if (e.Key == "Enter") await SearchTracks(); })"
+                    Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Secondary"        
+                    />
 
     @if (_isSearching)
     {
-        <div style="text-align: center; padding: 20px;">
-            <MudProgressCircular Indeterminate />
-        </div>
+    <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
     }
     else if (_searchResults.Any())
     {
-        <div style="max-height: 400px; overflow-y: auto;">
-            @foreach (var track in _searchResults)
-            {
-                <div style="display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.1);">
-                    <div style="width: 40px; height: 40px; flex-shrink: 0;">
-                        <TrackCoverWithPlay CoverUrl="@track.CoverUri"
-                                            TrackId="@track.TrackId"
-                                            TrackTitle="@track.Title"
-                                            PlaylistShareToken="@ShareToken"
-                                            Width="40" Height="40"/>
-                    </div>
-                    <div style="flex: 1; min-width: 0;">
-                        <MudText Typo="Typo.body1" Style="font-weight: 500;">@track.Title</MudText>
-                        <MudText Typo="Typo.body2" Color="Color.Secondary">@string.Join(", ", track.Artists)</MudText>
-                    </div>
-                    <div style="flex-shrink: 0;">
-                        <MudText Typo="Typo.body2">@track.DurationMs.FormatDuration()</MudText>
-                    </div>
-                    <div style="flex-shrink: 0;">
-                        <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
-                                       Color="Color.Primary"
-                                       OnClick="() => AddTrack(track)"
-                                       Disabled="_addingTrackIds.Contains(track.TrackId)"
-                                       Title="Добавить в плейлист" />
-                    </div>
+    <div style="max-height: 400px; overflow-y: auto;">
+        @foreach (var track in _searchResults)
+        {
+            <div style="display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.1);">
+                <div style="width: 40px; height: 40px; flex-shrink: 0;">
+                    <TrackCoverWithPlay CoverUrl="@track.CoverUri"
+                                        TrackId="@track.TrackId"
+                                        TrackTitle="@track.Title"
+                                        PlaylistShareToken="@ShareToken"
+                                        Width="40" Height="40"/>
                 </div>
-            }
-        </div>
+                <div style="flex: 1; min-width: 0;">
+                    <MudText Typo="Typo.body1" Style="font-weight: 500;">@track.Title</MudText>
+                    <MudText Typo="Typo.body2" Color="Color.Secondary">@string.Join(", ", track.Artists)</MudText>
+                </div>
+                <div style="flex-shrink: 0;">
+                    <MudText Typo="Typo.body2">@track.DurationMs.FormatDuration()</MudText>
+                </div>
+                <div style="flex-shrink: 0;">
+                    <MudIconButton Icon="@Icons.Material.Filled.AddCircle"
+                                    Color="Color.Primary"
+                                    OnClick="() => AddTrack(track)"
+                                    Disabled="_addingTrackIds.Contains(track.TrackId)"
+                                    Title="Добавить в плейлист" />
+                </div>
+            </div>
+        }
+    </div>
     }
     else if (!_isFirstSearch)
     {
-        <MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
+    <MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
     }
-</MudPaper>
+</MudStack>
 
     @code {
     [Parameter] public EventCallback<string> OnAddTrack { get; set; }
@@ -75,15 +66,11 @@
 
     private async Task SearchTracks()
     {
-
-        if (string.IsNullOrWhiteSpace(_searchQuery)) 
-            return;
-
         _isFirstSearch = false;
         _isSearching = true;
         try
         {
-            var url = $"/api/yandexsearch/tracks?query={Uri.EscapeDataString(_searchQuery)}&limit=20";
+            var url = $"/api/yandexsearch/query?query={Uri.EscapeDataString(_searchQuery)}&limit=20";
             if (!string.IsNullOrEmpty(ShareToken))
                 url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";
 

PlaylistShared.Pwa/Components/SharedPlaylist/AddTrackSection.razor

@@ -1,73 +1,210 @@
-@using PlaylistShared.Shared.Shared
+@using PlaylistShared.Pwa.Components.Common
+@using PlaylistShared.Shared.DTO
+@using PlaylistShared.Shared.Enums
+@using PlaylistShared.Shared.SharedPlaylist
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 
 <MudPaper Class="mb-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
-    <MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Style="border-bottom: 1px solid rgba(0,0,0,0.1);">
-        <MudTabPanel Text="По ссылке" Style="padding: 16px;">
-            <MudGrid>
-                <MudItem xs="12" sm="10">
-                    <MudTextField @bind-Value="_trackLink" Label="Ссылка на трек Яндекс.Музыки"
-                                  Variant="Variant.Outlined" FullWidth="true"
-                                  Placeholder="https://music.yandex.ru/album/2488464/track/21696942"
-                                  OnKeyUp="@(async (e) => { if (e.Key == "Enter") await AddTrackByLink(); })" />
-                </MudItem>
-                <MudItem xs="12" sm="2">
-                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="AddTrackByLink"
-                               Disabled="_addingTrack" FullWidth="true" Style="height: 100%;">
-                        @if (_addingTrack)
-                        {
-                            <MudProgressCircular Size="Size.Small" Indeterminate />
-                        }
-                        else
-                        {
-                            <MudText>Добавить</MudText>
-                        }
-                    </MudButton>
-                </MudItem>
-            </MudGrid>
-        </MudTabPanel>
-        <MudTabPanel Text="Поиск" Style="padding: 16px;">
-            <AddTrackBySearch OnAddTrack="AddTrackById"
-                              ShareToken="@ShareToken" />
-        </MudTabPanel>
-    </MudTabs>
+    <MudStack AlignItems="AlignItems.Start">
+        <MudTextField @bind-Value="_searchQuery"
+                      @bind-Value:after="SearchTracks"
+                      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="SearchTracks"
+                        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.Artist" Text="Исполнитель" />
+        </MudToggleGroup>
+
+        @if (_isSearching)
+        {
+            <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
+        }
+        else if (_searchResults.Any())
+        {
+            <div style="max-height: 400px; overflow-y: auto;">
+                @foreach (var track in _searchResults)
+                {
+                    <div style="display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.1);">
+                        <div style="width: 40px; height: 40px; flex-shrink: 0;">
+                            <TrackCoverWithPlay CoverUrl="@track.CoverUri"
+                                                TrackId="@track.TrackId"
+                                                TrackTitle="@track.Title"
+                                                PlaylistShareToken="@ShareToken"
+                                                Width="40" Height="40" />
+                        </div>
+                        <div style="flex: 1; min-width: 0;">
+                            <MudText Typo="Typo.body1" Style="font-weight: 500;">@track.Title</MudText>
+                            <MudText Typo="Typo.body2" Color="Color.Secondary">@string.Join(", ", track.Artists)</MudText>
+                        </div>
+                        <div style="flex-shrink: 0;">
+                            <MudText Typo="Typo.body2">@track.DurationMs.FormatDuration()</MudText>
+                        </div>
+                        <div style="flex-shrink: 0;">
+                            <MudToggleIconButton Toggled="_addingTrackIds.Contains(track.TrackId)"
+                                                 Icon="@Icons.Material.Filled.AddCircle"
+                                                 Color="@Color.Primary"
+                                                 ToggledIcon="@Icons.Material.Filled.RemoveCircle"
+                                                 ToggledColor="@Color.Error"
+                                                 ToggledChanged="() => ToggleTrack(track)" />
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+        else if (!_isFirstSearch)
+        {
+            <MudAlert Severity="Severity.Info">Ничего не найдено. Попробуйте изменить запрос.</MudAlert>
+        }
+    </MudStack>
 </MudPaper>
 
 @code {
-    private int _activeTabIndex = 0;
-    private string _trackLink = "";
-    private bool _addingTrack = false;
-
     [Parameter] public string ShareToken { get; set; } = string.Empty;
     [Parameter] public EventCallback OnTrackAdded { get; set; }
+    [Parameter] public EventCallback OnTrackRemoved { get; set; }
 
-    private async Task AddTrackByLink()
+    private string _searchQuery = "";
+    private bool _isSearching = false;
+    private bool _isFirstSearch = true;
+    private TrackSearchType _searchType = TrackSearchType.All;
+    private List<YandexTrack> _searchResults = new();
+    private HashSet<string> _addingTrackIds = new();
+
+    private async Task SearchTracks()
     {
-        if (string.IsNullOrWhiteSpace(_trackLink))
+        if (string.IsNullOrWhiteSpace(_searchQuery))
         {
-            Snackbar.Add("Введите ссылку на трек", Severity.Warning);
             return;
         }
 
-        var trackId = ExtractTrackIdFromLink(_trackLink);
-        if (string.IsNullOrEmpty(trackId))
+        var query = _searchQuery.Trim();
+        var type = _searchType;
+        bool byId = false;
+
+        if (Uri.TryCreate(_searchQuery, UriKind.Absolute, out var uri) && uri.Host == "music.yandex.ru")
         {
-            Snackbar.Add("Неверный формат ссылки", Severity.Warning);
-            return;
+            try
+            {
+                (type, query) = ParseYandexMusicUrl(uri);
+                byId = true;
+            }
+            catch (Exception ex)
+            {
+                Snackbar.Add($"Ошибка распознавания URL: {ex.Message}", Severity.Error);
+                return;
+            }
         }
 
-        await AddTrackById(trackId);
-        if (!_addingTrack) // если не было ошибки
-            _trackLink = "";
+        _isFirstSearch = false;
+        _isSearching = true;
+        try
+        {
+            var url = $"/api/yandexsearch/tracks?query={Uri.EscapeDataString(query)}&type={Uri.EscapeDataString(type.ToString())}&limit=20";
+            if (!string.IsNullOrEmpty(ShareToken))
+                url += $"&shared_id={Uri.EscapeDataString(ShareToken)}";
+            if (byId)
+                url += $"&byId={byId}";
+
+            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexTrack>>>(url);
+            if (response?.Success == true)
+                _searchResults = response.Data ?? new();
+            else
+                Snackbar.Add(response?.Error?.Message ?? "Ошибка поиска", Severity.Error);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _isSearching = false;
+            StateHasChanged();
+        }
+
+    }
+
+    private async Task SearchTracksByQuery(string query)
+    {
+        if (string.IsNullOrWhiteSpace(query))
+            return;
+
+    }
+
+    private async Task ToggleTrack(YandexTrack track)
+    {
+        if (_addingTrackIds.Contains(track.TrackId))
+        {
+            await RemoveTrack(track);
+        }
+        else
+        {
+            await AddTrack(track);
+        }
+    }
+
+    private async Task RemoveTrack(YandexTrack track)
+    {
+        if (!_addingTrackIds.Remove(track.TrackId)) return;
+        
+
+        try
+        {
+            await RemoveTrackById(track.TrackId);
+            await OnTrackRemoved.InvokeAsync();
+            Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка добавления: {ex.Message}", Severity.Error);
+            _addingTrackIds.Add(track.TrackId);
+        }
+        finally
+        {
+            StateHasChanged();
+        }
+    }
+
+    private async Task AddTrack(YandexTrack track)
+    {
+        if (_addingTrackIds.Contains(track.TrackId)) return;
+        _addingTrackIds.Add(track.TrackId);
+
+        try
+        {
+            await AddTrackById(track.TrackId);
+            await OnTrackAdded.InvokeAsync();
+            Snackbar.Add($"Трек \"{track.Title}\" добавлен", Severity.Success);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка добавления: {ex.Message}", Severity.Error);
+            _addingTrackIds.Remove(track.TrackId);
+        }
+        finally
+        {
+            StateHasChanged();
+        }
     }
 
     private async Task AddTrackById(string trackId)
     {
-        _addingTrack = true;
         try
         {
-            var request = new AddTracksRequest { TrackIds = new List<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)
             {
@@ -86,14 +223,58 @@
         }
         finally
         {
-            _addingTrack = false;
             StateHasChanged();
         }
     }
 
-    private string? ExtractTrackIdFromLink(string link)
+    private async Task RemoveTrackById(string trackId)
     {
-        var match = System.Text.RegularExpressions.Regex.Match(link, @"/track/(\d+)");
-        return match.Success ? match.Groups[1].Value : null;
+        try
+        {
+            var request = new UpdateTrackListRequest { TrackIds = new List<string> { trackId } };
+            var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/remove-tracks", request);
+            if (response.IsSuccessStatusCode)
+            {
+                Snackbar.Add("Трек успешно удален", Severity.Success);
+                await OnTrackAdded.InvokeAsync(); // уведомляем родителя, что список треков изменился
+            }
+            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);
+        }
+        finally
+        {
+            StateHasChanged();
+        }
+    }
+
+    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/PermissionsDialog.razor

@@ -1,5 +1,5 @@
 @using PlaylistShared.Shared.Enums
-@using PlaylistShared.Shared.Shared
+@using PlaylistShared.Shared.SharedPlaylist
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 

PlaylistShared.Pwa/Components/SharedPlaylist/PlaylistHeader.razor

@@ -1,20 +1,20 @@
 @using PlaylistShared.Pwa.Components.Common
-@using PlaylistShared.Shared.Shared
 @using PlaylistShared.Shared.Enums
 @using System.Security.Claims
+@using PlaylistShared.Shared.SharedPlaylist
 @inject HttpClient Http
 @inject NavigationManager Navigation
 @inject AuthenticationStateProvider AuthProvider
 @inject ISnackbar Snackbar
 @inject IDialogService DialogService
 
-<div style="display: flex; gap: 16px; align-items: center;">
+<MudStack Row AlignItems="AlignItems.Center">
     @if (!string.IsNullOrEmpty(Playlist?.CoverUrl))
     {
         <MudImage Src="@Playlist.CoverUrl.FormatCoverUrl(80, 80)" Height="80" Width="80" Class="rounded" />
     }
-    <div>
-        <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+    <MudStack>
+        <MudStack Row AlignItems="AlignItems.Center" Wrap="Wrap.Wrap">
             <MudLink Href="@($"https://music.yandex.ru/playlists/{Playlist?.YandexPlaylistUuid}")"
                      Typo="Typo.h5" 
                      Target="_blank" 
@@ -39,10 +39,10 @@
                                Title="Настройки доступа"
                                Size="Size.Medium" />
             }
-        </div>
+        </MudStack>
         <MudText Typo="Typo.body2" Color="Color.Secondary">Владелец: @Playlist?.Creator?.UserName</MudText>
-    </div>
-</div>
+    </MudStack>
+</MudStack>
 
 @code {
     [Parameter] public SharedPlaylistDto? Playlist { get; set; }

PlaylistShared.Pwa/Components/SharedPlaylist/TracksTable.razor

@@ -1,6 +1,6 @@
 @using PlaylistShared.Pwa.Components.Common
 @using PlaylistShared.Shared.DTO
-@using PlaylistShared.Shared.Shared
+@using PlaylistShared.Shared.SharedPlaylist
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 @inject IDialogService DialogService
@@ -119,7 +119,7 @@
 
         try
         {
-            var request = new RemoveTracksRequest { TrackIds = new List<string> { track.TrackId } };
+            var request = new UpdateTrackListRequest { TrackIds = new List<string> { track.TrackId } };
             var response = await Http.PostAsJsonAsync($"/api/sharedplaylist/{ShareToken}/remove-tracks", request);
             if (response.IsSuccessStatusCode)
             {