215 changed files with 5915 additions and 10247 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -42,7 +42,7 @@ steps:
 #        - .cache

  - name: dependencies
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -55,7 +55,7 @@ steps:
 #      - restore-cache

  - name: lint
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -66,7 +66,7 @@ steps:
      - dependencies

  - name: build-prod
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -77,7 +77,7 @@ steps:
      - dependencies

  - name: test-unit
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    commands:
      - corepack enable && pnpm config set store-dir .cache/pnpm
@ -87,7 +87,7 @@ steps:

  - name: typecheck
    failure: ignore
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -202,7 +202,7 @@ steps:
 #        - .cache

  - name: build
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -285,7 +285,7 @@ steps:
 #        - .cache

  - name: build
-    image: node:20.11.0-alpine
+    image: node:20.9-alpine
    pull: always
    environment:
      PNPM_CACHE_FOLDER: .cache/pnpm
@ -486,7 +486,7 @@ trigger:
 steps:
  - name: download
    pull: always
-    image: ghcr.io/kolaente/kolaente/drone-crowdin-v2:latest
+    image: git.lcomrade.su/root/drone-crowdin-v2
    settings:
      crowdin_key:
        from_secret: crowdin_key
@ -513,14 +513,14 @@ steps:
      author_name: Frederick [Bot]
      branch: main
      commit: true
-      commit_message: "chore(i18n): update translations via Crowdin"
+      commit_message: "[skip ci] Updated translations via Crowdin"
      remote: "ssh://git@kolaente.dev:9022/vikunja/frontend.git"
      ssh_key:
        from_secret: git_push_ssh_key

  - name: upload
    pull: always
-    image: ghcr.io/kolaente/kolaente/drone-crowdin-v2:latest
+    image: git.lcomrade.su/root/drone-crowdin-v2
    depends_on:
      - clone
    settings:
@ -532,6 +532,6 @@ steps:
        src/i18n/lang/en.json: en.json
 ---
 kind: signature
-hmac: a044c7c4db3c2a11299d4d118397e9d25be36db241723a1bbd0a2f9cc90ffdac
+hmac: dab902060979f246df77641c995c843ea39f86dba2de9003da7e593ce6f6f08a

 ...
--- a/.env.local.example
+++ b/.env.local.example
@ -6,6 +6,7 @@
 # (2) Comment in and adjust the values as needed.

 # VITE_IS_ONLINE=true
+# VITE_WORKBOX_DEBUG=false
 # SENTRY_AUTH_TOKEN=YOUR_TOKEN
 # SENTRY_ORG=vikunja
 # SENTRY_PROJECT=frontend-oss
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -1,5 +1,5 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
+require("@rushstack/eslint-patch/modern-module-resolution")

 module.exports = {
 	'root': true,
@ -7,54 +7,52 @@ module.exports = {
 		'browser': true,
 		'es2022': true,
 		'node': true,
+		'vue/setup-compiler-macros': true,
 	},
 	'extends': [
 		'eslint:recommended',
-		'plugin:vue/vue3-recommended',
+		'plugin:vue/vue3-essential',
 		'@vue/eslint-config-typescript/recommended',
 	],
 	'rules': {
-		'quotes': ['error', 'single'],
-		'comma-dangle': ['error', 'always-multiline'],
-		'semi': ['error', 'never'],
-
-		'vue/v-on-event-hyphenation': ['warn', 'never', { 'autofix': true }],
-		'vue/multi-word-component-names': 'off',
-
-		// uncategorized rules:
-		'vue/component-api-style': ['error', ['script-setup']],
-		'vue/component-name-in-template-casing': ['warn', 'PascalCase'],
-		'vue/custom-event-name-casing': ['error', 'camelCase'],
-		'vue/define-macros-order': 'error',
-		'vue/match-component-file-name': ['error', {
-			'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-			'shouldMatchCase': true,
-		}],
-		'vue/no-boolean-default': ['warn', 'default-false'],
-		'vue/match-component-import-name': 'error',
-		'vue/prefer-separate-static-class': 'warn',
-
-		'vue/padding-line-between-blocks': 'error',
-		'vue/next-tick-style': ['error', 'promise'],
-		'vue/block-lang': [
+		'vue/html-quotes': [
 			'error',
-			{ 'script': { 'lang': 'ts' } },
+			'double',
+		],
+		'quotes': [
+			'error',
+			'single',
+		],
+		'comma-dangle': [
+			'error',
+			'always-multiline',
+		],
+		'semi': [
+			'error',
+			'never',
 		],
-		'vue/no-required-prop-with-default': ['error', { 'autofix': true }],
-		'vue/no-duplicate-attr-inheritance': 'error',
-		'vue/no-empty-component-block': 'error',
-		'vue/html-indent': ['error', 'tab'],

-		// vue3
-		'vue/no-ref-object-destructure': 'error',
+		// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
+		'no-unused-vars': 'off',
+		'@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
+
+		'vue/multi-word-component-names': 0,
+		// disabled until we have support for reactivityTransform
+		// See https://github.com/vuejs/eslint-plugin-vue/issues/1948
+		// see also setting in `vite.config`
+		'vue/no-setup-props-destructure': 0,
 	},
 	'parser': 'vue-eslint-parser',
 	'parserOptions': {
 		'parser': '@typescript-eslint/parser',
-		'ecmaVersion': 'latest',
+		'ecmaVersion': 2022,
+		'sourceType': 'module',
 	},
 	'ignorePatterns': [
 		'*.test.*',
 		'cypress/*',
 	],
+	'globals': {
+		'defineProps': 'readonly',
+	},
 }
--- a/.github/workflows/lockdown.yml
+++ b/.github/workflows/lockdown.yml
@ -12,7 +12,7 @@ jobs:
  action:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/repo-lockdown@v4
+      - uses: dessant/repo-lockdown@v3
        with:
          pr-comment: 'Hi! Thank you for your contribution.

--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-20.11.0
+20.9.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,500 +9,6 @@ All releases can be found on https://code.vikunja.io/frontend/releases.

 The releases aim at the api versions which is why there are missing versions.

-## [0.22.1] - 2024-01-28
-
-### Bug Fixes
-
-* *(auth)* Correctly construct redirect url from current window href
-* *(ci)* Use working crowdin image
-* *(ci)* Use working image for crowdin update step
-* *(ci)* Use working crowdin image
-* *(color picker)* When picking a color, the color picker should not be black afterwards
-* *(editor)* List icons
-* *(editor)* Use higher-contrast colors for links and code
-* *(editor)* Don't bubble up changes when no changes were made
-* *(editor)* Focus the editor when clicking on the whole edit container
-* *(editor)* Render images without crashing
-* *(editor)* Use a stable image id to prevent constant re-rendering
-* *(editor)* Use manual input prompt instead of window.prompt
-* *(filter)* Validate filter title field after loading a filter for edit
-* *(kanban)* Ensure text and icon color only depends on the card background, not on the color scheme
-* *(kanban)* Make sure the checklist summary uses the correct text color
-* *(kanban)* Make sure spacing between assignees and other task details works out evenly
-* *(labels)* Make color reset work
-* *(labels)* Text and background combination in dark mode
-* *(notifications)* Unread indicator spacing
-* *(notifications)* Always left-align notification text
-* *(notifications)* Read indicator size
-* *(openid)* Use the full path when building the redirect url, not only the host
-* *(openid)* Use the calculated redirect url when authenticating with openid providers
-* *(project)* Always use the appropriate color for task estimate during deletion dialoge
-* *(quick add magic)* Ensure month is removed from task text
-* *(table view)* Make sure popup does not overlap
-* *(task)* Don't immediately re-trigger date change when nothing changed
-* *(task)* Bubble date changes from the picker up
-* *(task)* Update due date when marking a task done
-* *(task)* Don't show edit button when the user does not have permission to edit the task
-* *(task)* Don't show assignee edit buttons and input when the user does not have the permission to edit
-* *(tasks)* Make sure tasks show up if their parent task is not available in the current view
-* *(tasks)* Don't load tasks multiple times when viewing list or gantt view
-* *(test)* Make date assertion not brittle
-* Lint ([5e991f3](5e991f3024f7856420614171ec66468eb2e2df63))
-
-
-### Dependencies
-
-* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v2 (#3862)
-* *(deps)* Update pnpm to v8.14.0
-* *(deps)* Update dependency vue to v3.4.7 (#3873)
-* *(deps)* Update dependency axios to v1.6.5 (#3871)
-* *(deps)* Update dependency date-fns to v3 (#3857)
-* *(deps)* Update dev-dependencies (#3861)
-* *(deps)* Update dependency @kyvg/vue3-notification to v3.1.3 (#3864)
-* *(deps)* Update dependency node to v20.11.0
-* *(deps)* Update dependency vue-i18n to v9.9.0 (#3880)
-* *(deps)* Update dependency dompurify to v3.0.8 (#3881)
-* *(deps)* Update dependency floating-vue to v2.0.0 (#3883)
-* *(deps)* Update tiptap to v2.1.15 (#3884)
-* *(deps)* Update vueuse to v10.7.1 (#3872)
-* *(deps)* Update pnpm to v8.14.1 (#3885)
-* *(deps)* Update sentry-javascript monorepo to v7.93.0 (#3859)
-* *(deps)* Update dependency floating-vue to v5 (#3887)
-* *(deps)* Update dependency vue to v3.4.8 (#3886)
-* *(deps)* Update node.js to v20.11 (#3888)
-* *(deps)* Increase renovate timeout
-* *(deps)* Update tiptap to v2.1.16 (#3892)
-* *(deps)* Pin node.js (#3895)
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dependency sortablejs to v1.15.2
-* *(deps)* Update vueuse to v10.7.2
-* *(deps)* Update dependency floating-vue to v5.1.0
-* *(deps)* Update dependency vue to v3.4.14
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies (major) (#3890)
-* *(deps)* Update dependency floating-vue to v5.1.1
-* *(deps)* Update dependency floating-vue to v5.2.0
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dependency vue to v3.4.15
-* *(deps)* Update dependency happy-dom to v13.2.0
-* *(deps)* Update sentry-javascript monorepo to v7.94.1
-* *(deps)* Update dependency vite to v5.0.12
-* *(deps)* Update dependency date-fns to v3.3.0
-* *(deps)* Update dev-dependencies
-* *(deps)* Update pnpm to v8.14.2
-* *(deps)* Update dependency date-fns to v3.3.1
-* *(deps)* Update dev-dependencies to v6.19.1
-* *(deps)* Update pnpm to v8.14.3
-* *(deps)* Update sentry-javascript monorepo to v7.95.0
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dependency axios to v1.6.6
-* *(deps)* Update dev-dependencies
-* *(deps)* Update sentry-javascript monorepo to v7.97.0
-* *(deps)* Update sentry-javascript monorepo to v7.98.0
-* *(deps)* Update dependency axios to v1.6.7
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-
-### Features
-
-* *(reminders)* Show reminders in notifications bar
-* Datepicker locale support (#3878) ([92f7d9d](92f7d9ded5d56b95ba7d647eba01372f6ef682ad))
-
-
-### Miscellaneous Tasks
-
-* *(i18n)* Update translations via Crowdin
-* *(i18n)* Update translations via Crowdin
-* *(i18n)* Update translations via Crowdin
-* *(perf)* Import some modules dynamically (#3179)
-* Only show webhooks overview table when there are webhooks ([326bfb5](326bfb557ab359fa154b163f5dd957928f46d3ec))
-* Only show webhooks overview table when there are webhooks ([631b02d](631b02d2eedc4a403b7c55f1c56ceaeca5379bf5))
-
-## [0.22.0] - 2023-12-19
-
-### Bug Fixes
-
-* *(api tokens)* Expiry of tokens in a number of days
-* *(api tokens)* Lint
-* *(api tokens)* Make deletion of old tokens work
-* *(api tokens)* Show a token after it was created
-* *(attachments)* Layout and coloring in dark mode
-* *(auth)* Correctly redirect the user to the last visited page after login
-* *(auth)* Silently discard invalid auth tokens and log the user out
-* *(background)* Unsplash author credit in dark mode
-* *(build)* Don't download Puppeteer when building for prod
-* *(ci)* Pin used node version to 20.5 to avoid build issues
-* *(ci)* Use correct secret key to push
-* *(docker)* Set correct default value for custom logo url
-* *(editor)* Actions styling
-* *(editor)* Actually populate loaded data into the editor
-* *(editor)* Add icons for clearing marks and nodes
-* *(editor)* Add missing dependencies for commands
-* *(editor)* Add missing dependency
-* *(editor)* Add workaround for checklist tiptap bug
-* *(editor)* Alignment and focus states
-* *(editor)* Allow checking a checkbox even when the editor is set to read only
-* *(editor)* Always set mode to preview after save
-* *(editor)* Always show placeholder when empty
-* *(editor)* Change description when switching between tasks
-* *(editor)* Check for almost empty editor value
-* *(editor)* Check for empty content
-* *(editor)* Checklist button icon
-* *(editor)* Commands list in dark mode
-* *(editor)* Correctly resolve images in descriptions
-* *(editor)* Don't check parent checkbox when child label was clicked
-* *(editor)* Don't crash when the component isn't completely mounted
-* *(editor)* Don't create empty "blob" files when pasting images
-* *(editor)* Don't prevent typing editor focus shortcut when other instance of an editor is focused already
-* *(editor)* Don't use global shortcut when anything is focused
-* *(editor)* Duplicate name
-* *(editor)* Duplicate name for extension
-* *(editor)* Focus state
-* *(editor)* Image button icon
-* *(editor)* Image paste handling
-* *(editor)* Keep editor open when emptying content from the outside
-* *(editor)* Keep editor open when emptying content from the outside (#3852)
-* *(editor)* Lint
-* *(editor)* Lint
-* *(editor)* List styling
-* *(editor)* Make checklist indicator work again
-* *(editor)* Make initial editor mode (preview/edit) work
-* *(editor)* Make tests work with changed structure
-* *(editor)* Permission check for table editing
-* *(editor)* Placeholder showing or not showing
-* *(editor)* Reset on empty
-* *(editor)* Show editor if there is no content initially
-* *(editor)* Use edit enable
-* *(editor)* Use modelValue directly to update values in the editor
-* *(filter)* Don't immediately re-trigger prepareFilter
-* *(filter)* Don't prevent entering date math strings
-* *(filter)* Don't show other filters in project selection in saved filter
-* *(filter)* Make other filters are not available for project selection
-* *(filters)* Don't allow marking a filter as favorite
-* *(filters)* Incorrect translation string
-* *(filters)* Infinite loop when creating filters with dates (#3061)
-* *(gantt)* Open task with double click from the gantt chart
-* *(gantt)* Update the gantt view when switching between projects
-* *(i18n)* Add upload files config
-* *(i18n)* Fall back to browser language if the configured user language is invalid
-* *(i18n)* Hungarian translation
-* *(kanban)* Check if doneBucketId is set
-* *(kanban)* Make sure kanban cards always have text color matching their background
-* *(kanban)* Opening a task from the kanban board and then reloading the page should not crash everything when then navigating back
-* *(list view)* Align nested subtasks with the parent text
-* *(menu)* Separate favorite and saved filter projects from other projects
-* *(navigation)* Don't hide color bubble in navigation on touch devices
-* *(navigation)* Show filter settings dropdown
-* *(project)* Correctly show project color next to project title in list view
-* *(projects)* Don't suggest to create a new task in an empty filter
-* *(quick actions)* Always open quick actions with hotkey, even if other inputs are focused
-* *(quick actions)* Always search for projects
-* *(quick actions)* Don't show projects when searching for labels or tasks
-* *(quick actions)* Invalid class prop
-* *(quick actions)* Project filter
-* *(quick actions)* Project search
-* *(quick actions)* Search for tasks within a project when specifying a project with quick add magic
-* *(quick add magic)* Annually and variants spelling
-* *(quick add magic)* Headline
-* *(quick add magic)* Ignore common task indention when adding multiple tasks at once
-* *(quick add magic)* Repeating intervals in words
-* *(settings)* Allow removing the default project via settings
-* *(settings)* Move overdue remindeer time below
-* *(sw)* Remove debug option via env as it would not be replaced correctly in prod builds
-* *(task)* Correct spacing to task and project title
-* *(task)* Correctly build task identifier
-* *(task)* Don't reload the kanban board when opening a task
-* *(task)* Don't reload the kanban board when opening a task
-* *(task)* Duplicate attribute
-* *(task)* Make sure the modal close button is not overlapped with the title field (#3256)
-* *(task)* Priority label sizing and positioning in different environments
-* *(task)* Priority label spacing
-* *(task)* Remove wrong repeat types
-* *(task)* Show related tasks form with shortcut even when there are already other related tasks
-* *(task)* Use editor as preview first, then check for edit
-* *(task)* Use empty description helper everywhere
-* *(tasks)* Don't use the filter for upcoming when one is set for the home page
-* *(tasks)* Favorited sub tasks are not shown in favorites pseudo list
-* *(tasks)* Ignore empty lines when adding multiple tasks at once
-* *(tasks)* Make sure tasks are fully clickable
-* *(tasks)* Play pop sound directly and not from store
-* *(tasks)* Prevent endless references
-* *(tasks)* Reset page number when applying filters
-* *(tasks)* Update api route
-* *(tasks)* Update sub task relations in list view after they were created
-* *(tasks)* Use mousedown event instead of click to close the task popup
-* *(test)* Use correct file input
-* *(user)* Allow openid users to request their deletion
-* *(webhooks)* Styling* Correctly resolve kanban board in the background when moving a task ([8902c15](8902c15f7e9590da075e860f3d35939169ee246a))
-* Don't render route modal when no properties are defined ([b1fe3fe](b1fe3fe29b3f7c8e3f1fa279b74f674bc63db232))
-* Don't try to load buckets for project id 0 ([15ecafd](15ecafdf04391139da27f38dac9ed915d6220a9a))
-* Lint ([218d724](218d72494a088b612e720ca2e9b566c0d3446579))
-* Lint ([337c3e5](337c3e5e3e06a9e4928bebffda2e2f223fef398b))
-* Lint ([7f2d921](7f2d92138e302188d6000632b4bc9bf053194dee))
-* Lint ([99e2161](99e2161c09b1e2b08f3a907bd2e3ad2c71da87d3))
-* Lint ([c01957a](c01957aae24696812c80b18c77137b5030fc757a))
-* Tests ([f6d1db3](f6d1db35957c4c2fda7a58539a0a39db1b683ccb))
-
-
-### Dependencies
-
-* *(deps)* Remove unused dependencies
-* *(deps)* Update dependencies
-* *(deps)* Update dependencies
-* *(deps)* Update dependency @fortawesome/vue-fontawesome to v3.0.5 (#3815)
-* *(deps)* Update dependency @github/hotkey to v2.1.0 (#3766)
-* *(deps)* Update dependency @github/hotkey to v2.1.1 (#3770)
-* *(deps)* Update dependency @github/hotkey to v2.2.0 (#3809)
-* *(deps)* Update dependency @github/hotkey to v2.3.0 (#3810)
-* *(deps)* Update dependency @github/hotkey to v2.3.1 (#3845)
-* *(deps)* Update dependency @github/hotkey to v3
-* *(deps)* Update dependency @infectoone/vue-ganttastic to v2.2.0
-* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.12.2
-* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v1
-* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v1.5.0 (#3812)
-* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v1.6.0
-* *(deps)* Update dependency @kyvg/vue3-notification to v3
-* *(deps)* Update dependency @kyvg/vue3-notification to v3.1.2
-* *(deps)* Update dependency @types/is-touch-device to v1.0.1 (#3786)
-* *(deps)* Update dependency @types/is-touch-device to v1.0.2 (#3816)
-* *(deps)* Update dependency @types/lodash.clonedeep to v4.5.8 (#3787)
-* *(deps)* Update dependency @types/lodash.clonedeep to v4.5.9 (#3817)
-* *(deps)* Update dependency @types/node to v18.17.0
-* *(deps)* Update dependency @types/node to v20 (#3796)
-* *(deps)* Update dependency @types/sortablejs to v1.15.4 (#3788)
-* *(deps)* Update dependency @types/sortablejs to v1.15.5 (#3818)
-* *(deps)* Update dependency @vueuse/core to v10.3.0
-* *(deps)* Update dependency @vueuse/core to v10.4.0 (#3723)
-* *(deps)* Update dependency axios to v1.5.1
-* *(deps)* Update dependency axios to v1.6.0 (#3801)
-* *(deps)* Update dependency axios to v1.6.2 (#3820)
-* *(deps)* Update dependency caniuse-lite to v1.0.30001514
-* *(deps)* Update dependency codemirror to v5.65.14
-* *(deps)* Update dependency dayjs to v1.11.10 (#3753)
-* *(deps)* Update dependency dompurify to v3.0.5
-* *(deps)* Update dependency dompurify to v3.0.6 (#3754)
-* *(deps)* Update dependency eslint to v8.52.0 (#3785)
-* *(deps)* Update dependency highlight.js to v11.9.0 (#3763)
-* *(deps)* Update dependency lowlight to v2.9.0 (#3789)
-* *(deps)* Update dependency marked to v5.1.1
-* *(deps)* Update dependency marked to v9
-* *(deps)* Update dependency marked to v9.1.0 (#3760)
-* *(deps)* Update dependency marked to v9.1.1 (#3768)
-* *(deps)* Update dependency marked to v9.1.2 (#3774)
-* *(deps)* Update dependency node (#3797)
-* *(deps)* Update dependency node (#3834)
-* *(deps)* Update dependency node to v18.18.0
-* *(deps)* Update dependency node to v18.18.1
-* *(deps)* Update dependency node to v18.18.2
-* *(deps)* Update dependency pinia to v2.1.6
-* *(deps)* Update dependency pinia to v2.1.7 (#3771)
-* *(deps)* Update dependency sass to v1.69.2 (#3767)
-* *(deps)* Update dependency sortablejs to v1.15.1 (#3841)
-* *(deps)* Update dependency ufo to v1.2.0
-* *(deps)* Update dependency ufo to v1.3.1
-* *(deps)* Update dependency ufo to v1.3.2 (#3824)
-* *(deps)* Update dependency vite to v4.4.2
-* *(deps)* Update dependency vite to v4.4.3
-* *(deps)* Update dependency vue to v3.3.10 (#3843)
-* *(deps)* Update dependency vue to v3.3.13
-* *(deps)* Update dependency vue to v3.3.5 (#3782)
-* *(deps)* Update dependency vue to v3.3.6 (#3784)
-* *(deps)* Update dependency vue to v3.3.7 (#3799)
-* *(deps)* Update dependency vue to v3.3.8 (#3814)
-* *(deps)* Update dependency vue to v3.3.9 (#3837)
-* *(deps)* Update dependency vue-i18n to v9.5.0
-* *(deps)* Update dependency vue-i18n to v9.6.0 (#3800)
-* *(deps)* Update dependency vue-i18n to v9.6.1 (#3803)
-* *(deps)* Update dependency vue-i18n to v9.6.5 (#3807)
-* *(deps)* Update dependency vue-i18n to v9.7.0 (#3825)
-* *(deps)* Update dependency vue-i18n to v9.8.0 (#3833)
-* *(deps)* Update dependency vue-router to v4.2.5 (#3755)
-* *(deps)* Update dessant/repo-lockdown action to v4
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies
-* *(deps)* Update dev-dependencies (#3721)
-* *(deps)* Update dev-dependencies (#3726)
-* *(deps)* Update dev-dependencies (#3740)
-* *(deps)* Update dev-dependencies (#3746)
-* *(deps)* Update dev-dependencies (#3747)
-* *(deps)* Update dev-dependencies (#3757)
-* *(deps)* Update dev-dependencies (#3761)
-* *(deps)* Update dev-dependencies (#3769)
-* *(deps)* Update dev-dependencies (#3776)
-* *(deps)* Update dev-dependencies (#3780)
-* *(deps)* Update dev-dependencies (#3793)
-* *(deps)* Update dev-dependencies (#3802)
-* *(deps)* Update dev-dependencies (#3806)
-* *(deps)* Update dev-dependencies (#3811)
-* *(deps)* Update dev-dependencies (#3813)
-* *(deps)* Update dev-dependencies (#3821)
-* *(deps)* Update dev-dependencies (#3826)
-* *(deps)* Update dev-dependencies (#3828)
-* *(deps)* Update dev-dependencies (#3829)
-* *(deps)* Update dev-dependencies (#3835)
-* *(deps)* Update dev-dependencies (#3842)
-* *(deps)* Update dev-dependencies (#3846)
-* *(deps)* Update dev-dependencies (#3856)
-* *(deps)* Update dev-dependencies (major) (#3741)
-* *(deps)* Update dev-dependencies (major) (#3827)
-* *(deps)* Update dev-dependencies to v6
-* *(deps)* Update flake
-* *(deps)* Update font awesome to v6.4.2
-* *(deps)* Update font awesome to v6.5.1 (#3839)
-* *(deps)* Update lockfile
-* *(deps)* Update lockfile
-* *(deps)* Update lockfile
-* *(deps)* Update lockfile
-* *(deps)* Update lockfile
-* *(deps)* Update lockfile
-* *(deps)* Update node.js to v18.17.0
-* *(deps)* Update node.js to v18.17.1
-* *(deps)* Update node.js to v20.7 (#3736)
-* *(deps)* Update node.js to v20.8 (#3756)
-* *(deps)* Update pnpm to v8.10.2
-* *(deps)* Update pnpm to v8.10.5
-* *(deps)* Update pnpm to v8.11.0
-* *(deps)* Update pnpm to v8.12.1
-* *(deps)* Update pnpm to v8.6.12
-* *(deps)* Update pnpm to v8.6.7
-* *(deps)* Update pnpm to v8.6.8
-* *(deps)* Update pnpm to v8.6.9
-* *(deps)* Update pnpm to v8.7.0
-* *(deps)* Update pnpm to v8.8.0
-* *(deps)* Update pnpm to v8.9.0
-* *(deps)* Update pnpm to v8.9.2
-* *(deps)* Update sentry-javascript monorepo to v7.58.0
-* *(deps)* Update sentry-javascript monorepo to v7.58.1
-* *(deps)* Update sentry-javascript monorepo to v7.59.1
-* *(deps)* Update sentry-javascript monorepo to v7.59.2
-* *(deps)* Update sentry-javascript monorepo to v7.59.3
-* *(deps)* Update sentry-javascript monorepo to v7.60.0
-* *(deps)* Update sentry-javascript monorepo to v7.73.0
-* *(deps)* Update sentry-javascript monorepo to v7.74.0 (#3772)
-* *(deps)* Update sentry-javascript monorepo to v7.74.1 (#3778)
-* *(deps)* Update sentry-javascript monorepo to v7.75.1 (#3798)
-* *(deps)* Update sentry-javascript monorepo to v7.77.0 (#3805)
-* *(deps)* Update sentry-javascript monorepo to v7.80.1 (#3819)
-* *(deps)* Update sentry-javascript monorepo to v7.85.0 (#3831)
-* *(deps)* Update sentry-javascript monorepo to v7.88.0
-* *(deps)* Update sub-dependencies
-* *(deps)* Update tiptap to v2.1.12 (#3790)
-* *(deps)* Update tiptap to v2.1.13 (#3840)
-* *(deps)* Update vueuse to v10.5.0 (#3762)
-* *(deps)* Update vueuse to v10.6.1 (#3822)
-* *(deps)* Update vueuse to v10.7.0 (#3844)
-
-### Features
-
-* *(api tokens)* Add basic api token overview
-* *(api tokens)* Add deleting api tokens
-* *(api tokens)* Add token creation form
-* *(api tokens)* Allow custom selection of expiry dates
-* *(api tokens)* Allow selecting all permissions
-* *(api tokens)* Format permissions and groups human-readable
-* *(api tokens)* Show warning if token has expired
-* *(api tokens)* Validate title field when creating a new token
-* *(assignees)* Improve avatar list consistency
-* *(editor)* Add all slash commands
-* *(editor)* Add bubble menu
-* *(editor)* Add code highlighting
-* *(editor)* Add command list example
-* *(editor)* Add comment when pressing ctrl enter
-* *(editor)* Add placeholder
-* *(editor)* Add proper description for all buttons
-* *(editor)* Add tests to check rendering of task description
-* *(editor)* Add tooltips for everything
-* *(editor)* Add uploading an image on save
-* *(editor)* Allow passing placeholder down
-* *(editor)* Edit mode
-* *(editor)* Edit shortcut to set focus into the editor
-* *(editor)* Enable table
-* *(editor)* Image upload
-* *(editor)* Improve overall styling
-* *(editor)* Make image upload work via slash command
-* *(editor)* Make task list work
-* *(editor)* Mark a checkbox item as done when clicking on its text
-* *(editor)* Move all editor related components into one folder
-* *(editor)* Only load attachment images when rendering is done
-* *(editor)* Open links when clicking on them
-* *(editor)* Properly bubble changes when they are made
-* *(editor)* Resolve and load attachment images from content
-* *(editor)* Save when pressing ctrl enter
-* *(gantt)* Implement dynamic sizing on small date ranges (#3750)
-* *(i18n)* Add Slovene language for selection in the ui
-* *(i18n)* Add arabic to list of selectable languages
-* *(i18n)* Add hungarian translation for selection
-* *(i18n)* Run translation update directly
-* *(i18n)* Update crowdin sync to use v2 api
-* *(i18n)* Update translations only once a day
-* *(kanban)* Add icon for bucket collapse
-* *(kanban)* Add setting for default bucket
-* *(kanban)* Save done bucket with project instead of bucket
-* *(labels)* Assign random color when creating labels
-* *(list view)* Show subtasks nested
-* *(migration)* Proper wording for async migration
-* *(notifications)* Add option to mark all as read
-* *(quick actions)* Show done tasks last
-* *(quick actions)* Show labels as labels and tasks with all of their details
-* *(quick actions)* Show task identifier
-* *(quick actions)* Show tasks for a label when selecting it
-* *(quick add magic)* Allow using the project identifier via quick add magic
-* *(task)* Add more tests
-* *(task)* Group related task action buttons
-* *(task)* Immediately set focus on the task search input when opening the related tasks menu
-* *(task)* Move task priority to the front when showing tasks inline
-* *(task)* Save currently opened task with control/meta + s
-* *(tasks)* Make the whole task in list view clickable
-* *(tasks)* Update due date text every minute
-* *(webhooks)* Add form validation* Allow custom logo via environment variable (#3685) ([cade3df](cade3df3e9a7eca8e0aa9d1553dd5597f0f5a8a2))
-* *(webhooks)* Add webhook management form
-* Add demo mode warning message ([ed8fb71](ed8fb71ff0b05860f320e2a1fe6c3cb29ed2889a))
-* Add setting for default bucket ([04ba101](04ba1011cc3042f657ddb40ee727caf455db8b64))
-* Api tokens ([28f2551](28f2551d87b99c59055a4909195e435dbd9794b6))
-* Improve error message for invalid API url ([725fd1a](725fd1ad467fb988810cb23f12d372af236bd21d))
-* Move from easymde to tiptap editor (#2222) ([26fc9b4](26fc9b4e4f8b96616385f4ca0a77a0ff7ee5eee5))
-* Quick actions improvments ([47d5890](47d589002ccef5047a25ea3ad8ebe582c3b0bbc6))
-* Webhooks (#3783) ([5d991e5](5d991e539bb3a249447847c13c92ee35d356b902))
-
-### Miscellaneous Tasks
-
-* *(ci)* Sign drone config
-* *(editor)* Add break icon
-* *(editor)* Add horizontal line icon
-* *(editor)* Cleanup
-* *(editor)* Cleanup unused options
-* *(editor)* Format
-* *(editor)* Make sure all tiptap dependencies are updated as one
-* *(editor)* Move checklist to the other lists
-* *(editor)* Remove converting markdown
-* *(editor)* Remove marked usages
-* *(editor)* Remove old editor component
-* *(editor)* Remove unused components
-* *(editor)* Use typed props definition
-* *(filter)* Remove debug log
-* *(quick actions)* Format* Provide better error messages when refreshing user info fails ([d535879](d5358793de7fc53795329382222e5f3bafc7fba1))
-* Add pr lockdown ([07b1e9a](07b1e9a6b76eb7d92640e00a1dec4294efd2947b))
-* Cleanup ([a4a2b95](a4a2b95dc7eaad5fe313884eec0d22d7ae5f85c1))
-* Debug ([3cb1e7d](3cb1e7dede659acd19410e0611346e0f582f2ff3))
-* Format ([c3f85fc](c3f85fcb1988603a58104552b35101b13e93b06e))
-* Improve checking for API url '/' suffix  (#121) ([311b1d7](311b1d7594cfd03be4d998f4aead041a8ca63f8c))
-* Include version json string in release zip ([c4adcf4](c4adcf4655550214ae795d941eb51878f34cedeb))
-* Update flake ([64c90c7](64c90c7fe8a77ded21778a798f18862fe966bd1a))
-* Update lockfile ([9f82ec4](9f82ec4162151ba32f329cb8e335eff6b21cebd4))
-
-### Other
-
-* *(other)* [skip ci] Updated translations via Crowdin
-
 ## [0.21.0] - 2023-07-07

 ### Bug Fixes
@ -6020,4 +5526,4 @@ Co-committed-by: renovate <renovatebot@kolaente.de>
 * Fixed trying to verify an email when there was none
 * Fixed loading tasks when the user was not authenticated

-## [0.1] - 2018-09-20
+## [0.1] - 2018-09-20
--- a/2
+++ b/2
@ -3,7 +3,7 @@
 #  │─││ │││  │ │
 #  ┘─┘┘─┘┘┘─┘┘─┘

-FROM --platform=$BUILDPLATFORM node:20.11.0-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:20.9-alpine AS builder

 WORKDIR /build

--- a/README.md
+++ b/README.md
@ -1,14 +1,10 @@
-# This repository was merged with the api and is now archived
-
-You can find the new (old) code over on [vikunja/vikunja](https://kolaente.dev/vikunja/vikunja).
-
 # Web frontend for Vikunja

 > The todo app to organize your life.

 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.22.1-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.21.0-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)

 This is the web frontend for Vikunja, written in Vue.js.
@ -29,7 +25,7 @@ export DOCKER_BUILDKIT=1
 docker build -t vikunja/frontend .
 ```

-Refer to [multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for different platforms.
+Refer to Refer [to multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for the different platform.

 ## Project setup

@ -53,4 +49,4 @@ pnpm run build

 ```shell
 pnpm run lint
-```
+```
--- a/cypress.config.ts
+++ b/cypress.config.ts
--- a/cypress/e2e/project/project-view-kanban.spec.ts
+++ b/cypress/e2e/project/project-view-kanban.spec.ts
@ -5,19 +5,6 @@ import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
 import {prepareProjects} from './prepareProjects'

-function createSingleTaskInBucket(count = 1, attrs = {}) {
-	const projects = ProjectFactory.create(1)
-	const buckets = BucketFactory.create(2, {
-		project_id: projects[0].id,
-	})
-	const tasks = TaskFactory.create(count, {
-		project_id: projects[0].id,
-		bucket_id: buckets[0].id,
-		...attrs,
-	})
-	return tasks[0]
-}
-
 describe('Project View Kanban', () => {
 	createFakeUserAndLogin()
 	prepareProjects()
@ -220,7 +207,15 @@ describe('Project View Kanban', () => {
 	})
 	
 	it('Should remove a task from the board when deleting it', () => {
-		const task = createSingleTaskInBucket(5)
+		const projects = ProjectFactory.create(1)
+		const buckets = BucketFactory.create(2, {
+			project_id: projects[0].id,
+		})
+		const tasks = TaskFactory.create(5, {
+			project_id: 1,
+			bucket_id: buckets[0].id,
+		})
+		const task = tasks[0]
 		cy.visit('/projects/1/kanban')

 		cy.get('.kanban .bucket .tasks .task')
@ -243,43 +238,4 @@ describe('Project View Kanban', () => {
 		cy.get('.kanban .bucket .tasks')
 			.should('not.contain', task.title)
 	})
-
-	it('Should show a task description icon if the task has a description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
-			description: 'Lorem Ipsum',
-		})
-
-		cy.visit(`/projects/${task.project_id}/kanban`)
-		cy.wait('@loadTasks')
-
-		cy.get('.bucket .tasks .task .footer .icon svg')
-			.should('exist')
-	})
-
-	it('Should not show a task description icon if the task has an empty description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
-			description: '',
-		})
-
-		cy.visit(`/projects/${task.project_id}/kanban`)
-		cy.wait('@loadTasks')
-
-		cy.get('.bucket .tasks .task .footer .icon svg')
-			.should('not.exist')
-	})
-
-	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
-			description: '<p></p>',
-		})
-
-		cy.visit(`/projects/${task.project_id}/kanban`)
-		cy.wait('@loadTasks')
-
-		cy.get('.bucket .tasks .task .footer .icon svg')
-			.should('not.exist')
-	})
 })
--- a/cypress/e2e/task/task.spec.ts
+++ b/cypress/e2e/task/task.spec.ts
@ -36,7 +36,7 @@ function uploadAttachmentAndVerify(taskId: number) {
 	cy.get('.task-view .action-buttons .button')
 		.contains('Add Attachments')
 		.click()
-	cy.get('input[type=file]#files', {timeout: 1000})
+	cy.get('input[type=file]', {timeout: 1000})
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')

@ -112,50 +112,10 @@ describe('Task', () => {
 			.should('contain', 'Favorites')
 	})

-	it('Should show a task description icon if the task has a description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
-		TaskFactory.create(1, {
-			description: 'Lorem Ipsum',
-		})
-
-		cy.visit('/projects/1/list')
-		cy.wait('@loadTasks')
-
-		cy.get('.tasks .task .project-task-icon')
-			.should('exist')
-	})
-
-	it('Should not show a task description icon if the task has an empty description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
-		TaskFactory.create(1, {
-			description: '',
-		})
-
-		cy.visit('/projects/1/list')
-		cy.wait('@loadTasks')
-
-		cy.get('.tasks .task .project-task-icon')
-			.should('not.exist')
-	})
-
-	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
-		TaskFactory.create(1, {
-			description: '<p></p>',
-		})
-
-		cy.visit('/projects/1/list')
-		cy.wait('@loadTasks')
-
-		cy.get('.tasks .task .project-task-icon')
-			.should('not.exist')
-	})
-
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
 			LabelTaskFactory.truncate()
-			TaskAttachmentFactory.truncate()
 		})

 		it('Shows all task details', () => {
@ -253,45 +213,6 @@ describe('Task', () => {
 				.should('exist')
 		})

-		it('Shows an empty editor when the description of a task is empty', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				description: '',
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
-				.should('have.attr', 'data-placeholder')
-			cy.get('.task-view .details.content.description .tiptap button.done-edit')
-				.should('not.exist')
-		})
-
-		it('Shows a preview editor when the description of a task is not empty', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				description: 'Lorem Ipsum dolor sit amet',
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
-				.should('not.have.attr', 'data-placeholder')
-			cy.get('.task-view .details.content.description .tiptap button.done-edit')
-				.should('exist')
-		})
-
-		it('Shows a preview editor when the description of a task contains html', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				description: '<p>Lorem Ipsum dolor sit amet</p>',
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
-				.should('not.have.attr', 'data-placeholder')
-			cy.get('.task-view .details.content.description .tiptap button.done-edit')
-				.should('exist')
-		})
-
 		it('Can add a new comment', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
@ -541,86 +462,6 @@ describe('Task', () => {
 				.should('contain', 'Success')
 		})

-		it('Can set a due date to a specific date for a task', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				done: false,
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Set Due Date')
-				.click()
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input .datepicker .show')
-				.click()
-			cy.get('.datepicker-popup .flatpickr-innerContainer .flatpickr-days .flatpickr-day.today')
-				.click()
-			cy.get('[data-cy="closeDatepicker"]')
-				.contains('Confirm')
-				.click()
-
-			const today = new Date()
-			const day = today.toLocaleString('default', {day: 'numeric'})
-			const month = today.toLocaleString('default', {month: 'short'})
-			const year = today.toLocaleString('default', {year: 'numeric'})
-			const date = `${day} ${month} ${year}, 12:00:00`
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input .datepicker-popup')
-				.should('not.exist')
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input')
-				.should('contain.text', date)
-			cy.get('.global-notification')
-				.should('contain', 'Success')
-		})
-
-		it('Can change a due date to a specific date for a task', () => {
-			const dueDate = new Date()
-			dueDate.setHours(12)
-			dueDate.setMinutes(0)
-			dueDate.setSeconds(0)
-			dueDate.setDate(1)
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				done: false,
-				due_date: dueDate.toISOString(),
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Set Due Date')
-				.click()
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input .datepicker .show')
-				.click()
-			cy.get('.datepicker-popup .flatpickr-innerContainer .flatpickr-days .flatpickr-day.today')
-				.click()
-			cy.get('[data-cy="closeDatepicker"]')
-				.contains('Confirm')
-				.click()
-
-			const today = new Date()
-			const day = today.toLocaleString('default', {day: 'numeric'})
-			const month = today.toLocaleString('default', {month: 'short'})
-			const year = today.toLocaleString('default', {year: 'numeric'})
-			const date = `${day} ${month} ${year}, 12:00:00`
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input .datepicker-popup')
-				.should('not.exist')
-			cy.get('.task-view .columns.details .column')
-				.contains('Due Date')
-				.get('.date-input')
-				.should('contain.text', date)
-			cy.get('.global-notification')
-				.should('contain', 'Success')
-		})
-
 		it('Can set a reminder', () => {
 			TaskReminderFactory.truncate()
 			const tasks = TaskFactory.create(1, {
@ -725,7 +566,7 @@ describe('Task', () => {
 				.click()
 			cy.get('.reminder-options-popup .card-content .reminder-period input')
 				.first()
-				.type('{selectall}10')
+				.type('10')
 			cy.get('.reminder-options-popup .card-content .reminder-period select')
 				.first()
 				.select('days')
@ -920,7 +761,7 @@ describe('Task', () => {
 				.should('exist')
 		})

-		it('Should render an image from attachment', async () => {
+		it.only('Should render an image from attachment', async () => {

 			TaskAttachmentFactory.truncate()

@ -938,7 +779,7 @@ describe('Task', () => {
 					method: 'PUT',
 					url: `${Cypress.env('API_URL')}/tasks/${tasks[0].id}/attachments`,
 					headers: {
-						'Authorization': `Bearer ${window.localStorage.getItem('token')}`,
+						'Authorization':  `Bearer ${window.localStorage.getItem('token')}`,
 						'Content-Type': 'multipart/form-data',
 					},
 					body: formData,
--- a/env.d.ts
+++ b/env.d.ts
@ -25,6 +25,7 @@ interface ImportMetaEnv {
 	readonly SENTRY_ORG?: string
 	readonly SENTRY_PROJECT?: string

+	readonly VITE_WORKBOX_DEBUG?: boolean
 	readonly VITE_IS_ONLINE: boolean
 }

--- a/flake.lock
+++ b/flake.lock
@ -2,11 +2,11 @@
  "nodes": {
    "nixpkgs": {
      "locked": {
-        "lastModified": 1701336116,
-        "narHash": "sha256-kEmpezCR/FpITc6yMbAh4WrOCiT2zg5pSjnKrq51h5Y=",
+        "lastModified": 1697730408,
+        "narHash": "sha256-Ww//zzukdTrwTrCUkaJA/NsaLEfUfQpWZXBdXBYfhak=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "f5c27c6136db4d76c30e533c20517df6864c46ee",
+        "rev": "ff0a5a776b56e0ca32d47a4a47695452ec7f7d80",
        "type": "github"
      },
      "original": {
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
  },
  "homepage": "https://vikunja.io/",
  "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.10.5",
  "keywords": [
    "todo",
    "productivity",
@ -22,7 +22,6 @@
    "gantt",
    "kanban"
  ],
-  "type": "module",
  "scripts": {
    "serve": "vite",
    "preview": "vite preview --port 4173",
@ -30,8 +29,7 @@
    "build": "vite build && workbox copyLibraries dist/",
    "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
    "build:dev": "vite build --mode development --outDir dist-dev/",
-    "lint": "eslint 'src/**/*.{js,ts,vue}'",
-    "lint:fix": "pnpm run lint --fix",
+    "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome'",
    "test:e2e-record": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
    "test:e2e-dev-dev": "start-server-and-test preview:dev http://127.0.0.1:4173 'cypress open --e2e'",
@ -47,64 +45,65 @@
    "story:preview": "histoire preview"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
-    "@fortawesome/vue-fontawesome": "3.0.6",
-    "@github/hotkey": "3.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/vue-fontawesome": "3.0.5",
+    "@github/hotkey": "2.3.0",
    "@infectoone/vue-ganttastic": "2.2.0",
-    "@intlify/unplugin-vue-i18n": "2.0.0",
-    "@kyvg/vue3-notification": "3.1.4",
-    "@sentry/tracing": "7.100.1",
-    "@sentry/vue": "7.100.1",
-    "@tiptap/core": "2.2.1",
-    "@tiptap/extension-blockquote": "2.2.1",
-    "@tiptap/extension-bold": "2.2.1",
-    "@tiptap/extension-bullet-list": "2.2.1",
-    "@tiptap/extension-code": "2.2.1",
-    "@tiptap/extension-code-block-lowlight": "2.2.1",
-    "@tiptap/extension-document": "2.2.1",
-    "@tiptap/extension-dropcursor": "2.2.1",
-    "@tiptap/extension-gapcursor": "2.2.1",
-    "@tiptap/extension-hard-break": "2.2.1",
-    "@tiptap/extension-heading": "2.2.1",
-    "@tiptap/extension-history": "2.2.1",
-    "@tiptap/extension-horizontal-rule": "2.2.1",
-    "@tiptap/extension-image": "2.2.1",
-    "@tiptap/extension-italic": "2.2.1",
-    "@tiptap/extension-link": "2.2.1",
-    "@tiptap/extension-list-item": "2.2.1",
-    "@tiptap/extension-ordered-list": "2.2.1",
-    "@tiptap/extension-paragraph": "2.2.1",
-    "@tiptap/extension-placeholder": "2.2.1",
-    "@tiptap/extension-strike": "2.2.1",
-    "@tiptap/extension-table": "2.2.1",
-    "@tiptap/extension-table-cell": "2.2.1",
-    "@tiptap/extension-table-header": "2.2.1",
-    "@tiptap/extension-table-row": "2.2.1",
-    "@tiptap/extension-task-item": "2.2.1",
-    "@tiptap/extension-task-list": "2.2.1",
-    "@tiptap/extension-text": "2.2.1",
-    "@tiptap/extension-typography": "2.2.1",
-    "@tiptap/extension-underline": "2.2.1",
-    "@tiptap/pm": "2.2.1",
-    "@tiptap/suggestion": "2.2.1",
-    "@tiptap/vue-3": "2.2.1",
+    "@intlify/unplugin-vue-i18n": "1.5.0",
+    "@kyvg/vue3-notification": "3.0.2",
+    "@sentry/tracing": "7.80.1",
+    "@sentry/vue": "7.80.1",
+    "@tiptap/core": "2.1.12",
+    "@tiptap/extension-blockquote": "2.1.12",
+    "@tiptap/extension-bold": "2.1.12",
+    "@tiptap/extension-bullet-list": "2.1.12",
+    "@tiptap/extension-code": "2.1.12",
+    "@tiptap/extension-code-block-lowlight": "2.1.12",
+    "@tiptap/extension-document": "2.1.12",
+    "@tiptap/extension-dropcursor": "2.1.12",
+    "@tiptap/extension-gapcursor": "2.1.12",
+    "@tiptap/extension-hard-break": "2.1.12",
+    "@tiptap/extension-heading": "2.1.12",
+    "@tiptap/extension-history": "2.1.12",
+    "@tiptap/extension-horizontal-rule": "2.1.12",
+    "@tiptap/extension-image": "2.1.12",
+    "@tiptap/extension-italic": "2.1.12",
+    "@tiptap/extension-link": "2.1.12",
+    "@tiptap/extension-list-item": "2.1.12",
+    "@tiptap/extension-ordered-list": "2.1.12",
+    "@tiptap/extension-paragraph": "2.1.12",
+    "@tiptap/extension-placeholder": "2.1.12",
+    "@tiptap/extension-strike": "2.1.12",
+    "@tiptap/extension-table": "2.1.12",
+    "@tiptap/extension-table-cell": "2.1.12",
+    "@tiptap/extension-table-header": "2.1.12",
+    "@tiptap/extension-table-row": "2.1.12",
+    "@tiptap/extension-task-item": "2.1.12",
+    "@tiptap/extension-task-list": "2.1.12",
+    "@tiptap/extension-text": "2.1.12",
+    "@tiptap/extension-typography": "2.1.12",
+    "@tiptap/extension-underline": "2.1.12",
+    "@tiptap/pm": "2.1.12",
+    "@tiptap/suggestion": "2.1.12",
+    "@tiptap/vue-3": "2.1.12",
    "@types/is-touch-device": "1.0.2",
    "@types/lodash.clonedeep": "4.5.9",
-    "@vueuse/core": "10.7.2",
-    "@vueuse/router": "10.7.2",
-    "axios": "1.6.7",
+    "@types/sortablejs": "1.15.5",
+    "@vueuse/core": "10.5.0",
+    "@vueuse/router": "10.5.0",
+    "axios": "1.6.0",
    "blurhash": "2.0.5",
    "bulma-css-variables": "0.9.33",
    "camel-case": "4.1.2",
-    "date-fns": "3.3.1",
+    "date-fns": "2.30.0",
    "dayjs": "1.11.10",
-    "dompurify": "3.0.8",
+    "dompurify": "3.0.6",
    "fast-deep-equal": "3.1.3",
    "flatpickr": "4.6.13",
    "flexsearch": "0.7.31",
-    "floating-vue": "5.2.2",
+    "floating-vue": "2.0.0-beta.24",
    "is-touch-device": "1.0.1",
    "klona": "2.0.6",
    "lodash.debounce": "4.0.8",
@ -112,70 +111,70 @@
    "pinia": "2.1.7",
    "register-service-worker": "1.7.2",
    "snake-case": "3.0.4",
-    "sortablejs": "1.15.2",
+    "sortablejs": "1.15.0",
    "tippy.js": "6.3.7",
-    "ufo": "1.4.0",
-    "vue": "3.4.15",
+    "ufo": "1.3.2",
+    "vue": "3.3.8",
    "vue-advanced-cropper": "2.8.8",
    "vue-flatpickr-component": "11.0.3",
-    "vue-i18n": "9.9.1",
+    "vue-i18n": "9.7.0",
    "vue-router": "4.2.5",
    "workbox-precaching": "7.0.0",
    "zhyswan-vuedraggable": "4.1.3"
  },
  "devDependencies": {
    "@4tw/cypress-drag-drop": "2.2.5",
-    "@cypress/vite-dev-server": "5.0.7",
+    "@cypress/vite-dev-server": "5.0.6",
    "@cypress/vue": "6.0.0",
-    "@faker-js/faker": "8.4.0",
-    "@histoire/plugin-screenshot": "0.17.8",
-    "@histoire/plugin-vue": "0.17.9",
-    "@rushstack/eslint-patch": "1.7.2",
+    "@faker-js/faker": "8.3.1",
+    "@histoire/plugin-screenshot": "0.17.0",
+    "@histoire/plugin-vue": "0.17.5",
+    "@rushstack/eslint-patch": "1.5.1",
    "@tsconfig/node18": "18.2.2",
-    "@types/codemirror": "5.60.15",
+    "@types/codemirror": "5.60.13",
    "@types/dompurify": "3.0.5",
    "@types/flexsearch": "0.7.6",
    "@types/is-touch-device": "1.0.2",
    "@types/lodash.debounce": "4.0.9",
    "@types/marked": "5.0.2",
-    "@types/node": "20.11.10",
+    "@types/node": "20.9.1",
    "@types/postcss-preset-env": "7.7.0",
-    "@types/sortablejs": "1.15.7",
-    "@typescript-eslint/eslint-plugin": "6.20.0",
-    "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-legacy": "5.3.0",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@types/sortablejs": "1.15.5",
+    "@typescript-eslint/eslint-plugin": "6.11.0",
+    "@typescript-eslint/parser": "6.11.0",
+    "@vitejs/plugin-legacy": "4.1.1",
+    "@vitejs/plugin-vue": "4.5.0",
    "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
-    "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.17",
-    "browserslist": "4.22.3",
-    "caniuse-lite": "1.0.30001581",
-    "css-has-pseudo": "6.0.1",
-    "csstype": "3.1.3",
-    "cypress": "13.6.3",
-    "esbuild": "0.20.0",
-    "eslint": "8.56.0",
-    "eslint-plugin-vue": "9.20.1",
-    "happy-dom": "13.3.5",
-    "histoire": "0.17.9",
-    "postcss": "8.4.33",
+    "@vue/test-utils": "2.4.2",
+    "@vue/tsconfig": "0.4.0",
+    "autoprefixer": "10.4.16",
+    "browserslist": "4.22.1",
+    "caniuse-lite": "1.0.30001563",
+    "css-has-pseudo": "6.0.0",
+    "csstype": "3.1.2",
+    "cypress": "13.5.1",
+    "esbuild": "0.19.5",
+    "eslint": "8.53.0",
+    "eslint-plugin-vue": "9.18.1",
+    "happy-dom": "12.10.3",
+    "histoire": "0.17.5",
+    "postcss": "8.4.31",
    "postcss-easing-gradients": "3.0.1",
    "postcss-easings": "4.0.0",
-    "postcss-focus-within": "8.0.1",
+    "postcss-focus-within": "8.0.0",
    "postcss-preset-env": "9.3.0",
-    "rollup": "4.9.6",
-    "rollup-plugin-visualizer": "5.12.0",
-    "sass": "1.70.0",
+    "rollup": "4.4.1",
+    "rollup-plugin-visualizer": "5.9.2",
+    "sass": "1.69.5",
    "start-server-and-test": "2.0.3",
-    "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "typescript": "5.2.2",
+    "vite": "4.5.0",
    "vite-plugin-inject-preload": "1.3.3",
-    "vite-plugin-pwa": "0.17.5",
+    "vite-plugin-pwa": "0.16.7",
    "vite-plugin-sentry": "1.3.0",
-    "vite-svg-loader": "5.1.0",
-    "vitest": "1.2.2",
-    "vue-tsc": "1.8.27",
+    "vite-svg-loader": "4.0.0",
+    "vitest": "0.34.6",
+    "vue-tsc": "1.8.22",
    "wait-on": "7.2.0",
    "workbox-cli": "7.0.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/renovate.json
@ -4,11 +4,6 @@
  "extends": [
    "config:js-app"
  ],
-  "hostRules": [
-    {
-      "timeout": 600000
-    }
-  ],
  "packageRules": [
    {
      "matchPackageNames": ["happy-dom"],
--- a/src/App.vue
+++ b/src/App.vue
@ -1,23 +1,23 @@
 <template>
-	<Ready>
+	<ready>
 		<template v-if="authUser">
-			<TheNavigation />
-			<ContentAuth />
+			<TheNavigation/>
+			<content-auth/>
 		</template>
-		<ContentLinkShare v-else-if="authLinkShare" />
-		<NoAuthWrapper v-else>
-			<router-view />
-		</NoAuthWrapper>
+		<content-link-share v-else-if="authLinkShare"/>
+		<no-auth-wrapper v-else>
+			<router-view/>
+		</no-auth-wrapper>
 		
-		<KeyboardShortcuts v-if="keyboardShortcutsActive" />
+		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		
 		<Teleport to="body">
-			<AddToHomeScreen />
-			<UpdateNotification />
-			<Notification />
-			<DemoMode />
+			<AddToHomeScreen/>
+			<UpdateNotification/>
+			<Notification/>
+			<DemoMode/>
 		</Teleport>
-	</Ready>
+	</ready>
 </template>

 <script lang="ts" setup>
@ -37,6 +37,8 @@ import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'

 import {setLanguage} from '@/i18n'
+import AccountDeleteService from '@/services/accountDelete'
+import {success} from '@/message'

 import {useAuthStore} from '@/stores/auth'
 import {useBaseStore} from '@/stores/base'
@ -46,9 +48,6 @@ import {useBodyClass} from '@/composables/useBodyClass'
 import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
 import DemoMode from '@/components/home/DemoMode.vue'

-const importAccountDeleteService = () => import('@/services/accountDelete')
-const importMessage = () => import('@/message')
-
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
 const router = useRouter()
@ -69,11 +68,8 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 		return
 	}

-	const messageP = importMessage()
-	const AccountDeleteService = (await importAccountDeleteService()).default
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
-	const {success} = await messageP
 	success({message: t('user.deletion.confirmSuccess')})
 	authStore.refreshUserInfo()
 }, { immediate: true })
--- a/src/components/base/BaseButton.story.vue
+++ b/src/components/base/BaseButton.story.vue
@ -21,16 +21,10 @@ const state = reactive({
 </script>

 <template>
-	<Story
-		:setup-app="setupApp"
-		:layout="{ type: 'grid', width: '200px' }"
-	>
+	<Story :setup-app="setupApp" :layout="{ type: 'grid', width: '200px' }">
 		<Variant title="custom">
 			<template #controls>
-				<HstCheckbox
-					v-model="state.disabled"
-					title="Disabled"
-				/>
+				<HstCheckbox v-model="state.disabled" title="Disabled" />
 			</template>
 			<BaseButton :disabled="state.disabled">
 				Hello!
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@ -6,39 +6,38 @@
 <template>
 	<div
 		v-if="disabled === true && (to !== undefined || href !== undefined)"
-		ref="button"
 		class="base-button"
 		:aria-disabled="disabled || undefined"
+		ref="button"
 	>
-		<slot />
+		<slot/>
 	</div>
 	<router-link
 		v-else-if="to !== undefined"
-		ref="button"
 		:to="to"
 		class="base-button"
-	>
-		<slot />
-	</router-link>
-	<a
-		v-else-if="href !== undefined"
 		ref="button"
+	>
+		<slot/>
+	</router-link>
+	<a v-else-if="href !== undefined"
 		class="base-button"
 		:href="href"
 		rel="noreferrer noopener nofollow"
 		target="_blank"
+		ref="button"
 	>
-		<slot />
+		<slot/>
 	</a>
 	<button
 		v-else
-		ref="button"
 		:type="type"
 		class="base-button base-button--type-button"
 		:disabled="disabled || undefined"
+		ref="button"
 		@click="(event: MouseEvent) => emit('click', event)"
 	>
-		<slot />
+		<slot/>
 	</button>
 </template>

--- a/src/components/base/BaseCheckbox.vue
+++ b/src/components/base/BaseCheckbox.vue
@ -1,26 +1,17 @@
 <template>
-	<div
-		v-cy="'checkbox'"
-		class="base-checkbox"
-	>
+	<div class="base-checkbox" v-cy="'checkbox'">
 		<input
-			:id="checkboxId"
 			type="checkbox"
+			:id="checkboxId"
 			class="is-sr-only"
 			:checked="modelValue"
-			:disabled="disabled || undefined"
 			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
-		>
+			:disabled="disabled || undefined"
+		/>

-		<slot
-			name="label"
-			:checkbox-id="checkboxId"
-		>
-			<label
-				:for="checkboxId"
-				class="base-checkbox__label"
-			>
-				<slot />
+		<slot name="label" :checkboxId="checkboxId">
+			<label :for="checkboxId" class="base-checkbox__label">
+				<slot/>
 			</label>
 		</slot>
 	</div>
--- a/src/components/base/Expandable.vue
+++ b/src/components/base/Expandable.vue
@ -1,30 +1,27 @@
 <template>
-	<transition
-		name="expandable-slide"
-		@beforeEnter="beforeEnter"
-		@enter="enter"
-		@afterEnter="afterEnter"
-		@enterCancelled="enterCancelled"
-		@beforeLeave="beforeLeave"
-		@leave="leave"
-		@afterLeave="afterLeave"
-		@leaveCancelled="leaveCancelled"
-	>
-		<div
-			v-if="initialHeight"
-			class="expandable-initial-height"
-			:style="{ maxHeight: `${initialHeight}px` }"
-			:class="{ 'expandable-initial-height--expanded': open }"
-		>
-			<slot />
-		</div>
-		<div
-			v-else-if="open"
-			class="expandable"
-		>
-			<slot />
-		</div>
-	</transition>
+  <transition
+    name="expandable-slide"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @enter-cancelled="enterCancelled"
+    @before-leave="beforeLeave"
+    @leave="leave"
+    @after-leave="afterLeave"
+    @leave-cancelled="leaveCancelled"
+  >
+    <div
+      v-if="initialHeight"
+      class="expandable-initial-height"
+      :style="{ maxHeight: `${initialHeight}px` }"
+      :class="{ 'expandable-initial-height--expanded': open }"
+    >
+      <slot />
+    </div>
+    <div v-else-if="open" class="expandable">
+      <slot />
+    </div>
+  </transition>
 </template>

 <script setup lang="ts">
--- a/src/components/date/datemathHelp.story.vue
+++ b/src/components/date/datemathHelp.story.vue
@ -3,9 +3,9 @@ import datemathHelp from './datemathHelp.vue'
 </script>

 <template>
-	<Story>
-		<Variant title="Default">
-			<datemathHelp />
-		</Variant>
-	</Story>
+  <Story>
+    <Variant title="Default">
+      <datemathHelp />
+    </Variant>
+  </Story>
 </template>
--- a/src/components/date/datemathHelp.vue
+++ b/src/components/date/datemathHelp.vue
@ -7,29 +7,21 @@
 			{{ $t('input.datemathHelp.intro') }}
 		</p>
 		<p>
-			<i18n-t
-				keypath="input.datemathHelp.expression"
-				scope="global"
-			>
+			<i18n-t keypath="input.datemathHelp.expression" scope="global">
 				<code>now</code>
 				<code>||</code>
 			</i18n-t>
 		</p>
 		<p>
-			<i18n-t
-				keypath="input.datemathHelp.similar"
-				scope="global"
-			>
+			<i18n-t keypath="input.datemathHelp.similar" scope="global">
 				<BaseButton
 					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
-					target="_blank"
-				>
+					target="_blank">
 					Grafana
 				</BaseButton>
 				<BaseButton
 					href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
-					target="_blank"
-				>
+					target="_blank">
 					Elasticsearch
 				</BaseButton>
 			</i18n-t>
@ -43,79 +35,76 @@
 		<h3>{{ $t('input.datemathHelp.supportedUnits') }}</h3>
 		<table class="table">
 			<tbody>
-				<tr>
-					<td><code>s</code></td>
-					<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
-				</tr>
-				<tr>
-					<td><code>m</code></td>
-					<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
-				</tr>
-				<tr>
-					<td><code>h</code></td>
-					<td>{{ $t('input.datemathHelp.units.hours') }}</td>
-				</tr>
-				<tr>
-					<td><code>H</code></td>
-					<td>{{ $t('input.datemathHelp.units.hours') }}</td>
-				</tr>
-				<tr>
-					<td><code>d</code></td>
-					<td>{{ $t('input.datemathHelp.units.days') }}</td>
-				</tr>
-				<tr>
-					<td><code>w</code></td>
-					<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
-				</tr>
-				<tr>
-					<td><code>M</code></td>
-					<td>{{ $t('input.datemathHelp.units.months') }}</td>
-				</tr>
-				<tr>
-					<td><code>y</code></td>
-					<td>{{ $t('input.datemathHelp.units.years') }}</td>
-				</tr>
+			<tr>
+				<td><code>s</code></td>
+				<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
+			</tr>
+			<tr>
+				<td><code>m</code></td>
+				<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
+			</tr>
+			<tr>
+				<td><code>h</code></td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
+			</tr>
+			<tr>
+				<td><code>H</code></td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
+			</tr>
+			<tr>
+				<td><code>d</code></td>
+				<td>{{ $t('input.datemathHelp.units.days') }}</td>
+			</tr>
+			<tr>
+				<td><code>w</code></td>
+				<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
+			</tr>
+			<tr>
+				<td><code>M</code></td>
+				<td>{{ $t('input.datemathHelp.units.months') }}</td>
+			</tr>
+			<tr>
+				<td><code>y</code></td>
+				<td>{{ $t('input.datemathHelp.units.years') }}</td>
+			</tr>
 			</tbody>
 		</table>

 		<h3>{{ $t('input.datemathHelp.someExamples') }}</h3>
 		<table class="table">
 			<tbody>
-				<tr>
-					<td><code>now</code></td>
-					<td>{{ $t('input.datemathHelp.examples.now') }}</td>
-				</tr>
-				<tr>
-					<td><code>now+24h</code></td>
-					<td>{{ $t('input.datemathHelp.examples.in24h') }}</td>
-				</tr>
-				<tr>
-					<td><code>now/d</code></td>
-					<td>{{ $t('input.datemathHelp.examples.today') }}</td>
-				</tr>
-				<tr>
-					<td><code>now/w</code></td>
-					<td>{{ $t('input.datemathHelp.examples.beginningOfThisWeek') }}</td>
-				</tr>
-				<tr>
-					<td><code>now/w+1w</code></td>
-					<td>{{ $t('input.datemathHelp.examples.endOfThisWeek') }}</td>
-				</tr>
-				<tr>
-					<td><code>now+30d</code></td>
-					<td>{{ $t('input.datemathHelp.examples.in30Days') }}</td>
-				</tr>
-				<tr>
-					<td><code>{{ exampleDate }}||+1M/d</code></td>
-					<td>
-						<i18n-t
-							keypath="input.datemathHelp.examples.datePlusMonth"
-							scope="global"
-						>
-							<strong>{{ exampleDate }}</strong>
-						</i18n-t>
-					</td>
-				</tr>
+			<tr>
+				<td><code>now</code></td>
+				<td>{{ $t('input.datemathHelp.examples.now') }}</td>
+			</tr>
+			<tr>
+				<td><code>now+24h</code></td>
+				<td>{{ $t('input.datemathHelp.examples.in24h') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/d</code></td>
+				<td>{{ $t('input.datemathHelp.examples.today') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/w</code></td>
+				<td>{{ $t('input.datemathHelp.examples.beginningOfThisWeek') }}</td>
+			</tr>
+			<tr>
+				<td><code>now/w+1w</code></td>
+				<td>{{ $t('input.datemathHelp.examples.endOfThisWeek') }}</td>
+			</tr>
+			<tr>
+				<td><code>now+30d</code></td>
+				<td>{{ $t('input.datemathHelp.examples.in30Days') }}</td>
+			</tr>
+			<tr>
+				<td><code>{{ exampleDate }}||+1M/d</code></td>
+				<td>
+					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
+						<strong>{{ exampleDate }}</strong>
+					</i18n-t>
+				</td>
+			</tr>
 			</tbody>
 		</table>
 	</card>
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@ -1,31 +1,20 @@
 <template>
 	<div class="datepicker-with-range-container">
-		<Popup>
+		<popup>
 			<template #trigger="{toggle}">
-				<slot
-					name="trigger"
-					:toggle="toggle"
-					:button-text="buttonText"
-				/>
+				<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
 			</template>
 			<template #content="{isOpen}">
-				<div
-					class="datepicker-with-range"
-					:class="{'is-open': isOpen}"
-				>
+				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
 					<div class="selections">
-						<BaseButton
-							:class="{'is-active': customRangeActive}"
-							@click="setDateRange(null)"
-						>
+						<BaseButton @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
 							{{ $t('misc.custom') }}
 						</BaseButton>
 						<BaseButton
 							v-for="(value, text) in DATE_RANGES"
 							:key="text"
-							:class="{'is-active': from === value[0] && to === value[1]}"
 							@click="setDateRange(value)"
-						>
+							:class="{'is-active': from === value[0] && to === value[1]}">
 							{{ $t(`input.datepickerRange.ranges.${text}`) }}
 						</BaseButton>
 					</div>
@ -34,18 +23,10 @@
 							{{ $t('input.datepickerRange.from') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input
-										v-model="from"
-										class="input"
-										type="text"
-									>
+									<input class="input" type="text" v-model="from"/>
 								</div>
 								<div class="control">
-									<x-button
-										icon="calendar"
-										variant="secondary"
-										data-toggle
-									/>
+									<x-button icon="calendar" variant="secondary" data-toggle/>
 								</div>
 							</div>
 						</label>
@ -53,49 +34,38 @@
 							{{ $t('input.datepickerRange.to') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input
-										v-model="to"
-										class="input"
-										type="text"
-									>
+									<input class="input" type="text" v-model="to"/>
 								</div>
 								<div class="control">
-									<x-button
-										icon="calendar"
-										variant="secondary"
-										data-toggle
-									/>
+									<x-button icon="calendar" variant="secondary" data-toggle/>
 								</div>
 							</div>
 						</label>
 						<flat-pickr
-							v-model="flatpickrRange"
 							:config="flatPickerConfig"
+							v-model="flatpickrRange"
 						/>

 						<p>
 							{{ $t('input.datemathHelp.canuse') }}
-							<BaseButton
-								class="has-text-primary"
-								@click="showHowItWorks = true"
-							>
+							<BaseButton class="has-text-primary" @click="showHowItWorks = true">
 								{{ $t('input.datemathHelp.learnhow') }}
 							</BaseButton>
 						</p>

 						<modal
 							:enabled="showHowItWorks"
+							@close="() => showHowItWorks = false"
 							transition-name="fade"
 							:overflow="true"
 							variant="hint-modal"
-							@close="() => showHowItWorks = false"
 						>
-							<DatemathHelp />
+							<DatemathHelp/>
 						</modal>
 					</div>
 				</div>
 			</template>
-		</Popup>
+		</popup>
 	</div>
 </template>

@ -111,18 +81,20 @@ import Popup from '@/components/misc/popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {useAuthStore} from '@/stores/auth'

+const authStore = useAuthStore()
+const {t} = useI18n({useScope: 'global'})
+
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
 	},
 })

-const emit = defineEmits(['update:modelValue'])
-
-const {t} = useI18n({useScope: 'global'})
-
+// FIXME: This seems to always contain the default value - that breaks the picker
+const weekStart = computed(() => authStore.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@ -130,7 +102,9 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: getFlatpickrLanguage(),
+	locale: {
+		firstDayOf7Days: weekStart.value,
+	},
 }))

 const showHowItWorks = ref(false)
--- a/src/components/home/AddToHomeScreen.vue
+++ b/src/components/home/AddToHomeScreen.vue
@ -4,18 +4,12 @@
 		class="add-to-home-screen"
 		:class="{'has-update-available': hasUpdateAvailable}"
 	>
-		<icon
-			icon="arrow-up-from-bracket"
-			class="add-icon"
-		/>
+		<icon icon="arrow-up-from-bracket" class="add-icon"/>
 		<p>
 			{{ $t('home.addToHomeScreen') }}
 		</p>
-		<BaseButton
-			class="hide-button"
-			@click="() => hideMessage = true"
-		>
-			<icon icon="x" />
+		<BaseButton @click="() => hideMessage = true" class="hide-button">
+			<icon icon="x"/>
 		</BaseButton>
 	</div>
 </template>
--- a/src/components/home/DemoMode.vue
+++ b/src/components/home/DemoMode.vue
@ -17,11 +17,8 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			{{ $t('demo.title') }}
 			<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
 		</p>
-		<BaseButton
-			class="hide-button"
-			@click="() => hide = true"
-		>
-			<icon icon="times" />
+		<BaseButton @click="() => hide = true" class="hide-button">
+			<icon icon="times"/>
 		</BaseButton>
 	</div>
 </template>
--- a/src/components/home/Logo.vue
+++ b/src/components/home/Logo.vue
@ -15,17 +15,8 @@ const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)

 <template>
 	<div>
-		<Logo
-			v-if="!CustomLogo"
-			alt="Vikunja"
-			class="logo"
-		/>
-		<img
-			v-show="CustomLogo"
-			:src="CustomLogo"
-			alt="Vikunja"
-			class="logo"
-		>
+	<Logo v-if="!CustomLogo" alt="Vikunja" class="logo" />
+	<img v-show="CustomLogo" :src="CustomLogo" alt="Vikunja" class="logo" />
 	</div>
 </template>

--- a/src/components/home/MenuButton.vue
+++ b/src/components/home/MenuButton.vue
@ -1,11 +1,11 @@
 <template>
 	<BaseButton
-		v-shortcut="'Mod+e'"
 		class="menu-show-button"
-		:title="$t('keyboardShortcuts.toggleMenu')"
-		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
 		@click="baseStore.toggleMenu()"
 		@shortkey="() => baseStore.toggleMenu()"
+		v-shortcut="'Mod+e'"
+		:title="$t('keyboardShortcuts.toggleMenu')"
+		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
 	/>
 </template>

--- a/src/components/home/PoweredByLink.vue
+++ b/src/components/home/PoweredByLink.vue
@ -1,11 +1,7 @@
 <template>
-	<BaseButton
-		class="menu-bottom-link"
-		:href="poweredByUrl"
-		target="_blank"
-	>
-		{{ $t('misc.poweredBy') }}
-	</BaseButton>
+    <BaseButton class="menu-bottom-link" :href="poweredByUrl" target="_blank">
+        {{ $t('misc.poweredBy') }}
+    </BaseButton>
 </template>

 <script setup lang="ts">
--- a/src/components/home/ProjectsNavigation.vue
+++ b/src/components/home/ProjectsNavigation.vue
@ -2,8 +2,10 @@
 	<draggable
 		v-model="availableProjects"
 		animation="100"
-		ghost-class="ghost"
+		ghostClass="ghost"
 		group="projects"
+		@start="() => drag = true"
+		@end="saveProjectPosition"
 		handle=".handle"
 		tag="menu"
 		item-key="id"
@ -17,8 +19,6 @@
 				{ 'dragging-disabled': !canEditOrder }
 			],
 		}"
-		@start="() => drag = true"
-		@end="saveProjectPosition"
 	>
 		<template #item="{element: project}">
 			<ProjectsNavigationItem
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@ -6,13 +6,10 @@
 		<div>
 			<BaseButton
 				v-if="canCollapse && childProjects?.length > 0"
-				class="collapse-project-button"
 				@click="childProjectsOpen = !childProjectsOpen"
+				class="collapse-project-button"
 			>
-				<icon
-					icon="chevron-down"
-					:class="{ 'project-is-collapsed': !childProjectsOpen }"
-				/>
+				<icon icon="chevron-down" :class="{ 'project-is-collapsed': !childProjectsOpen }"/>
 			</BaseButton>
 			<BaseButton
 				:to="{ name: 'project.index', params: { projectId: project.id} }"
@ -22,27 +19,21 @@
 				<span
 					v-if="!canCollapse || childProjects?.length === 0"
 					class="collapse-project-button-placeholder"
-				/>
-				<div
-					class="color-bubble-handle-wrapper"
-					:class="{'is-draggable': project.id > 0}"
-				>
+				></span>
+				<div class="color-bubble-handle-wrapper" :class="{'is-draggable': project.id > 0}">
 					<ColorBubble
 						v-if="project.hexColor !== ''"
 						:color="project.hexColor"
 					/>
-					<span
-						v-else-if="project.id < -1"
-						class="saved-filter-icon icon menu-item-icon"
-					>
-						<icon icon="filter" />
+					<span v-else-if="project.id < -1" class="saved-filter-icon icon menu-item-icon">
+						<icon icon="filter"/>
 					</span>
 					<span
 						v-if="project.id > 0"
-						class="icon menu-item-icon handle"
+						class="icon menu-item-icon handle lines-handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
-						<icon icon="grip-lines" />
+						<icon icon="grip-lines"/>
 					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@ -53,25 +44,21 @@
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
 			>
-				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']"/>
 			</BaseButton>
 			<ProjectSettingsDropdown
+				v-if="project.id > 0"
 				class="menu-list-dropdown"
 				:project="project"
 				:level="level"
 			>
 				<template #trigger="{toggleOpen}">
-					<BaseButton
-						class="menu-list-dropdown-trigger"
-						@click="toggleOpen"
-					>
-						<icon
-							icon="ellipsis-h"
-							class="icon"
-						/>
+					<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
+						<icon icon="ellipsis-h" class="icon"/>
 					</BaseButton>
 				</template>
 			</ProjectSettingsDropdown>
+			<span class="list-setting-spacer" v-else></span>
 		</div>
 		<ProjectsNavigation
 			v-if="canNestDeeper && childProjectsOpen && canCollapse"
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@ -1,110 +1,66 @@
 <template>
-	<header
-		:class="{ 'has-background': background, 'menu-active': menuActive }"
-		aria-label="main navigation"
-		class="navbar d-print-none"
-	>
-		<router-link
-			:to="{ name: 'home' }"
-			class="logo-link"
-		>
-			<Logo
-				width="164"
-				height="48"
-			/>
+	<header :class="{ 'has-background': background, 'menu-active': menuActive }" aria-label="main navigation"
+		class="navbar d-print-none">
+		<router-link :to="{ name: 'home' }" class="logo-link">
+			<Logo width="164" height="48" />
 		</router-link>

 		<MenuButton class="menu-button" />

-		<div
-			v-if="currentProject?.id"
-			class="project-title-wrapper"
-		>
+		<div v-if="currentProject?.id" class="project-title-wrapper">
 			<h1 class="project-title">
 				{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
 			</h1>

-			<BaseButton
-				:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
-				class="project-title-button"
-			>
+			<BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button">
 				<icon icon="circle-info" />
 			</BaseButton>

-			<ProjectSettingsDropdown
-				v-if="canWriteCurrentProject && currentProject.id !== -1"
-				class="project-title-dropdown"
-				:project="currentProject"
-			>
+			<project-settings-dropdown v-if="canWriteCurrentProject && currentProject.id !== -1"
+				class="project-title-dropdown" :project="currentProject">
 				<template #trigger="{ toggleOpen }">
-					<BaseButton
-						class="project-title-button"
-						@click="toggleOpen"
-					>
-						<icon
-							icon="ellipsis-h"
-							class="icon"
-						/>
+					<BaseButton class="project-title-button" @click="toggleOpen">
+						<icon icon="ellipsis-h" class="icon" />
 					</BaseButton>
 				</template>
-			</ProjectSettingsDropdown>
+			</project-settings-dropdown>
 		</div>

 		<div class="navbar-end">
-			<OpenQuickActions />
+			<OpenQuickActions/>
 			<Notifications />
-			<Dropdown>
+			<dropdown>
 				<template #trigger="{ toggleOpen, open }">
-					<BaseButton
-						class="username-dropdown-trigger"
-						variant="secondary"
-						:shadow="false"
-						@click="toggleOpen"
-					>
-						<img
-							:src="authStore.avatarUrl"
-							alt=""
-							class="avatar"
-							width="40"
-							height="40"
-						>
+					<BaseButton class="username-dropdown-trigger" @click="toggleOpen" variant="secondary" :shadow="false">
+						<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40" />
 						<span class="username">{{ authStore.userDisplayName }}</span>
-						<span
-							class="icon is-small"
-							:style="{
-								transform: open ? 'rotate(180deg)' : 'rotate(0)',
-							}"
-						>
+						<span class="icon is-small" :style="{
+							transform: open ? 'rotate(180deg)' : 'rotate(0)',
+						}">
 							<icon icon="chevron-down" />
 						</span>
 					</BaseButton>
 				</template>

-				<DropdownItem :to="{ name: 'user.settings' }">
+				<dropdown-item :to="{ name: 'user.settings' }">
 					{{ $t('user.settings.title') }}
-				</DropdownItem>
-				<DropdownItem
-					v-if="imprintUrl"
-					:href="imprintUrl"
-				>
+				</dropdown-item>
+				<dropdown-item v-if="imprintUrl" :href="imprintUrl">
 					{{ $t('navigation.imprint') }}
-				</DropdownItem>
-				<DropdownItem
-					v-if="privacyPolicyUrl"
-					:href="privacyPolicyUrl"
-				>
+				</dropdown-item>
+				<dropdown-item v-if="privacyPolicyUrl" :href="privacyPolicyUrl">
 					{{ $t('navigation.privacy') }}
-				</DropdownItem>
-				<DropdownItem @click="baseStore.setKeyboardShortcutsActive(true)">
+				</dropdown-item>
+				<dropdown-item @click="baseStore.setKeyboardShortcutsActive(true)">
 					{{ $t('keyboardShortcuts.title') }}
-				</DropdownItem>
-				<DropdownItem :to="{ name: 'about' }">
+				</dropdown-item>
+				<dropdown-item :to="{ name: 'about' }">
 					{{ $t('about.title') }}
-				</DropdownItem>
-				<DropdownItem @click="authStore.logout()">
+				</dropdown-item>
+				<dropdown-item @click="authStore.logout()">
 					{{ $t('user.auth.logout') }}
-				</DropdownItem>
-			</Dropdown>
+				</dropdown-item>
+			</dropdown>
 		</div>
 	</header>
 </template>
--- a/src/components/home/UpdateNotification.vue
+++ b/src/components/home/UpdateNotification.vue
@ -1,16 +1,11 @@
 <template>
-	<div
-		v-if="updateAvailable"
-		class="update-notification"
-	>
-		<p class="update-notification__message">
-			{{ $t('update.available') }}
-		</p>
+	<div class="update-notification" v-if="updateAvailable">
+		<p class="update-notification__message">{{ $t('update.available') }}</p>
 		<x-button
+			@click="refreshApp()"
 			:shadow="false"
 			:wrap="false"
-			@click="refreshApp()"
-		>
+			>
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@ -2,10 +2,10 @@
 	<div class="content-auth">
 		<BaseButton
 			v-show="menuActive"
-			class="menu-hide-button d-print-none"
 			@click="baseStore.setMenuActive(false)"
+			class="menu-hide-button d-print-none"
 		>
-			<icon icon="times" />
+			<icon icon="times"/>
 		</BaseButton>
 		<div
 			class="app-container"
@ -15,9 +15,8 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"
-			/>
-			<Navigation class="d-print-none" />
+				:style="{'background-image': background && `url(${background})`}"></div>
+			<navigation class="d-print-none"/>
 			<main
 				class="app-content"
 				:class="[
@ -27,36 +26,33 @@
 			>
 				<BaseButton
 					v-show="menuActive"
-					class="mobile-overlay d-print-none"
 					@click="baseStore.setMenuActive(false)"
+					class="mobile-overlay d-print-none"
 				/>

-				<QuickActions />
+				<quick-actions/>

-				<router-view
-					v-slot="{ Component }"
-					:route="routeWithModal"
-				>
+				<router-view :route="routeWithModal" v-slot="{ Component }">
 					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
-						<component :is="Component" />
+						<component :is="Component"/>
 					</keep-alive>
 				</router-view>

 				<modal
 					:enabled="typeof currentModal !== 'undefined'"
+					@close="closeModal()"
 					variant="scrolling"
 					class="task-detail-view-modal"
-					@close="closeModal()"
 				>
-					<component :is="currentModal" />
+					<component :is="currentModal"/>
 				</modal>

 				<BaseButton
-					v-shortcut="'?'"
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
+					v-shortcut="'?'"
 				>
-					<icon icon="keyboard" />
+					<icon icon="keyboard"/>
 				</BaseButton>
 			</main>
 		</div>
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@ -6,20 +6,16 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo
-					v-if="logoVisible"
-					class="logo"
-				/>
+				<Logo class="logo" v-if="logoVisible"/>
 				<h1
 					:class="{'m-0': !logoVisible}"
 					:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
-					class="title"
-				>
+					class="title">
 					{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
 				</h1>
 				<div class="box has-text-left view">
-					<router-view />
-					<PoweredByLink />
+					<router-view/>
+					<PoweredByLink/>
 				</div>
 			</div>
 		</div>
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@ -1,70 +1,46 @@
 <template>
-	<aside
-		:class="{'is-active': baseStore.menuActive}"
-		class="menu-container"
-	>
+	<aside :class="{'is-active': baseStore.menuActive}" class="menu-container">
 		<nav class="menu top-menu">
-			<router-link
-				:to="{name: 'home'}"
-				class="logo"
-			>
-				<Logo
-					width="164"
-					height="48"
-				/>
+			<router-link :to="{name: 'home'}" class="logo">
+				<Logo width="164" height="48"/>
 			</router-link>
 			<menu class="menu-list other-menu-items">
 				<li>
-					<router-link
-						v-shortcut="'g o'"
-						:to="{ name: 'home'}"
-					>
+					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
 						<span class="menu-item-icon icon">
-							<icon icon="calendar" />
+							<icon icon="calendar"/>
 						</span>
 						{{ $t('navigation.overview') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link
-						v-shortcut="'g u'"
-						:to="{ name: 'tasks.range'}"
-					>
+					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
 						<span class="menu-item-icon icon">
-							<icon :icon="['far', 'calendar-alt']" />
+							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link
-						v-shortcut="'g p'"
-						:to="{ name: 'projects.index'}"
-					>
+					<router-link :to="{ name: 'projects.index'}" v-shortcut="'g p'">
 						<span class="menu-item-icon icon">
-							<icon icon="layer-group" />
+							<icon icon="layer-group"/>
 						</span>
 						{{ $t('project.projects') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link
-						v-shortcut="'g a'"
-						:to="{ name: 'labels.index'}"
-					>
+					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
 						<span class="menu-item-icon icon">
-							<icon icon="tags" />
+							<icon icon="tags"/>
 						</span>
 						{{ $t('label.title') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link
-						v-shortcut="'g m'"
-						:to="{ name: 'teams.index'}"
-					>
+					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
 						<span class="menu-item-icon icon">
-							<icon icon="users" />
+							<icon icon="users"/>
 						</span>
 						{{ $t('team.title') }}
 					</router-link>
@ -77,10 +53,7 @@
 			variant="small"
 		/>
 		<template v-else>
-			<nav
-				v-if="favoriteProjects"
-				class="menu"
-			>
+			<nav class="menu" v-if="favoriteProjects">
 				<ProjectsNavigation
 					:model-value="favoriteProjects" 
 					:can-edit-order="false"
@ -88,10 +61,7 @@
 				/>
 			</nav>
 			
-			<nav
-				v-if="savedFilterProjects"
-				class="menu"
-			>
+			<nav class="menu" v-if="savedFilterProjects">
 				<ProjectsNavigation
 					:model-value="savedFilterProjects"
 					:can-edit-order="false"
@ -109,7 +79,7 @@
 			</nav>
 		</template>

-		<PoweredByLink />
+		<PoweredByLink/>
 	</aside>
 </template>

--- a/src/components/input/Button.story.vue
+++ b/src/components/input/Button.story.vue
@ -6,28 +6,19 @@ import XButton from './button.vue'
 <template>
 	<Story :layout="{ type: 'grid', width: '200px' }">
 		<Variant title="primary">
-			<XButton
-				variant="primary"
-				@click="logEvent('Click', $event)"
-			>
+			<XButton @click="logEvent('Click', $event)" variant="primary">
 				Order pizza!
 			</XButton>
 		</Variant>

 		<Variant title="secondary">
-			<XButton
-				variant="secondary"
-				@click="logEvent('Click', $event)"
-			>
+			<XButton @click="logEvent('Click', $event)" variant="secondary">
 				Order spaghetti!
 			</XButton>
 		</Variant>

 		<Variant title="tertiary">
-			<XButton
-				variant="tertiary"
-				@click="logEvent('Click', $event)"
-			>
+			<XButton @click="logEvent('Click', $event)" variant="tertiary">
 				Order tortellini!
 			</XButton>
 		</Variant>
--- a/src/components/input/ColorPicker.vue
+++ b/src/components/input/ColorPicker.vue
@ -1,67 +1,36 @@
 <template>
 	<div class="color-picker-container">
 		<datalist :id="colorListID">
-			<option
-				v-for="defaultColor in defaultColors"
-				:key="defaultColor"
-				:value="defaultColor"
-			/>
+			<option v-for="defaultColor in defaultColors" :key="defaultColor" :value="defaultColor" />
 		</datalist>
 		
 		<div class="picker">
 			<input
-				v-model="color"
 				class="picker__input"
 				type="color"
+				v-model="color"
 				:list="colorListID"
 				:class="{'is-empty': isEmpty}"
-			>
-			<svg
-				v-show="isEmpty"
-				class="picker__pattern"
-				viewBox="0 0 22 22"
-				fill="fff"
-			>
-				<pattern
-					id="checker"
-					width="11"
-					height="11"
-					patternUnits="userSpaceOnUse"
-					fill="FFF"
-				>
-					<rect
-						fill="#cccccc"
-						x="0"
-						width="5.5"
-						height="5.5"
-						y="0"
-					/>
-					<rect
-						fill="#cccccc"
-						x="5.5"
-						width="5.5"
-						height="5.5"
-						y="5.5"
-					/>
+			/>
+			<svg class="picker__pattern" v-show="isEmpty" viewBox="0 0 22 22" fill="fff">
+				<pattern id="checker" width="11" height="11" patternUnits="userSpaceOnUse" fill="FFF">
+					<rect fill="#cccccc" x="0" width="5.5" height="5.5" y="0"></rect>
+					<rect fill="#cccccc" x="5.5" width="5.5" height="5.5" y="5.5"></rect>
 				</pattern>
-				<rect
-					width="22"
-					height="22"
-					fill="url(#checker)"
-				/>
+				<rect width="22" height="22" fill="url(#checker)"></rect>
 			</svg>
 		</div>

-		<XButton
+		<x-button
 			v-if="!isEmpty"
 			:disabled="isEmpty"
+			@click="reset"
 			class="is-small ml-2"
 			:shadow="false"
 			variant="secondary"
-			@click="reset"
 		>
 			{{ $t('input.resetColor') }}
-		</XButton>
+		</x-button>
 	</div>
 </template>

@ -70,14 +39,6 @@ import {computed, ref, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 import XButton from '@/components/input/button.vue'

-const {
-	modelValue,
-} = defineProps<{
-	modelValue: string,
-}>()
-
-const emit = defineEmits(['update:modelValue'])
-
 const DEFAULT_COLORS = [
 	'#1973ff',
 	'#7F23FF',
@ -92,18 +53,17 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const defaultColors = ref(DEFAULT_COLORS)
 const colorListID = ref(createRandomID())

+const {
+	modelValue,
+} = defineProps<{
+	modelValue: string,
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
 watch(
 	() => modelValue,
 	(newValue) => {
-		if (newValue === '' || newValue.startsWith('var(')) {
-			color.value = ''
-			return
-		}
-
-		if (!newValue.startsWith('#') && (newValue.length === 6 || newValue.length === 3)) {
-			newValue = `#${newValue}`
-		}
-
 		color.value = newValue
 	},
 	{immediate: true},
--- a/src/components/input/SelectProject.vue
+++ b/src/components/input/SelectProject.vue
@ -1,5 +1,5 @@
 <template>
-	<Multiselect
+	<multiselect
 		v-model="selectedProjects"
 		:search-results="foundProjects"
 		:loading="projectService.loading"
--- a/src/components/input/SelectUser.vue
+++ b/src/components/input/SelectUser.vue
@ -1,5 +1,5 @@
 <template>
-	<Multiselect
+	<multiselect
 		v-model="selectedUsers"
 		:search-results="foundUsers"
 		:loading="userService.loading"
--- a/src/components/input/SimpleButton.vue
+++ b/src/components/input/SimpleButton.vue
@ -1,6 +1,6 @@
 <template>
 	<BaseButton class="simple-button">
-		<slot />
+		<slot/>
 	</BaseButton>
 </template>

--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@ -18,10 +18,7 @@
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
 			/>
-			<span
-				v-else
-				class="icon is-small"
-			>
+			<span class="icon is-small" v-else>
 				<icon 
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
@ -41,7 +38,7 @@ const BUTTON_TYPES_MAP = {

 export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP

-export default { name: 'XButton' }
+export default { name: 'x-button' }
 </script>

 <script setup lang="ts">
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@ -1,29 +1,22 @@
 <template>
 	<div class="datepicker">
-		<SimpleButton
-			class="show"
-			:disabled="disabled || undefined"
-			@click.stop="toggleDatePopup"
-		>
+		<SimpleButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
 		</SimpleButton>

 		<CustomTransition name="fade">
-			<div
-				v-if="show"
-				ref="datepickerPopup"
-				class="datepicker-popup"
-			>
+			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
+
 				<DatepickerInline
 					v-model="date"
-					@update:modelValue="updateData"
+					@update:model-value="updateData"
 				/>

 				<x-button
-					v-cy="'closeDatepicker'"
 					class="datepicker__close-button"
 					:shadow="false"
 					@click="close"
+					v-cy="'closeDatepicker'"
 				>
 					{{ $t('misc.confirm') }}
 				</x-button>
@ -63,7 +56,7 @@ const props = defineProps({
 	},
 })

-const emit = defineEmits(['update:modelValue', 'close', 'closeOnChange'])
+const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])

 const date = ref<Date | null>()
 const show = ref(false)
@ -115,7 +108,7 @@ function close() {
 		emit('close', changed.value)
 		if (changed.value) {
 			changed.value = false
-			emit('closeOnChange', changed.value)
+			emit('close-on-change', changed.value)
 		}
 	}, 200)
 }
--- a/src/components/input/datepickerInline.vue
+++ b/src/components/input/datepickerInline.vue
@ -4,7 +4,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('today')"
 	>
-		<span class="icon"><icon :icon="['far', 'calendar-alt']" /></span>
+		<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.today') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
@ -14,7 +14,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('tomorrow')"
 	>
-		<span class="icon"><icon :icon="['far', 'sun']" /></span>
+		<span class="icon"><icon :icon="['far', 'sun']"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.tomorrow') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
@ -24,7 +24,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextMonday')"
 	>
-		<span class="icon"><icon icon="coffee" /></span>
+		<span class="icon"><icon icon="coffee"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextMonday') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
@ -34,7 +34,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('thisWeekend')"
 	>
-		<span class="icon"><icon icon="cocktail" /></span>
+		<span class="icon"><icon icon="cocktail"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
@ -44,7 +44,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('laterThisWeek')"
 	>
-		<span class="icon"><icon icon="chess-knight" /></span>
+		<span class="icon"><icon icon="chess-knight"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
@ -54,7 +54,7 @@
 		class="datepicker__quick-select-date"
 		@click.stop="setDate('nextWeek')"
 	>
-		<span class="icon"><icon icon="forward" /></span>
+		<span class="icon"><icon icon="forward"/></span>
 		<span class="text">
 			<span>{{ $t('input.datepicker.nextWeek') }}</span>
 			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
@ -63,8 +63,8 @@

 	<div class="flatpickr-container">
 		<flat-pickr
-			v-model="flatPickrDate"
 			:config="flatPickerConfig"
+			v-model="flatPickrDate"
 		/>
 	</div>
 </template>
@ -80,8 +80,8 @@ import {formatDate} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'

 const props = defineProps({
 	modelValue: {
@ -105,6 +105,8 @@ watch(
 	{immediate: true},
 )

+const authStore = useAuthStore()
+const weekStart = computed(() => authStore.settings.weekStart)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@ -112,7 +114,9 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: {
+		firstDayOfWeek: weekStart.value,
+	},
 }))

 // Since flatpickr dates are strings, we need to convert them to native date objects.
@ -124,12 +128,6 @@ const flatPickrDate = computed({
 			return
 		}

-		if (date.value !== null) {
-			const oldDate = formatDate(date.value, 'yyy-LL-dd H:mm')
-			if (oldDate === newValue) {
-				return
-			}
-		}
 		date.value = createDateFromString(newValue)
 		updateData()
 	},
@ -157,6 +155,10 @@ function updateData() {
 }

 function setDate(dateString: string) {
+	if (date.value === null) {
+		date.value = new Date()
+	}
+
 	const interval = calculateDayInterval(dateString)
 	const newDate = new Date()
 	newDate.setDate(newDate.getDate() + interval)
@ -164,6 +166,7 @@ function setDate(dateString: string) {
 	newDate.setMinutes(0)
 	newDate.setSeconds(0)
 	date.value = newDate
+	flatPickrDate.value = newDate
 	updateData()
 }

--- a/src/components/input/editor/CommandsList.vue
+++ b/src/components/input/editor/CommandsList.vue
@ -2,30 +2,26 @@
 	<div class="items">
 		<template v-if="items.length">
 			<button
-				v-for="(item, index) in items"
-				:key="index"
 				class="item"
 				:class="{ 'is-selected': index === selectedIndex }"
+				v-for="(item, index) in items"
+				:key="index"
 				@click="selectItem(index)"
 			>
-				<icon :icon="item.icon" />
+				<icon :icon="item.icon"/>
 				<div class="description">
 					<p>{{ item.title }}</p>
 					<p>{{ item.description }}</p>
 				</div>
 			</button>
 		</template>
-		<div
-			v-else
-			class="item"
-		>
+		<div class="item" v-else>
 			No result
 		</div>
 	</div>
 </template>

-<script lang="ts">
-/* eslint-disable vue/component-api-style */
+<script>
 export default {
 	props: {
 		items: {
--- a/src/components/input/editor/EditorToolbar.vue
+++ b/src/components/input/editor/EditorToolbar.vue
@ -2,35 +2,35 @@
 	<div class="editor-toolbar">
 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.heading1')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
 				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+				v-tooltip="$t('input.editor.heading1')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<icon :icon="['fa', 'fa-header']"/>
 					<span class="icon__lower-text">1</span>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.heading2')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
 				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+				v-tooltip="$t('input.editor.heading2')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<icon :icon="['fa', 'fa-header']"/>
 					<span class="icon__lower-text">2</span>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.heading3')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
 				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+				v-tooltip="$t('input.editor.heading3')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']" />
+					<icon :icon="['fa', 'fa-header']"/>
 					<span class="icon__lower-text">3</span>
 				</span>
 			</BaseButton>
@ -38,167 +38,167 @@

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.bold')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('bold') }"
 				@click="editor.chain().focus().toggleBold().run()"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				v-tooltip="$t('input.editor.bold')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-bold']" />
+					<icon :icon="['fa', 'fa-bold']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.italic')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('italic') }"
 				@click="editor.chain().focus().toggleItalic().run()"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				v-tooltip="$t('input.editor.italic')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-italic']" />
+					<icon :icon="['fa', 'fa-italic']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.underline')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('underline') }"
 				@click="editor.chain().focus().toggleUnderline().run()"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				v-tooltip="$t('input.editor.underline')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-underline']" />
+					<icon :icon="['fa', 'fa-underline']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.strikethrough')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('strike') }"
 				@click="editor.chain().focus().toggleStrike().run()"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				v-tooltip="$t('input.editor.strikethrough')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-strikethrough']" />
+					<icon :icon="['fa', 'fa-strikethrough']"/>
 				</span>
 			</BaseButton>
 		</div>

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.code')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('codeBlock') }"
 				@click="editor.chain().focus().toggleCodeBlock().run()"
+				:class="{ 'is-active': editor.isActive('codeBlock') }"
+				v-tooltip="$t('input.editor.code')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-code']" />
+					<icon :icon="['fa', 'fa-code']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.quote')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('blockquote') }"
 				@click="editor.chain().focus().toggleBlockquote().run()"
+				:class="{ 'is-active': editor.isActive('blockquote') }"
+				v-tooltip="$t('input.editor.quote')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-quote-right']" />
+					<icon :icon="['fa', 'fa-quote-right']"/>
 				</span>
 			</BaseButton>
 		</div>

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.bulletList')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('bulletList') }"
 				@click="editor.chain().focus().toggleBulletList().run()"
+				:class="{ 'is-active': editor.isActive('bulletList') }"
+				v-tooltip="$t('input.editor.bulletList')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ul']" />
+					<icon :icon="['fa', 'fa-list-ol']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.orderedList')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('orderedList') }"
 				@click="editor.chain().focus().toggleOrderedList().run()"
+				:class="{ 'is-active': editor.isActive('orderedList') }"
+				v-tooltip="$t('input.editor.orderedList')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ol']" />
+					<icon :icon="['fa', 'fa-list-ul']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.taskList')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('taskList') }"
 				@click="editor.chain().focus().toggleTaskList().run()"
+				:class="{ 'is-active': editor.isActive('taskList') }"
+				v-tooltip="$t('input.editor.taskList')"
 			>
 				<span class="icon">
-					<icon icon="fa-list-check" />
+					<icon icon="fa-list-check"/>
 				</span>
 			</BaseButton>
 		</div>

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.image')" 
 				class="editor-toolbar__button" 
-				@click="openImagePicker"
+				@click="openImagePicker" 
+				v-tooltip="$t('input.editor.image')"
 			>
 				<span class="icon">
-					<icon icon="fa-image" />
+					<icon icon="fa-image"/>
 				</span>
 			</BaseButton>
 		</div>

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.link')"
 				class="editor-toolbar__button"
+				@click="setLink"
 				:class="{ 'is-active': editor.isActive('link') }"
 				title="set link"
-				@click="setLink"
+				v-tooltip="$t('input.editor.link')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-link']" />
+					<icon :icon="['fa', 'fa-link']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.text')"
 				class="editor-toolbar__button"
+				@click="editor.chain().focus().setParagraph().run()"
 				:class="{ 'is-active': editor.isActive('paragraph') }"
 				title="paragraph"
-				@click="editor.chain().focus().setParagraph().run()"
+				v-tooltip="$t('input.editor.text')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-paragraph']" />
+					<icon :icon="['fa', 'fa-paragraph']"/>
 				</span>
 			</BaseButton>

 			<BaseButton
-				v-tooltip="$t('input.editor.horizontalRule')"
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().setHorizontalRule().run()"
+				v-tooltip="$t('input.editor.horizontalRule')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-ruler-horizontal']" />
+					<icon :icon="['fa', 'fa-ruler-horizontal']"/>
 				</span>
 			</BaseButton>
 		</div>

 		<div class="editor-toolbar__segment">
 			<BaseButton
-				v-tooltip="$t('input.editor.undo')"
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().undo().run()"
+				v-tooltip="$t('input.editor.undo')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-undo']" />
+					<icon :icon="['fa', 'fa-undo']"/>
 				</span>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.redo')"
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().redo().run()"
+				v-tooltip="$t('input.editor.redo')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-redo']" />
+					<icon :icon="['fa', 'fa-redo']"/>
 				</span>
 			</BaseButton>
 		</div>
@ -206,19 +206,16 @@
 		<div class="editor-toolbar__segment">
 			<!-- table -->
 			<BaseButton
-				v-tooltip="$t('input.editor.table.title')"
 				class="editor-toolbar__button"
-				:class="{ 'is-active': editor.isActive('table') }"
 				@click="toggleTableMode"
+				:class="{ 'is-active': editor.isActive('table') }"
+				v-tooltip="$t('input.editor.table.title')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-table']" />
+					<icon :icon="['fa', 'fa-table']"/>
 				</span>
 			</BaseButton>
-			<div
-				v-if="tableMode"
-				class="editor-toolbar__table-buttons"
-			>
+			<div v-if="tableMode" class="editor-toolbar__table-buttons">
 				<BaseButton
 					class="editor-toolbar__button"
 					@click="
@ -233,99 +230,99 @@
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().addColumnBefore"
 					@click="editor.chain().focus().addColumnBefore().run()"
+					:disabled="!editor.can().addColumnBefore"
 				>
 					{{ $t('input.editor.table.addColumnBefore') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().addColumnAfter"
 					@click="editor.chain().focus().addColumnAfter().run()"
+					:disabled="!editor.can().addColumnAfter"
 				>
 					{{ $t('input.editor.table.addColumnAfter') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().deleteColumn"
 					@click="editor.chain().focus().deleteColumn().run()"
+					:disabled="!editor.can().deleteColumn"
 				>
 					{{ $t('input.editor.table.deleteColumn') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().addRowBefore"
 					@click="editor.chain().focus().addRowBefore().run()"
+					:disabled="!editor.can().addRowBefore"
 				>
 					{{ $t('input.editor.table.addRowBefore') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().addRowAfter"
 					@click="editor.chain().focus().addRowAfter().run()"
+					:disabled="!editor.can().addRowAfter"
 				>
 					{{ $t('input.editor.table.addRowAfter') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().deleteRow"
 					@click="editor.chain().focus().deleteRow().run()"
+					:disabled="!editor.can().deleteRow"
 				>
 					{{ $t('input.editor.table.deleteRow') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().deleteTable"
 					@click="editor.chain().focus().deleteTable().run()"
+					:disabled="!editor.can().deleteTable"
 				>
 					{{ $t('input.editor.table.deleteTable') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().mergeCells"
 					@click="editor.chain().focus().mergeCells().run()"
+					:disabled="!editor.can().mergeCells"
 				>
 					{{ $t('input.editor.table.mergeCells') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().splitCell"
 					@click="editor.chain().focus().splitCell().run()"
+					:disabled="!editor.can().splitCell"
 				>
 					{{ $t('input.editor.table.splitCell') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().toggleHeaderColumn"
 					@click="editor.chain().focus().toggleHeaderColumn().run()"
+					:disabled="!editor.can().toggleHeaderColumn"
 				>
 					{{ $t('input.editor.table.toggleHeaderColumn') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().toggleHeaderRow"
 					@click="editor.chain().focus().toggleHeaderRow().run()"
+					:disabled="!editor.can().toggleHeaderRow"
 				>
 					{{ $t('input.editor.table.toggleHeaderRow') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().toggleHeaderCell"
 					@click="editor.chain().focus().toggleHeaderCell().run()"
+					:disabled="!editor.can().toggleHeaderCell"
 				>
 					{{ $t('input.editor.table.toggleHeaderCell') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().mergeOrSplit"
 					@click="editor.chain().focus().mergeOrSplit().run()"
+					:disabled="!editor.can().mergeOrSplit"
 				>
 					{{ $t('input.editor.table.mergeOrSplit') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					:disabled="!editor.can().fixTables"
 					@click="editor.chain().focus().fixTables().run()"
+					:disabled="!editor.can().fixTables"
 				>
 					{{ $t('input.editor.table.fixTables') }}
 				</BaseButton>
@ -339,7 +336,6 @@ import {ref} from 'vue'
 import {Editor} from '@tiptap/vue-3'

 import BaseButton from '@/components/base/BaseButton.vue'
-import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'

 const {
 	editor = null,
@ -357,8 +353,29 @@ function openImagePicker() {
 	document.getElementById('tiptap__image-upload').click()
 }

-function setLink(event) {
-	setLinkInEditor(event.target.getBoundingClientRect(), editor)
+function setLink() {
+	const previousUrl = editor.getAttributes('link').href
+	const url = window.prompt('URL', previousUrl)
+
+	// cancelled
+	if (url === null) {
+		return
+	}
+
+	// empty
+	if (url === '') {
+		editor.chain().focus().extendMarkRange('link').unsetLink().run()
+
+		return
+	}
+
+	// update link
+	editor
+		.chain()
+		.focus()
+		.extendMarkRange('link')
+		.setLink({href: url, target: '_blank'})
+		.run()
 }
 </script>

--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@ -1,8 +1,5 @@
 <template>
-	<div
-		ref="tiptapInstanceRef"
-		class="tiptap"
-	>
+	<div class="tiptap">
 		<EditorToolbar
 			v-if="editor && isEditing"
 			:editor="editor"
@ -14,129 +11,114 @@
 			class="editor-bubble__wrapper"
 		>
 			<BaseButton
-				v-tooltip="$t('input.editor.bold')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('bold') }"
 				@click="editor.chain().focus().toggleBold().run()"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				v-tooltip="$t('input.editor.bold')"
 			>
-				<icon :icon="['fa', 'fa-bold']" />
+				<icon :icon="['fa', 'fa-bold']"/>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.italic')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('italic') }"
 				@click="editor.chain().focus().toggleItalic().run()"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				v-tooltip="$t('input.editor.italic')"
 			>
-				<icon :icon="['fa', 'fa-italic']" />
+				<icon :icon="['fa', 'fa-italic']"/>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.underline')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('underline') }"
 				@click="editor.chain().focus().toggleUnderline().run()"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				v-tooltip="$t('input.editor.underline')"
 			>
-				<icon :icon="['fa', 'fa-underline']" />
+				<icon :icon="['fa', 'fa-underline']"/>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.strikethrough')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('strike') }"
 				@click="editor.chain().focus().toggleStrike().run()"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				v-tooltip="$t('input.editor.strikethrough')"
 			>
-				<icon :icon="['fa', 'fa-strikethrough']" />
+				<icon :icon="['fa', 'fa-strikethrough']"/>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.code')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('code') }"
 				@click="editor.chain().focus().toggleCode().run()"
+				:class="{ 'is-active': editor.isActive('code') }"
+				v-tooltip="$t('input.editor.code')"
 			>
-				<icon :icon="['fa', 'fa-code']" />
+				<icon :icon="['fa', 'fa-code']"/>
 			</BaseButton>
 			<BaseButton
-				v-tooltip="$t('input.editor.link')"
 				class="editor-bubble__button"
-				:class="{ 'is-active': editor.isActive('link') }"
 				@click="setLink"
+				:class="{ 'is-active': editor.isActive('link') }"
+				v-tooltip="$t('input.editor.link')"
 			>
-				<icon :icon="['fa', 'fa-link']" />
+				<icon :icon="['fa', 'fa-link']"/>
 			</BaseButton>
 		</BubbleMenu>

-		<EditorContent
+		<editor-content
 			class="tiptap__editor"
-			:class="{'tiptap__editor-is-edit-enabled': isEditing}"
+			:class="{'tiptap__editor-is-empty': isEmpty, 'tiptap__editor-is-edit-enabled': isEditing}"
 			:editor="editor"
-			@click="focusIfEditing()"
 		/>

 		<input
 			v-if="isEditing"
-			id="tiptap__image-upload"
-			ref="uploadInputRef"
 			type="file"
+			id="tiptap__image-upload"
 			class="is-hidden"
+			ref="uploadInputRef"
 			@change="addImage"
-		>
+		/>

-		<ul
-			v-if="bottomActions.length === 0 && !isEditing && isEditEnabled"
-			class="tiptap__editor-actions d-print-none"
-		>
+		<ul class="tiptap__editor-actions d-print-none" v-if="bottomActions.length === 0 && !isEditing">
 			<li>
 				<BaseButton
-					class="done-edit"
 					@click="setEdit"
-				>
+					class="done-edit">
 					{{ $t('input.editor.edit') }}
 				</BaseButton>
 			</li>
 		</ul>
-		<ul
-			v-if="bottomActions.length > 0"
-			class="tiptap__editor-actions d-print-none"
-		>
+		<ul class="tiptap__editor-actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditing && showSave">
 				<BaseButton
-					class="done-edit"
 					@click="bubbleSave"
-				>
+					class="done-edit">
 					{{ $t('misc.save') }}
 				</BaseButton>
 			</li>
 			<li v-if="!isEditing">
 				<BaseButton
-					class="done-edit"
 					@click="setEdit"
-				>
+					class="done-edit">
 					{{ $t('input.editor.edit') }}
 				</BaseButton>
 			</li>
-			<li
-				v-for="(action, k) in bottomActions"
-				:key="k"
-			>
-				<BaseButton @click="action.action">
-					{{ action.title }}
-				</BaseButton>
+			<li v-for="(action, k) in bottomActions" :key="k">
+				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
 			</li>
 		</ul>
-		<XButton
+		<x-button
 			v-else-if="isEditing && showSave"
-			v-cy="'saveEditor'"
 			class="mt-4"
+			@click="bubbleSave"
 			variant="secondary"
 			:shadow="false"
-			:disabled="!contentHasChanged"
-			@click="bubbleSave"
+			v-cy="'saveEditor'"
 		>
 			{{ $t('misc.save') }}
-		</XButton>
+		</x-button>
 	</div>
 </template>

 <script setup lang="ts">
-import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
+import {ref, watch, onBeforeUnmount, nextTick, onMounted, computed} from 'vue'
+import {refDebounced} from '@vueuse/core'

 import EditorToolbar from './EditorToolbar.vue'

@ -190,31 +172,8 @@ import XButton from '@/components/input/button.vue'
 import {Placeholder} from '@tiptap/extension-placeholder'
 import {eventToHotkeyString} from '@github/hotkey'
 import {mergeAttributes} from '@tiptap/core'
+import {createRandomID} from '@/helpers/randomId'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
-import inputPrompt from '@/helpers/inputPrompt'
-import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
-
-const {
-	modelValue,
-	uploadCallback,
-	isEditEnabled = true,
-	bottomActions = [],
-	showSave = false,
-	placeholder = '',
-	editShortcut = '',
-} = defineProps<{
-	modelValue: string,
-	uploadCallback?: UploadCallback,
-	isEditEnabled?: boolean,
-	bottomActions?: BottomAction[],
-	showSave?: boolean,
-	placeholder?: string,
-	editShortcut?: string,
-}>()
-
-const emit = defineEmits(['update:modelValue', 'save'])
-
-const tiptapInstanceRef = ref<HTMLInputElement | null>(null)

 const {t} = useI18n()

@ -240,60 +199,39 @@ const CustomTableCell = TableCell.extend({
 })

 type CacheKey = `${ITask['id']}-${IAttachment['id']}`
-const loadedAttachments = ref<{
-	[key: CacheKey]: string
-}>({})
+const loadedAttachments = ref<{ [key: CacheKey]: string }>({})

 const CustomImage = Image.extend({
-	addAttributes() {
-		return {
-			src: {
-				default: null,
-			},
-			alt: {
-				default: null,
-			},
-			title: {
-				default: null,
-			},
-			id: {
-				default: null,
-			},
-			'data-src': {
-				default: null,
-			},
-		}
-	},
 	renderHTML({HTMLAttributes}) {
-		if (HTMLAttributes.src?.startsWith(window.API_URL) || HTMLAttributes['data-src']?.startsWith(window.API_URL)) {
-			const imageUrl = HTMLAttributes['data-src'] ?? HTMLAttributes.src
-
-			// The url is something like /tasks/<id>/attachments/<id>
-			const parts = imageUrl.slice(window.API_URL.length + 1).split('/')
-			const taskId = Number(parts[1])
-			const attachmentId = Number(parts[3])
-			const cacheKey: CacheKey = `${taskId}-${attachmentId}`
-			const id = 'tiptap-image-' + cacheKey
+		if (HTMLAttributes.src?.startsWith(window.API_URL)) {

+			const id = 'tiptap-image-' + createRandomID()
 			nextTick(async () => {

 				const img = document.getElementById(id)

 				if (!img) return

+				// The url is something like /tasks/<id>/attachments/<id>
+				const parts = img.dataset?.src.slice(window.API_URL.length + 1).split('/')
+				const taskId = Number(parts[1])
+				const attachmentId = Number(parts[3])
+				const cacheKey: CacheKey = `${taskId}-${attachmentId}`
+
 				if (typeof loadedAttachments.value[cacheKey] === 'undefined') {

 					const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})

 					const attachmentService = new AttachmentService()
-					loadedAttachments.value[cacheKey] = await attachmentService.getBlobUrl(attachment)
+					const url = await attachmentService.getBlobUrl(attachment)
+					loadedAttachments.value[cacheKey] = url
 				}

 				img.src = loadedAttachments.value[cacheKey]
 			})

 			return ['img', mergeAttributes(this.options.HTMLAttributes, {
-				'data-src': imageUrl,
+				'data-src': HTMLAttributes.src,
 				src: '#',
 				alt: HTMLAttributes.alt,
 				title: HTMLAttributes.title,
@ -307,21 +245,35 @@ const CustomImage = Image.extend({

 type Mode = 'edit' | 'preview'

-const internalMode = ref<Mode>('preview')
-const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
-const contentHasChanged = ref<boolean>(false)
+const {
+	modelValue,
+	uploadCallback,
+	isEditEnabled = true,
+	bottomActions = [],
+	showSave = false,
+	placeholder = '',
+	editShortcut = '',
+	initialMode = 'edit',
+} = defineProps<{
+	modelValue: string,
+	uploadCallback?: UploadCallback,
+	isEditEnabled?: boolean,
+	bottomActions?: BottomAction[],
+	showSave?: boolean,
+	placeholder?: string,
+	editShortcut?: string,
+	initialMode?: Mode,
+}>()

-watch(
-	() => internalMode.value,
-	mode => {
-		if (mode === 'preview') {
-			contentHasChanged.value = false
-		}
-	},
-)
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const inputHTML = ref('')
+const isEmpty = computed(() => isEditorContentEmpty(inputHTML.value))
+const internalMode = ref<Mode>(initialMode)
+const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)

 const editor = useEditor({
-	// eslint-disable-next-line vue/no-ref-object-destructure
+	content: modelValue,
 	editable: isEditing.value,
 	extensions: [
 		// Starterkit:
@ -339,9 +291,7 @@ const editor = useEditor({
 			addKeyboardShortcuts() {
 				return {
 					'Mod-Enter': () => {
-						if (contentHasChanged.value) {
-							bubbleSave()
-						}
+						bubbleSave()
 					},
 				}
 			},
@ -391,28 +341,14 @@ const editor = useEditor({
 		TaskItem.configure({
 			nested: true,
 			onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
-				if (!isEditEnabled) {
-					return false
+				if (isEditEnabled) {
+					node.attrs.checked = checked
+					inputHTML.value = editor.value?.getHTML()
+					bubbleSave()
+					return true
 				}

-				// The following is a workaround for this bug:
-				// https://github.com/ueberdosis/tiptap/issues/4521
-				// https://github.com/ueberdosis/tiptap/issues/3676
-
-				editor.value!.state.doc.descendants((subnode, pos) => {
-					if (node.eq(subnode)) {
-						const {tr} = editor.value!.state
-						tr.setNodeMarkup(pos, undefined, {
-							...node.attrs,
-							checked,
-						})
-						editor.value!.view.dispatch(tr)
-						bubbleSave()
-					}
-				})
-
-
-				return true
+				return false
 			},
 		}),

@ -422,56 +358,52 @@ const editor = useEditor({
 		BubbleMenu,
 	],
 	onUpdate: () => {
-		bubbleNow()
+		inputHTML.value = editor.value!.getHTML()
 	},
 })

-watch(
-	() => isEditing.value,
-	() => {
-		editor.value?.setEditable(isEditing.value)
-	},
-	{immediate: true},
-)
-
 watch(
 	() => modelValue,
 	value => {
+		inputHTML.value = value
+
 		if (!editor?.value) return

 		if (editor.value.getHTML() === value) {
 			return
 		}

-		setModeAndValue(value)
+		editor.value.commands.setContent(value, false)
 	},
-	{immediate: true},
 )

-function bubbleNow() {
-	if (editor.value?.getHTML() === modelValue) {
-		return
-	}
+const debouncedInputHTML = refDebounced(inputHTML, 1000)
+watch(debouncedInputHTML, () => bubbleNow())

-	contentHasChanged.value = true
-	emit('update:modelValue', editor.value?.getHTML())
+function bubbleNow() {
+	emit('update:modelValue', inputHTML.value)
 }

 function bubbleSave() {
 	bubbleNow()
-	emit('save', editor.value?.getHTML())
+	emit('save', inputHTML.value)
 	if (isEditing.value) {
 		internalMode.value = 'preview'
 	}
 }

-function setEdit(focus: boolean = true) {
+function setEdit() {
 	internalMode.value = 'edit'
-	if (focus) {
-		editor.value?.commands.focus()
-	}
+	editor.value?.commands.focus()
 }

+watch(
+	() => isEditing.value,
+	() => {
+		editor.value?.setEditable(isEditing.value)
+	},
+)
+
 onBeforeUnmount(() => editor.value?.destroy())

 const uploadInputRef = ref<HTMLInputElement | null>(null)
@ -489,7 +421,7 @@ function uploadAndInsertFiles(files: File[] | FileList) {
 	})
 }

-async function addImage(event) {
+function addImage() {

 	if (typeof uploadCallback !== 'undefined') {
 		const files = uploadInputRef.value?.files
@ -503,7 +435,7 @@ async function addImage(event) {
 		return
 	}

-	const url = await inputPrompt(event.target.getBoundingClientRect())
+	const url = window.prompt('URL')

 	if (url) {
 		editor.value?.chain().focus().setImage({src: url}).run()
@ -511,49 +443,58 @@ async function addImage(event) {
 	}
 }

-function setLink(event) {
-	setLinkInEditor(event.target.getBoundingClientRect(), editor.value)
+function setLink() {
+	const previousUrl = editor.value?.getAttributes('link').href
+	const url = window.prompt('URL', previousUrl)
+
+	// cancelled
+	if (url === null) {
+		return
+	}
+
+	// empty
+	if (url === '') {
+		editor.value
+			?.chain()
+			.focus()
+			.extendMarkRange('link')
+			.unsetLink()
+			.run()
+
+		return
+	}
+
+	// update link
+	editor.value
+		?.chain()
+		.focus()
+		.extendMarkRange('link')
+		.setLink({href: url, target: '_blank'})
+		.run()
 }

-onMounted(async () => {
+onMounted(() => {
+	internalMode.value = initialMode
+	document.addEventListener('paste', handleImagePaste)
 	if (editShortcut !== '') {
 		document.addEventListener('keydown', setFocusToEditor)
 	}
-
-	await nextTick()
-
-	const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-	input?.addEventListener('paste', handleImagePaste)
-
-	setModeAndValue(modelValue)
 })

 onBeforeUnmount(() => {
-	nextTick(() => {
-		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-		input?.removeEventListener('paste', handleImagePaste)
-	})
+	document.removeEventListener('paste', handleImagePaste)
 	if (editShortcut !== '') {
 		document.removeEventListener('keydown', setFocusToEditor)
 	}
 })

-function setModeAndValue(value: string) {
-	internalMode.value = isEditorContentEmpty(value) ? 'edit' : 'preview'
-	editor.value?.commands.setContent(value, false)
-}
-
 function handleImagePaste(event) {
-	if (event?.clipboardData?.items?.length === 0) {
-		return
-	}
-
 	event.preventDefault()
-
-	const image = event.clipboardData.items[0]
-	if (image.kind === 'file' && image.type.startsWith('image/')) {
-		uploadAndInsertFiles([image.getAsFile()])
-	}
+	event?.clipboardData?.items?.forEach(i => {
+		if (i.kind === 'file' && i.type.startsWith('image/')) {
+			uploadAndInsertFiles([i.getAsFile()])
+		}
+	})
 }

 // See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
@ -566,93 +507,31 @@ function setFocusToEditor(event) {
 		event.target.contentEditable === 'true') {
 		return
 	}
-
 	event.preventDefault()

-	if (!isEditing.value && isEditEnabled) {
+	if (initialMode === 'preview' && isEditEnabled && !isEditing.value) {
 		internalMode.value = 'edit'
 	}

 	editor.value?.commands.focus()
 }
-
-function focusIfEditing() {
-	if (isEditing.value) {
-		editor.value?.commands.focus()
-	}
-}
-
-function clickTasklistCheckbox(event) {
-	event.stopImmediatePropagation()
-
-	if (event.target.localName !== 'p') {
-		return
-	}
-
-	event.target.parentNode.parentNode.firstChild.click()
-}
-
-watch(
-	() => isEditing.value,
-	editing => {
-		nextTick(() => {
-			const checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
-			if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
-				return
-			}
-
-			if (editing) {
-				checkboxes.forEach(check => {
-					if (check.children.length < 2) {
-						return
-					}
-
-					// We assume the first child contains the label element with the checkbox and the second child the actual label
-					// When the actual label is clicked, we forward that click to the checkbox.
-					check.children[1].removeEventListener('click', clickTasklistCheckbox)
-				})
-
-				return
-			}
-
-			checkboxes.forEach(check => {
-				if (check.children.length < 2) {
-					return
-				}
-
-				// We assume the first child contains the label element with the checkbox and the second child the actual label
-				// When the actual label is clicked, we forward that click to the checkbox.
-				check.children[1].addEventListener('click', clickTasklistCheckbox)
-			})
-		})
-	},
-	{immediate: true},
-)
 </script>

 <style lang="scss">
 .tiptap__editor {
 	&.tiptap__editor-is-edit-enabled {
 		min-height: 10rem;
-
-		.ProseMirror {
-			padding: .5rem;
-		}
-
-		&:focus-within, &:focus {
-			box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
-		}
-
-		ul[data-type='taskList'] li > div {
-			cursor: text;
-		}
 	}

 	transition: box-shadow $transition;
 	border-radius: $radius;
+
+	&:focus-within, &:focus {
+		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+	}
 }

-.tiptap p::before {
+.tiptap p.is-empty::before {
 	content: attr(data-placeholder);
 	color: var(--grey-400);
 	pointer-events: none;
@ -662,7 +541,7 @@ watch(

 // Basic editor styles
 .ProseMirror {
-	padding: .5rem .5rem .5rem 0;
+	padding: .5rem;

 	&:focus-within, &:focus {
 		box-shadow: none;
@ -686,17 +565,36 @@ watch(
 		line-height: 1.1;
 	}

+	a {
+		color: #68cef8;
+	}
+
 	code {
-		background-color: var(--grey-200);
-		color: var(--grey-700);
+		background-color: rgba(#616161, 0.1);
+		color: #616161;
 	}

 	pre {
-		background: var(--grey-200);
-		color: var(--grey-700);
+		background: #0d0d0d;
+		color: #fff;
 		font-family: 'JetBrainsMono', monospace;
 		padding: 0.75rem 1rem;
-		border-radius: $radius;
+		border-radius: 0.5rem;
+
+		code {
+			color: inherit;
+			padding: 0;
+			background: none;
+			font-size: 0.8rem;
+		}
+	}
+
+	pre {
+		background: #0d0d0d;
+		color: #fff;
+		font-family: 'JetBrainsMono', monospace;
+		padding: 0.75rem 1rem;
+		border-radius: 0.5rem;

 		code {
 			color: inherit;
@ -707,7 +605,7 @@ watch(

 		.hljs-comment,
 		.hljs-quote {
-			color: var(--grey-500);
+			color: #616161;
 		}

 		.hljs-variable,
@ -720,7 +618,7 @@ watch(
 		.hljs-name,
 		.hljs-selector-id,
 		.hljs-selector-class {
-			color: var(--code-variable);
+			color: #f98181;
 		}

 		.hljs-number,
@ -730,23 +628,23 @@ watch(
 		.hljs-literal,
 		.hljs-type,
 		.hljs-params {
-			color: var(--code-literal);
+			color: #fbbc88;
 		}

 		.hljs-string,
 		.hljs-symbol,
 		.hljs-bullet {
-			color: var(--code-symbol);
+			color: #b9f18d;
 		}

 		.hljs-title,
 		.hljs-section {
-			color: var(--code-section);
+			color: #faf594;
 		}

 		.hljs-keyword,
 		.hljs-selector-tag {
-			color: var(--code-keyword);
+			color: #70cff8;
 		}

 		.hljs-emphasis {
@ -763,7 +661,7 @@ watch(
 		height: auto;

 		&.ProseMirror-selectednode {
-			outline: 3px solid var(--primary);
+			outline: 3px solid #68cef8;
 		}
 	}

@ -876,7 +774,6 @@ ul[data-type='taskList'] {

 		> div {
 			flex: 1 1 auto;
-			cursor: pointer;
 		}
 	}

--- a/src/components/input/editor/setLinkInEditor.ts
+++ b/src/components/input/editor/setLinkInEditor.ts
@ -1,26 +0,0 @@
-import inputPrompt from '@/helpers/inputPrompt'
-
-export async function setLinkInEditor(pos, editor) {
-	const previousUrl = editor?.getAttributes('link').href || ''
-	const url = await inputPrompt(pos, previousUrl)
-
-	// empty
-	if (url === '') {
-		editor
-			?.chain()
-			.focus()
-			.extendMarkRange('link')
-			.unsetLink()
-			.run()
-
-		return
-	}
-
-	// update link
-	editor
-		?.chain()
-		.focus()
-		.extendMarkRange('link')
-		.setLink({href: url, target: '_blank'})
-		.run()
-}
--- a/src/components/input/fancycheckbox.story.vue
+++ b/src/components/input/fancycheckbox.story.vue
@ -26,42 +26,32 @@ const withoutInitialState = ref<boolean | undefined>()
 			</FancyCheckbox>

 			Visualisation
-			<input
-				v-model="isChecked"
-				type="checkbox"
-			>
+			<input type="checkbox" v-model="isChecked">
 			{{ isChecked }}
 		</Variant>
 		<Variant title="Enabled Initially">
 			<FancyCheckbox
-				v-model="isCheckedInitiallyEnabled"
 				:disabled="isDisabled"
+				v-model="isCheckedInitiallyEnabled"
 			>
 				We want you to use this option
 			</FancyCheckbox>

 			Visualisation
-			<input
-				v-model="isCheckedInitiallyEnabled"
-				type="checkbox"
-			>
+			<input type="checkbox" v-model="isCheckedInitiallyEnabled">
 			{{ isCheckedInitiallyEnabled }}
 		</Variant>
 		<Variant title="Disabled">
 			<FancyCheckbox
 				disabled
-				:model-value="isCheckedDisabled"
-				@update:modelValue="logEvent('Setting disabled: This should never happen', $event)"
+				:modelValue="isCheckedDisabled"
+				@update:model-value="logEvent('Setting disabled: This should never happen', $event)"
 			>
 				You can't change this
 			</FancyCheckbox>

 			Visualisation
-			<input
-				v-model="isCheckedDisabled"
-				type="checkbox"
-				disabled
-			>
+			<input type="checkbox" v-model="isCheckedDisabled" disabled>
 			{{ isCheckedDisabled }}
 		</Variant>

@ -74,11 +64,7 @@ const withoutInitialState = ref<boolean | undefined>()
 			</FancyCheckbox>

 			Visualisation
-			<input
-				v-model="withoutInitialState"
-				type="checkbox"
-				disabled
-			>
+			<input type="checkbox" v-model="withoutInitialState" disabled>
 			{{ withoutInitialState }}
 		</Variant>
 	</Story>
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@ -7,14 +7,11 @@
 		}"
 		:disabled="disabled"
 		:model-value="modelValue"
-		@update:modelValue="value => emit('update:modelValue', value)"
+		@update:model-value="value => emit('update:modelValue', value)"
 	>
 		<CheckboxIcon class="fancycheckbox__icon" />
-		<span
-			v-if="$slots.default"
-			class="fancycheckbox__content"
-		>
-			<slot />
+		<span v-if="$slots.default" class="fancycheckbox__content">
+			<slot/>
 		</span>
 	</BaseCheckbox>
 </template>
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@ -1,15 +1,12 @@
 <template>
 	<div
-		ref="multiselectRoot"
 		class="multiselect"
 		:class="{'has-search-results': searchResultsVisible}"
+		ref="multiselectRoot"
 		tabindex="-1"
 		@focus="focus"
 	>
-		<div
-			class="control"
-			:class="{'is-loading': loading || localLoading}"
-		>
+		<div class="control" :class="{'is-loading': loading || localLoading}">
 			<div
 				class="input-wrapper input"
 				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable}"
@ -21,67 +18,51 @@
 					:remove="remove"
 				>
 					<template v-for="(item, key) in internalValue">
-						<slot
-							name="tag"
-							:item="item"
-						>
-							<span
-								:key="`item${key}`"
-								class="tag ml-2 mt-2"
-							>
+						<slot name="tag" :item="item">
+							<span :key="`item${key}`" class="tag ml-2 mt-2">
 								{{ label !== '' ? item[label] : item }}
-								<BaseButton
-									class="delete is-small"
-									@click="() => remove(item)"
-								/>
+								<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
 							</span>
 						</slot>
 					</template>
 				</slot>
 				
 				<input
-					ref="searchInput"
-					v-model="query"
 					type="text"
 					class="input"
-					:placeholder="placeholder"
-					:autocomplete="autocompleteEnabled ? undefined : 'off'"
-					:spellcheck="autocompleteEnabled ? undefined : 'false'"
+					v-model="query"
 					@keyup="search"
 					@keyup.enter.exact.prevent="() => createOrSelectOnEnter()"
+					:placeholder="placeholder"
 					@keydown.down.exact.prevent="() => preSelect(0)"
+					ref="searchInput"
 					@focus="handleFocus"
-				>
+					:autocomplete="autocompleteEnabled ? undefined : 'off'"
+					:spellcheck="autocompleteEnabled ? undefined : 'false'"
+				/>
 				<BaseButton 
 					v-if="removalAvailable"
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
-					<icon icon="times" />
+					<icon icon="times"/>
 				</BaseButton>
 			</div>
 		</div>

 		<CustomTransition name="fade">
-			<div
-				v-if="searchResultsVisible"
-				class="search-results"
-				:class="{'search-results-inline': inline}"
-			>
+			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<BaseButton
+					class="search-result-button is-fullwidth"
 					v-for="(data, index) in filteredSearchResults"
 					:key="index"
 					:ref="(el) => setResult(el, index)"
-					class="search-result-button is-fullwidth"
 					@keydown.up.prevent="() => preSelect(index - 1)"
 					@keydown.down.prevent="() => preSelect(index + 1)"
 					@click.prevent.stop="() => select(data)"
 				>
 					<span>
-						<slot
-							name="searchResult"
-							:option="data"
-						>
+						<slot name="searchResult" :option="data">
 							<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
 						</slot>
 					</span>
@ -92,18 +73,15 @@

 				<BaseButton
 					v-if="creatableAvailable"
-					:ref="(el) => setResult(el, filteredSearchResults.length)"
 					class="search-result-button is-fullwidth"
+					:ref="(el) => setResult(el, filteredSearchResults.length)"
 					@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
 					@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
 					@keyup.enter.prevent="create"
 					@click.prevent.stop="create"
 				>
 					<span>
-						<slot
-							name="searchResult"
-							:option="query"
-						>
+						<slot name="searchResult" :option="query">
 							<span class="search-result">
 								{{ query }}
 							</span>
@ -129,6 +107,16 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'

+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function elementInResults(elem: string | any, label: string, query: string): boolean {
+	// Don't make create available if we have an exact match in our search results.
+	if (label !== '') {
+		return elem[label] === query
+	}
+
+	return elem === query
+}
+
 const props = defineProps({
 	/**
 	 * When true, shows a loading spinner
@ -257,16 +245,6 @@ const emit = defineEmits<{
 	(e: 'remove', value: null): void
 }>()

-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function elementInResults(elem: string | any, label: string, query: string): boolean {
-	// Don't make create available if we have an exact match in our search results.
-	if (label !== '') {
-		return elem[label] === query
-	}
-
-	return elem === query
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const query = ref<string | { [key: string]: any }>('')
 const searchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
--- a/src/components/input/password.vue
+++ b/src/components/input/password.vue
@ -1,31 +1,27 @@
 <template>
 	<div class="password-field">
 		<input
-			id="password"
 			class="input"
+			id="password"
 			name="password"
 			:placeholder="$t('user.auth.passwordPlaceholder')"
 			required
 			:type="passwordFieldType"
 			autocomplete="current-password"
-			:tabindex="props.tabindex"
 			@keyup.enter="e => $emit('submit', e)"
+			:tabindex="props.tabindex"
 			@focusout="validate"
 			@input="handleInput"
-		>
+		/>
 		<BaseButton
-			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
+			@click="togglePasswordFieldType"
 			class="password-field-type-toggle"
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
-			@click="togglePasswordFieldType"
-		>
-			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
+			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
+			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
 		</BaseButton>
 	</div>
-	<p
-		v-if="!isValid"
-		class="help is-danger"
-	>
+	<p class="help is-danger" v-if="!isValid">
 		{{ $t('user.auth.passwordRequired') }}
 	</p>
 </template>
--- a/src/components/misc/ButtonLink.vue
+++ b/src/components/misc/ButtonLink.vue
@ -1,7 +1,5 @@
 <template>
-	<BaseButton class="button-link">
-		<slot />
-	</BaseButton>
+	<BaseButton class="button-link"><slot/></BaseButton>
 </template>

 <script setup lang="ts">
--- a/src/components/misc/Done.vue
+++ b/src/components/misc/Done.vue
@ -1,5 +1,5 @@
 <template>
-	<div
+    <div
 		v-if="isDone"
 		class="is-done"
 		:class="{ 'is-done--small': variant === 'small' }"
--- a/src/components/misc/OpenQuickActions.vue
+++ b/src/components/misc/OpenQuickActions.vue
@ -31,10 +31,10 @@ function openQuickActions() {

 <template>
 	<BaseButton
+		@click="openQuickActions"
 		class="trigger-button"
 		:title="$t('keyboardShortcuts.quickSearch')"
-		@click="openQuickActions"
 	>
-		<icon icon="search" />
+		<icon icon="search"/>
 	</BaseButton>
 </template>
--- a/src/components/misc/ProgressBar.story.vue
+++ b/src/components/misc/ProgressBar.story.vue
@ -1,15 +0,0 @@
-<script setup lang="ts">
-import {ref} from 'vue'
-
-import ProgressBar from './ProgressBar.vue'
-
-const value = ref(50)
-</script>
-
-<template>
-	<Story>
-		<Variant title="Default">
-			<ProgressBar :value="value" />
-		</Variant>
-	</Story>
-</template>
--- a/src/components/misc/ProgressBar.vue
+++ b/src/components/misc/ProgressBar.vue
@ -1,139 +0,0 @@
-<template>
-	<progress
-		class="progress-bar"
-		:class="{
-			'is-small': isSmall,
-			'is-primary': isPrimary,
-		}"
-		:value="value"
-		max="100"
-	>
-		{{ value }}%
-	</progress>
-</template>
-
-<script setup lang="ts">
-import {defineProps} from 'vue'
-
-defineProps({
-	value: {
-		type: Number,
-		required: true,
-	},
-	isSmall: {
-		type: Boolean,
-		default: false,
-	},
-	isPrimary: {
-		type: Boolean,
-		required: false,
-	},
-})
-</script>
-
-<style lang="scss" scoped>
-.progress-bar {
-	--progress-height: #{$size-normal};
-	--progress-bar-background-color: var(--border-light, #{$border-light});
-	--progress-value-background-color: var(--grey-500, #{$text});
-	--progress-border-radius: #{$radius};
-	--progress-indeterminate-duration: 1.5s;
-
-	appearance: none;
-	border: none;
-	border-radius: var(--progress-border-radius);
-	height: var(--progress-height);
-	overflow: hidden;
-	padding: 0;
-	min-width: 6vw;
-
-	width: 50px;
-	margin: 0 .5rem 0 0;
-	flex: 3 1 auto;
-
-	&::-moz-progress-bar,
-	&::-webkit-progress-value {
-		background: var(--progress-value-background-color);
-	}
-
-	@media screen and (max-width: $tablet) {
-		margin: 0.5rem 0 0 0;
-		order: 1;
-		width: 100%;
-	}
-
-	&::-webkit-progress-bar {
-		background-color: var(--progress-bar-background-color);
-	}
-
-	&::-webkit-progress-value {
-		background-color: var(--progress-value-background-color);
-	}
-
-	&::-moz-progress-bar {
-		background-color: var(--progress-value-background-color);
-	}
-
-	&::-ms-fill {
-		background-color: var(--progress-value-background-color);
-		border: none;
-	}
-
-	// Colors
-	@each $name, $pair in $colors {
-		$color: nth($pair, 1);
-		&.is-#{$name} {
-			--progress-value-background-color: var(--#{$name}, #{$color});
-
-			&:indeterminate {
-				background-image: linear-gradient(
-						to right,
-						var(--#{$name}, #{$color}) 30%,
-						var(--progress-bar-background-color) 30%
-				);
-			}
-		}
-	}
-
-	&:indeterminate {
-		animation-duration: var(--progress-indeterminate-duration);
-		animation-iteration-count: infinite;
-		animation-name: moveIndeterminate;
-		animation-timing-function: linear;
-		background-color: var(--progress-bar-background-color);
-		background-image: linear-gradient(
-				to right,
-				var(--text, #{$text}) 30%,
-				var(--progress-bar-background-color) 30%
-		);
-		background-position: top left;
-		background-repeat: no-repeat;
-		background-size: 150% 150%;
-
-		&::-webkit-progress-bar {
-			background-color: transparent;
-		}
-
-		&::-moz-progress-bar {
-			background-color: transparent;
-		}
-
-		&::-ms-fill {
-			animation-name: none;
-		}
-	}
-
-	&.is-small {
-		--progress-height: #{$size-small};
-	}
-}
-
-@keyframes moveIndeterminate {
-	from {
-		background-position: 200% 0;
-	}
-	to {
-		background-position: -200% 0;
-	}
-}
-</style>
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@ -1,62 +1,38 @@
 <template>
 	<div class="api-config">
 		<div v-if="configureApi">
-			<label
-				class="label"
-				for="api-url"
-			>{{ $t('apiConfig.url') }}</label>
+			<label class="label" for="api-url">{{ $t('apiConfig.url') }}</label>
 			<div class="field has-addons">
 				<div class="control is-expanded">
 					<input
-						id="api-url"
-						v-model="apiUrl"
-						v-focus
 						class="input"
+						id="api-url"
 						:placeholder="$t('apiConfig.urlPlaceholder')"
 						required
 						type="url"
+						v-focus
+						v-model="apiUrl"
 						@keyup.enter="setApiUrl"
-					>
+					/>
 				</div>
 				<div class="control">
-					<x-button
-						:disabled="apiUrl === '' || undefined"
-						@click="setApiUrl"
-					>
+					<x-button @click="setApiUrl" :disabled="apiUrl === '' || undefined">
 						{{ $t('apiConfig.change') }}
 					</x-button>
 				</div>
 			</div>
 		</div>
-		<div
-			v-else
-			class="api-url-info"
-		>
-			<i18n-t
-				keypath="apiConfig.use"
-				scope="global"
-			>
-				<span
-					v-tooltip="apiUrl"
-					class="url"
-				> {{ apiDomain }} </span>
+		<div class="api-url-info" v-else>
+			<i18n-t keypath="apiConfig.use" scope="global">
+				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
-			<br>
-			<ButtonLink
-				class="api-config__change-button"
-				@click="() => (configureApi = true)"
-			>
-				{{ $t('apiConfig.change') }}
-			</ButtonLink>
+			<br/>
+			<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
 		</div>

-		<Message
-			v-if="errorMsg !== ''"
-			variant="danger"
-			class="mt-2"
-		>
+		<message variant="danger" v-if="errorMsg !== ''" class="mt-2">
 			{{ errorMsg }}
-		</Message>
+		</message>
 	</div>
 </template>

@ -81,7 +57,7 @@ const props = defineProps({
 const emit = defineEmits(['foundApi'])

 const apiUrl = ref(window.API_URL)
-const configureApi = ref(window.API_URL === '')
+const configureApi = ref(apiUrl.value === '')

 // Because we're only using this to parse the hostname, it should be fine to just prefix with http:// 
 // regardless of whether the url is actually reachable under http.
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@ -1,24 +1,18 @@
 <template>
-	<div
-		class="card"
-		:class="{'has-no-shadow': !shadow}"
-	>
-		<header
-			v-if="title !== ''"
-			class="card-header"
-		>
+	<div class="card" :class="{'has-no-shadow': !shadow}">
+		<header class="card-header" v-if="title !== ''">
 			<p class="card-header-title">
 				{{ title }}
 			</p>
 			<BaseButton
 				v-if="hasClose"
-				v-tooltip="$t('misc.close')"
 				class="card-header-icon"
 				:aria-label="$t('misc.close')"
 				@click="$emit('close')"
+				v-tooltip="$t('misc.close')"
 			>	
 				<span class="icon">
-					<icon :icon="closeIcon" />
+					<icon :icon="closeIcon"/>
 				</span>
 			</BaseButton>
 		</header>
@ -30,15 +24,12 @@
 			}"
 		>
 			<div :class="{'content': hasContent}">
-				<slot />
+				<slot/>
 			</div>
 		</div>

-		<footer
-			v-if="$slots.footer"
-			class="card-footer"
-		>
-			<slot name="footer" />
+		<footer v-if="$slots.footer" class="card-footer">
+			<slot name="footer"/>
 		</footer>
 	</div>
 </template>
--- a/src/components/misc/colorBubble.vue
+++ b/src/components/misc/colorBubble.vue
@ -2,7 +2,7 @@
 	<span
 		:style="{backgroundColor: color }"
 		class="color-bubble"
-	/>
+	></span>
 </template>

 <script lang="ts" setup>
--- a/src/components/misc/create-edit.vue
+++ b/src/components/misc/create-edit.vue
@ -1,20 +1,16 @@
 <template>
-	<modal
-		:overflow="true"
-		:wide="wide"
-		@close="$router.back()"
-	>
+	<modal @close="$router.back()" :overflow="true" :wide="wide">
 		<card
 			:title="title"
 			:shadow="false"
 			:padding="false"
 			class="has-text-left"
 			:has-close="true"
-			:loading="loading"
 			@close="$router.back()"
+			:loading="loading"
 		>
 			<div class="p-4">
-				<slot />
+				<slot/>
 			</div>

 			<template #footer>
@ -36,10 +32,10 @@
 					<x-button
 						v-if="hasPrimaryAction"
 						variant="primary"
+						@click.prevent.stop="primary()"
 						:icon="primaryIcon"
 						:disabled="primaryDisabled || loading"
 						class="ml-2"
-						@click.prevent.stop="primary()"
 					>
 						{{ primaryLabel || $t('misc.create') }}
 					</x-button>
--- a/src/components/misc/dropdown-item.vue
+++ b/src/components/misc/dropdown-item.vue
@ -5,10 +5,10 @@
 			class="icon is-small"
 			:class="iconClass"
 		>
-			<Icon :icon="icon" />
+			<Icon :icon="icon"/>
 		</span>
 		<span>
-			<slot />
+			<slot/>
 		</span>
 	</BaseButton>
 </template>
--- a/src/components/misc/dropdown.vue
+++ b/src/components/misc/dropdown.vue
@ -1,32 +1,15 @@
 <template>
-	<div
-		ref="dropdown"
-		class="dropdown"
-	>
-		<slot
-			name="trigger"
-			:close="close"
-			:toggle-open="toggleOpen"
-			:open="open"
-		>
-			<BaseButton
-				class="dropdown-trigger is-flex"
-				@click="toggleOpen"
-			>
-				<icon
-					:icon="triggerIcon"
-					class="icon"
-				/>
+	<div class="dropdown" ref="dropdown">
+		<slot name="trigger" :close="close" :toggleOpen="toggleOpen" :open="open">
+			<BaseButton class="dropdown-trigger is-flex" @click="toggleOpen">
+				<icon :icon="triggerIcon" class="icon"/>
 			</BaseButton>
 		</slot>

 		<CustomTransition name="fade">
-			<div
-				v-if="open"
-				class="dropdown-menu"
-			>
+			<div class="dropdown-menu" v-if="open">
 				<div class="dropdown-content">
-					<slot :close="close" />
+					<slot :close="close"></slot>
 				</div>
 			</div>
 		</CustomTransition>
--- a/src/components/misc/error.vue
+++ b/src/components/misc/error.vue
@ -1,17 +1,10 @@
 <template>
-	<Message variant="danger">
-		<i18n-t
-			keypath="loadingError.failed"
-			scope="global"
-		>
-			<ButtonLink @click="reload">
-				{{ $t('loadingError.tryAgain') }}
-			</ButtonLink>
-			<ButtonLink href="https://vikunja.io/contact/">
-				{{ $t('loadingError.contact') }}
-			</ButtonLink>
+	<message variant="danger">
+		<i18n-t keypath="loadingError.failed" scope="global">
+			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
+			<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
 		</i18n-t>
-	</Message>
+	</message>
 </template>

 <script lang="ts">
--- a/src/components/misc/flatpickr/Flatpickr.vue
+++ b/src/components/misc/flatpickr/Flatpickr.vue
@ -1,11 +1,11 @@
 <template>
 	<input
-		v-bind="attrs"
-		ref="root"
 		type="text"
 		data-input
 		:disabled="disabled"
-	>
+		v-bind="attrs"
+		ref="root"
+	/>
 </template>

 <script lang="ts">
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@ -1,20 +1,10 @@
 <template>
 	<modal @close="close()">
-		<card
-			class="has-background-white keyboard-shortcuts"
-			:shadow="false"
-			:title="$t('keyboardShortcuts.title')"
-		>
-			<template
-				v-for="(s, i) in shortcuts"
-				:key="i"
-			>
+		<card class="has-background-white keyboard-shortcuts"  :shadow="false" :title="$t('keyboardShortcuts.title')">
+			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>

-				<Message
-					v-if="s.available"
-					class="mb-4"
-				>
+				<message class="mb-4" v-if="s.available">
 					{{
 						typeof s.available === 'undefined' ?
 							$t('keyboardShortcuts.allPages') :
@ -24,19 +14,14 @@
 									: $t('keyboardShortcuts.somePagesOnly')
 							)
 					}}
-				</Message>
+				</message>

 				<dl class="shortcut-list">
-					<template
-						v-for="(sc, si) in s.shortcuts"
-						:key="si"
-					>
-						<dt class="shortcut-title">
-							{{ $t(sc.title) }}
-						</dt>
-						<Shortcut
-							is="dd"
+					<template v-for="(sc, si) in s.shortcuts" :key="si">
+						<dt class="shortcut-title">{{ $t(sc.title) }}</dt>
+						<shortcut
 							class="shortcut-keys"
+							is="dd"
 							:keys="sc.keys"
 							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
 						/>
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@ -1,18 +1,8 @@
 <template>
 	<div class="legal-links">
-		<BaseButton
-			v-if="imprintUrl"
-			:href="imprintUrl"
-		>
-			{{ $t('navigation.imprint') }}
-		</BaseButton>
+		<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<BaseButton
-			v-if="privacyPolicyUrl"
-			:href="privacyPolicyUrl"
-		>
-			{{ $t('navigation.privacy') }}
-		</BaseButton>
+		<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
 	</div>
 </template>

--- a/src/components/misc/loading.vue
+++ b/src/components/misc/loading.vue
@ -1,8 +1,5 @@
 <template>
-	<div
-		class="loader-container is-loading"
-		:class="{'is-small': variant === 'small'}"
-	/>
+	<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
 </template>

 <script lang="ts">
--- a/src/components/misc/message.vue
+++ b/src/components/misc/message.vue
@ -1,10 +1,7 @@
 <template>
 	<div class="message-wrapper">
-		<div
-			class="message"
-			:class="[variant, textAlignClass]"
-		>
-			<slot />
+		<div class="message" :class="[variant, textAlignClass]">
+			<slot/>
 		</div>
 	</div>
 </template>
@ -12,6 +9,14 @@
 <script lang="ts" setup>
 import {computed, type PropType} from 'vue'

+const TEXT_ALIGN_MAP = Object.freeze({
+	left: '',
+	center: 'has-text-centered',
+	right: 'has-text-right',
+})
+
+type textAlignVariants = keyof typeof TEXT_ALIGN_MAP
+
 const props = defineProps({
 	variant: {
 		type: String,
@ -23,14 +28,6 @@ const props = defineProps({
 	},
 })

-const TEXT_ALIGN_MAP = Object.freeze({
-	left: '',
-	center: 'has-text-centered',
-	right: 'has-text-right',
-})
-
-type textAlignVariants = keyof typeof TEXT_ALIGN_MAP
-
 const textAlignClass = computed(() => TEXT_ALIGN_MAP[props.textAlign])

 </script>
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@ -1,59 +1,56 @@
 <template>
 	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
-		<CustomTransition
-			:name="transitionName"
-			appear
-		>
+		<CustomTransition :name="transitionName" appear>
 			<section
 				v-if="enabled"
-				ref="modal"
 				class="modal-mask"
 				:class="[
 					{ 'has-overflow': overflow },
 					variant,
 				]"
+				ref="modal"
 				v-bind="attrs"
 			>
 				<div
-					v-shortcut="'Escape'"
 					class="modal-container"
 					@mousedown.self.prevent.stop="$emit('close')"
+					v-shortcut="'Escape'"
 				>
 					<div
 						class="modal-content"
 						:class="{
-							'has-overflow': overflow,
-							'is-wide': wide
-						}"
+						'has-overflow': overflow,
+						'is-wide': wide
+					}"
 					>
 						<BaseButton
-							class="close"
 							@click="$emit('close')"
+							class="close"
 						>
-							<icon icon="times" />
+							<icon icon="times"/>
 						</BaseButton>

 						<slot>
 							<div class="header">
-								<slot name="header" />
+								<slot name="header"></slot>
 							</div>
 							<div class="content">
-								<slot name="text" />
+								<slot name="text"></slot>
 							</div>
 							<div class="actions">
 								<x-button
+									@click="$emit('close')"
 									variant="tertiary"
 									class="has-text-danger"
-									@click="$emit('close')"
 								>
 									{{ $t('misc.cancel') }}
 								</x-button>
 								<x-button
-									v-cy="'modalPrimary'"
-									variant="primary"
-									:shadow="false"
 									@click="$emit('submit')"
+									variant="primary"
+									v-cy="'modalPrimary'"
+									:shadow="false"
 								>
 									{{ $t('misc.doit') }}
 								</x-button>
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@ -1,15 +1,8 @@
 <template>
 	<div class="no-auth-wrapper">
-		<Logo
-			class="logo"
-			width="200"
-			height="58"
-		/>
+		<Logo class="logo" width="200" height="58"/>
 		<div class="noauth-container">
-			<section
-				class="image"
-				:class="{'has-message': motd !== ''}"
-			>
+			<section class="image" :class="{'has-message': motd !== ''}">
 				<Message v-if="motd !== ''">
 					{{ motd }}
 				</Message>
@ -19,22 +12,14 @@
 			</section>
 			<section class="content">
 				<div>
-					<h2
-						v-if="title"
-						class="title"
-					>
-						{{ title }}
-					</h2>
-					<ApiConfig v-if="showApiConfig" />
-					<Message
-						v-if="motd !== ''"
-						class="is-hidden-tablet mb-4"
-					>
+					<h2 class="title" v-if="title">{{ title }}</h2>
+					<api-config v-if="showApiConfig"/>
+					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
 						{{ motd }}
 					</Message>
-					<slot />
+					<slot/>
 				</div>
-				<Legal />
+				<legal/>
 			</section>
 		</div>
 	</div>
@ -53,11 +38,6 @@ import ApiConfig from '@/components/misc/api-config.vue'
 import {useTitle} from '@/composables/useTitle'
 import {useConfigStore} from '@/stores/config'

-const {
-	showApiConfig = true,
-} = defineProps<{
-	showApiConfig?: boolean
-}>()
 const configStore = useConfigStore()
 const motd = computed(() => configStore.motd)

@ -66,6 +46,11 @@ const {t} = useI18n({useScope: 'global'})
 const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)

+const {
+	showApiConfig = true,
+} = defineProps<{
+	showApiConfig?: boolean
+}>()
 </script>

 <style lang="scss" scoped>
--- a/src/components/misc/nothing.vue
+++ b/src/components/misc/nothing.vue
@ -1,5 +1,5 @@
 <template>
 	<p class="has-text-centered has-text-grey is-italic p-4 mb-4">
-		<slot />
+		<slot></slot>
 	</p>
 </template>
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@ -1,43 +1,30 @@
 <template>
-	<notifications
-		position="bottom left"
-		:max="2"
-		class="global-notification"
-	>
+	<notifications position="bottom left" :max="2" class="global-notification">
 		<template #body="{ item, close }">
 			<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
 			<div
-				class="vue-notification-template vue-notification"
 				:class="[
+					'vue-notification-template',
+					'vue-notification',
 					item.type,
 				]"
 				@click="close()"
 			>
-				<div
-					v-if="item.title"
-					class="notification-title"
-				>
-					{{ item.title }}
-				</div>
+				<div v-if="item.title" class="notification-title">{{ item.title }}</div>
 				<div class="notification-content">
-					<template
-						v-for="(t, k) in item.text"
-						:key="k"
-					>
-						{{ t }}<br>
-					</template>
+					<template v-for="(t, k) in item.text" :key="k">{{ t }}<br /></template>
 				</div>
 				<div
-					v-if="item.data?.actions?.length > 0"
 					class="buttons is-right"
+					v-if="item.data?.actions?.length > 0"
 				>
 					<x-button
-						v-for="(action, i) in item.data.actions"
 						:key="'action_' + i"
+						@click="action.callback"
 						:shadow="false"
 						class="is-small"
 						variant="secondary"
-						@click="action.callback"
+						v-for="(action, i) in item.data.actions"
 					>
 						{{ action.title }}
 					</x-button>
--- a/src/components/misc/pagination.vue
+++ b/src/components/misc/pagination.vue
@ -1,33 +1,25 @@
 <template>
 	<nav
-		v-if="totalPages > 1"
 		aria-label="pagination"
 		class="pagination is-centered p-4"
 		role="navigation"
+		v-if="totalPages > 1"
 	>
 		<router-link
 			:disabled="currentPage === 1 || undefined"
 			:to="getRouteForPagination(currentPage - 1)"
-			class="pagination-previous"
-		>
+			class="pagination-previous">
 			{{ $t('misc.previous') }}
 		</router-link>
 		<router-link
 			:disabled="currentPage === totalPages || undefined"
 			:to="getRouteForPagination(currentPage + 1)"
-			class="pagination-next"
-		>
+			class="pagination-next">
 			{{ $t('misc.next') }}
 		</router-link>
 		<ul class="pagination-list">
-			<li
-				v-for="(p, i) in pages"
-				:key="`page-${i}`"
-			>
-				<span
-					v-if="p.isEllipsis"
-					class="pagination-ellipsis"
-				>&hellip;</span>
+			<li :key="`page-${i}`" v-for="(p, i) in pages">
+				<span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
 				<router-link
 					v-else
 					class="pagination-link"
@ -45,17 +37,6 @@
 <script lang="ts" setup>
 import {computed} from 'vue'

-const props = defineProps({
-	totalPages: {
-		type: Number,
-		required: true,
-	},
-	currentPage: {
-		type: Number,
-		default: 0,
-	},
-})
-
 function createPagination(totalPages: number, currentPage: number) {
 	const pages = []
 	for (let i = 0; i < totalPages; i++) {
@ -100,6 +81,17 @@ function getRouteForPagination(page = 1, type = null) {
 	}
 }

+const props = defineProps({
+	totalPages: {
+		type: Number,
+		required: true,
+	},
+	currentPage: {
+		type: Number,
+		default: 0,
+	},
+})
+
 const pages = computed(() => createPagination(props.totalPages, props.currentPage))
 </script>

--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@ -1,24 +1,14 @@
 <template>
-	<slot
-		name="trigger"
-		:is-open="open"
-		:toggle="toggle"
-		:close="close"
-	/>
+	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
 	<div
-		ref="popup"
 		class="popup"
 		:class="{
 			'is-open': open,
 			'has-overflow': props.hasOverflow && open
 		}"
+		ref="popup"
 	>
-		<slot
-			name="content"
-			:is-open="open"
-			:toggle="toggle"
-			:close="close"
-		/>
+		<slot name="content" :isOpen="open" :toggle="toggle"/>
 	</div>
 </template>

@ -63,7 +53,6 @@ onClickOutside(popup, () => {
 	overflow: hidden;
 	position: absolute;
 	top: 1rem;
-	z-index: 100;

 	&.is-open {
 		opacity: 1;
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@ -1,55 +1,37 @@
 <template>
 	<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
-	<div
-		class="offline"
-		style="height: 0;width: 0;"
-	/>
-	<div
-		v-if="!online"
-		class="app offline"
-	>
+	<div class="offline" style="height: 0;width: 0;"></div>
+	<div class="app offline" v-if="!online">
 		<div class="offline-message">
-			<h1 class="title">
-				{{ $t('offline.title') }}
-			</h1>
+			<h1 class="title">{{ $t('offline.title') }}</h1>
 			<p>{{ $t('offline.text') }}</p>
 		</div>
 	</div>
 	<template v-else-if="ready">
-		<slot />
+		<slot/>
 	</template>
 	<section v-else-if="error !== ''">
-		<NoAuthWrapper :show-api-config="false">
+		<no-auth-wrapper :show-api-config="false">
 			<p v-if="error === ERROR_NO_API_URL">
 				{{ $t('ready.noApiUrlConfigured') }}
 			</p>
-			<Message
-				v-else
-				variant="danger"
-				class="mb-4"
-			>
+			<message variant="danger" v-else class="mb-4">
 				<p>
-					{{ $t('ready.errorOccured') }}<br>
+					{{ $t('ready.errorOccured') }}<br/>
 					{{ error }}
 				</p>
 				<p>
 					{{ $t('ready.checkApiUrl') }}
 				</p>
-			</Message>
-			<ApiConfig
-				:configure-open="true"
-				@foundApi="load"
-			/>
-		</NoAuthWrapper>
+			</message>
+			<api-config :configure-open="true" @found-api="load"/>
+		</no-auth-wrapper>
 	</section>
 	<CustomTransition name="fade">
-		<section
-			v-if="showLoading"
-			class="vikunja-loading"
-		>
-			<Logo class="logo" />
+		<section class="vikunja-loading" v-if="showLoading">
+			<Logo class="logo"/>
 			<p>
-				<span class="loader-container is-loading-small is-loading" />
+				<span class="loader-container is-loading-small is-loading"></span>
 				{{ $t('ready.loading') }}
 			</p>
 		</section>
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@ -1,12 +1,6 @@
 <template>
-	<component
-		:is="is"
-		class="shortcuts"
-	>
-		<template
-			v-for="(k, i) in keys"
-			:key="i"
-		>
+	<component :is="is" class="shortcuts">
+		<template v-for="(k, i) in keys" :key="i">
 			<kbd>{{ k }}</kbd>
 			<span v-if="i < keys.length - 1">{{ combination }}</span>
 		</template>
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@ -1,32 +1,32 @@
 <template>
 	<x-button
 		v-if="type === 'button'"
-		v-tooltip="tooltipText"
 		variant="secondary"
 		:icon="iconName"
-		:disabled="disabled"
+		v-tooltip="tooltipText"
 		@click="changeSubscription"
+		:disabled="disabled"
 	>
 		{{ buttonText }}
 	</x-button>
 	<DropdownItem
 		v-else-if="type === 'dropdown'"
 		v-tooltip="tooltipText"
+		@click="changeSubscription"
 		:disabled="disabled"
 		:icon="iconName"
-		@click="changeSubscription"
 	>
 		{{ buttonText }}
 	</DropdownItem>
 	<BaseButton
 		v-else
 		v-tooltip="tooltipText"
+		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
 		:disabled="disabled"
-		@click="changeSubscription"
 	>
 		<span class="icon">
-			<icon :icon="iconName" />
+			<icon :icon="iconName"/>
 		</span>
 		{{ buttonText }}
 	</BaseButton>
@ -63,10 +63,10 @@ const props = defineProps({
 	},
 })

-const emit = defineEmits(['update:modelValue'])
-
 const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)

+const emit = defineEmits(['update:modelValue'])
+
 const subscriptionService = shallowRef(new SubscriptionService())

 const {t} = useI18n({useScope: 'global'})
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@ -4,17 +4,14 @@
 		:class="{'is-inline': isInline}"
 	>
 		<img
-			v-tooltip="displayName"
 			:height="avatarSize"
 			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
 			:alt="'Avatar of ' + displayName"
 			class="avatar"
-		>
-		<span
-			v-if="showUsername"
-			class="username"
-		>{{ displayName }}</span>
+			v-tooltip="displayName"
+		/>
+		<span class="username" v-if="showUsername">{{ displayName }}</span>
 	</div>
 </template>

--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@ -1,80 +1,51 @@
 <template>
 	<div class="notifications">
-		<slot
-			name="trigger"
-			toggle-open="() => showNotifications = !showNotifications"
-			:has-unread-notifications="unreadNotifications > 0"
-		>
-			<BaseButton
-				class="trigger-button"
-				@click.stop="showNotifications = !showNotifications"
-			>
-				<span
-					v-if="unreadNotifications > 0"
-					class="unread-indicator"
-				/>
-				<icon icon="bell" />
+		<slot name="trigger" toggleOpen="() => showNotifications = !showNotifications" :has-unread-notifications="unreadNotifications > 0">
+			<BaseButton class="trigger-button" @click.stop="showNotifications = !showNotifications">
+				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
+				<icon icon="bell"/>
 			</BaseButton>
 		</slot>

 		<CustomTransition name="fade">
-			<div
-				v-if="showNotifications"
-				ref="popup"
-				class="notifications-list"
-			>
+			<div class="notifications-list" v-if="showNotifications" ref="popup">
 				<span class="head">{{ $t('notification.title') }}</span>
 				<div
 					v-for="(n, index) in notifications"
 					:key="n.id"
 					class="single-notification"
 				>
-					<div
-						class="read-indicator"
-						:class="{'read': n.readAt !== null}"
-					/>
-					<User
-						v-if="n.notification.doer"
+					<div class="read-indicator" :class="{'read': n.readAt !== null}"></div>
+					<user
 						:user="n.notification.doer"
 						:show-username="false"
 						:avatar-size="16"
+						v-if="n.notification.doer"
 					/>
 					<div class="detail">
 						<div>
-							<span
-								v-if="n.notification.doer"
-								class="has-text-weight-bold mr-1"
-							>
+							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
 								{{ getDisplayName(n.notification.doer) }}
 							</span>
-							<BaseButton
-								class="has-text-left"
-								@click="() => to(n, index)()"
-							>
+							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
 							</BaseButton>
 						</div>
-						<span
-							v-tooltip="formatDateLong(n.created)"
-							class="created"
-						>
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
 				</div>
-				<XButton
+				<x-button
 					v-if="notifications.length > 0 && unreadNotifications > 0"
-					variant="tertiary"
-					class="mt-2 is-fullwidth" 
 					@click="markAllRead"
+					variant="tertiary" 
+					class="mt-2 is-fullwidth"
 				>
 					{{ $t('notification.markAllRead') }}
-				</XButton>
-				<p
-					v-if="notifications.length === 0"
-					class="nothing"
-				>
-					{{ $t('notification.none') }}<br>
+				</x-button>
+				<p class="nothing" v-if="notifications.length === 0">
+					{{ $t('notification.none') }}<br/>
 					<span class="explainer">
 						{{ $t('notification.explainer') }}
 					</span>
@ -153,7 +124,6 @@ function to(n, index) {
 	switch (n.name) {
 		case names.TASK_COMMENT:
 		case names.TASK_ASSIGNED:
-		case names.TASK_REMINDER:
 			to.name = 'task.detail'
 			to.params.id = n.notification.task.id
 			break
@ -185,8 +155,6 @@ async function markAllRead() {
 	const notificationService = new NotificationService()
 	await notificationService.markAllRead()
 	success({message: t('notification.markAllReadSuccess')})
-	
-	notifications.value.forEach(n => n.readAt = new Date())
 }
 </script>

@ -253,8 +221,7 @@ async function markAllRead() {
 				height: .35rem;
 				background: var(--primary);
 				border-radius: 100%;
-				margin: 0 .5rem;
-				flex-shrink: 0;
+				margin-left: .5rem;

 				&.read {
 					background: transparent;
--- a/src/components/project/ProjectWrapper.vue
+++ b/src/components/project/ProjectWrapper.vue
@ -14,7 +14,7 @@
 					:title="$t('keyboardShortcuts.project.switchToListView')"
 					class="switch-view-button"
 					:class="{'is-active': viewName === 'project'}"
-					:to="{ name: 'project.list', params: { projectId } }"
+					:to="{ name: 'project.list',   params: { projectId } }"
 				>
 					{{ $t('project.list.title') }}
 				</BaseButton>
@ -23,7 +23,7 @@
 					:title="$t('keyboardShortcuts.project.switchToGanttView')"
 					class="switch-view-button"
 					:class="{'is-active': viewName === 'gantt'}"
-					:to="{ name: 'project.gantt', params: { projectId } }"
+					:to="{ name: 'project.gantt',  params: { projectId } }"
 				>
 					{{ $t('project.gantt.title') }}
 				</BaseButton>
@ -32,7 +32,7 @@
 					:title="$t('keyboardShortcuts.project.switchToTableView')"
 					class="switch-view-button"
 					:class="{'is-active': viewName === 'table'}"
-					:to="{ name: 'project.table', params: { projectId } }"
+					:to="{ name: 'project.table',  params: { projectId } }"
 				>
 					{{ $t('project.table.title') }}
 				</BaseButton>
@ -49,16 +49,12 @@
 			<slot name="header" />
 		</div>
 		<CustomTransition name="fade">
-			<Message
-				v-if="currentProject?.isArchived"
-				variant="warning"
-				class="mb-4"
-			>
+			<Message variant="warning" v-if="currentProject?.isArchived" class="mb-4">
 				{{ $t('project.archivedMessage') }}
 			</Message>
 		</CustomTransition>

-		<slot v-if="loadedProjectId" />
+		<slot v-if="loadedProjectId"/>
 	</div>
 </template>

--- a/src/components/project/partials/ProjectCard.vue
+++ b/src/components/project/partials/ProjectCard.vue
@ -15,20 +15,11 @@
 			:class="{'is-visible': background}"
 			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
 		/>
-		<span
-			v-if="project.isArchived"
-			class="is-archived"
-		>{{ $t('project.archived') }}</span>
+		<span v-if="project.isArchived" class="is-archived" >{{ $t('project.archived') }}</span>

-		<div
-			class="project-title"
-			aria-hidden="true"
-		>
-			<span
-				v-if="project.id < -1"
-				class="saved-filter-icon icon"
-			>
-				<icon icon="filter" />
+		<div class="project-title" aria-hidden="true">
+			<span v-if="project.id < -1" class="saved-filter-icon icon">
+				<icon icon="filter"/>
 			</span>
 			{{ project.title }}
 		</div>
--- a/src/components/project/partials/ProjectCardGrid.vue
+++ b/src/components/project/partials/ProjectCardGrid.vue
@ -1,13 +1,13 @@
 <template>
-	<ul class="project-grid">
-		<li
-			v-for="(item, index) in filteredProjects"
-			:key="`project_${item.id}_${index}`"
-			class="project-grid-item"
-		>
-			<ProjectCard :project="item" />
-		</li>
-	</ul>
+    <ul class="project-grid">
+			<li
+				v-for="(item, index) in filteredProjects"
+				:key="`project_${item.id}_${index}`"
+				class="project-grid-item"
+			>
+				<ProjectCard :project="item" />
+			</li>
+    </ul>
 </template>

 <script lang="ts" setup>
--- a/src/components/project/partials/filter-popup.vue
+++ b/src/components/project/partials/filter-popup.vue
@ -7,9 +7,9 @@
 		{{ $t('filters.clear') }}
 	</x-button>
 	<x-button
+		@click="() => modalOpen = true"
 		variant="secondary"
 		icon="filter"
-		@click="() => modalOpen = true"
 	>
 		{{ $t('filters.title') }}
 	</x-button>
@ -20,10 +20,10 @@
 		variant="hint-modal"
 		@close="() => modalOpen = false"
 	>
-		<Filters
-			ref="filters"
-			v-model="value"
+		<filters
 			:has-title="true"
+			v-model="value"
+			ref="filters"
 			class="filter-popup"
 		/>
 	</modal>
@ -36,7 +36,7 @@ import Filters from '@/components/project/partials/filters.vue'

 import {getDefaultParams} from '@/composables/useTaskList'

-const props = defineProps({
+const	props = defineProps({
 	modelValue: {
 		required: true,
 	},
@ -48,9 +48,6 @@ const value = computed({
 		return props.modelValue
 	},
 	set(value) {
-		if(props.modelValue === value) {
-			return
-		}
 		emit('update:modelValue', value)
 	},
 })
@ -62,7 +59,7 @@ watch(
 	},
 	{immediate: true},
 )
-
+		
 const hasFilters = computed(() => {
 	// this.value also contains the page parameter which we don't want to include in filters
 	// eslint-disable-next-line no-unused-vars
--- a/src/components/project/partials/filters.vue
+++ b/src/components/project/partials/filters.vue
@ -1,157 +1,134 @@
 <template>
-	<card
-		class="filters has-overflow"
-		:title="hasTitle ? $t('filters.title') : ''"
-	>
+	<card class="filters has-overflow" :title="hasTitle ? $t('filters.title') : ''">
 		<div class="field is-flex is-flex-direction-column">
-			<Fancycheckbox
+			<fancycheckbox
 				v-model="params.filter_include_nulls"
-				@update:modelValue="change()"
+				@update:model-value="change()"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
-			</Fancycheckbox>
-			<Fancycheckbox
+			</fancycheckbox>
+			<fancycheckbox
 				v-model="filters.requireAllFilters"
-				@update:modelValue="setFilterConcat()"
+				@update:model-value="setFilterConcat()"
 			>
 				{{ $t('filters.attributes.requireAll') }}
-			</Fancycheckbox>
-			<Fancycheckbox
+			</fancycheckbox>
+			<fancycheckbox
 				v-model="filters.done"
-				@update:modelValue="setDoneFilter"
+				@update:model-value="setDoneFilter"
 			>
 				{{ $t('filters.attributes.showDoneTasks') }}
-			</Fancycheckbox>
-			<Fancycheckbox
+			</fancycheckbox>
+			<fancycheckbox
 				v-if="!['project.kanban', 'project.table'].includes($route.name as string)"
 				v-model="sortAlphabetically"
-				@update:modelValue="change()"
+				@update:model-value="change()"
 			>
 				{{ $t('filters.attributes.sortAlphabetically') }}
-			</Fancycheckbox>
+			</fancycheckbox>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('misc.search') }}</label>
 			<div class="control">
 				<input
-					v-model="params.s"
 					class="input"
 					:placeholder="$t('misc.search')"
+					v-model="params.s"
 					@blur="change()"
 					@keyup.enter="change()"
-				>
+				/>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.priority') }}</label>
 			<div class="control single-value-control">
-				<PrioritySelect
+				<priority-select
 					v-model.number="filters.priority"
+					@update:model-value="setPriority"
 					:disabled="!filters.usePriority || undefined"
-					@update:modelValue="setPriority"
 				/>
-				<Fancycheckbox
+				<fancycheckbox
 					v-model="filters.usePriority"
-					@update:modelValue="setPriority"
+					@update:model-value="setPriority"
 				>
 					{{ $t('filters.attributes.enablePriority') }}
-				</Fancycheckbox>
+				</fancycheckbox>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.percentDone') }}</label>
 			<div class="control single-value-control">
-				<PercentDoneSelect
+				<percent-done-select
 					v-model.number="filters.percentDone"
+					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
-					@update:modelValue="setPercentDoneFilter"
 				/>
-				<Fancycheckbox
+				<fancycheckbox
 					v-model="filters.usePercentDone"
-					@update:modelValue="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
-				</Fancycheckbox>
+				</fancycheckbox>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
-				<DatepickerWithRange
+				<datepicker-with-range
 					v-model="filters.dueDate"
-					@update:modelValue="values => setDateFilter('due_date', values)"
+					@update:model-value="values => setDateFilter('due_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</DatepickerWithRange>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
-				<DatepickerWithRange
+				<datepicker-with-range
 					v-model="filters.startDate"
-					@update:modelValue="values => setDateFilter('start_date', values)"
+					@update:model-value="values => setDateFilter('start_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</DatepickerWithRange>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
-				<DatepickerWithRange
+				<datepicker-with-range
 					v-model="filters.endDate"
-					@update:modelValue="values => setDateFilter('end_date', values)"
+					@update:model-value="values => setDateFilter('end_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</DatepickerWithRange>
+				</datepicker-with-range>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
-				<DatepickerWithRange
+				<datepicker-with-range
 					v-model="filters.reminders"
-					@update:modelValue="values => setDateFilter('reminders', values)"
+					@update:model-value="values => setDateFilter('reminders', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
+						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</DatepickerWithRange>
+				</datepicker-with-range>
 			</div>
 		</div>

@ -169,10 +146,10 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<EditLabels
-					v-model="entities.labels"
+				<edit-labels
 					:creatable="false"
-					@update:modelValue="changeLabelFilter"
+					v-model="entities.labels"
+					@update:model-value="changeLabelFilter"
 				/>
 			</div>
 		</div>
@ -185,9 +162,9 @@
 				<div class="control">
 					<SelectProject
 						v-model="entities.projects"
-						:project-filter="p => p.id > 0"
 						@select="changeMultiselectFilter('projects', 'project_id')"
 						@remove="changeMultiselectFilter('projects', 'project_id')"
+						:project-filter="p => p.id > 0"
 					/>
 				</div>
 			</div>
@ -200,9 +177,8 @@ export const ALPHABETICAL_SORT = 'title'
 </script>

 <script setup lang="ts">
-import {computed, nextTick, onMounted, reactive, ref, shallowReactive, toRefs} from 'vue'
+import {computed, nextTick, onMounted, reactive, ref, shallowReactive, toRefs, watch} from 'vue'
 import {camelCase} from 'camel-case'
-import {watchDebounced} from '@vueuse/core'

 import type {ILabel} from '@/modelTypes/ILabel'
 import type {IUser} from '@/modelTypes/IUser'
@ -228,18 +204,6 @@ import ProjectService from '@/services/project'
 // FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
 import {getDefaultParams} from '@/composables/useTaskList'

-const props = defineProps({
-	modelValue: {
-		required: true,
-	},
-	hasTitle: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const emit = defineEmits(['update:modelValue'])
-
 // FIXME: merge with DEFAULT_PARAMS in taskProject.js
 const DEFAULT_PARAMS = {
 	sort_by: [],
@ -268,6 +232,18 @@ const DEFAULT_FILTERS = {
 	project_id: '',
 } as const

+const props = defineProps({
+	modelValue: {
+		required: true,
+	},
+	hasTitle: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['update:modelValue'])
+
 const {modelValue} = toRefs(props)

 const labelStore = useLabelStore()
@ -298,16 +274,15 @@ onMounted(() => {
 	filters.value.requireAllFilters = params.value.filter_concat === 'and'
 })

-// Using watchDebounced to prevent the filter re-triggering itself.
-// FIXME: Only here until this whole component changes a lot with the new filter syntax.
-watchDebounced(
+watch(
 	modelValue,
 	(value) => {
-		// FIXME: filters should only be converted to snake case in the last moment
+		// FIXME: filters should only be converted to snake case in
+		// the last moment
 		params.value = objectToSnakeCase(value)
 		prepareFilters()
 	},
-	{immediate: true, debounce: 500, maxWait: 1000},
+	{immediate: true},
 )

 const sortAlphabetically = computed({
@ -336,7 +311,7 @@ function prepareFilters() {
 	prepareDate('end_date', 'endDate')
 	prepareSingleValue('priority', 'priority', 'usePriority', true)
 	prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
-	prepareDate('reminders', 'reminders')
+	prepareDate('reminders')
 	prepareRelatedObjectFilter('users', 'assignees')
 	prepareProjectsFilter()

@ -412,13 +387,13 @@ function setDateFilter(filterName, {dateFrom, dateTo}) {
 	change()
 }

-function prepareDate(filterName: string, variableName: 'dueDate' | 'startDate' | 'endDate' | 'reminders') {
+function prepareDate(filterName, variableName) {
 	if (typeof params.value.filter_by === 'undefined') {
 		return
 	}

-	let foundDateStart: boolean | string = false
-	let foundDateEnd: boolean | string = false
+	let foundDateStart = false
+	let foundDateEnd = false
 	for (const i in params.value.filter_by) {
 		if (params.value.filter_by[i] === filterName && params.value.filter_comparator[i] === 'greater_equals') {
 			foundDateStart = i
--- a/src/components/project/project-settings-dropdown.vue
+++ b/src/components/project/project-settings-dropdown.vue
@ -1,108 +1,99 @@
 <template>
-	<Dropdown>
+	<dropdown>
 		<template #trigger="triggerProps">
-			<slot
-				name="trigger"
-				v-bind="triggerProps"
-			>
-				<BaseButton
-					class="dropdown-trigger"
-					@click="triggerProps.toggleOpen"
-				>
-					<icon
-						icon="ellipsis-h"
-						class="icon"
-					/>
+			<slot name="trigger" v-bind="triggerProps">
+				<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
+					<icon icon="ellipsis-h" class="icon"/>
 				</BaseButton>
 			</slot>
 		</template>

 		<template v-if="isSavedFilter(project)">
-			<DropdownItem
+			<dropdown-item
 				:to="{ name: 'filter.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				:to="{ name: 'filter.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
-			</DropdownItem>
+			</dropdown-item>
 		</template>

 		<template v-else-if="project.isArchived">
-			<DropdownItem
+			<dropdown-item
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
-			</DropdownItem>
+			</dropdown-item>
 		</template>
 		<template v-else>
-			<DropdownItem
+			<dropdown-item
 				:to="{ name: 'project.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				v-if="backgroundsEnabled"
 				:to="{ name: 'project.settings.background', params: { projectId: project.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				:to="{ name: 'project.settings.share', params: { projectId: project.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				:to="{ name: 'project.settings.duplicate', params: { projectId: project.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
-			</DropdownItem>
+			</dropdown-item>
 			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
 				entity="project"
 				:entity-id="project.id"
 				:model-value="project.subscription"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
-				@update:modelValue="setSubscriptionInStore"
 			/>
-			<DropdownItem
+			<dropdown-item
 				:to="{ name: 'project.settings.webhooks', params: { projectId: project.id } }"
 				icon="bolt"
 			>
 				{{ $t('project.webhooks.title') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				v-if="level < 2"
 				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
 				icon="layer-group"
 			>
 				{{ $t('menu.createProject') }}
-			</DropdownItem>
-			<DropdownItem
+			</dropdown-item>
+			<dropdown-item
 				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
 				{{ $t('menu.delete') }}
-			</DropdownItem>
+			</dropdown-item>
 		</template>
-	</Dropdown>
+	</dropdown>
 </template>

 <script setup lang="ts">
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@ -1,53 +1,33 @@
 <template>
-	<modal
-		:enabled="active"
-		:overflow="isNewTaskCommand"
-		@close="closeQuickActions"
-	>
+	<modal :enabled="active" @close="closeQuickActions" :overflow="isNewTaskCommand">
 		<div class="card quick-actions">
-			<div
-				class="action-input"
-				:class="{'has-active-cmd': selectedCmd !== null}"
-			>
-				<div
-					v-if="selectedCmd !== null"
-					class="active-cmd tag"
-				>
+			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
+				<div class="active-cmd tag" v-if="selectedCmd !== null">
 					{{ selectedCmd.title }}
 				</div>
 				<input
-					ref="searchInput"
-					v-model="query"
 					v-focus
 					class="input"
 					:class="{'is-loading': loading}"
+					v-model="query"
 					:placeholder="placeholder"
 					@keyup="search"
+					ref="searchInput"
 					@keydown.down.prevent="select(0, 0)"
 					@keyup.prevent.delete="unselectCmd"
 					@keyup.prevent.enter="doCmd"
 					@keyup.prevent.esc="closeQuickActions"
-				>
+				/>
 			</div>

-			<div
-				v-if="hintText !== '' && !isNewTaskCommand"
-				class="help has-text-grey-light p-2"
-			>
+			<div class="help has-text-grey-light p-2" v-if="hintText !== '' && !isNewTaskCommand">
 				{{ hintText }}
 			</div>

-			<QuickAddMagic v-if="isNewTaskCommand" />
+			<quick-add-magic v-if="isNewTaskCommand"/>

-			<div
-				v-if="selectedCmd === null"
-				class="results"
-			>
-				<div
-					v-for="(r, k) in results"
-					:key="k"
-					class="result"
-				>
+			<div class="results" v-if="selectedCmd === null">
+				<div v-for="(r, k) in results" :key="k" class="result">
 					<span class="result-title">
 						{{ r.title }}
 					</span>
@ -55,9 +35,9 @@
 						<BaseButton
 							v-for="(i, key) in r.items"
 							:key="key"
-							:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, k, key)"
 							class="result-item-button"
 							:class="{'is-strikethrough': (i as DoAction<ITask>)?.done}"
+							:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, k, key)"
 							@keydown.up.prevent="select(k, key - 1)"
 							@keydown.down.prevent="select(k, key + 1)"
 							@click.prevent.stop="doAction(r.type, i)"
@ -65,10 +45,10 @@
 							@keyup.prevent.esc="searchInput?.focus()"
 						>
 							<template v-if="r.type === ACTION_TYPE.LABELS">
-								<XLabel :label="i" />
+								<x-label :label="i"/>
 							</template>
 							<template v-else-if="r.type === ACTION_TYPE.TASK">
-								<SingleTaskInlineReadonly
+								<single-task-inline-readonly
 									:task="i"
 									:show-project="true"
 								/>
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@ -3,9 +3,8 @@
 		<p class="has-text-weight-bold">
 			{{ $t('project.share.links.title') }}
 			<span
-				v-tooltip="$t('project.share.links.explanation')"
 				class="is-size-7 has-text-grey is-italic ml-3"
-			>
+				v-tooltip="$t('project.share.links.explanation')">
 				{{ $t('project.share.links.what') }}
 			</span>
 		</p>
@ -13,30 +12,20 @@
 		<div class="sharables-project">
 			<x-button
 				v-if="!(linkShares.length === 0 || showNewForm)"
-				icon="plus"
-				class="mb-4"
 				@click="showNewForm = true"
-			>
+				icon="plus"
+				class="mb-4">
 				{{ $t('project.share.links.create') }}
 			</x-button>

-			<div
-				v-if="linkShares.length === 0 || showNewForm"
-				class="p-4"
-			>
+			<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
 				<div class="field">
-					<label
-						class="label"
-						for="linkShareRight"
-					>
+					<label class="label" for="linkShareRight">
 						{{ $t('project.share.right.title') }}
 					</label>
 					<div class="control">
 						<div class="select">
-							<select
-								id="linkShareRight"
-								v-model="selectedRight"
-							>
+							<select v-model="selectedRight" id="linkShareRight">
 								<option :value="RIGHTS.READ">
 									{{ $t('project.share.right.read') }}
 								</option>
@ -51,150 +40,131 @@
 					</div>
 				</div>
 				<div class="field">
-					<label
-						class="label"
-						for="linkShareName"
-					>
+					<label class="label" for="linkShareName">
 						{{ $t('project.share.links.name') }}
 					</label>
 					<div class="control">
 						<input
 							id="linkShareName"
-							v-model="name"
-							v-tooltip="$t('project.share.links.nameExplanation')"
 							class="input"
 							:placeholder="$t('project.share.links.namePlaceholder')"
-						>
+							v-tooltip="$t('project.share.links.nameExplanation')"
+							v-model="name"
+						/>
 					</div>
 				</div>
 				<div class="field">
-					<label
-						class="label"
-						for="linkSharePassword"
-					>
+					<label class="label" for="linkSharePassword">
 						{{ $t('project.share.links.password') }}
 					</label>
 					<div class="control">
 						<input
 							id="linkSharePassword"
-							v-model="password"
-							v-tooltip="$t('project.share.links.passwordExplanation')"
 							type="password"
 							class="input"
 							:placeholder="$t('user.auth.passwordPlaceholder')"
-						>
+							v-tooltip="$t('project.share.links.passwordExplanation')"
+							v-model="password"
+						/>
 					</div>
 				</div>
-				<x-button
-					icon="plus"
-					@click="add(projectId)"
-				>
+				<x-button @click="add(projectId)" icon="plus">
 					{{ $t('project.share.share') }}
 				</x-button>
 			</div>

 			<table
-				v-if="linkShares.length > 0"
 				class="table has-actions is-striped is-hoverable is-fullwidth"
+				v-if="linkShares.length > 0"
 			>
 				<thead>
-					<tr>
-						<th />
-						<th>{{ $t('project.share.links.view') }}</th>
-						<th>{{ $t('project.share.attributes.delete') }}</th>
-					</tr>
+				<tr>
+					<th></th>
+					<th>{{ $t('project.share.links.view') }}</th>
+					<th>{{ $t('project.share.attributes.delete') }}</th>
+				</tr>
 				</thead>
 				<tbody>
-					<tr
-						v-for="s in linkShares"
-						:key="s.id"
-					>
-						<td>
-							<p
-								v-if="s.name !== ''"
-								class="mb-2 is-italic"
-							>
-								{{ s.name }}
-							</p>
+				<tr :key="s.id" v-for="s in linkShares">
+					<td>
+						<p class="mb-2 is-italic" v-if="s.name !== ''">
+							{{ s.name }}
+						</p>

-							<p class="mb-2">
-								<i18n-t
-									keypath="project.share.links.sharedBy"
-									scope="global"
-								>
-									<strong>{{ getDisplayName(s.sharedBy) }}</strong>
-								</i18n-t>
-							</p>
+						<p class="mb-2">
+							<i18n-t keypath="project.share.links.sharedBy" scope="global">
+								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
+							</i18n-t>
+						</p>

-							<p class="mb-2">
-								<template v-if="s.right === RIGHTS.ADMIN">
-									<span class="icon is-small">
-										<icon icon="lock" />
-									</span>&nbsp;
-									{{ $t('project.share.right.admin') }}
-								</template>
-								<template v-else-if="s.right === RIGHTS.READ_WRITE">
-									<span class="icon is-small">
-										<icon icon="pen" />
-									</span>&nbsp;
-									{{ $t('project.share.right.readWrite') }}
-								</template>
-								<template v-else>
-									<span class="icon is-small">
-										<icon icon="users" />
-									</span>&nbsp;
-									{{ $t('project.share.right.read') }}
-								</template>
-							</p>
+						<p class="mb-2">
+							<template v-if="s.right === RIGHTS.ADMIN">
+								<span class="icon is-small">
+									<icon icon="lock"/>
+								</span>&nbsp;
+								{{ $t('project.share.right.admin') }}
+							</template>
+							<template v-else-if="s.right === RIGHTS.READ_WRITE">
+								<span class="icon is-small">
+									<icon icon="pen"/>
+								</span>&nbsp;
+								{{ $t('project.share.right.readWrite') }}
+							</template>
+							<template v-else>
+								<span class="icon is-small">
+									<icon icon="users"/>
+								</span>&nbsp;
+								{{ $t('project.share.right.read') }}
+							</template>
+						</p>
 						
-							<div class="field has-addons no-input-mobile">
-								<div class="control">
-									<input
+						<div class="field has-addons no-input-mobile">
+							<div class="control">
+								<input
 										:value="getShareLink(s.hash, selectedView[s.id])"
 										class="input"
 										readonly
 										type="text"
-									>
-								</div>
-								<div class="control">
-									<x-button
-										v-tooltip="$t('misc.copy')"
-										:shadow="false"
+								/>
+							</div>
+							<div class="control">
+								<x-button
 										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
-									>
-										<span class="icon">
-											<icon icon="paste" />
-										</span>
-									</x-button>
-								</div>
+										:shadow="false"
+										v-tooltip="$t('misc.copy')"
+								>
+									<span class="icon">
+										<icon icon="paste"/>
+									</span>
+								</x-button>
 							</div>
-						</td>
-						<td>
-							<div class="select">
-								<select v-model="selectedView[s.id]">
-									<option
-										v-for="(title, key) in availableViews"
-										:key="key"
-										:value="key"
-									>
-										{{ title }}
-									</option>
-								</select>
-							</div>
-						</td>
-						<td class="actions">
-							<x-button
-								class="is-danger"
-								icon="trash-alt"
-								@click="
+						</div>
+					</td>
+					<td>
+						<div class="select">
+							<select v-model="selectedView[s.id]">
+								<option
+									v-for="(title, key) in availableViews"
+									:value="key"
+									:key="key">
+									{{ title }}
+								</option>
+							</select>
+						</div>
+					</td>
+					<td class="actions">
+						<x-button
+							@click="
 									() => {
 										linkIdToDelete = s.id
 										showDeleteModal = true
 									}
 								"
-							/>
-						</td>
-					</tr>
+							class="is-danger"
+							icon="trash-alt"
+						/>
+					</td>
+				</tr>
 				</tbody>
 			</table>
 		</div>
@ -237,7 +207,7 @@ import {useConfigStore} from '@/stores/config'
 const props = defineProps({
 	projectId: {
 		default: 0,
-		required: false,
+		required: true,
 	},
 })

--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@ -10,119 +10,108 @@
 					:class="{ 'is-loading': searchService.loading }"
 				>
 					<Multiselect
-						v-model="sharable"
 						:loading="searchService.loading"
 						:placeholder="$t('misc.searchPlaceholder')"
+						@search="find"
 						:search-results="found"
 						:label="searchLabel"
-						@search="find"
+						v-model="sharable"
 					/>
 				</p>
 				<p class="control">
-					<x-button @click="add()">
-						{{ $t('project.share.share') }}
-					</x-button>
+					<x-button @click="add()">{{ $t('project.share.share') }}</x-button>
 				</p>
 			</div>
 		</div>

-		<table
-			v-if="sharables.length > 0"
-			class="table has-actions is-striped is-hoverable is-fullwidth mb-4"
-		>
+		<table class="table has-actions is-striped is-hoverable is-fullwidth mb-4" v-if="sharables.length > 0">
 			<tbody>
-				<tr
-					v-for="s in sharables"
-					:key="s.id"
-				>
-					<template v-if="shareType === 'user'">
-						<td>{{ getDisplayName(s) }}</td>
-						<td>
-							<template v-if="s.id === userInfo.id">
-								<b class="is-success">{{ $t('project.share.userTeam.you') }}</b>
-							</template>
-						</td>
-					</template>
-					<template v-if="shareType === 'team'">
-						<td>
-							<router-link
-								:to="{
+			<tr :key="s.id" v-for="s in sharables">
+				<template v-if="shareType === 'user'">
+					<td>{{ getDisplayName(s) }}</td>
+					<td>
+						<template v-if="s.id === userInfo.id">
+							<b class="is-success">{{ $t('project.share.userTeam.you') }}</b>
+						</template>
+					</td>
+				</template>
+				<template v-if="shareType === 'team'">
+					<td>
+						<router-link
+							:to="{
 									name: 'teams.edit',
 									params: { id: s.id },
 								}"
-							>
-								{{ s.name }}
-							</router-link>
-						</td>
-					</template>
-					<td class="type">
-						<template v-if="s.right === RIGHTS.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock" />
-							</span>
-							{{ $t('project.share.right.admin') }}
-						</template>
-						<template v-else-if="s.right === RIGHTS.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen" />
-							</span>
-							{{ $t('project.share.right.readWrite') }}
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users" />
-							</span>
-							{{ $t('project.share.right.read') }}
-						</template>
+						>
+							{{ s.name }}
+						</router-link>
 					</td>
-					<td
-						v-if="userIsAdmin"
-						class="actions"
-					>
-						<div class="select">
-							<select
-								v-model="selectedRight[s.id]"
-								class="mr-2"
-								@change="toggleType(s)"
+				</template>
+				<td class="type">
+					<template v-if="s.right === RIGHTS.ADMIN">
+							<span class="icon is-small">
+								<icon icon="lock"/>
+							</span>
+						{{ $t('project.share.right.admin') }}
+					</template>
+					<template v-else-if="s.right === RIGHTS.READ_WRITE">
+							<span class="icon is-small">
+								<icon icon="pen"/>
+							</span>
+						{{ $t('project.share.right.readWrite') }}
+					</template>
+					<template v-else>
+							<span class="icon is-small">
+								<icon icon="users"/>
+							</span>
+						{{ $t('project.share.right.read') }}
+					</template>
+				</td>
+				<td class="actions" v-if="userIsAdmin">
+					<div class="select">
+						<select
+							@change="toggleType(s)"
+							class="mr-2"
+							v-model="selectedRight[s.id]"
+						>
+							<option
+								:selected="s.right === RIGHTS.READ"
+								:value="RIGHTS.READ"
 							>
-								<option
-									:selected="s.right === RIGHTS.READ"
-									:value="RIGHTS.READ"
-								>
-									{{ $t('project.share.right.read') }}
-								</option>
-								<option
-									:selected="s.right === RIGHTS.READ_WRITE"
-									:value="RIGHTS.READ_WRITE"
-								>
-									{{ $t('project.share.right.readWrite') }}
-								</option>
-								<option
-									:selected="s.right === RIGHTS.ADMIN"
-									:value="RIGHTS.ADMIN"
-								>
-									{{ $t('project.share.right.admin') }}
-								</option>
-							</select>
-						</div>
-						<x-button
-							class="is-danger"
-							icon="trash-alt"
-							@click="
+								{{ $t('project.share.right.read') }}
+							</option>
+							<option
+								:selected="s.right === RIGHTS.READ_WRITE"
+								:value="RIGHTS.READ_WRITE"
+							>
+								{{ $t('project.share.right.readWrite') }}
+							</option>
+							<option
+								:selected="s.right === RIGHTS.ADMIN"
+								:value="RIGHTS.ADMIN"
+							>
+								{{ $t('project.share.right.admin') }}
+							</option>
+						</select>
+					</div>
+					<x-button
+						@click="
 								() => {
 									sharable = s
 									showDeleteModal = true
 								}
 							"
-						/>
-					</td>
-				</tr>
+						class="is-danger"
+						icon="trash-alt"
+					/>
+				</td>
+			</tr>
 			</tbody>
 		</table>

-		<Nothing v-else>
+		<nothing v-else>
 			{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
-		</Nothing>
+		</nothing>

 		<modal
 			:enabled="showDeleteModal"
@ -131,8 +120,8 @@
 		>
 			<template #header>
 				<span>{{
-					$t('project.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
-				}}</span>
+						$t('project.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
+					}}</span>
 			</template>
 			<template #text>
 				<p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
@ -142,7 +131,7 @@
 </template>

 <script lang="ts">
-export default {name: 'UserTeamShare'}
+export default {name: 'userTeamShare'}
 </script>

 <script setup lang="ts">
--- a/src/components/tasks/GanttChart.vue
+++ b/src/components/tasks/GanttChart.vue
@ -3,11 +3,7 @@
 		v-if="props.isLoading && !ganttBars.length || dayjsLanguageLoading"
 		class="gantt-container"
 	/>
-	<div
-		v-else
-		ref="ganttContainer"
-		class="gantt-container"
-	>
+	<div ref="ganttContainer" class="gantt-container" v-else>
 		<GGanttChart
 			:date-format="DAYJS_ISO_DATE_FORMAT"
 			:chart-start="isoToKebabDate(filters.dateFrom)"
@ -16,9 +12,9 @@
 			bar-start="startDate"
 			bar-end="endDate"
 			:grid="true"
+			@dragend-bar="updateGanttTask"
+			@dblclick-bar="openTask"
 			:width="ganttChartWidth"
-			@dragendBar="updateGanttTask"
-			@dblclickBar="openTask"
 		>
 			<template #timeunit="{value, date}">
 				<div
@ -65,8 +61,6 @@ import {
 import Loading from '@/components/misc/loading.vue'
 import {MILLISECONDS_A_DAY} from '@/constants/date'
 import {useWeekDayFromDate} from '@/helpers/time/formatDate'
-import dayjs from 'dayjs'
-import {useDayjsLanguageSync} from '@/i18n/useDayjsLanguageSync'

 export interface GanttChartProps {
 	isLoading: boolean,
@ -76,19 +70,19 @@ export interface GanttChartProps {
 	defaultTaskEndDate: DateISO
 }

+const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
+
 const props = defineProps<GanttChartProps>()

 const emit = defineEmits<{
  (e: 'update:task', task: ITaskPartialWithId): void
 }>()

-const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
-
 const {tasks, filters} = toRefs(props)

 // setup dayjs for vue-ganttastic
-// const dayjsLanguageLoading = ref(false)
-const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
+const dayjsLanguageLoading = ref(false)
+// const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
 extendDayjs()

 const ganttContainer = ref(null)
@ -127,23 +121,6 @@ watch(

 function transformTaskToGanttBar(t: ITask) {
 	const black = 'var(--grey-800)'
-	
-	const taskColor = getHexColor(t.hexColor)
-	
-	let textColor = black
-	let backgroundColor = 'var(--grey-100)'
-	if(t.startDate) {
-		backgroundColor = taskColor ?? ''
-		if(typeof taskColor === 'undefined') {
-			textColor = 'white'
-			backgroundColor = 'var(--primary)'
-		} else if(colorIsDark(taskColor)) {
-			textColor = black
-		} else {
-			textColor = 'white'
-		}
-	}
-	
 	return [{
 		startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
 		endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
@ -152,8 +129,8 @@ function transformTaskToGanttBar(t: ITask) {
 			label: t.title,
 			hasHandles: true,
 			style: {
-				color: textColor,
-				backgroundColor,
+				color: t.startDate ? (colorIsDark(getHexColor(t.hexColor)) ? black : 'white') : black,
+				backgroundColor: t.startDate ? getHexColor(t.hexColor) : 'var(--grey-100)',
 				border: t.startDate ? '' : '2px dashed var(--grey-300)',
 				'text-decoration': t.done ? 'line-through' : null,
 			},
--- a/src/components/tasks/TaskForm.vue
+++ b/src/components/tasks/TaskForm.vue
@ -1,24 +1,20 @@
 <template>
 	<form
-		class="add-new-task"
 		@submit.prevent="createTask"
+		class="add-new-task"
 	>
 		<CustomTransition name="width">
 			<input
 				v-if="newTaskFieldActive"
-				ref="newTaskTitleField"
 				v-model="newTaskTitle"
-				class="input"
-				type="text"
 				@blur="hideCreateNewTask"
 				@keyup.esc="newTaskFieldActive = false"
-			>
+				class="input"
+				ref="newTaskTitleField"
+				type="text"
+			/>
 		</CustomTransition>
-		<x-button
-			:shadow="false"
-			icon="plus"
-			@click="showCreateTaskOrCreate"
-		>
+		<x-button @click="showCreateTaskOrCreate" :shadow="false" icon="plus">
 			{{ $t('task.new') }}
 		</x-button>
 	</form>
@ -31,7 +27,7 @@ import type {ITask} from '@/modelTypes/ITask'
 import CustomTransition from '@/components/misc/CustomTransition.vue'

 const emit = defineEmits<{
-	(e: 'createTask', title: string): Promise<ITask>
+	(e: 'create-task', title: string): Promise<ITask>
 }>()

 const newTaskFieldActive = ref(false)
@ -60,7 +56,7 @@ async function createTask() {
 	if (!newTaskFieldActive.value) {
 		return
 	}
-	await emit('createTask', newTaskTitle.value)
+	await emit('create-task', newTaskTitle.value)
 	newTaskTitle.value = ''
 	hideCreateNewTask()
 }
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@ -1,34 +1,31 @@
 <template>
-	<div
-		ref="taskAdd"
-		class="task-add"
-	>
+	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left has-icons-right is-expanded">
 				<textarea
-					ref="newTaskInput"
-					v-model="newTaskTitle"
-					v-focus
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('project.list.addPlaceholder')"
 					rows="1"
+					v-focus
+					v-model="newTaskTitle"
+					ref="newTaskInput"
 					@keyup="resetEmptyTitleError"
 					@keydown.enter="handleEnter"
 				/>
 				<span class="icon is-small is-left">
-					<icon icon="tasks" />
+					<icon icon="tasks"/>
 				</span>
-				<QuickAddMagic :highlight-hint-icon="taskAddHovered" />
+				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
 			</p>
 			<p class="control">
 				<x-button
 					class="add-task-button"
 					:disabled="newTaskTitle === '' || loading || undefined"
+					@click="addTask()"
 					icon="plus"
 					:loading="loading"
 					:aria-label="$t('project.list.add')"
-					@click="addTask()"
 				>
 					<span class="button-text">
 						{{ $t('project.list.add') }}
@ -37,10 +34,7 @@
 			</p>
 		</div>
 		<Expandable :open="errorMessage !== ''">
-			<p
-				v-if="errorMessage !== ''"
-				class="pt-3 mt-0 help is-danger"
-			>
+			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
 		</Expandable>
@ -155,15 +149,13 @@ async function addTask() {
 		await Promise.all(newTasks)

 		const taskRelationService = new TaskRelationService()
-		const allParentTasks = tasksToCreate.filter(t => t.parent !== null).map(t => t.parent)
 		const relations = tasksToCreate.map(async t => {
 			const createdTask = createdTasks[t.title]
 			if (typeof createdTask === 'undefined') {
 				return
 			}

-			const isParent = allParentTasks.includes(t.title)
-			if (t.parent === null && !isParent) {
+			if (t.parent === null) {
 				emit('taskAdded', createdTask)
 				return
 			}
@ -179,19 +171,10 @@ async function addTask() {
 				relationKind: RELATION_KIND.PARENTTASK,
 			}))

-			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [{
-				...createdParentTask,
-				relatedTasks: {}, // To avoid endless references
-			}]
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
 			// we're only emitting here so that the relation shows up in the project
 			emit('taskAdded', createdTask)

-			createdParentTask.relatedTasks[RELATION_KIND.SUBTASK] = [{
-				...createdTask,
-				relatedTasks: {}, // To avoid endless references
-			}]
-			emit('taskAdded', createdParentTask)
-
 			return rel
 		})
 		await Promise.all(relations)
--- a/src/components/tasks/partials/assigneeList.vue
+++ b/src/components/tasks/partials/assigneeList.vue
@ -22,29 +22,26 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 </script>

 <template>
-	<div
-		class="assignees-list"
-		:class="{'is-inline': inline}"
-	>
+	<div class="assignees-list" :class="{'is-inline': inline}">
 		<span
 			v-for="user in assignees"
-			:key="user.id"
 			class="assignee"
+			:key="user.id"
 		>
 			<User
 				:key="'user'+user.id"
 				:avatar-size="avatarSize"
 				:show-username="false"
 				:user="user"
-				:class="{'m-2': hasDelete}"
+				:class="{'m-2': hasDelete, 'mr-3': !hasDelete}"
 			/>
 			<BaseButton
-				v-if="hasDelete"
 				:key="'delete'+user.id"
-				class="remove-assignee"
+				v-if="hasDelete"
 				@click="remove(user)"
+				class="remove-assignee"
 			>
-				<icon icon="times" />
+				<icon icon="times"/>
 			</BaseButton>
 		</span>
 	</div>
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@ -2,38 +2,37 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="paperclip" />
+				<icon icon="paperclip"/>
 			</span>
 			{{ $t('task.attachment.title') }}
 		</h3>

 		<input
 			v-if="editEnabled"
-			id="files"
-			ref="filesRef"
 			:disabled="loading || undefined"
-			multiple
-			type="file"
 			@change="uploadNewAttachment()"
-		>
-
-		<ProgressBar
-			v-if="attachmentService.uploadProgress > 0"
-			:value="attachmentService.uploadProgress * 100"
-			is-primary
+			id="files"
+			multiple
+			ref="filesRef"
+			type="file"
 		/>
-
-		<div
-			v-if="attachments.length > 0"
-			class="files"
+		<progress
+			v-if="attachmentService.uploadProgress > 0"
+			:value="attachmentService.uploadProgress"
+			class="progress is-primary"
+			max="100"
 		>
+			{{ attachmentService.uploadProgress }}%
+		</progress>
+
+		<div class="files" v-if="attachments.length > 0">
 			<!-- FIXME: don't use a for element that wraps other links / buttons
 				Instead: overlay element with button that is inside.
 			-->
 			<a
+				class="attachment"
 				v-for="a in attachments"
 				:key="a.id"
-				class="attachment"
 				@click="viewOrDownload(a)"
 			>
 				<div class="filename">
@ -47,10 +46,7 @@
 				</div>
 				<div class="info">
 					<p class="attachment-info-meta">
-						<i18n-t
-							keypath="task.attachment.createdBy"
-							scope="global"
-						>
+						<i18n-t keypath="task.attachment.createdBy" scope="global">
 							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
@ -69,24 +65,24 @@
 					</p>
 					<p>
 						<BaseButton
-							v-tooltip="$t('task.attachment.downloadTooltip')"
 							class="attachment-info-meta-button"
 							@click.prevent.stop="downloadAttachment(a)"
+							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
 							{{ $t('misc.download') }}
 						</BaseButton>
 						<BaseButton
-							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 							class="attachment-info-meta-button"
 							@click.stop="copyUrl(a)"
+							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 						>
 							{{ $t('task.attachment.copyUrl') }}
 						</BaseButton>
 						<BaseButton
 							v-if="editEnabled"
-							v-tooltip="$t('task.attachment.deleteTooltip')"
 							class="attachment-info-meta-button"
 							@click.prevent.stop="setAttachmentToDelete(a)"
+							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
 						</BaseButton>
@ -109,11 +105,11 @@
 		<x-button
 			v-if="editEnabled"
 			:disabled="loading"
+			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
 			variant="secondary"
 			:shadow="false"
-			@click="filesRef?.click()"
 		>
 			{{ $t('task.attachment.upload') }}
 		</x-button>
@ -121,17 +117,15 @@
 		<!-- Dropzone -->
 		<Teleport to="body">
 			<div
-				v-if="editEnabled"
 				:class="{ hidden: !isOverDropZone }"
 				class="dropzone"
+				v-if="editEnabled"
 			>
 				<div class="drop-hint">
 					<div class="icon">
-						<icon icon="cloud-upload-alt" />
-					</div>
-					<div class="hint">
-						{{ $t('task.attachment.drop') }}
+						<icon icon="cloud-upload-alt"/>
 					</div>
+					<div class="hint">{{ $t('task.attachment.drop') }}</div>
 				</div>
 			</div>
 		</Teleport>
@ -148,7 +142,7 @@

 			<template #text>
 				<p>
-					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br>
+					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
@ -159,10 +153,7 @@
 			:enabled="attachmentImageBlobUrl !== null"
 			@close="attachmentImageBlobUrl = null"
 		>
-			<img
-				:src="attachmentImageBlobUrl"
-				alt=""
-			>
+			<img :src="attachmentImageBlobUrl" alt=""/>
 		</modal>
 	</div>
 </template>
@ -172,7 +163,6 @@ import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'

 import User from '@/components/misc/user.vue'
-import ProgressBar from '@/components/misc/ProgressBar.vue'
 import BaseButton from '@/components/base/BaseButton.vue'

 import AttachmentService from '@/services/attachment'
@ -189,6 +179,9 @@ import {error, success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 import {useI18n} from 'vue-i18n'

+const taskStore = useTaskStore()
+const {t} = useI18n({useScope: 'global'})
+
 const {
 	task,
 	editEnabled = true,
@ -196,10 +189,9 @@ const {
 	task: ITask,
 	editEnabled: boolean,
 }>()
+
 // FIXME: this should go through the store
-const emit = defineEmits(['taskChanged'])
-const taskStore = useTaskStore()
-const {t} = useI18n({useScope: 'global'})
+const emit = defineEmits(['task-changed'])

 const attachmentService = shallowReactive(new AttachmentService())

@ -275,7 +267,7 @@ function copyUrl(attachment: IAttachment) {

 async function setCoverImage(attachment: IAttachment | null) {
 	const updatedTask = await taskStore.setCoverImage(task, attachment)
-	emit('taskChanged', updatedTask)
+	emit('task-changed', updatedTask)
 	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@ -1,29 +1,9 @@
 <template>
-	<span
-		v-if="checklist.total > 0"
-		class="checklist-summary"
-	>
-		<svg
-			width="12"
-			height="12"
-		>
-			<circle
-				stroke-width="2"
-				fill="transparent"
-				cx="50%"
-				cy="50%"
-				r="5"
-			/>
-			<circle
-				stroke-width="2"
-				stroke-dasharray="31"
-				:stroke-dashoffset="checklistCircleDone"
-				stroke-linecap="round"
-				fill="transparent"
-				cx="50%"
-				cy="50%"
-				r="5"
-			/>
+	<span v-if="checklist.total > 0" class="checklist-summary">
+		<svg width="12" height="12">
+			<circle stroke-width="2" fill="transparent" cx="50%" cy="50%" r="5"></circle>
+			<circle stroke-width="2" stroke-dasharray="31" :stroke-dashoffset="checklistCircleDone"
+					stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="5"></circle>
 		</svg>
 		<span>{{ label }}</span>
 	</span>
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@ -1,30 +1,20 @@
 <template>
-	<div
-		v-if="enabled"
-		class="content details"
-	>
-		<h3
-			v-if="canWrite || comments.length > 0"
-			:class="{'d-print-none': comments.length === 0}"
-		>
+	<div class="content details" v-if="enabled">
+		<h3 v-if="canWrite || comments.length > 0" :class="{'d-print-none': comments.length === 0}">
 			<span class="icon is-grey">
-				<icon :icon="['far', 'comments']" />
+				<icon :icon="['far', 'comments']"/>
 			</span>
 			{{ $t('task.comment.title') }}
 		</h3>
 		<div class="comments">
 			<span
-				v-if="taskCommentService.loading && saving === null && !creating"
 				class="is-inline-flex is-align-items-center"
+				v-if="taskCommentService.loading && saving === null && !creating"
 			>
-				<span class="loader is-inline-block mr-2" />
+				<span class="loader is-inline-block mr-2"></span>
 				{{ $t('task.comment.loading') }}
 			</span>
-			<div
-				v-for="c in comments"
-				:key="c.id"
-				class="media comment"
-			>
+			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
 					<img
 						:src="getAvatarUrl(c.author, 48)"
@ -32,7 +22,7 @@
 						class="image is-avatar"
 						height="48"
 						width="48"
-					>
+					/>
 				</figure>
 				<div class="media-content">
 					<div class="comment-info">
@ -42,12 +32,9 @@
 							class="image is-avatar d-print-none"
 							height="20"
 							width="20"
-						>
+						/>
 						<strong>{{ getDisplayName(c.author) }}</strong>&nbsp;
-						<span
-							v-tooltip="formatDateLong(c.created)"
-							class="has-text-grey"
-						>
+						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
 						<span
@ -58,35 +45,32 @@
 						</span>
 						<CustomTransition name="fade">
 							<span
+								class="is-inline-flex"
 								v-if="
 									taskCommentService.loading &&
-										saving === c.id
+									saving === c.id
 								"
-								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block mr-2" />
+								<span class="loader is-inline-block mr-2"></span>
 								{{ $t('misc.saving') }}
 							</span>
 							<span
+								class="has-text-success"
 								v-else-if="
 									!taskCommentService.loading &&
-										saved === c.id
+									saved === c.id
 								"
-								class="has-text-success"
 							>
 								{{ $t('misc.saved') }}
 							</span>
 						</CustomTransition>
 					</div>
-					<Editor
-						v-model="c.comment"
+					<editor
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						:bottom-actions="actions[c.id]"
-						:show-save="true"
-						initial-mode="preview"
-						@update:modelValue="
+						v-model="c.comment"
+						@update:model-value="
 							() => {
 								toggleEdit(c)
 								editCommentWithDelay()
@ -96,13 +80,13 @@
 							toggleEdit(c)
 							editComment()
 						}"
+						:bottom-actions="actions[c.id]"
+						:show-save="true"
+						initial-mode="preview"
 					/>
 				</div>
 			</div>
-			<div
-				v-if="canWrite"
-				class="media comment d-print-none"
-			>
+			<div class="media comment d-print-none" v-if="canWrite">
 				<figure class="media-left is-hidden-mobile">
 					<img
 						:src="userAvatar"
@ -110,7 +94,7 @@
 						class="image is-avatar"
 						height="48"
 						width="48"
-					>
+					/>
 				</figure>
 				<div class="media-content">
 					<div class="form">
@ -119,14 +103,12 @@
 								v-if="taskCommentService.loading && creating"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block mr-2" />
+								<span class="loader is-inline-block mr-2"></span>
 								{{ $t('task.comment.creating') }}
 							</span>
 						</CustomTransition>
 						<div class="field">
-							<Editor
-								v-if="editorActive"
-								v-model="newComment.comment"
+							<editor
 								:class="{
 									'is-loading':
 										taskCommentService.loading &&
@ -135,6 +117,8 @@
 								:upload-callback="attachmentUpload"
 								:upload-enabled="true"
 								:placeholder="$t('task.comment.placeholder')"
+								v-if="editorActive"
+								v-model="newComment.comment"
 								@save="addComment()"
 							/>
 						</div>
@ -157,13 +141,11 @@
 			@close="showDeleteModal = false"
 			@submit="() => deleteComment(commentToDelete)"
 		>
-			<template #header>
-				<span>{{ $t('task.comment.delete') }}</span>
-			</template>
+			<template #header><span>{{ $t('task.comment.delete') }}</span></template>

 			<template #text>
 				<p>
-					{{ $t('task.comment.deleteText1') }}<br>
+					{{ $t('task.comment.deleteText1') }}<br/>
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
@ -236,19 +218,13 @@ const actions = computed(() => {
 	])))
 })

-async function attachmentUpload(files: File[] | FileList): (Promise<string[]>) {
-
-	const uploadPromises: Promise<string>[] = []
-
-	files.forEach((file: File) => {
-		const promise = new Promise<string>((resolve) => {
-			uploadFile(props.taskId, file, (uploadedFileUrl: string) => resolve(uploadedFileUrl))
-		})
-
-		uploadPromises.push(promise)
-	})
-
-	return await Promise.all(uploadPromises)
+function attachmentUpload(
+	file: File,
+	onSuccess: (url: string) => void,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	onError: (error: string) => void,
+) {
+	return uploadFile(props.taskId, file, onSuccess)
 }

 const taskCommentService = shallowReactive(new TaskCommentService())
@ -323,7 +299,7 @@ async function editComment() {
 	if (commentEdit.comment === '') {
 		return
 	}
-
+	
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)
 	}
@ -392,7 +368,7 @@ async function deleteComment(commentToDelete: ITaskComment) {
 }

 .image.is-avatar {
-	border-radius: 100%;
+  border-radius: 100%;
 }

 .media-content {
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@ -1,42 +1,24 @@
 <template>
 	<p class="created">
-		<time
-			v-tooltip="formatDateLong(task.created)"
-			:datetime="formatISO(task.created)"
-		>
-			<i18n-t
-				keypath="task.detail.created"
-				scope="global"
-			>
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
+			<i18n-t keypath="task.detail.created" scope="global">
 				<span>{{ formatDateSince(task.created) }}</span>
 				{{ getDisplayName(task.createdBy) }}
 			</i18n-t>
 		</time>
 		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
-			<br>
+			<br/>
 			<!-- Computed properties to show the actual date every time it gets updated -->
-			<time
-				v-tooltip="updatedFormatted"
-				:datetime="formatISO(task.updated)"
-			>
-				<i18n-t
-					keypath="task.detail.updated"
-					scope="global"
-				>
+			<time :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
+				<i18n-t keypath="task.detail.updated" scope="global">
 					<span>{{ updatedSince }}</span>
 				</i18n-t>
 			</time>
 		</template>
 		<template v-if="task.done">
-			<br>
-			<time
-				v-tooltip="doneFormatted"
-				:datetime="formatISO(task.doneAt)"
-			>
-				<i18n-t
-					keypath="task.detail.doneAt"
-					scope="global"
-				>
+			<br/>
+			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
+				<i18n-t keypath="task.detail.doneAt" scope="global">
 					<span>{{ doneSince }}</span>
 				</i18n-t>
 			</time>
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@ -6,33 +6,33 @@
 		<label class="label">{{ $t('task.deferDueDate.title') }}</label>
 		<div class="defer-days">
 			<x-button
+				@click.prevent.stop="() => deferDays(1)"
 				:shadow="false"
 				variant="secondary"
-				@click.prevent.stop="() => deferDays(1)"
 			>
 				{{ $t('task.deferDueDate.1day') }}
 			</x-button>
 			<x-button
+				@click.prevent.stop="() => deferDays(3)"
 				:shadow="false"
 				variant="secondary"
-				@click.prevent.stop="() => deferDays(3)"
 			>
 				{{ $t('task.deferDueDate.3days') }}
 			</x-button>
 			<x-button
+				@click.prevent.stop="() => deferDays(7)"
 				:shadow="false"
 				variant="secondary"
-				@click.prevent.stop="() => deferDays(7)"
 			>
 				{{ $t('task.deferDueDate.1week') }}
 			</x-button>
 		</div>
 		<flat-pickr
-			v-model="dueDate"
 			:class="{ disabled: taskService.loading }"
 			:config="flatPickerConfig"
 			:disabled="taskService.loading || undefined"
 			class="input"
+			v-model="dueDate"
 		/>
 	</div>
 </template>
@ -44,7 +44,7 @@ import flatPickr from 'vue-flatpickr-component'

 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {useAuthStore} from '@/stores/auth'

 const {
 	modelValue,
@ -55,6 +55,7 @@ const {
 const emit = defineEmits(['update:modelValue'])

 const {t} = useI18n({useScope: 'global'})
+const authStore = useAuthStore()

 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@ -101,7 +102,9 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: {
+		firstDayOfWeek: authStore.settings.weekStart,
+	},
 }))

 function deferDays(days: number) {
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@ -2,36 +2,30 @@
 	<div>
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="align-left" />
+				<icon icon="align-left"/>
 			</span>
 			{{ $t('task.attributes.description') }}
 			<CustomTransition name="fade">
-				<span
-					v-if="loading && saving"
-					class="is-small is-inline-flex"
-				>
-					<span class="loader is-inline-block mr-2" />
+				<span class="is-small is-inline-flex" v-if="loading && saving">
+					<span class="loader is-inline-block mr-2"></span>
 					{{ $t('misc.saving') }}
 				</span>
-				<span
-					v-else-if="!loading && saved"
-					class="is-small has-text-success"
-				>
-					<icon icon="check" />
+				<span class="is-small has-text-success" v-else-if="!loading && saved">
+					<icon icon="check"/>
 					{{ $t('misc.saved') }}
 				</span>
 			</CustomTransition>
 		</h3>
-		<Editor
-			v-model="description"
-			class="tiptap__task-description"
+		<editor
 			:is-edit-enabled="canWrite"
 			:upload-callback="uploadCallback"
 			:placeholder="$t('task.description.placeholder')"
 			:show-save="true"
 			edit-shortcut="e"
-			@update:modelValue="saveWithDelay"
+			v-model="description"
+			@update:model-value="saveWithDelay"
 			@save="save"
+			:initial-mode="isEditorContentEmpty(description) ? 'preview' : 'edit'"
 		/>
 	</div>
 </template>
@ -44,6 +38,7 @@ import Editor from '@/components/input/AsyncEditor'

 import type {ITask} from '@/modelTypes/ITask'
 import {useTaskStore} from '@/stores/tasks'
+import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'

 type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>

@ -128,10 +123,3 @@ async function uploadCallback(files: File[] | FileList): (Promise<string[]>) {
 }
 </script>

-<style lang="scss" scoped>
-.tiptap__task-description {
-	// The exact amount of pixels we need to make the description icon align with the buttons and the form inside the editor.
-	// The icon is not exactly the same length on all sides so we need to hack our way around it.
-	margin-left: 4px;
-}
-</style>
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@ -1,31 +1,21 @@
 <template>
 	<Multiselect
-		v-model="assignees"
-		class="edit-assignees"
-		:class="{'has-assignees': assignees.length > 0}"
 		:loading="projectUserService.loading"
 		:placeholder="$t('task.assignee.placeholder')"
 		:multiple="true"
+		@search="findUser"
 		:search-results="foundUsers"
+		@select="addAssignee"
 		label="name"
 		:select-placeholder="$t('task.assignee.selectPlaceholder')"
+		v-model="assignees"
 		:autocomplete-enabled="false"
-		@search="findUser"
-		@select="addAssignee"
 	>
 		<template #items="{items}">
-			<AssigneeList
-				:assignees="items"
-				:remove="removeAssignee"
-				:disabled="disabled"
-			/>
+			<assignee-list :assignees="items" :remove="removeAssignee"/>
 		</template>
 		<template #searchResult="{option: user}">
-			<User
-				:avatar-size="24"
-				:show-username="true"
-				:user="user"
-			/>
+			<user :avatar-size="24" :show-username="true" :user="user"/>
 		</template>
 	</Multiselect>
 </template>
@ -125,9 +115,3 @@ async function findUser(query: string) {
 		})
 }
 </script>
-
-<style lang="scss">
-.edit-assignees.has-assignees.multiselect .input {
-	padding-left: 0;
-}
-</style>
--- a/Show More
+++ b/Show More
 @ -1 +1 @@
 .11.0
 .9.0