Pagination (but according to agent, not done)

frontend/src/components/stats/SessionList.tsx

@@ -1,15 +1,29 @@
 import React, { useState } from 'react';
 import { useSessions } from '../../hooks/useSleepSession';
+import { useSettings } from '../../hooks/useSettings';
+import { Pagination } from './Pagination';
 import { Edit2, Check, X, Trash2 } from 'lucide-react';
 import type { SleepSessionRead } from '../../types';
 import { formatDateTime, toLocalDatetimeInputValue, getDurationMinutes, formatMinutes } from '../../utils/time';
 
 export function SessionList() {
   const { sessions, isLoading, updateSession, deleteSession, isDeleting } = useSessions();
+  const { settings } = useSettings();
+  const sessionsPerPage = settings.sessionsPerPage;
+
+  const [currentPage, setCurrentPage] = useState(1);
   const [editingId, setEditingId] = useState<number | null>(null);
   const [editStart, setEditStart] = useState<string>('');
   const [editEnd, setEditEnd] = useState<string>('');
 
+  const totalPages = Math.ceil(sessions.length / sessionsPerPage);
+  const clampedPage = Math.max(1, Math.min(currentPage, totalPages || 1));
+
+  const paginatedSessions = sessions.slice(
+    (clampedPage - 1) * sessionsPerPage,
+    clampedPage * sessionsPerPage
+  );
+
   if (isLoading) return <div className="text-center p-4">Loading sessions...</div>;
   if (!sessions.length) return <div className="text-center p-4 text-gray-500">No sessions recorded.</div>;
 
@@ -52,10 +66,10 @@ export function SessionList() {
   };
 
   return (
-    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
+    <div className="session-list bg-white p-4 rounded-xl shadow-sm border border-gray-200">
       <h3 className="text-lg font-semibold mb-4 text-gray-800">Sleep Sessions</h3>
       <div className="space-y-2">
-        {sessions.map((s) => (
+        {paginatedSessions.map((s) => (
           <div key={s.id} className="border-b border-gray-100 last:border-0 py-3 sm:py-2">
             {editingId === s.id ? (
               <div className="flex flex-col space-y-3 py-1">
@@ -140,6 +154,13 @@ export function SessionList() {
           </div>
         ))}
       </div>
+      {sessions.length > sessionsPerPage && (
+        <Pagination 
+          currentPage={clampedPage} 
+          totalPages={totalPages} 
+          onPageChange={setCurrentPage} 
+        />
+      )}
     </div>
   );
 }