Refactor frontend pages and config components into single-component files for Task 13

frontend/src/components/blocklist/PreviewDialog.tsx

@@ -0,0 +1,83 @@
+import { useCallback, useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  MessageBar,
+  MessageBarBody,
+  Spinner,
+  Text,
+} from "@fluentui/react-components";
+import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";
+
+interface PreviewDialogProps {
+  open: boolean;
+  source: BlocklistSource | null;
+  onClose: () => void;
+  fetchPreview: (id: number) => Promise<PreviewResponse>;
+}
+
+export function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
+  const [data, setData] = useState<PreviewResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleOpen = useCallback((): void => {
+    if (!source) return;
+    setData(null);
+    setError(null);
+    setLoading(true);
+    fetchPreview(source.id)
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((err: unknown) => {
+        setError(err instanceof Error ? err.message : "Failed to fetch preview");
+        setLoading(false);
+      });
+  }, [source, fetchPreview]);
+
+  return (
+    <Dialog open={open} onOpenChange={(_ev, data) => { if (!data.open) onClose(); }}>
+      <DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
+        <DialogBody>
+          <DialogTitle>Preview — {source?.name ?? ""}</DialogTitle>
+          <DialogContent>
+            {loading && (
+              <div style={{ textAlign: "center", padding: "16px" }}>
+                <Spinner label="Downloading…" />
+              </div>
+            )}
+            {error && (
+              <MessageBar intent="error">
+                <MessageBarBody>{error}</MessageBarBody>
+              </MessageBar>
+            )}
+            {data && (
+              <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                <Text size={300}>
+                  {data.valid_count} valid IPs / {data.skipped_count} skipped of {data.total_lines} total lines. Showing first {data.entries.length}:
+                </Text>
+                <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                  {data.entries.map((entry) => (
+                    <div key={entry}>{entry}</div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </DialogContent>
+          <DialogActions>
+            <Button appearance="secondary" onClick={onClose}>
+              Close
+            </Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+}