Add ability to add/remove songs from playlist (#17)

* Add api for add/remove playlist items

* Add playlistItemId property to normalized Song

- This is used for Navidrome to delete songs from playlists

* Add mutations for add/remove from playlist

* Add context modal for playlist add

* Add remove from playlist from context menu

* Set jellyfin to use playlistItemId

* Adjust font sizing

* Add playlist add from detail pages

* Bump mantine to v6-alpha.2

src/renderer/api/navidrome.api.ts

@@ -41,6 +41,12 @@ import type {
   NDUserListResponse,
   NDUserListParams,
   NDUser,
+  NDAddToPlaylist,
+  NDAddToPlaylistBody,
+  NDAddToPlaylistResponse,
+  NDRemoveFromPlaylistParams,
+  NDRemoveFromPlaylistResponse,
+  NDRemoveFromPlaylist,
 } from '/@/renderer/api/navidrome.types';
 import { NDSongListSort, NDSortOrder } from '/@/renderer/api/navidrome.types';
 import {
@@ -73,6 +79,8 @@ import {
   sortOrderMap,
   User,
   LibraryItem,
+  AddToPlaylistArgs,
+  RemoveFromPlaylistArgs,
 } from '/@/renderer/api/types';
 import { toast } from '/@/renderer/components/toast';
 import { useAuthStore } from '/@/renderer/store';
@@ -472,6 +480,44 @@ const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<NDPlayli
   };
 };
 
+const addToPlaylist = async (args: AddToPlaylistArgs): Promise<NDAddToPlaylist> => {
+  const { query, body, server, signal } = args;
+
+  const json: NDAddToPlaylistBody = {
+    ids: body.songId,
+  };
+
+  await api
+    .post(`api/playlist/${query.id}/tracks`, {
+      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
+      json,
+      prefixUrl: server?.url,
+      signal,
+    })
+    .json<NDAddToPlaylistResponse>();
+
+  return null;
+};
+
+const removeFromPlaylist = async (args: RemoveFromPlaylistArgs): Promise<NDRemoveFromPlaylist> => {
+  const { query, server, signal } = args;
+
+  const searchParams: NDRemoveFromPlaylistParams = {
+    id: query.songId,
+  };
+
+  await api
+    .delete(`api/playlist/${query.id}/tracks`, {
+      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
+      prefixUrl: server?.url,
+      searchParams: parseSearchParams(searchParams),
+      signal,
+    })
+    .json<NDRemoveFromPlaylistResponse>();
+
+  return null;
+};
+
 const getCoverArtUrl = (args: {
   baseUrl: string;
   coverArtId: string;
@@ -501,10 +547,12 @@ const normalizeSong = (
   imageSize?: number,
 ): Song => {
   let id;
+  let playlistItemId;
 
   // Dynamically determine the id field based on whether or not the item is a playlist song
   if ('mediaFileId' in item) {
     id = item.mediaFileId;
+    playlistItemId = item.id;
   } else {
     id = item.id;
   }
@@ -542,6 +590,7 @@ const normalizeSong = (
     name: item.title,
     path: item.path,
     playCount: item.playCount,
+    playlistItemId,
     releaseDate: new Date(item.year, 0, 1).toISOString(),
     releaseYear: String(item.year),
     serverId: server.id,
@@ -675,6 +724,7 @@ const normalizeUser = (item: NDUser): User => {
 };
 
 export const navidromeApi = {
+  addToPlaylist,
   authenticate,
   createPlaylist,
   deletePlaylist,
@@ -689,6 +739,7 @@ export const navidromeApi = {
   getSongDetail,
   getSongList,
   getUserList,
+  removeFromPlaylist,
   updatePlaylist,
 };