refactor: colocate frontend component files

src/app/routes/DocumentTitle/DocumentTitle.tsx

@@ -0,0 +1,100 @@
+import { useDocumentTitle } from "@mantine/hooks";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useMatch } from "react-router";
+import { useBankCard } from "@/entities/bank-card";
+import { useBond } from "@/entities/bond";
+import { useBrokerageAccounts } from "@/entities/brokerage-account";
+import { useStock } from "@/entities/stock";
+
+type DocumentTitleProps = { title: string };
+
+const DocumentTitle: FC<DocumentTitleProps> = (props) => {
+	const { t } = useTranslation();
+	useDocumentTitle(`${props.title} — ${t("appName")}`);
+	return null;
+};
+
+type AccountDocumentTitleProps = {
+	accountId: string;
+	section?: string;
+};
+
+const AccountDocumentTitle: FC<AccountDocumentTitleProps> = (props) => {
+	const { t } = useTranslation();
+	const { data } = useBrokerageAccounts();
+	const accountName =
+		props.accountId === "all"
+			? t("accounts.all")
+			: (data?.find((account) => account.id === props.accountId)?.name ??
+				t("account.title"));
+	const section =
+		props.section === "income"
+			? t("income.title")
+			: props.section === "operations"
+				? t("ledger.title")
+				: props.section === "events"
+					? t("events.title")
+					: t("portfolio.title");
+	return <DocumentTitle title={`${section} — ${accountName}`} />;
+};
+
+type InstrumentDocumentTitleProps = { identifier: string };
+
+const BondDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
+	const { t } = useTranslation();
+	const { data } = useBond(props.identifier);
+	return <DocumentTitle title={data?.name ?? t("bond.instrument")} />;
+};
+
+const StockDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
+	const { t } = useTranslation();
+	const { data } = useStock(props.identifier);
+	return <DocumentTitle title={data?.name ?? t("stock.share")} />;
+};
+
+const CardDocumentTitle: FC<InstrumentDocumentTitleProps> = (props) => {
+	const { t } = useTranslation();
+	const { data } = useBankCard(props.identifier);
+	return <DocumentTitle title={data?.name ?? t("bank.card")} />;
+};
+
+const ProtectedDocumentTitle: FC = () => {
+	const { t } = useTranslation();
+	const account = useMatch("/accounts/:accountId/:section?");
+	const bond = useMatch("/bonds/:bondId");
+	const stock = useMatch("/stocks/:stockId");
+	const card = useMatch("/cards/:cardId");
+	const cards = useMatch("/cards");
+	const bonds = useMatch("/bonds");
+	const stocks = useMatch("/stocks");
+	const settings = useMatch("/settings");
+	if (card) return <CardDocumentTitle identifier={card.params.cardId ?? ""} />;
+	if (account)
+		return (
+			<AccountDocumentTitle
+				accountId={account.params.accountId ?? ""}
+				section={account.params.section}
+			/>
+		);
+	if (bond) return <BondDocumentTitle identifier={bond.params.bondId ?? ""} />;
+	if (stock)
+		return <StockDocumentTitle identifier={stock.params.stockId ?? ""} />;
+	return (
+		<DocumentTitle
+			title={t(
+				cards
+					? "navigation.cards"
+					: bonds
+						? "navigation.bonds"
+						: stocks
+							? "navigation.stocks"
+							: settings
+								? "navigation.settings"
+								: "navigation.accounts",
+			)}
+		/>
+	);
+};
+
+export { ProtectedDocumentTitle };