feat(frontend): add confirmation before force log out

Foxnouns.Frontend/app/routes/settings._index/route.tsx

@@ -1,6 +1,13 @@
 import { Button, Form, InputGroup, Table } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { Form as RemixForm, useActionData, useFetcher, useRouteLoaderData } from "@remix-run/react";
+import {
+	Form as RemixForm,
+	Link,
+	Outlet,
+	useActionData,
+	useFetcher,
+	useRouteLoaderData,
+} from "@remix-run/react";
 import { loader as settingsLoader } from "../settings/route";
 import { loader as rootLoader } from "../../root";
 import { DateTime } from "luxon";
@@ -43,12 +50,12 @@ export default function SettingsIndex() {
 	const actionData = useActionData<typeof action>();
 	const { meta } = useRouteLoaderData<typeof rootLoader>("root")!;
 	const { t } = useTranslation();
-	const fetcher = useFetcher();
 
 	const createdAt = idTimestamp(user.id);
 
 	return (
 		<>
+			<Outlet />
 			<div className="row">
 				<div className="col-md">
 					<RemixForm method="POST">
@@ -81,11 +88,10 @@ export default function SettingsIndex() {
 			<div>
 				<h4>{t("settings.general.log-out-everywhere")}</h4>
 				<p>{t("settings.general.log-out-everywhere-hint")}</p>
-				<fetcher.Form method="POST" action="/settings/force-log-out">
-					<Button type="submit" variant="danger">
-						{t("settings.general.force-log-out-button")}
-					</Button>
-				</fetcher.Form>
+				{/* @ts-expect-error as=Link */}
+				<Button as={Link} variant="danger" to="/settings/force-log-out">
+					{t("settings.general.force-log-out-button")}
+				</Button>
 			</div>
 			<h4 className="mt-2">{t("settings.general.table-header")}</h4>
 			<Table striped bordered hover>