refactor: colocate frontend component files

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -0,0 +1,70 @@
+import { Button, Stack, Text, Title } from "@mantine/core";
+import { useDocumentTitle } from "@mantine/hooks";
+import type { FC, PropsWithChildren } from "react";
+import { Component } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation } from "react-router";
+import { useAuth } from "@/features/auth";
+
+type BoundaryProps = PropsWithChildren<{
+	routeKey: string;
+	authenticated: boolean;
+}>;
+
+type RouteErrorFallbackProps = {
+	authenticated: boolean;
+};
+
+type State = { hasError: boolean };
+
+class Boundary extends Component<BoundaryProps, State> {
+	state: State = { hasError: false };
+
+	static getDerivedStateFromError(): State {
+		return { hasError: true };
+	}
+
+	componentDidUpdate(previousProps: BoundaryProps) {
+		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
+			this.setState({ hasError: false });
+		}
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return <RouteErrorFallback authenticated={this.props.authenticated} />;
+		}
+		return this.props.children;
+	}
+}
+
+const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
+	const { authenticated } = props;
+	const { t } = useTranslation();
+	useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
+	const to = authenticated ? "/accounts" : "/login";
+
+	return (
+		<Stack>
+			<Title order={1}>{t("routeError.title")}</Title>
+			<Text>{t("routeError.text")}</Text>
+			<Button component={Link} to={to}>
+				{t("routeError.action")}
+			</Button>
+		</Stack>
+	);
+};
+
+const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
+	const { pathname, search } = useLocation();
+	const { user } = useAuth();
+
+	return (
+		<Boundary authenticated={Boolean(user)} routeKey={`${pathname}${search}`}>
+			{children}
+		</Boundary>
+	);
+};
+
+export { RouteErrorBoundary };