Merge pull request #49 from pineapplestrikesback/codex/fix-modal-not-closing-after-swipe

Author: pineapplestrikesback

src/ui/components/mobile/MobileCarousel.tsx

@@ -68,7 +68,11 @@ export function MobileCarousel({
         <div className="flex touch-pan-y">
           {/* Slide 1: Body Heatmap (NAV-03: default view) */}
           <div className="flex-[0_0_100%] min-w-0 px-4">
-            <MobileHeatmap profileId={profileId} daysBack={daysBack} />
+            <MobileHeatmap
+              profileId={profileId}
+              daysBack={daysBack}
+              isActive={selectedIndex === 0}
+            />
           </div>
 
           {/* Slide 2: Muscle List */}

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<ScientificMuscle>(config.hidden),