feat: add breadcrumbs

src/app/routes/AppRoutes.tsx

@@ -8,6 +8,7 @@ import { NotFoundPage } from "@/pages/not-found";
 import { RegisterPage } from "@/pages/register";
 import { SettingsPage } from "@/pages/settings";
 import { AppShell } from "@/shared/ui";
+import { AppBreadcrumbs } from "../ui/AppBreadcrumbs";
 
 function Protected({ children }: { children: React.ReactNode }) {
 	const { user, ready } = useAuth();
@@ -53,7 +54,7 @@ export function AppRoutes() {
 			<Route
 				element={
 					<Protected>
-						<AppShell />
+						<AppShell contentAboveOutlet={<AppBreadcrumbs />} />
 					</Protected>
 				}
 			>

src/app/styles.css

@@ -32,6 +32,17 @@ a {
 .bottom-nav {
 	display: none;
 }
+.breadcrumbs {
+	display: flex;
+	gap: 0.5rem;
+	margin-bottom: 1rem;
+}
+.breadcrumbs-entry {
+	display: contents;
+}
+.breadcrumbs a {
+	color: var(--ft-color-accent);
+}
 .auth-page {
 	align-items: center;
 	display: flex;
@@ -64,6 +75,10 @@ a {
 		color: var(--ft-color-accent);
 		font-weight: 600;
 	}
+	.breadcrumbs[data-depth="3"] .breadcrumbs-item-0,
+	.breadcrumbs[data-depth="3"] .breadcrumbs-separator-1 {
+		display: none;
+	}
 	.mantine-AppShell-main {
 		padding-bottom: 5rem;
 	}

src/app/ui/AppBreadcrumbs.test.tsx

@@ -0,0 +1,89 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AppBreadcrumbs } from "./AppBreadcrumbs";
+
+const { useBrokerageAccounts } = vi.hoisted(() => ({
+	useBrokerageAccounts: vi.fn(),
+}));
+
+vi.mock("@/entities/brokerage-account", () => ({ useBrokerageAccounts }));
+vi.mock("@/features/auth", () => ({
+	useAuth: () => ({ accessToken: "token" }),
+}));
+
+function renderBreadcrumbs(
+	path: string,
+	accounts?: { id: string; name: string }[],
+) {
+	useBrokerageAccounts.mockReturnValue({ data: accounts });
+	return render(
+		<MemoryRouter initialEntries={[path]}>
+			<AppBreadcrumbs />
+		</MemoryRouter>,
+	);
+}
+
+describe("AppBreadcrumbs", () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
+
+	it("shows the current accounts page without a link", () => {
+		renderBreadcrumbs("/accounts");
+
+		expect(
+			screen.getByRole("navigation", { name: "Хлебные крошки" }),
+		).toBeInTheDocument();
+		expect(screen.getByText("Брокерские счета")).toHaveAttribute(
+			"aria-current",
+			"page",
+		);
+		expect(screen.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("shows settings as the current page without a link", () => {
+		renderBreadcrumbs("/settings");
+
+		expect(screen.getByText("Настройки")).toHaveAttribute(
+			"aria-current",
+			"page",
+		);
+		expect(screen.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("links to the account hierarchy from operations", () => {
+		renderBreadcrumbs("/accounts/account-1/operations", [
+			{ id: "account-1", name: "ИИС" },
+		]);
+
+		expect(
+			screen.getByRole("link", { name: "Брокерские счета" }),
+		).toHaveAttribute("href", "/accounts");
+		expect(screen.getByRole("link", { name: "ИИС" })).toHaveAttribute(
+			"href",
+			"/accounts/account-1",
+		);
+		expect(screen.getByText("Операции")).toHaveAttribute(
+			"aria-current",
+			"page",
+		);
+		expect(screen.getByRole("navigation")).toHaveAttribute("data-depth", "3");
+	});
+
+	it("uses the account fallback without exposing the identifier", () => {
+		renderBreadcrumbs("/accounts/account-1");
+
+		expect(screen.getByText("Счет")).toHaveAttribute("aria-current", "page");
+		expect(screen.queryByText("account-1")).not.toBeInTheDocument();
+	});
+
+	it.each(["/login", "/unknown"])("does not render on %s", (path) => {
+		renderBreadcrumbs(path);
+
+		expect(
+			screen.queryByRole("navigation", { name: "Хлебные крошки" }),
+		).not.toBeInTheDocument();
+	});
+});

src/app/ui/AppBreadcrumbs.tsx

@@ -0,0 +1,100 @@
+import { useTranslation } from "react-i18next";
+import { Link, useMatch } from "react-router";
+import { useBrokerageAccounts } from "@/entities/brokerage-account";
+import { useAuth } from "@/features/auth";
+
+type Crumb = { label: string; to?: string };
+
+function BreadcrumbTrail({ items }: { items: Crumb[] }) {
+	const { t } = useTranslation();
+	return (
+		<nav
+			aria-label={t("breadcrumbs.label")}
+			className="breadcrumbs"
+			data-depth={items.length}
+		>
+			{items.map((item, index) => (
+				<span className="breadcrumbs-entry" key={item.to ?? item.label}>
+					{index ? (
+						<span
+							aria-hidden="true"
+							className={`breadcrumbs-separator-${index}`}
+						>
+							→
+						</span>
+					) : null}
+					<span className={`breadcrumbs-item-${index}`}>
+						{item.to ? (
+							<Link to={item.to}>{item.label}</Link>
+						) : (
+							<span aria-current="page">{item.label}</span>
+						)}
+					</span>
+				</span>
+			))}
+		</nav>
+	);
+}
+
+function AccountBreadcrumbs({
+	accountId,
+	operations,
+}: {
+	accountId: string;
+	operations: boolean;
+}) {
+	const { accessToken } = useAuth();
+	const { data: accounts } = useBrokerageAccounts(accessToken);
+	const { t } = useTranslation();
+	const accountName =
+		accounts?.find((account) => account.id === accountId)?.name ??
+		t("breadcrumbs.accountFallback");
+	const accountPath = `/accounts/${accountId}`;
+	return (
+		<BreadcrumbTrail
+			items={
+				operations
+					? [
+							{ label: t("breadcrumbs.accounts"), to: "/accounts" },
+							{ label: accountName, to: accountPath },
+							{ label: t("breadcrumbs.operations") },
+						]
+					: [
+							{ label: t("breadcrumbs.accounts"), to: "/accounts" },
+							{ label: accountName },
+						]
+			}
+		/>
+	);
+}
+
+export function AppBreadcrumbs() {
+	const { t } = useTranslation();
+	const accountOperations = useMatch({
+		path: "/accounts/:accountId/operations",
+		end: true,
+	});
+	const account = useMatch({ path: "/accounts/:accountId", end: true });
+	const accounts = useMatch({ path: "/accounts", end: true });
+	const settings = useMatch({ path: "/settings", end: true });
+
+	if (accountOperations)
+		return (
+			<AccountBreadcrumbs
+				accountId={accountOperations.params.accountId ?? ""}
+				operations
+			/>
+		);
+	if (account)
+		return (
+			<AccountBreadcrumbs
+				accountId={account.params.accountId ?? ""}
+				operations={false}
+			/>
+		);
+	if (accounts)
+		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
+	if (settings)
+		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
+	return null;
+}

src/pages/account-operations/ui/AccountOperationsPage.test.tsx

@@ -82,6 +82,12 @@ describe("AccountOperationsPage", () => {
 			</QueryClientProvider>,
 		);
 
+		expect(
+			await screen.findByRole("heading", { name: "Журнал операций" }),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByRole("link", { name: "К счету" }),
+		).not.toBeInTheDocument();
 		fireEvent.click(await screen.findByRole("button", { name: "Далее" }));
 		await waitFor(() => expect(searches.at(-1)).toContain("cursor=next-1"));
 		fireEvent.click(screen.getByRole("checkbox", { name: "Налог" }));

src/pages/account-operations/ui/AccountOperationsPage.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mantine/core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router";
+import { useParams } from "react-router";
 import {
 	type BrokerageOperation,
 	type OperationCategory,
@@ -70,12 +70,7 @@ export function AccountOperationsPage() {
 		);
 	return (
 		<Stack maw={960} gap="lg">
-			<Group justify="space-between">
+			<Title order={1}>{t("ledger.title")}</Title>
-				<Title order={1}>{t("ledger.title")}</Title>
-				<Button component={Link} to={`/accounts/${accountId}`} variant="subtle">
-					{t("ledger.back")}
-				</Button>
-			</Group>
 			<Group align="end">
 				<TextInput
 					label={t("ledger.from")}

src/shared/i18n/locales/ru.ts

@@ -2,6 +2,13 @@ export const ru = {
 	translation: {
 		appName: "WealthLedger",
 		navigation: { accounts: "Счета", settings: "Настройки" },
+		breadcrumbs: {
+			label: "Хлебные крошки",
+			accounts: "Брокерские счета",
+			accountFallback: "Счет",
+			operations: "Операции",
+			settings: "Настройки",
+		},
 		auth: {
 			login: "Вход",
 			register: "Регистрация",

src/shared/ui/AppShell.tsx

@@ -1,8 +1,13 @@
 import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
 
-export function AppShell() {
+export function AppShell({
+	contentAboveOutlet,
+}: {
+	contentAboveOutlet?: ReactNode;
+}) {
 	const { t } = useTranslation();
 	const { pathname } = useLocation();
 	const items = [
@@ -31,6 +36,7 @@ export function AppShell() {
 				))}
 			</MantineAppShell.Navbar>
 			<MantineAppShell.Main>
+				{contentAboveOutlet}
 				<Outlet />
 			</MantineAppShell.Main>
 			<nav className="bottom-nav" aria-label={t("appName")}>