Stage 11: polish, cross-cutting concerns & hardening

- 11.1 MainLayout health indicator: warning MessageBar when fail2ban offline
- 11.2 formatDate utility + TimezoneProvider + GET /api/setup/timezone
- 11.3 Responsive sidebar: auto-collapse <640px, media query listener
- 11.4 PageFeedback (PageLoading/PageError/PageEmpty), BanTable updated
- 11.5 prefers-reduced-motion: disable sidebar transition
- 11.6 WorldMap ARIA: role/tabIndex/aria-label/onKeyDown for countries
- 11.7 Health transition logging (fail2ban_came_online/went_offline)
- 11.8 Global handlers: Fail2BanConnectionError/ProtocolError -> 502
- 11.9 379 tests pass, 82% coverage, ruff+mypy+tsc+eslint clean
- Timezone endpoint: setup_service.get_timezone, 5 new tests

frontend/src/components/BanTable.tsx

@@ -19,9 +19,6 @@ import {
   DataGridHeader,
   DataGridHeaderCell,
   DataGridRow,
-  MessageBar,
-  MessageBarBody,
-  Spinner,
   Text,
   Tooltip,
   makeStyles,
@@ -29,6 +26,7 @@ import {
   type TableColumnDefinition,
   createTableColumn,
 } from "@fluentui/react-components";
+import { PageEmpty, PageError, PageLoading } from "./PageFeedback";
 import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
 import { useBans, type BanTableMode } from "../hooks/useBans";
 import type { AccessListItem, DashboardBanItem, TimeRange } from "../types/ban";
@@ -236,7 +234,7 @@ function buildAccessColumns(styles: ReturnType<typeof useStyles>): TableColumnDe
  */
 export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element {
   const styles = useStyles();
-  const { banItems, accessItems, total, page, setPage, loading, error } = useBans(
+  const { banItems, accessItems, total, page, setPage, loading, error, refresh } = useBans(
     mode,
     timeRange,
   );
@@ -248,22 +246,14 @@ export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element
   // Loading state
   // --------------------------------------------------------------------------
   if (loading) {
-    return (
-      <div className={styles.centred}>
-        <Spinner label="Loading…" />
-      </div>
-    );
+    return <PageLoading label="Loading…" />;
   }
 
   // --------------------------------------------------------------------------
   // Error state
   // --------------------------------------------------------------------------
   if (error) {
-    return (
-      <MessageBar intent="error">
-        <MessageBarBody>{error}</MessageBarBody>
-      </MessageBar>
-    );
+    return <PageError message={error} onRetry={refresh} />;
   }
 
   // --------------------------------------------------------------------------
@@ -272,11 +262,11 @@ export function BanTable({ mode, timeRange }: BanTableProps): React.JSX.Element
   const isEmpty = mode === "bans" ? banItems.length === 0 : accessItems.length === 0;
   if (isEmpty) {
     return (
-      <div className={styles.centred}>
-        <Text size={300} style={{ color: tokens.colorNeutralForeground3 }}>
-          No {mode === "bans" ? "bans" : "accesses"} recorded in the selected time window.
-        </Text>
-      </div>
+      <PageEmpty
+        message={`No ${
+          mode === "bans" ? "bans" : "accesses"
+        } recorded in the selected time window.`}
+      />
     );
   }