feat(focus-mode): add end focus session button to completion banner

Adds a secondary "End Focus Session" button to the focus banner when a session completes, allowing users to completely exit focus mode and dismiss the banner instead of only being able to start a break or next session.
This commit is contained in:
Johannes Millan 2026-01-19 14:48:56 +01:00
parent 9e7a9ccdc9
commit f8a9347681
4 changed files with 26 additions and 14 deletions

View file

@ -2790,8 +2790,9 @@ describe('FocusModeEffects', () => {
expect(buttonActions.action).toBeDefined();
expect(buttonActions.action.label).toBe('F.FOCUS_MODE.B.START');
// action2 should be undefined when start button is shown
expect(buttonActions.action2).toBeUndefined();
// action2 should show "End Focus Session" button when session is completed
expect(buttonActions.action2).toBeDefined();
expect(buttonActions.action2.label).toBe('F.FOCUS_MODE.B.END_FOCUS_SESSION');
});
it('should have start button when break time is up', () => {

View file

@ -974,20 +974,29 @@ export class FocusModeEffects {
};
// End session button - complete for work, skip for break (while running)
// Hide when session is completed or break time is up (Start button takes priority)
const endAction = shouldShowStartButton
? undefined
: isOnBreak
// When session is completed (not break), show "End Focus Session" button
const endAction =
isSessionCompleted && !isBreakTimeUp
? {
label: T.F.FOCUS_MODE.SKIP_BREAK,
...(useIcons && { icon: 'skip_next' }),
fn: () => this._handleSkipBreak(),
}
: {
label: T.F.FOCUS_MODE.B.END_SESSION,
label: T.F.FOCUS_MODE.B.END_FOCUS_SESSION,
...(useIcons && { icon: 'done_all' }),
fn: () => this._handleEndSession(),
};
fn: () => {
this.store.dispatch(actions.cancelFocusSession());
},
}
: shouldShowStartButton
? undefined
: isOnBreak
? {
label: T.F.FOCUS_MODE.SKIP_BREAK,
...(useIcons && { icon: 'skip_next' }),
fn: () => this._handleSkipBreak(),
}
: {
label: T.F.FOCUS_MODE.B.END_SESSION,
...(useIcons && { icon: 'done_all' }),
fn: () => this._handleEndSession(),
};
// Open overlay button
const overlayAction = {

View file

@ -180,6 +180,7 @@ const T = {
ADD_TIME_MINUTE: 'F.FOCUS_MODE.ADD_TIME_MINUTE',
B: {
BREAK_RUNNING: 'F.FOCUS_MODE.B.BREAK_RUNNING',
END_FOCUS_SESSION: 'F.FOCUS_MODE.B.END_FOCUS_SESSION',
END_SESSION: 'F.FOCUS_MODE.B.END_SESSION',
PAUSE: 'F.FOCUS_MODE.B.PAUSE',
POMODORO_BREAK_RUNNING: 'F.FOCUS_MODE.B.POMODORO_BREAK_RUNNING',

View file

@ -177,6 +177,7 @@
"ADD_TIME_MINUTE": "Add 1 minute",
"B": {
"BREAK_RUNNING": "Break is running",
"END_FOCUS_SESSION": "End Focus Session",
"END_SESSION": "End session",
"PAUSE": "Pause",
"POMODORO_BREAK_RUNNING": "Break #{{cycleNr}} is running",