Implement pagination for gallery creatives: Updated the gallery loading function to return total count and entries, modified the API endpoint to support pagination, and enhanced the frontend to display pagination controls. Adjusted styles for pagination buttons and information display.

backend/app/gallery.py

@@ -56,8 +56,8 @@ def _save_to_r2(username: str, entries: list[dict[str, Any]]) -> bool:
     return r2_put_object(_r2_gallery_key(username), body)
 
 
-def load_entries(username: str, limit: int = DEFAULT_LIMIT, offset: int = 0) -> list[dict[str, Any]]:
-    """Load gallery entries for user, newest first. Uses R2 and local; prefers whichever has more entries (never write on read)."""
+def load_entries(username: str, limit: int = DEFAULT_LIMIT, offset: int = 0) -> tuple[list[dict[str, Any]], int]:
+    """Load gallery entries for user, newest first. Returns (page_slice, total_count). Uses R2 and local; prefers whichever has more entries (never write on read)."""
     entries: list[dict[str, Any]] = []
     path = _user_path(username)
     from_r2 = _load_from_r2(username)
@@ -82,7 +82,9 @@ def load_entries(username: str, limit: int = DEFAULT_LIMIT, offset: int = 0) ->
     else:
         entries = local_list
     entries = sorted(entries, key=lambda e: e.get("created_at", ""), reverse=True)
-    return entries[offset : offset + min(limit, MAX_LIMIT)]
+    total = len(entries)
+    page = entries[offset : offset + min(limit, MAX_LIMIT)]
+    return (page, total)
 
 
 def append_entry(

backend/app/main.py

@@ -470,13 +470,13 @@ async def generate_ads_stream(
 
 @app.get("/api/gallery/creatives")
 def gallery_list(
-    limit: int = 100,
+    limit: int = 24,
     offset: int = 0,
     _user: dict = Depends(get_current_user),
 ):
-    """List current user's gallery creatives with fresh presigned URLs. Newest first."""
+    """List current user's gallery creatives with fresh presigned URLs. Newest first. Paginated."""
     username = (_user or {}).get("username", "")
-    entries = gallery_load_entries(username, limit=limit, offset=offset)
+    entries, total = gallery_load_entries(username, limit=limit, offset=offset)
     out = []
     for e in entries:
         image_url = r2_get_presigned_url(e.get("r2_key", "")) if e.get("r2_key") else None
@@ -488,7 +488,7 @@ def gallery_list(
             "created_at": e.get("created_at", ""),
             "image_url": image_url,
         })
-    return {"creatives": out}
+    return {"creatives": out, "total": total}
 
 
 @app.delete("/api/gallery/creatives/{entry_id}")

frontend/src/Gallery.jsx

@@ -5,6 +5,7 @@ import ImageLightbox from './ImageLightbox'
 
 const API_BASE = '/api'
 const AUTH_TOKEN_KEY = 'amalfa_auth_token'
+const GALLERY_PAGE_SIZE = 24
 
 /** Use backend proxy for image URLs to avoid CORS when loading from R2. */
 function proxyImageUrl(url) {
@@ -19,18 +20,24 @@ function authHeaders() {
 
 export default function Gallery({ onLogout }) {
   const [creatives, setCreatives] = useState([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [selected, setSelected] = useState([])
   const [downloading, setDownloading] = useState(false)
   const [deletingId, setDeletingId] = useState(null)
   const [lightboxImage, setLightboxImage] = useState(null)
+  const [refresh, setRefresh] = useState(0)
+
+  const totalPages = Math.max(1, Math.ceil(total / GALLERY_PAGE_SIZE))
 
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setError(null)
-    fetch(`${API_BASE}/gallery/creatives?limit=200`, { headers: authHeaders() })
+    const offset = page * GALLERY_PAGE_SIZE
+    fetch(`${API_BASE}/gallery/creatives?limit=${GALLERY_PAGE_SIZE}&offset=${offset}`, { headers: authHeaders() })
       .then((r) => {
         if (r.status === 401) {
           localStorage.removeItem(AUTH_TOKEN_KEY)
@@ -41,12 +48,18 @@ export default function Gallery({ onLogout }) {
         return r.json()
       })
       .then((data) => {
-        if (!cancelled && data) setCreatives(data.creatives || [])
+        if (!cancelled && data) {
+          const list = data.creatives || []
+          const totalCount = data.total ?? 0
+          setCreatives(list)
+          setTotal(totalCount)
+          if (list.length === 0 && totalCount > 0 && page > 0) setPage(0)
+        }
       })
       .catch((e) => { if (!cancelled) setError(e.message) })
       .finally(() => { if (!cancelled) setLoading(false) })
     return () => { cancelled = true }
-  }, [onLogout])
+  }, [onLogout, page, refresh])
 
   function toggleSelect(id) {
     setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]))
@@ -67,6 +80,7 @@ export default function Gallery({ onLogout }) {
       if (!res.ok) throw new Error('Delete failed')
       setCreatives((prev) => prev.filter((c) => c.id !== id))
       setSelected((prev) => prev.filter((x) => x !== id))
+      setRefresh((r) => r + 1)
     } catch (_) {
       setError('Failed to delete')
     } finally {
@@ -129,6 +143,7 @@ export default function Gallery({ onLogout }) {
         if (res.ok) setCreatives((prev) => prev.filter((c) => c.id !== id))
       } catch (_) {}
     }
+    setRefresh((r) => r + 1)
   }
 
   function formatDate(iso) {
@@ -251,6 +266,32 @@ export default function Gallery({ onLogout }) {
               </div>
             ))}
           </div>
+          {totalPages > 1 && (
+            <div className="gallery-pagination">
+              <button
+                type="button"
+                className="btn-gallery-page"
+                disabled={page === 0 || loading}
+                onClick={() => { setPage((p) => Math.max(0, p - 1)); setSelected([]); }}
+                aria-label="Previous page"
+              >
+                Previous
+              </button>
+              <span className="gallery-pagination-info">
+                Page {page + 1} of {totalPages}
+                {total > 0 && ` (${total} total)`}
+              </span>
+              <button
+                type="button"
+                className="btn-gallery-page"
+                disabled={page >= totalPages - 1 || loading}
+                onClick={() => { setPage((p) => Math.min(totalPages - 1, p + 1)); setSelected([]); }}
+                aria-label="Next page"
+              >
+                Next
+              </button>
+            </div>
+          )}
         </>
       )}
     </section>

frontend/src/index.css

@@ -1330,6 +1330,40 @@ a:hover {
   cursor: not-allowed;
 }
 
+.gallery-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.gallery-pagination-info {
+  font-size: 0.9rem;
+  color: var(--text-soft);
+}
+
+.btn-gallery-page {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface-soft);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.btn-gallery-page:hover:not(:disabled) {
+  background: var(--border-soft);
+}
+
+.btn-gallery-page:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));