78 lines
2.8 KiB
Markdown
78 lines
2.8 KiB
Markdown
# Scroll-to-Place and Highlight Feature
|
|
|
|
## Overview
|
|
Implemented automatic scroll and temporary highlight functionality for newly added places in the TripPlanner timeline.
|
|
|
|
## Feature Behavior
|
|
When a user adds a new place to their trip:
|
|
1. **Scroll**: Timeline automatically scrolls to center the newly added place
|
|
2. **Highlight**: Place is temporarily highlighted with a glowing ring effect
|
|
3. **Auto-remove**: Highlight effect automatically disappears after 2 seconds
|
|
|
|
## Implementation Details
|
|
|
|
### 1. State Management (TripPlanner.tsx)
|
|
Added two new state variables:
|
|
- `newlyAddedPlaceId`: Tracks which place was just added
|
|
- `highlightedPlaceId`: Controls which place should show the highlight effect
|
|
|
|
### 2. Place Addition Flow (TripPlanner.tsx)
|
|
Modified `handleAddPlaceToDay()` to:
|
|
- Set `newlyAddedPlaceId` when a place is successfully added
|
|
- This triggers the scroll and highlight effect after `loadTrip()` completes
|
|
|
|
### 3. Scroll & Highlight Effect (TripPlanner.tsx)
|
|
Added a `useEffect` hook that:
|
|
- Watches for `newlyAddedPlaceId` changes
|
|
- Waits for the place element to be rendered in the DOM
|
|
- Calculates optimal scroll position to center the place
|
|
- Smoothly scrolls to the place
|
|
- Applies highlight effect
|
|
- Automatically removes highlight after 2 seconds
|
|
|
|
### 4. Visual Highlight (TimelinePlace.tsx)
|
|
Updated component to:
|
|
- Accept `isHighlighted` prop
|
|
- Apply special styling when highlighted:
|
|
- Stronger ring effect (ring-4 vs ring-2)
|
|
- Increased ring opacity (ring-primary/40)
|
|
- Enhanced shadow (shadow-lg)
|
|
- Pulsing glow animation
|
|
|
|
### 5. Animation (index.css)
|
|
Added custom CSS animation:
|
|
- `pulse-glow` keyframe animation
|
|
- Creates a pulsing glow effect using box-shadow
|
|
- Runs 2 times over 1 second each
|
|
- Uses primary color with varying opacity
|
|
|
|
## Technical Highlights
|
|
|
|
### Robust Element Detection
|
|
The scroll function includes retry logic:
|
|
- Checks if element ref exists
|
|
- Retries after 100ms if not found
|
|
- Ensures DOM is fully updated before scrolling
|
|
|
|
### Smooth User Experience
|
|
- Uses `behavior: 'smooth'` for scroll animation
|
|
- Centers the place in the viewport for optimal visibility
|
|
- Non-intrusive highlight that doesn't interfere with user interaction
|
|
|
|
### Clean State Management
|
|
- Automatically cleans up highlight state after 2 seconds
|
|
- Clears `newlyAddedPlaceId` to prevent re-triggering
|
|
- Uses timeout cleanup to prevent memory leaks
|
|
|
|
## Files Modified
|
|
1. `/src/pages/TripPlanner.tsx` - Main logic and state management
|
|
2. `/src/components/planner/TimelinePlace.tsx` - Visual highlight rendering
|
|
3. `/src/index.css` - Custom animation styles
|
|
|
|
## Testing Recommendations
|
|
1. Add a place to any day in the trip
|
|
2. Verify timeline scrolls to show the new place
|
|
3. Confirm highlight effect appears with glow
|
|
4. Check highlight disappears after 2 seconds
|
|
5. Test with places added to different time blocks (morning, afternoon, evening)
|