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

frontend/src/components/blocklist/BlocklistSourcesSection.tsx

@@ -1,14 +1,6 @@
 import { useCallback, useState } from "react";
 import {
   Button,
-  Dialog,
-  DialogActions,
-  DialogBody,
-  DialogContent,
-  DialogSurface,
-  DialogTitle,
-  Field,
-  Input,
   MessageBar,
   MessageBarBody,
   Spinner,
@@ -32,8 +24,10 @@ import {
   PlayRegular,
 } from "@fluentui/react-icons";
 import { useBlocklists } from "../../hooks/useBlocklist";
-import type { BlocklistSource, PreviewResponse } from "../../types/blocklist";
+import type { BlocklistSource } from "../../types/blocklist";
 import { useBlocklistStyles } from "./blocklistStyles";
+import { SourceFormDialog } from "./SourceFormDialog";
+import { PreviewDialog } from "./PreviewDialog";
 
 interface SourceFormValues {
   name: string;
@@ -41,162 +35,6 @@ interface SourceFormValues {
   enabled: boolean;
 }
 
-interface SourceFormDialogProps {
-  open: boolean;
-  mode: "add" | "edit";
-  initial: SourceFormValues;
-  saving: boolean;
-  error: string | null;
-  onClose: () => void;
-  onSubmit: (values: SourceFormValues) => void;
-}
-
-function SourceFormDialog({
-  open,
-  mode,
-  initial,
-  saving,
-  error,
-  onClose,
-  onSubmit,
-}: SourceFormDialogProps): React.JSX.Element {
-  const styles = useBlocklistStyles();
-  const [values, setValues] = useState<SourceFormValues>(initial);
-
-  const handleOpen = useCallback((): void => {
-    setValues(initial);
-  }, [initial]);
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(_ev, data) => {
-        if (!data.open) onClose();
-      }}
-    >
-      <DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
-        <DialogBody>
-          <DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
-          <DialogContent>
-            <div className={styles.dialogForm}>
-              {error && (
-                <MessageBar intent="error">
-                  <MessageBarBody>{error}</MessageBarBody>
-                </MessageBar>
-              )}
-              <Field label="Name" required>
-                <Input
-                  value={values.name}
-                  onChange={(_ev, d) => { setValues((p) => ({ ...p, name: d.value })); }}
-                  placeholder="e.g. Blocklist.de — All"
-                />
-              </Field>
-              <Field label="URL" required>
-                <Input
-                  value={values.url}
-                  onChange={(_ev, d) => { setValues((p) => ({ ...p, url: d.value })); }}
-                  placeholder="https://lists.blocklist.de/lists/all.txt"
-                />
-              </Field>
-              <Switch
-                label="Enabled"
-                checked={values.enabled}
-                onChange={(_ev, d) => { setValues((p) => ({ ...p, enabled: d.checked })); }}
-              />
-            </div>
-          </DialogContent>
-          <DialogActions>
-            <Button appearance="secondary" onClick={onClose} disabled={saving}>
-              Cancel
-            </Button>
-            <Button
-              appearance="primary"
-              disabled={saving || !values.name.trim() || !values.url.trim()}
-              onClick={() => { onSubmit(values); }}
-            >
-              {saving ? <Spinner size="tiny" /> : mode === "add" ? "Add" : "Save"}
-            </Button>
-          </DialogActions>
-        </DialogBody>
-      </DialogSurface>
-    </Dialog>
-  );
-}
-
-interface PreviewDialogProps {
-  open: boolean;
-  source: BlocklistSource | null;
-  onClose: () => void;
-  fetchPreview: (id: number) => Promise<PreviewResponse>;
-}
-
-function PreviewDialog({ open, source, onClose, fetchPreview }: PreviewDialogProps): React.JSX.Element {
-  const styles = useBlocklistStyles();
-  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, d) => {
-        if (!d.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 className={styles.previewList}>
-                  {data.entries.map((entry) => (
-                    <div key={entry}>{entry}</div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </DialogContent>
-          <DialogActions>
-            <Button appearance="secondary" onClick={onClose}>
-              Close
-            </Button>
-          </DialogActions>
-        </DialogBody>
-      </DialogSurface>
-    </Dialog>
-  );
-}
-
 interface SourcesSectionProps {
   onRunImport: () => void;
   runImportRunning: boolean;

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>
+  );
+}

frontend/src/components/blocklist/SourceFormDialog.tsx

@@ -0,0 +1,102 @@
+import { useCallback, useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  Field,
+  Input,
+  MessageBar,
+  MessageBarBody,
+  Switch,
+} from "@fluentui/react-components";
+
+interface SourceFormValues {
+  name: string;
+  url: string;
+  enabled: boolean;
+}
+
+interface SourceFormDialogProps {
+  open: boolean;
+  mode: "add" | "edit";
+  initial: SourceFormValues;
+  saving: boolean;
+  error: string | null;
+  onClose: () => void;
+  onSubmit: (values: SourceFormValues) => void;
+}
+
+export function SourceFormDialog({
+  open,
+  mode,
+  initial,
+  saving,
+  error,
+  onClose,
+  onSubmit,
+}: SourceFormDialogProps): React.JSX.Element {
+  const [values, setValues] = useState<SourceFormValues>(initial);
+
+  const handleOpen = useCallback((): void => {
+    setValues(initial);
+  }, [initial]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(_ev, data) => {
+        if (!data.open) onClose();
+      }}
+    >
+      <DialogSurface onAnimationEnd={open ? handleOpen : undefined}>
+        <DialogBody>
+          <DialogTitle>{mode === "add" ? "Add Blocklist Source" : "Edit Blocklist Source"}</DialogTitle>
+          <DialogContent>
+            <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+              {error && (
+                <MessageBar intent="error">
+                  <MessageBarBody>{error}</MessageBarBody>
+                </MessageBar>
+              )}
+              <Field label="Name" required>
+                <Input
+                  value={values.name}
+                  onChange={(_ev, d) => { setValues((p) => ({ ...p, name: d.value })); }}
+                  placeholder="e.g. Blocklist.de — All"
+                />
+              </Field>
+              <Field label="URL" required>
+                <Input
+                  value={values.url}
+                  onChange={(_ev, d) => { setValues((p) => ({ ...p, url: d.value })); }}
+                  placeholder="https://lists.blocklist.de/lists/all.txt"
+                />
+              </Field>
+              <Switch
+                label="Enabled"
+                checked={values.enabled}
+                onChange={(_ev, d) => { setValues((p) => ({ ...p, enabled: d.checked })); }}
+              />
+            </div>
+          </DialogContent>
+          <DialogActions>
+            <Button appearance="secondary" onClick={onClose} disabled={saving}>
+              Cancel
+            </Button>
+            <Button
+              appearance="primary"
+              disabled={saving || !values.name.trim() || !values.url.trim()}
+              onClick={() => { onSubmit(values); }}
+            >
+              {saving ? "Saving…" : mode === "add" ? "Add" : "Save"}
+            </Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+}