Redesign detail screens with unified layout pattern - #198
Merged
Conversation
Major layout improvements addressing user feedback: Layout Changes: - Remove ABV progress bar (text-only strength labels) - Move breadcrumb into app bar title (no floating bar) - Add clean white header section (no decorative gradients) - Add hero info card for key decision info (style, ABV, availability) - Add sticky bottom action bar for all user actions - Prioritize decision-making info (description, allergens, availability) New Features: - Festival tasting log (track drinks tried at festival) - Unified layout system across all detail screens - Consistent section headers and spacing New Widgets: - HeroInfoCard: Prominent card for decision info - SectionHeader: Consistent section titles - BottomActionBar: Sticky action bar with ActionButton - AvailabilityBadge: Status indicators Services: - TastingLogService: Track tasted drinks per festival - Updated DrinkRepository for tasting log support Updated Screens: - DrinkDetailScreen: Complete rewrite with new layout - (BreweryScreen and StyleScreen updates pending) Addresses feedback: 1. Text overflow in headers - now clean white header with wrapping 2. Breadcrumb placement - integrated into app bar 3. Too many visual styles - unified design system 4. No festival logging - added tasting log feature 5. No ABV progress bar - text-only labels
- Refactor BreweryScreen to match DrinkDetailScreen's custom header pattern - Remove EntityDetailScreen dependency - Implement custom header with brewery badge, initials, and stats - Add BreadcrumbBar for navigation context - Maintain brewery analytics tracking - Refactor StyleScreen to match DrinkDetailScreen's custom header pattern - Remove EntityDetailScreen dependency - Implement custom header with style description and stats - Add category-based accent color border - Maintain style analytics tracking - Remove EntityDetailScreen widget (no longer needed) - Update widgets.dart barrel export - Update golden files for StyleScreen screenshot tests All screens now share consistent visual design with collapsible headers, breadcrumb navigation, and unified list sections.
…-HOFq4' into claude/fix-details-screen-layout-tqzdg
After merging branch claude/fix-details-screen-layout-HOFq4, updated BreweryScreen and StyleScreen to use the new unified layout pattern: Layout Changes: - Clean white header (no decorative gradients) - HeroInfoCard for key information (location, drink count, avg ABV) - SectionHeader widgets for consistent section titles - Breadcrumb integrated into AppBar title - Uses DrinkListSection.buildSlivers() for drink lists BreweryScreen: - Header shows brewery name and location - HeroInfoCard displays location and drink count - Removed decorative elements (gradients, badges, etc.) StyleScreen: - Header shows style name - HeroInfoCard displays drink count and average ABV - FutureBuilder for style descriptions (when available) Test Updates: - Updated test expectations to match new layout - Updated golden files for screenshot tests - All BreweryScreen and StyleScreen tests passing This completes the unified layout system started in the HOFq4 branch.
Update tests to match the new unified layout pattern with HeroInfoCard: - Fix expectations for combined text in HeroInfoCard - Update availability display from statusText to bar-based availability - Replace "Your Rating" section with bottom action bar rating button - Update golden files for screenshot tests All 542 tests now passing.
- Remove unused theme variable in DrinkDetailScreen._buildBrewerySection - Remove unused widgets import in drink_detail_screen_test.dart All analysis checks now pass.
Enable users to select and copy important information from HeroInfoCard: - ABV percentages - Location information - Drink counts - Availability status Changed Text to SelectableText in HeroInfoRow widget.
Contributor
LCOV of commit
|
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
Contributor
🚀 Cloudflare Pages PreviewYour preview deployment is ready! Preview URL: https://claude-fix-details-screen-la.staging-cambeerfestival.pages.dev This preview will be automatically updated when you push new commits to this PR. |
Changes: 1. Simplified ABV display from "4.4% ABV (Medium)" to just "4.4%" - Removed redundant "ABV" text - users understand % means ABV - Removed subjective strength labels - users can decide for themselves 2. Restored clickable style navigation - Added tappable style chip below HeroInfoCard - Chip shows style name with chevron indicator - Tapping navigates to StyleScreen to view all drinks with that style - Includes accessibility semantics for screen readers All 542 tests passing.
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request redesigns detail screens with a unified layout pattern while introducing tasting log functionality. The changes consolidate UI components into reusable widgets and add the ability to track which drinks users have tasted at festivals.
Key Changes:
- Introduces tasting log tracking with
TastingLogServiceintegrated throughout the repository, provider, and model layers - Refactors detail screens (Brewery, Style, Drink) to use a consistent, simplified layout with new reusable widgets
- Removes the generic
EntityDetailScreenwidget in favor of more explicit, maintainable implementations
Reviewed changes
Copilot reviewed 19 out of 23 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| lib/services/tasting_log_service.dart | New service for tracking tasted drinks with timestamps, stored in SharedPreferences |
| lib/services/services.dart | Added tasting log service to barrel exports |
| lib/models/drink.dart | Added isTasted boolean property to track tasting status |
| lib/domain/repositories/drink_repository.dart | Extended interface with tasting log methods (hasTasted, toggleTasted, getTastedDrinks) |
| lib/domain/repositories/api_drink_repository.dart | Integrated TastingLogService and populated tasted status during drink fetch |
| lib/providers/beer_provider.dart | Added toggleTasted method and initialized TastingLogService |
| lib/widgets/hero_info_card.dart | New widget for prominent display of key decision-making information |
| lib/widgets/section_header.dart | New widget for consistent section headers with optional separators |
| lib/widgets/bottom_action_bar.dart | New sticky bottom bar for persistent actions (tasted, rate, favorite, share) |
| lib/widgets/availability_badge.dart | New badge widget for availability status display |
| lib/widgets/entity_detail_screen.dart | Removed generic widget in favor of explicit screen implementations |
| lib/widgets/widgets.dart | Updated barrel file with new widget exports, removed entity_detail_screen |
| lib/screens/drink_detail_screen.dart | Major redesign with simplified header, hero card, bottom action bar, and rating dialog |
| lib/screens/brewery_screen.dart | Converted to StatefulWidget, redesigned with clean header and hero card layout |
| lib/screens/style_screen.dart | Converted to StatefulWidget, redesigned with unified layout pattern |
| test/drink_detail_screen_test.dart | Updated test expectations for new UI layout |
| test/brewery_screen_test.dart | Updated test expectations for redesigned brewery screen |
| test/style_screen_test.dart | Updated test expectations for redesigned style screen |
| test/provider_test.mocks.dart | Added mock implementations for new tasting log repository methods |
| test/goldens/*.png | Updated golden test images for new UI design |
Contributor
🚀 Cloudflare Pages PreviewYour preview deployment is ready! Preview URL: https://claude-fix-details-screen-la.staging-cambeerfestival.pages.dev This preview will be automatically updated when you push new commits to this PR. |
Addressed code review feedback: 1. Added analytics tracking for style navigation - Log logStyleViewed when user taps style chip to navigate 2. Added missing semantics hint for rating button - Added "Double tap to rate from 1 to 5 stars" hint - Added button: true flag for proper screen reader behavior 3. Implemented analytics for tasting log feature (removed TODO) - Added logTastedAdded and logTastedRemoved methods to AnalyticsService - Track when users mark drinks as tasted/untasted - Consistent with existing favorite and rating analytics All 542 tests passing.
Contributor
🚀 Cloudflare Pages PreviewYour preview deployment is ready! Preview URL: https://claude-fix-details-screen-la.staging-cambeerfestival.pages.dev This preview will be automatically updated when you push new commits to this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces support for tracking whether a drink has been tasted, integrating a new
TastingLogServicethroughout the repository, provider, and model layers. It also refactors theBreweryScreento use a stateful widget, improving its structure and handling of brewery data and navigation. The most important changes are grouped below.Tasting Log Integration:
isTastedproperty to theDrinkmodel and updated its constructor to support tasting status. (lib/models/drink.dart)DrinkRepositoryinterface to include methods for checking, toggling, and listing tasted drinks, and documented tasting log support. (lib/domain/repositories/drink_repository.dart) [1] [2]ApiDrinkRepositoryto delegate tasting log operations toTastingLogServiceand populateisTastedfor drinks. (lib/domain/repositories/api_drink_repository.dart) [1] [2]BeerProviderto initializeTastingLogService, exposetoggleTastedmethod, and update drink state accordingly. (lib/providers/beer_provider.dart) [1] [2]Brewery Screen Refactor:
BreweryScreenfrom a stateless to a stateful widget, improving brewery data loading, navigation, and UI structure. (lib/screens/brewery_screen.dart) [1] [2]Navigation Improvements:
go_routerimports and logic to handle navigation and breadcrumbs in screens. (lib/screens/brewery_screen.dart,lib/screens/style_screen.dart) [1] [2]