feat: playlist grid view (#1476)

* feat: grid view for playlists

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -2,11 +2,12 @@ import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 
+import { PlaylistDetailSongListEditTable } from './playlist-detail-song-list-table';
+
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
 import { useListContext } from '/@/renderer/context/list-context';
 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
-import { PlaylistDetailSongListEditTable } from '/@/renderer/features/playlists/components/playlist-detail-song-list-table';
 import { useCurrentServer, useListSettings } from '/@/renderer/store';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { PlaylistSongListQuery, PlaylistSongListResponse } from '/@/shared/types/domain-types';
@@ -20,6 +21,14 @@ const PlaylistDetailSongListTable = lazy(() =>
     ),
 );
 
+const PlaylistDetailSongListGrid = lazy(() =>
+    import('/@/renderer/features/playlists/components/playlist-detail-song-list-grid').then(
+        (module) => ({
+            default: module.PlaylistDetailSongListGrid,
+        }),
+    ),
+);
+
 export const PlaylistDetailSongListContent = () => {
     const { playlistId } = useParams() as { playlistId: string };
     const server = useCurrentServer();
@@ -82,6 +91,9 @@ export const PlaylistDetailSongListView = ({ data }: { data: PlaylistSongListRes
     const { display, table } = useListSettings(ItemListKey.PLAYLIST_SONG);
 
     switch (display) {
+        case ListDisplayType.GRID: {
+            return <PlaylistDetailSongListGrid data={data} serverId={server.id} />;
+        }
         case ListDisplayType.TABLE: {
             return (
                 <PlaylistDetailSongListTable
@@ -210,6 +222,7 @@ export const PlaylistDetailSongListEdit = ({ data }: { data: PlaylistSongListRes
     }, [localData, setListData]);
 
     switch (display) {
+        case ListDisplayType.GRID:
         case ListDisplayType.TABLE: {
             return (
                 <PlaylistDetailSongListEditTable