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/features/playlists/mutations/add-to-playlist-mutation.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { AddToPlaylistArgs, RawAddToPlaylistResponse } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useAddToPlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<RawAddToPlaylistResponse, HTTPError, Omit<AddToPlaylistArgs, 'server'>, null>({
+    mutationFn: (args) => api.controller.addToPlaylist({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''), { exact: false });
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detail(server?.id || '', variables.query.id),
+      );
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detailSongList(server?.id || '', variables.query.id),
+      );
+    },
+    ...options,
+  });
+};

src/renderer/features/playlists/mutations/remove-from-playlist-mutation.ts

@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { HTTPError } from 'ky';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { RawRemoveFromPlaylistResponse, RemoveFromPlaylistArgs } from '/@/renderer/api/types';
+import { MutationOptions } from '/@/renderer/lib/react-query';
+import { useCurrentServer } from '/@/renderer/store';
+
+export const useRemoveFromPlaylist = (options?: MutationOptions) => {
+  const queryClient = useQueryClient();
+  const server = useCurrentServer();
+
+  return useMutation<
+    RawRemoveFromPlaylistResponse,
+    HTTPError,
+    Omit<RemoveFromPlaylistArgs, 'server'>,
+    null
+  >({
+    mutationFn: (args) => api.controller.removeFromPlaylist({ ...args, server }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries(queryKeys.playlists.list(server?.id || ''), { exact: false });
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detail(server?.id || '', variables.query.id),
+      );
+
+      queryClient.invalidateQueries(
+        queryKeys.playlists.detailSongList(server?.id || '', variables.query.id),
+      );
+    },
+    ...options,
+  });
+};