refactor: share instrument search presentation

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.test.tsx

@@ -54,8 +54,13 @@ describe("AppBreadcrumbs", () => {
 		expect(screen.queryByRole("link")).not.toBeInTheDocument();
 	});
 
-	it("links to the account hierarchy from operations", () => {
-		renderBreadcrumbs("/accounts/account-1/operations", [
+	it.each([
+		["operations", "Операции"],
+		["OPERATIONS", "Операции"],
+		["events", "Будущие события"],
+		["income", "Пассивный доход"],
+	])("links to the account hierarchy from %s", (section, title) => {
+		renderBreadcrumbs(`/accounts/account-1/${section}`, [
 			{ id: "account-1", name: "ИИС" },
 		]);
 
@@ -66,7 +71,7 @@ describe("AppBreadcrumbs", () => {
 			"href",
 			"/accounts/account-1",
 		);
-		expect(screen.getByText("Операции")).toHaveAttribute(
+		expect(screen.getByText(title)).toHaveAttribute(
 			"aria-current",
 			"page",
 		);
@@ -86,7 +91,11 @@ describe("AppBreadcrumbs", () => {
 		expect(screen.queryByText("account-1")).not.toBeInTheDocument();
 	});
 
-	it.each(["/login", "/unknown"])("does not render on %s", (path) => {
+	it.each([
+		"/login",
+		"/unknown",
+		"/accounts/account-1/unknown",
+	])("does not render on %s", (path) => {
 		renderBreadcrumbs(path);
 
 		expect(

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -14,14 +14,12 @@ import { StockBreadcrumbs } from "./StockBreadcrumbs";
 const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
 
-	const operations = useMatch({
-		end: true,
-		path: "/accounts/:accountId/operations",
-	});
+	const account = useMatch("/accounts/:accountId/:section?");
+
+	const section = (["events", "income", "operations"] as const).find(
+		value => value === account?.params.section?.toLowerCase(),
+	);
 
-	const events = useMatch({ end: true, path: "/accounts/:accountId/events" });
-	const income = useMatch({ end: true, path: "/accounts/:accountId/income" });
-	const account = useMatch({ end: true, path: "/accounts/:accountId" });
 	const card = useMatch("/cards/:cardId");
 	const cards = useMatch("/cards");
 	const accounts = useMatch({ end: true, path: "/accounts" });
@@ -32,56 +30,20 @@ const AppBreadcrumbs: FC = () => {
 	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
 	if (stock)
 		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
-	if (operations)
+	if (account && (section || !account.params.section))
 		return (
 			<Stack gap={0} mb="md">
 				<AccountBreadcrumbs
-					accountId={operations.params.accountId ?? ""}
-					section="operations"
+					accountId={account.params.accountId ?? ""}
+					section={section}
 				/>
 
 				<AccountScopeSwitch
-					accountId={operations.params.accountId ?? ""}
-					section="operations"
+					accountId={account.params.accountId ?? ""}
+					section={section}
 				/>
 			</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)