feat: add pagination for saved videos (Issue #32)

Implements classic pagination for the Saved Videos page to handle
collections larger than 100 videos.

Backend changes:
- Add PaginatedVideosResponse schema with videos, total, limit, offset, has_more
- Update /videos/saved endpoint to return paginated response with total count

Frontend changes:
- Add PaginatedVideosResponse interface and update SavedVideosParams
- Update API client and useSavedVideos hook to handle pagination
- Add pagination controls with page numbers and prev/next buttons
- Reset to page 1 when filters change
- Update Settings page to handle paginated data
- Bump version to 1.8.0

Co-Authored-By: Claude <noreply@anthropic.com>

Author: thejudge22

backend/app/routers/videos.py

@@ -15,7 +15,7 @@
 from ..database import get_db
 from ..models.video import Video
 from ..models.channel import Channel
-from ..schemas.video import VideoResponse, VideoFromUrl, BulkVideoAction, ChannelFilterOption
+from ..schemas.video import VideoResponse, VideoFromUrl, BulkVideoAction, ChannelFilterOption, PaginatedVideosResponse
 from pydantic import BaseModel
 from ..schemas.mappers import map_video_to_response
 from ..services.youtube_utils import extract_video_id, get_video_url, get_rss_url, get_channel_url
@@ -80,7 +80,7 @@ async def list_inbox_videos(
     ]
 
 
-@router.get("/videos/saved", response_model=List[VideoResponse])
+@router.get("/videos/saved", response_model=PaginatedVideosResponse)
 async def list_saved_videos(
     channel_youtube_id: Optional[str] = Query(None, description="Filter by channel YouTube ID"),
     channel_id: Optional[str] = Query(None, description="Filter by channel ID (deprecated)"),
@@ -113,6 +113,13 @@ async def list_saved_videos(
         if channel_record:
             filter_channel_youtube_id = channel_record
 
+    # Get total count for pagination
+    count_query = select(func.count(Video.id)).where(Video.status == 'saved')
+    if filter_channel_youtube_id:
+        count_query = count_query.where(Video.channel_youtube_id == filter_channel_youtube_id)
+    count_result = await db.execute(count_query)
+    total = count_result.scalar_one()
+
     # Use VideoService to fetch saved videos
     # Validation is handled within VideoService.get_videos
     videos = await VideoService.get_videos(
@@ -125,7 +132,7 @@ async def list_saved_videos(
         order=order
     )
 
-    return [
+    video_responses = [
         VideoResponse(
             id=video.id,
             youtube_video_id=video.youtube_video_id,
@@ -146,6 +153,14 @@ async def list_saved_videos(
         for video in videos
     ]
 
+    return PaginatedVideosResponse(
+        videos=video_responses,
+        total=total,
+        limit=limit,
+        offset=offset,
+        has_more=(offset + len(video_responses)) < total
+    )
+
 
 @router.get("/videos/saved/channels", response_model=List[ChannelFilterOption])
 async def list_saved_video_channels(

backend/app/schemas/video.py

@@ -42,3 +42,12 @@ class VideoFromUrl(BaseModel):
 class BulkVideoAction(BaseModel):
     """Schema for bulk video actions."""
     video_ids: List[str]
+
+
+class PaginatedVideosResponse(BaseModel):
+    """Response schema for paginated video lists."""
+    videos: List[VideoResponse]
+    total: int
+    limit: int
+    offset: int
+    has_more: bool

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.01",
+  "version": "1.8.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/api/client.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import type { Channel, Video, SavedVideosParams, ChannelFilterOption } from '../types';
+import type { Channel, Video, SavedVideosParams, ChannelFilterOption, PaginatedVideosResponse } from '../types';
 
 // Default timeout for most requests
 const DEFAULT_TIMEOUT = 30000; // 30 seconds
@@ -90,7 +90,7 @@ export const videosApi = {
         ...(isShort !== undefined && isShort !== null ? { is_short: isShort } : {})
       }
     }),
-  getSaved: (params?: SavedVideosParams) => api.get<Video[]>('/videos/saved', { params }),
+  getSaved: (params?: SavedVideosParams) => api.get<PaginatedVideosResponse>('/videos/saved', { params }),
   getSavedChannels: () => api.get<ChannelFilterOption[]>('/videos/saved/channels'),
   getDiscarded: (days?: number) => api.get<Video[]>('/videos/discarded', { params: { days } }),
   save: (id: string) => api.post<Video>(`/videos/${id}/save`),

frontend/src/hooks/useVideos.ts

@@ -15,7 +15,7 @@ export function useInboxVideos(channelId?: string, shortsFilter?: ShortsFilter)
   });
 }
 
-export function useSavedVideos(params?: SavedVideosParams) {
+export function useSavedVideos(params: SavedVideosParams) {
   return useQuery({
     queryKey: ['videos', 'saved', params],
     queryFn: async () => {

frontend/src/pages/Saved.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { PlayIcon } from '@heroicons/react/24/outline';
+import { PlayIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { useSavedVideos, useDiscardVideo, useBulkDiscardVideos, useSavedVideoChannels } from '../hooks/useVideos';
 import { VideoList } from '../components/video/VideoList';
 import { RecentlyDeletedModal } from '../components/video/RecentlyDeletedModal';
@@ -28,6 +28,7 @@ export function Saved() {
   const [viewMode, setViewMode] = useLocalStorage<ViewMode>('saved-view-mode', 'large');
   const [isSelectionMode, setIsSelectionMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [currentPage, setCurrentPage] = useState(1);
 
   const params: SavedVideosParams = useMemo(() => {
     const p: SavedVideosParams = {};
@@ -40,10 +41,17 @@ export function Saved() {
     if (order) {
       p.order = order;
     }
+    p.limit = 100;
+    p.offset = (currentPage - 1) * 100;
     return p;
-  }, [channelYoutubeId, sortBy, order]);
+  }, [channelYoutubeId, sortBy, order, currentPage]);
 
-  const { data: videos, isLoading, error, refetch } = useSavedVideos(params);
+  // Reset to page 1 when filters change
+  const handleFilterChange = () => {
+    setCurrentPage(1);
+  };
+
+  const { data, isLoading, error, refetch } = useSavedVideos(params);
   const { data: channelOptions } = useSavedVideoChannels();
   const discardVideo = useDiscardVideo();
   const bulkDiscard = useBulkDiscardVideos();
@@ -107,9 +115,19 @@ export function Saved() {
     if (selected) {
       setSortBy(selected.value);
       setOrder(selected.order);
+      handleFilterChange();
     }
   };
 
+  const handleChannelChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setChannelYoutubeId(e.target.value);
+    handleFilterChange();
+  };
+
+  const videos = data?.videos ?? [];
+  const totalCount = data?.total ?? 0;
+  const totalPages = Math.ceil(totalCount / 100);
+
   if (isLoading) {
     return (
       <div className="flex items-center justify-center min-h-[400px]">
@@ -140,9 +158,9 @@ export function Saved() {
       <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-6 gap-4">
         <div>
           <h1 className="text-2xl font-bold text-white">Saved Videos</h1>
-          {videos && videos.length > 0 && (
+          {totalCount > 0 && (
             <p className="text-gray-400 text-sm mt-1">
-              {videos.length} video{videos.length !== 1 ? 's' : ''} saved
+              {totalCount} video{totalCount !== 1 ? 's' : ''} saved
             </p>
           )}
         </div>
@@ -173,7 +191,7 @@ export function Saved() {
             <select
               id="channel-filter"
               value={channelYoutubeId}
-              onChange={(e) => setChannelYoutubeId(e.target.value)}
+              onChange={handleChannelChange}
               className="w-full bg-gray-700 border border-gray-600 text-white rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             >
               <option value="">All Channels</option>
@@ -249,7 +267,7 @@ export function Saved() {
       )}
 
       <VideoList
-        videos={videos || []}
+        videos={videos}
         onDiscard={handleDiscard}
         showSaveButton={false}
         showDiscardButton={false}
@@ -260,6 +278,63 @@ export function Saved() {
         onToggleSelect={handleToggleSelect}
       />
 
+      {/* Pagination Controls */}
+      {totalPages > 1 && (
+        <div className="mt-6 flex items-center justify-center gap-2">
+          <Button
+            variant="secondary"
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className="px-3 py-2"
+          >
+            <ChevronLeftIcon className="w-5 h-5" />
+          </Button>
+
+          <div className="flex items-center gap-1">
+            {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => {
+              // Show first page, last page, current page, and pages around current
+              let pageNum: number;
+              if (totalPages <= 10) {
+                pageNum = i + 1;
+              } else if (currentPage <= 5) {
+                pageNum = i < 7 ? i + 1 : (i === 7 ? -1 : totalPages);
+              } else if (currentPage >= totalPages - 4) {
+                pageNum = i < 2 ? i + 1 : (i === 2 ? -1 : totalPages - 6 + i);
+              } else {
+                pageNum = i < 2 ? i + 1 : (i === 2 ? -1 : (i === 7 ? -1 : currentPage - 3 + i));
+              }
+
+              if (pageNum === -1) {
+                return <span key={i} className="px-2 text-gray-500">...</span>;
+              }
+
+              return (
+                <button
+                  key={i}
+                  onClick={() => setCurrentPage(pageNum)}
+                  className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    currentPage === pageNum
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  {pageNum}
+                </button>
+              );
+            })}
+          </div>
+
+          <Button
+            variant="secondary"
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+            className="px-3 py-2"
+          >
+            <ChevronRightIcon className="w-5 h-5" />
+          </Button>
+        </div>
+      )}
+
       <RecentlyDeletedModal
         isOpen={showRecentlyDeleted}
         onClose={() => setShowRecentlyDeleted(false)}

frontend/src/pages/Settings.tsx

@@ -7,14 +7,16 @@ import AppSettingsSection from '../components/settings/AppSettingsSection';
 import { BackupSettingsSection } from '../components/settings/BackupSettingsSection';
 
 export function Settings() {
-  const { data: videos } = useSavedVideos();
+  const { data: savedVideosData } = useSavedVideos({ limit: 100, offset: 0 });
   const { data: discardedVideos } = useDiscardedVideos();
   const bulkDiscard = useBulkDiscardVideos();
   const purgeAllDiscarded = usePurgeAllDiscarded();
   const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
   const [isPurgeConfirmModalOpen, setIsPurgeConfirmModalOpen] = useState(false);
   const [showDangerZone, setShowDangerZone] = useState(false);
 
+  const videos = savedVideosData?.videos ?? [];
+
   const handleRemoveAll = () => {
     if (videos && videos.length > 0) {
       const videoIds = videos.map((v) => v.id);

frontend/src/types/index.ts

@@ -40,6 +40,16 @@ export interface SavedVideosParams {
   channel_youtube_id?: string;
   sort_by?: 'published_at' | 'saved_at';
   order?: 'asc' | 'desc';
+  limit?: number;
+  offset?: number;
+}
+
+export interface PaginatedVideosResponse {
+  videos: Video[];
+  total: number;
+  limit: number;
+  offset: number;
+  has_more: boolean;
 }
 
 // Issue #8: Shorts filter type for inbox