Add artist top songs list

src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx

@@ -0,0 +1,73 @@
+import { MutableRefObject, useMemo } from 'react';
+import type { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { getColumnDefs, VirtualGridAutoSizerContainer, VirtualTable } from '/@/renderer/components';
+import { useCurrentServer, useSongListStore } from '/@/renderer/store';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem, QueueSong } from '/@/renderer/api/types';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+
+interface AlbumArtistSongListContentProps {
+  data: QueueSong[];
+  tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const AlbumArtistDetailTopSongsListContent = ({
+  tableRef,
+  data,
+}: AlbumArtistSongListContentProps) => {
+  const server = useCurrentServer();
+  const page = useSongListStore();
+
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const playButtonBehavior = usePlayButtonBehavior();
+
+  const columnDefs: ColDef[] = useMemo(
+    () => getColumnDefs(page.table.columns),
+    [page.table.columns],
+  );
+
+  const handleContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+
+  const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
+    if (!e.data) return;
+    handlePlayQueueAdd?.({
+      byData: [e.data],
+      play: playButtonBehavior,
+    });
+  };
+
+  return (
+    <>
+      <VirtualGridAutoSizerContainer>
+        <VirtualTable
+          // https://github.com/ag-grid/ag-grid/issues/5284
+          // Key is used to force remount of table when display, rowHeight, or server changes
+          key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
+          ref={tableRef}
+          alwaysShowHorizontalScroll
+          animateRows
+          maintainColumnOrder
+          suppressCopyRowsToClipboard
+          suppressMoveWhenRowDragging
+          suppressPaginationPanel
+          suppressRowDrag
+          suppressScrollOnNewData
+          autoFitColumns={page.table.autoFit}
+          columnDefs={columnDefs}
+          enableCellChangeFlash={false}
+          getRowId={(data) => data.data.uniqueId}
+          rowBuffer={20}
+          rowData={data}
+          rowHeight={page.table.rowHeight || 40}
+          rowModelType="clientSide"
+          rowSelection="multiple"
+          onCellContextMenu={handleContextMenu}
+          onRowDoubleClicked={handleRowDoubleClick}
+        />
+      </VirtualGridAutoSizerContainer>
+    </>
+  );
+};

src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx

@@ -0,0 +1,96 @@
+import { Flex, Group } from '@mantine/core';
+import { RiMoreFill } from 'react-icons/ri';
+import { QueueSong } from '/@/renderer/api/types';
+import {
+  Button,
+  DropdownMenu,
+  PageHeader,
+  TextTitle,
+  Badge,
+  SpinnerIcon,
+} from '/@/renderer/components';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { Play } from '/@/renderer/types';
+
+interface AlbumArtistDetailTopSongsListHeaderProps {
+  data: QueueSong[];
+  itemCount?: number;
+  title: string;
+}
+
+export const AlbumArtistDetailTopSongsListHeader = ({
+  title,
+  itemCount,
+  data,
+}: AlbumArtistDetailTopSongsListHeaderProps) => {
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const cq = useContainerQuery();
+
+  const handlePlay = async (play: Play) => {
+    handlePlayQueueAdd?.({
+      byData: data,
+      play,
+    });
+  };
+
+  return (
+    <PageHeader p="1rem">
+      <Flex
+        ref={cq.ref}
+        direction="row"
+        justify="space-between"
+      >
+        <Flex
+          align="center"
+          gap="md"
+          justify="center"
+        >
+          <Button
+            compact
+            size="xl"
+            sx={{ paddingLeft: 0, paddingRight: 0 }}
+            variant="subtle"
+          >
+            <Group noWrap>
+              <TextTitle
+                fw="bold"
+                maw="20vw"
+                order={3}
+                overflow="hidden"
+              >
+                {title}
+              </TextTitle>
+              <Badge
+                radius="xl"
+                size="lg"
+              >
+                {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+              </Badge>
+            </Group>
+          </Button>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="600"
+                variant="subtle"
+              >
+                <RiMoreFill size={15} />
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
+                Add to queue
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
+                Add to queue next
+              </DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Flex>
+      </Flex>
+    </PageHeader>
+  );
+};