feat: migrate BrokerAccountLayout to design system

apps/frontend/src/styles.css

@@ -94,40 +94,6 @@ a {
   z-index: 1;
 }
 
-.broker-account__workspace {
-  display: grid;
-  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
-  gap: 24px;
-}
-
-.broker-account__navigation {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.broker-account__link {
-  padding: 10px 12px;
-  border-radius: var(--border-radius);
-  color: var(--color-text-secondary);
-}
-
-.broker-account__link.is-active,
-.broker-account__link[aria-current='page'] {
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-  color: var(--color-primary);
-  font-weight: 700;
-}
-
-.broker-account__link:focus-visible {
-  outline: 3px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-.broker-account__content {
-  min-width: 0;
-}
-
 .broker-overview {
   display: grid;
   gap: 24px;

apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx

@@ -1,4 +1,6 @@
 import { NavLink, Outlet, useOutletContext, useParams } from 'react-router-dom';
+import { Box } from '@mui/material';
+import { Heading } from '@moex-vibe/design-system';
 import { useBrokerPortfolio } from '@/entities/broker-account';
 
 export type BrokerAccountContext = {
@@ -10,40 +12,87 @@ export function useBrokerAccountContext() {
   return useOutletContext<BrokerAccountContext>();
 }
 
+const links = [
+  { to: '', label: 'Обзор', end: true },
+  { to: '/shares', label: 'Акции' },
+  { to: '/bonds', label: 'Облигации' },
+  { to: '/operations', label: 'Операции' },
+];
+
 export function BrokerAccountLayout() {
   const { accountId = '' } = useParams();
   const portfolio = useBrokerPortfolio(accountId);
   const basePath = `/broker/${encodeURIComponent(accountId)}`;
   const context: BrokerAccountContext = { accountId, portfolio };
-  const linkClassName = ({ isActive }: { isActive: boolean }) =>
-    `broker-account__link${isActive ? ' is-active' : ''}`;
 
   return (
-    <div className="broker-account">
+    <Box sx={{ display: 'grid', gap: 3 }}>
-      <header className="broker-account__header">
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
-        <h1>{portfolio.data?.account.name || 'Брокерский счёт'}</h1>
+        <Heading level={1}>{portfolio.data?.account.name || 'Брокерский счёт'}</Heading>
-      </header>
+      </Box>
 
-      <div className="broker-account__workspace">
+      <Box
-        <nav className="broker-account__navigation" aria-label="Разделы брокерского счёта">
+        sx={{
-          <NavLink className={linkClassName} end to={basePath}>
+          display: 'grid',
-            Обзор
+          gridTemplateColumns: '1fr',
-          </NavLink>
+          gap: 2,
-          <NavLink className={linkClassName} to={`${basePath}/shares`}>
+          '@media (min-width: 720px)': {
-            Акции
+            gridTemplateColumns: 'minmax(150px, 190px) minmax(0, 1fr)',
-          </NavLink>
+            gap: 3,
-          <NavLink className={linkClassName} to={`${basePath}/bonds`}>
+          },
-            Облигации
+        }}
-          </NavLink>
+      >
-          <NavLink className={linkClassName} to={`${basePath}/operations`}>
+        <Box
-            Операции
+          component="nav"
-          </NavLink>
+          aria-label="Разделы брокерского счёта"
-        </nav>
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5,
+            '@media (max-width: 719px)': {
+              flexDirection: 'row',
+              overflowX: 'auto',
+              scrollbarWidth: 'thin',
+            },
+          }}
+        >
+          {links.map((link) => (
+            <Box
+              key={link.to}
+              component={NavLink}
+              to={`${basePath}${link.to}`}
+              end={link.end}
+              sx={{
+                px: 1.5,
+                py: 1.25,
+                borderRadius: 2,
+                color: 'text.secondary',
+                textDecoration: 'none',
+                whiteSpace: 'nowrap',
+                flexShrink: 0,
+                display: 'inline-flex',
+                alignItems: 'center',
+                '&[aria-current="page"]': {
+                  color: 'primary.main',
+                  bgcolor: 'primary.light',
+                  fontWeight: 700,
+                },
+                '&:focus-visible': {
+                  outline: '3px solid',
+                  outlineColor: 'primary.main',
+                  outlineOffset: 2,
+                },
+              }}
+            >
+              {link.label}
+            </Box>
+          ))}
+        </Box>
 
-        <div className="broker-account__content">
+        <Box sx={{ minWidth: 0 }}>
           <Outlet context={context} />
-        </div>
+        </Box>
-      </div>
+      </Box>
-    </div>
+    </Box>
   );
 }