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/PageFeedback.tsx

@@ -0,0 +1,139 @@
+/**
+ * Reusable page-level feedback components.
+ *
+ * Three shared building blocks for consistent data-loading UI across all pages:
+ *
+ * - {@link PageLoading}  — Centred `Spinner` for full-region loading states.
+ * - {@link PageError}    — `MessageBar` with an error message and a retry button.
+ * - {@link PageEmpty}    — Centred neutral message for zero-result states.
+ */
+
+import {
+  Button,
+  MessageBar,
+  MessageBarActions,
+  MessageBarBody,
+  MessageBarTitle,
+  Spinner,
+  Text,
+  makeStyles,
+  tokens,
+} from "@fluentui/react-components";
+import { ArrowClockwiseRegular } from "@fluentui/react-icons";
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const useStyles = makeStyles({
+  centred: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "120px",
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingVerticalL,
+  },
+  emptyText: {
+    color: tokens.colorNeutralForeground3,
+    textAlign: "center",
+  },
+});
+
+// ---------------------------------------------------------------------------
+// PageLoading
+// ---------------------------------------------------------------------------
+
+export interface PageLoadingProps {
+  /** Short description shown next to the spinner. */
+  label?: string;
+}
+
+/**
+ * Full-region loading indicator using a Fluent UI `Spinner`.
+ *
+ * @example
+ * ```tsx
+ * if (loading) return <PageLoading label="Loading jails…" />;
+ * ```
+ */
+export function PageLoading({ label = "Loading…" }: PageLoadingProps): React.JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.centred} aria-live="polite" aria-label={label}>
+      <Spinner label={label} />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PageError
+// ---------------------------------------------------------------------------
+
+export interface PageErrorProps {
+  /** Error message shown in the `MessageBar`. */
+  message: string;
+  /** Optional callback invoked when the user clicks "Retry". */
+  onRetry?: () => void;
+}
+
+/**
+ * Error state `MessageBar` with an optional retry button.
+ *
+ * @example
+ * ```tsx
+ * if (error) return <PageError message={error} onRetry={refresh} />;
+ * ```
+ */
+export function PageError({ message, onRetry }: PageErrorProps): React.JSX.Element {
+  return (
+    <MessageBar intent="error" role="alert">
+      <MessageBarBody>
+        <MessageBarTitle>Error</MessageBarTitle>
+        {message}
+      </MessageBarBody>
+      {onRetry != null && (
+        <MessageBarActions>
+          <Button
+            appearance="transparent"
+            size="small"
+            icon={<ArrowClockwiseRegular />}
+            onClick={onRetry}
+            aria-label="Retry"
+          >
+            Retry
+          </Button>
+        </MessageBarActions>
+      )}
+    </MessageBar>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PageEmpty
+// ---------------------------------------------------------------------------
+
+export interface PageEmptyProps {
+  /** Message displayed to the user, e.g. "No bans found." */
+  message: string;
+}
+
+/**
+ * Centred empty-state message for tables or lists with zero results.
+ *
+ * @example
+ * ```tsx
+ * if (items.length === 0) return <PageEmpty message="No bans in this period." />;
+ * ```
+ */
+export function PageEmpty({ message }: PageEmptyProps): React.JSX.Element {
+  const styles = useStyles();
+  return (
+    <div className={styles.centred} role="status" aria-label={message}>
+      <Text size={200} className={styles.emptyText}>
+        {message}
+      </Text>
+    </div>
+  );
+}