[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/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,
+    });
+};