Add sub post (after tournament start) as SendouForm

app/features/tournament-lfg/actions/to.$id.looking.server.ts

@@ -221,7 +221,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 				tournamentId,
 				userId: user.id,
 				isStayAsSub: true,
-				lfgNote: data.message,
+				lfgNote: data.message ?? undefined,
 			});
 
 			break;

app/features/tournament-lfg/routes/to.$id.looking.module.css

@@ -43,11 +43,6 @@
 	margin-inline: auto;
 }
 
-.subsTextarea {
-	width: 100%;
-	resize: vertical;
-}
-
 .subsSection {
 	display: grid;
 	grid-template-columns: max-content 1fr;

app/features/tournament-lfg/routes/to.$id.looking.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useFetcher, useLoaderData } from "react-router";
 import { Avatar } from "~/components/Avatar";
 import { SendouButton } from "~/components/elements/Button";
+import { SendouDialog } from "~/components/elements/Dialog";
 import {
 	SendouTab,
 	SendouTabList,
@@ -30,8 +31,10 @@ import {
 	loader,
 	type SubEntry,
 } from "../loaders/to.$id.looking.server";
-import { TOURNAMENT_LFG } from "../tournament-lfg-constants";
-import { joinQueueFormSchema } from "../tournament-lfg-schemas";
+import {
+	addSubFormSchema,
+	joinQueueFormSchema,
+} from "../tournament-lfg-schemas";
 
 export { action } from "../actions/to.$id.looking.server";
 export { loader };
@@ -255,44 +258,25 @@ function SubsView({
 	);
 }
 
-// xxx: use SendouForm
 function AddSubForm() {
-	const { t } = useTranslation(["tournament", "common"]);
-	const fetcher = useFetcher();
-	const [showForm, setShowForm] = React.useState(false);
-
-	if (!showForm) {
-		return (
-			<div className="stack items-end">
-				<SendouButton size="small" onPress={() => setShowForm(true)}>
-					{t("tournament:subs.addPost")}
-				</SendouButton>
-			</div>
-		);
-	}
+	const { t } = useTranslation(["tournament"]);
 
 	return (
-		<fetcher.Form method="post" className="stack sm">
-			<textarea
-				name="message"
-				maxLength={TOURNAMENT_LFG.PUBLIC_NOTE_MAX_LENGTH}
-				placeholder={t("tournament:subs.message.header")}
-				className={styles.subsTextarea}
-				rows={3}
-			/>
-			<div className="stack horizontal sm justify-end">
-				<SendouButton
-					size="small"
-					variant="minimal"
-					onPress={() => setShowForm(false)}
-				>
-					{t("common:actions.cancel")}
-				</SendouButton>
-				<SubmitButton _action="ADD_SUB" state={fetcher.state} size="small">
-					{t("common:actions.save")}
-				</SubmitButton>
-			</div>
-		</fetcher.Form>
+		<div className="stack items-end">
+			<SendouDialog
+				heading={t("tournament:subs.addPost")}
+				showCloseButton
+				trigger={
+					<SendouButton size="small">
+						{t("tournament:subs.addPost")}
+					</SendouButton>
+				}
+			>
+				<SendouForm schema={addSubFormSchema}>
+					{({ FormField }) => <FormField name="message" />}
+				</SendouForm>
+			</SendouDialog>
+		</div>
 	);
 }
 

app/features/tournament-lfg/tournament-lfg-constants.ts

@@ -1,3 +0,0 @@
-export const TOURNAMENT_LFG = {
-	PUBLIC_NOTE_MAX_LENGTH: 160,
-} as const;

app/features/tournament-lfg/tournament-lfg-schemas.ts

@@ -1,28 +1,32 @@
 import { z } from "zod";
 import { stringConstant, textAreaOptional, toggle } from "~/form/fields";
 import { _action, id } from "~/utils/zod";
-import { TOURNAMENT_LFG } from "./tournament-lfg-constants";
 
-const lfgNoteField = textAreaOptional({
+const noteFieldSchema = textAreaOptional({
 	label: "labels.note",
-	maxLength: TOURNAMENT_LFG.PUBLIC_NOTE_MAX_LENGTH,
+	maxLength: 160,
 });
 
-const lfgStayAsSubField = toggle({
+export const addSubFormSchema = z.object({
+	_action: stringConstant("ADD_SUB"),
+	message: noteFieldSchema,
+});
+
+const stayAsSubFieldSchema = toggle({
 	label: "labels.stayAsSub",
 	bottomText: "bottomTexts.stayAsSub",
 });
 
 export const joinQueueFormSchema = z.object({
 	_action: stringConstant("JOIN_QUEUE"),
-	note: lfgNoteField,
-	stayAsSub: lfgStayAsSubField,
+	note: noteFieldSchema,
+	stayAsSub: stayAsSubFieldSchema,
 });
 
 export const updateGroupFormSchema = z.object({
 	_action: stringConstant("UPDATE_GROUP"),
-	note: lfgNoteField,
-	stayAsSub: lfgStayAsSubField,
+	note: noteFieldSchema,
+	stayAsSub: stayAsSubFieldSchema,
 });
 
 export const lookingSchema = z.union([
@@ -51,10 +55,7 @@ export const lookingSchema = z.union([
 	z.object({
 		_action: _action("LEAVE_GROUP"),
 	}),
-	z.object({
-		_action: _action("ADD_SUB"),
-		message: z.string().max(TOURNAMENT_LFG.PUBLIC_NOTE_MAX_LENGTH).optional(),
-	}),
+	addSubFormSchema,
 	z.object({
 		_action: _action("DELETE_SUB"),
 		userId: id,