9f2e873366
* Remove 1920px max width * Fix position of list controls menu * Match size and color of search input * Adjust library header sizing * Move app menu to sidebar * Increase row buffer on play queue list * Fix query builder styles * Fix playerbar slider track bg * Adjust titlebar styles * Fix invalid modal prop * Various adjustments to detail pages * Fix sidebar height calculation * Fix list null indicators, add filter indicator * Adjust playqueue styles * Fix jellyfin releaseYear normalization * Suppress browser context menu on ag-grid * Add radius to drawer queue -- normalize layout * Add modal styles to provider theme * Fix playlist song list pagination * Add disc number to albums with more than one disc * Fix query builder boolean values * Adjust input placeholder color * Properly handle rating/favorite from context menu on table * Conform dropdown menu styles to context menu * Increase sort type select width * Fix drawer queue radius * Change primary color * Prevent volume wheel from invalid values * Add icons to query builder dropdowns * Update notification styles * Update scrollbar thumb styles * Remove "add to playlist" on smart playlists * Fix "add to playlist" from context menu
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
|
|
import { Flex, Stack } from '@mantine/core';
|
|
import { MutableRefObject } from 'react';
|
|
import { PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
|
|
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
|
|
import { LibraryHeaderBar } from '/@/renderer/features/shared';
|
|
import { useContainerQuery } from '/@/renderer/hooks';
|
|
|
|
interface PlaylistListHeaderProps {
|
|
itemCount?: number;
|
|
tableRef: MutableRefObject<AgGridReactType | null>;
|
|
}
|
|
|
|
export const PlaylistListHeader = ({ itemCount, tableRef }: PlaylistListHeaderProps) => {
|
|
const cq = useContainerQuery();
|
|
|
|
return (
|
|
<Stack
|
|
ref={cq.ref}
|
|
spacing={0}
|
|
>
|
|
<PageHeader backgroundColor="var(--titlebar-bg)">
|
|
<Flex justify="space-between">
|
|
<LibraryHeaderBar>
|
|
<LibraryHeaderBar.Title>Playlists</LibraryHeaderBar.Title>
|
|
<Paper
|
|
fw="600"
|
|
px="1rem"
|
|
py="0.3rem"
|
|
radius="sm"
|
|
>
|
|
{itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
|
|
</Paper>
|
|
</LibraryHeaderBar>
|
|
</Flex>
|
|
</PageHeader>
|
|
<Paper p="1rem">
|
|
<PlaylistListHeaderFilters tableRef={tableRef} />
|
|
</Paper>
|
|
</Stack>
|
|
);
|
|
};
|