fix(ui): align page layouts and add navigation icons

src/app/ui/AppBreadcrumbs.tsx

@@ -27,7 +27,7 @@ const AppBreadcrumbs: FC = () => {
 		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
 	if (operations)
 		return (
-			<Stack gap="sm" mb="lg">
+			<Stack gap={0} mb="md">
 				<AccountBreadcrumbs
 					accountId={operations.params.accountId ?? ""}
 					section="operations"
@@ -40,7 +40,7 @@ const AppBreadcrumbs: FC = () => {
 		);
 	if (events)
 		return (
-			<Stack gap="sm" mb="lg">
+			<Stack gap={0} mb="md">
 				<AccountBreadcrumbs
 					accountId={events.params.accountId ?? ""}
 					section="events"
@@ -53,7 +53,7 @@ const AppBreadcrumbs: FC = () => {
 		);
 	if (income)
 		return (
-			<Stack gap="sm" mb="lg">
+			<Stack gap={0} mb="md">
 				<AccountBreadcrumbs
 					accountId={income.params.accountId ?? ""}
 					section="income"
@@ -66,7 +66,7 @@ const AppBreadcrumbs: FC = () => {
 		);
 	if (account)
 		return (
-			<Stack gap="sm" mb="lg">
+			<Stack gap={0} mb="md">
 				<AccountBreadcrumbs accountId={account.params.accountId ?? ""} />
 				<AccountScopeSwitch accountId={account.params.accountId ?? ""} />
 			</Stack>

src/pages/account-events/ui/components/AccountEventsPageEmpty.view.tsx

@@ -7,7 +7,7 @@ import type { EventsRefreshState } from "../AccountEventsPage.vm";
 const AccountEventsPageEmpty: FC<EventsRefreshState> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account-events/ui/components/AccountEventsPageLoaded.view.tsx

@@ -14,7 +14,7 @@ type AccountEventsPageLoadedProps = EventsRefreshState & {
 const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("events.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account-income/ui/components/AccountIncomePageLoaded.view.tsx

@@ -33,7 +33,7 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 	} = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={960} gap="lg" className={classes.page}>
+		<Stack gap="lg" className={classes.page}>
 			<Title order={1}>{t("income.title")}</Title>
 			<FormProvider {...form}>
 				<IncomePeriodForm

src/pages/account-income/ui/components/AccountIncomePageLoading.view.tsx

@@ -8,7 +8,7 @@ const AccountIncomePageLoading: FC = () => {
 	const { t } = useTranslation();
 	return (
 		<LoadingSkeleton label={t("states.loadingTitle")}>
-			<Stack maw={960} gap="lg">
+			<Stack gap="lg">
 				<Skeleton height={32} width="40%" />
 				<Paper p="md" radius="md" withBorder>
 					<Stack gap="sm">

src/pages/account-operations/ui/components/AccountOperationsPageLoaded.view.tsx

@@ -73,7 +73,7 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 	}));
 
 	return (
-		<Stack maw={960} gap="lg">
+		<Stack gap="lg">
 			<Title order={1}>{t("ledger.title")}</Title>
 			{props.refreshing ? (
 				<Progress value={100} animated aria-label={t("accounts.refreshing")} />

src/pages/account/ui/AccountPage.module.css

@@ -1,7 +1,3 @@
-.page {
-	max-width: 960px;
-}
-
 .tile,
 .cash {
 	border-color: var(--mantine-color-gray-3);

src/pages/account/ui/components/AccountPageLoaded.view.tsx

@@ -36,7 +36,7 @@ type AccountPageLoadedProps = {
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<Stack className={classes.page} gap="lg">
+		<Stack gap="lg">
 			<AccountHeading account={props.account} accountId={props.accountId} />
 			<PortfolioRefreshState
 				refreshing={props.refreshing ?? false}

src/pages/bonds/ui/BondsPage.view.tsx

@@ -30,7 +30,7 @@ const BondsPageView: FC<BondsPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={860} mx="auto" gap="lg">
+		<Stack gap="lg">
 			<div>
 				<Title order={1}>{t("bond.searchTitle")}</Title>
 				<Text c="dimmed" mt="xs">

src/pages/stocks/ui/StocksPage.view.tsx

@@ -25,7 +25,7 @@ const StocksPageView: FC<StocksPageViewProps> = (props) => {
 	const { vm } = props;
 	const { t } = useTranslation();
 	return (
-		<Stack maw={860} mx="auto" gap="lg">
+		<Stack gap="lg">
 			<div>
 				<Title order={1}>{t("stock.searchTitle")}</Title>
 				<Text c="dimmed" mt="xs">

src/shared/ui/AppShell.module.css

@@ -1,3 +1,8 @@
+.content {
+	max-width: 1120px;
+	margin-inline: auto;
+}
+
 .header {
 	align-items: center;
 	display: flex;

src/shared/ui/AppShell.tsx

@@ -13,10 +13,30 @@ const AppShell: FC<AppShellProps> = (props) => {
 	const { t } = useTranslation();
 	const { pathname } = useLocation();
 	const items = [
-		{ to: "/accounts", label: t("navigation.accounts") },
+		{
-		{ to: "/stocks", label: t("navigation.stocks") },
+			to: "/accounts",
-		{ to: "/bonds", label: t("navigation.bonds") },
+			label: t("navigation.accounts"),
-		{ to: "/settings", label: t("navigation.settings") },
+			icon: (
+				<path d="M8 6V4h8v2M3 10h18M9 10v3h6v-3M5 6h14a2 2 0 0 1 2 2v11H3V8a2 2 0 0 1 2-2Z" />
+			),
+		},
+		{
+			to: "/stocks",
+			label: t("navigation.stocks"),
+			icon: <path d="M3 3v18h18M7 14l5-5 4 3 5-7M16 5h5v5" />,
+		},
+		{
+			to: "/bonds",
+			label: t("navigation.bonds"),
+			icon: <path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3ZM9 7h6M9 11h6M9 15h3" />,
+		},
+		{
+			to: "/settings",
+			label: t("navigation.settings"),
+			icon: (
+				<path d="M4 7h9m4 0h3M4 17h3m4 0h9M13 4v6h4V4h-4ZM7 14v6h4v-6H7Z" />
+			),
+		},
 	];
 
 	return (
@@ -35,13 +55,31 @@ const AppShell: FC<AppShellProps> = (props) => {
 						key={item.to}
 						to={item.to}
 						label={item.label}
+						leftSection={
+							<svg
+								width={20}
+								height={20}
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="1.5"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								aria-hidden="true"
+								focusable="false"
+							>
+								{item.icon}
+							</svg>
+						}
 						active={pathname.startsWith(item.to)}
 					/>
 				))}
 			</MantineAppShell.Navbar>
 			<MantineAppShell.Main className={classes.main}>
-				{contentAboveOutlet}
+				<div className={classes.content}>
-				<Outlet />
+					{contentAboveOutlet}
+					<Outlet />
+				</div>
 			</MantineAppShell.Main>
 			<nav className={classes.bottomNav} aria-label={t("appName")}>
 				{items.map((item) => (