Implement A-Z jump navigation for drinks list - #162
Implement A-Z jump navigation for drinks list#162richardthe3rd with Copilot wants to merge 5 commits into
Conversation
- Created AlphabetScrollbar widget for A-Z navigation - Shows only when sorted by name (A-Z or Z-A) - Highlights available vs unavailable letters - Smooth scroll animation to selected letter - Added comprehensive unit tests (6 tests, all passing) - All analyzer checks passing Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
- Replace magic numbers (65, 90) with character comparisons for A-Z check - Add clarifying comment about estimated item height for scroll calculation - Rename itemHeight to estimatedItemHeight for clarity Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
Co-authored-by: richardthe3rd <573334+richardthe3rd@users.noreply.github.com>
LCOV of commit
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
🚀 Cloudflare Pages PreviewYour preview deployment is ready! Preview URL: https://copilot-implement-a-z-jump-n.staging-cambeerfestival.pages.dev This preview will be automatically updated when you push new commits to this PR. |
There was a problem hiding this comment.
Pull request overview
This PR implements an A-Z jump navigation feature for the drinks list, adding an alphabet scrollbar that appears on the right edge when drinks are sorted by name. The implementation includes a new reusable AlphabetScrollbar widget, integration into the main DrinksScreen, comprehensive test coverage, and documentation.
Key changes:
- New
AlphabetScrollbarwidget with visual feedback, conditional availability states, and full accessibility support - DrinksScreen integration using Stack/Positioned overlay with ScrollController for programmatic navigation
- 6 unit tests covering display, interaction, visual feedback, and accessibility
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/widgets/alphabet_scrollbar.dart | New widget providing A-Z vertical scrollbar with tap navigation, visual feedback, and accessibility support |
| lib/widgets/widgets.dart | Added export for new AlphabetScrollbar widget to barrel file |
| lib/screens/drinks_screen.dart | Integrated ScrollController and AlphabetScrollbar overlay; added jump-to-letter logic |
| test/alphabet_scrollbar_test.dart | Comprehensive unit tests covering widget display, interaction, availability states, and accessibility |
| screenshots/README.md | Documentation of feature behavior, visual design, and technical implementation |
| IMPLEMENTATION_SUMMARY.md | Detailed implementation summary with technical decisions and future enhancement opportunities |
| Set<String> _getAvailableLetters(BeerProvider provider) { | ||
| return provider.drinks | ||
| .map((drink) => drink.name.isNotEmpty | ||
| ? drink.name[0].toUpperCase() | ||
| : '') | ||
| .where((letter) => letter.isNotEmpty && | ||
| letter.codeUnitAt(0) >= 'A'.codeUnitAt(0) && | ||
| letter.codeUnitAt(0) <= 'Z'.codeUnitAt(0)) | ||
| .toSet(); |
There was a problem hiding this comment.
The logic filters letters using ASCII code point comparison, which is correct for basic Latin alphabet. However, this will filter out drinks starting with accented characters (é, ñ, etc.) or non-Latin scripts, potentially hiding them from users.
Consider whether drinks starting with such characters should map to their base letter (e.g., "Éclair" → "E") or if they should be excluded from the A-Z navigation. If they should be excluded, this is working as intended. If they should be included, consider using character normalization or categorization logic.
|
|
||
| final scrollPosition = (index * estimatedItemHeight); |
There was a problem hiding this comment.
The scroll position calculation doesn't account for the heights of elements above the drinks list (SliverAppBar, festival banner, and optional search bar). This will cause the jump-to-letter feature to scroll to an incorrect position that's too far down, potentially missing the target drink entirely.
The current calculation assumes drinks start at position 0, but they actually start after the SliverAppBar (~56px when collapsed), the festival banner (variable height, typically ~60px), and the search bar (if visible, ~60px). This means jumping to index 0 would scroll ~176-236 pixels too far.
Consider adding the heights of these elements to the scroll calculation, or consider using a package like scrollable_positioned_list for accurate positioning with complex scroll views.
| final scrollPosition = (index * estimatedItemHeight); | |
| // Heights of elements above the drinks list | |
| const sliverAppBarHeight = 56.0; // collapsed height | |
| const festivalBannerHeight = 60.0; // adjust if dynamic | |
| const searchBarHeight = 60.0; // adjust if dynamic or optional | |
| // If the search bar is not visible, set to 0.0 | |
| // If you have a variable for search bar visibility, use it here | |
| final listOffset = sliverAppBarHeight + festivalBannerHeight + searchBarHeight; | |
| final scrollPosition = (index * estimatedItemHeight) + listOffset; |
Adds alphabet scrollbar for quick navigation in long drink lists when sorted by name.
Implementation
New
AlphabetScrollbarwidget:Stack+PositionedcurrentSortisnameAscornameDescDrinksScreen integration:
ScrollControllerfor programmatic scrollingAccessibility:
Semanticssupport with descriptive labelsUsage
Test Coverage
6 unit tests covering display, interaction, visual feedback, availability states, and accessibility.
Files changed:
lib/widgets/alphabet_scrollbar.dart(new, 120 lines)lib/screens/drinks_screen.dart(+52 lines)test/alphabet_scrollbar_test.dart(new, 150 lines)Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.