From caa812e7d84444f5d31f921ab78c699de38693fb Mon Sep 17 00:00:00 2001
From: Igor Babko <i.i.babko@gmail.com>
Date: Wed, 15 Nov 2023 11:53:44 +0200
Subject: [PATCH 1/4] 125. end of idle hour

---
 src/storage.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/storage.js b/src/storage.js
index 2c7c925..cfc37bd 100644
--- a/src/storage.js
+++ b/src/storage.js
@@ -1,4 +1,4 @@
-import { APP_NAME, MILLISECONDS_IN_SECOND } from './constants'
+import { APP_NAME, MILLISECONDS_IN_SECOND, SECONDS_IN_HOUR } from './constants'
 import { isToday, today } from './time'
 import { timelineItems } from './timeline-items'
 import { activities } from './activities'
@@ -32,8 +32,28 @@ function syncIdleSeconds(timelineItems, lastActiveAt) {
   const activeTimelineItem = timelineItems.find(({ isActive }) => isActive)
 
   if (activeTimelineItem) {
-    activeTimelineItem.activitySeconds += (today() - lastActiveAt) / MILLISECONDS_IN_SECOND
+    activeTimelineItem.activitySeconds += calculateIdleSeconds(lastActiveAt)
   }
 
   return timelineItems
 }
+
+function calculateIdleSeconds(lastActiveAt) {
+  let idleMilliseconds = today() - lastActiveAt
+
+  if (lastActiveAt.getHours() !== today().getHours()) {
+    idleMilliseconds = getEndOfIdleHour(lastActiveAt) - lastActiveAt
+  }
+
+  return idleMilliseconds / MILLISECONDS_IN_SECOND
+}
+
+function getEndOfIdleHour(lastActiveAt) {
+  const endOfIdleHour = new Date(lastActiveAt)
+
+  endOfIdleHour.setTime(endOfIdleHour.getTime() + SECONDS_IN_HOUR * MILLISECONDS_IN_SECOND)
+
+  endOfIdleHour.setMinutes(0, 0, 0)
+
+  return endOfIdleHour
+}

From af5cfff2f0ceeed4f9c82e564eea98c060fef4d1 Mon Sep 17 00:00:00 2001
From: Igor Babko <i.i.babko@gmail.com>
Date: Wed, 15 Nov 2023 08:57:36 +0200
Subject: [PATCH 2/4] 126

---
 src/pages/TheTimeline.vue |  6 +++---
 src/storage.js            | 24 +++++-------------------
 src/time.js               | 30 ++++++++++++++++++++++--------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/pages/TheTimeline.vue b/src/pages/TheTimeline.vue
index 4bd9a51..0957fa3 100644
--- a/src/pages/TheTimeline.vue
+++ b/src/pages/TheTimeline.vue
@@ -6,7 +6,7 @@ import {
   scrollToCurrentHour,
   stopTimelineItemTimer
 } from '../timeline-items'
-import { startTimer, stopTimer } from '../time'
+import { startCurrentDateTimer, stopCurrentDateTimer } from '../time'
 import TimelineItem from '../components/TimelineItem.vue'
 import TheTimelineIndicator from '../components/TheTimelineIndicator.vue'
 
@@ -15,10 +15,10 @@ stopTimelineItemTimer()
 onActivated(() => {
   scrollToCurrentHour()
 
-  startTimer()
+  startCurrentDateTimer()
 })
 
-onDeactivated(stopTimer)
+onDeactivated(stopCurrentDateTimer)
 </script>
 
 <template>
diff --git a/src/storage.js b/src/storage.js
index cfc37bd..703c657 100644
--- a/src/storage.js
+++ b/src/storage.js
@@ -1,5 +1,5 @@
-import { APP_NAME, MILLISECONDS_IN_SECOND, SECONDS_IN_HOUR } from './constants'
-import { isToday, today } from './time'
+import { APP_NAME } from './constants'
+import { endOfHour, isToday, toSeconds, today } from './time'
 import { timelineItems } from './timeline-items'
 import { activities } from './activities'
 
@@ -39,21 +39,7 @@ function syncIdleSeconds(timelineItems, lastActiveAt) {
 }
 
 function calculateIdleSeconds(lastActiveAt) {
-  let idleMilliseconds = today() - lastActiveAt
-
-  if (lastActiveAt.getHours() !== today().getHours()) {
-    idleMilliseconds = getEndOfIdleHour(lastActiveAt) - lastActiveAt
-  }
-
-  return idleMilliseconds / MILLISECONDS_IN_SECOND
-}
-
-function getEndOfIdleHour(lastActiveAt) {
-  const endOfIdleHour = new Date(lastActiveAt)
-
-  endOfIdleHour.setTime(endOfIdleHour.getTime() + SECONDS_IN_HOUR * MILLISECONDS_IN_SECOND)
-
-  endOfIdleHour.setMinutes(0, 0, 0)
-
-  return endOfIdleHour
+  return lastActiveAt.getHours() === today().getHours()
+    ? toSeconds(today() - lastActiveAt)
+    : toSeconds(endOfHour(lastActiveAt) - lastActiveAt)
 }
diff --git a/src/time.js b/src/time.js
index 2775643..3e64497 100644
--- a/src/time.js
+++ b/src/time.js
@@ -3,13 +3,13 @@ import {
   HUNDRED_PERCENT,
   SECONDS_IN_DAY,
   MILLISECONDS_IN_SECOND,
-  SECONDS_IN_MINUTE
+  SECONDS_IN_HOUR
 } from './constants'
 
 export function today() {
   const today = new Date()
 
-  today.setHours(0, 0)
+  // today.setHours(0, 0)
 
   return today
 }
@@ -22,10 +22,24 @@ export function tomorrow() {
   return tomorrow
 }
 
+export function endOfHour(date) {
+  const endOfHour = new Date(date)
+
+  endOfHour.setTime(endOfHour.getTime() + SECONDS_IN_HOUR * MILLISECONDS_IN_SECOND)
+
+  endOfHour.setMinutes(0, 0, 0)
+
+  return endOfHour
+}
+
 export function isToday(date) {
   return date.toDateString() === today().toDateString()
 }
 
+export function toSeconds(milliseconds) {
+  return Math.round(milliseconds / MILLISECONDS_IN_SECOND)
+}
+
 export const now = ref(today())
 
 export const secondsSinceMidnightInPercentage = computed(
@@ -36,16 +50,16 @@ const midnight = computed(() => new Date(now.value).setHours(0, 0, 0, 0))
 
 const secondsSinceMidnight = computed(() => (now.value - midnight.value) / MILLISECONDS_IN_SECOND)
 
-let timer = null
+let currentDateTimer = null
 
-export function startTimer() {
+export function startCurrentDateTimer() {
   now.value = today()
 
-  timer = setInterval(() => {
-    now.value = new Date(now.value.getTime() + SECONDS_IN_MINUTE * MILLISECONDS_IN_SECOND)
+  currentDateTimer = setInterval(() => {
+    now.value = new Date(now.value.getTime() + MILLISECONDS_IN_SECOND)
   }, MILLISECONDS_IN_SECOND)
 }
 
-export function stopTimer() {
-  clearInterval(timer)
+export function stopCurrentDateTimer() {
+  clearInterval(currentDateTimer)
 }

From 95445fd4f61ca77ee5928598a509b662648e4ea6 Mon Sep 17 00:00:00 2001
From: Igor Babko <i.i.babko@gmail.com>
Date: Mon, 13 Nov 2023 10:04:03 +0200
Subject: [PATCH 3/4] 121. move load and save state into storage.js

---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 5ea6603..6b232cf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { loadState, saveState } from './storage'
-import { startTimelineItemTimer, findActiveTimelineItem } from './timeline-items'
+import { findActiveTimelineItem, startTimelineItemTimer } from './timeline-items'
 import App from './App.vue'
 
 import './assets/main.css'

From 18a2700336bc9ec4831dbf40e77cfd796260164f Mon Sep 17 00:00:00 2001
From: Igor Babko <i.i.babko@gmail.com>
Date: Mon, 13 Nov 2023 10:26:24 +0200
Subject: [PATCH 4/4] 122. start timer

---
 src/components/TimelineStopwatch.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TimelineStopwatch.vue b/src/components/TimelineStopwatch.vue
index 4c0f890..f2d22ec 100644
--- a/src/components/TimelineStopwatch.vue
+++ b/src/components/TimelineStopwatch.vue
@@ -32,10 +32,10 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() =>
-  updateTimelineItem(props.timelineItem, {
-    activitySeconds: seconds.value
-  })
+watchEffect(() => updateTimelineItem(props.timelineItem, { activitySeconds: seconds.value }))
+
+watch(isRunning, () =>
+  updateTimelineItem(props.timelineItem, { isActive: Boolean(isRunning.value) })
 )
 
 watch(isRunning, () =>