implement select first

src/components/Chatters.tsx

@@ -35,10 +35,18 @@ const ExportDialog: Component<{
 		<dialog ref={props.setRef}>
 			<article style={{ display: "grid", gap: "1rem" }}>
 				<div style={{ display: "flex" }}>
+					<button
+						class="secondary"
+						type="button"
+						onClick={() => props.ref()?.close()}
+					>
+						Close
+					</button>
 					<button
 						type="button"
 						onClick={copyClipboard}
 						disabled={clipboardStatus() !== "Initial"}
+						style={{ "margin-left": "auto" }}
 					>
 						<Show
 							when={clipboardStatus() === "Written"}
@@ -47,13 +55,6 @@ const ExportDialog: Component<{
 							Copied!
 						</Show>
 					</button>
-					<button
-						type="button"
-						onClick={() => props.ref()?.close()}
-						style={{ "margin-left": "auto" }}
-					>
-						Close
-					</button>
 				</div>
 				<pre
 					style={{ "max-height": "80vh", overflow: "auto", padding: "1rem" }}
@@ -88,13 +89,6 @@ const ChatttersView: Component<{
 		);
 	};
 
-	const oneHundredClick = () => {
-		setSelected([
-			...subs.slice(0, 100).map((sub) => sub.user_id),
-			...scrubs.slice(0, 100 - subs.length).map((scrub) => scrub.user_id),
-		]);
-	};
-
 	const [dialogRef, setDialogRef] = createSignal<HTMLDialogElement>();
 
 	const getJson = () =>
@@ -106,11 +100,23 @@ const ChatttersView: Component<{
 			4,
 		);
 
+	const [amountSelect, setAmountSelect] = createSignal<number>(100);
+	const amountClick = () => {
+		const amount = amountSelect();
+		setSelected([
+			...subs.slice(0, amount).map((sub) => sub.user_id),
+			...scrubs.slice(0, amount - subs.length).map((scrub) => scrub.user_id),
+		]);
+	};
+
 	return (
 		<>
 			<ExportDialog ref={dialogRef} setRef={setDialogRef} getJson={getJson} />
 			<div style={{ display: "grid", gap: "1rem" }}>
 				<div style={{ display: "flex", gap: "1rem" }}>
+					<button type="button" onClick={() => setSelected([])}>
+						Select None
+					</button>
 					<button
 						type="button"
 						onClick={() =>
@@ -119,13 +125,15 @@ const ChatttersView: Component<{
 					>
 						Select All
 					</button>
-					<button type="button" onClick={oneHundredClick}>
-						Select First 100
-					</button>
-					<button type="button" onClick={() => setSelected([])}>
-						Select None
-					</button>
 					<button
+						type="button"
+						onClick={() => setSelected(subs.map((sub) => sub.user_id))}
+					>
+						Select All Subs
+					</button>
+
+					<button
+						class="contrast"
 						type="button"
 						onClick={() => dialogRef()?.showModal()}
 						style={{ "margin-left": "auto" }}
@@ -133,7 +141,29 @@ const ChatttersView: Component<{
 						Export to JSON
 					</button>
 				</div>
+				<div>
+					<span>Select first</span>&nbsp;
 					<input
+						style={{ width: "unset" }}
+						placeholder="Select first..."
+						inputmode="numeric"
+						pattern="[0-9]*"
+						value={amountSelect()}
+						onInput={(e) => {
+							const number = Number.parseInt(
+								e.currentTarget.value.toLocaleLowerCase(),
+							);
+							if (!Number.isNaN(number)) {
+								setAmountSelect(number);
+							}
+						}}
+					/>
+					<button type="button" onClick={amountClick}>
+						Select
+					</button>
+				</div>
+				<input
+					type="search"
 					placeholder="Search"
 					onInput={(e) => setSearch(e.currentTarget.value.toLocaleLowerCase())}
 				/>