refactor: colocate frontend component files

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -0,0 +1,86 @@
+import { Stack } from "@mantine/core";
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useMatch } from "react-router";
+import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
+import { AccountScopeSwitch } from "./AccountScopeSwitch";
+import { BondBreadcrumbs } from "./BondBreadcrumbs";
+import { BreadcrumbTrail } from "./BreadcrumbTrail";
+import { CardBreadcrumbs } from "./CardBreadcrumbs";
+import { StockBreadcrumbs } from "./StockBreadcrumbs";
+
+const AppBreadcrumbs: FC = () => {
+	const { t } = useTranslation();
+	const operations = useMatch({
+		path: "/accounts/:accountId/operations",
+		end: true,
+	});
+	const events = useMatch({ path: "/accounts/:accountId/events", end: true });
+	const income = useMatch({ path: "/accounts/:accountId/income", end: true });
+	const account = useMatch({ path: "/accounts/:accountId", end: true });
+	const card = useMatch("/cards/:cardId");
+	const cards = useMatch("/cards");
+	const accounts = useMatch({ path: "/accounts", end: true });
+	const settings = useMatch({ path: "/settings", end: true });
+
+	const stock = useMatch({ path: "/stocks/:stockId", end: true });
+	const bond = useMatch({ path: "/bonds/:bondId", end: true });
+	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
+	if (stock)
+		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
+	if (operations)
+		return (
+			<Stack gap={0} mb="md">
+				<AccountBreadcrumbs
+					accountId={operations.params.accountId ?? ""}
+					section="operations"
+				/>
+				<AccountScopeSwitch
+					accountId={operations.params.accountId ?? ""}
+					section="operations"
+				/>
+			</Stack>
+		);
+	if (events)
+		return (
+			<Stack gap={0} mb="md">
+				<AccountBreadcrumbs
+					accountId={events.params.accountId ?? ""}
+					section="events"
+				/>
+				<AccountScopeSwitch
+					accountId={events.params.accountId ?? ""}
+					section="events"
+				/>
+			</Stack>
+		);
+	if (income)
+		return (
+			<Stack gap={0} mb="md">
+				<AccountBreadcrumbs
+					accountId={income.params.accountId ?? ""}
+					section="income"
+				/>
+				<AccountScopeSwitch
+					accountId={income.params.accountId ?? ""}
+					section="income"
+				/>
+			</Stack>
+		);
+	if (account)
+		return (
+			<Stack gap={0} mb="md">
+				<AccountBreadcrumbs accountId={account.params.accountId ?? ""} />
+				<AccountScopeSwitch accountId={account.params.accountId ?? ""} />
+			</Stack>
+		);
+	if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
+	if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
+	if (accounts)
+		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
+	if (settings)
+		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
+	return null;
+};
+
+export { AppBreadcrumbs };