Enhance workout session management and UI interactions

[wulfland]

• Clear stale active workouts when starting a new split
• Implement clickable split cards with visual feedback for workout actions
• Update workout session auto-start logic to handle stale workouts
• Refactor workout starting logic to streamline exercise loading

[Copilot]

Pull request overview

This PR enhances the workout session management by improving how users start workouts from mesocycle splits. The changes introduce clickable split cards for better user interaction, handle stale workout sessions more gracefully, and simplify the workout starting logic by centralizing split-specific functionality.

Changes:

• Refactored workout initialization to separate concerns between empty workouts and split-based workouts
• Added interactive split cards that allow users to start, resume, or redo workouts with visual feedback
• Implemented stale workout cleanup when starting a new split to prevent conflicts

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/hooks/useWorkoutSession.ts	Simplified startWorkout to create empty workouts only, removing split-loading logic that now lives in startWorkoutFromSplit
src/components/workouts/WorkoutSession.tsx	Added auto-start logic that cancels stale workouts before starting a new split-based workout
src/components/mesocycles/SplitProgressTracker.tsx	Converted split cards from divs to interactive buttons with state-based actions (start/resume/redo)
src/components/mesocycles/SplitProgressTracker.css	Added styles for clickable cards including hover, active, and in-progress states
src/components/mesocycles/MesocycleDashboard.tsx	Added cleanup of stale activeWorkout localStorage entry before setting new split selection

[Copilot]

This useEffect has a potential infinite loop issue. When isActive is true and cancelWorkout is called on line 115, it changes the isActive state to false. Since isActive is a dependency in the array on line 128, this triggers the effect to run again. Although the selectedSplitDayId is removed from localStorage on line 110 (preventing further iterations), this causes an unnecessary re-execution of the effect.

To fix this, consider one of these approaches:

1. Remove isActive from the dependency array and use a ref to check its current value
2. Move the cancelWorkout call outside the effect by checking isActive before setting selectedSplitDayId in MesocycleDashboard
3. Use a separate flag to track whether auto-start has already been triggered for this selectedSplitDayId

[Copilot]

Button elements should have default styles reset to maintain the card appearance. The .split-card.clickable class should include properties to reset button defaults such as 'border: none;' and 'background: none;' to ensure the button inherits the .split-card styling properly. Currently, the button might display with default browser button styling that could interfere with the card appearance.

Suggested change

	width: 100%;
	width: 100%;
	/* Reset default button styles so clickable cards render consistently */
	border: none;
	background: none;
	padding: 0;
	color: inherit;
	text-align: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;

[Copilot]

The text "Tap any split above to repeat it or start next week's training" is ambiguous. It's unclear how tapping a split would "start next week's training." The user interface shows this week's splits, and tapping them will either resume, start, or redo this week's splits - not start next week's training. Consider clarifying the message to something like "Tap any split above to redo it" to match the actual functionality shown in the split-card-action text.

Suggested change

	Tap any split above to repeat it or start next week's
	training
	Tap any split above to redo it

[Copilot]

The handleCardClick function has a potential issue: when isInProgress is true but onResumeWorkout is undefined, the button click does nothing. Similarly, when isInProgress is false but onStartWorkout is undefined, the button click does nothing. Consider adding a fallback or disabling the button when the required callbacks are not provided.

For example:

const handleCardClick = () => {
  if (isInProgress) {
    if (onResumeWorkout) {
      onResumeWorkout();
    } else {
      console.warn('Resume workout callback not provided');
    }
  } else if (onStartWorkout) {
    onStartWorkout(info.splitDay.id);
  } else {
    console.warn('Start workout callback not provided');
  }
};

Alternatively, disable the button when callbacks are missing:

disabled={isInProgress ? !onResumeWorkout : !onStartWorkout}

[wulfland]

@copilot open a new pull request to apply changes based on the comments in this thread

[Copilot]

@wulfland I've opened a new pull request, #79, to work on those changes. Once the pull request is ready, I'll request review from you.