From fdb48fddf13cfeed79d62d79e03d7cd5e5951b0e Mon Sep 17 00:00:00 2001
From: will-hut <22407192+will-hut@users.noreply.github.com>
Date: Tue, 26 Mar 2024 20:39:02 -0500
Subject: [PATCH 1/2] [feat]  Create "Add current track" button in playlist
 view

fix dependency list

Add success toast
---
 src/i18n/locales/en.json                      |  1 +
 .../components/sidebar-playlist-list.tsx      | 73 +++++++++++++++++--
 2 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b7965f778..39fa7c789 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -17,6 +17,7 @@
         "setRating": "set rating",
         "toggleSmartPlaylistEditor": "toggle $t(entity.smartPlaylist) editor",
         "viewPlaylists": "view $t(entity.playlist_other)",
+        "addCurrentSong": "$t(common.add) $t(common.currentSong)",
         "openIn": {
             "lastfm": "Open in Last.fm",
             "musicbrainz": "Open in MusicBrainz"
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index 2592e1917..32624dd06 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -2,19 +2,19 @@ import { useCallback, useMemo, useState } from 'react';
 import { Box, Flex, Group } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
-import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
+import { RiAddBoxFill, RiAddCircleFill, RiPlayFill, RiPlayListAddFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import { LibraryItem, Playlist } from '/@/renderer/api/types';
-import { Button, Text } from '/@/renderer/components';
+import { Button, Text, toast } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { usePlaylistList } from '/@/renderer/features/playlists';
+import { useAddToPlaylist, usePlaylistList } from '/@/renderer/features/playlists';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Play } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useHideScrollbar } from '/@/renderer/hooks';
-import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
+import { useCurrentServer, useGeneralSettings, useCurrentSong } from '/@/renderer/store';
 
 interface SidebarPlaylistListProps {
     data: ReturnType<typeof usePlaylistList>['data'];
@@ -84,6 +84,24 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
                     right="0"
                     spacing="sm"
                 >
+                    {!data?.items?.[index].rules && ( // hide button on smart playlists
+                        <Button
+                            compact
+                            size="md"
+                            tooltip={{
+                                label: t('action.addCurrentSong', { postProcess: 'sentenceCase' }),
+                                openDelay: 500,
+                            }}
+                            variant="default"
+                            onClick={() => {
+                                if (!data?.items?.[index].id) return;
+                                data.handleAdd(data?.items[index]);
+                            }}
+                        >
+                            <RiPlayListAddFill />
+                        </Button>
+                    )}
+
                     <Button
                         compact
                         size="md"
@@ -136,10 +154,16 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
 };
 
 export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
+    const { t } = useTranslation();
+
     const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
     const handlePlayQueueAdd = usePlayQueueAdd();
+    const addToPlaylistMutation = useAddToPlaylist({});
+
     const { defaultFullPlaylist } = useGeneralSettings();
-    const { type, username } = useCurrentServer() || {};
+    const { id: serverID, type, username } = useCurrentServer() || {};
+
+    const currentSong = useCurrentSong();
 
     const [rect, setRect] = useState({
         height: 0,
@@ -161,8 +185,43 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
         [handlePlayQueueAdd],
     );
 
+    const handleAddCurrent = useCallback(
+        (playlist: Playlist) => {
+            if (!currentSong) return;
+
+            addToPlaylistMutation.mutate(
+                {
+                    body: { songId: [currentSong.id] },
+                    query: { id: playlist.id },
+                    serverId: serverID,
+                },
+                {
+                    onError: (err) => {
+                        toast.error({
+                            message: `[${playlist?.name}] ${err.message}`,
+                            title: t('error.genericError', { postProcess: 'sentenceCase' }),
+                        });
+                    },
+                },
+            );
+
+            toast.success({
+                message: t('form.addToPlaylist.success', {
+                    message: 1,
+                    numOfPlaylists: 1,
+                    postProcess: 'sentenceCase',
+                }),
+            });
+        },
+        [addToPlaylistMutation, currentSong, serverID, t],
+    );
+
     const memoizedItemData = useMemo(() => {
-        const base = { defaultFullPlaylist, handlePlay: handlePlayPlaylist };
+        const base = {
+            defaultFullPlaylist,
+            handleAdd: handleAddCurrent,
+            handlePlay: handlePlayPlaylist,
+        };
 
         if (!type || !username || !data?.items) {
             return { ...base, items: data?.items };
@@ -185,7 +244,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
         }
 
         return { ...base, items: owned.concat(shared) };
-    }, [data?.items, defaultFullPlaylist, handlePlayPlaylist, type, username]);
+    }, [data?.items, defaultFullPlaylist, handleAddCurrent, handlePlayPlaylist, type, username]);
 
     return (
         <Flex

From e60e709bd2efcfeaa39b87be29c82eb9a251da86 Mon Sep 17 00:00:00 2001
From: will-hut <22407192+will-hut@users.noreply.github.com>
Date: Tue, 2 Apr 2024 21:20:57 -0500
Subject: [PATCH 2/2] Move success toast to onSuccess callback

---
 .../components/sidebar-playlist-list.tsx        | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index 32624dd06..a6d520e8f 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -202,16 +202,17 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
                             title: t('error.genericError', { postProcess: 'sentenceCase' }),
                         });
                     },
+                    onSuccess: () => {
+                        toast.success({
+                            message: t('form.addToPlaylist.success', {
+                                message: 1,
+                                numOfPlaylists: 1,
+                                postProcess: 'sentenceCase',
+                            }),
+                        });
+                    },
                 },
             );
-
-            toast.success({
-                message: t('form.addToPlaylist.success', {
-                    message: 1,
-                    numOfPlaylists: 1,
-                    postProcess: 'sentenceCase',
-                }),
-            });
         },
         [addToPlaylistMutation, currentSong, serverID, t],
     );