feat: implement pull-to-refresh functionality across ClientLibraryPage, ClientSeriesPage, and ClientHomePage for improved user experience

src/app/libraries/[libraryId]/ClientLibraryPage.tsx

@@ -5,6 +5,8 @@ import { PaginatedSeriesGrid } from "@/components/library/PaginatedSeriesGrid";
 import { RefreshButton } from "@/components/library/RefreshButton";
 import { LibraryHeader } from "@/components/library/LibraryHeader";
 import { ErrorMessage } from "@/components/ui/ErrorMessage";
+import { PullToRefreshIndicator } from "@/components/common/PullToRefreshIndicator";
+import { usePullToRefresh } from "@/hooks/usePullToRefresh";
 import { useTranslate } from "@/hooks/useTranslate";
 import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
 import type { LibraryResponse } from "@/types/library";
@@ -155,6 +157,13 @@ export function ClientLibraryPage({
     }
   };
 
+  const pullToRefresh = usePullToRefresh({
+    onRefresh: async () => {
+      await handleRefresh(libraryId);
+    },
+    enabled: !loading && !error && !!library && !!series,
+  });
+
   if (loading) {
     return (
       <>
@@ -230,6 +239,13 @@ export function ClientLibraryPage({
 
   return (
     <>
+      <PullToRefreshIndicator
+        isPulling={pullToRefresh.isPulling}
+        isRefreshing={pullToRefresh.isRefreshing}
+        progress={pullToRefresh.progress}
+        canRefresh={pullToRefresh.canRefresh}
+        isHiding={pullToRefresh.isHiding}
+      />
       <LibraryHeader
         library={library}
         seriesCount={series.totalElements}

src/app/series/[seriesId]/ClientSeriesPage.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from "react";
 import { PaginatedBookGrid } from "@/components/series/PaginatedBookGrid";
 import { SeriesHeader } from "@/components/series/SeriesHeader";
 import { ErrorMessage } from "@/components/ui/ErrorMessage";
+import { PullToRefreshIndicator } from "@/components/common/PullToRefreshIndicator";
+import { usePullToRefresh } from "@/hooks/usePullToRefresh";
 import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
 import type { LibraryResponse } from "@/types/library";
 import type { KomgaBook, KomgaSeries } from "@/types/komga";
@@ -137,6 +139,13 @@ export function ClientSeriesPage({
     }
   };
 
+  const pullToRefresh = usePullToRefresh({
+    onRefresh: async () => {
+      await handleRefresh(seriesId);
+    },
+    enabled: !loading && !error && !!series && !!books,
+  });
+
   if (loading) {
     return (
       <div className="container py-8 space-y-8">
@@ -172,17 +181,26 @@ export function ClientSeriesPage({
   }
 
   return (
-    <div className="container">
-      <SeriesHeader series={series} refreshSeries={handleRefresh} />
-      <PaginatedBookGrid
-        books={books.content || []}
-        currentPage={currentPage}
-        totalPages={books.totalPages}
-        totalElements={books.totalElements}
-        defaultShowOnlyUnread={preferences.showOnlyUnread}
-        showOnlyUnread={unreadOnly}
+    <>
+      <PullToRefreshIndicator
+        isPulling={pullToRefresh.isPulling}
+        isRefreshing={pullToRefresh.isRefreshing}
+        progress={pullToRefresh.progress}
+        canRefresh={pullToRefresh.canRefresh}
+        isHiding={pullToRefresh.isHiding}
       />
-    </div>
+      <div className="container">
+        <SeriesHeader series={series} refreshSeries={handleRefresh} />
+        <PaginatedBookGrid
+          books={books.content || []}
+          currentPage={currentPage}
+          totalPages={books.totalPages}
+          totalElements={books.totalElements}
+          defaultShowOnlyUnread={preferences.showOnlyUnread}
+          showOnlyUnread={unreadOnly}
+        />
+      </div>
+    </>
   );
 }