feat: added playlist from queue creation (#2210)

* feat: added playlist from queue creation

- added functionality to create a playlist from queue
- prefilling is done as an extra function to be api agnostic since navidrome native api for example does not offer a parameter for filling a playlist with songs on creation

#2204

* fix: fixed wrong declaration

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,6 +1,6 @@
 import { useIsFetching } from '@tanstack/react-query';
 import { t } from 'i18next';
-import { RefObject, useCallback } from 'react';
+import { MouseEvent, RefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './play-queue-list-controls.module.css';
@@ -10,6 +10,7 @@ import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { useRestoreQueue, useSaveQueue } from '/@/renderer/features/player/hooks/use-queue-restore';
+import { openCreatePrefilledPlaylistModal } from '/@/renderer/features/playlists/components/create-playlist-form';
 import {
     ListConfigMenu,
     SONG_DISPLAY_TYPES,
@@ -53,6 +54,7 @@ export const PlayQueueListControls = ({
             <Group gap="xs" style={{ flexShrink: 0 }} wrap="nowrap">
                 <QueueRestoreActions />
                 <QueuePlaybackIcons tableRef={tableRef} />
+                <QueuePlaylistIcons />
             </Group>
             <Divider h="60%" orientation="vertical" style={{ alignSelf: 'center' }} />
             <Box style={{ display: 'flex', flex: 1, minWidth: 0 }}>
@@ -84,6 +86,29 @@ export const PlayQueueListControls = ({
     );
 };
 
+const QueuePlaylistIcons = () => {
+    const server = useCurrentServer();
+    const player = usePlayer();
+
+    const handleCreatePlaylistFromQueue = (e: MouseEvent<HTMLButtonElement>) => {
+        const queueSongs = player.getQueue();
+
+        openCreatePrefilledPlaylistModal(server, queueSongs, e);
+    };
+
+    return (
+        <>
+            <ActionIcon
+                icon="playlistAdd"
+                iconProps={{ size: 'lg' }}
+                onClick={handleCreatePlaylistFromQueue}
+                tooltip={{ label: t('action.createPlaylistFromQueue') }}
+                variant="subtle"
+            />
+        </>
+    );
+};
+
 const QueuePlaybackIcons = ({ tableRef }: { tableRef: RefObject<ItemListHandle | null> }) => {
     const { t } = useTranslation();
     const player = usePlayer();