Add playlist detail page

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

@@ -0,0 +1,159 @@
+import { CellContextMenuEvent, ColDef } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Group } from '@mantine/core';
+import { sortBy } from 'lodash';
+import { MutableRefObject, useMemo } from 'react';
+import { generatePath, useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Button, getColumnDefs, Text, VirtualTable } from '/@/renderer/components';
+import { openContextMenu } from '/@/renderer/features/context-menu';
+import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { usePlaylistSongListInfinite } from '/@/renderer/features/playlists/queries/playlist-song-list-query';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useSongListStore } from '/@/renderer/store';
+import { LibraryItem } from '/@/renderer/types';
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 1920px;
+  padding: 1rem 2rem 5rem;
+  overflow: hidden;
+
+  .ag-theme-alpine-dark {
+    --ag-header-background-color: rgba(0, 0, 0, 0%);
+  }
+
+  .ag-header-container {
+    z-index: 1000;
+  }
+
+  .ag-header-cell-resize {
+    top: 25%;
+    width: 7px;
+    height: 50%;
+    background-color: rgb(70, 70, 70, 20%);
+  }
+`;
+
+interface PlaylistDetailContentProps {
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps) => {
+  const { playlistId } = useParams() as { playlistId: string };
+  const page = useSongListStore();
+
+  const playlistSongsQueryInfinite = usePlaylistSongListInfinite(
+    {
+      id: playlistId,
+      limit: 50,
+      startIndex: 0,
+    },
+    { keepPreviousData: false },
+  );
+
+  const handleLoadMore = () => {
+    playlistSongsQueryInfinite.fetchNextPage();
+  };
+
+  const columnDefs: ColDef[] = useMemo(
+    () =>
+      getColumnDefs(page.table.columns).filter((c) => c.colId !== 'album' && c.colId !== 'artist'),
+    [page.table.columns],
+  );
+
+  const defaultColumnDefs: ColDef = useMemo(() => {
+    return {
+      lockPinned: true,
+      lockVisible: true,
+      resizable: true,
+    };
+  }, []);
+
+  const handleContextMenu = (e: CellContextMenuEvent) => {
+    if (!e.event) return;
+    const clickEvent = e.event as MouseEvent;
+    clickEvent.preventDefault();
+
+    const selectedNodes = e.api.getSelectedNodes();
+    const selectedIds = selectedNodes.map((node) => node.data.id);
+    let selectedRows = sortBy(selectedNodes, ['rowIndex']).map((node) => node.data);
+
+    if (!selectedIds.includes(e.data.id)) {
+      e.api.deselectAll();
+      e.node.setSelected(true);
+      selectedRows = [e.data];
+    }
+
+    openContextMenu({
+      data: selectedRows,
+      menuItems: SONG_CONTEXT_MENU_ITEMS,
+      type: LibraryItem.SONG,
+      xPos: clickEvent.clientX,
+      yPos: clickEvent.clientY,
+    });
+  };
+
+  const playlistSongData = useMemo(
+    () => playlistSongsQueryInfinite.data?.pages.flatMap((p) => p.items),
+    [playlistSongsQueryInfinite.data?.pages],
+  );
+
+  return (
+    <ContentContainer>
+      <VirtualTable
+        ref={tableRef}
+        animateRows
+        detailRowAutoHeight
+        maintainColumnOrder
+        suppressCellFocus
+        suppressCopyRowsToClipboard
+        suppressLoadingOverlay
+        suppressMoveWhenRowDragging
+        suppressPaginationPanel
+        suppressRowDrag
+        suppressScrollOnNewData
+        columnDefs={columnDefs}
+        defaultColDef={defaultColumnDefs}
+        enableCellChangeFlash={false}
+        getRowId={(data) => data.data.uniqueId}
+        rowData={playlistSongData}
+        rowHeight={60}
+        rowSelection="multiple"
+        onCellContextMenu={handleContextMenu}
+        onGridReady={(params) => {
+          params.api.setDomLayout('autoHeight');
+          params.api.sizeColumnsToFit();
+        }}
+        onGridSizeChanged={(params) => {
+          params.api.sizeColumnsToFit();
+        }}
+      />
+      <Group
+        p="2rem"
+        position="center"
+      >
+        <Button
+          compact
+          disabled={!playlistSongsQueryInfinite.hasNextPage}
+          loading={playlistSongsQueryInfinite.isFetchingNextPage}
+          variant="subtle"
+          onClick={handleLoadMore}
+        >
+          Load more
+        </Button>
+        <Text>or</Text>
+        <Button
+          compact
+          component={Link}
+          to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })}
+          variant="subtle"
+        >
+          View full playlist
+        </Button>
+      </Group>
+    </ContentContainer>
+  );
+};

src/renderer/features/playlists/components/playlist-detail-header.tsx

@@ -0,0 +1,92 @@
+import { Group, Stack } from '@mantine/core';
+import { RiMoreFill } from 'react-icons/ri';
+import { generatePath, useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import { DropdownMenu, Button } from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
+import { LibraryHeader, PlayButton, PLAY_TYPES } from '/@/renderer/features/shared';
+import { AppRoute } from '/@/renderer/router/routes';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem, Play } from '/@/renderer/types';
+
+interface PlaylistDetailHeaderProps {
+  background: string;
+  imagePlaceholderUrl?: string | null;
+  imageUrl?: string | null;
+}
+
+export const PlaylistDetailHeader = ({
+  background,
+  imageUrl,
+  imagePlaceholderUrl,
+}: PlaylistDetailHeaderProps) => {
+  const { playlistId } = useParams() as { playlistId: string };
+  const detailQuery = usePlaylistDetail({ id: playlistId });
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const playButtonBehavior = usePlayButtonBehavior();
+
+  const handlePlay = (playType?: Play) => {
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: [playlistId],
+        type: LibraryItem.PLAYLIST,
+      },
+      play: playType || playButtonBehavior,
+    });
+  };
+
+  return (
+    <Stack>
+      <LibraryHeader
+        background={background}
+        imagePlaceholderUrl={imagePlaceholderUrl}
+        imageUrl={imageUrl}
+        item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
+        title={detailQuery?.data?.name || ''}
+      >
+        <Group>
+          <Button
+            compact
+            component={Link}
+            to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })}
+            variant="subtle"
+          >
+            View full playlist
+          </Button>
+        </Group>
+      </LibraryHeader>
+      <Group
+        maw="1920px"
+        p="1rem"
+        position="apart"
+      >
+        <Group>
+          <PlayButton onClick={() => handlePlay()} />
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                variant="subtle"
+              >
+                <RiMoreFill size={20} />
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
+                <DropdownMenu.Item
+                  key={`playtype-${type.play}`}
+                  onClick={() => handlePlay(type.play)}
+                >
+                  {type.label}
+                </DropdownMenu.Item>
+              ))}
+              <DropdownMenu.Divider />
+              <DropdownMenu.Item disabled>Edit playlist</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Group>
+      </Group>
+    </Stack>
+  );
+};

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

@@ -234,7 +234,7 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
         columnDefs={columnDefs}
         defaultColDef={defaultColumnDefs}
         enableCellChangeFlash={false}
-        getRowId={(data) => data.data.id}
+        getRowId={(data) => data.data.uniqueId}
         infiniteInitialRowCount={checkPlaylistList.data?.totalRecordCount || 100}
         pagination={isPaginationEnabled}
         paginationAutoPageSize={isPaginationEnabled}