diff --git a/app/library/songs/page.tsx b/app/library/songs/page.tsx
index 2607e7d..c455988 100644
--- a/app/library/songs/page.tsx
+++ b/app/library/songs/page.tsx
@@ -10,13 +10,15 @@ import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Search, Play, Plus, User, Disc } from 'lucide-react';
+import { Search, Play, Plus, User, Disc, ChevronLeft, ChevronRight } from 'lucide-react';
import Loading from '@/app/components/loading';
import { getNavidromeAPI } from '@/lib/navidrome';
type SortOption = 'title' | 'artist' | 'album' | 'year' | 'duration' | 'track';
type SortDirection = 'asc' | 'desc';
+const ITEMS_PER_PAGE = 50;
+
export default function SongsPage() {
const { getAllSongs } = useNavidrome();
const { playTrack, addToQueue, currentTrack } = useAudioPlayer();
@@ -26,6 +28,7 @@ export default function SongsPage() {
const [searchQuery, setSearchQuery] = useState('');
const [sortBy, setSortBy] = useState
('title');
const [sortDirection, setSortDirection] = useState('asc');
+ const [currentPage, setCurrentPage] = useState(1);
const api = getNavidromeAPI();
useEffect(() => {
@@ -100,6 +103,7 @@ export default function SongsPage() {
});
setFilteredSongs(filtered);
+ setCurrentPage(1); // Reset to first page when filters change
}, [songs, searchQuery, sortBy, sortDirection]);
const handlePlayClick = (song: Song) => {
if (!api) {
@@ -154,6 +158,24 @@ export default function SongsPage() {
return currentTrack?.id === song.id;
};
+ // Pagination calculations
+ const totalPages = Math.ceil(filteredSongs.length / ITEMS_PER_PAGE);
+ const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+ const endIndex = startIndex + ITEMS_PER_PAGE;
+ const paginatedSongs = filteredSongs.slice(startIndex, endIndex);
+
+ const goToNextPage = () => {
+ if (currentPage < totalPages) {
+ setCurrentPage(currentPage + 1);
+ }
+ };
+
+ const goToPreviousPage = () => {
+ if (currentPage > 1) {
+ setCurrentPage(currentPage - 1);
+ }
+ };
+
if (loading) {
return ;
}
@@ -165,7 +187,8 @@ export default function SongsPage() {
Songs
- {filteredSongs.length} of {songs.length} songs
+ Showing {startIndex + 1}-{Math.min(endIndex, filteredSongs.length)} of {filteredSongs.length} songs
+ {searchQuery && ` (filtered from ${songs.length} total)`}
@@ -216,7 +239,7 @@ export default function SongsPage() {
) : (
- {filteredSongs.map((song, index) => (
+ {paginatedSongs.map((song, index) => (
) : (
<>
-
{index + 1}
+
{startIndex + index + 1}
>
)}
@@ -298,6 +321,35 @@ export default function SongsPage() {
)}
+
+ {/* Pagination Controls */}
+ {filteredSongs.length > ITEMS_PER_PAGE && (
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
+
+
+ )}