feat: add timer adjustment buttons and functionality to modify timer duration

Author: murdercode

src/core/pomodoro-timer.js

@@ -65,6 +65,8 @@ export class PomodoroTimer {
         this.smartPauseCountdown = document.getElementById('smart-pause-countdown');
         this.autoStartIndicator = document.getElementById('auto-start-indicator');
         this.continuousSessionIndicator = document.getElementById('continuous-session-indicator');
+        this.timerPlusBtn = document.getElementById('timer-plus-btn');
+        this.timerMinusBtn = document.getElementById('timer-minus-btn');
 
         // Task management
         this.tasks = [];
@@ -201,6 +203,19 @@ export class PomodoroTimer {
             }
         });
 
+        // Timer adjustment buttons
+        if (this.timerPlusBtn) {
+            this.timerPlusBtn.addEventListener('click', () => {
+                this.adjustTimer(5);
+            });
+        }
+
+        if (this.timerMinusBtn) {
+            this.timerMinusBtn.addEventListener('click', () => {
+                this.adjustTimer(-5);
+            });
+        }
+
         // Keyboard shortcuts
         document.addEventListener('keydown', async (e) => {
             // Only trigger if not typing in an input
@@ -753,6 +768,39 @@ export class PomodoroTimer {
         }
     }
 
+    adjustTimer(minutes) {
+        // Convert minutes to seconds
+        const adjustment = minutes * 60;
+        
+        // Add the adjustment to the current time remaining
+        this.timeRemaining += adjustment;
+        
+        // Ensure we don't go below 0 seconds
+        if (this.timeRemaining < 0) {
+            this.timeRemaining = 0;
+        }
+        
+        // If timer is running, we need to update the accuracy tracking
+        if (this.isRunning && this.timerStartTime) {
+            // Calculate how much time should remain based on the adjustment
+            const now = Date.now();
+            const elapsedSinceStart = Math.floor((now - this.timerStartTime) / 1000);
+            
+            // Update the timer duration to account for the adjustment
+            this.timerDuration = elapsedSinceStart + this.timeRemaining;
+        }
+        
+        // Update the display immediately
+        this.updateDisplay();
+        
+        // Show notification
+        const action = minutes > 0 ? 'added' : 'subtracted';
+        const absMinutes = Math.abs(minutes);
+        NotificationUtils.showNotificationPing(
+            `${absMinutes} minute${absMinutes !== 1 ? 's' : ''} ${action} ${minutes > 0 ? 'to' : 'from'} timer ⏰`
+        );
+    }
+
     async skipSession() {
         this.isRunning = false;
         this.isPaused = false;

src/index.html

@@ -95,10 +95,20 @@
 
       <!-- Status Label -->
       <div style="text-align:center; position: relative">
-        <div class="timer-status clickable" id="timer-status">
-          <i id="status-icon" class="ri-brain-line"></i>
-          <span id="status-text">Focus</span>
-          <i class="ri-arrow-down-s-line tag-dropdown-arrow" id="tag-dropdown-arrow"></i>
+        <div class="timer-status-container">
+          <button class="timer-adjust-btn" id="timer-minus-btn" title="Subtract 5 minutes">
+            <i class="ri-subtract-line"></i>
+            <span>5</span>
+          </button>
+          <div class="timer-status clickable" id="timer-status">
+            <i id="status-icon" class="ri-brain-line"></i>
+            <span id="status-text">Focus</span>
+            <i class="ri-arrow-down-s-line tag-dropdown-arrow" id="tag-dropdown-arrow"></i>
+          </div>
+          <button class="timer-adjust-btn" id="timer-plus-btn" title="Add 5 minutes">
+            <i class="ri-add-line"></i>
+            <span>5</span>
+          </button>
         </div>
         <!-- Tag Dropdown Menu -->
         <div class="tag-dropdown-menu" id="tag-dropdown-menu">

src/styles/timer.css

@@ -6,6 +6,50 @@
   background: transparent;
 }
 
+/* Timer Status Container with Adjust Buttons */
+.timer-status-container {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.timer-adjust-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--focus-timer-color);
+  padding: 0;
+}
+
+.timer-adjust-btn:hover {
+  transform: scale(1.05);
+}
+
+.timer-adjust-btn:active {
+  transform: scale(0.95);
+}
+
+.timer-adjust-btn i {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.timer-adjust-btn span {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+
 /* Timer status label - positioned outside timer-container in HTML */
 #timer-view .timer-status {
   font-size: 14px;
@@ -396,6 +440,20 @@
   color: var(--long-break-timer-color);
 }
 
+/* Timer adjust buttons for different timer modes */
+.container.focus .timer-adjust-btn {
+  color: var(--focus-timer-color);
+}
+
+.container.break .timer-adjust-btn {
+  color: var(--break-timer-color);
+}
+
+
+.container.longBreak .timer-adjust-btn {
+  color: var(--long-break-timer-color);
+}
+
 /* Overtime styles for continuous sessions */
 .container.overtime .timer-minutes,
 .container.overtime .timer-seconds {

src/utils/theme-loader.js

@@ -39,7 +39,7 @@ class ThemeLoader {
         // that gets updated by the build process or manually maintained
 
         // This could be enhanced to use a build-time script that generates this list
-                                                                                                                                                                                const knownThemes = [
+                                                                                                                                                                                        const knownThemes = [
             'espresso.css',
             'pipboy.css',
             'pommodore64.css'