feat(ui): add smooth exit animation to image details panel #1059
Conversation
|
|
📝 WalkthroughWalkthroughThe MediaInfoPanel component has been refactored to incorporate framer-motion animations. The panel now conditionally renders within an AnimatePresence wrapper with motion.div, enabling smooth enter/exit transitions. The close button is repositioned into a header bar within the animated container, while all content rendering logic remains intact. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/components/Media/MediaInfoPanel.tsx`:
- Around line 116-125: The conditional that currently checks
currentImage?.metadata?.latitude and longitude uses truthiness and therefore
hides valid coordinates equal to 0; change the condition to explicitly check for
null/undefined (e.g., currentImage?.metadata?.latitude != null &&
currentImage?.metadata?.longitude != null) so 0 values are rendered, and keep
using currentImage.metadata.latitude.toFixed(4) and handleLocationClick as
before (guarding access behind the new explicit checks).
| {currentImage?.metadata?.latitude && | ||
| currentImage?.metadata?.longitude ? ( | ||
| <button | ||
| type="button" | ||
| onClick={handleLocationClick} | ||
| className="flex w-full cursor-pointer items-center truncate text-left font-medium text-white hover:underline" | ||
| title={`Lat: ${currentImage.metadata.latitude}, Lon: ${currentImage.metadata.longitude}`} | ||
| > | ||
| {tag} | ||
| </span> | ||
| ))} | ||
| {`Lat: ${currentImage.metadata.latitude.toFixed(4)}, Lon: ${currentImage.metadata.longitude.toFixed(4)}`} | ||
| <SquareArrowOutUpRight className="ml-1 h-[14px] w-[14px]" /> |
There was a problem hiding this comment.
Handle 0 latitude/longitude as valid coordinates.
Using a truthy check hides valid coordinates like 0. Prefer explicit null/undefined checks so 0 still renders the location.
🐛 Proposed fix
- {currentImage?.metadata?.latitude &&
- currentImage?.metadata?.longitude ? (
+ {currentImage?.metadata?.latitude != null &&
+ currentImage?.metadata?.longitude != null ? (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {currentImage?.metadata?.latitude && | |
| currentImage?.metadata?.longitude ? ( | |
| <button | |
| type="button" | |
| onClick={handleLocationClick} | |
| className="flex w-full cursor-pointer items-center truncate text-left font-medium text-white hover:underline" | |
| title={`Lat: ${currentImage.metadata.latitude}, Lon: ${currentImage.metadata.longitude}`} | |
| > | |
| {tag} | |
| </span> | |
| ))} | |
| {`Lat: ${currentImage.metadata.latitude.toFixed(4)}, Lon: ${currentImage.metadata.longitude.toFixed(4)}`} | |
| <SquareArrowOutUpRight className="ml-1 h-[14px] w-[14px]" /> | |
| {currentImage?.metadata?.latitude != null && | |
| currentImage?.metadata?.longitude != null ? ( | |
| <button | |
| type="button" | |
| onClick={handleLocationClick} | |
| className="flex w-full cursor-pointer items-center truncate text-left font-medium text-white hover:underline" | |
| title={`Lat: ${currentImage.metadata.latitude}, Lon: ${currentImage.metadata.longitude}`} | |
| > | |
| {`Lat: ${currentImage.metadata.latitude.toFixed(4)}, Lon: ${currentImage.metadata.longitude.toFixed(4)}`} | |
| <SquareArrowOutUpRight className="ml-1 h-[14px] w-[14px]" /> |
🤖 Prompt for AI Agents
In `@frontend/src/components/Media/MediaInfoPanel.tsx` around lines 116 - 125, The
conditional that currently checks currentImage?.metadata?.latitude and longitude
uses truthiness and therefore hides valid coordinates equal to 0; change the
condition to explicitly check for null/undefined (e.g.,
currentImage?.metadata?.latitude != null && currentImage?.metadata?.longitude !=
null) so 0 values are rendered, and keep using
currentImage.metadata.latitude.toFixed(4) and handleLocationClick as before
(guarding access behind the new explicit checks).
|
|
1 participant
**PR: Add Smooth Exit Animation to Image Details Panel
Summary**
This PR adds a smooth exit animation to the Image Details panel in MediaInfoPanel, bringing the close interaction in line with the existing slide-in open animation.
Problem
Previously, the Image Details panel unmounted immediately when closed. This caused an abrupt visual cut that felt inconsistent and unfinished compared to the smooth entry animation. The mismatch degraded perceived UI quality and made the interaction feel jarring.
Solution
The panel lifecycle is now animated on both entry and exit using framer-motion, ensuring a fluid, consistent user experience.
Implementation Details
Changes made:
- initial: x: -100, opacity: 0
- animate: x: 0, opacity: 1
- exit: x: -100, opacity: 0
Verification
Scope
Why this PR is worth merging
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.