Couple of fixes and improvements

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-space-before-function-paren"]
+}

package.json

@@ -2,7 +2,7 @@
   "name": "twenty",
   "productName": "Twenty",
   "description": "Customizable timer that reminds you to take eye breaks",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "repository": "https://github.com/jalenng/twenty",
   "url": "https://github.com/jalenng/twenty#readme",
   "author": {
@@ -55,6 +55,8 @@
     "win32-api": "^19.8.1"
   },
   "devDependencies": {
+    "prettier": "^3.0.0",
+    "prettier-plugin-space-before-function-paren": "^0.0.10",
     "concurrently": "^7.3.0",
     "cross-env": "^7.0.3",
     "electron": "^20.0.0",

public/app/createWindow.js

@@ -57,7 +57,7 @@ const TYPE_OPTIONS = {
 const POPUP_OPTIONS = {
   size: {
     width: 360,
-    height: 90
+    height: 150
   },
   gapFromEdge: 12
 }
@@ -81,16 +81,13 @@ function createWindow (type, destination = '', display = null, isPopup = false)
 
   // Load URL
   window.loadURL(
-    isDev
-      ? `http://localhost:3000#/${destination}`
-      : `file://${__dirname}/../../build/index.html#/${destination}` // eslint-disable-line n/no-path-concat
+    isDev ? `http://localhost:3000#/${destination}` : `file://${__dirname}/../../build/index.html#/${destination}` // eslint-disable-line n/no-path-concat
   )
 
   let mainWindowState
 
   switch (type) {
     case 'main':
-
       // Update and remember the position of the main window
       mainWindowState = windowStateKeeper({})
 
@@ -127,7 +124,7 @@ function createWindow (type, destination = '', display = null, isPopup = false)
       // If notification is a popup window, show when ready and set always-on-top level
       if (isPopup) {
         window.setAlwaysOnTop(true, 'screen-saver')
-        window.on('ready-to-show', () => window.show())
+        window.on('ready-to-show', () => window.showInactive())
       }
 
       break
@@ -171,7 +168,9 @@ function createWindow (type, destination = '', display = null, isPopup = false)
   window.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true })
 
   // Prevent opening new windows
-  window.webContents.setWindowOpenHandler('new-window', () => { return ({ action: 'deny' }) })
+  window.webContents.setWindowOpenHandler('new-window', () => {
+    return { action: 'deny' }
+  })
 
   return window
 }

public/app/preload.js

@@ -108,6 +108,10 @@ window.breakSys = {
   eventSystem: new EventSystem()
 }
 
+window.cancelBreak = () => ipcRenderer.invoke('cancel-break')
+window.delayBreak = (minutes) => ipcRenderer.invoke('delay-break', minutes)
+window.triggerBreak = () => ipcRenderer.invoke('trigger-break')
+
 window.blockerSys = {
   getBlockers: () => { ipcRenderer.send('get-blockers') },
   clear: () => { ipcRenderer.invoke('clear-blockers') },

public/app/setupApp.js

@@ -9,6 +9,7 @@ const { appPath, isDev } = require('../constants')
 const { mainWindow } = require('./windowManager')
 const createWindow = require('./createWindow')
 const store = require('../store/store')
+const waitForDevServer = require('./waitForDevServer')
 
 const { createTray } = require('./tray')
 const { menu } = require('./menu')
@@ -25,7 +26,12 @@ if (!isDev) {
 }
 
 /** Configure app event handlers */
-app.whenReady().then(() => {
+app.whenReady().then(async () => {
+  if (isDev) {
+    // Wait for the dev server to be ready
+    await waitForDevServer()
+  }
+
   mainWindow.set(createWindow('main')) // Create main window
 
   // macOS: Recreate a window if none are open but the dock icon is activated

public/app/tray.js

@@ -3,65 +3,64 @@
  * @author jalenng
  */
 
-const path = require('path')
+const path = require("path");
 
-const { app, nativeTheme, nativeImage, Menu, Tray } = require('electron')
+const { app, nativeTheme, nativeImage, Menu, Tray } = require("electron");
 
-const { appName, isMacOS } = require('../constants')
-const { timerSystem } = require('../systems/systems')
-const createWindow = require('./createWindow')
-const { mainWindow, windowStillExists } = require('./windowManager')
+const { appName, isMacOS } = require("../constants");
+const { timerSystem } = require("../systems/systems");
+const createWindow = require("./createWindow");
+const { mainWindow, windowStillExists } = require("./windowManager");
 
 const contextMenu = Menu.buildFromTemplate([
-  { label: appName, enabled: false },
-  { type: 'separator' },
-  { label: 'Quit', click: app.exit }
-])
+  { label: appName, click: showMainWindow },
+  { type: "separator" },
+  { label: "Quit", click: app.exit },
+]);
 
 /**
  * Determines the path of the tray icon image based on the OS and timer status.
  * @returns {String} the path of the image file to use
  */
-function getTrayImage () {
+function getTrayImage() {
   // Calculate percentage
-  const timerStatus = timerSystem.getStatus()
-  const percentage = timerStatus.remainingTime / timerStatus.totalDuration * 100
-  const percentageMultOfFive = Math.round(percentage / 5) * 5
+  const timerStatus = timerSystem.getStatus();
+  const percentage = (timerStatus.remainingTime / timerStatus.totalDuration) * 100;
+  const percentageMultOfFive = Math.round(percentage / 5) * 5;
 
-  const folder = isMacOS
-    ? 'template'
-    : nativeTheme.shouldUseDarkColors
-      ? 'white'
-      : 'black'
+  const folder = isMacOS ? "template" : nativeTheme.shouldUseDarkColors ? "white" : "black";
 
-  const filename = isMacOS
-    ? `${percentageMultOfFive}Template.png`
-    : `${percentageMultOfFive}.png`
-  const imagePath = path.join(__dirname, '..', '..', 'tray_assets', folder, filename)
-  const image = nativeImage.createFromPath(imagePath)
+  const filename = isMacOS ? `${percentageMultOfFive}Template.png` : `${percentageMultOfFive}.png`;
+  const imagePath = path.join(__dirname, "..", "..", "tray_assets", folder, filename);
+  const image = nativeImage.createFromPath(imagePath);
 
-  return image
+  return image;
 }
 
-function createTray () {
-  const tray = new Tray(getTrayImage())
-  tray.setToolTip(appName)
-  tray.setContextMenu(contextMenu)
-  tray.on('click', () => {
-    if (windowStillExists(mainWindow.get())) {
-      mainWindow.get().show()
-    } else {
-      mainWindow.set(createWindow('main'))
-    }
-  })
+function createTray() {
+  const tray = new Tray(getTrayImage());
+  tray.setToolTip(appName);
+  tray.setContextMenu(contextMenu);
+  tray.on("click", () => {
+    showMainWindow();
+  });
 
   // Update system tray icon on an interval
   setInterval(() => {
-    tray.setImage(getTrayImage())
-  }, 5000)
+    tray.setImage(getTrayImage());
+  }, 5000);
+}
+
+function showMainWindow() {
+  if (windowStillExists(mainWindow.get())) {
+    mainWindow.get().show();
+  } else {
+    mainWindow.set(createWindow("main"));
+    mainWindow.get().show();
+  }
 }
 
 /** Export tray reference and function to create tray */
 module.exports = {
-  createTray
-}
+  createTray,
+};

public/app/waitForDevServer.js

@@ -0,0 +1,23 @@
+const { net } = require('electron')
+
+function waitForDevServer (port = 3000) {
+  return new Promise((resolve) => {
+    const tryConnection = () => {
+      const request = net.request(`http://localhost:${port}`)
+      request.on('response', (response) => {
+        if (response.statusCode === 200) {
+          resolve()
+        } else {
+          setTimeout(tryConnection, 1000)
+        }
+      })
+      request.on('error', () => {
+        setTimeout(tryConnection, 1000)
+      })
+      request.end()
+    }
+    tryConnection()
+  })
+}
+
+module.exports = waitForDevServer

public/ipc/systemsIPC.js

@@ -54,3 +54,16 @@ ipcMain.on('get-blockers', (event) => {
 ipcMain.handle('clear-blockers', () => {
   blockerSystem.clear()
 })
+
+ipcMain.handle('cancel-break', () => {
+  breakSystem.end()
+})
+
+ipcMain.handle('delay-break', (event, seconds) => {
+  timerSystem.setDurationOverride(seconds * 1000)
+  breakSystem.end()
+})
+
+ipcMain.handle('trigger-break', () => {
+  timerSystem.end()
+})

public/store/storeSchema.js

@@ -8,13 +8,15 @@
       * enableSound (boolean)
       * interval (number)
       * sound (string)
+      * snoozeSeconds (number)
     - blockers
       * apps (array of strings)
       * blockOnBattery (boolean)
     - startup
       * startAppOnLogin (boolean)
       * startTimerOnAppStartup (boolean)
       * hideOnAppStartup (boolean)
+      * autoRestartTimer (boolean)
     - appearance
       * theme (string)
       * alwaysOnTop (boolean)
@@ -27,7 +29,8 @@ const preferencesSchema = {
       enableSound: true,
       interval: 20,
       sound: 'Long Expected.mp3',
-      soundVolume: 100
+      soundVolume: 100,
+      snoozeSeconds: 120
     },
     blockers: {
       apps: [],
@@ -36,7 +39,8 @@ const preferencesSchema = {
     startup: {
       startAppOnLogin: true,
       startTimerOnAppStartup: true,
-      hideOnAppStartup: false
+      hideOnAppStartup: false,
+      autoRestartTimer: true
     },
     appearance: {
       theme: 'system',
@@ -63,6 +67,11 @@ const preferencesSchema = {
           type: 'number',
           minimum: 0,
           maximum: 100
+        },
+        snoozeSeconds: {
+          type: 'number',
+          minimum: 10,
+          maximum: 300
         }
       },
       additionalProperties: false
@@ -85,7 +94,8 @@ const preferencesSchema = {
       properties: {
         startAppOnLogin: { type: 'boolean' },
         startTimerOnAppStartup: { type: 'boolean' },
-        hideOnAppStartup: { type: 'boolean' }
+        hideOnAppStartup: { type: 'boolean' },
+        autoRestartTimer: { type: 'boolean' }
       },
       additionalProperties: false
     },