hanziness/focustide

Modern and customizable productivity timer app that runs in your browser.

⏳ FocusTide

Free, modern and open-source timer application, right in your browser. Formerly AnotherPomodoro.

What is it?

FocusTide is a Pomodoro timer application running in the browser. It helps you manage your time so that you can do more work instead of watching videos of cute cats 😿

What you get

Here's the looong list of features this app includes.

⏰ Multiple timer styles

• (12:34) traditional
  a classic one with second-precision for those who want to know exactly how much time is left until coffee break
• (12 minutes) approximate
  this one displays time with minute-precision so you know how much time is left but your eyes won't stick to the counter since it does not change every second
• (50%) percentage
  being even less informative, this one keeps you away from the distraction of calculating "what can I do in the remaining 12 minutes and 34 seconds?".

💡 Friendly, focused and clean user interface

It's just the essentials: a timer in the middle and controls at the bottom. Everything else can be turned off:

• a quick glance at your schedule at the top
• a smart to-do list
• colour-coded sections
• colourful progress bar in the background

📑 Flexible schedule

• adjust the length of your sessions separately or use one of the built-in presets
• set how frequent long pauses are
• track the time spent beyond the timer, unlike other timers that stop when the time expires

🎵 Multiple ways to notify you

• play sounds when you finish a section
• desktop notifications so you don't have to keep checking your browser

⚙ Plenty of options

• set your schedule the way you want it
• toggle the schedule view, the progress bar or the to-do list
• enable/disable audio and/or desktop notifications
• change the number of schedule items shown
• control your timer using the keyboard
• dark and light themes
• ... and more to come in the future!

✅ Clean to-do list

• set separate tasks for work, pause and long pause sections
• only shows your top relevant tasks while the timer is running
• automatically remove completed tasks at the end of each session
• remembers your tasks across sessions

✨ Other nice-to-have features

• remembers your settings
• it's a PWA (Progressive Web App): it's fast and you can install it through your browser!
• fancy and fluid animations
• setup wizard to get you started
• translated into 5 languages

✔ No installation required.

Just open the webpage and enjoy it! You can even self-host it!

👋 Open development

Anyone can view the source code, raise issues (feature requests, bug reports) or even submit their own improvements!

⚠ Transparency warning

Production deployments (on Netlify or elsewhere) may use third-party (but privacy-friendly) tools to measure site performance.

The app itself does not collect any data (eg. when you're running it on your own machine) 💪

🖼 More screenshots

🏗 If you're a developer

This is an open-source project that welcomes contributions. Please check the contribution guidelines before opening issues, discussions or pull requests!

❤ Technologies, packages used

• NuxtJS (and thus VueJS)
  • vue-i18n for localization
  • nuxt/google-fonts for Google Fonts support
  • pinia for state management
• Tailwind CSS
• Tabler Icons through vue-tabler-icons
• Workbox as a PWA service worker
• conventional-changelog/standard-version for automatic changelog generation from conventional commits

🛠 Building or running the app yourself

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# generate the final static site
$ yarn generate

☕ Support the project

If you like this project or it has helped you, please consider buying the maintainer a coffee. You won't be annoyed to do so while using the app!

focustide's Issues

Improve metadata for social media

The app should set OpenGraph meta tags for a better sharing experience on Facebook. Similarly, Twitter-related meta tags should also be set.

Missing Hungarian translation for input error messages

On the settings panel if the language is Hungarian, entering an invalid value will trigger an English error message and a warning in the console that no translation was found. Indeed, the error object is missing from hu.js.

An example for reproduction:

1. Open the settings panel
2. Set language to Hungarian
3. Go to the Display tab
4. In the "Number of entries in schedule" field, enter 2
5. The error message saying that the value should be at least 3 is in English

Approximate timer does not fade when timer is paused

When the timer is paused or completed, the approximate timer won't become more transparent like the other timers.

Advance timer to next section using start button

Pressing the start button at the end of a section should automatically start the next section. This should bring the amount of clicks required to start a new section from 2 (next button -> start) to 1 (start).

Reset settings button

There should be a button to revert all settings to their defaults in case something went (horribly) wrong. It might be useful in situations where the app was upgraded but the persisted settings cause issues (eg. due to missing/invalid keys).

Floating settings panel

To make the settings panel more consistent with the rest of the UI: it should be made rounded and perhaps floating (with a shadow beneath it). Similarly the bottom tab bar of the panel should be rounded. The panel's in and out animations should be made more fluid.

Advancing sections doesn't reset timer state

After implementing #109, the following steps produce unexpected behaviour:

1. Complete a section's timer
2. Advance the section using the "advance" button
3. Start the timer

Expected behaviour

The timer starts in the next section and the timer state resets to "stopped".

Actual behaviour

The timer skips again to the next section (eg. if we completed "work" and advanced to "short break", it will start a "work" section again instead of the expected "short pause" one).

Feature: better, more consistent tooltips

Most buttons don't display meaningful tooltips to the user, potentially making the app more confusing. A custom tooltip solution could be implemented (similar to the index page's CSS-only tooltips on the support buttons) to provide a better understanding of the controls' functions.

Initial locales of dayjs and vue-i18n aren't always matching

When starting the app for the first time, vue-i18n and dayjs might be set to a different locale. Once the app finished loading (or the index page is mounted), the app should make sure that whatever locale vue-i18n loaded should be followed by dayjs as well.

Expected behaviour

The app's timer and labels display in the same language, even at startup.

Actual behaviour

In certain cases (primarily in browsers/systems with Hungarian language set as the default) vue-i18n might work with a different locale (which auto-detects the language) than dayjs (defaults to English).

Steps to reproduce

1. Make sure the system locale is Hungarian
2. Open the app for the first (eg. in incognito mode)

Redesign with Tailwind CSS

Based on #25 the app is not as quick as it probably could be, in part due to Vuetify. Before 1.0, an experimental redesign using Tailwind would be helpful to see if the app can be made quicker.

Things to rework

• Base HTML/CSS + general layout (fonts etc.)
• Base components (buttons, settings inputs)
• Timers
• Timer controls
• Schedule display
• Settings window

Debug timer preset is added back when settings are reset

Due to changes made for #42, resetting the settings will reintroduce the "Debug" preset even in production environments.

This calls for a refactor of the settings store as it makes little sense to store the timer presets (which will not change throughout the app).

Add meta descriptions

Pages should have descriptions along with their titles. Adding descriptions should also improve SEO.

Dark mode support

A togglable darkness-friendly mode should be implemented.

Feature: current task / task list

It might help personalize the app (and motivate users) that a user can specify what they want to do in a work/break/long pause section. Visually, they would see a "You wanted to do this: ..." reminder near the bottom of the screen. This might also help users adjust their section lengths accordingly.

Functionality planned:

• Basic TODO tracker functionality
• Persist with settings
• Ability to add separate entries for work/pause(/long pause) sections
• Pause sections might not need checkboxes
• Can be turned off entirely from the settings (like the schedule)
• Highlight top x tasks while working
• Add descriptions to entries
• Hook into starting the timer and prevent starting it without selecting tasks for the current section

Signals (notifications)

The application should provide an audible signal when a section expires. If possible, it could also send a notification through the browser - this may or may not be possible, see a description of the Notifications API (MDN).

Easier-to-use tasks panel

The current design of the tasks list causes it to frequently resize itself and its controls aren't very intuitive. Whenever it needs to be resized, it should be done fluently.

Feature: Emergency Pause / Strict mode

The app could provide a way to ask for a short pause (eg. 2 minutes) every once in a while (like every 2 sections). The idea is that we might have to leave for a short time during a work session and this feature could limit the use of the pause button (so one might not be able to pause work for a YouTube video).

The emergency pause could be part of a so-called strict mode where the pause and stop buttons are entirely removed so there is no way to stop a work session except with the use of the emergency pause.

Feature: Rewards for completing a section

To motivate users who use the app and adhere to the timers, the app could "reward" them with extra time for breaks. For example, a user might receive an extra minute in their next break for working for 25 minutes straight.

Switch to Tabler Icons

The current implementation uses Material Design Icons, but sometimes they feel out of place in the UI. Consider switching to Tabler Icons which can be customized using SVG stroke-width and fill, among others.

Social share buttons

Social media share buttons could be added to the support section to make it easier for people to share the app.

Properly show hours in traditional timer

If the user sets a section length to anything longer than 59:59 and uses the traditional timer, it will only show the minutes and seconds part of it. For example, 70:00 will render a 10:00 timer instead of either "70:00" or "1:10:00".

Settings window

Users should be able to change the app's settings through a single modal window quickly, without having to reopen/reload the app.

Improve consistency between timer and schedule

As of now, whenever a user changes their schedule, the changes only apply to the next schedule item of the same type. This is fine except in a few edge cases, like

• when the user changes schedule lengths while the timer is stopped, including
• when the app loads its persisted settings on startup.

Also note that the schedule display will always display the new timer values while the timer itself will not update to the new values.

Actual behaviour

1. The timer can end up being set to a length that does not match the current settings if the schedule settings change: the timer will not update to the new value, only the schedule display. For example, the timer might still be set to 25 minutes while the current section had already been changed to last 10 minutes.
2. If the user changes the length of the current section, they will only be able to experience a section of that length on the next occasion that section occurs. For example, if the user is already in a 25-minute-long work section and changes the length of work sections to 10 minutes, the current section will remain 25 minutes long - the upcoming work sections will correctly be set to 10 minutes long.

Expected behaviour

1. The schedule should be consistent with the timer's settings: it should not display a length that is different from the one shown by the timer.
2. Settings should apply to the current section's timer when it is in stopped state

Note

While these two problems can seemingly be split into two separate issues, they originate from the same problem: the timer length is controlled independently from the schedule lengths and is only updated when the schedule is advanced, but not when it is changed. This sync should be set up in a way that is not confusing to users. A few possible ways to solve the problem are:

• put up a warning that changing the schedule will only affect the next section of the same type - this won't solve the problem with the timer length being off when the app loads the user's settings, it also needs the schedule generation to be more flexible: the current schedule entry should not be affected when the schedule is regenerated
• disable schedule changes while the timer is running - this requires the implementation of updating the timer length on schedule changes, while the timer is stopped

Experiment: replace Vuex with Pinia

Pinia seems to be a promising alternative to Vuex while also being typed and offering an API similar to Vuex. This could help replace string-based store calls with type-safe ones, making it easier to maintain code.

It also works with Nuxt and has devtools support.

Timer progress bar "jumps" on section advance

Advancing sections causes the progress bar to transition between the previous and next colours. When a section completes the background colour should not change (because the progress bar, which is already of the next section's colour, covers the whole screen), but due to the current implementation it starts fading back into the previous section's colour and then into the next one's.

More timer presets

Currently there is only a "Default" preset in the app for the timers lengths. This should be changed to offer more pre-configured timers. The default preset can be renamed to "Pomodoro" and easier/more difficult ones (with shorter/longer work sessions) can be added.

Update dependencies

Perform upgrades on dependencies, including in package.json, where possible.

Show selected language even when no preference is set

If no lang is set as a preferred language in the application, the settings panel won't show any language highlighted (despite one of them being used).

Revamp settings panel

There are a few more touch-ups needed in the settings panel, so a few usability improvements should be implemented

• Rework the "reset settings" button (maybe as a checkbox that resets settings when the page is reloaded)
• Add an about/app info section (or tab)
• Give more distinction to the tab controls (eg. with the use of icons)
• Update form validation visuals and logic
• Update settings panel tab transitions to be more fluid

Implement tests

While the app is relatively simple, tests could help improve its quality. This might prove difficult, given the huge reliance on timing, but if possible, some form of testing would be handy.

Internationalization, localization

The app could handle multiple locales (this is mostly relevant to the settings modal and the approximate timer). The Day.js integration could make this a bit more difficult.

Adaptive timer tick rate

The application supports changing the tick rate. It should adjust ticking based on what timer is in use (eg. the approximate timer won't need a tick every second) and whether the application is in background (to reduce CPU usage).

Onboarding screens

There should be a help overlay that introduces the UI (controls, timer, settings button, schedule) to the user as currently there is no such introductory part for the app. Once keyboard shortcuts are implemented (#13), this could also have a dedicated key assigned to it (eg. H). Users should be able to show and hide it quickly.

The following onboarding screens should be created:

• Welcome screen that shortly explains the app
• (PWA/mobile only) reminder to enable notifications to be able to inform the user from the background

Audio chimes before completion

Currently the app will only notify the user when a section is complete. It could also have configurable "warning" chimes that play when there are only 5 minutes or 1 minute left to inform the user where they are in their session. Optionally notifications could be sent, too.

Delay loading of audio until timer has been started

Due to a (not so recent) change in Chromium, pages are not allowed to start an AudioContext until the user has interacted with them. At the moment, the application loads all audio files on startup and HowlerJS also starts an audio context along with them, potentially slowing down the page load and unnecessarily downloading audio files that may not be used at all.

A better solution would be to only load the audio files (and howler, too!) when the timer is started for the first time or when the timer nearly runs out. This can help reduce stress on the initially required bandwidth and also potentially help Webpack move HowlerJS into a separate chunk.

Adaptive ticking does not tick at the adjusted rate on startup

With the default settings (adaptive ticking enabled, approximate timer), the app still ticks every second, while it should only tick every 30 seconds. This can be worked around by changes reported by the visibility API (eg. by switching away from the tab and back to it). This could also mean that toggling adaptive ticking might not reflect changes in the tick interval immediately.

Expected behaviour

The app should respect tick interval changes induced by adaptive ticking even on startup. In this case, the app should already tick every 30 seconds instead of every second.

Actual behaviour

The app ticks at the default 1 second interval regardless of the settings.

Feature: persist settings

Currently, the app's settings are reset when the app is reloaded. A user might want to stick to certain custom settings and those should be persisted throughout sessions.

Plugin candidates

• nuxt-community/universal-storage-module seems promising but it had not reached 1.0 yet. Is it capable of storing Vuex state in localStorage?
• vuex-persist is not a Nuxt-specific package (though it has instructions for use with Nuxt), but it seems to be stable, well-documented and feature-rich.

Improve performance

While Vuetify is a great toolkit for building beautiful applications, sadly, performance on laptops is not optimal. More tests are needed in production builds to verify this, but opening the settings modal and moving around it seems to cause staggering on laptops.

Since the app does not require a ton of UI functionality (tabs and a modal being the most advanced ones), it might be great to consider an alternative framework for the UI of the app (maybe rebuild it with Tailwind CSS?).

Other improvements:

• Replace clip-path with transform for the timer progress
• See if timing can be moved out of the vuex state

Proper changelog management

At the moment changes are difficult to be tracked. Some are detailed in PRs, while others have information added to their release tags. This should be fixed before hitting 1.0 by a central changelog in the project root.

Candidates for changelog generation:

• conventional-changelog
• generate-changelog

Both of these require the use of conventional commits.

Feature: Keyboard shortcuts

Users should be able to manipulate the current timer with the keyboard (eg. pressing Space could start/pause the timer) to quicken the use of the application.

Onboarding, home page

First time visitors should see a dedicated page that

• explains what the app is and can do,
• how to use it and
• also present them a quick way to set the app up for first use (eg. by offering preset settings so users can quickly set a multitude of options without having to delve into the settings modal).

Tasks

• Favicon and logo
• Quickstart buttons
• Setup wizard

Improve indication of section completion

Currently the app won't change visuals to indicate that a timer had completed. To address this, the app could

• change the page's title and/or
• show a checkmark or a "section complete" message instead of the timer,
• optionally a button, too, to advance to the next section (or just highlight the advance button).

Remaining time in app title

The application should show the remaining time from the current section along with what the current section is (eg. work or break).

Add licence

The project must have a licence associated with it before it goes public. A candidate is AGPL-3.0.

Timer: percentage

Another timer could be added that only displays the percentage of the work done (eg. "42%").

Icons in disabled control buttons don't become transparent in Chromium

Applying a lower opacity on the icons won't have an effect on them in Chromium browsers (eg. Edge). This might be worked around by setting the opacity on a different level than the <span> element of the icon.

To-Do list doesn't respect dark mode

The new to-do list does not work well in dark mode: while the text colour is white, the background colours remain light and thus text becomes illegible in most conditions.

Update README

The README file should be updated to contain information about the app, eg.

• what it is about
• how to use it
• how to contribute to it
• licence
• maybe a few screenshots

Contributor's guide

A small guide should be added to aid those who would contribute to the application. It could, for example, include what to look out for, how to submit good issues/PRs etc.

Feature: Motivational messages, quotes

A periodically changing motivational message could be displayed somewhere around the timer. Users should be able to enable/disable them and the messages should be localized (#4).