+ {weekDays.map(({ label, count, date, names }, i) => (
+
+
+ {label}
+
+
0 ? () => onShowHistoryWithDate(date) : undefined}
+ onMouseEnter={count > 0 ? (e) => {
+ const rect = weekStripRef.current?.getBoundingClientRect();
+ if (!rect) return;
+ setTooltip({ names, x: e.clientX - rect.left, y: e.clientY - rect.top });
+ } : undefined}
+ onMouseMove={count > 0 ? (e) => {
+ const rect = weekStripRef.current?.getBoundingClientRect();
+ if (!rect) return;
+ setTooltip(prev => prev ? { ...prev, x: e.clientX - rect.left, y: e.clientY - rect.top } : prev);
+ } : undefined}
+ onMouseLeave={count > 0 ? () => setTooltip(null) : undefined}
+ style={{ height: 36, background: heatColor(count), border: "1px solid var(--cds-border-subtle-01)", cursor: count > 0 ? "pointer" : "default" }}
+ />
-
0 ? () => onShowHistoryWithDate(date) : undefined}
- onMouseEnter={count > 0 ? () => setHoveredDay(i) : undefined}
- onMouseLeave={count > 0 ? () => setHoveredDay(null) : undefined}
- style={{ height: 36, background: heatColor(count), border: "1px solid var(--cds-border-subtle-01)", cursor: count > 0 ? "pointer" : "default" }}
- />
+ ))}
+
+ {tooltip && tooltip.names.length > 0 && (
+
+ {tooltip.names.map((name, i) => (
+
0 ? "4px 0 0" : 0,
+ }}>
+ {name}
+
+ ))}
- ))}
+ )}
{weekSessions !== undefined && (
-
- {hoveredDay !== null && weekDays[hoveredDay]?.names.length > 0
- ? weekDays[hoveredDay].names.join(" · ")
- : `${weekSessionCount} ØKTE${weekSessionCount !== 1 ? "R" : ""} · ${weekMuscleCount} MUSKELGRUPPE${weekMuscleCount !== 1 ? "R" : ""}`}
+
+ {`${weekSessionCount} ØKTE${weekSessionCount !== 1 ? "R" : ""} · ${weekMuscleCount} MUSKELGRUPPE${weekMuscleCount !== 1 ? "R" : ""}`}
)}
diff --git a/app/src/components/MuscleMap.jsx b/app/src/components/MuscleMap.jsx
index 2b30187..d6dc330 100644
--- a/app/src/components/MuscleMap.jsx
+++ b/app/src/components/MuscleMap.jsx
@@ -123,6 +123,8 @@ export default function MuscleMap({ onShowHome, onShowLogger, onShowHistory, onS
}, [templatePreload]);
const stepIndex = { upload: 0, analyzing: 0, confirm: 1, muscles: 2 }[step] ?? 0;
+ const headingRef = useRef();
+ useEffect(() => { headingRef.current?.focus(); }, [step]);
const exerciseMuscleMap = useMemo(() => buildMuscleMapFromExercises(exercises), [exercises]);
const addImage = useCallback(async (file) => {
@@ -214,14 +216,16 @@ export default function MuscleMap({ onShowHome, onShowLogger, onShowHistory, onS
currentView={currentView}
>
-
LOGG ØKT
-
{STEP_HEADINGS[step]}
-
+
+
LOGG ØKT
+
{STEP_HEADINGS[step]}
+
+
{STEP_LABELS.map((label, idx) => {
const isComplete = stepIndex > idx;
const isActive = stepIndex === idx;
return (
-
handleFiles(e.target.files)} />
- {error && (
-
- )}
+
+ {error && (
+
+ )}
+