From b2be64ef7bfe9d551a95caf8dd7eda9a39d2cbd0 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sun, 11 Jan 2026 11:44:22 +0100
Subject: [PATCH] feat(focus-mode): show coffee cup icon during breaks

Display the free_breakfast icon in the header focus button when a break
is active, along with the remaining break time and progress circle.
Closes #5957
---
 .../focus-button/focus-button.component.html          |  6 +++++-
 .../focus-button/focus-button.component.ts            | 11 ++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/core-ui/main-header/focus-button/focus-button.component.html b/src/app/core-ui/main-header/focus-button/focus-button.component.html
index c127453a2..0f46a9eef 100644
--- a/src/app/core-ui/main-header/focus-button/focus-button.component.html
+++ b/src/app/core-ui/main-header/focus-button/focus-button.component.html
@@ -14,7 +14,11 @@
     (contextmenu)="openFocusSessionDialog(); $event.preventDefault()"
     (longPress)="openFocusSessionDialog()"
   >
-    <mat-icon>center_focus_strong</mat-icon>
+    @if (isBreakActive()) {
+      <mat-icon>free_breakfast</mat-icon>
+    } @else {
+      <mat-icon>center_focus_strong</mat-icon>
+    }
   </button>
 
   @if (runningTimeMs(); as runningMs) {
diff --git a/src/app/core-ui/main-header/focus-button/focus-button.component.ts b/src/app/core-ui/main-header/focus-button/focus-button.component.ts
index 9200b9b3b..73d667d91 100644
--- a/src/app/core-ui/main-header/focus-button/focus-button.component.ts
+++ b/src/app/core-ui/main-header/focus-button/focus-button.component.ts
@@ -49,6 +49,7 @@ export class FocusButtonComponent {
   });
 
   readonly isSessionRunning = this.focusModeService.isSessionRunning;
+  readonly isBreakActive = this.focusModeService.isBreakActive;
   readonly progress = this.focusModeService.progress;
   readonly mode = this.focusModeService.mode;
   readonly FocusModeMode = FocusModeMode;
@@ -62,7 +63,9 @@ export class FocusButtonComponent {
     return shortcut ? ` [${shortcut}]` : '';
   });
 
-  readonly circleVisible = computed(() => this.isSessionRunning());
+  readonly circleVisible = computed(
+    () => this.isSessionRunning() || this.isBreakActive(),
+  );
 
   readonly isCountdownMode = computed(() => {
     const mode = this.mode();
@@ -73,7 +76,8 @@ export class FocusButtonComponent {
     if (!this.circleVisible()) {
       return null;
     }
-    if (this.isCountdownMode()) {
+    // Show progress for both work sessions and breaks in countdown modes
+    if (this.isCountdownMode() || this.isBreakActive()) {
       const progress = this.progress();
       return typeof progress === 'number' ? Math.min(100, Math.max(0, progress)) : 0;
     }
@@ -90,7 +94,8 @@ export class FocusButtonComponent {
     if (!this.circleVisible()) {
       return null;
     }
-    if (this.isCountdownMode()) {
+    // Breaks always use countdown
+    if (this.isBreakActive() || this.isCountdownMode()) {
       const remaining = this.focusModeService.timeRemaining();
       return typeof remaining === 'number' ? Math.max(0, remaining) : 0;
     }