[enhancement]: Make related tab on full screen player useful

Resolves #50. Adds a new set of components for fetching similar songs
from the current playing song. For Jellyfin, use the `/items/{itemId}/similar`
endpoint (may not work well for small libraries), and for Navidrome/Subsonic
use `getSimilarSongs`. _In theory_, this component can be used to get similar
songs anywhere.

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,16 +1,17 @@
-import { Group, Center } from '@mantine/core';
+import { Group } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { HiOutlineQueueList } from 'react-icons/hi2';
-import { RiFileMusicLine, RiFileTextLine, RiInformationFill } from 'react-icons/ri';
+import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Button, TextTitle } from '/@/renderer/components';
+import { Button } from '/@/renderer/components';
 import { PlayQueue } from '/@/renderer/features/now-playing';
 import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
 } from '/@/renderer/store/full-screen-player.store';
 import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
+import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
 
 const QueueContainer = styled.div`
     position: relative;
@@ -82,8 +83,6 @@ export const FullScreenPlayerQueue = () => {
         },
     ];
 
-    console.log('opacity', opacity);
-
     return (
         <GridContainer
             className="full-screen-player-queue-container"
@@ -123,17 +122,9 @@ export const FullScreenPlayerQueue = () => {
                     <PlayQueue type="fullScreen" />
                 </QueueContainer>
             ) : activeTab === 'related' ? (
-                <Center>
-                    <Group>
-                        <RiInformationFill size="2rem" />
-                        <TextTitle
-                            order={3}
-                            weight={700}
-                        >
-                            {t('common.comingSoon', { postProcess: 'upperCase' })}
-                        </TextTitle>
-                    </Group>
-                </Center>
+                <QueueContainer>
+                    <FullScreenSimilarSongs />
+                </QueueContainer>
             ) : activeTab === 'lyrics' ? (
                 <Lyrics />
             ) : null}

src/renderer/features/player/components/full-screen-similar-songs.tsx

@@ -0,0 +1,13 @@
+import { SimilarSongsList } from '/@/renderer/features/similar-songs/components/similar-songs-list';
+import { useCurrentSong } from '/@/renderer/store';
+
+export const FullScreenSimilarSongs = () => {
+    const currentSong = useCurrentSong();
+
+    return (
+        <SimilarSongsList
+            fullScreen
+            song={currentSong}
+        />
+    );
+};

src/renderer/features/similar-songs/components/similar-songs-list.tsx

@@ -0,0 +1,82 @@
+import { ErrorBoundary } from 'react-error-boundary';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { VirtualTable, getColumnDefs } from '/@/renderer/components/virtual-table';
+import { ErrorFallback } from '/@/renderer/features/action-required';
+import { useSimilarSongs } from '/@/renderer/features/similar-songs/queries/similar-song-queries';
+import { usePlayButtonBehavior, useTableSettings } from '/@/renderer/store';
+import { useMemo, useRef } from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { LibraryItem, Song } from '/@/renderer/api/types';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { Spinner } from '/@/renderer/components';
+import { RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
+
+export type SimilarSongsListProps = {
+    count?: number;
+    fullScreen?: boolean;
+    song?: Song;
+};
+
+export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListProps) => {
+    const tableRef = useRef<AgGridReact<Song> | null>(null);
+    const tableConfig = useTableSettings(fullScreen ? 'fullScreen' : 'songs');
+    const handlePlayQueueAdd = useHandlePlayQueueAdd();
+    const playButtonBehavior = usePlayButtonBehavior();
+
+    const songQuery = useSimilarSongs({
+        options: {
+            cacheTime: 1000 * 60 * 2,
+            staleTime: 1000 * 60 * 1,
+        },
+        query: { count, song },
+        serverId: undefined,
+    });
+
+    const columnDefs = useMemo(
+        () => getColumnDefs(tableConfig.columns, false, 'generic'),
+        [tableConfig.columns],
+    );
+
+    const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+
+    const handleRowDoubleClick = (e: RowDoubleClickedEvent<Song>) => {
+        if (!e.data || !songQuery.data) return;
+
+        handlePlayQueueAdd?.({
+            byData: songQuery.data,
+            initialSongId: e.data.id,
+            playType: playButtonBehavior,
+        });
+    };
+
+    return songQuery.isLoading ? (
+        <Spinner
+            container
+            size={25}
+        />
+    ) : (
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <VirtualGridAutoSizerContainer>
+                <VirtualTable
+                    ref={tableRef}
+                    autoFitColumns={tableConfig.autoFit}
+                    columnDefs={columnDefs}
+                    context={{
+                        count,
+                        onCellContextMenu,
+                        song,
+                    }}
+                    deselectOnClickOutside={fullScreen}
+                    getRowId={(data) => data.data.uniqueId}
+                    rowBuffer={50}
+                    rowData={songQuery.data}
+                    rowHeight={tableConfig.rowHeight || 40}
+                    onCellContextMenu={onCellContextMenu}
+                    onCellDoubleClicked={handleRowDoubleClick}
+                />
+            </VirtualGridAutoSizerContainer>
+        </ErrorBoundary>
+    );
+};

src/renderer/features/similar-songs/queries/similar-song-queries.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { SimilarSongsQuery } from '/@/renderer/api/types';
+import { QueryHookArgs } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { api } from '/@/renderer/api';
+
+export const useSimilarSongs = (args: QueryHookArgs<Partial<SimilarSongsQuery>>) => {
+    const { options, query } = args || {};
+    const server = getServerById(query.song?.serverId);
+
+    return useQuery({
+        enabled: !!server?.id && !!query.song,
+        queryFn: ({ signal }) => {
+            if (!server) throw new Error('Server not found');
+            if (!query.song) return undefined;
+
+            return api.controller.getSimilarSongs({
+                apiClientProps: { server, signal },
+                query: { count: query.count ?? 50, song: query.song },
+            });
+        },
+        queryKey: queryKeys.albumArtists.detail(server?.id || '', query),
+        ...options,
+    });
+};

src/renderer/features/songs/queries/song-list-query.ts

@@ -10,6 +10,7 @@ export const useSongList = (args: QueryHookArgs<SongListQuery>, imageSize?: numb
     const server = getServerById(serverId);
 
     return useQuery({
+        cacheTime: 1000 * 60,
         enabled: !!server?.id,
         queryFn: ({ signal }) => {
             if (!server) throw new Error('Server not found');