diff --git a/src/ui/components/mobile/MobileCarousel.tsx b/src/ui/components/mobile/MobileCarousel.tsx index 37a84a1..0565cf9 100644 --- a/src/ui/components/mobile/MobileCarousel.tsx +++ b/src/ui/components/mobile/MobileCarousel.tsx @@ -68,7 +68,11 @@ export function MobileCarousel({
{/* Slide 1: Body Heatmap (NAV-03: default view) */}
- +
{/* Slide 2: Muscle List */} diff --git a/src/ui/components/mobile/MobileHeatmap.tsx b/src/ui/components/mobile/MobileHeatmap.tsx index 5df01a6..dff22ef 100644 --- a/src/ui/components/mobile/MobileHeatmap.tsx +++ b/src/ui/components/mobile/MobileHeatmap.tsx @@ -21,6 +21,7 @@ import { MuscleDetailModal } from './MuscleDetailModal'; interface MobileHeatmapProps { profileId: string | null; daysBack?: number; + isActive?: boolean; } /** @@ -130,7 +131,11 @@ interface MuscleStats { * Mobile heatmap component. * Displays a single body view with 3D flip animation between front and back. */ -export function MobileHeatmap({ profileId, daysBack = 7 }: MobileHeatmapProps): React.ReactElement { +export function MobileHeatmap({ + profileId, + daysBack = 7, + isActive = true, +}: MobileHeatmapProps): React.ReactElement { const { stats, isLoading, error } = useScientificMuscleVolume(profileId, daysBack); const { config } = useEffectiveMuscleGroupConfig(profileId); const [view, setView] = useSessionState<'front' | 'back'>( @@ -148,6 +153,13 @@ export function MobileHeatmap({ profileId, daysBack = 7 }: MobileHeatmapProps): } }, [tappedRegion]); + // Close modal when carousel navigates away from heatmap + useEffect(() => { + if (!isActive) { + setSelectedRegion(null); + } + }, [isActive]); + // Create set of hidden muscles for quick lookup const hiddenMuscles = useMemo( () => new Set(config.hidden),