feat: add bond pages and portfolio navigation

src/app/ui/AppBreadcrumbs.tsx

@@ -4,6 +4,7 @@ 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 { StockBreadcrumbs } from "./StockBreadcrumbs";
 
@@ -20,6 +21,8 @@ const AppBreadcrumbs: FC = () => {
 	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)

src/app/ui/BondBreadcrumbs.tsx

@@ -0,0 +1,20 @@
+import type { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useBond } from "@/entities/bond";
+import { BreadcrumbTrail } from "./BreadcrumbTrail";
+
+type BondBreadcrumbsProps = { identifier: string };
+const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
+	const { data } = useBond(props.identifier);
+	const { t } = useTranslation();
+	return (
+		<BreadcrumbTrail
+			items={[
+				{ label: t("bond.searchTitle"), to: "/bonds" },
+				{ label: data?.name ?? t("bond.instrument") },
+			]}
+		/>
+	);
+};
+
+export { BondBreadcrumbs };