feat: add drawer menu, Account, Settings, About screen specs - #10
Conversation
## Changes to spec.md ### User Story 7 (expanded) - Added drawer menu as entry point (hamburger → Account/Settings/About) - Added mnemonic masking behavior (first 2 + last 2 visible) - Added Generate New User flow with confirmation - Added Import Mostro User flow with restore - Added privacy mode toggle - Added About screen content (app info, docs, node details) ### Functional Requirements (new) - FR-016a: Drawer menu structure - FR-016b: Drawer animation and behavior - FR-017a: Mnemonic display with masking - FR-017b: Generate New User - FR-017c: Import Mostro User - FR-017d: Privacy mode toggle - FR-020a: Settings screen cards - FR-020b: About screen app info - FR-020c: About screen Mostro node info ## New v1-reference Documents ### DRAWER_MENU.md - Layout diagram - Animation specs (70% width, 300ms) - Menu items with routes ### ACCOUNT_SCREEN.md - Secret Words card with masking algorithm - Privacy card with radio buttons - Generate/Import/Refresh buttons - Confirmation dialogs ### SETTINGS_SCREEN.md - All 8 cards with layouts - Language, Currency, Lightning Address - Wallet, Relays, Notifications - Dev Tools, Mostro selector ### ABOUT_SCREEN.md - App Information card - Documentation links - Mostro Node card (all fields)
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughDocumentation added defining UI specifications for the Mostro P2P client application, including About, Account, Drawer Menu, and Settings screens with detailed layout, interaction patterns, and component structures. Main specification document updated to reflect new drawer-based navigation and revised user story workflows for account management and settings. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
.specify/v1-reference/DRAWER_MENU.md (1)
58-85: Clarify the Dart snippet as pseudo-code or provide missing variable context.The snippet contains undeclared identifiers (
childon line 66,screenWidthon line 79) and an incomplete comment (// ... drawer contenton line 80), making it read as unfinished code. Since this is a reference document, either add a note explicitly labeling the snippet as pseudo-code, or include minimal variable declarations at the start of the snippet (e.g.,final screenWidth = MediaQuery.of(context).size.width;).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.specify/v1-reference/DRAWER_MENU.md around lines 58 - 85, The snippet in CustomDrawerOverlay reads as unfinished because undeclared identifiers child and screenWidth and a placeholder comment are used; either mark the snippet as pseudo-code at the top or add minimal context: declare a Widget child parameter or local final Widget child = /* main content */ and compute final screenWidth = MediaQuery.of(context).size.width, and replace "// ... drawer content" with a short placeholder like a Container or Column to illustrate the drawer body; ensure references to drawerProvider, AnimatedPositioned, GestureDetector and ref.read(...).closeDrawer() remain consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.specify/v1-reference/ACCOUNT_SCREEN.md:
- Around line 56-71: The _maskSeedPhrase implementation hardcodes four masked
slots instead of masking the middle N words (e.g., 8 for a 12-word phrase);
update _maskSeedPhrase so it calculates the number of middle words to mask as
max(0, words.length - 4), build a masked string consisting of that many '•••'
tokens joined by spaces, and return "$first $masked $last" (handling short
phrases by returning the original seedPhrase when words.length < 4); reference
the function name _maskSeedPhrase and the variables words, first, last, and
masked when making the change.
In @.specify/v1-reference/SETTINGS_SCREEN.md:
- Around line 129-133: Change the strict example and validation wording for the
Lightning Address input: replace "user@domain.com" with a generic "name@domain"
example and add a short clarification that domains may use any TLD or subdomain
(e.g., example, example.org, or sub.example.co) and should follow standard
hostname rules; update the "Placeholder: \"Enter Lightning Address\"" and the
"Format validation" line in SETTINGS_SCREEN.md so the placeholder remains "Enter
Lightning Address" but the validation description reads something like "Format
validation: name@domain — accepts any valid hostname or subdomain with any TLD."
Reference the existing "Input Field", "Placeholder" and "Format validation"
entries when making this edit.
In `@specs/001-mostro-p2p-client/spec.md`:
- Line 199: The spec currently defines the privacy toggle in both the Account
screen and in Settings (FR-044); pick a single canonical location (preferably
Settings per FR-044) and remove the duplicate reference in the Account screen so
acceptance tests are consistent: update the scenario that mentions toggling
between "Reputation Mode" and "Full Privacy Mode" to reference the Settings
global toggle (not Account), adjust any Clarifications that contradict FR-044 to
point at the chosen location, and apply the same change to the other occurrence
that duplicates this behavior so all tests and UI specs reference the single
canonical toggle in Settings.
---
Nitpick comments:
In @.specify/v1-reference/DRAWER_MENU.md:
- Around line 58-85: The snippet in CustomDrawerOverlay reads as unfinished
because undeclared identifiers child and screenWidth and a placeholder comment
are used; either mark the snippet as pseudo-code at the top or add minimal
context: declare a Widget child parameter or local final Widget child = /* main
content */ and compute final screenWidth = MediaQuery.of(context).size.width,
and replace "// ... drawer content" with a short placeholder like a Container or
Column to illustrate the drawer body; ensure references to drawerProvider,
AnimatedPositioned, GestureDetector and ref.read(...).closeDrawer() remain
consistent.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c971b6dd-7efd-4a76-8c92-7a7937a39943
📒 Files selected for processing (5)
.specify/v1-reference/ABOUT_SCREEN.md.specify/v1-reference/ACCOUNT_SCREEN.md.specify/v1-reference/DRAWER_MENU.md.specify/v1-reference/SETTINGS_SCREEN.mdspecs/001-mostro-p2p-client/spec.md
| **Masking Logic:** | ||
| - Show first 2 words clearly | ||
| - Show last 2 words clearly | ||
| - Mask middle 8 words as `••• ••• ••• •••` | ||
|
|
||
| ```dart | ||
| String _maskSeedPhrase(String seedPhrase) { | ||
| final words = seedPhrase.split(' '); | ||
| if (words.length < 4) return seedPhrase; | ||
|
|
||
| final first = words.take(2).join(' '); | ||
| final last = words.skip(words.length - 2).join(' '); | ||
| final masked = '••• ••• ••• •••'; | ||
|
|
||
| return '$first $masked $last'; | ||
| } |
There was a problem hiding this comment.
Masking example contradicts the stated “middle 8 words” behavior.
The sample implementation hardcodes 4 masked slots, but the spec requires masking 8 middle words for a 12-word phrase.
Spec-aligned sample fix
String _maskSeedPhrase(String seedPhrase) {
final words = seedPhrase.split(' ');
if (words.length < 4) return seedPhrase;
final first = words.take(2).join(' ');
final last = words.skip(words.length - 2).join(' ');
- final masked = '••• ••• ••• •••';
+ final maskedCount = words.length - 4;
+ final masked = List.filled(maskedCount, '•••').join(' ');
return '$first $masked $last';
}🧰 Tools
🪛 LanguageTool
[style] ~58-~58: This adverb was used twice in the sentence. Consider removing one of them or replacing them with a synonym.
Context: ...rst 2 words clearly - Show last 2 words clearly - Mask middle 8 words as `••• ••• ••• •...
(ADVERB_REPETITION_PREMIUM)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.specify/v1-reference/ACCOUNT_SCREEN.md around lines 56 - 71, The
_maskSeedPhrase implementation hardcodes four masked slots instead of masking
the middle N words (e.g., 8 for a 12-word phrase); update _maskSeedPhrase so it
calculates the number of middle words to mask as max(0, words.length - 4), build
a masked string consisting of that many '•••' tokens joined by spaces, and
return "$first $masked $last" (handling short phrases by returning the original
seedPhrase when words.length < 4); reference the function name _maskSeedPhrase
and the variables words, first, last, and masked when making the change.
Fixes: 1. ACCOUNT_SCREEN.md: _maskSeedPhrase now dynamically calculates masked words based on phrase length, not hardcoded 4 slots. Handles 12-word, 24-word, or any length phrases correctly. 2. SETTINGS_SCREEN.md: Lightning Address validation now accepts any valid hostname/subdomain/TLD (name@domain pattern), not strict .com requirement. 3. spec.md: Removed duplicate privacy toggle from Account scenarios. FR-017d now specifies global privacy toggle in Settings, with Account screen showing read-only current mode (per FR-044 canonical location). 4. DRAWER_MENU.md: Completed CustomDrawerOverlay code snippet with: - Proper Widget child parameter - screenWidth calculation via MediaQuery - Full implementation with drawer content placeholder - All referenced providers and methods properly used
Summary
Adds complete specifications for the drawer menu and all three screens accessible from it: Account, Settings, and About.
Changes to spec.md
User Story 7 (expanded from 9 to 15 scenarios)
New Functional Requirements
New v1-reference Documents
DRAWER_MENU.md
ACCOUNT_SCREEN.md (~6KB)
SETTINGS_SCREEN.md (~8KB)
ABOUT_SCREEN.md (~7KB)
Source
Extracted from v1 implementation:
lib/features/key_manager/key_management_screen.dartlib/features/settings/settings_screen.dartlib/features/settings/about_screen.dartlib/shared/widgets/custom_drawer_overlay.dartSummary by CodeRabbit