6.4 KiB
profile-dashboard
Purpose
Единый раздел «личного кабинета» на /profile: боковое меню (25%) и контент (75%) с вложенной маршрутизацией по разделам. Объединяет блоки профиля (данные, безопасность, мнемоника) и транзакции в одну точку входа, с закреплённой сводкой профиля и состоянием загрузки контента.
Requirements
Requirement: Two-column dashboard layout
The profile section SHALL be presented as a two-column layout: a left menu column occupying approximately 25% of the available width and a right content column occupying approximately 75%. On viewports narrower than 1024px the two columns SHALL collapse into a single stacked column.
Scenario: Wide viewport shows two columns
- WHEN an authenticated user opens the profile section on a viewport ≥ 1024px wide
- THEN the left menu column (~25%) and the right content column (~75%) are displayed side by side
Scenario: Narrow viewport stacks columns
- WHEN an authenticated user opens the profile section on a viewport < 1024px wide
- THEN the menu and the content are stacked vertically in a single column
Requirement: Pinned profile summary
The left menu column SHALL display the profile summary (ProfileSummary — avatar and identity) pinned at the top, above the menu navigation, and it SHALL remain visible regardless of which menu item is active. On desktop the avatar and the "Добавить фото" button SHALL span the full width of the menu column.
Scenario: Summary visible on every item
- WHEN the user switches between any menu items
- THEN the profile summary remains displayed at the top of the left column
Requirement: Menu items for profile sections and transactions
The left menu SHALL list selectable items for: Данные профиля (ProfileDetails), Безопасность (SecuritySection), Транзакции (transactions content), and Мнемоническая фраза (last item). Selecting an item SHALL render its content in the right column, and the currently active item SHALL be visually highlighted.
Scenario: Selecting a menu item shows its content
- WHEN the user clicks a menu item
- THEN the right column renders that item's content and the clicked item is marked as active
Scenario: Transactions appears as a menu item
- WHEN the user views the profile menu
- THEN a «Транзакции» item is present alongside the profile section items, and selecting it renders the transactions content (list plus the «Транзакции / Заявки» tabs for legal-entity accounts)
Requirement: Mobile navigation via select
On viewports narrower than 1024px the left menu navigation SHALL be presented as a single select control (the shared Select component) instead of the full list, so only the chosen section is shown. Changing the select SHALL navigate to the corresponding section.
Scenario: Mobile uses a select
- WHEN an authenticated user opens the profile section on a viewport < 1024px wide
- THEN the section navigation is a select control reflecting the active section
Scenario: Changing the select navigates
- WHEN the user picks another section in the select
- THEN the app navigates to that section's URL and renders its content
Requirement: Mnemonic reveal requires explicit action
The «Мнемоническая фраза» item SHALL show the seed-phrase content inline (12-word grid with show/hide and copy), but the mnemonic SHALL be fetched only after the user explicitly requests it via a "Показать мнемонику" button. Until then no mnemonic request is made.
Scenario: Mnemonic gated behind a button
- WHEN the user opens the «Мнемоническая фраза» item
- THEN a warning and a "Показать мнемонику" button are shown, and no mnemonic request has been sent
Scenario: Revealing fetches and shows the seed phrase
- WHEN the user clicks "Показать мнемонику"
- THEN the mnemonic is fetched (a loading indicator is shown) and the seed-phrase content is rendered inline
Requirement: Per-item routing with default redirect
Each menu item SHALL have its own URL under /profile (/profile/details, /profile/security, /profile/mnemonic, /profile/transactions) so that the browser Back button and direct links select the corresponding item. Navigating to /profile SHALL redirect to the default item /profile/details.
Scenario: Direct link opens the matching item
- WHEN the user navigates directly to
/profile/transactions - THEN the transactions item is active and its content is shown in the right column
Scenario: Bare profile path redirects to default
- WHEN the user navigates to
/profile - THEN the app redirects to
/profile/detailsand shows the profile data item
Scenario: Back button restores previous item
- WHEN the user selects one item and then another, and then presses the browser Back button
- THEN the previously active item is restored
Requirement: Legacy transactions route redirect
The legacy route /transactions SHALL redirect to /profile/transactions so existing links and bookmarks continue to work.
Scenario: Old transactions URL redirects
- WHEN the user navigates to
/transactions - THEN the app redirects to
/profile/transactions
Requirement: KYC banner placement
The KYC banner (KycBanner) SHALL be displayed above the content in the right column.
Scenario: KYC banner shown above content
- WHEN the profile section is displayed and the KYC banner is applicable
- THEN the banner appears above the active item's content in the right column
Requirement: Loading state for content
While the data for the active menu item is loading, the right column SHALL show a loading indicator (the shared Spinner) while the left menu remains interactive.
Scenario: Spinner while data loads
- WHEN the active item's data is still loading
- THEN a loading indicator is shown in the right column and the user can still navigate to other menu items
Scenario: Content replaces spinner when ready
- WHEN the active item's data finishes loading
- THEN the loading indicator is replaced by the item's content