reimplement search page

2026-05-07 04:20:12 +02:00 · 2025-11-15 13:37:03 -08:00
parent e246e4c0b7
commit 48feb9f656
3 changed files with 178 additions and 164 deletions
@@ -1,93 +1,106 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
-import { RowDoubleClickedEvent } from '@ag-grid-community/core';
-import { MutableRefObject } from 'react';
-import { generatePath, useNavigate } from 'react-router';
+import { Suspense } from 'react';
 import { useParams, useSearchParams } from 'react-router';

-import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
-import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
 import {
-    ALBUM_CONTEXT_MENU_ITEMS,
-    ARTIST_CONTEXT_MENU_ITEMS,
-    SONG_CONTEXT_MENU_ITEMS,
-} from '/@/renderer/features/context-menu/context-menu-items';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
-import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useListStoreByKey, usePlayButtonBehavior } from '/@/renderer/store';
-import { LibraryItem, QueueSong, SongListQuery } from '/@/shared/types/domain-types';
+    AlbumListView,
+    OverrideAlbumListQuery,
+} from '/@/renderer/features/albums/components/album-list-content';
+import {
+    AlbumArtistListView,
+    OverrideAlbumArtistListQuery,
+} from '/@/renderer/features/artists/components/album-artist-list-content';
+import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import {
+    OverrideSongListQuery,
+    SongListView,
+} from '/@/renderer/features/songs/components/song-list-content';
+import { useListSettings } from '/@/renderer/store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import {
+    AlbumArtistListSort,
+    AlbumListSort,
+    LibraryItem,
+    SongListSort,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';

-interface SearchContentProps {
-    tableRef: MutableRefObject<AgGridReactType | null>;
-}
-
-export const SearchContent = ({ tableRef }: SearchContentProps) => {
-    const navigate = useNavigate();
-    const server = useCurrentServer();
+export const SearchContent = () => {
    const { itemType } = useParams() as { itemType: LibraryItem };
-    const [searchParams] = useSearchParams();
-    const pageKey = itemType;
-    const { filter } = useListStoreByKey({
-        filter: { searchTerm: searchParams.get('query') || '' },
-        key: itemType,
-    });

-    const handlePlayQueueAdd = usePlayQueueAdd();
-    const playButtonBehavior = usePlayButtonBehavior();
-
-    const contextMenuItems = () => {
-        switch (itemType) {
-            case LibraryItem.ALBUM:
-                return ALBUM_CONTEXT_MENU_ITEMS;
-            case LibraryItem.ALBUM_ARTIST:
-                return ARTIST_CONTEXT_MENU_ITEMS;
-            case LibraryItem.SONG:
-                return SONG_CONTEXT_MENU_ITEMS;
-            default:
-                return [];
-        }
-    };
-
-    const handleRowDoubleClick = (e: RowDoubleClickedEvent<QueueSong>) => {
-        if (!e.data) return;
-        switch (itemType) {
-            case LibraryItem.ALBUM:
-                navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: e.data.id }));
-                break;
-            case LibraryItem.ALBUM_ARTIST:
-                navigate(
-                    generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                        albumArtistId: e.data.id,
-                    }),
-                );
-                break;
-            case LibraryItem.SONG:
-                handlePlayQueueAdd?.({
-                    byItemType: {
-                        id: [],
-                        type: LibraryItem.SONG,
-                    },
-                    initialSongId: e.data.id,
-                    playType: playButtonBehavior,
-                    query: {
-                        startIndex: 0,
-                        ...filter,
-                    },
-                });
-                break;
-        }
-    };
-
-    const { rowClassRules } = useCurrentSongRowStyles({ tableRef });
-
-    const tableProps = useVirtualTable<SongListQuery>({
-        contextMenu: contextMenuItems(),
-        customFilters: filter,
-        itemType,
-        pageKey,
-        server,
-        tableRef,
-    });
-
-    return null;
+    return (
+        <AnimatedPage>
+            <Suspense fallback={<Spinner container />}>
+                {itemType === LibraryItem.ALBUM && <AlbumSearch />}
+                {itemType === LibraryItem.SONG && <SongSearch />}
+                {itemType === LibraryItem.ALBUM_ARTIST && <ArtistSearch />}
+            </Suspense>
+        </AnimatedPage>
+    );
+};
+
+const AlbumSearch = () => {
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+    const [searchParams] = useSearchParams();
+
+    const albumQuery: OverrideAlbumListQuery = {
+        searchTerm: searchParams.get('query') || '',
+        sortBy: AlbumListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    };
+
+    return (
+        <AlbumListView
+            display={display}
+            grid={grid}
+            itemsPerPage={itemsPerPage}
+            overrideQuery={albumQuery}
+            pagination={pagination}
+            table={table}
+        />
+    );
+};
+
+const SongSearch = () => {
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
+    const [searchParams] = useSearchParams();
+
+    const songQuery: OverrideSongListQuery = {
+        searchTerm: searchParams.get('query') || '',
+        sortBy: SongListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    };
+
+    return (
+        <SongListView
+            display={display}
+            grid={grid}
+            itemsPerPage={itemsPerPage}
+            overrideQuery={songQuery}
+            pagination={pagination}
+            table={table}
+        />
+    );
+};
+
+const ArtistSearch = () => {
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ARTIST);
+    const [searchParams] = useSearchParams();
+
+    const albumArtistQuery: OverrideAlbumArtistListQuery = {
+        searchTerm: searchParams.get('query') || '',
+        sortBy: AlbumArtistListSort.NAME,
+        sortOrder: SortOrder.ASC,
+    };
+
+    return (
+        <AlbumArtistListView
+            display={display}
+            grid={grid}
+            itemsPerPage={itemsPerPage}
+            overrideQuery={albumArtistQuery}
+            pagination={pagination}
+            table={table}
+        />
+    );
 };
@@ -1,54 +1,53 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import debounce from 'lodash/debounce';
-import { ChangeEvent, MutableRefObject } from 'react';
+import { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link, useParams, useSearchParams } from 'react-router';

+import { ALBUM_ARTIST_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
+import { ALBUM_TABLE_COLUMNS, SONG_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
 import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
+import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { SearchInput } from '/@/renderer/features/shared/components/search-input';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useCurrentServer, useListStoreByKey } from '/@/renderer/store';
-import { Button } from '/@/shared/components/button/button';
+import { Button, ButtonGroup } from '/@/shared/components/button/button';
 import { Flex } from '/@/shared/components/flex/flex';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
-import {
-    AlbumArtistListQuery,
-    AlbumListQuery,
-    LibraryItem,
-    SongListQuery,
-} from '/@/shared/types/domain-types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';

 interface SearchHeaderProps {
    navigationId: string;
-    tableRef: MutableRefObject<AgGridReactType | null>;
 }

-export const SearchHeader = ({ navigationId, tableRef }: SearchHeaderProps) => {
+export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
    const { t } = useTranslation();
    const { itemType } = useParams() as { itemType: LibraryItem };
    const [searchParams, setSearchParams] = useSearchParams();
    const cq = useContainerQuery();
-    const server = useCurrentServer();
-    const { filter } = useListStoreByKey<AlbumArtistListQuery | AlbumListQuery | SongListQuery>({
-        key: itemType,
-    });
-
-    const { handleRefreshTable } = useListFilterRefresh({
-        itemType,
-        server,
-    });

    const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
        setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
-        handleRefreshTable(tableRef, { ...filter, searchTerm: e.target.value });
    }, 200);

+    const listConfigMenuProps = {
+        [LibraryItem.ALBUM]: {
+            listKey: ItemListKey.ALBUM,
+            tableColumnsData: ALBUM_TABLE_COLUMNS,
+        },
+        [LibraryItem.ALBUM_ARTIST]: {
+            listKey: ItemListKey.ALBUM_ARTIST,
+            tableColumnsData: ALBUM_ARTIST_TABLE_COLUMNS,
+        },
+        [LibraryItem.SONG]: {
+            listKey: ItemListKey.SONG,
+            tableColumnsData: SONG_TABLE_COLUMNS,
+        },
+    };
+
    return (
        <Stack gap={0} ref={cq.ref}>
            <PageHeader>
@@ -65,54 +64,59 @@ export const SearchHeader = ({ navigationId, tableRef }: SearchHeaderProps) => {
                </Flex>
            </PageHeader>
            <FilterBar>
-                <Group>
-                    <Button
-                        component={Link}
-                        fw={600}
-                        replace
-                        size="compact-md"
-                        state={{ navigationId }}
-                        to={{
-                            pathname: generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }),
-                            search: searchParams.toString(),
-                        }}
-                        variant={itemType === LibraryItem.SONG ? 'filled' : 'subtle'}
-                    >
-                        {t('entity.track_other', { postProcess: 'sentenceCase' })}
-                    </Button>
-                    <Button
-                        component={Link}
-                        fw={600}
-                        replace
-                        size="compact-md"
-                        state={{ navigationId }}
-                        to={{
-                            pathname: generatePath(AppRoute.SEARCH, {
-                                itemType: LibraryItem.ALBUM,
-                            }),
-                            search: searchParams.toString(),
-                        }}
-                        variant={itemType === LibraryItem.ALBUM ? 'filled' : 'subtle'}
-                    >
-                        {t('entity.album_other', { postProcess: 'sentenceCase' })}
-                    </Button>
-                    <Button
-                        component={Link}
-                        fw={600}
-                        replace
-                        size="compact-md"
-                        state={{ navigationId }}
-                        to={{
-                            pathname: generatePath(AppRoute.SEARCH, {
-                                itemType: LibraryItem.ALBUM_ARTIST,
-                            }),
-                            search: searchParams.toString(),
-                        }}
-                        variant={itemType === LibraryItem.ALBUM_ARTIST ? 'filled' : 'subtle'}
-                    >
-                        {t('entity.artist_other', { postProcess: 'sentenceCase' })}
-                    </Button>
-                </Group>
+                <Flex justify="space-between" w="100%">
+                    <ButtonGroup>
+                        <Button
+                            component={Link}
+                            fw={600}
+                            replace
+                            size="compact-md"
+                            state={{ navigationId }}
+                            to={{
+                                pathname: generatePath(AppRoute.SEARCH, {
+                                    itemType: LibraryItem.SONG,
+                                }),
+                                search: searchParams.toString(),
+                            }}
+                            variant={itemType === LibraryItem.SONG ? 'filled' : 'default'}
+                        >
+                            {t('entity.track_other', { postProcess: 'sentenceCase' })}
+                        </Button>
+                        <Button
+                            component={Link}
+                            fw={600}
+                            replace
+                            size="compact-md"
+                            state={{ navigationId }}
+                            to={{
+                                pathname: generatePath(AppRoute.SEARCH, {
+                                    itemType: LibraryItem.ALBUM,
+                                }),
+                                search: searchParams.toString(),
+                            }}
+                            variant={itemType === LibraryItem.ALBUM ? 'filled' : 'default'}
+                        >
+                            {t('entity.album_other', { postProcess: 'sentenceCase' })}
+                        </Button>
+                        <Button
+                            component={Link}
+                            fw={600}
+                            replace
+                            size="compact-md"
+                            state={{ navigationId }}
+                            to={{
+                                pathname: generatePath(AppRoute.SEARCH, {
+                                    itemType: LibraryItem.ALBUM_ARTIST,
+                                }),
+                                search: searchParams.toString(),
+                            }}
+                            variant={itemType === LibraryItem.ALBUM_ARTIST ? 'filled' : 'default'}
+                        >
+                            {t('entity.artist_other', { postProcess: 'sentenceCase' })}
+                        </Button>
+                    </ButtonGroup>
+                    <ListConfigMenu {...listConfigMenuProps[itemType]} />
+                </Flex>
            </FilterBar>
        </Stack>
    );
@@ -1,6 +1,4 @@
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
-import { useId, useRef } from 'react';
+import { useId } from 'react';
 import { useLocation, useParams } from 'react-router';

 import { SearchContent } from '/@/renderer/features/search/components/search-content';
@@ -12,12 +10,11 @@ const SearchRoute = () => {
    const localNavigationId = useId();
    const navigationId = locationState?.navigationId || localNavigationId;
    const { itemType } = useParams() as { itemType: string };
-    const tableRef = useRef<AgGridReactType | null>(null);

    return (
        <AnimatedPage key={`search-${navigationId}`}>
-            <SearchHeader navigationId={navigationId} tableRef={tableRef} />
-            <SearchContent key={`page-${itemType}`} tableRef={tableRef} />
+            <SearchHeader navigationId={navigationId} />
+            <SearchContent key={`page-${itemType}`} />
        </AnimatedPage>
    );
 };