feat(icon): add green icon on break

packages/app/package.json

@@ -46,7 +46,7 @@
     "test": "jest --watch",
     "test:ci": "jest",
     "release": "dotenv release-it -VV",
-    "dev": "concurrently \"BROWSER=none PORT=3007 yarn start\" \"wait-on http://localhost:3007 && electron . --inspect-brk\""
+    "dev": "concurrently \"BROWSER=none PORT=3007 yarn start\" \"wait-on http://localhost:3007 && electron . \""
   },
   "build": {
     "appId": "com.dawidjaniga.pomoguru",
@@ -57,10 +57,7 @@
     "mac": {
       "category": "public.app-category.productivity"
     },
-    "files": [
-      "build/**/*",
-      "node_modules/**/*"
-    ],
+    "files": ["build/**/*", "node_modules/**/*"],
     "directories": {
       "buildResources": "build"
     },
@@ -71,17 +68,10 @@
     "url": "git+https://github.com/dawidjaniga/pomoguru.git"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": ["react-app", "react-app/jest"]
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

packages/app/public/electron.js

@@ -26,6 +26,14 @@ ipcMain.on('set-timer', (event, timeLeft) => {
   }
 })
 
+ipcMain.on('set-icon', (event, icon) => {
+  if (tray) {
+    const iconPath = getIconPath(icon)
+    console.log('Setting icon: ', iconPath)
+    tray.setImage(iconPath)
+  }
+})
+
 ipcMain.on('checkUpdateClicked', () => {
   if (isDev) {
     autoUpdater.checkForUpdates()
@@ -64,7 +72,7 @@ function createWindow () {
       : `file://${path.join(__dirname, '../build/index.html')}`
   )
 
-  tray = new Tray(path.join(__dirname, getAppIconPath()))
+  tray = new Tray(getIconPath('icon-red-small.png'))
 
   tray.on('right-click', toggleWindow)
   tray.on('double-click', toggleWindow)
@@ -121,17 +129,21 @@ app.on('window-all-closed', () => {
 })
 
 app.on('active', () => {
-  if (BrowserWin.getAllWindows().length === 0) {
+  if (BrowserWindow.getAllWindows().length === 0) {
     createWindow()
   }
 })
 
 app.whenReady().then(createWindow)
 
-function getAppIconPath () {
+function getIconPath (icon) {
+  let iconPath
+
   if (isDev) {
-    return '../public/icon-small.png'
+    iconPath = '../public/' + icon
   } else {
-    return '../build/icon-small.png'
+    iconPath = '../build/' + icon
   }
+
+  return path.join(__dirname, iconPath)
 }

packages/app/src/core/mediator.ts

@@ -33,17 +33,20 @@ export function useMediator () {
       },
       onStartClick () {
         phase = Phase.focus
+        slack.goIntoFocus(focusTimeLeftMinutes)
+        ipcRenderer.send('set-icon', 'icon-red-small.png')
 
         start()
         setPhase(Phase.focus)
 
-        slack.goIntoFocus(focusTimeLeftMinutes)
         notifications.notify({
           body: 'All set! Focus time is on'
         })
       },
       onPauseClick () {
         phase = Phase.break
+        ipcRenderer.send('set-icon', 'icon-green-small.png')
+
         pause()
         setPhase(Phase.idle)
 
@@ -55,6 +58,8 @@ export function useMediator () {
       },
       onStopClick () {
         phase = Phase.break
+        ipcRenderer.send('set-icon', 'icon-green-small.png')
+
         stop()
         setPhase(Phase.idle)
 
@@ -66,19 +71,22 @@ export function useMediator () {
       },
       onBreakPhaseEnd () {
         phase = Phase.focus
-        setTimeLeft(focusPhaseDurationSeconds)
-        slack.goIntoFocus(focusTimeLeftMinutes)
         setPhase(Phase.focus)
+        slack.goIntoFocus(focusTimeLeftMinutes)
+
+        setTimeLeft(focusPhaseDurationSeconds)
+        ipcRenderer.send('set-icon', 'icon-red-small.png')
 
         notifications.notify({
           body: 'All set! Focus time is on'
         })
       },
       onFocusPhaseEnd () {
         phase = Phase.break
-        slack.endFocus()
         setPhase(Phase.break)
+        slack.endFocus()
         setTimeLeft(breakPhaseDurationSeconds)
+        ipcRenderer.send('set-icon', 'icon-green-small.png')
 
         notifications.notify({
           body: 'Great job! Break time'

packages/app/src/features/Home.tsx

@@ -43,7 +43,7 @@ export default function Home () {
   return (
     <>
       <WindowTitle>
-        Pomoguru <img src='icon-small.png' alt='Pomoguru icon' />
+        Pomoguru <img src='icon-red-small.png' alt='Pomoguru icon' />
         {version}
         <button onClick={handleUpdateClick}>Check update</button>
       </WindowTitle>

packages/app/src/features/__tests__/__snapshots__/Home.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Home View when Slack is not initialized should show "Connect to Slack"
       Pomoguru 
       <img
         alt="Pomoguru icon"
-        src="icon-small.png"
+        src="icon-red-small.png"
       />
     </div>
     <a