refactor: share instrument search presentation

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)