4.3 KiB
ADDED 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 list of menu items, and it SHALL remain visible regardless of which menu item is active.
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), Мнемоническая фраза (MnemonicSection), and Транзакции (transactions content). 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: 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 click 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