Bump mobx from 5.15.6 to 5.15.7

Bumps [mobx](https://github.com/mobxjs/mobx) from 5.15.6 to 5.15.7. - [Release notes](https://github.com/mobxjs/mobx/releases) - [Changelog](https://github.com/mobxjs/mobx/blob/mobx6/CHANGELOG.md) - [Commits](https://github.com/mobxjs/mobx/compare/5.15.6...5.15.7) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
Remove batchingForReactDom
2020-10-02 01:13:03 +00:00 · 2020-09-11 09:31:18 +02:00 · 2020-09-11 09:31:18 +02:00 · 2020-09-10 14:51:58 +02:00 · 2020-09-10 14:08:30 +02:00 · 2020-09-09 10:53:55 +02:00
60 changed files with 6385 additions and 4987 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -3,6 +3,7 @@
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
-    ["@babel/plugin-proposal-optional-chaining"]
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
 }
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1 @@
-BUGSNAG_API_KEY=
 APPLICATION_ID=
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "env": {
    "browser": true,
    "commonjs": true,
@@ -22,6 +22,11 @@
    },
    "sourceType": "module"
  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
  "rules": {
    "strict": 0,
    "semi": ["error", "never"],
@@ -68,6 +73,7 @@
          "userStore"
        ]
      }
-    ]
+    ],
+    "prettier/prettier": "error"
  }
 }
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 build/
 .env
+/.idea
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+14
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "printWidth": 100
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,30 +1,179 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.

 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [Unreleased]
- Add support for starting/stopping a timer
- Show hours as HH:MM or decimal in the Bubble, depending on setting in MOCO
+## [1.5.2] - 2020-09-10

+### Fixed
+
+- Remember last tracked project and task on card
+
+## [1.5.1] - 2020-08-04

-## [1.0.18] - 2019-03-23
 ### Added
- First release of version 1
+
+- Add support for Monday
+
+## [1.5.0] - 2020-06-15
+
+### Added
+
+- Allow to override hosts for Jira, Youtrack and Gitlab in options (implemented by yay-digital.de)
+
+## [1.4.0] - 2020-04-27
+
+### Added
+
+- Add support for Gitlab merge requests and issues
+
+## [1.3.4] - 2020-01-09
+
+### Added
+
+- Asana: read task title from single task pane
+
+## [1.3.3] - 2019-10-17
+
+### Fixed
+
+- Fix an issue on Trello where the card closes when clicking the MOCO bubble
+- Asana: read project title from page heading
+
+## [1.3.2] - 2019-10-24
+
+### Added
+
+- Read project identifier from Trello board title
+
+## [1.3.1] - 2019-10-17
+
+### Fixed
+
+- Set propper focus on timer view
+
+### Removed
+
+- Find projects by identifier without alphanumerical characters
+
+## [1.3.0] - 2019-10-11
+
+### Added
+
+- Start a new timer or stop a running timer
+- Format time as set in time tracking
+- Add support for project identifier in Github Issue, Trello, Wunderlist, Youtrack
+- Find projects by identifier without alphanumerical characters
+
+## [1.2.4] - 2019-09-20
+
+### Changed
+
+- Preselect last used task per project
+
+## [1.2.3] - 2019-06-26
+
+### Changed
+
+- Description of activities are optional
+
+## [1.2.2] - 2019-05-24
+
+### Removed
+
+- Bugsnag client
+
+## [1.2.1] - 2019-05-03
+
+### Fixed
+
+- Support EU-hosted wrike.com (app-eu.wrike.com)
+
+## [1.2.0] - 2019-04-26
+
+### Added
+
+- Add support for wrike.com
+
+## [1.1.5] - 2019-04-24
+
+### Fixed
+
+- Unexpected closing of Trello card when clicking on Bubble
+
+## [1.1.4] - 2019-04-11
+
+### Added
+
+- Show customer name in the project select box
+
+## [1.1.3] - 2019-04-10
+
+### Fixed
+
+- Read projected identifier in Asana's "My tasks"-view
+
+## [1.1.2] - 2019-04-06
+
+### Fixed
+
+- Allow production build without BUGSNAG_API_KEY
+- Hours entered in brackets must be non-billable
+
+### Changed
+
+- Read project identifier also from card title in the meistertask service
+
+## [1.1.1] - 2019-04-01
+
+### Fixed
+
+- Discard projects with undefined identifier for preselecting
+
+## [1.1.0] - 2019-03-30
+
+### Added
+
+- Read project identifier from Asana project title
+- Add support for meistertask.com
+
+### Fixed
+
+- Link logo in modal to MOCO activities page
+- Set full url on service, including query params
+
+## [1.0.22] - 2019-03-28
+
+### Changed
+
+- Change the default value of subdomain to `unset` to have a well-formed URL.
+
+## [1.0.21] - 2019-03-26
+
+### Changed
+
+- Update README with example configuration and instructions for local installation
+
+## [1.0.20] - 2019-03-26
+
+### Added
+
+- Add support for tags in description

 ## [1.0.19] - 2019-03-26
+
 ### Changed
+
 - Position Bubble in the bottom right by default

 ### Fixed
+
 - Set default value of subdomain to `__unset__` to prevent network error if it is empty

-## [1.0.20] - 2019-03-26
+## [1.0.18] - 2019-03-23
+
 ### Added
- Add support for tags in description
-
-## [1.0.21] - 2019-03-26
-### Changed
- Update README with example configuration and instructions for local installation

+- First release of version 1
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019, hundertzehn GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -2,33 +2,34 @@

 ## Development

-* run `yarn`
-* run `yarn start:chrome` or `yarn start:firefox` (`yarn start` is an alias for `yarn start:chrome`)
-* load extension into browser:
-  * Chrome: visit `chrome://extensions` and load unpacked extension from `build/chrome`
-  * Firefox: visit `about:debugging` and load temporary Add-on from `build/firefox`
-* reload browser extension after change
+- run `yarn`
+- run `yarn start:chrome` or `yarn start:firefox` (`yarn start` is an alias for `yarn start:chrome`)
+- load extension into browser:
+  - Chrome: visit `chrome://extensions` and load unpacked extension from `build/chrome`
+  - Firefox: visit `about:debugging` and load temporary Add-on from `build/firefox/manifest.json`
+- the browser should automatically pick up your changes but from time to time it may be useful to reload the extension

 ## Production Build

-* bump version in `package.json`
-* run `yarn build`
-* The Chrome and Firefox extensions are available as ZIP-files in `build/chrome` and `build/firefox` respectively
+- bump version in `package.json`
+- Update `CHANGELOG.md`
+- run `yarn build`
+- The Chrome and Firefox extensions are available as ZIP-files in `build/chrome` and `build/firefox` respectively

 ## Install Local Builds

 ### Chrome

-1. `yarn build:chrome`
-1. Visit `chrome://extensions`
-2. Enable `Developer mode`
-3. `Load unpacked` and select the `build/chrome` folder.
+- `yarn build:chrome`
+- Visit `chrome://extensions`
+- Enable `Developer mode`
+- `Load unpacked` and select the `build/chrome` folder.

 ### Firefox

-1. `yarn build:firefox`
-1. Visit `about:debugging`
-2. Click on `Load temporary Add-on` and select the ZIP-file in `build/firefox`
+- `yarn build:firefox`
+- Visit `about:debugging`
+- Click on `Load temporary Add-on` and select the ZIP-file in `build/firefox`

 Only signed extensions can be permantly installed in Firefox (unless you are using <em>Firefox Developer Edition</em>). To sign the build, proceed as described in [Getting started with web-ext](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext).

@@ -36,9 +37,9 @@ You can keep the extension settings between builds by providing a stable `APPLIC

 `APPLICATION_ID=my-custom-moco-extension@mycompany.com yarn build:firefox`

-## Remote Service Configuration 
+## Remote Service Configuration

-Remote services are configured in `src/remoteServices.js`.
+Remote services are configured in `src/js/remoteServices.js`.

 A remote service is configured as follows:

@@ -46,9 +47,10 @@ A remote service is configured as follows:
 {
  service_key: {
    name: "service_name",
+    host: "https://:subdomain.example.com",
    urlPatterns: [
-      "https:\\://:subdomain.example.com/card/:id",
-      [/^https:\/\/(\w+).example.com\/card\/(\d+), ["subdomain", "id"]],
+      ":host:/card/:id",
+      [/^:host:\/card\/(\d+), ["subdomain", "id"]],
    ],
    queryParams: {
      projectId: "currentList"
@@ -59,24 +61,25 @@ A remote service is configured as follows:
        ?.textContent
        ?.trim()
      return `#${id} ${service.key} ${title || ""}`
-    },  
+    },
    projectId: (document, service, { subdomain, id, projectId }) => {
      return projectId
    },
-    position: { left: "50%", transform: "translate(-50%)" }
+    position: { left: "50%", transform: "translate(-50%)" },
+    allowHostOverride: false,
  }
 }
 ```

-| Parameter    | Description |
-|--------------|:-------------|
-| service_key  | `string` &mdash; Unique identifier for the service |
-| service_name | `string` &mdash; Must be one of the registered services `trello`, `jira`, `asana`, `wunderlist`, `github` or `youtrack` |
-| urlPatterns  | `string` \| `RegEx` &mdash; A valid URL pattern or regular expression, as described in the [url-pattern](https://www.npmjs.com/package/url-pattern) package. |
-| queryParams  | `Object` &mdash; The object value is the name of the query parameter and the key the property it will available on, e.g. the value of the query parameter `currentList` will be available under `projectId`. Matches in `urlPatterns` have precedence over matches in `queryParams`. |
-| description  | `undefined` \| `string` \| `function` &mdash; The default description of the service. If it is a function, it will receive `window.document`, the current `service` and an object with the URL `matches` as arguments, and the return value set as the default description. |
+| Parameter    | Description                                                                                                                                                                                                                                                                                                              |
+| ------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| service_key  | `string` &mdash; Unique identifier for the service                                                                                                                                                                                                                                                                       |
+| service_name | `string` &mdash; Must be one of the registered services `trello`, `jira`, `asana`, `wunderlist`, `github` or `youtrack`                                                                                                                                                                                                  |
+| urlPatterns  | `string` \| `RegEx` &mdash; A valid URL pattern or regular expression, as described in the [url-pattern](https://www.npmjs.com/package/url-pattern) package. `:host:` will be replaced with the configured host before applying the pattern (can be configured in the settings if `allowHostOverride` is true.           |
+| queryParams  | `Object` &mdash; The object value is the name of the query parameter and the key the property it will available on, e.g. the value of the query parameter `currentList` will be available under `projectId`. Matches in `urlPatterns` have precedence over matches in `queryParams`.                                     |
+| description  | `undefined` \| `string` \| `function` &mdash; The default description of the service. If it is a function, it will receive `window.document`, the current `service` and an object with the URL `matches` as arguments, and the return value set as the default description.                                              |
 | projectId    | `undefined` \| `string` \| `function` &mdash; The pre-selected project of the service matching the MOCO project identifier. If it is a function, it will receive `window.document`, the current `service` and an object with the URL `matches` as arguments, and must return the MOCO project identifier or `undefined`. |
-| position     | `Object` &mdash; CSS properties as object styles for position the bubble. Defaults to `{ right: calc(4rem + 5px)` |
+| position     | `Object` &mdash; CSS properties as object styles for position the bubble. Defaults to `{ right: calc(4rem + 5px)`                                                                                                                                                                                                        |

 ## Adding a Custom Service

--- a/package.json
+++ b/package.json
@@ -1,7 +1,8 @@
 {
  "name": "moco-browser-extensions",
  "description": "Browser plugin for MOCO",
-  "version": "1.0.21",
+  "version": "1.5.2",
+  "license": "MIT",
  "scripts": {
    "start": "yarn start:chrome",
    "start:chrome": "node_modules/.bin/webpack --config webpack.chrome.config.js --watch --env.browser chrome --env.NODE_ENV development",
@@ -15,52 +16,54 @@
    "test:watch": "node_modules/.bin/jest --watch"
  },
  "dependencies": {
-    "@bugsnag/js": "^5.2.0",
-    "@bugsnag/plugin-react": "^5.2.0",
-    "axios": "^0.18.0",
+    "@babel/polyfill": "^7.10.1",
+    "axios": "^0.19.2",
    "classnames": "^2.2.6",
-    "date-fns": "^1.30.1",
-    "dotenv": "^7.0.0",
+    "date-fns": "^2.15.0",
+    "dotenv": "^8.2.0",
    "lodash": "^4.17.11",
-    "mobx": "^5.5.0",
-    "mobx-react": "^5.2.8",
+    "mobx": "^5.15.7",
+    "mobx-react": "^6.2.2",
    "prop-types": "^15.6.2",
-    "query-string": "^6.2.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-select": "^2.3.0",
+    "query-string": "^6.12.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-select": "^3.1.0",
    "react-spring": "^8.0.7",
    "url-pattern": "^1.0.3"
  },
  "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.2",
-    "@babel/plugin-proposal-decorators": "^7.2.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
-    "@babel/preset-env": "^7.2.2",
-    "@babel/preset-react": "^7.0.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "clean-webpack-plugin": "^1.0.1",
-    "copy-webpack-plugin": "^4.6.0",
-    "copyfiles": "^2.1.0",
-    "css-loader": "^2.1.0",
-    "eslint": "^5.7.0",
-    "eslint-plugin-jest": "^22.2.2",
-    "eslint-plugin-react": "^7.11.1",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.11.0",
-    "prettier": "^1.16.4",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "uuid": "^3.3.2",
-    "webpack": "^4.15.0",
-    "webpack-bugsnag-plugins": "^1.3.0",
-    "webpack-cli": "^3.0.8",
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.10.1",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^4.0.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.0.2",
+    "copyfiles": "^2.3.0",
+    "css-loader": "^4.2.0",
+    "eslint": "7.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-jest": "^23.13.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "jest": "^26.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
+    "sass-loader": "^9.0.2",
+    "style-loader": "^1.2.1",
+    "svg-inline-loader": "^0.8.2",
+    "uuid": "^8.3.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
    "zip-webpack-plugin": "^3.0.0"
  }
 }
--- a/src/css/_button.scss
+++ b/src/css/_button.scss
@@ -7,17 +7,25 @@ button.moco-bx-btn {
  white-space: nowrap;
  color: white;
  background-image: none;
-  background-color: #7dc332;
-  border-color: #7dc332;
+  background-color: $green;
+  border-color: $green;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  font-size: 100%;
  cursor: pointer;

+  &:focus {
+    outline: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
  &:hover:not(:disabled) {
-    background-color: #639a28;
-    border-color: #639a28;
+    background-color: $green-dark;
+    border-color: $green-dark;
  }

  &:disabled {
@@ -40,3 +48,17 @@ button.moco-bx-btn {
    margin-left: 0.5rem;
  }
 }
+
+.moco-bx-btn__secondary {
+  color: $blue;
+  border: none;
+  background: none;
+  text-decoration: none;
+
+  &:hover {
+    cursor: pointer;
+    color: $blue;
+    border: none;
+    background-color: transparent;
+  }
+}
--- a/src/css/_form.scss
+++ b/src/css/_form.scss
@@ -1,3 +1,4 @@
+@import "variables";
@import "button";

 input {
@@ -15,7 +16,8 @@ input {
    margin-bottom: 0.25rem;
  }

-  input, textarea {
+  input,
+  textarea {
    padding: 6px 12px;
    background-color: white;
    border-color: #cccccc;
@@ -24,6 +26,10 @@ input {
    border-style: solid;
    border-width: 1px;
    min-height: 20px;
+
+    &::placeholder {
+      color: #ccc;
+    }
  }

  .text-muted {
@@ -31,13 +37,14 @@ input {
  }

  &.has-error {
-    input, textarea {
-      border-color: #FB3A2F;
+    input,
+    textarea {
+      border-color: $red;
    }
  }

  .form-error {
-    color: #FB3A2F;
+    color: $red;
  }

  .input-group {
@@ -56,8 +63,13 @@ input {
      text-align: center;
      background-color: #eeeeee;
      border: 1px solid #cccccc;
-      border-left: none;
      line-height: 18px;
+      &--right {
+        border-left: none;
+      }
+      &--left {
+        border-right: none;
+      }
    }
  }
 }
@@ -71,8 +83,8 @@ input[name="hours"] {
  outline: 0 !important;

  &:focus {
-    border: 1px solid #38b5eb;
-    box-shadow: 0 0 0 1px #38b5eb;
+    border: 1px solid $blue;
+    box-shadow: 0 0 0 1px $blue;
  }
 }

@@ -84,8 +96,7 @@ textarea[name="description"] {
  outline: 0 !important;

  &:focus {
-    border: 1px solid #38b5eb;
-    box-shadow: 0 0 0 1px #38b5eb;
+    border: 1px solid $blue;
+    box-shadow: 0 0 0 1px $blue;
  }
 }
-
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -1,5 +1,10 @@
-$font-family: Arial, sans-serif;
+$font-family: Roboto, Arial, sans-serif;
 $font-color: #191919;
 $popup-width: 420px;
 $popup-height: 463px;

+$green: #7dc332;
+$green-dark: #639a28;
+$blue: #38b5eb;
+$red: #fb3a2f;
+$gray-base: #a3a3a3;
--- a/src/css/content.scss
+++ b/src/css/content.scss
@@ -4,6 +4,11 @@
 #moco-bx-root {
  font-family: $font-family;
  color: $font-color;
+  pointer-events: all;
+
+  .text-red {
+    color: $red;
+  }

  .moco-bx-bubble {
    box-sizing: content-box;
@@ -13,8 +18,7 @@
    width: 60px;
    background-color: white;
    border-radius: 50%;
-    box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
-    2px 2px 15px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05), 2px 2px 15px 4px rgba(0, 0, 0, 0.05);
    padding: 5px;
    z-index: 9999;

@@ -48,6 +52,7 @@
 #moco-bx-popup-root {
  font-family: $font-family;
  color: $font-color;
+  pointer-events: all;

  iframe {
    border: 0;
@@ -58,16 +63,16 @@
  }

  .moco-bx-popup {
-    position: fixed; /* Stay in place */
-    z-index: 2000; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
+    position: fixed;
+    z-index: 2000;
+    padding-top: 100px;
    left: 0;
    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0, 0, 0); /* Fallback color */
-    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 9999;

    .moco-bx-popup-content {
      background-color: white;
--- a/src/css/options.scss
+++ b/src/css/options.scss
@@ -11,6 +11,11 @@
  .moco-bx-options {
    padding: 0rem 2rem 2rem;

+    a {
+      color: $blue;
+      text-decoration: none;
+    }
+
    p {
      margin: 0.5rem 0;
    }
@@ -20,6 +25,11 @@
      margin: 1rem 0 2rem;
    }

+    h3 {
+      font-size: 1.1rem;
+      margin: 1rem 0 1rem;
+    }
+
    label {
      font-weight: normal;
      margin-bottom: 5px;
@@ -32,11 +42,21 @@
    }

    .text-success {
-      color: #7DC332;
+      color: $green;
    }

    .text-danger {
-      color: #FB3A2F;
+      color: $red;
+    }
+
+    &__host-overrides {
+      margin-bottom: 1.5rem;
+      text-align: center;
+      font-weight: normal;
+    }
+
+    small {
+      font-size: 0.8rem;
    }
  }
 }
--- a/src/css/popup.scss
+++ b/src/css/popup.scss
@@ -1,6 +1,6 @@
+@import "variables";
@import "form";
@import "spinner";
-@import "variables";

 html {
  overflow: hidden;
@@ -14,33 +14,48 @@ html {
    #moco-bx-root {
      min-width: 516px;

+      h1 {
+        font-size: 24px;
+        font-weight: normal;
+        line-height: 1.5;
+        margin-top: 1rem;
+        margin-bottom: 3rem;
+      }
+
+      h2 {
+        font-size: 20px;
+        font-weight: normal;
+        line-height: 1.5;
+        margin-top: 1rem;
+        margin-bottom: 3rem;
+      }
+
+      .text-red {
+        color: $red;
+      }
+
+      .text-secondary {
+        color: $gray-base;
+      }
+
      .moco-bx-app-container {
        width: 324px;
        padding: 3rem 6rem;

        .moco-bx-logo__container {
-          display: flex;
-          justify-content: center;
          margin-bottom: 3rem;
          text-align: center;

          img.moco-bx-logo {
-            flex: 0 0 48px;
            width: 48px;
            height: 48px;
-
-          }
-
-          h1 {
-            line-height: 48px;
-            margin: 0;
          }
        }

        .moco-bx-calendar {
          display: flex;
          justify-content: space-between;
-          margin-bottom: 3rem;
+          margin-bottom: 2rem;

          .moco-bx-calendar__day {
            display: flex;
@@ -66,12 +81,11 @@ html {
              flex: 0 0 42px;
              color: white;
              background-color: #eee;
-
            }

            &.moco-bx-calendar__day--filled {
              .moco-bx-calendar__hours {
-                background-color: #7dc332;
+                background-color: $green;
              }
            }

@@ -84,43 +98,73 @@ html {

            &.moco-bx-calendar__day--active {
              .moco-bx-calendar__hours {
-                background-color: #38b5eb;
+                background-color: $blue;
              }
            }
          }
        }
+
+        .moco-bx-timer-view {
+          text-align: center;
+          margin-top: 3rem;
+
+          h2 {
+            margin-top: 2rem;
+            max-height: 90px;
+            overflow: hidden;
+          }
+
+          p {
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+            line-height: 1.2rem;
+          }
+
+          span.moco-bx-single-line {
+            display: inline-block;
+            max-height: 19px;
+            overflow: hidden;
+          }
+
+          .timer {
+            margin-top: 2rem;
+          }
+
+          .btn-stop-timer {
+            margin-top: 1.5rem;
+            background-color: $red;
+            border: none;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+          }
+        }
      }

      .moco-bx-error-container {
-        font-size: 18px;
        line-height: 1.5;
        width: 420px;
        padding: 3rem;
        text-align: center;

-        h1 {
-          font-size: 35px;
-          font-weight: normal;
-          margin-top: 0;
-          line-height: 1.3;
-        }
-
        img {
-          width: auto;
-          max-width: 100%;
+          margin-top: 1.5rem;
+          margin-bottom: 2rem;

          &.moco-bx-logo {
            width: 48px;
            margin-bottom: 2rem;
          }
-        }

-        ol {
-          text-align: left;
+          &.firefox-addons {
+            margin-top: 0;
+            width: auto;
+          }
        }

        button {
          margin-top: 1.5rem;
+          margin-bottom: 1.5rem;
        }
      }
    }
--- a/src/images/icons/stopwatch-light.svg
+++ b/src/images/icons/stopwatch-light.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M393.3 141.3l17.5-17.5c4.7-4.7 4.7-12.3 0-17l-5.7-5.7c-4.7-4.7-12.3-4.7-17 0l-17.5 17.5c-35.8-31-81.5-50.9-131.7-54.2V32h25c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12h-80c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h23v32.6C91.2 73.3 0 170 0 288c0 123.7 100.3 224 224 224s224-100.3 224-224c0-56.1-20.6-107.4-54.7-146.7zM224 480c-106.1 0-192-85.9-192-192S117.9 96 224 96s192 85.9 192 192-85.9 192-192 192zm4-128h-8c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v168c0 6.6-5.4 12-12 12z"></path></svg>
--- a/src/images/moco-159x159.png
+++ b/src/images/moco-159x159.png
--- a/src/images/moco-32x32.png
+++ b/src/images/moco-32x32.png
--- a/src/images/moco-timer-32x32.png
+++ b/src/images/moco-timer-32x32.png
--- a/src/js/api/Client.js
+++ b/src/js/api/Client.js
@@ -3,19 +3,15 @@ import { formatDate } from "utils"

 const baseURL = subdomain => {
  if (process.env.NODE_ENV === "production") {
-    return `https://${encodeURIComponent(
-      subdomain
-    )}.mocoapp.com/api/browser_extensions`
+    return `https://${encodeURIComponent(subdomain)}.mocoapp.com/api/browser_extensions`
  } else {
-    return `http://${encodeURIComponent(
-      subdomain
-    )}.mocoapp.localhost:3001/api/browser_extensions`
+    return `http://${encodeURIComponent(subdomain)}.mocoapp.localhost:3000/api/browser_extensions`
  }
 }

 export default class Client {
-  #client;
-  #apiKey;
+  #client
+  #apiKey

  constructor({ subdomain, apiKey, version }) {
    this.#apiKey = apiKey
@@ -25,9 +21,9 @@ export default class Client {
      headers: {
        common: {
          "x-api-key": apiKey,
-          "x-extension-version": version
-        }
-      }
+          "x-extension-version": version,
+        },
+      },
    })
  }

@@ -35,29 +31,31 @@ export default class Client {
    this.#client.post("session", {
      api_key: this.#apiKey,
      remote_service: service?.name,
-      remote_id: service?.id
-    });
+      remote_id: service?.id,
+    })

-  projects = () => this.#client.get("projects");
+  projects = () => this.#client.get("projects")

  schedules = (fromDate, toDate) =>
    this.#client.get("schedules", {
-      params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` }
-    });
+      params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` },
+    })

  activities = (fromDate, toDate) =>
    this.#client.get("activities", {
-      params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` }
-    });
+      params: { date: `${formatDate(fromDate)}:${formatDate(toDate)}` },
+    })

-  bookedHours = service => {
+  activitiesStatus = service => {
    if (!service) {
      return Promise.resolve({ data: { hours: 0 } })
    }
-    return this.#client.get("activities/tags", {
-      params: { selection: [service.id], remote_service: service.name }
+    return this.#client.get("activities/status", {
+      params: { remote_id: service.id, remote_service: service.name },
    })
-  };
+  }

-  createActivity = activity => this.#client.post("activities", { activity });
+  createActivity = activity => this.#client.post("activities", { activity })
+
+  stopTimer = timedActivity => this.#client.get(`activities/${timedActivity.id}/stop_timer`)
 }
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -1,19 +1,40 @@
+import "@babel/polyfill"
 import ApiClient from "api/Client"
-import {
-  isChrome,
-  getCurrentTab,
-  getSettings,
-  isBrowserTab
-} from "utils/browser"
+import { isChrome, getCurrentTab, getSettings, isBrowserTab } from "utils/browser"
 import { BackgroundMessenger } from "utils/messaging"
-import {
-  tabUpdated,
-  settingsChanged,
-  togglePopup
-} from "utils/messageHandlers"
+import { tabUpdated, settingsChanged, togglePopup, openPopup } from "utils/messageHandlers"
+import { isNil } from "lodash"

 const messenger = new BackgroundMessenger()

+function timerStoppedForCurrentService(service, timedActivity) {
+  return timedActivity.service_id && timedActivity.service_id === service?.id
+}
+
+function resetBubble({ tab, settings, service, timedActivity }) {
+  const apiClient = new ApiClient(settings)
+  apiClient
+    .activitiesStatus(service)
+    .then(({ data }) => {
+      messenger.postMessage(tab, {
+        type: "showBubble",
+        payload: {
+          bookedSeconds: data.seconds,
+          timedActivity: data.timed_activity,
+          settingTimeTrackingHHMM: settings.settingTimeTrackingHHMM,
+          service,
+        },
+      })
+    })
+    .then(() => {
+      if (isNil(timedActivity) || timerStoppedForCurrentService(service, timedActivity)) {
+        messenger.postMessage(tab, { type: "closePopup" })
+      } else {
+        openPopup(tab, { service, messenger })
+      }
+    })
+}
+
 messenger.on("togglePopup", () => {
  getCurrentTab().then(tab => {
    if (tab && !isBrowserTab(tab)) {
@@ -39,23 +60,12 @@ chrome.runtime.onMessage.addListener(action => {
        const apiClient = new ApiClient(settings)
        apiClient
          .createActivity(activity)
-          .then(() => {
-            messenger.postMessage(tab, { type: "closePopup" })
-            apiClient.bookedHours(service).then(({ data }) => {
-              messenger.postMessage(tab, {
-                type: "showBubble",
-                payload: {
-                  bookedHours: parseFloat(data[0]?.hours) || 0,
-                  service
-                }
-              })
-            })
-          })
+          .then(() => resetBubble({ tab, settings, service }))
          .catch(error => {
            if (error.response?.status === 422) {
              chrome.runtime.sendMessage({
                type: "setFormErrors",
-                payload: error.response.data
+                payload: error.response.data,
              })
            }
          })
@@ -63,6 +73,19 @@ chrome.runtime.onMessage.addListener(action => {
    })
  }

+  if (action.type === "stopTimer") {
+    const { timedActivity, service } = action.payload
+    getCurrentTab().then(tab => {
+      getSettings().then(settings => {
+        const apiClient = new ApiClient(settings)
+        apiClient
+          .stopTimer(timedActivity)
+          .then(() => resetBubble({ tab, settings, service, timedActivity }))
+          .catch(() => null)
+      })
+    })
+  }
+
  if (action.type === "openOptions") {
    let url
    if (isChrome()) {
--- a/src/js/components/App.js
+++ b/src/js/components/App.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import Spinner from "components/Spinner"
 import Form from "components/Form"
 import Calendar from "components/Calendar"
+import TimerView from "components/App/TimerView"
 import { observable, computed } from "mobx"
 import { Observer, observer } from "mobx-react"
 import { Spring, animated, config } from "react-spring/renderprops"
@@ -14,15 +15,17 @@ import {
  findProjectByValue,
  findProjectByIdentifier,
  findTask,
-  formatDate
+  defaultTask,
+  formatDate,
 } from "utils"
+import { parseISO } from "date-fns"
 import InvalidConfigurationError from "components/Errors/InvalidConfigurationError"
 import UpgradeRequiredError from "components/Errors/UpgradeRequiredError"
 import UnknownError from "components/Errors/UnknownError"
-import { parse } from "date-fns"
 import Header from "./shared/Header"
 import { head } from "lodash"
 import TimeInputParser from "utils/TimeInputParser"
+import {get} from "lodash/fp";

@observer
 class App extends Component {
@@ -34,55 +37,74 @@ class App extends Component {
      name: PropTypes.string,
      description: PropTypes.string,
      projectId: PropTypes.string,
-      taskId: PropTypes.string
+      taskId: PropTypes.string,
    }),
+    subdomain: PropTypes.string,
    activities: PropTypes.array,
    schedules: PropTypes.array,
    projects: PropTypes.array,
+    timedActivity: PropTypes.shape({
+      customer_name: PropTypes.string.isRequired,
+      assignment_name: PropTypes.string.isRequired,
+      task_name: PropTypes.string.isRequired,
+      timer_started_at: PropTypes.string.isRequired,
+      seconds: PropTypes.number.isRequired,
+    }),
    lastProjectId: PropTypes.number,
    lastTaskId: PropTypes.number,
-    roundTimeEntries: PropTypes.bool,
    fromDate: PropTypes.string,
    toDate: PropTypes.string,
    errorType: PropTypes.string,
-    errorMessage: PropTypes.string
-  };
+    errorMessage: PropTypes.string,
+  }

  static defaultProps = {
    activities: [],
    schedules: [],
    projects: [],
-    roundTimeEntries: false
-  };
+  }

-  @observable changeset = {};
-  @observable formErrors = {};
+  @observable changeset = {}
+  @observable formErrors = {}
+
+  @computed get project() {
+    const { service, projects, lastProjectId } = this.props
+
+    return (
+      findProjectByValue(this.changeset.assignment_id)(projects) ||
+      findProjectByValue(Number(lastProjectId))(projects) ||
+      findProjectByIdentifier(service?.projectId)(projects) ||
+      head(projects.flatMap(get("options")))
+    )
+  }
+
+  @computed get task() {
+    const { service, lastTaskId } = this.props
+    return (
+      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(this.project) ||
+      defaultTask(this.project?.tasks)
+    )
+  }
+
+  @computed get billable() {
+    return /\(.+\)/.test(this.changeset.hours) === true ? false : !!this.task?.billable
+  }

  @computed get changesetWithDefaults() {
-    const { service, projects, lastProjectId, lastTaskId } = this.props
-
-    const project =
-      findProjectByIdentifier(service?.projectId)(projects) ||
-      findProjectByValue(Number(lastProjectId))(projects) ||
-      head(projects)
-
-    const task =
-      findTask(service?.taskId || lastTaskId)(project) || head(project?.tasks)
+    const { service } = this.props

    const defaults = {
      remote_service: service?.name,
      remote_id: service?.id,
      remote_url: service?.url,
      date: formatDate(new Date()),
-      assignment_id: project?.value,
-      task_id: task?.value,
-      billable: task?.billable,
+      assignment_id: this.project?.value,
+      task_id: this.task?.value,
+      billable: this.billable,
      hours: "",
-      seconds:
-        this.changeset.hours &&
-        new TimeInputParser(this.changeset.hours).parseSeconds(),
-      description: service?.description,
-      tag: ""
+      seconds: new TimeInputParser(this.changeset.hours).parseSeconds(),
+      description: service?.description || "",
+      tag: "",
    }

    return { ...defaults, ...this.changeset }
@@ -90,6 +112,7 @@ class App extends Component {

  componentDidMount() {
    window.addEventListener("keydown", this.handleKeyDown)
+    parent.postMessage({ __mocoBX: { iFrameHeight: window.document.body.scrollHeight } }, "*")
    chrome.runtime.onMessage.addListener(this.handleSetFormErrors)
  }

@@ -98,25 +121,34 @@ class App extends Component {
    chrome.runtime.onMessage.removeListener(this.handleSetFormErrors)
  }

-  handleChange = event => {
+  handleChange = (event) => {
    const { projects } = this.props
    const {
-      target: { name, value }
+      target: { name, value },
    } = event

    this.changeset[name] = value

    if (name === "assignment_id") {
      const project = findProjectByValue(value)(projects)
-      this.changeset.task_id = head(project?.tasks).value || null
+      this.changeset.task_id = defaultTask(project?.tasks)?.value
    }
-  };
+  }

-  handleSelectDate = date => {
+  handleSelectDate = (date) => {
    this.changeset.date = formatDate(date)
-  };
+  }

-  handleSubmit = event => {
+  handleStopTimer = (timedActivity) => {
+    const { service } = this.props
+
+    chrome.runtime.sendMessage({
+      type: "stopTimer",
+      payload: { timedActivity, service },
+    })
+  }
+
+  handleSubmit = (event) => {
    event.preventDefault()
    const { service } = this.props

@@ -124,34 +156,36 @@ class App extends Component {
      type: "createActivity",
      payload: {
        activity: extractAndSetTag(this.changesetWithDefaults),
-        service
-      }
+        service,
+      },
    })
-  };
+  }

-  handleKeyDown = event => {
+  handleKeyDown = (event) => {
    if (event.keyCode === 27) {
      event.stopPropagation()
      chrome.runtime.sendMessage({ type: "closePopup" })
    }
-  };
+  }

  handleSetFormErrors = ({ type, payload }) => {
    if (type === "setFormErrors") {
      this.formErrors = payload
    }
-  };
+  }

  render() {
    const {
      loading,
+      subdomain,
      projects,
+      timedActivity,
      activities,
      schedules,
      fromDate,
      toDate,
      errorType,
-      errorMessage
+      errorMessage,
    } = this.props

    if (loading) {
@@ -171,35 +205,34 @@ class App extends Component {
    }

    return (
-      <Spring
-        native
-        from={{ opacity: 0 }}
-        to={{ opacity: 1 }}
-        config={config.stiff}
-      >
-        {props => (
+      <Spring native from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.stiff}>
+        {(props) => (
          <animated.div className="moco-bx-app-container" style={props}>
-            <Header />
+            <Header subdomain={subdomain} />
            <Observer>
-              {() => (
-                <>
-                  <Calendar
-                    fromDate={parse(fromDate)}
-                    toDate={parse(toDate)}
-                    activities={activities}
-                    schedules={schedules}
-                    selectedDate={new Date(this.changesetWithDefaults.date)}
-                    onChange={this.handleSelectDate}
-                  />
-                  <Form
-                    changeset={this.changesetWithDefaults}
-                    projects={projects}
-                    errors={this.formErrors}
-                    onChange={this.handleChange}
-                    onSubmit={this.handleSubmit}
-                  />
-                </>
-              )}
+              {() =>
+                timedActivity ? (
+                  <TimerView timedActivity={timedActivity} onStopTimer={this.handleStopTimer} />
+                ) : (
+                  <>
+                    <Calendar
+                      fromDate={parseISO(fromDate)}
+                      toDate={parseISO(toDate)}
+                      activities={activities}
+                      schedules={schedules}
+                      selectedDate={new Date(this.changesetWithDefaults.date)}
+                      onChange={this.handleSelectDate}
+                    />
+                    <Form
+                      changeset={this.changesetWithDefaults}
+                      projects={projects}
+                      errors={this.formErrors}
+                      onChange={this.handleChange}
+                      onSubmit={this.handleSubmit}
+                    />
+                  </>
+                )
+              }
            </Observer>
          </animated.div>
        )}
--- a/src/js/components/App/TimerView.js
+++ b/src/js/components/App/TimerView.js
@@ -0,0 +1,45 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Timer from "components/shared/Timer"
+import { parseISO } from "date-fns"
+import StopWatch from "components/shared/StopWatch"
+
+export default function TimerView({ timedActivity, onStopTimer }) {
+  const handleStopTimer = () => {
+    onStopTimer(timedActivity)
+  }
+
+  return (
+    <div className="moco-bx-timer-view">
+      <p>
+        <span className="moco-bx-single-line text-secondary">{timedActivity.customer_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.assignment_name}</span>
+        <br />
+        <span className="moco-bx-single-line">{timedActivity.task_name}</span>
+      </p>
+      <h2>{timedActivity.description}</h2>
+      <Timer
+        className="timer text-red"
+        startedAt={parseISO(timedActivity.timer_started_at)}
+        offset={timedActivity.seconds}
+        style={{ fontSize: "36px", display: "inline-block" }}
+      />
+      <button className="moco-bx-btn btn-stop-timer" onClick={handleStopTimer} autoFocus>
+        <StopWatch />
+      </button>
+    </div>
+  )
+}
+
+TimerView.propTypes = {
+  timedActivity: PropTypes.shape({
+    customer_name: PropTypes.string.isRequired,
+    assignment_name: PropTypes.string.isRequired,
+    task_name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    timer_started_at: PropTypes.string.isRequired,
+    seconds: PropTypes.number.isRequired,
+  }).isRequired,
+  onStopTimer: PropTypes.func.isRequired,
+}
--- a/src/js/components/Bubble.js
+++ b/src/js/components/Bubble.js
@@ -1,23 +1,46 @@
 import React from "react"
 import PropTypes from "prop-types"
-import logoUrl from "images/logo.png"
+import mocoLogo from "images/moco-32x32.png"
+import mocoTimerLogo from "images/moco-timer-32x32.png"
+import { parseISO } from "date-fns"
+import { formatDuration } from "utils"
+import Timer from "./shared/Timer"

-const Bubble = ({ bookedHours, onClick }) => (
-  <div className="moco-bx-bubble-inner" onClick={onClick}>
-    <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
-    {bookedHours > 0 ? (
-      <span className="moco-bx-booked-hours">{bookedHours.toFixed(2)}</span>
-    ) : null}
-  </div>
-)
+const Bubble = ({ bookedSeconds, timedActivity, settingTimeTrackingHHMM }) => {
+  const logo = timedActivity ? mocoTimerLogo : mocoLogo
+
+  return (
+    <div className="moco-bx-bubble-inner">
+      <img className="moco-bx-logo" src={chrome.extension.getURL(logo)} />
+      {!timedActivity && bookedSeconds > 0 && (
+        <span className="moco-bx-booked-hours">
+          {formatDuration(bookedSeconds, { settingTimeTrackingHHMM, showSeconds: false })}
+        </span>
+      )}
+      {timedActivity && (
+        <Timer
+          className="text-red"
+          startedAt={parseISO(timedActivity.timer_started_at)}
+          offset={timedActivity.seconds}
+          style={{ marginBottom: "3px", fontSize: "12px" }}
+        />
+      )}
+    </div>
+  )
+}

 Bubble.propTypes = {
-  bookedHours: PropTypes.number,
-  onClick: PropTypes.func.isRequired
+  bookedSeconds: PropTypes.number,
+  timedActivity: PropTypes.shape({
+    timer_started_at: PropTypes.string.isRequired,
+    seconds: PropTypes.number.isRequired,
+  }),
+  settingTimeTrackingHHMM: PropTypes.bool,
 }

 Bubble.defaultProps = {
-  bookedHours: 0
+  bookedSeconds: 0,
+  settingTimeTrackingHHMM: false,
 }

 export default Bubble
--- a/src/js/components/Calendar/Day.js
+++ b/src/js/components/Calendar/Day.js
@@ -10,15 +10,11 @@ const Day = ({ date, hours, absence, active, onClick }) => {

  return (
    <div
-      className={cn(
-        "moco-bx-calendar__day",
-        `moco-bx-calendar__day--week-day-${getDay(date)}`,
-        {
-          "moco-bx-calendar__day--active": active,
-          "moco-bx-calendar__day--filled": hours > 0,
-          "moco-bx-calendar__day--absence": absence
-        }
-      )}
+      className={cn("moco-bx-calendar__day", `moco-bx-calendar__day--week-day-${getDay(date)}`, {
+        "moco-bx-calendar__day--active": active,
+        "moco-bx-calendar__day--filled": hours > 0,
+        "moco-bx-calendar__day--absence": absence,
+      })}
      onClick={handleClick}
    >
      <span className="moco-bx-calendar__day-of-week">
@@ -34,7 +30,7 @@ Day.propTypes = {
  hours: PropTypes.number.isRequired,
  absence: PropTypes.object,
  active: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }

 export default Day
--- a/src/js/components/Calendar/Hours.js
+++ b/src/js/components/Calendar/Hours.js
@@ -35,9 +35,9 @@ Hours.propTypes = {
  hours: PropTypes.number.isRequired,
  absence: PropTypes.shape({
    assignment_code: PropTypes.string,
-    assignment_color: PropTypes.string
+    assignment_color: PropTypes.string,
  }),
-  active: PropTypes.bool.isRequired
+  active: PropTypes.bool.isRequired,
 }

 export default Hours
--- a/src/js/components/Calendar/index.js
+++ b/src/js/components/Calendar/index.js
@@ -2,27 +2,19 @@ import React from "react"
 import PropTypes from "prop-types"
 import Day from "./Day"
 import { formatDate } from "utils"
-import { eachDay } from "date-fns"
+import { eachDayOfInterval } from "date-fns"
 import { pathEq } from "lodash/fp"

-const findAbsence = (date, schedules) =>
-  schedules.find(pathEq("date", formatDate(date)))
+const findAbsence = (date, schedules) => schedules.find(pathEq("date", formatDate(date)))

 const hoursAtDate = (date, activities) =>
  activities
    .filter(pathEq("date", formatDate(date)))
    .reduce((acc, activity) => acc + activity.hours, 0)

-const Calendar = ({
-  fromDate,
-  toDate,
-  selectedDate,
-  activities,
-  schedules,
-  onChange
-}) => (
+const Calendar = ({ fromDate, toDate, selectedDate, activities, schedules, onChange }) => (
  <div className="moco-bx-calendar">
-    {eachDay(fromDate, toDate).map(date => (
+    {eachDayOfInterval({ start: fromDate, end: toDate }).map(date => (
      <Day
        key={date}
        date={date}
@@ -44,17 +36,17 @@ Calendar.propTypes = {
      id: PropTypes.number.isRequired,
      date: PropTypes.string.isRequired,
      hours: PropTypes.number.isRequired,
-      timer_started_at: PropTypes.string
-    }).isRequired
+      timer_started_at: PropTypes.string,
+    }).isRequired,
  ),
  schedules: PropTypes.arrayOf(
    PropTypes.shape({
      date: PropTypes.string,
      assignment_code: PropTypes.string,
-      assignment_color: PropTypes.string
-    })
+      assignment_color: PropTypes.string,
+    }),
  ).isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
 }

 export default Calendar
--- a/src/js/components/Errors/InvalidConfigurationError.js
+++ b/src/js/components/Errors/InvalidConfigurationError.js
@@ -3,25 +3,23 @@ import settingsUrl from "images/settings.png"

 const InvalidConfigurationError = () => (
  <div className="moco-bx-error-container">
-    <h1>Bitte Einstellungen aktualisieren</h1>
-    <ol>
-      <li>Internetadresse eintragen</li>
-      <li>Persönlichen API-Schlüssel eintragen</li>
-    </ol>
+    <h1>MOCO verbinden</h1>
+    <p>
+      Dazu trägst Du in den Einstellungen Deine Account-Internetadresse und Deinen API-Schlüssel
+      ein.
+    </p>
+    <img
+      src={chrome.extension.getURL(settingsUrl)}
+      alt="Browser extension configuration settings"
+      style={{ cursor: "pointer", width: "185px", height: "195px" }}
+      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
+    />
    <button
      className="moco-bx-btn"
      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
    >
-      Einstellungen öffnen
+      Weiter zu den Einstellungen
    </button>
-    <br />
-    <br />
-    <img
-      src={chrome.extension.getURL(settingsUrl)}
-      alt="Browser extension configuration settings"
-      style={{ cursor: "pointer" }}
-      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
-    />
  </div>
 )

--- a/src/js/components/Errors/UnknownError.js
+++ b/src/js/components/Errors/UnknownError.js
@@ -1,21 +1,24 @@
 import React from "react"
 import PropTypes from "prop-types"
-import logo from "images/logo.png"
+import logo from "images/moco-159x159.png"

 const UnknownError = ({ message = "Unbekannter Fehler" }) => (
  <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
    <h1>Ups, es ist ein Fehler passiert!</h1>
    <p>Bitte überprüfe deine Internetverbindung.</p>
-    <p>Wir wurden per Email benachrichtigt und untersuchen den Vorfall.</p>
-    <br />
    <p>Fehlermeldung:</p>
    <pre>{message}</pre>
  </div>
 )

 UnknownError.propTypes = {
-  message: PropTypes.string
+  message: PropTypes.string,
 }

 export default UnknownError
--- a/src/js/components/Errors/UpgradeRequiredError.js
+++ b/src/js/components/Errors/UpgradeRequiredError.js
@@ -1,16 +1,18 @@
 import React from "react"
 import { isChrome } from "utils/browser"
-import logo from "images/logo.png"
+import logo from "images/moco-159x159.png"
 import firefoxAddons from "images/firefox_addons.png"

 const UpgradeRequiredError = () => (
  <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
-    <h1>Upgrade erforderlich</h1>
-    <p>
-      Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte
-      aktualisieren.
-    </p>
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
+    <h1>Bitte aktualisieren</h1>
+    <p>Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte aktualisieren.</p>
    {isChrome() ? (
      <button
        className="moco-bx-btn"
@@ -20,11 +22,11 @@ const UpgradeRequiredError = () => (
      </button>
    ) : (
      <>
-        <br />
        <p>Unter folgender URL:</p>
        <img
          className="firefox-addons"
          src={firefoxAddons}
+          style={{ width: "292px", height: "40px" }}
          alt="about:addons"
        />
      </>
--- a/src/js/components/Form.js
+++ b/src/js/components/Form.js
@@ -1,31 +1,71 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import Select from "components/Select"
+import { formatDate } from "utils"
 import cn from "classnames"
+import StopWatch from "components/shared/StopWatch"

 class Form extends Component {
  static propTypes = {
    changeset: PropTypes.shape({
-      project: PropTypes.object,
-      task: PropTypes.object,
-      hours: PropTypes.string
+      assignment_id: PropTypes.number.isRequired,
+      billable: PropTypes.bool.isRequired,
+      date: PropTypes.string.isRequired,
+      task_id: PropTypes.number.isRequired,
+      description: PropTypes.string,
+      remote_id: PropTypes.string,
+      remote_service: PropTypes.string,
+      remote_url: PropTypes.string,
+      seconds: PropTypes.number,
+      hours: PropTypes.string,
    }).isRequired,
    errors: PropTypes.object,
    projects: PropTypes.array.isRequired,
    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired
-  };
+    onSubmit: PropTypes.func.isRequired,
+  }

  static defaultProps = {
-    inline: true
-  };
+    inline: true,
+  }

-  isValid = () => {
+  isValid() {
    const { changeset } = this.props
-    return ["assignment_id", "task_id", "hours", "description"]
-      .map(prop => changeset[prop])
-      .every(Boolean)
-  };
+    return (
+      ["assignment_id", "task_id"].map(prop => changeset[prop]).every(Boolean) &&
+      (changeset.date === formatDate(new Date()) || changeset.seconds > 0)
+    )
+  }
+
+  get isTimerStartable() {
+    const {
+      changeset: { seconds, date },
+    } = this.props
+
+    return date === formatDate(new Date()) && seconds === 0
+  }
+
+  buttonStyle() {
+    const styleMap = {
+      true: {
+        border: "none",
+        borderRadius: "50%",
+        width: "60px",
+        height: "60px",
+        marginTop: "22px",
+        transition: "all 0.2s ease-in-out",
+      },
+      false: {
+        border: "none",
+        width: "50px",
+        height: "36px",
+        marginTop: "35px",
+        transition: "all 0.2s ease-in-out",
+      },
+    }
+
+    return styleMap[this.isTimerStartable]
+  }

  handleTextareaKeyDown = event => {
    const { onSubmit } = this.props
@@ -34,7 +74,7 @@ class Form extends Component {
      event.preventDefault()
      this.isValid() && onSubmit(event)
    }
-  };
+  }

  render() {
    const { projects, changeset, errors, onChange, onSubmit } = this.props
@@ -44,7 +84,7 @@ class Form extends Component {
      <form onSubmit={onSubmit}>
        <div
          className={cn("form-group", {
-            "has-error": errors.assignment_id || errors.task_id
+            "has-error": errors.assignment_id || errors.task_id,
          })}
        >
          <Select
@@ -69,9 +109,7 @@ class Form extends Component {
          {errors.assignment_id ? (
            <div className="form-error">{errors.assignment_id.join("; ")}</div>
          ) : null}
-          {errors.task_id ? (
-            <div className="form-error">{errors.task_id.join("; ")}</div>
-          ) : null}
+          {errors.task_id ? <div className="form-error">{errors.task_id.join("; ")}</div> : null}
        </div>
        <div className={cn("form-group", { "has-error": errors.hours })}>
          <input
@@ -83,16 +121,14 @@ class Form extends Component {
            autoComplete="off"
            autoFocus
          />
-          {errors.hours ? (
-            <div className="form-error">{errors.hours.join("; ")}</div>
-          ) : null}
+          {errors.hours ? <div className="form-error">{errors.hours.join("; ")}</div> : null}
        </div>
        <div className={cn("form-group", { "has-error": errors.description })}>
          <textarea
            name="description"
            onChange={onChange}
            value={changeset.description}
-            placeholder="Beschreibung der Tätigkeit - mind. 3 Zeichen"
+            placeholder="Beschreibung der Tätigkeit – optional"
            maxLength={255}
            rows={3}
            onKeyDown={this.handleTextareaKeyDown}
@@ -102,8 +138,13 @@ class Form extends Component {
          ) : null}
        </div>

-        <button className="moco-bx-btn" disabled={!this.isValid()}>
-          OK
+        <button
+          type="submit"
+          className="moco-bx-btn"
+          disabled={!this.isValid()}
+          style={this.buttonStyle()}
+        >
+          {this.isTimerStartable ? <StopWatch /> : "OK"}
        </button>
      </form>
    )
--- a/src/js/components/Options.js
+++ b/src/js/components/Options.js
@@ -3,68 +3,96 @@ import { observable } from "mobx"
 import { observer } from "mobx-react"
 import { isChrome, getSettings, setStorage } from "utils/browser"
 import ApiClient from "api/Client"
+import { pipe, toPairs, fromPairs, map } from "lodash/fp"
+
+function upperCaseFirstLetter(input) {
+  return input[0].toUpperCase() + input.slice(1)
+}
+
+function removePathFromUrl(url) {
+  return url.replace(/(\.[a-z]+)\/.*$/, "$1")
+}

@observer
 class Options extends Component {
-  @observable subdomain = "";
-  @observable apiKey = "";
-  @observable errorMessage = null;
-  @observable isSuccess = false;
+  @observable subdomain = ""
+  @observable apiKey = ""
+  @observable hostOverrides = {}
+  @observable errorMessage = null
+  @observable isSuccess = false
+  @observable showHostOverrideOptions = false

  componentDidMount() {
-    getSettings(false).then(({ subdomain, apiKey }) => {
-      this.subdomain = subdomain || ""
-      this.apiKey = apiKey || ""
+    getSettings(false).then((settings) => {
+      this.subdomain = settings.subdomain || ""
+      this.apiKey = settings.apiKey || ""
+      this.hostOverrides = settings.hostOverrides
    })
  }

-  onChange = event => {
+  handleChange = (event) => {
    this[event.target.name] = event.target.value.trim()
-  };
+  }

-  handleSubmit = _event => {
+  handleChangeHostOverrides = (event) => {
+    this.hostOverrides[event.target.name] = event.target.value.trim()
+  }
+
+  toggleHostOverrideOptions = () => {
+    this.showHostOverrideOptions = !this.showHostOverrideOptions
+  }
+
+  handleSubmit = (_event) => {
    this.isSuccess = false
    this.errorMessage = null
-    setStorage({ subdomain: this.subdomain, apiKey: this.apiKey }).then(() => {
+
+    setStorage({
+      subdomain: this.subdomain,
+      apiKey: this.apiKey,
+      settingTimeTrackingHHMM: false,
+      hostOverrides: pipe(
+        toPairs,
+        map(([key, url]) => [key, removePathFromUrl(url)]),
+        fromPairs,
+      )(this.hostOverrides),
+    }).then(() => {
      const { version } = chrome.runtime.getManifest()
      const apiClient = new ApiClient({
        subdomain: this.subdomain,
        apiKey: this.apiKey,
-        version
+        version,
      })
      apiClient
        .login()
+        .then(({ data }) =>
+          setStorage({ settingTimeTrackingHHMM: data.setting_time_tracking_hh_mm }),
+        )
        .then(() => {
          this.isSuccess = true
          this.closeWindow()
        })
-        .catch(error => {
-          this.errorMessage =
-            error.response?.data?.message || "Anmeldung fehlgeschlagen"
+        .catch((error) => {
+          this.errorMessage = error.response?.data?.message || "Anmeldung fehlgeschlagen"
        })
    })
-  };
+  }

-  handleInputKeyDown = event => {
+  handleInputKeyDown = (event) => {
    if (event.key === "Enter") {
      this.handleSubmit()
    }
-  };
+  }

  closeWindow = () => {
    isChrome() && window.close()
-  };
+  }

  render() {
    return (
      <div className="moco-bx-options">
        <h2 style={{ textAlign: "center" }}>Einstellungen</h2>
-        {this.errorMessage && (
-          <div className="text-danger">{this.errorMessage}</div>
-        )}
-        {this.isSuccess && (
-          <div className="text-success">Anmeldung erfolgreich</div>
-        )}
+        {this.errorMessage && <div className="text-danger">{this.errorMessage}</div>}
+        {this.isSuccess && <div className="text-success">Anmeldung erfolgreich</div>}
        <div className="form-group">
          <label>Internetadresse</label>
          <div className="input-group">
@@ -73,9 +101,9 @@ class Options extends Component {
              name="subdomain"
              value={this.subdomain}
              onKeyDown={this.handleInputKeyDown}
-              onChange={this.onChange}
+              onChange={this.handleChange}
            />
-            <span className="input-group-addon">.mocoapp.com</span>
+            <span className="input-group-addon input-group-addon--right">.mocoapp.com</span>
          </div>
        </div>
        <div className="form-group">
@@ -85,13 +113,59 @@ class Options extends Component {
            name="apiKey"
            value={this.apiKey}
            onKeyDown={this.handleInputKeyDown}
-            onChange={this.onChange}
+            onChange={this.handleChange}
          />
          <p className="text-muted">
-            Den API-Schlüssel findest du in deinem Profil unter
-            &quot;Integrationen&quot;.
+            Den API-Schlüssel findest du in deinem Profil unter &quot;Integrationen&quot;.
          </p>
        </div>
+        {!this.showHostOverrideOptions && (
+          <div className="moco-bx-options__host-overrides">
+            <a href="#" className="moco-bx-btn__secondary" onClick={this.toggleHostOverrideOptions}>
+              Service-URLs überschreiben?
+            </a>
+          </div>
+        )}
+        {this.showHostOverrideOptions && (
+          <div style={{ marginBottom: "1.5rem" }}>
+            <h3 style={{ marginBottom: 0 }}>Service-URLs</h3>
+            <small>
+              Doppelpunkt für Platzhalter verwenden, z.B.{" "}
+              <span style={{ backgroundColor: "rgba(100, 100, 100, 0.1)" }}>:org</span>. Siehe{" "}
+              <a
+                href="https://github.com/hundertzehn/mocoapp-browser-extension#remote-service-configuration"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Online-Doku
+              </a>
+              .
+            </small>
+            <br />
+            {pipe(
+              Object.entries,
+              Array.from,
+            )(this.hostOverrides).map(([name, host]) => (
+              <div className="form-group" key={name} style={{ margin: "0.5rem 0" }}>
+                <div className="input-group">
+                  <span
+                    className="input-group-addon input-group-addon--left"
+                    style={{ display: "inline-block", width: "70px", textAlign: "left" }}
+                  >
+                    {upperCaseFirstLetter(name)}
+                  </span>
+                  <input
+                    type="text"
+                    name={name}
+                    value={host}
+                    onKeyDown={this.handleInputKeyDown}
+                    onChange={this.handleChangeHostOverrides}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
        <button className="moco-bx-btn" onClick={this.handleSubmit}>
          OK
        </button>
--- a/src/js/components/Popup.js
+++ b/src/js/components/Popup.js
@@ -1,87 +1,65 @@
-import React, { Component } from "react"
+import React, { useEffect, useRef, forwardRef } from "react"
 import PropTypes from "prop-types"
 import queryString from "query-string"
-import {
-  ERROR_UNKNOWN,
-  ERROR_UNAUTHORIZED,
-  ERROR_UPGRADE_REQUIRED,
-  serializeProps
-} from "utils"
-import { isChrome } from "utils/browser"
+import { serializeProps } from "utils"

-function getStyles(errorType) {
-  return {
-    width: "516px",
-    height:
-      errorType === ERROR_UNAUTHORIZED
-        ? "834px"
-        : errorType === ERROR_UPGRADE_REQUIRED
-        ? isChrome()
-          ? "369px"
-          : "461px"
-        : errorType === ERROR_UNKNOWN
-        ? "550px"
-        : "558px"
-  }
-}
+const Popup = forwardRef((props, ref) => {
+  const iFrameRef = useRef()

-class Popup extends Component {
-  static propTypes = {
-    service: PropTypes.object,
-    errorType: PropTypes.string,
-    onRequestClose: PropTypes.func.isRequired
-  };
-
-  handleRequestClose = event => {
+  const handleRequestClose = event => {
    if (event.target.classList.contains("moco-bx-popup")) {
-      this.props.onRequestClose()
+      props.onRequestClose()
    }
-  };
-
-  componentDidMount() {
-    // Document might lose focus when clicking the browser action.
-    // Document might be out of focus when hitting the shortcut key.
-    // This puts the focus back to the document and ensures that:
-    // - the autofocus on the hours input field is triggered
-    // - the ESC key closes the popup without closing anything else
-    window.focus()
-    document.activeElement?.blur()
  }

-  render() {
-    const serializedProps = serializeProps([
-      "loading",
-      "service",
-      "lastProjectId",
-      "lastTaskId",
-      "roundTimeEntries",
-      "projects",
-      "activities",
-      "schedules",
-      "lastProjectId",
-      "lastTaskId",
-      "fromDate",
-      "toDate",
-      "errorType",
-      "errorMessage"
-    ])(this.props)
+  const handleMessage = event => {
+    if (iFrameRef.current && event.data?.__mocoBX?.iFrameHeight > 300) {
+      iFrameRef.current.style.height = `${event.data.__mocoBX.iFrameHeight}px`
+    }
+  }

-    const styles = getStyles(this.props.errorType)
+  useEffect(() => {
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [])

-    return (
-      <div className="moco-bx-popup" onClick={this.handleRequestClose}>
-        <div className="moco-bx-popup-content" style={styles}>
-          <iframe
-            src={chrome.extension.getURL(
-              `popup.html?${queryString.stringify(serializedProps)}`
-            )}
-            width={styles.width}
-            height={styles.height}
-          />
-        </div>
+  const serializedProps = serializeProps([
+    "loading",
+    "service",
+    "subdomain",
+    "projects",
+    "activities",
+    "schedules",
+    "timedActivity",
+    "lastProjectId",
+    "lastTaskId",
+    "fromDate",
+    "toDate",
+    "errorType",
+    "errorMessage",
+  ])(props)
+
+  return (
+    <div ref={ref} className="moco-bx-popup" onClick={handleRequestClose}>
+      <div className="moco-bx-popup-content" style={{ width: "516px" }}>
+        <iframe
+          ref={iFrameRef}
+          src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
+          style={{ width: "516px", height: "576px", transition: "height 0.1s ease-in-out" }}
+        />
      </div>
-    )
-  }
+    </div>
+  )
+})
+
+Popup.displayName = "Popup"
+
+Popup.propTypes = {
+  service: PropTypes.object,
+  errorType: PropTypes.string,
+  onRequestClose: PropTypes.func.isRequired,
 }

 export default Popup
--- a/src/js/components/Select.js
+++ b/src/js/components/Select.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
-import ReactSelect, { createFilter } from "react-select"
+import ReactSelect, { createFilter, components } from "react-select"
 import {
  values,
  isString,
@@ -10,11 +10,11 @@ import {
  compose,
  property,
  flatMap,
-  pathEq
+  pathEq,
+  isNil,
 } from "lodash/fp"

-const hasOptionGroups = options =>
-  options.some(option => Boolean(option.options))
+const hasOptionGroups = options => options.some(option => Boolean(option.options))

 const customTheme = theme => ({
  ...theme,
@@ -22,30 +22,30 @@ const customTheme = theme => ({
  spacing: {
    ...theme.spacing,
    baseUnit: 3,
-    controlHeight: 32
+    controlHeight: 32,
  },
  colors: {
    ...theme.colors,
    primary: "#38b5eb",
    primary75: "rgba(56, 181, 235, 0.25)",
    primary50: "#38b5eb",
-    primary25: "#38b5eb"
-  }
+    primary25: "#38b5eb",
+  },
 })

 const customStyles = props => ({
  control: (base, _state) => ({
    ...base,
-    borderColor: props.hasError ? "#FB3A2F" : base.borderColor
+    borderColor: props.hasError ? "#fb3a2f" : base.borderColor,
  }),
  valueContainer: base => ({
    ...base,
-    padding: "4px 12px"
+    padding: "4px 12px",
  }),
  input: base => ({
    ...base,
    border: "0 !important",
-    boxShadow: "0 !important"
+    boxShadow: "0 !important",
  }),
  groupHeading: (base, _state) => ({
    ...base,
@@ -53,16 +53,14 @@ const customStyles = props => ({
    textTransform: "none",
    fontWeight: "bold",
    fontSize: "100%",
-    padding: "2px 7px 4px"
+    padding: "2px 7px 4px",
  }),
  option: (base, state) => ({
    ...base,
-    padding: hasOptionGroups(state.options)
-      ? "4px 7px 4px 20px"
-      : "4px 7px 4px",
+    padding: hasOptionGroups(state.options) ? "4px 7px 4px 20px" : "4px 7px 4px",
    backgroundColor: state.isFocused ? "#38b5eb" : "none",
-    color: state.isFocused ? "white" : "hsl(0, 0%, 20%)"
-  })
+    color: state.isFocused ? "white" : "hsl(0, 0%, 20%)",
+  }),
 })

 const filterOption = createFilter({
@@ -70,27 +68,38 @@ const filterOption = createFilter({
    join(" "),
    filter(value => isString(value) || isNumber(value)),
    values,
-    property("data")
-  )
+    property("data"),
+  ),
 })

+SingleValue.propTypes = {
+  children: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    customerName: PropTypes.string,
+  }).isRequired,
+}
+
+function SingleValue({ children, ...props }) {
+  const label = isNil(props.data.customerName)
+    ? children
+    : `${props.data.customerName}: ${children}`
+  return <components.SingleValue {...props}>{label}</components.SingleValue>
+}
+
 export default class Select extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    options: PropTypes.array,
    hasError: PropTypes.bool,
-    onChange: PropTypes.func.isRequired
-  };
+    onChange: PropTypes.func.isRequired,
+  }

  static findOptionByValue = (selectOptions, value) => {
-    const options = flatMap(
-      option => (option.options ? option.options : option),
-      selectOptions
-    )
+    const options = flatMap(option => (option.options ? option.options : option), selectOptions)

    return options.find(pathEq("value", value)) || null
-  };
+  }

  constructor(props) {
    super(props)
@@ -101,7 +110,7 @@ export default class Select extends Component {
    const { name, onChange } = this.props
    const { value } = option
    onChange({ target: { name, value } })
-  };
+  }

  handleKeyDown = event => {
    if (!this.select.current) {
@@ -111,7 +120,7 @@ export default class Select extends Component {
    if (!this.select.current.state.menuIsOpen && event.key === "Enter") {
      this.select.current.setState({ menuIsOpen: true })
    }
-  };
+  }

  render() {
    const { value, ...passThroughProps } = this.props
@@ -121,11 +130,12 @@ export default class Select extends Component {
        {...passThroughProps}
        ref={this.select}
        value={Select.findOptionByValue(this.props.options, value)}
-        onChange={this.handleChange}
-        onKeyDown={this.handleKeyDown}
        filterOption={filterOption}
        theme={customTheme}
        styles={customStyles(this.props)}
+        components={{ SingleValue }}
+        onChange={this.handleChange}
+        onKeyDown={this.handleKeyDown}
      />
    )
  }
--- a/src/js/components/Spinner.js
+++ b/src/js/components/Spinner.js
@@ -1,14 +1,14 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from "react"
+import PropTypes from "prop-types"

 const Spinner = ({ style }) => (
-  <div className='moco-bx-spinner__container' style={style}>
-    <div className='moco-bx-spinner' role='status' />
+  <div className="moco-bx-spinner__container" style={style}>
+    <div className="moco-bx-spinner" role="status" />
  </div>
 )

 Spinner.propTypes = {
-  style: PropTypes.object
+  style: PropTypes.object,
 }

 export default Spinner
--- a/src/js/components/shared/Header.js
+++ b/src/js/components/shared/Header.js
@@ -1,13 +1,21 @@
-import React from 'react'
-import logoUrl from "images/logo.png"
+import React from "react"
+import PropTypes from "prop-types"
+import logoUrl from "images/moco-159x159.png"

-const Header = () => (
+const Header = ({ subdomain }) => (
  <div className="moco-bx-logo__container">
-    <img
-      className="moco-bx-logo"
-      src={chrome.extension.getURL(logoUrl)}
-    />
+    <a
+      href={`https://${subdomain}.mocoapp.com/activities`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
+    </a>
  </div>
 )

+Header.propTypes = {
+  subdomain: PropTypes.string,
+}
+
 export default Header
--- a/src/js/components/shared/StopWatch.js
+++ b/src/js/components/shared/StopWatch.js
@@ -0,0 +1,11 @@
+import React from "react"
+import stopWatch from "images/icons/stopwatch-light.svg"
+
+export default function StopWatch() {
+  return (
+    <i
+      dangerouslySetInnerHTML={{ __html: stopWatch }}
+      style={{ width: "22px", color: "white", display: "inline-block" }}
+    />
+  )
+}
--- a/src/js/components/shared/Timer.js
+++ b/src/js/components/shared/Timer.js
@@ -0,0 +1,29 @@
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import { useInterval } from "./hooks"
+import { differenceInSeconds } from "date-fns"
+import { formatDuration } from "utils"
+
+Timer.propTypes = {
+  startedAt: PropTypes.instanceOf(Date).isRequired,
+  offset: PropTypes.number,
+  onTick: PropTypes.func,
+}
+
+function Timer({ startedAt, offset = 0, onTick, ...domProps }) {
+  const [timerLabel, setTimerLabel] = useState(formattedTimerLabel(startedAt, offset))
+
+  useInterval(() => {
+    setTimerLabel(formattedTimerLabel(startedAt, offset))
+    onTick && onTick()
+  }, 1000)
+
+  return <span {...domProps}>{timerLabel}</span>
+}
+
+function formattedTimerLabel(startedAt, offset) {
+  const seconds = differenceInSeconds(new Date(), startedAt) + offset
+  return formatDuration(seconds)
+}
+
+export default Timer
--- a/src/js/components/shared/hooks.js
+++ b/src/js/components/shared/hooks.js
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react"
+
+export function useInterval(callback, delay) {
+  const savedCallback = useRef()
+
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current()
+    }
+
+    let id = setInterval(tick, delay)
+    return () => clearInterval(id)
+  }, [delay])
+}
--- a/src/js/content.js
+++ b/src/js/content.js
@@ -5,59 +5,64 @@ import Bubble from "./components/Bubble"
 import Popup from "components/Popup"
 import { createServiceFinder } from "utils/urlMatcher"
 import remoteServices from "./remoteServices"
-import { ErrorBoundary } from "utils/notifier"
 import { ContentMessenger } from "utils/messaging"
 import "../css/content.scss"
+import { getSettings } from "./utils/browser"

 const popupRef = createRef()
-const findService = createServiceFinder(remoteServices)(document)

-chrome.runtime.onConnect.addListener(function(port) {
+let findService
+getSettings().then((settings) => {
+  findService = createServiceFinder(remoteServices, settings.hostOverrides)(document)
+})
+
+chrome.runtime.onConnect.addListener(function (port) {
  const messenger = new ContentMessenger(port)

+  function clickHandler(event) {
+    if (event.target.closest(".moco-bx-bubble")) {
+      event.stopPropagation()
+      messenger.postMessage({ type: "togglePopup" })
+    }
+  }
  port.onDisconnect.addListener(() => {
    messenger.stop()
+    window.removeEventListener("click", clickHandler, true)
  })

-  function updateBubble({ service, bookedHours } = {}) {
+  function updateBubble({ service, bookedSeconds, settingTimeTrackingHHMM, timedActivity } = {}) {
    if (!document.getElementById("moco-bx-root")) {
      const domRoot = document.createElement("div")
      domRoot.setAttribute("id", "moco-bx-root")
      document.body.appendChild(domRoot)
+      window.addEventListener("click", clickHandler, true)
    }

    ReactDOM.render(
-      <ErrorBoundary>
-        <Transition
-          native
-          items={service}
-          from={{ opacity: "0" }}
-          enter={{ opacity: "1" }}
-          leave={{ opacity: "0" }}
-          config={config.stiff}
-        >
-          {service =>
-            service &&
-            // eslint-disable-next-line react/display-name
-            (props => (
-              <animated.div
-                className="moco-bx-bubble"
-                style={{ ...props, ...service.position }}
-              >
-                <Bubble
-                  key={service.url}
-                  bookedHours={bookedHours}
-                  onClick={event => {
-                    event.stopPropagation()
-                    messenger.postMessage({ type: "togglePopup" })
-                  }}
-                />
-              </animated.div>
-            ))
-          }
-        </Transition>
-      </ErrorBoundary>,
-      document.getElementById("moco-bx-root")
+      <Transition
+        native
+        items={service}
+        from={{ opacity: "0" }}
+        enter={{ opacity: "1" }}
+        leave={{ opacity: "0" }}
+        config={config.stiff}
+      >
+        {(service) =>
+          service &&
+          // eslint-disable-next-line react/display-name
+          ((props) => (
+            <animated.div className="moco-bx-bubble" style={{ ...props, ...service.position }}>
+              <Bubble
+                key={service.url}
+                bookedSeconds={bookedSeconds}
+                settingTimeTrackingHHMM={settingTimeTrackingHHMM}
+                timedActivity={timedActivity}
+              />
+            </animated.div>
+          ))
+        }
+      </Transition>,
+      document.getElementById("moco-bx-root"),
    )
  }

@@ -69,10 +74,8 @@ chrome.runtime.onConnect.addListener(function(port) {
    }

    ReactDOM.render(
-      <ErrorBoundary>
-        <Popup ref={popupRef} {...payload} onRequestClose={closePopup} />
-      </ErrorBoundary>,
-      document.getElementById("moco-bx-popup-root")
+      <Popup ref={popupRef} {...payload} onRequestClose={closePopup} />,
+      document.getElementById("moco-bx-popup-root"),
    )
  }

@@ -89,12 +92,12 @@ chrome.runtime.onConnect.addListener(function(port) {
    const service = findService(window.location.href)
    messenger.postMessage({
      type: "newService",
-      payload: { isOpen: !!popupRef.current, service }
+      payload: { isOpen: !!popupRef.current, service },
    })
  })

-  messenger.on("showBubble", ({ payload: { service, bookedHours } }) => {
-    updateBubble({ service, bookedHours })
+  messenger.on("showBubble", ({ payload }) => {
+    updateBubble(payload)
  })

  messenger.on("hideBubble", () => {
@@ -108,8 +111,4 @@ chrome.runtime.onConnect.addListener(function(port) {
  messenger.on("closePopup", () => {
    closePopup()
  })
-
-  messenger.on("activityCreated", () => {
-    closePopup()
-  })
 })
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -1,14 +1,8 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import Options from './components/Options'
-import { ErrorBoundary } from 'utils/notifier'
-import '../css/options.scss'
+import React from "react"
+import ReactDOM from "react-dom"
+import Options from "./components/Options"
+import "../css/options.scss"

-const domContainer = document.querySelector('#moco-bx-root')
+const domContainer = document.querySelector("#moco-bx-root")

-ReactDOM.render(
-  <ErrorBoundary>
-    <Options />
-  </ErrorBoundary>,
-  domContainer
-)
+ReactDOM.render(<Options />, domContainer)
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -3,29 +3,22 @@ import ReactDOM from "react-dom"
 import App from "./components/App"
 import queryString from "query-string"
 import { parseProps } from "utils"
-import { ErrorBoundary } from "utils/notifier"
 import "../css/popup.scss"

 const parsedProps = parseProps([
  "loading",
  "service",
+  "subdomain",
  "projects",
  "activities",
  "schedules",
-  "lastProjectId",
-  "lastTaskId",
-  "roundTimeEntries",
+  "timedActivity",
  "lastProjectId",
  "lastTaskId",
  "fromDate",
  "toDate",
  "errorType",
-  "errorMessage"
+  "errorMessage",
 ])(queryString.parse(location.search))

-ReactDOM.render(
-  <ErrorBoundary>
-    <App {...parsedProps} />
-  </ErrorBoundary>,
-  document.querySelector("#moco-bx-root")
-)
+ReactDOM.render(<App {...parsedProps} />, document.querySelector("#moco-bx-root"))
--- a/src/js/remoteServices.js
+++ b/src/js/remoteServices.js
@@ -1,59 +1,58 @@
+const projectRegex = /\[([\w-]+)\]/
+
+const projectIdentifierBySelector = (selector) => (document) =>
+  document.querySelector(selector)?.textContent?.trim()?.match(projectRegex)?.[1]
+
 export default {
  asana: {
    name: "asana",
+    host: "https://app.asana.com",
    urlPatterns: [
-      [/^https:\/\/app.asana.com\/0\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
-      [
-        /^https:\/\/app.asana.com\/0\/search\/([^/]+)\/(\d+)/,
-        ["domainUserId", "id"]
-      ]
+      [/^:host:\/0\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
+      [/^:host:\/0\/search\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
    ],
-    description: document =>
-      document
-        .querySelector(".ItemRow--highlighted textarea")
-        ?.textContent?.trim() ||
-      document
-        .querySelector(".ItemRow--focused textarea")
-        ?.textContent?.trim() ||
-      document.querySelector(".SingleTaskPane textarea")?.textContent?.trim()
+    description: (document) =>
+      document.querySelector(".ItemRow--highlighted textarea")?.textContent?.trim() ||
+      document.querySelector(".ItemRow--focused textarea")?.textContent?.trim() ||
+      document.querySelector(".SingleTaskPane textarea")?.textContent?.trim() ||
+      document.querySelector(".SingleTaskTitleInput-taskName textarea")?.textContent?.trim(),
+    projectId: projectIdentifierBySelector(".TopbarPageHeaderStructure-titleRow h1"),
+    allowHostOverride: false,
  },

  "github-pr": {
    name: "github",
-    urlPatterns: ["https\\://github.com/:org/:repo/pull/:id(/:tab)"],
-    id: (document, service, { org, repo, id }) =>
-      [service.key, org, repo, id].join("."),
-    description: (document, service, { org, repo, id }) =>
-      document.querySelector(".js-issue-title")?.textContent?.trim(),
-    projectId: document => {
-      const match = document
-        .querySelector(".js-issue-title")
-        ?.textContent.trim()
-        ?.match(/^\[(\d+)\]/)
-      return match && match[1]
-    }
+    host: "https://github.com",
+    urlPatterns: [":host:/:org/:repo/pull/:id(/:tab)"],
+    id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
+    description: (document) => document.querySelector(".js-issue-title")?.textContent?.trim(),
+    projectId: projectIdentifierBySelector(".js-issue-title"),
+    allowHostOverride: false,
  },

  "github-issue": {
    name: "github",
-    urlPatterns: ["https\\://github.com/:org/:repo/issues/:id"],
-    id: (document, service, { org, repo, id }) =>
-      [service.key, org, repo, id].join("."),
+    host: "https://github.com",
+    urlPatterns: [":host:/:org/:repo/issues/:id"],
+    id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
    description: (document, service, { org, repo, id }) =>
-      document.querySelector(".js-issue-title")?.textContent?.trim()
+      document.querySelector(".js-issue-title")?.textContent?.trim(),
+    projectId: projectIdentifierBySelector(".js-issue-title"),
+    allowHostOverride: false,
  },

  jira: {
    name: "jira",
+    host: "https://:org.atlassian.net",
    urlPatterns: [
-      "https\\://:org.atlassian.net/secure/RapidBoard.jspa",
-      "https\\://:org.atlassian.net/browse/:id",
-      "https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board",
-      "https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board/backlog"
+      ":host:/secure/RapidBoard.jspa",
+      ":host:/browse/:id",
+      ":host:/jira/software/projects/:projectId/boards/:board",
+      ":host:/jira/software/projects/:projectId/boards/:board/backlog",
    ],
    queryParams: {
      id: "selectedIssue",
-      projectId: "projectKey"
+      projectId: "projectKey",
    },
    description: (document, service, { id }) => {
      const title =
@@ -61,33 +60,115 @@ export default {
          .querySelector('[aria-label="Edit Summary"]')
          ?.parentNode?.querySelector("h1")
          ?.textContent?.trim() ||
-        document
-          .querySelector(".ghx-selected .ghx-summary")
-          ?.textContent?.trim()
+        document.querySelector(".ghx-selected .ghx-summary")?.textContent?.trim()
      return `#${id} ${title || ""}`
-    }
+    },
+    allowHostOverride: true,
+  },
+
+  meistertask: {
+    name: "meistertask",
+    host: "https://www.meistertask.com",
+    urlPatterns: [":host:/app/task/:id/:slug"],
+    description: (document) => {
+      const json = document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const data = JSON.parse(json)
+      return data.taskName
+    },
+    projectId: (document) => {
+      const json = document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const data = JSON.parse(json)
+      const match = data.taskName?.match(projectRegex) || data.projectName?.match(projectRegex)
+      return match && match[1]
+    },
+    allowHostOverride: false,
  },

  trello: {
    name: "trello",
-    urlPatterns: ["https\\://trello.com/c/:id/:title"],
+    host: "https://trello.com",
+    urlPatterns: [":host:/c/:id/:title"],
    description: (document, service, { title }) =>
-      document.querySelector(".js-title-helper")?.textContent?.trim() || title
+      document.querySelector(".js-title-helper")?.textContent?.trim() || title,
+    projectId: (document) =>
+      projectIdentifierBySelector(".js-title-helper")(document) ||
+      projectIdentifierBySelector(".js-board-editing-target")(document),
+    allowHostOverride: false,
  },

  youtrack: {
    name: "youtrack",
-    urlPatterns: ["https\\://:org.myjetbrains.com/youtrack/issue/:id"],
-    description: document =>
-      document.querySelector("yt-issue-body h1")?.textContent?.trim()
+    host: "https://:org.myjetbrains.com",
+    urlPatterns: [":host:/youtrack/issue/:id"],
+    description: (document) => document.querySelector("yt-issue-body h1")?.textContent?.trim(),
+    projectId: projectIdentifierBySelector("yt-issue-body h1"),
+    allowHostOverride: true,
+  },
+
+  wrike: {
+    name: "wrike",
+    host: "https://www.wrike.com",
+    urlPatterns: [
+      ":host:/workspace.htm#path=mywork",
+      ":host:/workspace.htm#path=folder",
+      "https\\://app-eu.wrike.com/workspace.htm#path=mywork",
+      "https\\://app-eu.wrike.com/workspace.htm#path=folder",
+    ],
+    queryParams: {
+      id: ["t", "ot"],
+    },
+    description: (document) => document.querySelector(".title-field-ghost")?.textContent?.trim(),
+    projectId: projectIdentifierBySelector(".header-title__main"),
+    allowHostOverride: false,
  },

  wunderlist: {
    name: "wunderlist",
-    urlPatterns: ["https\\://www.wunderlist.com/(webapp)#/tasks/:id(/*)"],
-    description: document =>
+    host: "https://www.wunderlist.com",
+    urlPatterns: [":host:/(webapp)#/tasks/:id(/*)"],
+    description: (document) =>
      document
        .querySelector(".taskItem.selected .taskItem-titleWrapper-title")
-        ?.textContent?.trim()
-  }
+        ?.textContent?.trim(),
+    projectId: projectIdentifierBySelector(".taskItem.selected .taskItem-titleWrapper-title"),
+    allowHostOverride: false,
+  },
+
+  "gitlab-mr": {
+    name: "gitlab",
+    host: "https://gitlab.com",
+    urlPatterns: [
+      ":host:/:org/:group/:projectId/-/merge_requests/:id",
+      ":host:/:org/:projectId/-/merge_requests/:id",
+    ],
+    description: (document, service, { id }) => {
+      const title = document.querySelector("h2.title")?.textContent?.trim()
+      return `#${id} ${title || ""}`.trim()
+    },
+    allowHostOverride: true,
+  },
+
+  "gitlab-issues": {
+    name: "gitlab",
+    host: "https://gitlab.com",
+    urlPatterns: [
+      ":host:/:org/:group/:projectId/-/issues/:id",
+      ":host:/:org/:projectId/-/issues/:id",
+    ],
+    description: (document, service, { id }) => {
+      const title = document.querySelector("h2.title")?.textContent?.trim()
+      return `#${id} ${title || ""}`.trim()
+    },
+    allowHostOverride: true,
+  },
+
+  monday: {
+    name: "monday",
+    host: "https://:org.monday.com",
+    urlPatterns: [":host:/boards/:board/pulses/:id"],
+    description: (document, service, { id }) => {
+      return document.querySelector(".pulse_title")?.textContent?.trim()
+    },
+    allowHostOverride: false,
+  },
 }
--- a/src/js/utils/TimeInputParser.js
+++ b/src/js/utils/TimeInputParser.js
@@ -1,12 +1,14 @@
 export default class TimeInputParser {
-  #input;
+  #input

  constructor(input) {
-    this.#input = input.toLowerCase().replace(/[\s()]/g, "")
+    this.#input = (input ?? "").toLowerCase().replace(/[\s()]/g, "")
  }

  parseSeconds() {
-    if (this.#isDecimal()) {
+    if (this.#input === "") {
+      return 0
+    } else if (this.#isDecimal()) {
      return Math.round(parseFloat(this.#parseDecimal()) * 3600)
    } else if (this.#isTime()) {
      return this.#parseTimeAsSeconds()
@@ -25,11 +27,11 @@ export default class TimeInputParser {
    const calculated = hours * 3600 + minutes * 60

    return isNegative ? -calculated : calculated
-  };
+  }

  #parseDecimal = () => {
    return this.#input.replace(/[.,]/g, ".")
-  };
+  }

  #parseTimeAsSeconds = () => {
    const match = this.#isTime()
@@ -39,12 +41,12 @@ export default class TimeInputParser {
    const minutes = parseInt(match[3])

    return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
-  };
+  }

  #parseMinutesAsSeconds = () => {
    const minutes = parseInt(this.#isMinutes()[1])
    return minutes * 60
-  };
+  }

  #parseRange = () => {
    const match = this.#isRange()
@@ -54,7 +56,7 @@ export default class TimeInputParser {
    const to_hours = parseInt(match[3])
    const to_minutes = parseInt(match[4])
    return (to_hours - from_hours) * 3600 + (to_minutes - from_minutes) * 60
-  };
+  }

  #parseHoursAndMinutes = () => {
    const match = this.#isHoursAndMinutes()
@@ -64,28 +66,26 @@ export default class TimeInputParser {
    const minutes = parseInt(match[3])

    return this.#calculateFromHoursAndMinutes(hours, minutes, isNegative)
-  };
+  }

  #isDecimal = () => {
    return this.#input.match(/^([-]?[0-9]{0,2})[.,]{1}([0-9]{1,2})$/)
-  };
+  }

  #isTime = () => {
    return this.#input.match(/^([-]?)([0-9]{1,2}):([0-9]{2})$/)
-  };
+  }

  #isMinutes = () => {
    return this.#input.match(/^([-]?[0-9]{1,3})(m|mins?)$/)
-  };
+  }

  #isRange = () => {
-    return this.#input.match(
-      /^([0-9]{1,2})[:.]{0,1}([0-9]{2})-([0-9]{1,2})[:.]{0,1}([0-9]{2})$/
-    )
-  };
+    return this.#input.match(/^([0-9]{1,2})[:.]{0,1}([0-9]{2})-([0-9]{1,2})[:.]{0,1}([0-9]{2})$/)
+  }

  #isHoursAndMinutes = () => {
    // 1h 14m(in)
    return this.#input.match(/^([-]?)([0-9]{1,2})h([0-9]{1,2})(m|mins?)$/)
-  };
+  }
 }
--- a/src/js/utils/browser.js
+++ b/src/js/utils/browser.js
@@ -1,32 +1,53 @@
-import { head } from "lodash/fp"
+import { head, pick, reduce, filter, prop, pipe } from "lodash/fp"
+import remoteServices from "../remoteServices"
+
+const DEFAULT_SUBDOMAIN = "unset"
+
 export const isChrome = () => typeof browser === "undefined" && chrome
 export const isFirefox = () => typeof browser !== "undefined" && chrome

+export const defaultHostOverrides = pipe(
+  filter(prop("allowHostOverride")),
+  reduce((acc, remoteService) => {
+    acc[remoteService.name] = remoteService.host
+    return acc
+  }, {}),
+)(remoteServices)
+
+// We pick only the keys defined in `defaultHostOverrides`, so that
+// deleted host overrides get cleared from the settings
+const getHostOverrides = (settings) => ({
+  ...defaultHostOverrides,
+  ...pick(Object.keys(defaultHostOverrides), settings.hostOverrides || {}),
+})
+
 export const getSettings = (withDefaultSubdomain = true) => {
-  const keys = ["subdomain", "apiKey"]
+  const keys = ["subdomain", "apiKey", "settingTimeTrackingHHMM", "hostOverrides"]
  const { version } = chrome.runtime.getManifest()
  if (isChrome()) {
-    return new Promise(resolve => {
-      chrome.storage.sync.get(keys, data => {
+    return new Promise((resolve) => {
+      chrome.storage.sync.get(keys, (settings) => {
        if (withDefaultSubdomain) {
-          data.subdomain = data.subdomain || "__unset__"
+          settings.subdomain = settings.subdomain || DEFAULT_SUBDOMAIN
        }
-        resolve({ ...data, version })
+        settings.hostOverrides = getHostOverrides(settings)
+        resolve({ ...settings, version })
      })
    })
  } else {
-    return browser.storage.sync.get(keys).then(data => {
+    return browser.storage.sync.get(keys).then((settings) => {
      if (withDefaultSubdomain) {
-        data.subdomain = data.subdomain || "__unset__"
+        settings.subdomain = settings.subdomain || DEFAULT_SUBDOMAIN
      }
-      return { ...data, version }
+      settings.hostOverrides = getHostOverrides(settings)
+      return { ...settings, version }
    })
  }
 }

-export const setStorage = items => {
+export const setStorage = (items) => {
  if (isChrome()) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
      chrome.storage.sync.set(items, resolve)
    })
  } else {
@@ -34,9 +55,9 @@ export const setStorage = items => {
  }
 }

-export const queryTabs = queryInfo => {
+export const queryTabs = (queryInfo) => {
  if (isChrome()) {
-    return new Promise(resolve => chrome.tabs.query(queryInfo, resolve))
+    return new Promise((resolve) => chrome.tabs.query(queryInfo, resolve))
  } else {
    return browser.tabs.query(queryInfo)
  }
@@ -46,4 +67,4 @@ export const getCurrentTab = () => {
  return queryTabs({ currentWindow: true, active: true }).then(head)
 }

-export const isBrowserTab = tab => /^(?:chrome|about):/.test(tab.url)
+export const isBrowserTab = (tab) => /^(?:chrome|about):/.test(tab.url)
--- a/src/js/utils/index.js
+++ b/src/js/utils/index.js
@@ -9,71 +9,71 @@ import {
  get,
  find,
  curry,
-  pick
+  pick,
+  head,
+  defaultTo,
+  padCharsStart,
 } from "lodash/fp"
+import { startOfWeek, endOfWeek } from "date-fns"
 import { format } from "date-fns"

-const nilToArray = input => input || []
+const nilToArray = (input) => input || []

 export const ERROR_UNAUTHORIZED = "unauthorized"
 export const ERROR_UPGRADE_REQUIRED = "upgrade-required"
 export const ERROR_UNKNOWN = "unknown"

 export const noop = () => null
+export const asArray = (input) => (Array.isArray(input) ? input : [input])
+
+export const findProjectBy = (prop) => (val) => (projects) => {
+  if (!val) {
+    return undefined
+  }
+
+  return compose(find(pathEq(prop, val)), flatMap(get("options")))(projects)
+}

-export const findProjectBy = prop => val =>
-  compose(
-    find(pathEq(prop, val)),
-    flatMap(get("options"))
-  )
 export const findProjectByIdentifier = findProjectBy("identifier")
 export const findProjectByValue = findProjectBy("value")

-export const findTask = id =>
-  compose(
-    find(pathEq("value", Number(id))),
-    get("tasks")
-  )
+export const findTask = (id) => compose(find(pathEq("value", Number(id))), get("tasks"))
+
+export const defaultTask = (tasks) =>
+  compose(defaultTo(head(tasks)), find(pathEq("isDefault", true)), nilToArray)(tasks)

 function taskOptions(tasks) {
-  return tasks.map(({ id, name, billable }) => ({
+  return tasks.map(({ id, name, billable, default: isDefault }) => ({
    label: billable ? name : `(${name})`,
    value: id,
-    billable
+    billable,
+    isDefault,
  }))
 }

 export function projectOptions(projects) {
-  return projects.map(project => ({
+  return projects.map((project) => ({
    value: project.id,
    label: project.intern ? `(${project.name})` : project.name,
    identifier: project.identifier,
    customerName: project.customer_name,
-    tasks: taskOptions(project.tasks)
+    tasks: taskOptions(project.tasks),
  }))
 }

 export const groupedProjectOptions = compose(
  map(([customerName, projects]) => ({
    label: customerName,
-    options: projectOptions(projects)
+    options: projectOptions(projects),
  })),
  toPairs,
  groupBy("customer_name"),
-  nilToArray
+  nilToArray,
 )

-export const serializeProps = attrs =>
-  compose(
-    mapValues(JSON.stringify),
-    pick(attrs)
-  )
+export const serializeProps = (attrs) => compose(mapValues(JSON.stringify), pick(attrs))

-export const parseProps = attrs =>
-  compose(
-    mapValues(JSON.parse),
-    pick(attrs)
-  )
+export const parseProps = (attrs) => compose(mapValues(JSON.parse), pick(attrs))

 export const trace = curry((tag, value) => {
  // eslint-disable-next-line no-console
@@ -82,12 +82,13 @@ export const trace = curry((tag, value) => {
 })

 export const weekStartsOn = 1
-export const formatDate = date => format(date, "YYYY-MM-DD")
+export const formatDate = (date) => format(date, "yyyy-MM-dd")
+export const getStartOfWeek = () => startOfWeek(new Date(), { weekStartsOn })
+export const getEndOfWeek = () => endOfWeek(new Date(), { weekStartsOn })

-export const extensionSettingsUrl = () =>
-  `chrome://extensions/?id=${chrome.runtime.id}`
+export const extensionSettingsUrl = () => `chrome://extensions/?id=${chrome.runtime.id}`

-export const extractAndSetTag = changeset => {
+export const extractAndSetTag = (changeset) => {
  let { description } = changeset
  const match = description.match(/^#(\S+)/)
  if (!match) {
@@ -96,6 +97,25 @@ export const extractAndSetTag = changeset => {
  return {
    ...changeset,
    description: description.replace(/^#\S+\s/, ""),
-    tag: match[1]
+    tag: match[1],
+  }
+}
+
+export const formatDuration = (
+  durationInSeconds,
+  { settingTimeTrackingHHMM = true, showSeconds = true } = {},
+) => {
+  if (settingTimeTrackingHHMM) {
+    const hours = Math.floor(durationInSeconds / 3600)
+    const minutes = Math.floor((durationInSeconds % 3600) / 60)
+    const result = `${hours}:${padCharsStart("0", 2, minutes)}`
+    if (!showSeconds) {
+      return result
+    } else {
+      const seconds = durationInSeconds % 60
+      return result + `:${padCharsStart("0", 2, seconds)}`
+    }
+  } else {
+    return (durationInSeconds / 3600).toFixed(2)
  }
 }
--- a/src/js/utils/messageHandlers.js
+++ b/src/js/utils/messageHandlers.js
@@ -4,45 +4,55 @@ import {
  ERROR_UPGRADE_REQUIRED,
  ERROR_UNKNOWN,
  groupedProjectOptions,
-  weekStartsOn
+  getStartOfWeek,
+  getEndOfWeek,
 } from "utils"
 import { get, forEach, reject, isNil } from "lodash/fp"
-import { startOfWeek, endOfWeek } from "date-fns"
 import { createMatcher } from "utils/urlMatcher"
 import remoteServices from "remoteServices"
-import { queryTabs, isBrowserTab, getSettings } from "utils/browser"
+import { queryTabs, isBrowserTab, getSettings, setStorage } from "utils/browser"

-const getStartOfWeek = () => startOfWeek(new Date(), { weekStartsOn })
-const getEndOfWeek = () => endOfWeek(new Date(), { weekStartsOn })
-const matcher = createMatcher(remoteServices)
+let matcher
+
+const initMatcher = (settings) => {
+  matcher = createMatcher(remoteServices, settings.hostOverrides)
+}
+
+getSettings().then((settings) => {
+  initMatcher(settings)
+})

 export function tabUpdated(tab, { messenger, settings }) {
  messenger.connectTab(tab)

  const service = matcher(tab.url)
+  const apiClient = new ApiClient(settings)
+
  if (service?.match?.id) {
    messenger.postMessage(tab, { type: "requestService" })

    messenger.once("newService", ({ payload: { service } }) => {
-      const apiClient = new ApiClient(settings)
      apiClient
-        .bookedHours(service)
+        .activitiesStatus(service)
        .then(({ data }) => {
          messenger.postMessage(tab, {
            type: "showBubble",
            payload: {
-              bookedHours: parseFloat(data[0]?.hours) || 0,
-              service
-            }
+              bookedSeconds: data.seconds,
+              settingTimeTrackingHHMM: settings.settingTimeTrackingHHMM,
+              timedActivity: data.timed_activity,
+              service,
+            },
          })
        })
        .catch(() => {
          messenger.postMessage(tab, {
            type: "showBubble",
            payload: {
-              bookedHours: 0,
-              service
-            }
+              bookedSeconds: 0,
+              settingTimeTrackingHHMM: settings.settingTimeTrackingHHMM,
+              service,
+            },
          })
        })
    })
@@ -52,13 +62,15 @@ export function tabUpdated(tab, { messenger, settings }) {
 }

 export function settingsChanged(settings, { messenger }) {
+  initMatcher(settings)
+
  queryTabs({ currentWindow: true })
    .then(reject(isBrowserTab))
    .then(
      forEach(tab => {
        messenger.postMessage(tab, { type: "closePopup" })
        tabUpdated(tab, { settings, messenger })
-      })
+      }),
    )
 }

@@ -76,52 +88,61 @@ export function togglePopup(tab, { messenger }) {
  }
 }

-function openPopup(tab, { service, messenger }) {
+export async function openPopup(tab, { service, messenger }) {
  messenger.postMessage(tab, { type: "openPopup", payload: { loading: true } })

  const fromDate = getStartOfWeek()
  const toDate = getEndOfWeek()
-  getSettings()
-    .then(settings => new ApiClient(settings))
-    .then(apiClient =>
-      Promise.all([
-        apiClient.login(service),
-        apiClient.projects(),
-        apiClient.activities(fromDate, toDate),
-        apiClient.schedules(fromDate, toDate)
-      ])
-    )
-    .then(responses => {
-      const action = {
-        type: "openPopup",
-        payload: {
-          service,
-          lastProjectId: get("[0].data.last_project_id", responses),
-          lastTaskId: get("[0].data.last_task_id", responses),
-          roundTimeEntries: get("[0].data.round_time_entries", responses),
-          projects: groupedProjectOptions(get("[1].data.projects", responses)),
-          activities: get("[2].data", responses),
-          schedules: get("[3].data", responses),
-          fromDate,
-          toDate,
-          loading: false
-        }
-      }
-      messenger.postMessage(tab, action)
-    })
-    .catch(error => {
-      let errorType, errorMessage
-      if (error.response?.status === 401) {
-        errorType = ERROR_UNAUTHORIZED
-      } else if (error.response?.status === 426) {
-        errorType = ERROR_UPGRADE_REQUIRED
-      } else {
-        errorType = ERROR_UNKNOWN
-        errorMessage = error.message
-      }
-      messenger.postMessage(tab, {
-        type: "openPopup",
-        payload: { errorType, errorMessage }
-      })
+  const settings = await getSettings()
+  const apiClient = new ApiClient(settings)
+  const responses = []
+  try {
+    responses.push(await apiClient.login(service))
+    // we can forgo the following calls if a timed activity exists
+    if (!responses[0].data.timed_activity) {
+      responses.push(
+        ...(await Promise.all([
+          apiClient.projects(),
+          apiClient.activities(fromDate, toDate),
+          apiClient.schedules(fromDate, toDate),
+        ])),
+      )
+    }
+
+    const settingTimeTrackingHHMM = get("[0].data.setting_time_tracking_hh_mm", responses)
+    !isNil(settingTimeTrackingHHMM) && setStorage({ settingTimeTrackingHHMM })
+
+    const action = {
+      type: "openPopup",
+      payload: {
+        service,
+        subdomain: settings.subdomain,
+        timedActivity: get("[0].data.timed_activity", responses),
+        lastProjectId: get("[0].data.last_project_id", responses),
+        lastTaskId: get("[0].data.last_task_id", responses),
+        roundTimeEntries: get("[0].data.round_time_entries", responses),
+        projects: groupedProjectOptions(get("[1].data.projects", responses)),
+        activities: get("[2].data", responses),
+        schedules: get("[3].data", responses),
+        fromDate,
+        toDate,
+        loading: false,
+      },
+    }
+    messenger.postMessage(tab, action)
+  } catch (error) {
+    let errorType, errorMessage
+    if (error.response?.status === 401) {
+      errorType = ERROR_UNAUTHORIZED
+    } else if (error.response?.status === 426) {
+      errorType = ERROR_UPGRADE_REQUIRED
+    } else {
+      errorType = ERROR_UNKNOWN
+      errorMessage = error.message
+    }
+    messenger.postMessage(tab, {
+      type: "openPopup",
+      payload: { errorType, errorMessage },
    })
+  }
 }
--- a/src/js/utils/messaging.js
+++ b/src/js/utils/messaging.js
@@ -1,14 +1,14 @@
 export class BackgroundMessenger {
-  #ports = new Map();
-  #handlers = new Map();
-  #onceHandlers = new Map();
+  #ports = new Map()
+  #handlers = new Map()
+  #onceHandlers = new Map()

  #handler = action => {
    const handler = this.#handlers.get(action.type)
    if (handler) {
      handler(action)
    }
-  };
+  }

  #onceHandler = action => {
    const handler = this.#onceHandlers.get(action.type)
@@ -16,7 +16,7 @@ export class BackgroundMessenger {
    if (handler) {
      handler(action)
    }
-  };
+  }

  #registerPort = (tabId, port) => {
    this.#ports.set(tabId, port)
@@ -25,14 +25,14 @@ export class BackgroundMessenger {
    port.onDisconnect.addListener(() => {
      this.#unregisterPort(tabId, port)
    })
-  };
+  }

  #unregisterPort = (tabId, port) => {
    port.onMessage.removeListener(this.#handler)
    port.onMessage.removeListener(this.#onceHandler)
    port.disconnect()
    this.#ports.delete(tabId)
-  };
+  }

  connectTab = tab => {
    const currentPort = this.#ports.get(tab.id)
@@ -40,41 +40,41 @@ export class BackgroundMessenger {
      const port = chrome.tabs.connect(tab.id)
      this.#registerPort(tab.id, port)
    }
-  };
+  }

  disconnectTab = tabId => {
    const port = this.#ports.get(tabId)
    if (port) {
      this.#unregisterPort(tabId, port)
    }
-  };
+  }

  postMessage = (tab, action) => {
    const port = this.#ports.get(tab.id)
    if (port) {
      port.postMessage(action)
    }
-  };
+  }

  once = (type, handler) => {
    this.#onceHandlers.set(type, handler)
-  };
+  }

  on = (type, handler) => {
    this.#handlers.set(type, handler)
-  };
+  }
 }

 export class ContentMessenger {
-  #port;
-  #handlers = new Map();
+  #port
+  #handlers = new Map()

  #handler = action => {
    const handler = this.#handlers.get(action.type)
    if (handler) {
      handler(action)
    }
-  };
+  }

  constructor(port) {
    this.#port = port
@@ -85,15 +85,15 @@ export class ContentMessenger {
    if (this.#port) {
      this.#port.postMessage(action)
    }
-  };
+  }

  on = (type, handler) => {
    this.#handlers.set(type, handler)
-  };
+  }

  stop = () => {
    this.#port.onMessage.removeListener(this.#handler)
    this.#port = null
    this.#handlers.clear()
-  };
+  }
 }
--- a/src/js/utils/notifier.js
+++ b/src/js/utils/notifier.js
@@ -1,39 +0,0 @@
-import React from "react"
-import bugsnag from "@bugsnag/js"
-import bugsnagReact from "@bugsnag/plugin-react"
-import { includes } from "lodash/fp"
-
-function getAppVersion() {
-  try {
-    return chrome.runtime.getManifest().version
-  } catch (error) {
-    return
-  }
-}
-
-const filterReport = report => {
-  const appVersion = getAppVersion()
-  if (!appVersion) {
-    return false
-  }
-
-  const scripts = ["background", "content", "options", "popup"].map(
-    file => `${chrome.extension.getURL(file)}.${appVersion}.js`
-  )
-
-  return scripts.some(script => report.stacktrace.some(includes(script)))
-}
-
-const bugsnagClient = bugsnag({
-  apiKey: process.env.BUGSNAG_API_KEY,
-  appVersion: getAppVersion(),
-  collectUserIp: false,
-  beforeSend: filterReport,
-  releaseStage: process.env.NODE_ENV,
-  notifyReleaseStages: ["production"]
-})
-
-bugsnagClient.use(bugsnagReact, React)
-
-export default bugsnagClient
-export const ErrorBoundary = bugsnagClient.getPlugin("react")
--- a/src/js/utils/urlMatcher.js
+++ b/src/js/utils/urlMatcher.js
@@ -1,22 +1,33 @@
 import UrlPattern from "url-pattern"
-import {
-  isFunction,
-  isUndefined,
-  compose,
-  toPairs,
-  map,
-  pipe
-} from "lodash/fp"
+import { isFunction, isUndefined, compose, toPairs, map, pipe, isNil, reduce } from "lodash/fp"
+import { asArray } from "./index"
 import queryString from "query-string"

-const extractQueryParams = (queryParams, query) => {
-  return toPairs(queryParams).reduce((acc, [key, param]) => {
-    acc[key] = query[param]
+function parseUrl(url) {
+  const urlObject = new URL(url)
+  const { origin, pathname, search } = urlObject
+  let { hash } = urlObject
+  const query = {
+    ...queryString.parse(search),
+    ...queryString.parse(hash),
+  }
+  if (hash) {
+    hash = hash.match(/#[^&]+/)[0]
+  }
+  return { origin, pathname, hash, query }
+}
+
+function extractQueryParams(queryParams, query) {
+  return toPairs(queryParams).reduce((acc, [key, params]) => {
+    const param = asArray(params).find((param) => !isNil(query[param]))
+    if (param) {
+      acc[key] = query[param]
+    }
    return acc
  }, {})
 }

-const createEvaluator = args => fnOrValue => {
+const createEvaluator = (args) => (fnOrValue) => {
  if (isUndefined(fnOrValue)) {
    return
  }
@@ -28,21 +39,35 @@ const createEvaluator = args => fnOrValue => {
  return fnOrValue
 }

+const prepareHostForRegExp = (host) => {
+  return host.replace(":", "\\:")
+}
+
+const replaceHostInPattern = (host, pattern) => {
+  if (typeof pattern === "string") {
+    return pattern.replace(":host:", prepareHostForRegExp(host))
+  } else if (pattern instanceof RegExp) {
+    return new RegExp(pattern.source.replace(":host:", prepareHostForRegExp(host)))
+  } else {
+    return pattern
+  }
+}
+
 const parseServices = compose(
  map(([key, config]) => ({
    ...config,
    key,
-    patterns: config.urlPatterns.map(pattern => {
+    patterns: config.urlPatterns.map((pattern) => {
      if (Array.isArray(pattern)) {
-        return new UrlPattern(...pattern)
+        return new UrlPattern(...pattern.map((p) => replaceHostInPattern(config.host, p)))
      }
-      return new UrlPattern(pattern)
-    })
+      return new UrlPattern(replaceHostInPattern(config.host, pattern))
+    }),
  })),
-  toPairs
+  toPairs,
 )

-export const createEnhancer = document => service => {
+export const createEnhancer = (document) => (service) => {
  if (!service) {
    return
  }
@@ -57,48 +82,55 @@ export const createEnhancer = document => service => {
    description: evaluate(service.description),
    projectId: evaluate(service.projectId),
    taskId: evaluate(service.taskId),
-    position: service.position || { right: "calc(2rem + 5px)" }
+    position: service.position || { right: "calc(2rem + 5px)" },
  }
 }

-export const createMatcher = remoteServices => {
-  const services = parseServices(remoteServices)
-  return tabUrl => {
-    const { origin, pathname, hash, search } = new URL(tabUrl)
+const applyHostOverrides = (remoteServices, hostOverrides) =>
+  pipe(
+    toPairs,
+    reduce((acc, [key, remoteService]) => {
+      acc[key] = {
+        ...remoteService,
+        key,
+        host: hostOverrides[remoteService.name] || remoteService.host,
+      }
+      return acc
+    }, {}),
+  )(remoteServices)
+
+export const createMatcher = (remoteServices, hostOverrides) => {
+  const services = parseServices(applyHostOverrides(remoteServices, hostOverrides))
+
+  return (tabUrl) => {
+    const { origin, pathname, hash, query } = parseUrl(tabUrl)
    const url = `${origin}${pathname}${hash}`
-    const query = queryString.parse(search)
-    const service = services.find(service =>
-      service.patterns.some(pattern => pattern.match(url))
-    )
+    const service = services.find((service) => {
+      return service.patterns.some((pattern) => pattern.match(url))
+    })

    if (!service) {
      return
    }

-    const pattern = service.patterns.find(pattern => pattern.match(url))
+    const pattern = service.patterns.find((pattern) => pattern.match(url))
    let match = pattern.match(url)
    if (service.queryParams) {
-      const extractedQueryParams = extractQueryParams(
-        service.queryParams,
-        query
-      )
+      const extractedQueryParams = extractQueryParams(service.queryParams, query)
      match = { ...extractedQueryParams, ...match }
    }

    return {
      ...match,
      ...service,
-      url,
-      match
+      url: tabUrl,
+      match,
    }
  }
 }

-export const createServiceFinder = remoteServices => document => {
-  const matcher = createMatcher(remoteServices)
+export const createServiceFinder = (remoteServices, hostOverrides) => (document) => {
+  const matcher = createMatcher(remoteServices, hostOverrides)
  const enhancer = createEnhancer(document)
-  return pipe(
-    matcher,
-    enhancer
-  )
+  return pipe(matcher, enhancer)
 }
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -4,26 +4,21 @@
  "description": "MOCO Zeiterfassung Plugin",
  "version": "0.9.20",
  "manifest_version": 2,
-  "description": "MOCO Time Tracking Plugin",
  "icons": {
-    "16": "src/images/logo.png",
-    "32": "src/images/logo.png",
-    "48": "src/images/logo.png",
-    "128": "src/images/logo.png"
+    "16": "src/images/moco-32x32.png",
+    "32": "src/images/moco-32x32.png",
+    "48": "src/images/moco-159x159.png",
+    "128": "src/images/moco-159x159.png"
  },
  "options_ui": {
    "page": "options.html"
  },
-  "permissions": [
-    "https://*.mocoapp.com/*",
-    "storage",
-    "tabs"
-  ],
+  "permissions": ["https://*.mocoapp.com/*", "storage", "tabs"],
  "background": {
    "page": "background.html"
  },
  "browser_action": {
-    "default_icon": "src/images/logo.png"
+    "default_icon": "src/images/moco-32x32.png"
  },
  "content_scripts": [
    {
--- a/test/data.js
+++ b/test/data.js
@@ -9,14 +9,16 @@ export const projects = [
      {
        id: 2733682,
        name: "Bugfixing",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 2733681,
        name: "Development",
-        billable: true
-      }
-    ]
+        billable: true,
+        default: true,
+      },
+    ],
  },
  {
    id: 944724773,
@@ -28,24 +30,28 @@ export const projects = [
      {
        id: 1621304,
        name: "Roadmap Features",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 1621310,
        name: "Bugfixing",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 1621305,
        name: "Quickwins",
-        billable: true
+        billable: true,
+        default: true,
      },
      {
        id: 1621323,
        name: "Refactorings",
-        billable: true
-      }
-    ]
+        billable: true,
+        default: false,
+      },
+    ],
  },
  {
    id: 944837106,
@@ -57,24 +63,28 @@ export const projects = [
      {
        id: 2500080,
        name: "Intercom & Mails",
-        billable: false
+        billable: false,
+        default: false,
      },
      {
        id: 2500081,
        name: "Demos",
-        billable: false
+        billable: false,
+        default: true,
      },
      {
        id: 2506050,
        name: "Calls",
-        billable: false
+        billable: false,
+        default: false,
      },
      {
        id: 2500084,
        name: "Importe",
-        billable: false
-      }
-    ]
+        billable: false,
+        default: false,
+      },
+    ],
  },
  {
    id: 944621413,
@@ -86,23 +96,27 @@ export const projects = [
      {
        id: 874014,
        name: "Entwicklung",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 874015,
        name: "Grafik",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 874016,
        name: "Konzept",
-        billable: true
+        billable: true,
+        default: false,
      },
      {
        id: 874017,
        name: "Projektleitung",
-        billable: true
-      }
-    ]
-  }
+        billable: true,
+        default: false,
+      },
+    ],
+  },
 ]
--- a/test/utils/index.test.js
+++ b/test/utils/index.test.js
@@ -3,16 +3,26 @@ import {
  findProjectByValue,
  findProjectByIdentifier,
  findTask,
+  defaultTask,
  groupedProjectOptions,
-  extractAndSetTag
+  extractAndSetTag,
+  formatDuration,
 } from "../../src/js/utils"
-import { map } from "lodash/fp"
+import { map, compose } from "lodash/fp"
+
+const getProjectBy = finder => key =>
+  compose(
+    finder(key),
+    groupedProjectOptions,
+  )(projects)
+
+const getProjectByValue = getProjectBy(findProjectByValue)
+const getProjectByIdentifier = getProjectBy(findProjectByIdentifier)

 describe("utils", () => {
  describe("findProjectByValue", () => {
    it("finds an existing project", () => {
-      const options = groupedProjectOptions(projects)
-      const project = findProjectByValue(944837106)(options)
+      const project = getProjectByValue(944837106)
      expect(project.value).toEqual(944837106)
      expect(project.label).toEqual("Support")
      expect(project.customerName).toEqual("MOCO APP")
@@ -20,14 +30,12 @@ describe("utils", () => {
    })

    it("returns undefined if project is not found", () => {
-      const options = groupedProjectOptions(projects)
-      const project = findProjectByValue(123)(options)
+      const project = getProjectByValue(123)
      expect(project).toBe(undefined)
    })

    it("returns undefined for undefined id", () => {
-      const options = groupedProjectOptions(projects)
-      const project = findProjectByValue(undefined)(options)
+      const project = getProjectByValue(undefined)
      expect(project).toBe(undefined)
    })
  })
@@ -57,16 +65,14 @@ describe("utils", () => {

  describe("findTask", () => {
    it("find an existing task", () => {
-      const options = groupedProjectOptions(projects)
-      const project = findProjectByValue(944837106)(options)
+      const project = getProjectByValue(944837106)
      const task = findTask(2506050)(project)
      expect(task.value).toEqual(2506050)
      expect(task.label).toEqual("(Calls)")
    })

    it("returns undefined if task is not found", () => {
-      const options = groupedProjectOptions(projects)
-      const project = findProjectByValue(944837106)(options)
+      const project = getProjectByValue(944837106)
      const task = findTask(123)(project)
      expect(task).toBe(undefined)
    })
@@ -77,14 +83,32 @@ describe("utils", () => {
    })
  })

+  describe("defaultTask", () => {
+    it("find a default task", () => {
+      const project = getProjectByValue(944837106)
+      const task = defaultTask(project.tasks)
+      expect(task.label).toBe("(Demos)")
+    })
+
+    it("returns first task if no default is defined", () => {
+      const project = getProjectByValue(944621413)
+      const task = defaultTask(project.tasks)
+      expect(task.label).toBe("Entwicklung")
+    })
+
+    it("return undefined if no tasks given", () => {
+      let task = defaultTask(null)
+      expect(task).toBeUndefined()
+
+      task = defaultTask([])
+      expect(task).toBeUndefined()
+    })
+  })
+
  describe("groupedProjectOptions", () => {
    it("transforms projects into grouped options by company", () => {
      const result = groupedProjectOptions(projects)
-      expect(map("label", result)).toEqual([
-        "Simplificator",
-        "MOCO APP",
-        "sharoo"
-      ])
+      expect(map("label", result)).toEqual(["Simplificator", "MOCO APP", "sharoo"])
    })
  })

@@ -92,19 +116,19 @@ describe("utils", () => {
    it("sets the correct tag and updates description", () => {
      const changeset = {
        description: "#meeting Lorem ipsum",
-        tag: ""
+        tag: "",
      }

      expect(extractAndSetTag(changeset)).toEqual({
        description: "Lorem ipsum",
-        tag: "meeting"
+        tag: "meeting",
      })
    })

    it("only matches tag at the beginning", () => {
      const changeset = {
        description: "Lorem #meeting ipsum",
-        tag: ""
+        tag: "",
      }

      expect(extractAndSetTag(changeset)).toEqual(changeset)
@@ -113,10 +137,27 @@ describe("utils", () => {
    it("returns the changeset if not tag is set", () => {
      const changeset = {
        description: "Without tag",
-        tag: ""
+        tag: "",
      }

      expect(extractAndSetTag(changeset)).toEqual(changeset)
    })
  })
+
+  describe("formatDuration", () => {
+    it("format with defaults", () => {
+      expect(formatDuration(3600)).toBe("1:00:00")
+      expect(formatDuration(3661)).toBe("1:01:01")
+    })
+
+    it("format without seconds", () => {
+      expect(formatDuration(3600, { showSeconds: false })).toBe("1:00")
+      expect(formatDuration(3661, { showSeconds: false })).toBe("1:01")
+    })
+
+    it("format in decimals", () => {
+      expect(formatDuration(3600, { settingTimeTrackingHHMM: false })).toBe("1.00")
+      expect(formatDuration(3661, { settingTimeTrackingHHMM: false })).toBe("1.02")
+    })
+  })
 })
--- a/test/utils/urlMatcher.test.js
+++ b/test/utils/urlMatcher.test.js
@@ -6,21 +6,19 @@ describe("utils", () => {
    let matcher

    beforeEach(() => {
-      matcher = createMatcher(remoteServices)
+      matcher = createMatcher(remoteServices, {})
    })

    describe("createMatcher", () => {
      it("matches host and path", () => {
-        const service = matcher(
-          "https://github.com/hundertzehn/mocoapp/pull/123"
-        )
+        const service = matcher("https://github.com/hundertzehn/mocoapp/pull/123")
        expect(service.key).toEqual("github-pr")
        expect(service.name).toEqual("github")
      })

      it("matches query string", () => {
        let service = matcher(
-          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue=TEST1-1"
+          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue=TEST1-1",
        )
        expect(service.key).toEqual("jira")
        expect(service.name).toEqual("jira")
@@ -32,7 +30,7 @@ describe("utils", () => {
        expect(service.match.id).toEqual("TEST1-1")

        service = matcher(
-          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail"
+          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail",
        )
        expect(service.key).toEqual("jira")
        expect(service.name).toEqual("jira")
@@ -44,7 +42,7 @@ describe("utils", () => {
        expect(service.match.id).toBeUndefined()

        service = matcher(
-          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue="
+          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue=",
        )
        expect(service.key).toEqual("jira")
        expect(service.name).toEqual("jira")
@@ -55,9 +53,7 @@ describe("utils", () => {
        expect(service.match.projectId).toEqual("TEST1")
        expect(service.match.id).toEqual("")

-        service = matcher(
-          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa"
-        )
+        service = matcher("https://moco-bx.atlassian.net/secure/RapidBoard.jspa")
        expect(service.key).toEqual("jira")
        expect(service.name).toEqual("jira")
        expect(service.match.org).toEqual("moco-bx")
@@ -65,7 +61,7 @@ describe("utils", () => {
        expect(service.match.id).toBeUndefined()

        service = matcher(
-          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&modal=detail&selectedIssue=TEST2-1"
+          "https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&modal=detail&selectedIssue=TEST2-1",
        )
        expect(service.key).toEqual("jira")
        expect(service.name).toEqual("jira")
@@ -78,29 +74,84 @@ describe("utils", () => {
      })

      it("matches url with hash", () => {
-        let service = matcher(
-          "https://www.wunderlist.com/webapp#/tasks/4771178545"
-        )
+        let service = matcher("https://www.wunderlist.com/webapp#/tasks/4771178545")
        expect(service.key).toEqual("wunderlist")
        expect(service.name).toEqual("wunderlist")
        expect(service.match.id).toEqual("4771178545")
      })

      it("does not match different host", () => {
-        const service = matcher(
-          "https://trello.com/hundertzehn/mocoapp/pull/123"
-        )
+        const service = matcher("https://trello.com/hundertzehn/mocoapp/pull/123")
        expect(service).toBeFalsy()
      })
+
+      it("matches query string in the hash", () => {
+        const service = matcher(
+          "https://www.wrike.com/workspace.htm?acc=2771711#path=folder&id=342769537&p=342762920&a=2771711&c=board&ot=342769562&so=10&bso=10&sd=0&st=space-342762920",
+        )
+        expect(service.key).toEqual("wrike")
+        expect(service.name).toEqual("wrike")
+        expect(service.id).toEqual("342769562")
+        expect(service.match.id).toEqual("342769562")
+      })
+
+      it("matches query parameter with different names", () => {
+        expect(
+          matcher(
+            "https://www.wrike.com/workspace.htm?acc=2771711#path=mywork&id=342769537&p=342762920&a=2771711&c=board&ot=1234&so=10&bso=10&sd=0&st=space-342762920",
+          ).id,
+        ).toEqual("1234")
+
+        expect(
+          matcher(
+            "https://www.wrike.com/workspace.htm?acc=2771711#path=folder&id=342769537&p=342762920&a=2771711&c=board&t=1234&so=10&bso=10&sd=0&st=space-342762920",
+          ).id,
+        ).toEqual("1234")
+      })
+
+      it("should match gitlab-mergerequest url", () => {
+        const service = matcher(
+          "https://gitlab.com/testorganisatzion/testproject/-/merge_requests/1",
+        )
+        expect(service.id).toEqual("1")
+        expect(service.match.id).toEqual("1")
+        expect(service.name).toEqual("gitlab")
+        expect(service.projectId).toEqual("testproject")
+      })
+      it("should match gitlab-mergerequest url with group", () => {
+        const service = matcher(
+          "https://gitlab.com/testorganisatzion/test-group/testproject/-/merge_requests/1",
+        )
+        expect(service.id).toEqual("1")
+        expect(service.match.id).toEqual("1")
+        expect(service.name).toEqual("gitlab")
+        expect(service.projectId).toEqual("testproject")
+      })
+
+      it("should match gitlab-issue url", () => {
+        const service = matcher("https://gitlab.com/testorganisatzion/testproject/-/issues/1")
+        expect(service.id).toEqual("1")
+        expect(service.match.id).toEqual("1")
+        expect(service.name).toEqual("gitlab")
+        expect(service.projectId).toEqual("testproject")
+      })
+
+      it("should match gitlab-issue url with group", () => {
+        const service = matcher(
+          "https://gitlab.com/testorganisatzion/test-group/testproject/-/issues/1",
+        )
+        expect(service.id).toEqual("1")
+        expect(service.match.id).toEqual("1")
+        expect(service.name).toEqual("gitlab")
+        expect(service.projectId).toEqual("testproject")
+      })
    })

    describe("createEnhancer", () => {
      it("enhances a services", () => {
        const url = "https://github.com/hundertzehn/mocoapp/pull/123"
        const document = {
-          querySelector: jest
-            .fn()
-            .mockReturnValue({ textContent: "[4321] Foo" })
+          querySelector: jest.fn().mockReturnValue({ textContent: "[4321] Foo" }),
        }
        const service = matcher(url)
        const enhancedService = createEnhancer(document)(service)
@@ -111,4 +162,27 @@ describe("utils", () => {
      })
    })
  })
+
+  describe("urlMatcher with overrideHosts", () => {
+    let matcher
+
+    beforeEach(() => {
+      matcher = createMatcher(remoteServices, {
+        github: "https://my-custom-github-url.com",
+      })
+    })
+
+    describe("createMatcher", () => {
+      it("matches overridden host and path", () => {
+        const service = matcher("https://my-custom-github-url.com/hundertzehn/mocoapp/pull/123")
+        expect(service.key).toEqual("github-pr")
+        expect(service.name).toEqual("github")
+      })
+
+      it("doesn't match default host and path", () => {
+        const service = matcher("https://github.com/hundertzehn/mocoapp/pull/123")
+        expect(service).toBe(undefined)
+      })
+    })
+  })
 })
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -2,27 +2,22 @@ require("dotenv").config()

 const path = require("path")
 const webpack = require("webpack")
-const CleanWebpackPlugin = require("clean-webpack-plugin")
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const HtmlWebpackPlugin = require("html-webpack-plugin")
-const RemoveSourceMapPlugin = require("./webpack/RemoveSourceMapPlugin")
 const ZipPlugin = require("zip-webpack-plugin")
-const {
-  BugsnagBuildReporterPlugin,
-  BugsnagSourceMapUploaderPlugin
-} = require("webpack-bugsnag-plugins")

-module.exports = env => {
+module.exports = (env) => {
  const config = {
    entry: {
      background: "./src/js/background.js",
      content: "./src/js/content.js",
      popup: "./src/js/popup.js",
-      options: "./src/js/options.js"
+      options: "./src/js/options.js",
    },
    output: {
      path: path.join(__dirname, `build/${env.browser}`),
-      filename: `[name].${process.env.npm_package_version}.js`
+      filename: `[name].${process.env.npm_package_version}.js`,
    },
    module: {
      rules: [
@@ -30,104 +25,85 @@ module.exports = env => {
          test: /\.scss$/,
          use: [
            {
-              loader: MiniCssExtractPlugin.loader
+              loader: MiniCssExtractPlugin.loader,
            },
            "css-loader",
            {
              loader: "sass-loader",
              options: {
-                includePaths: [path.join(__dirname, "src/css")]
-              }
-            }
+                sassOptions: {
+                  includePaths: [path.join(__dirname, "src/css")],
+                },
+              },
+            },
          ],
-          exclude: /node_modules/
+          exclude: /node_modules/,
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
-            loader: "babel-loader"
-          }
+            loader: "babel-loader",
+          },
        },
        {
          test: /\.(jpg|png)$/,
          loader: "file-loader",
          options: {
-            name: "[path][name].[ext]"
+            name: "[path][name].[ext]",
          },
-          exclude: /node_modules/
-        }
-      ]
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.svg$/,
+          loader: "svg-inline-loader",
+        },
+      ],
    },
    plugins: [
-      new CleanWebpackPlugin([`build/${env.browser}`]),
+      new CleanWebpackPlugin({
+        cleanAfterEveryBuildPatterns: ["!manifest.json", "!*.html"],
+      }),
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
-        "process.env.BUGSNAG_API_KEY": JSON.stringify(
-          process.env.BUGSNAG_API_KEY
-        )
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
-        chunkFilename: "[id].css"
+        chunkFilename: "[id].css",
      }),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "background.html"),
-        filename: "background.html",
-        chunks: ["background"]
+        filename: path.resolve(`build/${env.browser}`, "background.html"),
+        chunks: ["background"],
      }),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "popup.html"),
-        filename: "popup.html",
-        chunks: ["popup"]
+        filename: path.resolve(`build/${env.browser}`, "popup.html"),
+        chunks: ["popup"],
      }),
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "options.html"),
-        filename: "options.html",
-        chunks: ["options"]
-      })
+        filename: path.resolve(`build/${env.browser}`, "options.html"),
+        chunks: ["options"],
+      }),
    ],
    resolve: {
      modules: [path.join(__dirname, "src/js"), "node_modules"],
      alias: {
-        images: path.join(__dirname, "src/images")
-      }
+        images: path.join(__dirname, "src/images"),
+      },
    },
    mode: env.NODE_ENV || "development",
-    devtool: "cheap-module-source-map"
+    devtool: "cheap-module-source-map",
  }

  if (env.NODE_ENV === "production") {
-    config.devtool = "source-maps"
-
-    if (process.env.BUGSNAG_API_KEY) {
-      config.plugins.push(
-        new BugsnagBuildReporterPlugin({
-          apiKey: process.env.BUGSNAG_API_KEY,
-          appVersion: process.env.npm_package_version,
-          releaseStage: "production"
-        }),
-        // important: upload sourcemaps before removing source mapping url
-        new BugsnagSourceMapUploaderPlugin({
-          apiKey: process.env.BUGSNAG_API_KEY,
-          appVersion: process.env.npm_package_version,
-          publicPath:
-            env.browser === "firefox"
-              ? "moz-extension*://*/"
-              : "chrome-extension*://*/", // extra asterisk after protocol needed
-          overwrite: true
-        })
-      )
-    }
-
+    config.devtool = "none"
    config.plugins.push(
-      new RemoveSourceMapPlugin(),
      new ZipPlugin({
-        filename: `moco-bx-${env.browser}-v${
-          process.env.npm_package_version
-        }.zip`,
-        exclude: [/\.map$/]
-      })
+        filename: `moco-bx-${env.browser}-v${process.env.npm_package_version}.zip`,
+        exclude: [/\.map$/],
+      }),
    )
  }

--- a/webpack.chrome.config.js
+++ b/webpack.chrome.config.js
@@ -3,39 +3,37 @@ const { compact } = require("lodash/fp")

 const baseConfig = require("./webpack.base.config")

-module.exports = env => {
+module.exports = (env) => {
  const config = baseConfig(env)

  config.plugins.unshift(
-    new CopyWebpackPlugin([
-      {
-        from: "src/manifest.json",
-        transform: function(content, _path) {
-          const manifest = JSON.parse(
-            content
-              .toString()
-              .replace(/\[version\]/g, process.env.npm_package_version)
-          )
-          return Buffer.from(
-            JSON.stringify({
-              ...manifest,
-              permissions: compact([
-                ...manifest.permissions,
-                env.NODE_ENV === "development"
-                  ? "http://*.mocoapp.localhost/*"
-                  : null
-              ]),
-              options_ui: {
-                ...manifest.options_ui,
-                chrome_style: true
-              },
-              description: process.env.npm_package_description,
-              version: process.env.npm_package_version
-            })
-          )
-        }
-      }
-    ])
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "src/manifest.json",
+          transform: function (content, _path) {
+            const manifest = JSON.parse(
+              content.toString().replace(/\[version\]/g, process.env.npm_package_version),
+            )
+            return Buffer.from(
+              JSON.stringify({
+                ...manifest,
+                permissions: compact([
+                  ...manifest.permissions,
+                  env.NODE_ENV === "development" ? "http://*.mocoapp.localhost/*" : null,
+                ]),
+                options_ui: {
+                  ...manifest.options_ui,
+                  chrome_style: true,
+                },
+                description: process.env.npm_package_description,
+                version: process.env.npm_package_version,
+              }),
+            )
+          },
+        },
+      ],
+    }),
  )

  return config
--- a/webpack.firefox.config.js
+++ b/webpack.firefox.config.js
@@ -1,47 +1,45 @@
-const uuidv4 = require("uuid/v4")
+const { v4: uuidv4 } = require("uuid")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
 const { compact } = require("lodash/fp")

 const baseConfig = require("./webpack.base.config")

-module.exports = env => {
+module.exports = (env) => {
  const config = baseConfig(env)

  config.plugins.unshift(
-    new CopyWebpackPlugin([
-      {
-        from: "src/manifest.json",
-        transform: function(content, _path) {
-          const manifest = JSON.parse(
-            content
-              .toString()
-              .replace(/\[version\]/g, process.env.npm_package_version)
-          )
-          return Buffer.from(
-            JSON.stringify({
-              ...manifest,
-              permissions: compact([
-                ...manifest.permissions,
-                env.NODE_ENV === "development"
-                  ? "http://*.mocoapp.localhost/*"
-                  : null
-              ]),
-              options_ui: {
-                ...manifest.options_ui,
-                browser_style: true
-              },
-              browser_specific_settings: {
-                gecko: {
-                  id: process.env.APPLICATION_ID || `{${uuidv4()}}`
-                }
-              },
-              description: process.env.npm_package_description,
-              version: process.env.npm_package_version
-            })
-          )
-        }
-      }
-    ])
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "src/manifest.json",
+          transform: function (content, _path) {
+            const manifest = JSON.parse(
+              content.toString().replace(/\[version\]/g, process.env.npm_package_version),
+            )
+            return Buffer.from(
+              JSON.stringify({
+                ...manifest,
+                permissions: compact([
+                  ...manifest.permissions,
+                  env.NODE_ENV === "development" ? "http://*.mocoapp.localhost/*" : null,
+                ]),
+                options_ui: {
+                  ...manifest.options_ui,
+                  browser_style: true,
+                },
+                browser_specific_settings: {
+                  gecko: {
+                    id: process.env.APPLICATION_ID || `{${uuidv4()}}`,
+                  },
+                },
+                description: process.env.npm_package_description,
+                version: process.env.npm_package_version,
+              }),
+            )
+          },
+        },
+      ],
+    }),
  )

  return config
--- a/webpack/RemoveSourceMapPlugin.js
+++ b/webpack/RemoveSourceMapPlugin.js
@@ -1,23 +0,0 @@
-module.exports = class RemoveSourceMapPlugin {
-  constructor(options = {}) {
-    this.test = options.test || /\.(js|css)$/
-  }
-
-  apply(compiler) {
-    compiler.hooks.afterEmit.tap("RemoveSourceMapPlugin", compilation => {
-      Object.keys(compilation.assets)
-        .filter(key => this.test.test(key))
-        .forEach(key => {
-          const asset = compilation.assets[key]
-          const source = asset
-            .source()
-            .replace(/# sourceMappingURL=(.*\.map)/g, "# $1")
-          compilation.assets[key] = Object.assign(asset, {
-            source: function() {
-              return source
-            }
-          })
-        })
-    })
-  }
-}
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="stopwatch" class="svg-inline--fa fa-stopwatch fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M393.3 141.3l17.5-17.5c4.7-4.7 4.7-12.3 0-17l-5.7-5.7c-4.7-4.7-12.3-4.7-17 0l-17.5 17.5c-35.8-31-81.5-50.9-131.7-54.2V32h25c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12h-80c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h23v32.6C91.2 73.3 0 170 0 288c0 123.7 100.3 224 224 224s224-100.3 224-224c0-56.1-20.6-107.4-54.7-146.7zM224 480c-106.1 0-192-85.9-192-192S117.9 96 224 96s192 85.9 192 192-85.9 192-192 192zm4-128h-8c-6.6 0-12-5.4-12-12V172c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12v168c0 6.6-5.4 12-12 12z"></path></svg>