vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-15 07:54:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

add new playlist list

Browse Source
This commit is contained in:
jeffvli
2025-11-14 18:46:33 -08:00
parent f48c26915f
commit 9c2ed36b5c
14 changed files with 671 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/playlists/components/playlist-list-header.tsx
+19 -51
View File
@@ -1,72 +1,40 @@
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import debounce from 'lodash/debounce';
import { ChangeEvent, MutableRefObject } from 'react';
import { useTranslation } from 'react-i18next';
import { PageHeader } from '/@/renderer/components/page-header/page-header';
import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid/virtual-infinite-grid';
import { useListContext } from '/@/renderer/context/list-context';
import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { SearchInput } from '/@/renderer/features/shared/components/search-input';
import { useContainerQuery } from '/@/renderer/hooks';
import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
import { PlaylistListFilter, useCurrentServer } from '/@/renderer/store';
import { Badge } from '/@/shared/components/badge/badge';
import { Flex } from '/@/shared/components/flex/flex';
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import { Group } from '/@/shared/components/group/group';
import { SpinnerIcon } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem, PlaylistListQuery } from '/@/shared/types/domain-types';
interface PlaylistListHeaderProps {
gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
itemCount?: number;
tableRef: MutableRefObject<AgGridReactType | null>;
title?: string;
}
export const PlaylistListHeader = ({ gridRef, itemCount, tableRef }: PlaylistListHeaderProps) => {
export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
const { t } = useTranslation();
const cq = useContainerQuery();
const server = useCurrentServer();
const { filter, refresh, search } = useDisplayRefresh<PlaylistListQuery>({
gridRef,
itemCount,
itemType: LibraryItem.PLAYLIST,
server,
tableRef,
});
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
const updatedFilters = search(e) as PlaylistListFilter;
refresh(updatedFilters);
}, 500);
const { itemCount } = useListContext();
const pageTitle = title || t('page.playlistList.title', { postProcess: 'titleCase' });
return (
<Stack gap={0} ref={cq.ref}>
<PageHeader>
<Flex align="center" justify="space-between" w="100%">
<LibraryHeaderBar>
<LibraryHeaderBar.Title>
{t('page.playlistList.title', { postProcess: 'titleCase' })}
</LibraryHeaderBar.Title>
<Badge>
{itemCount === null || itemCount === undefined ? (
<SpinnerIcon />
) : (
itemCount
)}
</Badge>
</LibraryHeaderBar>
<Group>
<SearchInput defaultValue={filter.searchTerm} onChange={handleSearch} />
</Group>
</Flex>
<Stack gap={0}>
<PageHeader backgroundColor="var(--theme-colors-background)">
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton />
<LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge isLoading={!itemCount}>
{itemCount}
</LibraryHeaderBar.Badge>
</LibraryHeaderBar>
<Group>
<ListSearchInput />
</Group>
</PageHeader>
<FilterBar>
<PlaylistListHeaderFilters gridRef={gridRef} tableRef={tableRef} />
<PlaylistListHeaderFilters />
</FilterBar>
</Stack>
);