milestone 32: task-shaped configuration, file mode as a rendering, config status api

2026-08-22 22:42:50 +02:00
parent 025edbb093
commit 7e0df5fd94
89 changed files with 6101 additions and 3750 deletions
@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
+import { groupSourcesPutMutation, groupSourcesQuery } from "@/lib/queries";
+import type { Blocklist } from "@/lib/types";
+import { sameSet, toggleSource } from "./sourceSet";
+import InlineError from "@/lib/InlineError";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
+
+interface Props {
+	groupId: number;
+	blocklists: Blocklist[];
+}
+
+const styles = stylex.create({
+	note: {
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		color: colors.textMuted,
+	},
+	root: {
+		marginTop: "0.75rem",
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.25rem",
+	},
+	checkboxLabel: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	buttonRow: {
+		marginTop: "0.75rem",
+		display: "flex",
+		gap: "0.5rem",
+	},
+});
+
+export default function GroupSourcesEditor({ groupId, blocklists }: Props) {
+	const queryClient = useQueryClient();
+	const sources = useQuery(groupSourcesQuery(groupId));
+	const mutation = useMutation(groupSourcesPutMutation(queryClient));
+	const [selected, setSelected] = useState<number[] | null>(null);
+
+	if (sources.isPending) {
+		return (
+			<p role="status" {...stylex.props(styles.note)}>
+				Loading sources…
+			</p>
+		);
+	}
+	if (sources.isError) return <InlineError error={sources.error} />;
+
+	if (blocklists.length === 0) {
+		return <p {...stylex.props(styles.note)}>No blocklist sources exist yet — add them on the Sources tab.</p>;
+	}
+
+	const current = selected ?? sources.data;
+	const dirty = !sameSet(current, sources.data);
+
+	return (
+		<div {...stylex.props(styles.root)}>
+			<ul {...stylex.props(styles.list)}>
+				{blocklists.map((blocklist) => (
+					<li key={blocklist.id}>
+						<label {...stylex.props(styles.checkboxLabel)}>
+							<input
+								type="checkbox"
+								checked={current.includes(blocklist.id)}
+								onChange={() => setSelected(toggleSource(current, blocklist.id))}
+								{...stylex.props(shared.focusRing)}
+							/>
+							{blocklist.name}
+						</label>
+					</li>
+				))}
+			</ul>
+			<InlineError error={mutation.error} />
+			<div {...stylex.props(styles.buttonRow)}>
+				<button
+					type="button"
+					disabled={!dirty || mutation.isPending}
+					onClick={() =>
+						mutation.mutate({ id: groupId, sourceIds: current }, { onSuccess: () => setSelected(null) })
+					}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
+				>
+					Save sources
+				</button>
+				{dirty && (
+					<button
+						type="button"
+						onClick={() => setSelected(null)}
+						{...stylex.props(shared.button, shared.focusRing)}
+					>
+						Discard
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}