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

src/lib/api/services/extractions.ts

@@ -22,6 +22,10 @@ export interface CreateExtractionResponse {
 
 export interface GetExtractionsResponse {
   extractions: ExtractionInfo[]
+  total: number
+  page: number
+  limit: number
+  total_pages: number
 }
 
 export type ExtractionSortField = 'title' | 'status' | 'service' | 'created_at' | 'updated_at'
@@ -33,6 +37,8 @@ export interface GetExtractionsParams {
   sort_by?: ExtractionSortField
   sort_order?: ExtractionSortOrder
   status_filter?: ExtractionStatus
+  page?: number
+  limit?: number
 }
 
 export class ExtractionsService {
@@ -59,7 +65,7 @@ export class ExtractionsService {
   /**
    * Get all extractions
    */
-  async getAllExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
+  async getAllExtractions(params?: GetExtractionsParams): Promise<GetExtractionsResponse> {
     const searchParams = new URLSearchParams()
     
     if (params?.search) {
@@ -74,18 +80,24 @@ export class ExtractionsService {
     if (params?.status_filter) {
       searchParams.append('status_filter', params.status_filter)
     }
+    if (params?.page) {
+      searchParams.append('page', params.page.toString())
+    }
+    if (params?.limit) {
+      searchParams.append('limit', params.limit.toString())
+    }
     
     const queryString = searchParams.toString()
     const url = queryString ? `/api/v1/extractions/?${queryString}` : '/api/v1/extractions/'
     
     const response = await apiClient.get<GetExtractionsResponse>(url)
-    return response.extractions
+    return response
   }
 
   /**
    * Get user's extractions
    */
-  async getUserExtractions(params?: GetExtractionsParams): Promise<ExtractionInfo[]> {
+  async getUserExtractions(params?: GetExtractionsParams): Promise<GetExtractionsResponse> {
     const searchParams = new URLSearchParams()
     
     if (params?.search) {
@@ -100,12 +112,18 @@ export class ExtractionsService {
     if (params?.status_filter) {
       searchParams.append('status_filter', params.status_filter)
     }
+    if (params?.page) {
+      searchParams.append('page', params.page.toString())
+    }
+    if (params?.limit) {
+      searchParams.append('limit', params.limit.toString())
+    }
     
     const queryString = searchParams.toString()
     const url = queryString ? `/api/v1/extractions/user?${queryString}` : '/api/v1/extractions/user'
     
     const response = await apiClient.get<GetExtractionsResponse>(url)
-    return response.extractions
+    return response
   }
 }
 

src/lib/api/services/playlists.ts

@@ -45,16 +45,24 @@ export interface GetPlaylistsParams {
   search?: string
   sort_by?: PlaylistSortField
   sort_order?: SortOrder
+  page?: number
   limit?: number
-  offset?: number
   favorites_only?: boolean
 }
 
+export interface GetPlaylistsResponse {
+  playlists: Playlist[]
+  total: number
+  page: number
+  limit: number
+  total_pages: number
+}
+
 export class PlaylistsService {
   /**
    * Get all playlists with optional filtering, searching, and sorting
    */
-  async getPlaylists(params?: GetPlaylistsParams): Promise<Playlist[]> {
+  async getPlaylists(params?: GetPlaylistsParams): Promise<GetPlaylistsResponse> {
     const searchParams = new URLSearchParams()
 
     // Handle parameters
@@ -67,12 +75,12 @@ export class PlaylistsService {
     if (params?.sort_order) {
       searchParams.append('sort_order', params.sort_order)
     }
+    if (params?.page) {
+      searchParams.append('page', params.page.toString())
+    }
     if (params?.limit) {
       searchParams.append('limit', params.limit.toString())
     }
-    if (params?.offset) {
-      searchParams.append('offset', params.offset.toString())
-    }
     if (params?.favorites_only) {
       searchParams.append('favorites_only', 'true')
     }
@@ -80,7 +88,7 @@ export class PlaylistsService {
     const url = searchParams.toString()
       ? `/api/v1/playlists/?${searchParams.toString()}`
       : '/api/v1/playlists/'
-    return apiClient.get<Playlist[]>(url)
+    return apiClient.get<GetPlaylistsResponse>(url)
   }
 
   /**