feat: Update UI to make toolbar closer to the top #152
Conversation
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
Implemented edge-to-edge design with toolbar extending behind status bar: ## Changes ### MainActivity.kt - Removed redundant Scaffold wrapper - Navigation now fills full size with edge-to-edge support ### All Screen Components Updated TimelineScreen, JourneyListScreen, JourneyDetailScreen, and PassDetailScreen: - Added TopAppBarDefaults.pinnedScrollBehavior() for smooth scrolling behavior - Applied nestedScroll modifier to Scaffold for proper scroll handling - Configured TopAppBar with scrollBehavior and consistent surface colors - Added @OptIn(ExperimentalMaterial3Api::class) where needed ## Benefits - Toolbar now extends into status bar area for modern edge-to-edge design - Smooth scroll behavior with toolbar responding to content scroll - Consistent visual appearance across all screens - Better use of screen space ## Testing - ✅ Build successful - ✅ All screens updated consistently - ✅ Proper @OptIn annotations for experimental APIs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Implemented a visual timeline layout for displaying passes in journey detail screen, inspired by modern travel app designs. ## New Component: JourneyTimeline.kt Created a comprehensive timeline component with: ### Visual Features - ✅ Vertical timeline with connecting lines - ✅ Circular icons representing pass types (flight, train, hotel, ticket) - ✅ Colored accent bars matching pass type/background color - ✅ Day grouping with "DAY X • MONTH DD" headers - ✅ "End of Journey" marker at the bottom ### Timeline Cards - Time display (08:00 AM format) - Pass title and organization name - Additional fields for boarding passes (seat, gate info) - QR code placeholder positioning - Dark theme styling matching screenshot reference ### Pass Type Icons - Flight icon for boarding passes - Ticket icon for event tickets - Shopping bag for coupons/store cards - Train, bus, hotel icons (extensible) ### Smart Grouping - Automatically groups passes by day - Shows day number and date (e.g., "DAY 1 • OCT 12") - Maintains chronological order within each day ### Color Coding - Reads backgroundColor from pass data when available - Falls back to type-based colors: - Red for boarding passes - Blue for event tickets - Beige/brown for coupons - Green for store cards ## Updated JourneyDetailScreen - Replaced simple PassCard list with JourneyTimeline component - Removed journey info header (count now visible in timeline) - Cleaner LazyColumn implementation - Better visual hierarchy ## Technical Details - Pure Compose implementation - Reusable timeline components - Efficient grouping algorithm - Proper handling of null dates - Formatted time strings (12-hour format) - Material3 theming integration ## Benefits 🎨 **Modern Visual Design**: Timeline view matches contemporary travel apps 📅 **Better Organization**: Clear day-by-day breakdown of journey 🎯 **At-a-Glance Info**: Quick scan of itinerary with times and types ✨ **Professional Polish**: Colored accents and icons enhance UX --- 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Applied the timeline view design (similar to Journey Detail screen) to the main Timeline screen with the following features: - Day grouping headers when date changes between consecutive passes - Timeline icons for each pass type with colored accents - Vertical connector lines between timeline items - Colored accent bars on timeline cards - Time display for each pass - Maintains pagination support with LazyPagingItems - Maintains selection mode for journey creation - Selection indicator overlays on timeline cards when selected The timeline design creates a visual journey through passes while preserving all existing functionality including long-press selection and pagination. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Redesigned journey cards with a modern, visual-first layout matching the provided design: **JourneyCard Component**: - Large rounded thumbnail (136x136dp) displaying first pass image or gradient placeholder - Dark card background (0xFF2C3646) with 20dp rounded corners - Blue accent bar (0xFF4A9EFF) on the left edge - Journey name in large white text (headlineSmall) - Calendar icon with formatted date range (e.g., "Nov 10 - Nov 12") - Ticket icon with pass count display (e.g., "3 Passes") - Right chevron arrow indicating clickability - Fixed 160dp card height for consistent layout **Thumbnail Implementation**: - Attempts to use first pass's strip or background image - Falls back to gradient background with journey name initial - 8 gradient color schemes selected by name hash for variety - Rounded corners (16dp) matching the design **JourneyListScreen Updates**: - Increased card spacing to 16dp for better visual separation - Consistent padding all around (16dp) - Uses Arrangement.spacedBy for uniform spacing **Visual Improvements**: - Calendar and ticket icons in blue (0xFF4A9EFF) for visual consistency - Text colors: White for titles, light gray (0xFFB0B8C3) for metadata - Enhanced elevation and shadows for depth - Professional, modern appearance matching travel/journey themes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Redesigned the Timeline screen with a modern, information-dense layout matching the provided design: **Time-Based Sectioning**: - Groups passes by relative time: "Upcoming", "Today", "Yesterday", "Past" - Large section headers in white bold text for clear organization - Automatic categorization based on pass relevantDate **CompactPassCard Component**: - **Layout**: Horizontal layout with left accent bar, icon, details, and time - **Left Accent Bar**: 4dp colored bar based on pass type - **Icon/Logo**: 56x56dp circular or rounded square icon - Uses pass logo/icon image when available - Falls back to pass type icon with colored background - **Pass Details**: - Organization name in uppercase gray (0xFF7B8794) - Main description in large white text (titleLarge, semibold) - Additional fields shown as bullet-separated list - **Status Badges**: - "On Time" with green background (0xFF1E4620) for upcoming passes - "Used" with gray background for expired passes - "Empty" for depleted cards - Shows selection checkbox when in selection mode - **Time Display**: - Large blue time (0xFF4A9EFF) in HH:mm format - Optional label: "Tomorrow", "Departs", or date (e.g., "Dec 25") - Right-aligned for easy scanning **Visual Design**: - Card background: Dark (0xFF1E2530) - 16dp rounded corners - 120dp fixed height for consistency - 12dp spacing between cards - Professional, app-like aesthetic **Smart Features**: - Dynamically categorizes passes based on current time - Shows relevant status for each pass type - Maintains selection mode for journey creation - Pagination support preserved **Color Scheme**: - White text for primary content - Gray (0xFF7B8794) for secondary content - Blue (0xFF4A9EFF) for time/emphasis - Green (0xFF4CAF50) for "On Time" status - Type-based accent colors for left bar 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Implemented distinct UI layouts for each pass type: - Boarding Pass: Flight route, terminal/gate/seat info, passenger details - Event Ticket: Event image, section/row/seat, venue information - Store Card: Balance display, points, tier badge - Coupon: Large offer card, redemption button, usage instructions - Generic: Membership info, status, pass details Created new PassDetailLayouts.kt with all layout components. Updated PassDetailScreen.kt to route to appropriate layout based on PassType. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Boarding Pass Improvements: - Differentiate between all PKTransitType values (Air, Boat, Bus, Train, Generic) - Use appropriate icons for each transit type (plane, ferry, bus, train, generic) - Detect transit type from transitType field, field keys, or organization name - Dynamic trip number extraction (flight/train/bus/ferry numbers) UI Fixes: - Reduced text sizes to prevent overflow (headlineMedium instead of displaySmall) - Added maxLines constraints to route display - Used weight modifiers for proper space distribution - Made route times dynamic from pass fields (departureTime, arrivalTime, boardingTime) - Support alternative field names (origin/from, destination/to) Adaptive Info Display: - Show transit-specific info boxes (terminal, platform, gate, bay, dock, seat, coach, car) - Only display available fields instead of placeholder data - Highlight important fields (gate, bay, dock) - Support up to 3 info boxes with smart selection Cleanup: - Removed all "Add to Apple Wallet" buttons from pass detail screens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
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.
Summary
Comprehensive UI redesign with four major enhancements:
Changes
1. Edge-to-Edge Toolbar Implementation
MainActivity.kt:
All Screen Components:
TopAppBarDefaults.pinnedScrollBehavior()for smooth scrollingnestedScrollmodifier to Scaffold2. Timeline View for Journey Detail
JourneyDetailScreen.kt:
JourneyTimelinecomponent3. Visual Journey Cards
JourneyCard.kt:
JourneyListScreen.kt:
4. Compact Pass Cards with Time Sections
TimelineScreen.kt:
Benefits
✨ Modern Edge-to-Edge Design
🎯 Smooth Scrolling Behavior
📅 Visual Timeline Journey
🖼️ Image-First Journey Cards
⏰ Smart Time Organization
📱 Information Density
🎨 Visual Consistency
Technical Details
Toolbar Implementation:
TopAppBarDefaults.pinnedScrollBehavior()Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)@OptInannotationsJourney Card Implementation:
Timeline Pass Card Implementation:
getTimeSection()compares pass date with current timegetPassStatus()checks expiration and relevancegetTimeText()provides smart labels (Tomorrow, Departs, etc.)Testing
🤖 Generated with Claude Code