Subsonic 2, general rework (#758)

src/renderer/features/genres/components/genre-list-grid-view.tsx

@@ -22,7 +22,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const { pageKey, id } = useListContext();
-    const { grid, display, filter } = useListStoreByKey({ key: pageKey });
+    const { grid, display, filter } = useListStoreByKey<GenreListQuery>({ key: pageKey });
     const { setGrid } = useListStoreActions();
     const genrePath = useGenreRoute();
 

src/renderer/features/genres/components/genre-list-header-filters.tsx

@@ -12,7 +12,13 @@ import {
     RiSettings3Fill,
 } from 'react-icons/ri';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { GenreListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
+import {
+    GenreListQuery,
+    GenreListSort,
+    LibraryItem,
+    ServerType,
+    SortOrder,
+} from '/@/renderer/api/types';
 import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { GENRE_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
@@ -47,25 +53,38 @@ const FILTERS = {
             value: GenreListSort.NAME,
         },
     ],
+    subsonic: [
+        {
+            defaultOrder: SortOrder.ASC,
+            name: i18n.t('filter.name', { postProcess: 'titleCase' }),
+            value: GenreListSort.NAME,
+        },
+    ],
 };
 
 interface GenreListHeaderFiltersProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount: number | undefined;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFiltersProps) => {
+export const GenreListHeaderFilters = ({
+    gridRef,
+    itemCount,
+    tableRef,
+}: GenreListHeaderFiltersProps) => {
     const { t } = useTranslation();
     const queryClient = useQueryClient();
     const { pageKey, customFilters } = useListContext();
     const server = useCurrentServer();
     const { setFilter, setTable, setGrid, setDisplayType } = useListStoreActions();
-    const { display, filter, table, grid } = useListStoreByKey({ key: pageKey });
+    const { display, filter, table, grid } = useListStoreByKey<GenreListQuery>({ key: pageKey });
     const cq = useContainerQuery();
     const { genreTarget } = useGeneralSettings();
     const { setGenreBehavior } = useSettingsStoreActions();
 
     const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
+        itemCount,
         itemType: LibraryItem.GENRE,
         server,
     });

src/renderer/features/genres/components/genre-list-header.tsx

@@ -2,7 +2,7 @@ import { 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 { LibraryItem } from '/@/renderer/api/types';
+import { GenreListQuery, LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
@@ -22,7 +22,7 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
     const { t } = useTranslation();
     const cq = useContainerQuery();
     const server = useCurrentServer();
-    const { filter, refresh, search } = useDisplayRefresh({
+    const { filter, refresh, search } = useDisplayRefresh<GenreListQuery>({
         gridRef,
         itemType: LibraryItem.GENRE,
         server,
@@ -66,6 +66,7 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
             <FilterBar>
                 <GenreListHeaderFilters
                     gridRef={gridRef}
+                    itemCount={itemCount}
                     tableRef={tableRef}
                 />
             </FilterBar>

src/renderer/features/genres/routes/genre-list-route.tsx

@@ -8,19 +8,20 @@ import { useGenreList } from '/@/renderer/features/genres/queries/genre-list-que
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { useCurrentServer } from '/@/renderer/store';
 import { useListStoreByKey } from '../../../store/list.store';
+import { GenreListQuery } from '/@/renderer/api/types';
 
 const GenreListRoute = () => {
     const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const pageKey = 'genre';
-    const { filter } = useListStoreByKey({ key: pageKey });
+    const { filter } = useListStoreByKey<GenreListQuery>({ key: pageKey });
 
     const itemCountCheck = useGenreList({
         query: {
+            ...filter,
             limit: 1,
             startIndex: 0,
-            ...filter,
         },
         serverId: server?.id,
     });