Enhance delivery list UI with sequential order badges and improve scrolling
performance with faster animations for better user experience.
Delivery Order Badge:
- Add 60x60px status-colored square badge showing delivery sequence number
- Position badge to the left of vertical status bar for clear visual hierarchy
- White text (26px, bold) centered in badge
- Automatically displays deliveryIndex + 1 (first delivery = 1, second = 2, etc.)
- Status color matches delivery state (green for completed, gray for pending, etc.)
- 10px border radius for modern appearance
Layout Enhancements:
- Sidebar expanded from 360px to 420px to accommodate order badges
- Vertical centering of row elements for better visual balance
- Maintains optimized spacing: badge (60px) + gap (12px) + bar (6px) + gap (16px) + content
- Full list scrolling restored (removed 4-item limit)
Animation Performance:
- Stagger animation delay reduced by 90% (50ms to 5ms)
- Fast stagger: 30ms to 3ms for ultra-responsive scrolling
- Delivery items appear almost instantly when scrolling
- Total animation time for 20 items: 500ms to 100ms
- Maintains subtle stagger effect while feeling immediate
User Experience Improvements:
- Clear visual indication of delivery order in route
- Faster perceived loading when scrolling through deliveries
- Better readability with larger, prominent order numbers
- Consistent status color coding across badge and accent bar
Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Add three major UI components with animations and dark mode support:
- PremiumRouteCard: Enhanced route cards with left accent bar, delivery count badge, animated hover effects (1.02x scale), and dynamic shadow elevation
- DarkModeMapComponent: Google Maps integration with dark theme styling, custom info panels, navigation buttons, and delivery status indicators
- DeliveryListItem: Animated list items with staggered entrance animations, status badges with icons, contact indicators, and hover states
Updates:
- RoutesPage: Now uses PremiumRouteCard with improved visual hierarchy
- DeliveriesPage: Integrated DarkModeMapComponent and DeliveryListItem with proper theme awareness
- Animation system: Leverages existing AppAnimations constants for 200ms fast interactions and easeOut curves
Design philosophy:
- Element separation through left accent bars (status-coded)
- Elevation and shadow for depth (0.1-0.3 opacity)
- Staggered animations for list items (50ms delays)
- Dark mode optimized for evening use (reduced brightness)
- Responsive hover states with tactile feedback
Co-Authored-By: Claude <noreply@anthropic.com>
