T-16: Centralize PAGE_SIZE frontend constants

- Add BAN_PAGE_SIZE (100) and HISTORY_PAGE_SIZE (50) to frontend/src/utils/constants.ts
- Replace local PAGE_SIZE definitions in useBans.ts and HistoryPage.tsx with imports
- Eliminates risk of pagination constants silently diverging from backend defaults
- Single source of truth for all pagination sizes

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/hooks/useBans.ts

@@ -8,11 +8,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchBans } from "../api/dashboard";
 import { handleFetchError } from "../utils/fetchError";
+import { BAN_PAGE_SIZE } from "../utils/constants";
 import type { DashboardBanItem, TimeRange, BanOriginFilter } from "../types/ban";
 
-/** Items per page for the ban table. */
-const PAGE_SIZE = 100;
-
 /** Return value shape for {@link useBans}. */
 export interface UseBansResult {
   /** Ban items for the current page. */
@@ -67,7 +65,7 @@ export function useBans(
     setError(null);
 
     try {
-      const data = await fetchBans(timeRange, page, PAGE_SIZE, origin, source, controller.signal);
+      const data = await fetchBans(timeRange, page, BAN_PAGE_SIZE, origin, source, controller.signal);
       if (controller.signal.aborted) return;
       setBanItems(data.items);
       setTotal(data.total);

frontend/src/pages/HistoryPage.tsx

@@ -32,6 +32,7 @@ import {
 import { DashboardFilterBar } from "../components/DashboardFilterBar";
 import { useHistory } from "../hooks/useHistory";
 import { IpDetailView } from "./history/IpDetailView";
+import { HISTORY_PAGE_SIZE } from "../utils/constants";
 import type { HistoryBanItem, TimeRange } from "../types/history";
 import type { BanOriginFilter } from "../types/ban";
 
@@ -42,8 +43,6 @@ import type { BanOriginFilter } from "../types/ban";
 /** Ban counts at or above this threshold are highlighted. */
 const HIGH_BAN_THRESHOLD = 5;
 
-const PAGE_SIZE = 50;
-
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------
@@ -206,7 +205,7 @@ export function HistoryPage(): React.JSX.Element {
   const { items, total, page: currentPage, loading, error, setPage: setCurrentPage, refresh } =
     useHistory(
       page,
-      PAGE_SIZE,
+      HISTORY_PAGE_SIZE,
       range,
       originFilter !== "all" ? originFilter : undefined,
       jailFilter.trim() || undefined,
@@ -228,7 +227,7 @@ export function HistoryPage(): React.JSX.Element {
     setPage(1);
   }, [range, originFilter, jailFilter, ipFilter]);
 
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const totalPages = Math.max(1, Math.ceil(total / HISTORY_PAGE_SIZE));
 
   // If an IP is selected, show the detail view.
   if (selectedIp !== null) {

frontend/src/utils/constants.ts

@@ -15,3 +15,9 @@ export const TIME_RANGE_LABELS: Record<TimeRange, string> = {
   "30d": "Last 30 days",
   "365d": "Last 365 days",
 } as const;
+
+/** Items per page for the ban dashboard table. */
+export const BAN_PAGE_SIZE = 100 as const;
+
+/** Items per page for the history table. */
+export const HISTORY_PAGE_SIZE = 50 as const;