milestone 23 s3: convert features/groups/GroupsPage.tsx to stylex

web/src/features/groups/GroupsPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import * as stylex from "@stylexjs/stylex";
 import {
 	blocklistsQuery,
 	groupCreateMutation,
@@ -10,13 +11,85 @@ import {
 import type { Blocklist, Group } from "@/lib/types";
 import GroupSourcesEditor from "./GroupSourcesEditor";
 import InlineError from "@/lib/InlineError";
-import { focusRing, primaryButtonClass, smallButtonClass, smallInputClass } from "@/ui/classes";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
 import { READ_ONLY_HINT, useReadOnlyConfig } from "@/features/settings/authority";
 
 const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";
 
-const groupButtonClass = `${smallButtonClass} disabled:opacity-50`;
+const styles = stylex.create({
+	heading: {
+		fontSize: "1.5rem",
+		lineHeight: "2rem",
+		fontWeight: 600,
+	},
+	createForm: {
+		marginTop: "1rem",
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	fieldLabel: {
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 500,
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "1rem",
+		marginTop: "1.5rem",
+	},
+	row: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		padding: "1rem",
+	},
+	rowControls: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.75rem",
+	},
+	renameForm: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	name: {
+		fontWeight: 500,
+	},
+	checkboxLabel: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	actions: {
+		marginLeft: "auto",
+		display: "inline-flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "0.5rem",
+	},
+	groupButton: {
+		opacity: { default: 1, ":disabled": 0.5 },
+	},
+	destructive: {
+		color: colors.danger,
+	},
+	lockNote: {
+		marginTop: "0.5rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
+});
 
 export default function GroupsPage() {
 	const { data: groups } = useSuspenseQuery(groupsQuery());
@@ -28,9 +101,9 @@ export default function GroupsPage() {
 
 	return (
 		<section>
-			<h1 className="text-2xl font-semibold">Groups</h1>
+			<h1 {...stylex.props(styles.heading)}>Groups</h1>
 			<form
-				className="mt-4 flex flex-wrap items-center gap-2"
+				{...stylex.props(styles.createForm)}
 				onSubmit={(event) => {
 					event.preventDefault();
 					const name = newName.trim();
@@ -38,7 +111,7 @@ export default function GroupsPage() {
 					createMutation.mutate({ name }, { onSuccess: () => setNewName("") });
 				}}
 			>
-				<label className="text-sm font-medium" htmlFor="new-group-name">
+				<label {...stylex.props(styles.fieldLabel)} htmlFor="new-group-name">
 					New group
 				</label>
 				<input
@@ -47,19 +120,19 @@ export default function GroupsPage() {
 					value={newName}
 					onChange={(event) => setNewName(event.target.value)}
 					disabled={readOnly}
-					className={smallInputClass}
+					{...stylex.props(shared.smallInput, shared.focusRing)}
 				/>
 				<button
 					type="submit"
 					disabled={createMutation.isPending || readOnly}
 					title={readOnly ? READ_ONLY_HINT : undefined}
-					className={primaryButtonClass}
+					{...stylex.props(shared.primaryButton, shared.focusRing)}
 				>
 					Create
 				</button>
 			</form>
 			<InlineError error={createMutation.error} />
-			<ul className="mt-6 space-y-4">
+			<ul {...stylex.props(styles.list)}>
 				{groups.map((group) => (
 					<GroupRow key={group.id} group={group} blocklists={blocklists} />
 				))}
@@ -81,11 +154,11 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 	const lockNote = isDefault ? DEFAULT_GROUP_NOTE : readOnly ? READ_ONLY_HINT : undefined;
 
 	return (
-		<li className="rounded border border-zinc-200 p-4 dark:border-zinc-700">
+		<li {...stylex.props(styles.row)}>
-			<div className="flex flex-wrap items-center gap-3">
+			<div {...stylex.props(styles.rowControls)}>
 				{renaming ? (
 					<form
-						className="flex items-center gap-2"
+						{...stylex.props(styles.renameForm)}
 						onSubmit={(event) => {
 							event.preventDefault();
 							const trimmed = name.trim();
@@ -101,14 +174,14 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 							aria-label={`New name for ${group.name}`}
 							value={name}
 							onChange={(event) => setName(event.target.value)}
-							className={smallInputClass}
+							{...stylex.props(shared.smallInput, shared.focusRing)}
 							autoFocus
 						/>
 						<button
 							type="submit"
 							disabled={updateMutation.isPending || readOnly}
 							title={readOnly ? READ_ONLY_HINT : undefined}
-							className={groupButtonClass}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 						>
 							Save
 						</button>
@@ -118,21 +191,21 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 								setName(group.name);
 								setRenaming(false);
 							}}
-							className={groupButtonClass}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 						>
 							Cancel
 						</button>
 					</form>
 				) : (
-					<span className="font-medium">{group.name}</span>
+					<span {...stylex.props(styles.name)}>{group.name}</span>
 				)}
-				<label className="inline-flex items-center gap-2 text-sm">
+				<label {...stylex.props(styles.checkboxLabel)}>
 					<input
 						type="checkbox"
 						checked={group.safe_search}
 						disabled={updateMutation.isPending || readOnly}
 						title={readOnly ? READ_ONLY_HINT : undefined}
-						className={focusRing}
+						{...stylex.props(shared.focusRing)}
 						onChange={(event) =>
 							updateMutation.mutate({
 								id: group.id,
@@ -142,12 +215,12 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 					/>
 					Safe search
 				</label>
-				<span className="ml-auto inline-flex flex-wrap items-center gap-2">
+				<span {...stylex.props(styles.actions)}>
 					<button
 						type="button"
 						aria-expanded={expanded}
 						onClick={() => setExpanded((open) => !open)}
-						className={groupButtonClass}
+						{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 					>
 						Sources
 					</button>
@@ -160,7 +233,7 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 								setName(group.name);
 								setRenaming(true);
 							}}
-							className={groupButtonClass}
+							{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
 						>
 							Rename
 						</button>
@@ -173,11 +246,20 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 									setConfirming(false);
 									deleteMutation.mutate(group.id);
 								}}
-								className={`${groupButtonClass} text-red-700 dark:text-red-400`}
+								{...stylex.props(
+									shared.smallButton,
+									styles.groupButton,
+									styles.destructive,
+									shared.focusRing,
+								)}
 							>
 								Confirm delete
 							</button>
-							<button type="button" onClick={() => setConfirming(false)} className={groupButtonClass}>
+							<button
+								type="button"
+								onClick={() => setConfirming(false)}
+								{...stylex.props(shared.smallButton, styles.groupButton, shared.focusRing)}
+							>
 								Cancel
 							</button>
 						</>
@@ -187,14 +269,19 @@ function GroupRow({ group, blocklists }: { group: Group; blocklists: Blocklist[]
 							disabled={isDefault || readOnly}
 							title={lockNote}
 							onClick={() => setConfirming(true)}
-							className={`${groupButtonClass} text-red-700 dark:text-red-400`}
+							{...stylex.props(
+								shared.smallButton,
+								styles.groupButton,
+								styles.destructive,
+								shared.focusRing,
+							)}
 						>
 							Delete
 						</button>
 					)}
 				</span>
 			</div>
-			{isDefault && <p className="mt-2 text-xs text-zinc-500">{DEFAULT_GROUP_NOTE}</p>}
+			{isDefault && <p {...stylex.props(styles.lockNote)}>{DEFAULT_GROUP_NOTE}</p>}
 			<InlineError error={updateMutation.error ?? deleteMutation.error} />
 			{expanded && <GroupSourcesEditor groupId={group.id} blocklists={blocklists} />}
 		</li>