mokhtar
f1de80477a
the assigned sources list is a rac checkboxgroup and safe search uses the same drawn checkbox, extracted to a shared ui component with grouped and standalone modes enforced by a discriminated union. the label carries a 44px pointer-target floor on both axes, the focus ring is driven from rac's focus-visible state and guarded by a test, and toggleSource is gone because the group hands back the whole set.
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
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 } from "./sourceSet";
|
|
import Checkbox, { CheckboxGroup } from "@/ui/Checkbox";
|
|
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",
|
|
},
|
|
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)}>
|
|
{/* The section's own "Assigned sources" heading is the visible label; a
|
|
Label here would put the same words on screen twice. Ids cross the
|
|
React Aria boundary as strings, the same convention as Select. */}
|
|
<CheckboxGroup
|
|
aria-label="Assigned sources"
|
|
value={current.map(String)}
|
|
onChange={(values) => setSelected(values.map(Number).sort((a, b) => a - b))}
|
|
>
|
|
<ul {...stylex.props(styles.list)}>
|
|
{blocklists.map((blocklist) => (
|
|
<li key={blocklist.id}>
|
|
<Checkbox value={String(blocklist.id)}>{blocklist.name}</Checkbox>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CheckboxGroup>
|
|
<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>
|
|
);
|
|
}
|