Misc fixes to song list page

src/renderer/features/songs/components/song-list-content.tsx

@@ -50,7 +50,10 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     ...page.filter,
   });
 
-  const columnDefs = useMemo(() => getColumnDefs(page.table.columns), [page.table.columns]);
+  const columnDefs: ColDef[] = useMemo(
+    () => getColumnDefs(page.table.columns),
+    [page.table.columns],
+  );
 
   const defaultColumnDefs: ColDef = useMemo(() => {
     return {
@@ -91,9 +94,8 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
         rowCount: undefined,
       };
       params.api.setDatasource(dataSource);
-      params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top');
     },
-    [page.filter, page.table.scrollOffset, queryClient, server],
+    [page.filter, queryClient, server],
   );
 
   const onPaginationChanged = useCallback(
@@ -119,7 +121,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     }
   };
 
-  const handleColumnMove = useCallback(() => {
+  const handleColumnChange = useCallback(() => {
     const { columnApi } = tableRef?.current || {};
     const columnsOrder = columnApi?.getAllGridColumns();
 
@@ -134,7 +136,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
         updatedColumns.push({
           ...columnInSettings,
           ...(!page.table.autoFit && {
-            width: column.getColDef().width,
+            width: column.getActualWidth(),
           }),
         });
       }
@@ -143,10 +145,12 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
     setTable({ columns: updatedColumns });
   }, [page.table.autoFit, page.table.columns, setTable, tableRef]);
 
-  const handleScroll = debounce((e: BodyScrollEvent) => {
+  const debouncedColumnChange = debounce(handleColumnChange, 200);
+
+  const handleScroll = (e: BodyScrollEvent) => {
     const scrollOffset = Number((e.top / page.table.rowHeight).toFixed(0));
     setTable({ scrollOffset });
-  }, 200);
+  };
 
   return (
     <Stack
@@ -173,18 +177,19 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
           columnDefs={columnDefs}
           defaultColDef={defaultColumnDefs}
           enableCellChangeFlash={false}
-          getRowId={(data) => data.data.uniqueId}
-          infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 10}
+          getRowId={(data) => data.data.id}
+          infiniteInitialRowCount={checkSongList.data?.totalRecordCount || 100}
           pagination={isPaginationEnabled}
           paginationAutoPageSize={isPaginationEnabled}
+          paginationPageSize={page.table.pagination.itemsPerPage || 100}
           rowBuffer={20}
           rowHeight={page.table.rowHeight || 40}
           rowModelType="infinite"
           rowSelection="multiple"
-          // onBodyScroll={handleScroll}
           onBodyScrollEnd={handleScroll}
           onCellContextMenu={(e) => console.log('context', e)}
-          onColumnMoved={handleColumnMove}
+          onColumnMoved={handleColumnChange}
+          onColumnResized={debouncedColumnChange}
           onGridReady={onGridReady}
           onGridSizeChanged={handleGridSizeChange}
           onPaginationChanged={onPaginationChanged}
@@ -192,6 +197,7 @@ export const SongListContent = ({ tableRef }: SongListContentProps) => {
       </VirtualGridAutoSizerContainer>
       <AnimatePresence
         presenceAffectsLayout
+        initial={false}
         mode="wait"
       >
         {page.display === ListDisplayType.TABLE_PAGINATED && (

src/renderer/features/songs/components/song-list-header.tsx

@@ -1,6 +1,6 @@
 import type { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Group } from '@mantine/core';
+import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
 import {
@@ -89,6 +89,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
   const setPage = useSetSongStore();
   const setFilter = useSetSongFilters();
   const setTable = useSetSongTable();
+  const setPagination = useSetSongTablePagination();
   const cq = useContainerQuery();
 
   const musicFoldersQuery = useMusicFolders();
@@ -137,8 +138,9 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
       tableRef.current?.api.setDatasource(dataSource);
       tableRef.current?.api.purgeInfiniteCache();
       tableRef.current?.api.ensureIndexVisible(0, 'top');
+      setPagination({ currentPage: 0 });
     },
-    [page.filter, server, tableRef],
+    [page.filter, server, setPagination, tableRef],
   );
 
   const handleSetSortBy = useCallback(
@@ -181,8 +183,6 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
     handleFilterChange(updatedFilters);
   }, [page.filter.sortOrder, handleFilterChange, setFilter]);
 
-  const setPagination = useSetSongTablePagination();
-
   const handleSetViewType = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
@@ -303,6 +303,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
                 component="div"
                 sx={{ cursor: 'default' }}
               >
+                <Stack>
                   <MultiSelect
                     clearable
                     data={SONG_TABLE_COLUMNS}
@@ -310,12 +311,6 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
                     width={300}
                     onChange={handleTableColumns}
                   />
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                closeMenuOnClick={false}
-                component="div"
-                sx={{ cursor: 'default' }}
-              >
                   <Group position="apart">
                     <Text>Auto Fit Columns</Text>
                     <Switch
@@ -323,6 +318,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
                       onChange={handleAutoFitColumns}
                     />
                   </Group>
+                </Stack>
               </DropdownMenu.Item>
             </DropdownMenu.Dropdown>
           </DropdownMenu>