feat: implement pagination for extractions and playlists with updated API responses

src/pages/ExtractionsPage.tsx

@@ -1,4 +1,5 @@
 import { AppLayout } from '@/components/AppLayout'
+import { AppPagination } from '@/components/AppPagination'
 import { CreateExtractionDialog } from '@/components/extractions/CreateExtractionDialog'
 import { ExtractionsHeader } from '@/components/extractions/ExtractionsHeader'
 import {
@@ -28,6 +29,12 @@ export function ExtractionsPage() {
   const [sortOrder, setSortOrder] = useState<ExtractionSortOrder>('desc')
   const [statusFilter, setStatusFilter] = useState<ExtractionStatus | 'all'>('all')
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [totalCount, setTotalCount] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+
   // Create extraction dialog state
   const [showCreateDialog, setShowCreateDialog] = useState(false)
   const [createLoading, setCreateLoading] = useState(false)
@@ -48,13 +55,17 @@ export function ExtractionsPage() {
     try {
       setLoading(true)
       setError(null)
-      const data = await extractionsService.getAllExtractions({
+      const response = await extractionsService.getAllExtractions({
         search: debouncedSearchQuery.trim() || undefined,
         sort_by: sortBy,
         sort_order: sortOrder,
         status_filter: statusFilter !== 'all' ? statusFilter : undefined,
+        page: currentPage,
+        limit: pageSize,
       })
-      setExtractions(data)
+      setExtractions(response.extractions)
+      setTotalPages(response.total_pages)
+      setTotalCount(response.total)
     } catch (err) {
       const errorMessage =
         err instanceof Error ? err.message : 'Failed to fetch extractions'
@@ -67,7 +78,24 @@ export function ExtractionsPage() {
 
   useEffect(() => {
     fetchExtractions()
-  }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter])
+  }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, currentPage, pageSize])
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    if (currentPage !== 1) {
+      setCurrentPage(1)
+    }
+  }, [debouncedSearchQuery, sortBy, sortOrder, statusFilter, pageSize])
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size)
+    setCurrentPage(1) // Reset to first page when changing page size
+  }
+
 
   const handleCreateExtraction = async () => {
     if (!url.trim()) {
@@ -113,7 +141,20 @@ export function ExtractionsPage() {
       return <ExtractionsEmpty searchQuery={searchQuery} statusFilter={statusFilter} />
     }
 
-    return <ExtractionsTable extractions={extractions} />
+    return (
+      <div className="space-y-4">
+        <ExtractionsTable extractions={extractions} />
+        <AppPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={pageSize}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          itemName="extractions"
+        />
+      </div>
+    )
   }
 
   return (
@@ -136,7 +177,7 @@ export function ExtractionsPage() {
           onCreateClick={() => setShowCreateDialog(true)}
           loading={loading}
           error={error}
-          extractionCount={extractions.length}
+          extractionCount={totalCount}
         />
 
         <CreateExtractionDialog

src/pages/PlaylistsPage.tsx

@@ -1,4 +1,5 @@
 import { AppLayout } from '@/components/AppLayout'
+import { AppPagination } from '@/components/AppPagination'
 import { CreatePlaylistDialog } from '@/components/playlists/CreatePlaylistDialog'
 import { PlaylistsHeader } from '@/components/playlists/PlaylistsHeader'
 import {
@@ -30,6 +31,12 @@ export function PlaylistsPage() {
   const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
   const [showFavoritesOnly, setShowFavoritesOnly] = useState(false)
 
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [totalCount, setTotalCount] = useState(0)
+  const [pageSize, setPageSize] = useState(10)
+
   // Create playlist dialog state
   const [showCreateDialog, setShowCreateDialog] = useState(false)
   const [createLoading, setCreateLoading] = useState(false)
@@ -54,13 +61,17 @@ export function PlaylistsPage() {
     try {
       setLoading(true)
       setError(null)
-      const playlistData = await playlistsService.getPlaylists({
+      const response = await playlistsService.getPlaylists({
         search: debouncedSearchQuery.trim() || undefined,
         sort_by: sortBy,
         sort_order: sortOrder,
         favorites_only: showFavoritesOnly,
+        page: currentPage,
+        limit: pageSize,
       })
-      setPlaylists(playlistData)
+      setPlaylists(response.playlists)
+      setTotalPages(response.total_pages)
+      setTotalCount(response.total)
     } catch (err) {
       const errorMessage =
         err instanceof Error ? err.message : 'Failed to fetch playlists'
@@ -73,7 +84,23 @@ export function PlaylistsPage() {
 
   useEffect(() => {
     fetchPlaylists()
-  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly])
+  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly, currentPage, pageSize])
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    if (currentPage !== 1) {
+      setCurrentPage(1)
+    }
+  }, [debouncedSearchQuery, sortBy, sortOrder, showFavoritesOnly, pageSize])
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size)
+    setCurrentPage(1) // Reset to first page when changing page size
+  }
 
   const handleCreatePlaylist = async () => {
     if (!newPlaylist.name.trim()) {
@@ -176,12 +203,23 @@ export function PlaylistsPage() {
     }
 
     return (
-      <PlaylistTable
-        playlists={playlists}
-        onEdit={handleEditPlaylist}
-        onSetCurrent={handleSetCurrent}
-        onFavoriteToggle={handleFavoriteToggle}
-      />
+      <div className="space-y-4">
+        <PlaylistTable
+          playlists={playlists}
+          onEdit={handleEditPlaylist}
+          onSetCurrent={handleSetCurrent}
+          onFavoriteToggle={handleFavoriteToggle}
+        />
+        <AppPagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalCount={totalCount}
+          pageSize={pageSize}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          itemName="playlists"
+        />
+      </div>
     )
   }
 
@@ -203,7 +241,7 @@ export function PlaylistsPage() {
           onCreateClick={() => setShowCreateDialog(true)}
           loading={loading}
           error={error}
-          playlistCount={playlists.length}
+          playlistCount={totalCount}
           showFavoritesOnly={showFavoritesOnly}
           onFavoritesToggle={setShowFavoritesOnly}
         />