feat: add pagination to album songs view

Large albums (300+ tracks) freeze the browser because all songs are loaded
at once with perPage={0}. Add pagination with configurable page sizes
(100/250/500) and fetch all songs on-demand for play/shuffle actions.

Closes #2539, closes #1186, closes #4397

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/album/AlbumActions.jsx

@@ -5,6 +5,8 @@ import {
   Button,
   sanitizeListRestProps,
   TopToolbar,
+  useDataProvider,
+  useNotify,
   useRecordContext,
   useTranslate,
 } from 'react-admin'
@@ -52,30 +54,74 @@ const AlbumActions = ({
 }) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
+  const dataProvider = useDataProvider()
+  const notify = useNotify()
   const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
 
+  const getAllSongsAndDispatch = React.useCallback(
+    (action) => {
+      if (ids?.length === record.songCount) {
+        return dispatch(action(data, ids))
+      }
+      dataProvider
+        .getList('song', {
+          pagination: { page: 1, perPage: 0 },
+          sort: { field: 'album', order: 'ASC' },
+          filter: { album_id: record.id },
+        })
+        .then((res) => {
+          const allData = res.data.reduce(
+            (acc, curr) => ({ ...acc, [curr.id]: curr }),
+            {},
+          )
+          dispatch(action(allData))
+        })
+        .catch(() => {
+          notify('ra.page.error', 'warning')
+        })
+    },
+    [dataProvider, dispatch, record, data, ids, notify],
+  )
+
   const handlePlay = React.useCallback(() => {
-    dispatch(playTracks(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(playTracks)
+  }, [getAllSongsAndDispatch])
 
   const handlePlayNext = React.useCallback(() => {
-    dispatch(playNext(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(playNext)
+  }, [getAllSongsAndDispatch])
 
   const handlePlayLater = React.useCallback(() => {
-    dispatch(addTracks(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(addTracks)
+  }, [getAllSongsAndDispatch])
 
   const handleShuffle = React.useCallback(() => {
-    dispatch(shuffleTracks(data, ids))
-  }, [dispatch, data, ids])
+    getAllSongsAndDispatch(shuffleTracks)
+  }, [getAllSongsAndDispatch])
 
   const handleAddToPlaylist = React.useCallback(() => {
-    const selectedIds = ids.filter((id) => !data[id].missing)
-    dispatch(openAddToPlaylist({ selectedIds }))
-  }, [dispatch, data, ids])
+    if (ids?.length === record.songCount) {
+      const selectedIds = ids.filter((id) => !data[id].missing)
+      return dispatch(openAddToPlaylist({ selectedIds }))
+    }
+    dataProvider
+      .getList('song', {
+        pagination: { page: 1, perPage: 0 },
+        sort: { field: 'album', order: 'ASC' },
+        filter: { album_id: record.id },
+      })
+      .then((res) => {
+        const selectedIds = res.data
+          .filter((s) => !s.missing)
+          .map((s) => s.id)
+        dispatch(openAddToPlaylist({ selectedIds }))
+      })
+      .catch(() => {
+        notify('ra.page.error', 'warning')
+      })
+  }, [dataProvider, dispatch, record, data, ids, notify])
 
   const handleShare = React.useCallback(() => {
     dispatch(openShareMenu([record.id], 'album', record.name))

ui/src/album/AlbumShow.jsx

@@ -4,6 +4,7 @@ import {
   ShowContextProvider,
   useShowContext,
   useShowController,
+  Pagination,
   Title as RaTitle,
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
@@ -40,8 +41,7 @@ const AlbumShowLayout = (props) => {
           reference="song"
           target="album_id"
           sort={{ field: 'album', order: 'ASC' }}
-          perPage={0}
-          pagination={null}
+          perPage={50}
         >
           <AlbumSongs
             resource={'song'}
@@ -50,6 +50,7 @@ const AlbumShowLayout = (props) => {
             actions={
               <AlbumActions className={classes.albumActions} record={record} />
             }
+            pagination={<Pagination rowsPerPageOptions={[25, 50, 100]} />}
           />
         </ReferenceManyField>
       )}

ui/src/album/AlbumSongs.jsx

@@ -89,6 +89,7 @@ const useStyles = makeStyles(
 
 const AlbumSongs = (props) => {
   const { data, ids } = props
+  const listContext = useListContext(props)
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const classes = useStyles({ isDesktop })
   const dispatch = useDispatch()
@@ -210,6 +211,8 @@ const AlbumSongs = (props) => {
         </Card>
       </div>
       <ExpandInfoDialog content={<SongInfo />} />
+      {props.pagination &&
+        React.cloneElement(props.pagination, listContext)}
     </>
   )
 }
@@ -217,7 +220,17 @@ const AlbumSongs = (props) => {
 const SanitizedAlbumSongs = (props) => {
   removeAlbumCommentsFromSongs(props)
   const { loaded, loading, total, ...rest } = useListContext(props)
-  return <>{loaded && <AlbumSongs {...rest} actions={props.actions} />}</>
+  return (
+    <>
+      {loaded && (
+        <AlbumSongs
+          {...rest}
+          actions={props.actions}
+          pagination={props.pagination}
+        />
+      )}
+    </>
+  )
 }
 
 export default SanitizedAlbumSongs