Skip to content

feat: add drawer menu, Account, Settings, About screen specs - #10

Merged
grunch merged 2 commits into
mainfrom
docs/drawer-screens-spec
Mar 23, 2026
Merged

feat: add drawer menu, Account, Settings, About screen specs#10
grunch merged 2 commits into
mainfrom
docs/drawer-screens-spec

Conversation

@mostronatorcoder

@mostronatorcoder mostronatorcoder Bot commented Mar 23, 2026

Copy link
Copy Markdown
Contributor

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)

  • Drawer menu as navigation entry point
  • Mnemonic display with masking (first 2 + last 2 visible, middle masked)
  • Generate New User with confirmation dialog
  • Import Mostro User with restore sync
  • Privacy mode toggle (Reputation vs Full Privacy)
  • About screen content requirements

New Functional Requirements

FR Description
FR-016a Drawer menu structure (Account, Settings, About)
FR-016b Drawer animation (70% width, 300ms, overlay)
FR-017a Mnemonic masking behavior
FR-017b Generate New User flow
FR-017c Import Mostro User flow
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

  • ASCII layout diagram
  • Animation specs
  • Menu items with routes

ACCOUNT_SCREEN.md (~6KB)

  • Secret Words card with masking algorithm code
  • Privacy card with radio button specs
  • Generate/Import/Refresh buttons
  • Confirmation dialog content

SETTINGS_SCREEN.md (~8KB)

  • All 8 cards with ASCII layouts:
    • Language, Currency, Lightning Address
    • Wallet Status, Relays
    • Notification Settings, Dev Tools
    • Mostro Node Selector

ABOUT_SCREEN.md (~7KB)

  • App Information card (version, repo, commit, license)
  • Documentation links (EN, ES, Technical)
  • Mostro Node card with all fields:
    • General: pubkey, limits, fee, currencies
    • Technical: version, expiration timers, PoW
    • Lightning: LND version, node pubkey, alias, URI

Source

Extracted from v1 implementation:

  • lib/features/key_manager/key_management_screen.dart
  • lib/features/settings/settings_screen.dart
  • lib/features/settings/about_screen.dart
  • lib/shared/widgets/custom_drawer_overlay.dart

Summary by CodeRabbit

  • Documentation
    • Added comprehensive UI specifications for drawer-based navigation system
    • Documented Account screen features including credential management and privacy modes
    • Documented About screen displaying app information and node details
    • Documented Settings screen configuration options
    • Updated product specification to reflect redesigned navigation model

## 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)
@grunch

grunch commented Mar 23, 2026

Copy link
Copy Markdown
Member

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Mar 23, 2026

Copy link
Copy Markdown
Contributor
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai

coderabbitai Bot commented Mar 23, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b2753dc3-5e22-4fc1-b429-df948552bf34

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Walkthrough

Documentation 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

Cohort / File(s) Summary
UI Reference Specifications
.specify/v1-reference/ABOUT_SCREEN.md, .specify/v1-reference/ACCOUNT_SCREEN.md, .specify/v1-reference/DRAWER_MENU.md, .specify/v1-reference/SETTINGS_SCREEN.md
New v1 reference documentation defining screen layouts, component structures, and interaction patterns. Includes About screen with app info and Mostro node details, Account screen with mnemonic management and privacy modes, left-sliding drawer menu navigation, and Settings screen with eight configurable cards.
Main Specification Update
specs/001-mostro-p2p-client/spec.md
Updated User Story 7 to introduce left drawer navigation with Account, Settings, and About entries. Revised acceptance scenarios to focus on Account screen behaviors (mnemonic masking, user generation, import workflows) and About screen content. Extended functional requirements with FRs for drawer navigation (FR-016a/b), Account functions (FR-017a–d), and Settings/About contents (FR-020a–c).

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A burrow of specs, so neat and bright,
Screens and menus, all just right!
Drawers that slide with gentle grace,
Account and Settings find their place!
Documentation hops along,
Making Mostro's path so strong! 🎉

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: adding drawer menu and three screen specifications (Account, Settings, About), which are the primary focus of the PR.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/drawer-screens-spec

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 (child on line 66, screenWidth on line 79) and an incomplete comment (// ... drawer content on 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

📥 Commits

Reviewing files that changed from the base of the PR and between ccdffb7 and 5971b09.

📒 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.md
  • specs/001-mostro-p2p-client/spec.md

Comment on lines +56 to +71
**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';
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Comment thread .specify/v1-reference/SETTINGS_SCREEN.md
Comment thread specs/001-mostro-p2p-client/spec.md Outdated
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
@grunch
grunch merged commit baa2d5f into main Mar 23, 2026
1 check passed
@grunch
grunch deleted the docs/drawer-screens-spec branch March 23, 2026 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant