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),