add artist list

2026-06-18 17:34:09 +02:00 · 2025-04-23 23:27:06 -07:00
parent 14e9f6ac41
commit e84a4b20bc
22 changed files with 1369 additions and 192 deletions
@@ -0,0 +1,77 @@
+import type { ChangeEvent, MutableRefObject } from 'react';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Flex, Group, Stack } from '@mantine/core';
+import debounce from 'lodash/debounce';
+import { useTranslation } from 'react-i18next';
+import { FilterBar } from '../../shared/components/filter-bar';
+import { ArtistListQuery, LibraryItem } from '/@/renderer/api/types';
+import { PageHeader, SearchInput } from '/@/renderer/components';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useContainerQuery } from '/@/renderer/hooks';
+import { ArtistListFilter, useCurrentServer } from '/@/renderer/store';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
+import { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
+
+interface ArtistListHeaderProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
+    tableRef: MutableRefObject<AgGridReactType | null>;
+}
+
+export const ArtistListHeader = ({ itemCount, gridRef, tableRef }: ArtistListHeaderProps) => {
+    const { t } = useTranslation();
+    const server = useCurrentServer();
+    const cq = useContainerQuery();
+
+    const { filter, refresh, search } = useDisplayRefresh<ArtistListQuery>({
+        gridRef,
+        itemCount,
+        itemType: LibraryItem.ARTIST,
+        server,
+        tableRef,
+    });
+
+    const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
+        const updatedFilters = search(e) as ArtistListFilter;
+        refresh(updatedFilters);
+    }, 500);
+
+    return (
+        <Stack
+            ref={cq.ref}
+            spacing={0}
+        >
+            <PageHeader backgroundColor="var(--titlebar-bg)">
+                <Flex
+                    justify="space-between"
+                    w="100%"
+                >
+                    <LibraryHeaderBar>
+                        <LibraryHeaderBar.Title>
+                            {t('entity.artist_other', { postProcess: 'titleCase' })}
+                        </LibraryHeaderBar.Title>
+                        <LibraryHeaderBar.Badge
+                            isLoading={itemCount === null || itemCount === undefined}
+                        >
+                            {itemCount}
+                        </LibraryHeaderBar.Badge>
+                    </LibraryHeaderBar>
+                    <Group>
+                        <SearchInput
+                            defaultValue={filter.searchTerm}
+                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
+                            onChange={handleSearch}
+                        />
+                    </Group>
+                </Flex>
+            </PageHeader>
+            <FilterBar>
+                <ArtistListHeaderFilters
+                    gridRef={gridRef}
+                    tableRef={tableRef}
+                />
+            </FilterBar>
+        </Stack>
+    );
+};