diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4b4d703ea..f8c9d46f6 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -19,7 +19,7 @@ module.exports = {
 		'semi': ['error', 'never'],
 
 		'vue/v-on-event-hyphenation': ['warn', 'never', { 'autofix': true }],
-		'vue/multi-word-component-names': 'warn',
+		'vue/multi-word-component-names': 'off',
 
 		// uncategorized rules:
 		'vue/component-api-style': ['error', ['script-setup']],
@@ -43,6 +43,7 @@ module.exports = {
 		'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',
diff --git a/cypress.config.ts b/cypress.config.js
similarity index 100%
rename from cypress.config.ts
rename to cypress.config.js
diff --git a/eslint.config_bac.js b/eslint.config_bac.js
deleted file mode 100644
index 2dc445c5a..000000000
--- a/eslint.config_bac.js
+++ /dev/null
@@ -1,122 +0,0 @@
-// import originalEslintPluginVue from 'eslint-plugin-vue'
-import vueTsRecommended from '@vue/eslint-config-typescript/recommended.js'
-// import vueParser from 'vue-eslint-parser'
-import tsParser from "@typescript-eslint/parser"
-
-const vue3Recommended = vue.configs['vue3-recommended']
-
-import {default as originalVuePlugin} from "eslint-plugin-vue";
-
-// see https://github.com/eslint/eslint/issues/16875#issuecomment-1426594123
-const eslintPluginVue = {
-	...originalVuePlugin,
-	parsers: {
-  	'parser': {
-			parseForESLint: originalVuePlugin.parseForESLint
-		}
-	}
-}
-
-// export default [{
-//   files:   ["**/*.json", "**/*.jsonc", "**/*.json5"],
-//   plugins: {
-//     vue: { ...vue, parsers}
-//     /* same as
-//     jsonc: {
-//       parsers: {
-//         'jsonc-eslint-parser': {
-//           parseForESLint
-//         }
-//       }
-//     } */
-//   },
-//   languageOptions: {
-//      parser: 'vue/vue-eslint-parser'
-//   },
-//   rules: {...}
-// }];
-
-export default [
-	// 'eslint:recommended',
-	{
-		files:   ["**/*.vue"],
-		plugins: {
-			vue: eslintPluginVue,
-		},
-		languageOptions: {
-			parser: 'vue/parser'
-	 },
-	},
-	// {
-	// 	plugins: {
-	// 		// vue: vue3Recommended,
-	// 		// '@typescript-eslint': vueTsRecommended,
-	// 	},
-	// 	languageOptions: {
-	// 		// parser: eslintPluginVue,
-	// 		// parser: 'vue/vue-eslint-parser',
-	// 		parserOptions: {
-	// 			parser: '@typescript-eslint/parser',
-	// 			// 'ecmaVersion': 2022,
-	// 			// 'sourceType': 'module',
-	// 		},
-	// 	}
-	// }
-	// {
-	// 	files: ["./src/**/*.vue"],
-	// 	// files: ["./src/**/*.js"],
-	// 	// ignores: ["**/*.config.js"],
-	// 	rules: {
-	// 			semi: "error"
-	// 	},
-	// 	plugins: {
-	// 		vue: vue3Recommended,
-	// 		// '@typescript-eslint': vueTsRecommended,
-	// 	},
-	// },
-	// {
-	// 	files: ["src/**/*.vue"],
-	// 	// files: [
-	// 	// 	'src/**/*.vue',
-	// 	// 	'src/**/*.js',
-	// 	// 	'src/**/*.ts',
-	// 	// 	// 'src/**/*.+(vue|js|ts)',
-	// 	// ],
-	// 	ignores: [
-	// 		'*.test.*',
-	// 		'cypress/*',
-	// 	],
-	// 	plugins: {
-	// 		vue: vue3Recommended,
-	// 		'@typescript-eslint': vueTsRecommended,
-	// 	},
-	// 	rules: {
-	// 		'vue/html-quotes': ['error', 'double'],
-	// 		'quotes': ['error', 'single'],
-	// 		'comma-dangle': ['error', 'always-multiline'],
-	// 		'semi': ['error', 'never'],
-	// 		'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,
-	// 	},
-	// 	// overwrite the following with correct values
-	// 	// eslint-plugin-vue/lib/configs/base.js
-
-	// 	// parser: 
-	// 	parserOptions: {
-	// 		ecmaVersion: 2022,
-
-
-	// 		'parser': '@typescript-eslint/parser',
-	// 		'sourceType': 'module',
-	// 	},
-	// 	globals: {
-	// 		'browser': true,
-	// 		'es2022': true,
-	// 		'node': true,
-	// 		'vue/setup-compiler-macros': true,
-	// 	}
-	// },
-]
\ No newline at end of file
diff --git a/package.json b/package.json
index 5c743af7b..21cb98b6a 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "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": "eslint --fix 'src/**/*.{js,ts,vue}' ",
+    "lint:fix": "pnpm run lint --fix",
     "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'",
diff --git a/src/App.vue b/src/App.vue
index 77d3dacf4..0c0c4093c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,23 @@
 <template>
-	<ready>
+	<Ready>
 		<template v-if="authUser">
-			<TheNavigation/>
-			<content-auth/>
+			<TheNavigation />
+			<ContentAuth />
 		</template>
-		<content-link-share v-else-if="authLinkShare"/>
-		<no-auth-wrapper v-else>
-			<router-view/>
-		</no-auth-wrapper>
+		<ContentLinkShare v-else-if="authLinkShare" />
+		<NoAuthWrapper v-else>
+			<router-view />
+		</NoAuthWrapper>
 		
-		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		<KeyboardShortcuts v-if="keyboardShortcutsActive" />
 		
 		<Teleport to="body">
-			<AddToHomeScreen/>
-			<UpdateNotification/>
-			<Notification/>
-			<DemoMode/>
+			<AddToHomeScreen />
+			<UpdateNotification />
+			<Notification />
+			<DemoMode />
 		</Teleport>
-	</ready>
+	</Ready>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/components/base/BaseButton.story.vue b/src/components/base/BaseButton.story.vue
index 9845aeb09..544f98597 100644
--- a/src/components/base/BaseButton.story.vue
+++ b/src/components/base/BaseButton.story.vue
@@ -21,10 +21,16 @@ 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!
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 140573c0d..4a742153f 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -6,38 +6,39 @@
 <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"
-		ref="button"
 	>
-		<slot/>
+		<slot />
 	</router-link>
-	<a v-else-if="href !== undefined"
+	<a
+		v-else-if="href !== undefined"
+		ref="button"
 		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>
 
diff --git a/src/components/base/BaseCheckbox.vue b/src/components/base/BaseCheckbox.vue
index af1064347..aa7778a11 100644
--- a/src/components/base/BaseCheckbox.vue
+++ b/src/components/base/BaseCheckbox.vue
@@ -1,17 +1,26 @@
 <template>
-	<div class="base-checkbox" v-cy="'checkbox'">
+	<div
+		v-cy="'checkbox'"
+		class="base-checkbox"
+	>
 		<input
-			type="checkbox"
 			:id="checkboxId"
+			type="checkbox"
 			class="is-sr-only"
 			:checked="modelValue"
-			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
 			:disabled="disabled || undefined"
-		/>
+			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+		>
 
-		<slot name="label" :checkboxId="checkboxId">
-			<label :for="checkboxId" class="base-checkbox__label">
-				<slot/>
+		<slot
+			name="label"
+			:checkbox-id="checkboxId"
+		>
+			<label
+				:for="checkboxId"
+				class="base-checkbox__label"
+			>
+				<slot />
 			</label>
 		</slot>
 	</div>
diff --git a/src/components/base/Expandable.vue b/src/components/base/Expandable.vue
index 8ac7b4d39..c1a1a84c7 100644
--- a/src/components/base/Expandable.vue
+++ b/src/components/base/Expandable.vue
@@ -1,27 +1,30 @@
 <template>
-  <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>
+	<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>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/date/datemathHelp.story.vue b/src/components/date/datemathHelp.story.vue
index cc3d858d1..c7c850ba1 100644
--- 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>
diff --git a/src/components/date/datemathHelp.vue b/src/components/date/datemathHelp.vue
index 2feaa3acd..5d5077bd0 100644
--- a/src/components/date/datemathHelp.vue
+++ b/src/components/date/datemathHelp.vue
@@ -7,21 +7,29 @@
 			{{ $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>
@@ -35,76 +43,79 @@
 		<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>
diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 919de8811..be9e70683 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -1,20 +1,31 @@
 <template>
 	<div class="datepicker-with-range-container">
-		<popup>
+		<Popup>
 			<template #trigger="{toggle}">
-				<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
+				<slot
+					name="trigger"
+					:toggle="toggle"
+					:button-text="buttonText"
+				/>
 			</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 @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
+						<BaseButton
+							:class="{'is-active': customRangeActive}"
+							@click="setDateRange(null)"
+						>
 							{{ $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>
@@ -23,10 +34,18 @@
 							{{ $t('input.datepickerRange.from') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="from"/>
+									<input
+										v-model="from"
+										class="input"
+										type="text"
+									>
 								</div>
 								<div class="control">
-									<x-button icon="calendar" variant="secondary" data-toggle/>
+									<x-button
+										icon="calendar"
+										variant="secondary"
+										data-toggle
+									/>
 								</div>
 							</div>
 						</label>
@@ -34,38 +53,49 @@
 							{{ $t('input.datepickerRange.to') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="to"/>
+									<input
+										v-model="to"
+										class="input"
+										type="text"
+									>
 								</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
-							:config="flatPickerConfig"
 							v-model="flatpickrRange"
+							:config="flatPickerConfig"
 						/>
 
 						<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>
 
@@ -83,15 +113,16 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
 import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
 
-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'})
+
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
diff --git a/src/components/home/AddToHomeScreen.vue b/src/components/home/AddToHomeScreen.vue
index b8b2db630..a09587729 100644
--- a/src/components/home/AddToHomeScreen.vue
+++ b/src/components/home/AddToHomeScreen.vue
@@ -4,12 +4,18 @@
 		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 @click="() => hideMessage = true" class="hide-button">
-			<icon icon="x"/>
+		<BaseButton
+			class="hide-button"
+			@click="() => hideMessage = true"
+		>
+			<icon icon="x" />
 		</BaseButton>
 	</div>
 </template>
diff --git a/src/components/home/DemoMode.vue b/src/components/home/DemoMode.vue
index bd993525d..0e7090863 100644
--- a/src/components/home/DemoMode.vue
+++ b/src/components/home/DemoMode.vue
@@ -17,8 +17,11 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 			{{ $t('demo.title') }}
 			<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
 		</p>
-		<BaseButton @click="() => hide = true" class="hide-button">
-			<icon icon="times"/>
+		<BaseButton
+			class="hide-button"
+			@click="() => hide = true"
+		>
+			<icon icon="times" />
 		</BaseButton>
 	</div>
 </template>
diff --git a/src/components/home/Logo.vue b/src/components/home/Logo.vue
index 10a1753a2..9e383b846 100644
--- a/src/components/home/Logo.vue
+++ b/src/components/home/Logo.vue
@@ -15,8 +15,17 @@ 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>
 
diff --git a/src/components/home/MenuButton.vue b/src/components/home/MenuButton.vue
index b221ec5b8..23019cfdf 100644
--- a/src/components/home/MenuButton.vue
+++ b/src/components/home/MenuButton.vue
@@ -1,11 +1,11 @@
 <template>
 	<BaseButton
-		class="menu-show-button"
-		@click="baseStore.toggleMenu()"
-		@shortkey="() => baseStore.toggleMenu()"
 		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()"
 	/>
 </template>
 
diff --git a/src/components/home/PoweredByLink.vue b/src/components/home/PoweredByLink.vue
index d8793f40b..3376c2f04 100644
--- a/src/components/home/PoweredByLink.vue
+++ b/src/components/home/PoweredByLink.vue
@@ -1,7 +1,11 @@
 <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">
diff --git a/src/components/home/ProjectsNavigation.vue b/src/components/home/ProjectsNavigation.vue
index 85e5c5a34..92dcfb7ed 100644
--- a/src/components/home/ProjectsNavigation.vue
+++ b/src/components/home/ProjectsNavigation.vue
@@ -2,10 +2,8 @@
 	<draggable
 		v-model="availableProjects"
 		animation="100"
-		ghostClass="ghost"
+		ghost-class="ghost"
 		group="projects"
-		@start="() => drag = true"
-		@end="saveProjectPosition"
 		handle=".handle"
 		tag="menu"
 		item-key="id"
@@ -19,6 +17,8 @@
 				{ 'dragging-disabled': !canEditOrder }
 			],
 		}"
+		@start="() => drag = true"
+		@end="saveProjectPosition"
 	>
 		<template #item="{element: project}">
 			<ProjectsNavigationItem
diff --git a/src/components/home/ProjectsNavigationItem.vue b/src/components/home/ProjectsNavigationItem.vue
index a2ae6ebe3..113dc5753 100644
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@@ -6,10 +6,13 @@
 		<div>
 			<BaseButton
 				v-if="canCollapse && childProjects?.length > 0"
-				@click="childProjectsOpen = !childProjectsOpen"
 				class="collapse-project-button"
+				@click="childProjectsOpen = !childProjectsOpen"
 			>
-				<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} }"
@@ -19,21 +22,27 @@
 				<span
 					v-if="!canCollapse || childProjects?.length === 0"
 					class="collapse-project-button-placeholder"
-				></span>
-				<div class="color-bubble-handle-wrapper" :class="{'is-draggable': project.id > 0}">
+				/>
+				<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="{'has-color-bubble': project.hexColor !== ''}"
 					>
-						<icon icon="grip-lines"/>
+						<icon icon="grip-lines" />
 					</span>
 				</div>
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@@ -44,7 +53,7 @@
 				: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
 				class="menu-list-dropdown"
@@ -52,8 +61,14 @@
 				: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>
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index ed2ebbf98..c133f5ddd 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -1,66 +1,110 @@
 <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>
 
-			<project-settings-dropdown v-if="canWriteCurrentProject && currentProject.id !== -1"
-				class="project-title-dropdown" :project="currentProject">
+			<ProjectSettingsDropdown
+				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>
-			</project-settings-dropdown>
+			</ProjectSettingsDropdown>
 		</div>
 
 		<div class="navbar-end">
-			<OpenQuickActions/>
+			<OpenQuickActions />
 			<Notifications />
-			<dropdown>
+			<Dropdown>
 				<template #trigger="{ toggleOpen, open }">
-					<BaseButton class="username-dropdown-trigger" @click="toggleOpen" variant="secondary" :shadow="false">
-						<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40" />
+					<BaseButton
+						class="username-dropdown-trigger"
+						variant="secondary"
+						:shadow="false"
+						@click="toggleOpen"
+					>
+						<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>
 
-				<dropdown-item :to="{ name: 'user.settings' }">
+				<DropdownItem :to="{ name: 'user.settings' }">
 					{{ $t('user.settings.title') }}
-				</dropdown-item>
-				<dropdown-item v-if="imprintUrl" :href="imprintUrl">
+				</DropdownItem>
+				<DropdownItem
+					v-if="imprintUrl"
+					:href="imprintUrl"
+				>
 					{{ $t('navigation.imprint') }}
-				</dropdown-item>
-				<dropdown-item v-if="privacyPolicyUrl" :href="privacyPolicyUrl">
+				</DropdownItem>
+				<DropdownItem
+					v-if="privacyPolicyUrl"
+					:href="privacyPolicyUrl"
+				>
 					{{ $t('navigation.privacy') }}
-				</dropdown-item>
-				<dropdown-item @click="baseStore.setKeyboardShortcutsActive(true)">
+				</DropdownItem>
+				<DropdownItem @click="baseStore.setKeyboardShortcutsActive(true)">
 					{{ $t('keyboardShortcuts.title') }}
-				</dropdown-item>
-				<dropdown-item :to="{ name: 'about' }">
+				</DropdownItem>
+				<DropdownItem :to="{ name: 'about' }">
 					{{ $t('about.title') }}
-				</dropdown-item>
-				<dropdown-item @click="authStore.logout()">
+				</DropdownItem>
+				<DropdownItem @click="authStore.logout()">
 					{{ $t('user.auth.logout') }}
-				</dropdown-item>
-			</dropdown>
+				</DropdownItem>
+			</Dropdown>
 		</div>
 	</header>
 </template>
diff --git a/src/components/home/UpdateNotification.vue b/src/components/home/UpdateNotification.vue
index 48b21016d..9bdb0ddc2 100644
--- a/src/components/home/UpdateNotification.vue
+++ b/src/components/home/UpdateNotification.vue
@@ -1,11 +1,16 @@
 <template>
-	<div class="update-notification" v-if="updateAvailable">
-		<p class="update-notification__message">{{ $t('update.available') }}</p>
+	<div
+		v-if="updateAvailable"
+		class="update-notification"
+	>
+		<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>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 540892e2c..c216663d9 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -2,10 +2,10 @@
 	<div class="content-auth">
 		<BaseButton
 			v-show="menuActive"
-			@click="baseStore.setMenuActive(false)"
 			class="menu-hide-button d-print-none"
+			@click="baseStore.setMenuActive(false)"
 		>
-			<icon icon="times"/>
+			<icon icon="times" />
 		</BaseButton>
 		<div
 			class="app-container"
@@ -15,8 +15,9 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"></div>
-			<navigation class="d-print-none"/>
+				:style="{'background-image': background && `url(${background})`}"
+			/>
+			<Navigation class="d-print-none" />
 			<main
 				class="app-content"
 				:class="[
@@ -26,33 +27,36 @@
 			>
 				<BaseButton
 					v-show="menuActive"
-					@click="baseStore.setMenuActive(false)"
 					class="mobile-overlay d-print-none"
+					@click="baseStore.setMenuActive(false)"
 				/>
 
-				<quick-actions/>
+				<QuickActions />
 
-				<router-view :route="routeWithModal" v-slot="{ Component }">
+				<router-view
+					v-slot="{ Component }"
+					:route="routeWithModal"
+				>
 					<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>
diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 451f725de..b21ee1ea5 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -6,16 +6,20 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo" v-if="logoVisible"/>
+				<Logo
+					v-if="logoVisible"
+					class="logo"
+				/>
 				<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>
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index dee4d12c4..6c4a90e7e 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -1,46 +1,70 @@
 <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 :to="{ name: 'home'}" v-shortcut="'g o'">
+					<router-link
+						v-shortcut="'g o'"
+						:to="{ name: 'home'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="calendar"/>
+							<icon icon="calendar" />
 						</span>
 						{{ $t('navigation.overview') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
+					<router-link
+						v-shortcut="'g u'"
+						:to="{ name: 'tasks.range'}"
+					>
 						<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 :to="{ name: 'projects.index'}" v-shortcut="'g p'">
+					<router-link
+						v-shortcut="'g p'"
+						:to="{ name: 'projects.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="layer-group"/>
+							<icon icon="layer-group" />
 						</span>
 						{{ $t('project.projects') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
+					<router-link
+						v-shortcut="'g a'"
+						:to="{ name: 'labels.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="tags"/>
+							<icon icon="tags" />
 						</span>
 						{{ $t('label.title') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
+					<router-link
+						v-shortcut="'g m'"
+						:to="{ name: 'teams.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="users"/>
+							<icon icon="users" />
 						</span>
 						{{ $t('team.title') }}
 					</router-link>
@@ -53,7 +77,10 @@
 			variant="small"
 		/>
 		<template v-else>
-			<nav class="menu" v-if="favoriteProjects">
+			<nav
+				v-if="favoriteProjects"
+				class="menu"
+			>
 				<ProjectsNavigation
 					:model-value="favoriteProjects" 
 					:can-edit-order="false"
@@ -61,7 +88,10 @@
 				/>
 			</nav>
 			
-			<nav class="menu" v-if="savedFilterProjects">
+			<nav
+				v-if="savedFilterProjects"
+				class="menu"
+			>
 				<ProjectsNavigation
 					:model-value="savedFilterProjects"
 					:can-edit-order="false"
@@ -79,7 +109,7 @@
 			</nav>
 		</template>
 
-		<PoweredByLink/>
+		<PoweredByLink />
 	</aside>
 </template>
 
diff --git a/src/components/input/Button.story.vue b/src/components/input/Button.story.vue
index a26c7f476..4841af848 100644
--- a/src/components/input/Button.story.vue
+++ b/src/components/input/Button.story.vue
@@ -6,19 +6,28 @@ import XButton from './button.vue'
 <template>
 	<Story :layout="{ type: 'grid', width: '200px' }">
 		<Variant title="primary">
-			<XButton @click="logEvent('Click', $event)" variant="primary">
+			<XButton
+				variant="primary"
+				@click="logEvent('Click', $event)"
+			>
 				Order pizza!
 			</XButton>
 		</Variant>
 
 		<Variant title="secondary">
-			<XButton @click="logEvent('Click', $event)" variant="secondary">
+			<XButton
+				variant="secondary"
+				@click="logEvent('Click', $event)"
+			>
 				Order spaghetti!
 			</XButton>
 		</Variant>
 
 		<Variant title="tertiary">
-			<XButton @click="logEvent('Click', $event)" variant="tertiary">
+			<XButton
+				variant="tertiary"
+				@click="logEvent('Click', $event)"
+			>
 				Order tortellini!
 			</XButton>
 		</Variant>
diff --git a/src/components/input/ColorPicker.vue b/src/components/input/ColorPicker.vue
index 297ed76ab..ab76c9cae 100644
--- a/src/components/input/ColorPicker.vue
+++ b/src/components/input/ColorPicker.vue
@@ -1,36 +1,67 @@
 <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 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>
+			>
+			<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"
+					/>
 				</pattern>
-				<rect width="22" height="22" fill="url(#checker)"></rect>
+				<rect
+					width="22"
+					height="22"
+					fill="url(#checker)"
+				/>
 			</svg>
 		</div>
 
-		<x-button
+		<XButton
 			v-if="!isEmpty"
 			:disabled="isEmpty"
-			@click="reset"
 			class="is-small ml-2"
 			:shadow="false"
 			variant="secondary"
+			@click="reset"
 		>
 			{{ $t('input.resetColor') }}
-		</x-button>
+		</XButton>
 	</div>
 </template>
 
@@ -39,6 +70,14 @@ 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',
@@ -53,14 +92,6 @@ 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) => {
diff --git a/src/components/input/SelectProject.vue b/src/components/input/SelectProject.vue
index 50b6ba248..2eef0ad5b 100644
--- 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"
diff --git a/src/components/input/SelectUser.vue b/src/components/input/SelectUser.vue
index 9594e81e8..a187df1c7 100644
--- 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"
diff --git a/src/components/input/SimpleButton.vue b/src/components/input/SimpleButton.vue
index ffe8c5b56..43f1e9083 100644
--- 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>
 
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index a61eb4af8..d0c573d69 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -18,7 +18,10 @@
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
 			/>
-			<span class="icon is-small" v-else>
+			<span
+				v-else
+				class="icon is-small"
+			>
 				<icon 
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
@@ -38,7 +41,7 @@ const BUTTON_TYPES_MAP = {
 
 export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
 
-export default { name: 'x-button' }
+export default { name: 'XButton' }
 </script>
 
 <script setup lang="ts">
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index a937189d6..5c7efb681 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -1,22 +1,29 @@
 <template>
 	<div class="datepicker">
-		<SimpleButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
+		<SimpleButton
+			class="show"
+			:disabled="disabled || undefined"
+			@click.stop="toggleDatePopup"
+		>
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
 		</SimpleButton>
 
 		<CustomTransition name="fade">
-			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
-
+			<div
+				v-if="show"
+				ref="datepickerPopup"
+				class="datepicker-popup"
+			>
 				<DatepickerInline
 					v-model="date"
-					@update:model-value="updateData"
+					@update:modelValue="updateData"
 				/>
 
 				<x-button
+					v-cy="'closeDatepicker'"
 					class="datepicker__close-button"
 					:shadow="false"
 					@click="close"
-					v-cy="'closeDatepicker'"
 				>
 					{{ $t('misc.confirm') }}
 				</x-button>
@@ -56,7 +63,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
+const emit = defineEmits(['update:modelValue', 'close', 'closeOnChange'])
 
 const date = ref<Date | null>()
 const show = ref(false)
@@ -108,7 +115,7 @@ function close() {
 		emit('close', changed.value)
 		if (changed.value) {
 			changed.value = false
-			emit('close-on-change', changed.value)
+			emit('closeOnChange', changed.value)
 		}
 	}, 200)
 }
diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
index 041483331..b8a7a7d5b 100644
--- 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
-			:config="flatPickerConfig"
 			v-model="flatPickrDate"
+			:config="flatPickerConfig"
 		/>
 	</div>
 </template>
diff --git a/src/components/input/editor/CommandsList.vue b/src/components/input/editor/CommandsList.vue
index 3749d78c4..e66f798f5 100644
--- a/src/components/input/editor/CommandsList.vue
+++ b/src/components/input/editor/CommandsList.vue
@@ -2,26 +2,30 @@
 	<div class="items">
 		<template v-if="items.length">
 			<button
-				class="item"
-				:class="{ 'is-selected': index === selectedIndex }"
 				v-for="(item, index) in items"
 				:key="index"
+				class="item"
+				:class="{ 'is-selected': index === selectedIndex }"
 				@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 class="item" v-else>
+		<div
+			v-else
+			class="item"
+		>
 			No result
 		</div>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+/* eslint-disable vue/component-api-style */
 export default {
 	props: {
 		items: {
diff --git a/src/components/input/editor/EditorToolbar.vue b/src/components/input/editor/EditorToolbar.vue
index dd8d7e8c2..c31bcfe35 100644
--- 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
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
 				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()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']"/>
+					<icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">1</span>
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
 				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()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-header']"/>
+					<icon :icon="['fa', 'fa-header']" />
 					<span class="icon__lower-text">2</span>
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
 				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()"
 			>
 				<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
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleBold().run()"
-				:class="{ 'is-active': editor.isActive('bold') }"
 				v-tooltip="$t('input.editor.bold')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				@click="editor.chain().focus().toggleBold().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-bold']"/>
+					<icon :icon="['fa', 'fa-bold']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleItalic().run()"
-				:class="{ 'is-active': editor.isActive('italic') }"
 				v-tooltip="$t('input.editor.italic')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				@click="editor.chain().focus().toggleItalic().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-italic']"/>
+					<icon :icon="['fa', 'fa-italic']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleUnderline().run()"
-				:class="{ 'is-active': editor.isActive('underline') }"
 				v-tooltip="$t('input.editor.underline')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				@click="editor.chain().focus().toggleUnderline().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-underline']"/>
+					<icon :icon="['fa', 'fa-underline']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleStrike().run()"
-				:class="{ 'is-active': editor.isActive('strike') }"
 				v-tooltip="$t('input.editor.strikethrough')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				@click="editor.chain().focus().toggleStrike().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-strikethrough']"/>
+					<icon :icon="['fa', 'fa-strikethrough']" />
 				</span>
 			</BaseButton>
 		</div>
 
 		<div class="editor-toolbar__segment">
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleCodeBlock().run()"
-				:class="{ 'is-active': editor.isActive('codeBlock') }"
 				v-tooltip="$t('input.editor.code')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('codeBlock') }"
+				@click="editor.chain().focus().toggleCodeBlock().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-code']"/>
+					<icon :icon="['fa', 'fa-code']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleBlockquote().run()"
-				:class="{ 'is-active': editor.isActive('blockquote') }"
 				v-tooltip="$t('input.editor.quote')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('blockquote') }"
+				@click="editor.chain().focus().toggleBlockquote().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-quote-right']"/>
+					<icon :icon="['fa', 'fa-quote-right']" />
 				</span>
 			</BaseButton>
 		</div>
 
 		<div class="editor-toolbar__segment">
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleBulletList().run()"
-				:class="{ 'is-active': editor.isActive('bulletList') }"
 				v-tooltip="$t('input.editor.bulletList')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('bulletList') }"
+				@click="editor.chain().focus().toggleBulletList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ul']"/>
+					<icon :icon="['fa', 'fa-list-ul']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleOrderedList().run()"
-				:class="{ 'is-active': editor.isActive('orderedList') }"
 				v-tooltip="$t('input.editor.orderedList')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('orderedList') }"
+				@click="editor.chain().focus().toggleOrderedList().run()"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-list-ol']"/>
+					<icon :icon="['fa', 'fa-list-ol']" />
 				</span>
 			</BaseButton>
 			<BaseButton
-				class="editor-toolbar__button"
-				@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"/>
-				</span>
-			</BaseButton>
-		</div>
-
-		<div class="editor-toolbar__segment">
-			<BaseButton
-				class="editor-toolbar__button" 
-				@click="openImagePicker" 
-				v-tooltip="$t('input.editor.image')"
-			>
-				<span class="icon">
-					<icon icon="fa-image"/>
-				</span>
-			</BaseButton>
-		</div>
-
-		<div class="editor-toolbar__segment">
-			<BaseButton
 				class="editor-toolbar__button"
-				@click="setLink"
+				:class="{ 'is-active': editor.isActive('taskList') }"
+				@click="editor.chain().focus().toggleTaskList().run()"
+			>
+				<span class="icon">
+					<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"
+			>
+				<span class="icon">
+					<icon icon="fa-image" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.link')"
+				class="editor-toolbar__button"
 				:class="{ 'is-active': editor.isActive('link') }"
 				title="set link"
-				v-tooltip="$t('input.editor.link')"
+				@click="setLink"
 			>
 				<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"
-				v-tooltip="$t('input.editor.text')"
+				@click="editor.chain().focus().setParagraph().run()"
 			>
 				<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,16 +206,19 @@
 		<div class="editor-toolbar__segment">
 			<!-- table -->
 			<BaseButton
-				class="editor-toolbar__button"
-				@click="toggleTableMode"
-				:class="{ 'is-active': editor.isActive('table') }"
 				v-tooltip="$t('input.editor.table.title')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('table') }"
+				@click="toggleTableMode"
 			>
 				<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="
@@ -230,99 +233,99 @@
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().addColumnBefore().run()"
 					:disabled="!editor.can().addColumnBefore"
+					@click="editor.chain().focus().addColumnBefore().run()"
 				>
 					{{ $t('input.editor.table.addColumnBefore') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().addColumnAfter().run()"
 					:disabled="!editor.can().addColumnAfter"
+					@click="editor.chain().focus().addColumnAfter().run()"
 				>
 					{{ $t('input.editor.table.addColumnAfter') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().deleteColumn().run()"
 					:disabled="!editor.can().deleteColumn"
+					@click="editor.chain().focus().deleteColumn().run()"
 				>
 					{{ $t('input.editor.table.deleteColumn') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().addRowBefore().run()"
 					:disabled="!editor.can().addRowBefore"
+					@click="editor.chain().focus().addRowBefore().run()"
 				>
 					{{ $t('input.editor.table.addRowBefore') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().addRowAfter().run()"
 					:disabled="!editor.can().addRowAfter"
+					@click="editor.chain().focus().addRowAfter().run()"
 				>
 					{{ $t('input.editor.table.addRowAfter') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().deleteRow().run()"
 					:disabled="!editor.can().deleteRow"
+					@click="editor.chain().focus().deleteRow().run()"
 				>
 					{{ $t('input.editor.table.deleteRow') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().deleteTable().run()"
 					:disabled="!editor.can().deleteTable"
+					@click="editor.chain().focus().deleteTable().run()"
 				>
 					{{ $t('input.editor.table.deleteTable') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().mergeCells().run()"
 					:disabled="!editor.can().mergeCells"
+					@click="editor.chain().focus().mergeCells().run()"
 				>
 					{{ $t('input.editor.table.mergeCells') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().splitCell().run()"
 					:disabled="!editor.can().splitCell"
+					@click="editor.chain().focus().splitCell().run()"
 				>
 					{{ $t('input.editor.table.splitCell') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().toggleHeaderColumn().run()"
 					:disabled="!editor.can().toggleHeaderColumn"
+					@click="editor.chain().focus().toggleHeaderColumn().run()"
 				>
 					{{ $t('input.editor.table.toggleHeaderColumn') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().toggleHeaderRow().run()"
 					:disabled="!editor.can().toggleHeaderRow"
+					@click="editor.chain().focus().toggleHeaderRow().run()"
 				>
 					{{ $t('input.editor.table.toggleHeaderRow') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().toggleHeaderCell().run()"
 					:disabled="!editor.can().toggleHeaderCell"
+					@click="editor.chain().focus().toggleHeaderCell().run()"
 				>
 					{{ $t('input.editor.table.toggleHeaderCell') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().mergeOrSplit().run()"
 					:disabled="!editor.can().mergeOrSplit"
+					@click="editor.chain().focus().mergeOrSplit().run()"
 				>
 					{{ $t('input.editor.table.mergeOrSplit') }}
 				</BaseButton>
 				<BaseButton
 					class="editor-toolbar__button"
-					@click="editor.chain().focus().fixTables().run()"
 					:disabled="!editor.can().fixTables"
+					@click="editor.chain().focus().fixTables().run()"
 				>
 					{{ $t('input.editor.table.fixTables') }}
 				</BaseButton>
diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index c188126e8..47701a011 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="tiptap" ref="tiptapInstanceRef">
+	<div
+		ref="tiptapInstanceRef"
+		class="tiptap"
+	>
 		<EditorToolbar
 			v-if="editor && isEditing"
 			:editor="editor"
@@ -11,56 +14,56 @@
 			class="editor-bubble__wrapper"
 		>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="editor.chain().focus().toggleBold().run()"
-				:class="{ 'is-active': editor.isActive('bold') }"
 				v-tooltip="$t('input.editor.bold')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				@click="editor.chain().focus().toggleBold().run()"
 			>
-				<icon :icon="['fa', 'fa-bold']"/>
+				<icon :icon="['fa', 'fa-bold']" />
 			</BaseButton>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="editor.chain().focus().toggleItalic().run()"
-				:class="{ 'is-active': editor.isActive('italic') }"
 				v-tooltip="$t('input.editor.italic')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				@click="editor.chain().focus().toggleItalic().run()"
 			>
-				<icon :icon="['fa', 'fa-italic']"/>
+				<icon :icon="['fa', 'fa-italic']" />
 			</BaseButton>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="editor.chain().focus().toggleUnderline().run()"
-				:class="{ 'is-active': editor.isActive('underline') }"
 				v-tooltip="$t('input.editor.underline')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				@click="editor.chain().focus().toggleUnderline().run()"
 			>
-				<icon :icon="['fa', 'fa-underline']"/>
+				<icon :icon="['fa', 'fa-underline']" />
 			</BaseButton>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="editor.chain().focus().toggleStrike().run()"
-				:class="{ 'is-active': editor.isActive('strike') }"
 				v-tooltip="$t('input.editor.strikethrough')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				@click="editor.chain().focus().toggleStrike().run()"
 			>
-				<icon :icon="['fa', 'fa-strikethrough']"/>
+				<icon :icon="['fa', 'fa-strikethrough']" />
 			</BaseButton>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="editor.chain().focus().toggleCode().run()"
-				:class="{ 'is-active': editor.isActive('code') }"
 				v-tooltip="$t('input.editor.code')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('code') }"
+				@click="editor.chain().focus().toggleCode().run()"
 			>
-				<icon :icon="['fa', 'fa-code']"/>
+				<icon :icon="['fa', 'fa-code']" />
 			</BaseButton>
 			<BaseButton
-				class="editor-bubble__button"
-				@click="setLink"
-				:class="{ 'is-active': editor.isActive('link') }"
 				v-tooltip="$t('input.editor.link')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('link') }"
+				@click="setLink"
 			>
-				<icon :icon="['fa', 'fa-link']"/>
+				<icon :icon="['fa', 'fa-link']" />
 			</BaseButton>
 		</BubbleMenu>
 
-		<editor-content
+		<EditorContent
 			class="tiptap__editor"
 			:class="{'tiptap__editor-is-edit-enabled': isEditing}"
 			:editor="editor"
@@ -69,52 +72,66 @@
 
 		<input
 			v-if="isEditing"
-			type="file"
 			id="tiptap__image-upload"
-			class="is-hidden"
 			ref="uploadInputRef"
+			type="file"
+			class="is-hidden"
 			@change="addImage"
-		/>
+		>
 
-		<ul class="tiptap__editor-actions d-print-none" v-if="bottomActions.length === 0 && !isEditing && isEditEnabled">
+		<ul
+			v-if="bottomActions.length === 0 && !isEditing && isEditEnabled"
+			class="tiptap__editor-actions d-print-none"
+		>
 			<li>
 				<BaseButton
+					class="done-edit"
 					@click="setEdit"
-					class="done-edit">
+				>
 					{{ $t('input.editor.edit') }}
 				</BaseButton>
 			</li>
 		</ul>
-		<ul class="tiptap__editor-actions d-print-none" v-if="bottomActions.length > 0">
+		<ul
+			v-if="bottomActions.length > 0"
+			class="tiptap__editor-actions d-print-none"
+		>
 			<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>
-		<x-button
+		<XButton
 			v-else-if="isEditing && showSave"
+			v-cy="'saveEditor'"
 			class="mt-4"
-			@click="bubbleSave"
 			variant="secondary"
 			:shadow="false"
-			v-cy="'saveEditor'"
 			:disabled="!contentHasChanged"
+			@click="bubbleSave"
 		>
 			{{ $t('misc.save') }}
-		</x-button>
+		</XButton>
 	</div>
 </template>
 
@@ -177,6 +194,26 @@ 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()
@@ -270,26 +307,6 @@ const CustomImage = Image.extend({
 
 type Mode = 'edit' | 'preview'
 
-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 internalMode = ref<Mode>('preview')
 const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
 const contentHasChanged = ref<boolean>(false)
@@ -304,6 +321,7 @@ watch(
 )
 
 const editor = useEditor({
+	// eslint-disable-next-line vue/no-ref-object-destructure
 	editable: isEditing.value,
 	extensions: [
 		// Starterkit:
diff --git a/src/components/input/fancycheckbox.story.vue b/src/components/input/fancycheckbox.story.vue
index 5de66961f..23c1dde9e 100644
--- a/src/components/input/fancycheckbox.story.vue
+++ b/src/components/input/fancycheckbox.story.vue
@@ -26,32 +26,42 @@ const withoutInitialState = ref<boolean | undefined>()
 			</FancyCheckbox>
 
 			Visualisation
-			<input type="checkbox" v-model="isChecked">
+			<input
+				v-model="isChecked"
+				type="checkbox"
+			>
 			{{ isChecked }}
 		</Variant>
 		<Variant title="Enabled Initially">
 			<FancyCheckbox
-				:disabled="isDisabled"
 				v-model="isCheckedInitiallyEnabled"
+				:disabled="isDisabled"
 			>
 				We want you to use this option
 			</FancyCheckbox>
 
 			Visualisation
-			<input type="checkbox" v-model="isCheckedInitiallyEnabled">
+			<input
+				v-model="isCheckedInitiallyEnabled"
+				type="checkbox"
+			>
 			{{ isCheckedInitiallyEnabled }}
 		</Variant>
 		<Variant title="Disabled">
 			<FancyCheckbox
 				disabled
-				:modelValue="isCheckedDisabled"
-				@update:model-value="logEvent('Setting disabled: This should never happen', $event)"
+				:model-value="isCheckedDisabled"
+				@update:modelValue="logEvent('Setting disabled: This should never happen', $event)"
 			>
 				You can't change this
 			</FancyCheckbox>
 
 			Visualisation
-			<input type="checkbox" v-model="isCheckedDisabled" disabled>
+			<input
+				v-model="isCheckedDisabled"
+				type="checkbox"
+				disabled
+			>
 			{{ isCheckedDisabled }}
 		</Variant>
 
@@ -64,7 +74,11 @@ const withoutInitialState = ref<boolean | undefined>()
 			</FancyCheckbox>
 
 			Visualisation
-			<input type="checkbox" v-model="withoutInitialState" disabled>
+			<input
+				v-model="withoutInitialState"
+				type="checkbox"
+				disabled
+			>
 			{{ withoutInitialState }}
 		</Variant>
 	</Story>
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index b8e16680c..c55363fe1 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -7,11 +7,14 @@
 		}"
 		:disabled="disabled"
 		:model-value="modelValue"
-		@update:model-value="value => emit('update:modelValue', value)"
+		@update:modelValue="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>
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index bf7003d1e..0ba1f70c6 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -1,12 +1,15 @@
 <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}"
@@ -18,51 +21,67 @@
 					: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 @click="() => remove(item)" class="delete is-small"></BaseButton>
+								<BaseButton
+									class="delete is-small"
+									@click="() => remove(item)"
+								/>
 							</span>
 						</slot>
 					</template>
 				</slot>
 				
 				<input
+					ref="searchInput"
+					v-model="query"
 					type="text"
 					class="input"
-					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'"
-				/>
+					@keyup="search"
+					@keyup.enter.exact.prevent="() => createOrSelectOnEnter()"
+					@keydown.down.exact.prevent="() => preSelect(0)"
+					@focus="handleFocus"
+				>
 				<BaseButton 
 					v-if="removalAvailable"
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
-					<icon icon="times"/>
+					<icon icon="times" />
 				</BaseButton>
 			</div>
 		</div>
 
 		<CustomTransition name="fade">
-			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
+			<div
+				v-if="searchResultsVisible"
+				class="search-results"
+				:class="{'search-results-inline': inline}"
+			>
 				<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>
@@ -73,15 +92,18 @@
 
 				<BaseButton
 					v-if="creatableAvailable"
-					class="search-result-button is-fullwidth"
 					:ref="(el) => setResult(el, filteredSearchResults.length)"
+					class="search-result-button is-fullwidth"
 					@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>
@@ -107,16 +129,6 @@ 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
@@ -245,6 +257,16 @@ 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)
diff --git a/src/components/input/password.vue b/src/components/input/password.vue
index ceedfc753..06fde802c 100644
--- a/src/components/input/password.vue
+++ b/src/components/input/password.vue
@@ -1,27 +1,31 @@
 <template>
 	<div class="password-field">
 		<input
-			class="input"
 			id="password"
+			class="input"
 			name="password"
 			:placeholder="$t('user.auth.passwordPlaceholder')"
 			required
 			:type="passwordFieldType"
 			autocomplete="current-password"
-			@keyup.enter="e => $emit('submit', e)"
 			:tabindex="props.tabindex"
+			@keyup.enter="e => $emit('submit', e)"
 			@focusout="validate"
 			@input="handleInput"
-		/>
+		>
 		<BaseButton
-			@click="togglePasswordFieldType"
+			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 			class="password-field-type-toggle"
 			:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
-			v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
-			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'"/>
+			@click="togglePasswordFieldType"
+		>
+			<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
 		</BaseButton>
 	</div>
-	<p class="help is-danger" v-if="!isValid">
+	<p
+		v-if="!isValid"
+		class="help is-danger"
+	>
 		{{ $t('user.auth.passwordRequired') }}
 	</p>
 </template>
diff --git a/src/components/misc/ButtonLink.vue b/src/components/misc/ButtonLink.vue
index 8b8620e41..23a1f6929 100644
--- a/src/components/misc/ButtonLink.vue
+++ b/src/components/misc/ButtonLink.vue
@@ -1,5 +1,7 @@
 <template>
-	<BaseButton class="button-link"><slot/></BaseButton>
+	<BaseButton class="button-link">
+		<slot />
+	</BaseButton>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/misc/Done.vue b/src/components/misc/Done.vue
index b8066b5bd..3a8ccb356 100644
--- 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' }"
diff --git a/src/components/misc/OpenQuickActions.vue b/src/components/misc/OpenQuickActions.vue
index f8d4e82a2..9a5077afc 100644
--- 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>
diff --git a/src/components/misc/ProgressBar.story.vue b/src/components/misc/ProgressBar.story.vue
index 348be7e29..5786efe7f 100644
--- a/src/components/misc/ProgressBar.story.vue
+++ b/src/components/misc/ProgressBar.story.vue
@@ -7,9 +7,9 @@ const value = ref(50)
 </script>
 
 <template>
-  <Story>
-    <Variant title="Default">
-      <ProgressBar :value="value" />
-    </Variant>
-  </Story>
+	<Story>
+		<Variant title="Default">
+			<ProgressBar :value="value" />
+		</Variant>
+	</Story>
 </template>
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index cf3ad9383..b8fea5539 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -1,38 +1,62 @@
 <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
-						class="input"
 						id="api-url"
+						v-model="apiUrl"
+						v-focus
+						class="input"
 						:placeholder="$t('apiConfig.urlPlaceholder')"
 						required
 						type="url"
-						v-focus
-						v-model="apiUrl"
 						@keyup.enter="setApiUrl"
-					/>
+					>
 				</div>
 				<div class="control">
-					<x-button @click="setApiUrl" :disabled="apiUrl === '' || undefined">
+					<x-button
+						:disabled="apiUrl === '' || undefined"
+						@click="setApiUrl"
+					>
 						{{ $t('apiConfig.change') }}
 					</x-button>
 				</div>
 			</div>
 		</div>
-		<div class="api-url-info" v-else>
-			<i18n-t keypath="apiConfig.use" scope="global">
-				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
+		<div
+			v-else
+			class="api-url-info"
+		>
+			<i18n-t
+				keypath="apiConfig.use"
+				scope="global"
+			>
+				<span
+					v-tooltip="apiUrl"
+					class="url"
+				> {{ 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 variant="danger" v-if="errorMsg !== ''" class="mt-2">
+		<Message
+			v-if="errorMsg !== ''"
+			variant="danger"
+			class="mt-2"
+		>
 			{{ errorMsg }}
-		</message>
+		</Message>
 	</div>
 </template>
 
@@ -57,7 +81,7 @@ const props = defineProps({
 const emit = defineEmits(['foundApi'])
 
 const apiUrl = ref(window.API_URL)
-const configureApi = ref(apiUrl.value === '')
+const configureApi = ref(window.API_URL === '')
 
 // 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.
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 49a6a6c63..2d0edbae1 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -1,18 +1,24 @@
 <template>
-	<div class="card" :class="{'has-no-shadow': !shadow}">
-		<header class="card-header" v-if="title !== ''">
+	<div
+		class="card"
+		:class="{'has-no-shadow': !shadow}"
+	>
+		<header
+			v-if="title !== ''"
+			class="card-header"
+		>
 			<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>
@@ -24,12 +30,15 @@
 			}"
 		>
 			<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>
diff --git a/src/components/misc/colorBubble.vue b/src/components/misc/colorBubble.vue
index 3b7a8ba31..a6c563796 100644
--- 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>
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index 3b69716c4..098b84f00 100644
--- a/src/components/misc/create-edit.vue
+++ b/src/components/misc/create-edit.vue
@@ -1,16 +1,20 @@
 <template>
-	<modal @close="$router.back()" :overflow="true" :wide="wide">
+	<modal
+		:overflow="true"
+		:wide="wide"
+		@close="$router.back()"
+	>
 		<card
 			:title="title"
 			:shadow="false"
 			:padding="false"
 			class="has-text-left"
 			:has-close="true"
-			@close="$router.back()"
 			:loading="loading"
+			@close="$router.back()"
 		>
 			<div class="p-4">
-				<slot/>
+				<slot />
 			</div>
 
 			<template #footer>
@@ -32,10 +36,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>
diff --git a/src/components/misc/dropdown-item.vue b/src/components/misc/dropdown-item.vue
index a1545975b..5285539d0 100644
--- 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>
diff --git a/src/components/misc/dropdown.vue b/src/components/misc/dropdown.vue
index 6bc9eb6f8..59ad211ae 100644
--- a/src/components/misc/dropdown.vue
+++ b/src/components/misc/dropdown.vue
@@ -1,15 +1,32 @@
 <template>
-	<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"/>
+	<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"
+				/>
 			</BaseButton>
 		</slot>
 
 		<CustomTransition name="fade">
-			<div class="dropdown-menu" v-if="open">
+			<div
+				v-if="open"
+				class="dropdown-menu"
+			>
 				<div class="dropdown-content">
-					<slot :close="close"></slot>
+					<slot :close="close" />
 				</div>
 			</div>
 		</CustomTransition>
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index 7c797e264..9d12fab58 100644
--- a/src/components/misc/error.vue
+++ b/src/components/misc/error.vue
@@ -1,10 +1,17 @@
 <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">
diff --git a/src/components/misc/flatpickr/Flatpickr.vue b/src/components/misc/flatpickr/Flatpickr.vue
index fded8fd65..e44ecb2ac 100644
--- 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">
diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index 2592e406b..1bb77d073 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/src/components/misc/keyboard-shortcuts/index.vue
@@ -1,10 +1,20 @@
 <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 class="mb-4" v-if="s.available">
+				<Message
+					v-if="s.available"
+					class="mb-4"
+				>
 					{{
 						typeof s.available === 'undefined' ?
 							$t('keyboardShortcuts.allPages') :
@@ -14,14 +24,19 @@
 									: $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
-							class="shortcut-keys"
+					<template
+						v-for="(sc, si) in s.shortcuts"
+						:key="si"
+					>
+						<dt class="shortcut-title">
+							{{ $t(sc.title) }}
+						</dt>
+						<Shortcut
 							is="dd"
+							class="shortcut-keys"
 							:keys="sc.keys"
 							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
 						/>
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index 3450046f7..f6c6526ed 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -1,8 +1,18 @@
 <template>
 	<div class="legal-links">
-		<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
+		<BaseButton
+			v-if="imprintUrl"
+			:href="imprintUrl"
+		>
+			{{ $t('navigation.imprint') }}
+		</BaseButton>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
+		<BaseButton
+			v-if="privacyPolicyUrl"
+			:href="privacyPolicyUrl"
+		>
+			{{ $t('navigation.privacy') }}
+		</BaseButton>
 	</div>
 </template>
 
diff --git a/src/components/misc/loading.vue b/src/components/misc/loading.vue
index 1c88d7021..13b4f0934 100644
--- a/src/components/misc/loading.vue
+++ b/src/components/misc/loading.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
+	<div
+		class="loader-container is-loading"
+		:class="{'is-small': variant === 'small'}"
+	/>
 </template>
 
 <script lang="ts">
diff --git a/src/components/misc/message.vue b/src/components/misc/message.vue
index 86b1b93af..1057339bf 100644
--- a/src/components/misc/message.vue
+++ b/src/components/misc/message.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="message-wrapper">
-		<div class="message" :class="[variant, textAlignClass]">
-			<slot/>
+		<div
+			class="message"
+			:class="[variant, textAlignClass]"
+		>
+			<slot />
 		</div>
 	</div>
 </template>
@@ -9,14 +12,6 @@
 <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,
@@ -28,6 +23,14 @@ 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>
diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 2bbd063b6..c5ddc1e05 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -1,56 +1,59 @@
 <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
-							@click="$emit('close')"
 							class="close"
+							@click="$emit('close')"
 						>
-							<icon icon="times"/>
+							<icon icon="times" />
 						</BaseButton>
 
 						<slot>
 							<div class="header">
-								<slot name="header"></slot>
+								<slot name="header" />
 							</div>
 							<div class="content">
-								<slot name="text"></slot>
+								<slot name="text" />
 							</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
-									@click="$emit('submit')"
-									variant="primary"
 									v-cy="'modalPrimary'"
+									variant="primary"
 									:shadow="false"
+									@click="$emit('submit')"
 								>
 									{{ $t('misc.doit') }}
 								</x-button>
diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index b9a0ea042..b4f0a5166 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -1,8 +1,15 @@
 <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>
@@ -12,14 +19,22 @@
 			</section>
 			<section class="content">
 				<div>
-					<h2 class="title" v-if="title">{{ title }}</h2>
-					<api-config v-if="showApiConfig"/>
-					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
+					<h2
+						v-if="title"
+						class="title"
+					>
+						{{ title }}
+					</h2>
+					<ApiConfig v-if="showApiConfig" />
+					<Message
+						v-if="motd !== ''"
+						class="is-hidden-tablet mb-4"
+					>
 						{{ motd }}
 					</Message>
-					<slot/>
+					<slot />
 				</div>
-				<legal/>
+				<Legal />
 			</section>
 		</div>
 	</div>
@@ -38,6 +53,11 @@ 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)
 
@@ -46,11 +66,6 @@ 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>
diff --git a/src/components/misc/nothing.vue b/src/components/misc/nothing.vue
index 7c65846a3..d324f547b 100644
--- 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>
\ No newline at end of file
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index 2b287ee45..614d7a664 100644
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@@ -1,30 +1,43 @@
 <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
-					class="buttons is-right"
 					v-if="item.data?.actions?.length > 0"
+					class="buttons is-right"
 				>
 					<x-button
+						v-for="(action, i) in item.data.actions"
 						:key="'action_' + i"
-						@click="action.callback"
 						:shadow="false"
 						class="is-small"
 						variant="secondary"
-						v-for="(action, i) in item.data.actions"
+						@click="action.callback"
 					>
 						{{ action.title }}
 					</x-button>
diff --git a/src/components/misc/pagination.vue b/src/components/misc/pagination.vue
index 930db0629..e98eccc29 100644
--- a/src/components/misc/pagination.vue
+++ b/src/components/misc/pagination.vue
@@ -1,25 +1,33 @@
 <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 :key="`page-${i}`" v-for="(p, i) in pages">
-				<span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
+			<li
+				v-for="(p, i) in pages"
+				:key="`page-${i}`"
+			>
+				<span
+					v-if="p.isEllipsis"
+					class="pagination-ellipsis"
+				>&hellip;</span>
 				<router-link
 					v-else
 					class="pagination-link"
@@ -37,6 +45,17 @@
 <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++) {
@@ -81,17 +100,6 @@ 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>
 
diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index d9397593e..1607cb713 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -1,14 +1,24 @@
 <template>
-	<slot name="trigger" :isOpen="open" :toggle="toggle" :close="close"></slot>
+	<slot
+		name="trigger"
+		:is-open="open"
+		:toggle="toggle"
+		:close="close"
+	/>
 	<div
+		ref="popup"
 		class="popup"
 		:class="{
 			'is-open': open,
 			'has-overflow': props.hasOverflow && open
 		}"
-		ref="popup"
 	>
-		<slot name="content" :isOpen="open" :toggle="toggle" :close="close"/>
+		<slot
+			name="content"
+			:is-open="open"
+			:toggle="toggle"
+			:close="close"
+		/>
 	</div>
 </template>
 
diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index 08616df1a..16f321f05 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -1,37 +1,55 @@
 <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>
-	<div class="app offline" v-if="!online">
+	<div
+		class="offline"
+		style="height: 0;width: 0;"
+	/>
+	<div
+		v-if="!online"
+		class="app offline"
+	>
 		<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 !== ''">
-		<no-auth-wrapper :show-api-config="false">
+		<NoAuthWrapper :show-api-config="false">
 			<p v-if="error === ERROR_NO_API_URL">
 				{{ $t('ready.noApiUrlConfigured') }}
 			</p>
-			<message variant="danger" v-else class="mb-4">
+			<Message
+				v-else
+				variant="danger"
+				class="mb-4"
+			>
 				<p>
-					{{ $t('ready.errorOccured') }}<br/>
+					{{ $t('ready.errorOccured') }}<br>
 					{{ error }}
 				</p>
 				<p>
 					{{ $t('ready.checkApiUrl') }}
 				</p>
-			</message>
-			<api-config :configure-open="true" @found-api="load"/>
-		</no-auth-wrapper>
+			</Message>
+			<ApiConfig
+				:configure-open="true"
+				@foundApi="load"
+			/>
+		</NoAuthWrapper>
 	</section>
 	<CustomTransition name="fade">
-		<section class="vikunja-loading" v-if="showLoading">
-			<Logo class="logo"/>
+		<section
+			v-if="showLoading"
+			class="vikunja-loading"
+		>
+			<Logo class="logo" />
 			<p>
-				<span class="loader-container is-loading-small is-loading"></span>
+				<span class="loader-container is-loading-small is-loading" />
 				{{ $t('ready.loading') }}
 			</p>
 		</section>
diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue
index dd90aca87..9288a27fa 100644
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@@ -1,6 +1,12 @@
 <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>
diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index 1ca72d9cf..59bec7ab8 100644
--- 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"
-		v-tooltip="tooltipText"
-		@click="changeSubscription"
 		:disabled="disabled"
+		@click="changeSubscription"
 	>
 		{{ 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 subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
-
 const emit = defineEmits(['update:modelValue'])
 
+const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
+
 const subscriptionService = shallowRef(new SubscriptionService())
 
 const {t} = useI18n({useScope: 'global'})
diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index b59084cce..27ac7cf44 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -4,14 +4,17 @@
 		:class="{'is-inline': isInline}"
 	>
 		<img
+			v-tooltip="displayName"
 			:height="avatarSize"
 			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
 			:alt="'Avatar of ' + displayName"
 			class="avatar"
-			v-tooltip="displayName"
-		/>
-		<span class="username" v-if="showUsername">{{ displayName }}</span>
+		>
+		<span
+			v-if="showUsername"
+			class="username"
+		>{{ displayName }}</span>
 	</div>
 </template>
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 93ee63405..a24642b7b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,51 +1,80 @@
 <template>
 	<div class="notifications">
-		<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"/>
+		<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" />
 			</BaseButton>
 		</slot>
 
 		<CustomTransition name="fade">
-			<div class="notifications-list" v-if="showNotifications" ref="popup">
+			<div
+				v-if="showNotifications"
+				ref="popup"
+				class="notifications-list"
+			>
 				<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}"></div>
-					<user
+					<div
+						class="read-indicator"
+						:class="{'read': n.readAt !== null}"
+					/>
+					<User
+						v-if="n.notification.doer"
 						:user="n.notification.doer"
 						:show-username="false"
 						:avatar-size="16"
-						v-if="n.notification.doer"
 					/>
 					<div class="detail">
 						<div>
-							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
+							<span
+								v-if="n.notification.doer"
+								class="has-text-weight-bold mr-1"
+							>
 								{{ getDisplayName(n.notification.doer) }}
 							</span>
-							<BaseButton @click="() => to(n, index)()" class="has-text-left">
+							<BaseButton
+								class="has-text-left"
+								@click="() => to(n, index)()"
+							>
 								{{ n.toText(userInfo) }}
 							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDateLong(n.created)">
+						<span
+							v-tooltip="formatDateLong(n.created)"
+							class="created"
+						>
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
 				</div>
-				<x-button
+				<XButton
 					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') }}
-				</x-button>
-				<p class="nothing" v-if="notifications.length === 0">
-					{{ $t('notification.none') }}<br/>
+				</XButton>
+				<p
+					v-if="notifications.length === 0"
+					class="nothing"
+				>
+					{{ $t('notification.none') }}<br>
 					<span class="explainer">
 						{{ $t('notification.explainer') }}
 					</span>
diff --git a/src/components/project/ProjectWrapper.vue b/src/components/project/ProjectWrapper.vue
index cf3a8f3e5..255124b19 100644
--- 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,12 +49,16 @@
 			<slot name="header" />
 		</div>
 		<CustomTransition name="fade">
-			<Message variant="warning" v-if="currentProject?.isArchived" class="mb-4">
+			<Message
+				v-if="currentProject?.isArchived"
+				variant="warning"
+				class="mb-4"
+			>
 				{{ $t('project.archivedMessage') }}
 			</Message>
 		</CustomTransition>
 
-		<slot v-if="loadedProjectId"/>
+		<slot v-if="loadedProjectId" />
 	</div>
 </template>
 
diff --git a/src/components/project/partials/ProjectCard.vue b/src/components/project/partials/ProjectCard.vue
index de8edc2df..43aaba489 100644
--- a/src/components/project/partials/ProjectCard.vue
+++ b/src/components/project/partials/ProjectCard.vue
@@ -15,11 +15,20 @@
 			: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>
diff --git a/src/components/project/partials/ProjectCardGrid.vue b/src/components/project/partials/ProjectCardGrid.vue
index 4b8a6e028..4d692ec62 100644
--- 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>
diff --git a/src/components/project/partials/filter-popup.vue b/src/components/project/partials/filter-popup.vue
index 102fbb9ef..aec51390b 100644
--- 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
-			:has-title="true"
-			v-model="value"
+		<Filters
 			ref="filters"
+			v-model="value"
+			:has-title="true"
 			class="filter-popup"
 		/>
 	</modal>
diff --git a/src/components/project/partials/filters.vue b/src/components/project/partials/filters.vue
index 31ee569e7..a9058fb21 100644
--- a/src/components/project/partials/filters.vue
+++ b/src/components/project/partials/filters.vue
@@ -1,134 +1,157 @@
 <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:model-value="change()"
+				@update:modelValue="change()"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
-			</fancycheckbox>
-			<fancycheckbox
+			</Fancycheckbox>
+			<Fancycheckbox
 				v-model="filters.requireAllFilters"
-				@update:model-value="setFilterConcat()"
+				@update:modelValue="setFilterConcat()"
 			>
 				{{ $t('filters.attributes.requireAll') }}
-			</fancycheckbox>
-			<fancycheckbox
+			</Fancycheckbox>
+			<Fancycheckbox
 				v-model="filters.done"
-				@update:model-value="setDoneFilter"
+				@update:modelValue="setDoneFilter"
 			>
 				{{ $t('filters.attributes.showDoneTasks') }}
-			</fancycheckbox>
-			<fancycheckbox
+			</Fancycheckbox>
+			<Fancycheckbox
 				v-if="!['project.kanban', 'project.table'].includes($route.name as string)"
 				v-model="sortAlphabetically"
-				@update:model-value="change()"
+				@update:modelValue="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">
-				<priority-select
+				<PrioritySelect
 					v-model.number="filters.priority"
-					@update:model-value="setPriority"
 					:disabled="!filters.usePriority || undefined"
+					@update:modelValue="setPriority"
 				/>
-				<fancycheckbox
+				<Fancycheckbox
 					v-model="filters.usePriority"
-					@update:model-value="setPriority"
+					@update:modelValue="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">
-				<percent-done-select
+				<PercentDoneSelect
 					v-model.number="filters.percentDone"
-					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
+					@update:modelValue="setPercentDoneFilter"
 				/>
-				<fancycheckbox
+				<Fancycheckbox
 					v-model="filters.usePercentDone"
-					@update:model-value="setPercentDoneFilter"
+					@update:modelValue="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
-				</fancycheckbox>
+				</Fancycheckbox>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
+				<DatepickerWithRange
 					v-model="filters.dueDate"
-					@update:model-value="values => setDateFilter('due_date', values)"
+					@update:modelValue="values => setDateFilter('due_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+						<x-button
+							variant="secondary"
+							:shadow="false"
+							class="mb-2"
+							@click.prevent.stop="toggle()"
+						>
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</datepicker-with-range>
+				</DatepickerWithRange>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
+				<DatepickerWithRange
 					v-model="filters.startDate"
-					@update:model-value="values => setDateFilter('start_date', values)"
+					@update:modelValue="values => setDateFilter('start_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+						<x-button
+							variant="secondary"
+							:shadow="false"
+							class="mb-2"
+							@click.prevent.stop="toggle()"
+						>
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</datepicker-with-range>
+				</DatepickerWithRange>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
+				<DatepickerWithRange
 					v-model="filters.endDate"
-					@update:model-value="values => setDateFilter('end_date', values)"
+					@update:modelValue="values => setDateFilter('end_date', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+						<x-button
+							variant="secondary"
+							:shadow="false"
+							class="mb-2"
+							@click.prevent.stop="toggle()"
+						>
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</datepicker-with-range>
+				</DatepickerWithRange>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
-				<datepicker-with-range
+				<DatepickerWithRange
 					v-model="filters.reminders"
-					@update:model-value="values => setDateFilter('reminders', values)"
+					@update:modelValue="values => setDateFilter('reminders', values)"
 				>
 					<template #trigger="{toggle, buttonText}">
-						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
+						<x-button
+							variant="secondary"
+							:shadow="false"
+							class="mb-2"
+							@click.prevent.stop="toggle()"
+						>
 							{{ buttonText }}
 						</x-button>
 					</template>
-				</datepicker-with-range>
+				</DatepickerWithRange>
 			</div>
 		</div>
 
@@ -146,10 +169,10 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<edit-labels
-					:creatable="false"
+				<EditLabels
 					v-model="entities.labels"
-					@update:model-value="changeLabelFilter"
+					:creatable="false"
+					@update:modelValue="changeLabelFilter"
 				/>
 			</div>
 		</div>
@@ -162,9 +185,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>
@@ -205,6 +228,18 @@ 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: [],
@@ -233,18 +268,6 @@ 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()
diff --git a/src/components/project/project-settings-dropdown.vue b/src/components/project/project-settings-dropdown.vue
index 5c6e3d561..802eba4ae 100644
--- a/src/components/project/project-settings-dropdown.vue
+++ b/src/components/project/project-settings-dropdown.vue
@@ -1,99 +1,108 @@
 <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)">
-			<dropdown-item
+			<DropdownItem
 				:to="{ name: 'filter.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				:to="{ name: 'filter.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
-			</dropdown-item>
+			</DropdownItem>
 		</template>
 
 		<template v-else-if="project.isArchived">
-			<dropdown-item
+			<DropdownItem
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
-			</dropdown-item>
+			</DropdownItem>
 		</template>
 		<template v-else>
-			<dropdown-item
+			<DropdownItem
 				:to="{ name: 'project.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				v-if="backgroundsEnabled"
 				:to="{ name: 'project.settings.background', params: { projectId: project.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				:to="{ name: 'project.settings.share', params: { projectId: project.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				:to="{ name: 'project.settings.duplicate', params: { projectId: project.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
-			</dropdown-item>
+			</DropdownItem>
 			<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"
 			/>
-			<dropdown-item
+			<DropdownItem
 				:to="{ name: 'project.settings.webhooks', params: { projectId: project.id } }"
 				icon="bolt"
 			>
 				{{ $t('project.webhooks.title') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				v-if="level < 2"
 				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
 				icon="layer-group"
 			>
 				{{ $t('menu.createProject') }}
-			</dropdown-item>
-			<dropdown-item
+			</DropdownItem>
+			<DropdownItem
 				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
 				{{ $t('menu.delete') }}
-			</dropdown-item>
+			</DropdownItem>
 		</template>
-	</dropdown>
+	</Dropdown>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 53e6cfa95..34f8ec947 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -1,33 +1,53 @@
 <template>
-	<modal :enabled="active" @close="closeQuickActions" :overflow="isNewTaskCommand">
+	<modal
+		:enabled="active"
+		:overflow="isNewTaskCommand"
+		@close="closeQuickActions"
+	>
 		<div class="card quick-actions">
-			<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
-				<div class="active-cmd tag" v-if="selectedCmd !== null">
+			<div
+				class="action-input"
+				:class="{'has-active-cmd': selectedCmd !== null}"
+			>
+				<div
+					v-if="selectedCmd !== null"
+					class="active-cmd tag"
+				>
 					{{ 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 class="help has-text-grey-light p-2" v-if="hintText !== '' && !isNewTaskCommand">
+			<div
+				v-if="hintText !== '' && !isNewTaskCommand"
+				class="help has-text-grey-light p-2"
+			>
 				{{ hintText }}
 			</div>
 
-			<quick-add-magic v-if="isNewTaskCommand"/>
+			<QuickAddMagic v-if="isNewTaskCommand" />
 
-			<div class="results" v-if="selectedCmd === null">
-				<div v-for="(r, k) in results" :key="k" class="result">
+			<div
+				v-if="selectedCmd === null"
+				class="results"
+			>
+				<div
+					v-for="(r, k) in results"
+					:key="k"
+					class="result"
+				>
 					<span class="result-title">
 						{{ r.title }}
 					</span>
@@ -35,9 +55,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)"
@@ -45,10 +65,10 @@
 							@keyup.prevent.esc="searchInput?.focus()"
 						>
 							<template v-if="r.type === ACTION_TYPE.LABELS">
-								<x-label :label="i"/>
+								<XLabel :label="i" />
 							</template>
 							<template v-else-if="r.type === ACTION_TYPE.TASK">
-								<single-task-inline-readonly
+								<SingleTaskInlineReadonly
 									:task="i"
 									:show-project="true"
 								/>
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index e69ff34ad..88aaa61ad 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -3,8 +3,9 @@
 		<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>
@@ -12,20 +13,30 @@
 		<div class="sharables-project">
 			<x-button
 				v-if="!(linkShares.length === 0 || showNewForm)"
-				@click="showNewForm = true"
 				icon="plus"
-				class="mb-4">
+				class="mb-4"
+				@click="showNewForm = true"
+			>
 				{{ $t('project.share.links.create') }}
 			</x-button>
 
-			<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
+			<div
+				v-if="linkShares.length === 0 || showNewForm"
+				class="p-4"
+			>
 				<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 v-model="selectedRight" id="linkShareRight">
+							<select
+								id="linkShareRight"
+								v-model="selectedRight"
+							>
 								<option :value="RIGHTS.READ">
 									{{ $t('project.share.right.read') }}
 								</option>
@@ -40,131 +51,150 @@
 					</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 @click="add(projectId)" icon="plus">
+				<x-button
+					icon="plus"
+					@click="add(projectId)"
+				>
 					{{ $t('project.share.share') }}
 				</x-button>
 			</div>
 
 			<table
-				class="table has-actions is-striped is-hoverable is-fullwidth"
 				v-if="linkShares.length > 0"
+				class="table has-actions is-striped is-hoverable is-fullwidth"
 			>
 				<thead>
-				<tr>
-					<th></th>
-					<th>{{ $t('project.share.links.view') }}</th>
-					<th>{{ $t('project.share.attributes.delete') }}</th>
-				</tr>
+					<tr>
+						<th />
+						<th>{{ $t('project.share.links.view') }}</th>
+						<th>{{ $t('project.share.attributes.delete') }}</th>
+					</tr>
 				</thead>
 				<tbody>
-				<tr :key="s.id" v-for="s in linkShares">
-					<td>
-						<p class="mb-2 is-italic" v-if="s.name !== ''">
-							{{ s.name }}
-						</p>
+					<tr
+						v-for="s in linkShares"
+						:key="s.id"
+					>
+						<td>
+							<p
+								v-if="s.name !== ''"
+								class="mb-2 is-italic"
+							>
+								{{ 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
-										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
-										:shadow="false"
+									>
+								</div>
+								<div class="control">
+									<x-button
 										v-tooltip="$t('misc.copy')"
-								>
-									<span class="icon">
-										<icon icon="paste"/>
-									</span>
-								</x-button>
+										:shadow="false"
+										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
+									>
+										<span class="icon">
+											<icon icon="paste" />
+										</span>
+									</x-button>
+								</div>
 							</div>
-						</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="
+						</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="
 									() => {
 										linkIdToDelete = s.id
 										showDeleteModal = true
 									}
 								"
-							class="is-danger"
-							icon="trash-alt"
-						/>
-					</td>
-				</tr>
+							/>
+						</td>
+					</tr>
 				</tbody>
 			</table>
 		</div>
@@ -207,7 +237,7 @@ import {useConfigStore} from '@/stores/config'
 const props = defineProps({
 	projectId: {
 		default: 0,
-		required: true,
+		required: false,
 	},
 })
 
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 35288cd0e..3858c6ab5 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -10,108 +10,119 @@
 					:class="{ 'is-loading': searchService.loading }"
 				>
 					<Multiselect
+						v-model="sharable"
 						:loading="searchService.loading"
 						:placeholder="$t('misc.searchPlaceholder')"
-						@search="find"
 						:search-results="found"
 						:label="searchLabel"
-						v-model="sharable"
+						@search="find"
 					/>
 				</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 class="table has-actions is-striped is-hoverable is-fullwidth mb-4" v-if="sharables.length > 0">
+		<table
+			v-if="sharables.length > 0"
+			class="table has-actions is-striped is-hoverable is-fullwidth mb-4"
+		>
 			<tbody>
-			<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="{
+				<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="{
 									name: 'teams.edit',
 									params: { id: s.id },
 								}"
-						>
-							{{ s.name }}
-						</router-link>
+							>
+								{{ 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>
 					</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>
-				</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"
+					<td
+						v-if="userIsAdmin"
+						class="actions"
+					>
+						<div class="select">
+							<select
+								v-model="selectedRight[s.id]"
+								class="mr-2"
+								@change="toggleType(s)"
 							>
-								{{ $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="
+								<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="
 								() => {
 									sharable = s
 									showDeleteModal = true
 								}
 							"
-						class="is-danger"
-						icon="trash-alt"
-					/>
-				</td>
-			</tr>
+						/>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 
-		<nothing v-else>
+		<Nothing v-else>
 			{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
-		</nothing>
+		</Nothing>
 
 		<modal
 			:enabled="showDeleteModal"
@@ -120,8 +131,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>
@@ -131,7 +142,7 @@
 </template>
 
 <script lang="ts">
-export default {name: 'userTeamShare'}
+export default {name: 'UserTeamShare'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue
index 78a82f352..e1f42fcb0 100644
--- a/src/components/tasks/GanttChart.vue
+++ b/src/components/tasks/GanttChart.vue
@@ -3,7 +3,11 @@
 		v-if="props.isLoading && !ganttBars.length || dayjsLanguageLoading"
 		class="gantt-container"
 	/>
-	<div ref="ganttContainer" class="gantt-container" v-else>
+	<div
+		v-else
+		ref="ganttContainer"
+		class="gantt-container"
+	>
 		<GGanttChart
 			:date-format="DAYJS_ISO_DATE_FORMAT"
 			:chart-start="isoToKebabDate(filters.dateFrom)"
@@ -12,9 +16,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
@@ -72,14 +76,14 @@ 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
diff --git a/src/components/tasks/TaskForm.vue b/src/components/tasks/TaskForm.vue
index 1dbe340cb..3da1d4cda 100644
--- a/src/components/tasks/TaskForm.vue
+++ b/src/components/tasks/TaskForm.vue
@@ -1,20 +1,24 @@
 <template>
 	<form
-		@submit.prevent="createTask"
 		class="add-new-task"
+		@submit.prevent="createTask"
 	>
 		<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 @click="showCreateTaskOrCreate" :shadow="false" icon="plus">
+		<x-button
+			:shadow="false"
+			icon="plus"
+			@click="showCreateTaskOrCreate"
+		>
 			{{ $t('task.new') }}
 		</x-button>
 	</form>
@@ -27,7 +31,7 @@ import type {ITask} from '@/modelTypes/ITask'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 const emit = defineEmits<{
-	(e: 'create-task', title: string): Promise<ITask>
+	(e: 'createTask', title: string): Promise<ITask>
 }>()
 
 const newTaskFieldActive = ref(false)
@@ -56,7 +60,7 @@ async function createTask() {
 	if (!newTaskFieldActive.value) {
 		return
 	}
-	await emit('create-task', newTaskTitle.value)
+	await emit('createTask', newTaskTitle.value)
 	newTaskTitle.value = ''
 	hideCreateNewTask()
 }
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 2214ffbcd..9168a90f0 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -1,31 +1,34 @@
 <template>
-	<div class="task-add" ref="taskAdd">
+	<div
+		ref="taskAdd"
+		class="task-add"
+	>
 		<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>
-				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
+				<QuickAddMagic :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') }}
@@ -34,7 +37,10 @@
 			</p>
 		</div>
 		<Expandable :open="errorMessage !== ''">
-			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
+			<p
+				v-if="errorMessage !== ''"
+				class="pt-3 mt-0 help is-danger"
+			>
 				{{ errorMessage }}
 			</p>
 		</Expandable>
diff --git a/src/components/tasks/partials/assigneeList.vue b/src/components/tasks/partials/assigneeList.vue
index 2faa2cd9f..bc4f4e0c5 100644
--- a/src/components/tasks/partials/assigneeList.vue
+++ b/src/components/tasks/partials/assigneeList.vue
@@ -22,11 +22,14 @@ 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"
-			class="assignee"
 			:key="user.id"
+			class="assignee"
 		>
 			<User
 				:key="'user'+user.id"
@@ -36,12 +39,12 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 				:class="{'m-2': hasDelete}"
 			/>
 			<BaseButton
-				:key="'delete'+user.id"
 				v-if="hasDelete"
-				@click="remove(user)"
+				:key="'delete'+user.id"
 				class="remove-assignee"
+				@click="remove(user)"
 			>
-				<icon icon="times"/>
+				<icon icon="times" />
 			</BaseButton>
 		</span>
 	</div>
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index c5f5f7afb..716c391e2 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -2,20 +2,20 @@
 	<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"
-			:disabled="loading || undefined"
-			@change="uploadNewAttachment()"
 			id="files"
-			multiple
 			ref="filesRef"
+			:disabled="loading || undefined"
+			multiple
 			type="file"
-		/>
+			@change="uploadNewAttachment()"
+		>
 
 		<ProgressBar
 			v-if="attachmentService.uploadProgress > 0"
@@ -23,14 +23,17 @@
 			is-primary
 		/>
 
-		<div class="files" v-if="attachments.length > 0">
+		<div
+			v-if="attachments.length > 0"
+			class="files"
+		>
 			<!-- 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">
@@ -44,7 +47,10 @@
 				</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>
@@ -63,24 +69,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>
@@ -103,11 +109,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>
@@ -115,15 +121,17 @@
 		<!-- 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"/>
+						<icon icon="cloud-upload-alt" />
+					</div>
+					<div class="hint">
+						{{ $t('task.attachment.drop') }}
 					</div>
-					<div class="hint">{{ $t('task.attachment.drop') }}</div>
 				</div>
 			</div>
 		</Teleport>
@@ -140,7 +148,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>
@@ -151,7 +159,10 @@
 			:enabled="attachmentImageBlobUrl !== null"
 			@close="attachmentImageBlobUrl = null"
 		>
-			<img :src="attachmentImageBlobUrl" alt=""/>
+			<img
+				:src="attachmentImageBlobUrl"
+				alt=""
+			>
 		</modal>
 	</div>
 </template>
@@ -178,9 +189,6 @@ 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,
@@ -188,9 +196,10 @@ const {
 	task: ITask,
 	editEnabled: boolean,
 }>()
-
 // FIXME: this should go through the store
-const emit = defineEmits(['task-changed'])
+const emit = defineEmits(['taskChanged'])
+const taskStore = useTaskStore()
+const {t} = useI18n({useScope: 'global'})
 
 const attachmentService = shallowReactive(new AttachmentService())
 
@@ -266,7 +275,7 @@ function copyUrl(attachment: IAttachment) {
 
 async function setCoverImage(attachment: IAttachment | null) {
 	const updatedTask = await taskStore.setCoverImage(task, attachment)
-	emit('task-changed', updatedTask)
+	emit('taskChanged', updatedTask)
 	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>
diff --git a/src/components/tasks/partials/checklist-summary.vue b/src/components/tasks/partials/checklist-summary.vue
index 625c5480b..2f554fb50 100644
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@@ -1,9 +1,29 @@
 <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>
-			<circle stroke-width="2" stroke-dasharray="31" :stroke-dashoffset="checklistCircleDone"
-					stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="5"></circle>
+	<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"
+			/>
 		</svg>
 		<span>{{ label }}</span>
 	</span>
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 69c8eb95e..188336f4f 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -1,20 +1,30 @@
 <template>
-	<div class="content details" v-if="enabled">
-		<h3 v-if="canWrite || comments.length > 0" :class="{'d-print-none': comments.length === 0}">
+	<div
+		v-if="enabled"
+		class="content details"
+	>
+		<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
-				class="is-inline-flex is-align-items-center"
 				v-if="taskCommentService.loading && saving === null && !creating"
+				class="is-inline-flex is-align-items-center"
 			>
-				<span class="loader is-inline-block mr-2"></span>
+				<span class="loader is-inline-block mr-2" />
 				{{ $t('task.comment.loading') }}
 			</span>
-			<div :key="c.id" class="media comment" v-for="c in comments">
+			<div
+				v-for="c in comments"
+				:key="c.id"
+				class="media comment"
+			>
 				<figure class="media-left is-hidden-mobile">
 					<img
 						:src="getAvatarUrl(c.author, 48)"
@@ -22,7 +32,7 @@
 						class="image is-avatar"
 						height="48"
 						width="48"
-					/>
+					>
 				</figure>
 				<div class="media-content">
 					<div class="comment-info">
@@ -32,9 +42,12 @@
 							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
@@ -45,32 +58,35 @@
 						</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>
+								<span class="loader is-inline-block mr-2" />
 								{{ $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
+					<Editor
+						v-model="c.comment"
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						v-model="c.comment"
-						@update:model-value="
+						:bottom-actions="actions[c.id]"
+						:show-save="true"
+						initial-mode="preview"
+						@update:modelValue="
 							() => {
 								toggleEdit(c)
 								editCommentWithDelay()
@@ -80,13 +96,13 @@
 							toggleEdit(c)
 							editComment()
 						}"
-						:bottom-actions="actions[c.id]"
-						:show-save="true"
-						initial-mode="preview"
 					/>
 				</div>
 			</div>
-			<div class="media comment d-print-none" v-if="canWrite">
+			<div
+				v-if="canWrite"
+				class="media comment d-print-none"
+			>
 				<figure class="media-left is-hidden-mobile">
 					<img
 						:src="userAvatar"
@@ -94,7 +110,7 @@
 						class="image is-avatar"
 						height="48"
 						width="48"
-					/>
+					>
 				</figure>
 				<div class="media-content">
 					<div class="form">
@@ -103,12 +119,14 @@
 								v-if="taskCommentService.loading && creating"
 								class="is-inline-flex"
 							>
-								<span class="loader is-inline-block mr-2"></span>
+								<span class="loader is-inline-block mr-2" />
 								{{ $t('task.comment.creating') }}
 							</span>
 						</CustomTransition>
 						<div class="field">
-							<editor
+							<Editor
+								v-if="editorActive"
+								v-model="newComment.comment"
 								:class="{
 									'is-loading':
 										taskCommentService.loading &&
@@ -117,8 +135,6 @@
 								:upload-callback="attachmentUpload"
 								:upload-enabled="true"
 								:placeholder="$t('task.comment.placeholder')"
-								v-if="editorActive"
-								v-model="newComment.comment"
 								@save="addComment()"
 							/>
 						</div>
@@ -141,11 +157,13 @@
 			@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>
diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue
index 26aa5e106..79caeb337 100644
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@@ -1,24 +1,42 @@
 <template>
 	<p class="created">
-		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
-			<i18n-t keypath="task.detail.created" scope="global">
+		<time
+			v-tooltip="formatDateLong(task.created)"
+			:datetime="formatISO(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 :datetime="formatISO(task.updated)" v-tooltip="updatedFormatted">
-				<i18n-t keypath="task.detail.updated" scope="global">
+			<time
+				v-tooltip="updatedFormatted"
+				:datetime="formatISO(task.updated)"
+			>
+				<i18n-t
+					keypath="task.detail.updated"
+					scope="global"
+				>
 					<span>{{ updatedSince }}</span>
 				</i18n-t>
 			</time>
 		</template>
 		<template v-if="task.done">
-			<br/>
-			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
-				<i18n-t keypath="task.detail.doneAt" scope="global">
+			<br>
+			<time
+				v-tooltip="doneFormatted"
+				:datetime="formatISO(task.doneAt)"
+			>
+				<i18n-t
+					keypath="task.detail.doneAt"
+					scope="global"
+				>
 					<span>{{ doneSince }}</span>
 				</i18n-t>
 			</time>
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index b9911a2ea..edcaf9a3a 100644
--- 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>
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index 9484f909a..82ece66b7 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -2,29 +2,35 @@
 	<div>
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="align-left"/>
+				<icon icon="align-left" />
 			</span>
 			{{ $t('task.attributes.description') }}
 			<CustomTransition name="fade">
-				<span class="is-small is-inline-flex" v-if="loading && saving">
-					<span class="loader is-inline-block mr-2"></span>
+				<span
+					v-if="loading && saving"
+					class="is-small is-inline-flex"
+				>
+					<span class="loader is-inline-block mr-2" />
 					{{ $t('misc.saving') }}
 				</span>
-				<span class="is-small has-text-success" v-else-if="!loading && saved">
-					<icon icon="check"/>
+				<span
+					v-else-if="!loading && saved"
+					class="is-small has-text-success"
+				>
+					<icon icon="check" />
 					{{ $t('misc.saved') }}
 				</span>
 			</CustomTransition>
 		</h3>
-		<editor
+		<Editor
+			v-model="description"
 			class="tiptap__task-description"
 			:is-edit-enabled="canWrite"
 			:upload-callback="uploadCallback"
 			:placeholder="$t('task.description.placeholder')"
 			:show-save="true"
 			edit-shortcut="e"
-			v-model="description"
-			@update:model-value="saveWithDelay"
+			@update:modelValue="saveWithDelay"
 			@save="save"
 		/>
 	</div>
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 3c561c039..77be58c84 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -1,23 +1,31 @@
 <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}">
-			<assignee-list :assignees="items" :remove="removeAssignee" :disabled="disabled"/>
+			<AssigneeList
+				:assignees="items"
+				:remove="removeAssignee"
+				:disabled="disabled"
+			/>
 		</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>
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index a2c6fc922..95e59d35b 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -1,37 +1,44 @@
 <template>
 	<Multiselect
+		v-model="labels"
 		:loading="loading"
 		:placeholder="$t('task.label.placeholder')"
 		:multiple="true"
-		@search="findLabel"
 		:search-results="foundLabels"
-		@select="addLabel"
 		label="title"
 		:creatable="creatable"
-		@create="createAndAddLabel"
 		:create-placeholder="$t('task.label.createPlaceholder')"
-		v-model="labels"
 		:search-delay="10"
 		:close-after-select="false"
+		@search="findLabel"
+		@select="addLabel"
+		@create="createAndAddLabel"
 	>
 		<template #tag="{item: label}">
 			<span
 				:style="{'background': label.hexColor, 'color': label.textColor}"
-				class="tag">
+				class="tag"
+			>
 				<span>{{ label.title }}</span>
-				<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
+				<BaseButton
+					v-cy="'taskDetail.removeLabel'"
+					class="delete is-small"
+					@click="removeLabel(label)"
+				/>
 			</span>
 		</template>
 		<template #searchResult="{option}">
 			<span
 				v-if="typeof option === 'string'"
-				class="tag search-result">
+				class="tag search-result"
+			>
 				<span>{{ option }}</span>
 			</span>
 			<span
 				v-else
 				:style="{'background': option.hexColor, 'color': option.textColor}"
-				class="tag search-result">
+				class="tag search-result"
+			>
 				<span>{{ option.title }}</span>
 			</span>
 		</template>
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 78abca40c..ae5d35854 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -1,8 +1,15 @@
 <template>
 	<div class="heading">
 		<div class="flex is-align-items-center">
-			<BaseButton @click="copyUrl"><h1 class="title task-id">{{ textIdentifier }}</h1></BaseButton>
-			<Done class="heading__done" :is-done="task.done"/>
+			<BaseButton @click="copyUrl">
+				<h1 class="title task-id">
+					{{ textIdentifier }}
+				</h1>
+			</BaseButton>
+			<Done
+				class="heading__done"
+				:is-done="task.done"
+			/>
 			<ColorBubble
 				v-if="task.hexColor !== ''"
 				:color="getHexColor(task.hexColor)"
@@ -12,10 +19,10 @@
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
-			@blur="save(($event.target as HTMLInputElement).textContent as string)"
-			@keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()"
 			:contenteditable="canWrite ? true : undefined"
 			:spellcheck="false"
+			@blur="save(($event.target as HTMLInputElement).textContent as string)"
+			@keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()"
 		>
 			{{ task.title.trim() }}
 		</h1>
@@ -24,14 +31,17 @@
 				v-if="loading && saving"
 				class="is-inline-flex is-align-items-center"
 			>
-				<span class="loader is-inline-block mr-2"></span>
+				<span class="loader is-inline-block mr-2" />
 				{{ $t('misc.saving') }}
 			</span>
 			<span
 				v-else-if="!loading && showSavedMessage"
 				class="has-text-success is-inline-flex is-align-content-center"
 			>
-				<icon icon="check" class="mr-2"/>
+				<icon
+					icon="check"
+					class="mr-2"
+				/>
 				{{ $t('misc.saved') }}
 			</span>
 		</CustomTransition>
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 161f67c17..6b66f5831 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -17,10 +17,14 @@
 			:src="coverImageBlobUrl"
 			alt=""
 			class="cover-image"
-		/>
+		>
 		<div class="p-2">
 			<span class="task-id">
-				<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
+				<Done
+					class="kanban-card__done"
+					:is-done="task.done"
+					variant="small"
+				/>
 				<template v-if="task.identifier === ''">
 					#{{ task.index }}
 				</template>
@@ -29,12 +33,13 @@
 				</template>
 			</span>
 			<span
+				v-if="task.dueDate > 0"
+				v-tooltip="formatDateLong(task.dueDate)"
 				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 				class="due-date"
-				v-if="task.dueDate > 0"
-				v-tooltip="formatDateLong(task.dueDate)">
+			>
 				<span class="icon">
-					<icon :icon="['far', 'calendar-alt']"/>
+					<icon :icon="['far', 'calendar-alt']" />
 				</span>
 				<time :datetime="formatISO(task.dueDate)">
 					{{ formatDateSince(task.dueDate) }}
@@ -43,32 +48,44 @@
 			<h3>{{ task.title }}</h3>
 
 			<ProgressBar
-				class="task-progress"
 				v-if="task.percentDone > 0"
+				class="task-progress"
 				:value="task.percentDone * 100"
 			/>
-
 			<div class="footer">
-				<labels :labels="task.labels"/>
-				<priority-label
+				<Labels :labels="task.labels" />
+				<PriorityLabel
 					:priority="task.priority"
 					:done="task.done"
-					class="is-inline-flex is-align-items-center"/>
-				<assignee-list
+					class="is-inline-flex is-align-items-center"
+				/>
+				<AssigneeList
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
 					:avatar-size="24"
 					class="mr-1"
 				/>
-				<checklist-summary :task="task" class="checklist"/>
-				<span class="icon" v-if="task.attachments.length > 0">
-					<icon icon="paperclip"/>	
+				<ChecklistSummary
+					:task="task"
+					class="checklist"
+				/>
+				<span
+					v-if="task.attachments.length > 0"
+					class="icon"
+				>
+					<icon icon="paperclip" />	
 				</span>
-				<span v-if="!isEditorContentEmpty(task.description)" class="icon">
-					<icon icon="align-left"/>
+				<span
+					v-if="!isEditorContentEmpty(task.description)"
+					class="icon"
+				>
+					<icon icon="align-left" />
 				</span>
-				<span class="icon" v-if="task.repeatAfter.amount > 0">
-					<icon icon="history"/>
+				<span
+					v-if="task.repeatAfter.amount > 0"
+					class="icon"
+				>
+					<icon icon="history" />
 				</span>
 			</div>
 		</div>
@@ -98,10 +115,6 @@ import {useAuthStore} from '@/stores/auth'
 import {playPopSound} from '@/helpers/playPop'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 
-const router = useRouter()
-
-const loadingInternal = ref(false)
-
 const {
 	task,
 	loading = false,
@@ -110,6 +123,10 @@ const {
 	loading: boolean,
 }>()
 
+const router = useRouter()
+
+const loadingInternal = ref(false)
+
 const color = computed(() => getHexColor(task.hexColor))
 
 async function toggleTaskDone(task: ITask) {
diff --git a/src/components/tasks/partials/labels.vue b/src/components/tasks/partials/labels.vue
index 36c8cef37..45f08267b 100644
--- a/src/components/tasks/partials/labels.vue
+++ b/src/components/tasks/partials/labels.vue
@@ -2,8 +2,8 @@
 	<div class="label-wrapper">
 		<XLabel
 			v-for="label in labels"
-			:label="label"
 			:key="label.id"
+			:label="label"
 		/>
 	</div>
 </template>
diff --git a/src/components/tasks/partials/percentDoneSelect.vue b/src/components/tasks/partials/percentDoneSelect.vue
index 0913840d2..79017db05 100644
--- a/src/components/tasks/partials/percentDoneSelect.vue
+++ b/src/components/tasks/partials/percentDoneSelect.vue
@@ -4,17 +4,39 @@
 			v-model.number="percentDone"
 			:disabled="disabled || undefined"
 		>
-			<option value="0">0%</option>
-			<option value="0.1">10%</option>
-			<option value="0.2">20%</option>
-			<option value="0.3">30%</option>
-			<option value="0.4">40%</option>
-			<option value="0.5">50%</option>
-			<option value="0.6">60%</option>
-			<option value="0.7">70%</option>
-			<option value="0.8">80%</option>
-			<option value="0.9">90%</option>
-			<option value="1">100%</option>
+			<option value="0">
+				0%
+			</option>
+			<option value="0.1">
+				10%
+			</option>
+			<option value="0.2">
+				20%
+			</option>
+			<option value="0.3">
+				30%
+			</option>
+			<option value="0.4">
+				40%
+			</option>
+			<option value="0.5">
+				50%
+			</option>
+			<option value="0.6">
+				60%
+			</option>
+			<option value="0.7">
+				70%
+			</option>
+			<option value="0.8">
+				80%
+			</option>
+			<option value="0.9">
+				90%
+			</option>
+			<option value="1">
+				100%
+			</option>
 		</select>
 	</div>
 </template>
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index f7acf66ac..c7feab085 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -1,10 +1,14 @@
 <template>
 	<span
+		v-if="!done && (showAll || priority >= priorities.HIGH)"
 		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
 		class="priority-label"
-		v-if="!done && (showAll || priority >= priorities.HIGH)">
-		<span class="icon" v-if="priority >= priorities.HIGH">
-			<icon icon="exclamation"/>
+	>
+		<span
+			v-if="priority >= priorities.HIGH"
+			class="icon"
+		>
+			<icon icon="exclamation" />
 		</span>
 		<span>
 			<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
@@ -14,8 +18,11 @@
 			<template v-if="priority === priorities.URGENT">{{ $t('task.priority.urgent') }}</template>
 			<template v-if="priority === priorities.DO_NOW">{{ $t('task.priority.doNow') }}</template>
 		</span>
-		<span class="icon pr-0" v-if="priority === priorities.DO_NOW">
-			<icon icon="exclamation"/>
+		<span
+			v-if="priority === priorities.DO_NOW"
+			class="icon pr-0"
+		>
+			<icon icon="exclamation" />
 		</span>
 	</span>
 </template>
diff --git a/src/components/tasks/partials/prioritySelect.vue b/src/components/tasks/partials/prioritySelect.vue
index 70fdf6961..3b96d5a01 100644
--- a/src/components/tasks/partials/prioritySelect.vue
+++ b/src/components/tasks/partials/prioritySelect.vue
@@ -2,15 +2,27 @@
 	<div class="select">
 		<select
 			v-model="priority"
-			@change="updateData"
 			:disabled="disabled || undefined"
+			@change="updateData"
 		>
-			<option :value="PRIORITIES.UNSET">{{ $t('task.priority.unset') }}</option>
-			<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
-			<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
-			<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
-			<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
-			<option :value="PRIORITIES.DO_NOW">{{ $t('task.priority.doNow') }}</option>
+			<option :value="PRIORITIES.UNSET">
+				{{ $t('task.priority.unset') }}
+			</option>
+			<option :value="PRIORITIES.LOW">
+				{{ $t('task.priority.low') }}
+			</option>
+			<option :value="PRIORITIES.MEDIUM">
+				{{ $t('task.priority.medium') }}
+			</option>
+			<option :value="PRIORITIES.HIGH">
+				{{ $t('task.priority.high') }}
+			</option>
+			<option :value="PRIORITIES.URGENT">
+				{{ $t('task.priority.urgent') }}
+			</option>
+			<option :value="PRIORITIES.DO_NOW">
+				{{ $t('task.priority.doNow') }}
+			</option>
 		</select>
 	</div>
 </template>
diff --git a/src/components/tasks/partials/projectSearch.vue b/src/components/tasks/partials/projectSearch.vue
index d2466cafc..c0d89e812 100644
--- a/src/components/tasks/partials/projectSearch.vue
+++ b/src/components/tasks/partials/projectSearch.vue
@@ -6,12 +6,15 @@
 		label="title"
 		:select-placeholder="$t('project.searchSelect')"
 		:model-value="project"
-		@update:model-value="Object.assign(project, $event)"
+		@update:modelValue="Object.assign(project, $event)"
 		@select="select"
 		@search="findProjects"
 	>
 		<template #searchResult="{option}">
-			<span class="has-text-grey" v-if="projectStore.getAncestors(option).length > 1">
+			<span
+				v-if="projectStore.getAncestors(option).length > 1"
+				class="has-text-grey"
+			>
 				{{ projectStore.getAncestors(option).filter(p => p.id !== option.id).map(p => getProjectTitle(p)).join(' &gt; ') }} &gt;
 			</span>
 			{{ getProjectTitle(option) }}
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 95496f848..7f3b553d2 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -1,22 +1,25 @@
 <template>
 	<template v-if="mode !== 'disabled' && prefixes !== undefined">
 		<BaseButton
-			@click="() => visible = true"
-			class="icon is-small show-helper-text"
 			v-tooltip="$t('task.quickAddMagic.hint')"
+			class="icon is-small show-helper-text"
 			:aria-label="$t('task.quickAddMagic.hint')"
 			:class="{'is-highlighted': highlightHintIcon}"
+			@click="() => visible = true"
 		>
-			<icon :icon="['far', 'circle-question']"/>
+			<icon :icon="['far', 'circle-question']" />
 		</BaseButton>
 		<modal
 			:enabled="visible"
-			@close="() => visible = false"
 			transition-name="fade"
 			:overflow="true"
 			variant="hint-modal"
+			@close="() => visible = false"
 		>
-			<card class="has-no-shadow" :title="$t('task.quickAddMagic.title')">
+			<card
+				class="has-no-shadow"
+				:title="$t('task.quickAddMagic.title')"
+			>
 				<p>{{ $t('task.quickAddMagic.intro') }}</p>
 
 				<h3>{{ $t('task.attributes.labels') }}</h3>
@@ -102,15 +105,15 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {PREFIXES} from '@/modules/parseTaskText'
 import {useAuthStore} from '@/stores/auth'
 
+defineProps<{
+	highlightHintIcon?: boolean,
+}>()
+
 const authStore = useAuthStore()
 
 const visible = ref(false)
 const mode = computed(() => authStore.settings.frontendSettings.quickAddMagicMode)
 
-defineProps<{
-	highlightHintIcon?: boolean,
-}>()
-
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
 
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 5359d9374..71a15a1d1 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -2,41 +2,53 @@
 	<div class="task-relations">
 		<x-button
 			v-if="editEnabled && Object.keys(relatedTasks).length > 0"
-			@click="showNewRelationForm = !showNewRelationForm"
+			id="showRelatedTasksFormButton"
+			v-tooltip="$t('task.relation.add')"
 			class="is-pulled-right add-task-relation-button d-print-none"
 			:class="{'is-active': showNewRelationForm}"
-			v-tooltip="$t('task.relation.add')"
 			variant="secondary"
 			icon="plus"
 			:shadow="false"
-			id="showRelatedTasksFormButton"
+			@click="showNewRelationForm = !showNewRelationForm"
 		/>
 		<transition-group name="fade">
 			<template v-if="editEnabled && showCreate">
-				<label class="label" key="label">
+				<label
+					key="label"
+					class="label"
+				>
 					{{ $t('task.relation.new') }}
 					<CustomTransition name="fade">
-						<span class="is-inline-flex" v-if="taskRelationService.loading">
-							<span class="loader is-inline-block mr-2"></span>
+						<span
+							v-if="taskRelationService.loading"
+							class="is-inline-flex"
+						>
+							<span class="loader is-inline-block mr-2" />
 							{{ $t('misc.saving') }}
 						</span>
-						<span class="has-text-success" v-else-if="!taskRelationService.loading && saved">
+						<span
+							v-else-if="!taskRelationService.loading && saved"
+							class="has-text-success"
+						>
 							{{ $t('misc.saved') }}
 						</span>
 					</CustomTransition>
 				</label>
-				<div class="field" key="field-search">
+				<div
+					key="field-search"
+					class="field"
+				>
 					<Multiselect
+						v-model="newTaskRelation.task"
+						v-focus
 						:placeholder="$t('task.relation.searchPlaceholder')"
-						@search="findTasks"
 						:loading="taskService.loading"
 						:search-results="mappedFoundTasks"
 						label="title"
-						v-model="newTaskRelation.task"
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
+						@search="findTasks"
 						@create="createAndRelateTask"
-						v-focus
 					>
 						<template #searchResult="{option: task}">
 							<span 
@@ -45,62 +57,86 @@
 								:class="{'is-strikethrough': task.done}"
 							>
 								<span
-									class="different-project"
 									v-if="task.projectId !== projectId"
+									class="different-project"
 								>
 									<span
 										v-if="task.differentProject !== null"
-										v-tooltip="$t('task.relation.differentProject')">
+										v-tooltip="$t('task.relation.differentProject')"
+									>
 										{{ task.differentProject }} >
 									</span>
 								</span>
 								{{ task.title }}
 							</span>
-							<span class="search-result" v-else>
+							<span
+								v-else
+								class="search-result"
+							>
 								{{ task }}
 							</span>
 						</template>
 					</Multiselect>
 				</div>
-				<div class="field has-addons mb-4" key="field-kind">
+				<div
+					key="field-kind"
+					class="field has-addons mb-4"
+				>
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
 							<select v-model="newTaskRelation.kind">
-								<option value="unset">{{ $t('task.relation.select') }}</option>
-								<option :key="`option_${rk}`" :value="rk" v-for="rk in RELATION_KINDS">
+								<option value="unset">
+									{{ $t('task.relation.select') }}
+								</option>
+								<option
+									v-for="rk in RELATION_KINDS"
+									:key="`option_${rk}`"
+									:value="rk"
+								>
 									{{ $t(`task.relation.kinds.${rk}`, 1) }}
 								</option>
 							</select>
 						</div>
 					</div>
 					<div class="control">
-						<x-button @click="addTaskRelation()">{{ $t('task.relation.add') }}</x-button>
+						<x-button @click="addTaskRelation()">
+							{{ $t('task.relation.add') }}
+						</x-button>
 					</div>
 				</div>
 			</template>
 		</transition-group>
 
-		<div :key="rts.kind" class="related-tasks" v-for="rts in mappedRelatedTasks">
+		<div
+			v-for="rts in mappedRelatedTasks"
+			:key="rts.kind"
+			class="related-tasks"
+		>
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
-				<div :key="t.id" class="task" v-for="t in rts.tasks">
+				<div
+					v-for="t in rts.tasks"
+					:key="t.id"
+					class="task"
+				>
 					<div class="is-flex is-align-items-center">
 						<Fancycheckbox
-							class="task-done-checkbox"
 							v-model="t.done"
-							@update:model-value="toggleTaskDone(t)"
+							class="task-done-checkbox"
+							@update:modelValue="toggleTaskDone(t)"
 						/>
 						<router-link
 							:to="{ name: route.name as string, params: { id: t.id } }"
 							:class="{ 'is-strikethrough': t.done}"
 						>
 							<span
-								class="different-project"
 								v-if="t.projectId !== projectId"
+								class="different-project"
 							>
 								<span
 									v-if="t.differentProject !== null"
-									v-tooltip="$t('task.relation.differentProject')">
+									v-tooltip="$t('task.relation.differentProject')"
+								>
 									{{ t.differentProject }} >
 								</span>
 							</span>
@@ -109,18 +145,21 @@
 					</div>
 					<BaseButton
 						v-if="editEnabled"
+						class="remove"
 						@click="setRelationToDelete({
 							relationKind: rts.kind,
 							otherTaskId: t.id
 						})"
-						class="remove"
 					>
-						<icon icon="trash-alt"/>
+						<icon icon="trash-alt" />
 					</BaseButton>
 				</div>
 			</div>
 		</div>
-		<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
+		<p
+			v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0"
+			class="none"
+		>
 			{{ $t('task.relation.noneYet') }}
 		</p>
 
@@ -129,11 +168,13 @@
 			@close="relationToDelete = undefined"
 			@submit="removeTaskRelation()"
 		>
-			<template #header><span>{{ $t('task.relation.delete') }}</span></template>
+			<template #header>
+				<span>{{ $t('task.relation.delete') }}</span>
+			</template>
 
 			<template #text>
 				<p>
-					{{ $t('task.relation.deleteText1') }}<br/>
+					{{ $t('task.relation.deleteText1') }}<br>
 					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
 				</p>
 			</template>
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index 3ffd5296d..e60ca92a8 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -10,8 +10,15 @@
 				</SimpleButton>
 			</template>
 			<template #content="{isOpen, close}">
-				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
-					<div class="options" v-if="activeForm === null">
+				<Card
+					class="reminder-options-popup"
+					:class="{'is-open': isOpen}"
+					:padding="false"
+				>
+					<div
+						v-if="activeForm === null"
+						class="options"
+					>
 						<SimpleButton
 							v-for="(p, k) in presets"
 							:key="k"
@@ -22,16 +29,16 @@
 							{{ formatReminder(p) }}
 						</SimpleButton>
 						<SimpleButton
-							@click="showFormSwitch = 'relative'"
 							class="option-button"
 							:class="{'currently-active': typeof modelValue !== 'undefined' && modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
+							@click="showFormSwitch = 'relative'"
 						>
 							{{ $t('task.reminder.custom') }}
 						</SimpleButton>
 						<SimpleButton
-							@click="showFormSwitch = 'absolute'"
 							class="option-button"
 							:class="{'currently-active': modelValue?.relativeTo === null}"
+							@click="showFormSwitch = 'absolute'"
 						>
 							{{ $t('task.reminder.dateAndTime') }}
 						</SimpleButton>
@@ -81,8 +88,6 @@ import TaskReminderModel from '@/models/taskReminder'
 import Card from '@/components/misc/card.vue'
 import SimpleButton from '@/components/input/SimpleButton.vue'
 
-const {t} = useI18n({useScope: 'global'})
-
 const {
 	modelValue,
 	clearAfterUpdate = false,
@@ -95,6 +100,8 @@ const {
 
 const emit = defineEmits(['update:modelValue'])
 
+const {t} = useI18n({useScope: 'global'})
+
 const reminder = ref<ITaskReminder>(new TaskReminderModel())
 
 const presets = computed<TaskReminderModel[]>(() => [
diff --git a/src/components/tasks/partials/reminder-period.vue b/src/components/tasks/partials/reminder-period.vue
index ab85d6d87..919e32825 100644
--- a/src/components/tasks/partials/reminder-period.vue
+++ b/src/components/tasks/partials/reminder-period.vue
@@ -3,24 +3,38 @@
 		class="reminder-period control"
 	>
 		<input
-			class="input"
 			v-model.number="period.duration"
+			class="input"
 			type="number"
 			min="0"
 			@change="updateData"
-		/>
+		>
 
 		<div class="select">
-			<select v-model="period.durationUnit" @change="updateData">
-				<option value="minutes">{{ $t('time.units.minutes', period.duration) }}</option>
-				<option value="hours">{{ $t('time.units.hours', period.duration) }}</option>
-				<option value="days">{{ $t('time.units.days', period.duration) }}</option>
-				<option value="weeks">{{ $t('time.units.weeks', period.duration) }}</option>
+			<select
+				v-model="period.durationUnit"
+				@change="updateData"
+			>
+				<option value="minutes">
+					{{ $t('time.units.minutes', period.duration) }}
+				</option>
+				<option value="hours">
+					{{ $t('time.units.hours', period.duration) }}
+				</option>
+				<option value="days">
+					{{ $t('time.units.days', period.duration) }}
+				</option>
+				<option value="weeks">
+					{{ $t('time.units.weeks', period.duration) }}
+				</option>
 			</select>
 		</div>
 
 		<div class="select">
-			<select v-model.number="period.sign" @change="updateData">
+			<select
+				v-model.number="period.sign"
+				@change="updateData"
+			>
 				<option value="-1">
 					{{ $t('task.reminder.beforeShort') }}
 				</option>
@@ -31,7 +45,10 @@
 		</div>
 
 		<div class="select">
-			<select v-model="period.relativeTo" @change="updateData">
+			<select
+				v-model="period.relativeTo"
+				@change="updateData"
+			>
 				<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">
 					{{ $t('task.attributes.dueDate') }}
 				</option>
diff --git a/src/components/tasks/partials/reminders.story.vue b/src/components/tasks/partials/reminders.story.vue
index 2fb40a1cb..ca619ab4a 100644
--- a/src/components/tasks/partials/reminders.story.vue
+++ b/src/components/tasks/partials/reminders.story.vue
@@ -11,16 +11,16 @@ const newReminder = ref(null)
 <template>
 	<Story>
 		<Variant title="Default">
-			<reminders/>
+			<reminders />
 		</Variant>
 		<Variant title="Reminder Detail with fixed date">
-			<reminder-detail v-model="reminderNow"/>
+			<ReminderDetail v-model="reminderNow" />
 		</Variant>
 		<Variant title="Reminder Detail with relative date">
-			<reminder-detail v-model="relativeReminder"/>
+			<ReminderDetail v-model="relativeReminder" />
 		</Variant>
 		<Variant title="New Reminder Detail">
-			<reminder-detail v-model="newReminder"/>
+			<ReminderDetail v-model="newReminder" />
 		</Variant>
 	</Story>
 </template>
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index dd2f80548..5af213f81 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -7,26 +7,26 @@
 			class="reminder-input"
 		>
 			<ReminderDetail
+				v-model="reminders[index]"
 				class="reminder-detail"
 				:disabled="disabled"
-				v-model="reminders[index]"
-				@update:model-value="updateData"
 				:default-relative-to="defaultRelativeTo"
+				@update:modelValue="updateData"
 			/>
 			<BaseButton
 				v-if="!disabled"
-				@click="removeReminderByIndex(index)"
 				class="remove"
+				@click="removeReminderByIndex(index)"
 			>
-				<icon icon="times"/>
+				<icon icon="times" />
 			</BaseButton>
 		</div>
 
 		<ReminderDetail
 			:disabled="disabled"
-			@update:modelValue="addNewReminder"
 			:clear-after-update="true"
 			:default-relative-to="defaultRelativeTo"
+			@update:modelValue="addNewReminder"
 		/>
 	</div>
 </template>
diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue
index 1ba858cb7..398efd939 100644
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@@ -1,56 +1,90 @@
 <template>
 	<div class="control repeat-after-input">
 		<div class="buttons has-addons is-centered mt-2">
-			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">
+			<x-button
+				variant="secondary"
+				class="is-small"
+				@click="() => setRepeatAfter(1, 'days')"
+			>
 				{{ $t('task.repeat.everyDay') }}
 			</x-button>
-			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">
+			<x-button
+				variant="secondary"
+				class="is-small"
+				@click="() => setRepeatAfter(1, 'weeks')"
+			>
 				{{ $t('task.repeat.everyWeek') }}
 			</x-button>
-			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(30, 'days')">
+			<x-button
+				variant="secondary"
+				class="is-small"
+				@click="() => setRepeatAfter(30, 'days')"
+			>
 				{{ $t('task.repeat.every30d') }}
 			</x-button>
 		</div>
 		<div class="is-flex is-align-items-center mb-2">
-			<label for="repeatMode" class="is-fullwidth">
+			<label
+				for="repeatMode"
+				class="is-fullwidth"
+			>
 				{{ $t('task.repeat.mode') }}:
 			</label>
 			<div class="control">
 				<div class="select">
-					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
+					<select
+						id="repeatMode"
+						v-model="task.repeatMode"
+						@change="updateData"
+					>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">
+							{{ $t('misc.default') }}
+						</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
+							{{ $t('task.repeat.monthly') }}
+						</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">
+							{{ $t('task.repeat.fromCurrentDate') }}
+						</option>
 					</select>
 				</div>
 			</div>
 		</div>
-		<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
+		<div
+			v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH"
+			class="is-flex"
+		>
 			<p class="pr-4">
 				{{ $t('task.repeat.each') }}
 			</p>
 			<div class="field has-addons is-fullwidth">
 				<div class="control">
 					<input
+						v-model="repeatAfter.amount"
 						:disabled="disabled || undefined"
-						@change="updateData"
 						class="input"
 						:placeholder="$t('task.repeat.specifyAmount')"
-						v-model="repeatAfter.amount"
 						type="number"
 						min="0"
-					/>
+						@change="updateData"
+					>
 				</div>
 				<div class="control">
 					<div class="select">
 						<select
 							v-model="repeatAfter.type"
-							@change="updateData"
 							:disabled="disabled || undefined"
+							@change="updateData"
 						>
-							<option value="hours">{{ $t('task.repeat.hours') }}</option>
-							<option value="days">{{ $t('task.repeat.days') }}</option>
-							<option value="weeks">{{ $t('task.repeat.weeks') }}</option>
+							<option value="hours">
+								{{ $t('task.repeat.hours') }}
+							</option>
+							<option value="days">
+								{{ $t('task.repeat.days') }}
+							</option>
+							<option value="weeks">
+								{{ $t('task.repeat.weeks') }}
+							</option>
 						</select>
 					</div>
 				</div>
@@ -74,7 +108,7 @@ const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITask>,
 		default: () => ({}),
-		required: true,
+		required: false,
 	},
 	disabled: {
 		type: Boolean,
@@ -82,10 +116,10 @@ const props = defineProps({
 	},
 })
 
-const {t} = useI18n({useScope: 'global'})
-
 const emit = defineEmits(['update:modelValue'])
 
+const {t} = useI18n({useScope: 'global'})
+
 const task = ref<ITask>(new TaskModel())
 const repeatAfter = reactive({
 	amount: 0,
diff --git a/src/components/tasks/partials/singleTaskInProject.vue b/src/components/tasks/partials/singleTaskInProject.vue
index 519c279d6..95d9f8888 100644
--- a/src/components/tasks/partials/singleTaskInProject.vue
+++ b/src/components/tasks/partials/singleTaskInProject.vue
@@ -1,17 +1,17 @@
 <template>
 	<div>
 		<div
+			ref="taskContainerRef"
 			:class="{'is-loading': taskService.loading}"
 			class="task loader-container single-task"
+			tabindex="-1"
 			@mouseup.stop.self="openTaskDetail"
 			@mousedown.stop.self="focusTaskLink"
-			ref="taskContainerRef"
-			tabindex="-1"
 		>
-			<fancycheckbox
-				:disabled="(isArchived || disabled) && !canMarkAsDone"
-				@update:model-value="markAsDone"
+			<Fancycheckbox
 				v-model="task.done"
+				:disabled="(isArchived || disabled) && !canMarkAsDone"
+				@update:modelValue="markAsDone"
 			/>
 
 			<ColorBubble
@@ -26,42 +26,46 @@
 				@mouseup.stop.self="openTaskDetail"
 				@mousedown.stop.self="focusTaskLink"
 			>
-			<span>
-				<router-link
-					v-if="showProject && typeof project !== 'undefined'"
-					:to="{ name: 'project.list', params: { projectId: task.projectId } }"
-					class="task-project mr-1"
-					:class="{'mr-2': task.hexColor !== ''}"
-					v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-				>
-					{{ project.title }}
-				</router-link>
+				<span>
+					<router-link
+						v-if="showProject && typeof project !== 'undefined'"
+						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
+						:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+						class="task-project mr-1"
+						:class="{'mr-2': task.hexColor !== ''}"
+					>
+						{{ project.title }}
+					</router-link>
 
-				<ColorBubble
-					v-if="task.hexColor !== ''"
-					:color="getHexColor(task.hexColor)"
-					class="mr-1"
-				/>
+					<ColorBubble
+						v-if="task.hexColor !== ''"
+						:color="getHexColor(task.hexColor)"
+						class="mr-1"
+					/>
 			
-				<priority-label :priority="task.priority" :done="task.done" class="pr-2"/>
+					<PriorityLabel
+						:priority="task.priority"
+						:done="task.done"
+						class="pr-2"
+					/>
 				
-				<router-link
-					:to="taskDetailRoute"
-					class="task-link"
-					ref="taskLink"
-					tabindex="-1"
-				>
+					<router-link
+						ref="taskLink"
+						:to="taskDetailRoute"
+						class="task-link"
+						tabindex="-1"
+					>
 						{{ task.title }}
-				</router-link>
-			</span>
+					</router-link>
+				</span>
 
-				<labels
+				<Labels
 					v-if="task.labels.length > 0"
 					class="labels ml-2 mr-1"
 					:labels="task.labels"
 				/>
 
-				<assignee-list
+				<AssigneeList
 					v-if="task.assignees.length > 0"
 					:assignees="task.assignees"
 					:avatar-size="25"
@@ -72,9 +76,9 @@
 				<!-- FIXME: use popup -->
 				<BaseButton
 					v-if="+new Date(task.dueDate) > 0"
+					v-tooltip="formatDateLong(task.dueDate)"
 					class="dueDate"
 					@click.prevent.stop="showDefer = !showDefer"
-					v-tooltip="formatDateLong(task.dueDate)"
 				>
 					<time
 						:datetime="formatISO(task.dueDate)"
@@ -86,22 +90,35 @@
 					</time>
 				</BaseButton>
 				<CustomTransition name="fade">
-					<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
+					<DeferTask
+						v-if="+new Date(task.dueDate) > 0 && showDefer"
+						ref="deferDueDate"
+						v-model="task"
+					/>
 				</CustomTransition>
 
 				<span>
-				<span class="project-task-icon" v-if="task.attachments.length > 0">
-					<icon icon="paperclip"/>
+					<span
+						v-if="task.attachments.length > 0"
+						class="project-task-icon"
+					>
+						<icon icon="paperclip" />
+					</span>
+					<span
+						v-if="!isEditorContentEmpty(task.description)"
+						class="project-task-icon"
+					>
+						<icon icon="align-left" />
+					</span>
+					<span
+						v-if="task.repeatAfter.amount > 0"
+						class="project-task-icon"
+					>
+						<icon icon="history" />
+					</span>
 				</span>
-				<span class="project-task-icon" v-if="!isEditorContentEmpty(task.description)">
-					<icon icon="align-left"/>
-				</span>
-				<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
-					<icon icon="history"/>
-				</span>
-			</span>
 
-				<checklist-summary :task="task"/>
+				<ChecklistSummary :task="task" />
 			</div>
 
 			<ProgressBar
@@ -118,22 +135,28 @@
 			
 			<router-link
 				v-if="showProjectSeparately"
+				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 				:to="{ name: 'project.list', params: { projectId: task.projectId } }"
 				class="task-project"
-				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 			>
 				{{ project.title }}
 			</router-link>
 
 			<BaseButton
 				:class="{'is-favorite': task.isFavorite}"
-				@click="toggleFavorite"
 				class="favorite"
+				@click="toggleFavorite"
 			>
-				<icon icon="star" v-if="task.isFavorite"/>
-				<icon :icon="['far', 'star']" v-else/>
+				<icon
+					v-if="task.isFavorite"
+					icon="star"
+				/>
+				<icon
+					v-else
+					:icon="['far', 'star']"
+				/>
 			</BaseButton>
-			<slot/>
+			<slot />
 		</div>
 		<template v-if="typeof task.relatedTasks?.subtask !== 'undefined'">
 			<template v-for="subtask in task.relatedTasks.subtask">
@@ -201,6 +224,8 @@ const {
 	allTasks?: ITask[],
 }>()
 
+const emit = defineEmits(['taskUpdated'])
+
 function getTaskById(taskId: number): ITask | undefined {
 	if (typeof allTasks === 'undefined' || allTasks.length === 0) {
 		return null
@@ -209,8 +234,6 @@ function getTaskById(taskId: number): ITask | undefined {
 	return allTasks.find(t => t.id === taskId)
 }
 
-const emit = defineEmits(['task-updated'])
-
 const {t} = useI18n({useScope: 'global'})
 
 const taskService = shallowReactive(new TaskService())
@@ -278,7 +301,7 @@ async function markAsDone(checked: boolean) {
 		if (checked && useAuthStore().settings.frontendSettings.playSoundWhenDone) {
 			playPopSound()
 		}
-		emit('task-updated', newTask)
+		emit('taskUpdated', newTask)
 		success({
 			message: task.value.done ?
 				t('task.doneSuccess') :
@@ -304,7 +327,7 @@ function undoDone(checked: boolean) {
 
 async function toggleFavorite() {
 	task.value = await taskStore.toggleFavorite(task.value)
-	emit('task-updated', task.value)
+	emit('taskUpdated', task.value)
 }
 
 const deferDueDate = ref<typeof DeferTask | null>(null)
diff --git a/src/components/tasks/partials/singleTaskInlineReadonly.vue b/src/components/tasks/partials/singleTaskInlineReadonly.vue
index 1a201f496..47ea10f7e 100644
--- a/src/components/tasks/partials/singleTaskInlineReadonly.vue
+++ b/src/components/tasks/partials/singleTaskInlineReadonly.vue
@@ -3,9 +3,9 @@
 		<span>
 			<span
 				v-if="showProject && typeof project !== 'undefined'"
+				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 				class="task-project"
 				:class="{'mr-2': task.hexColor !== ''}"
-				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 			>
 				{{ project.title }}
 			</span>
@@ -16,10 +16,16 @@
 				class="mr-1"
 			/>
 
-			<priority-label :priority="task.priority" :done="task.done"/>
+			<PriorityLabel
+				:priority="task.priority"
+				:done="task.done"
+			/>
 
 			<!-- Show any parent tasks to make it clear this task is a sub task of something -->
-			<span class="parent-tasks" v-if="typeof task.relatedTasks?.parenttask !== 'undefined'">
+			<span
+				v-if="typeof task.relatedTasks?.parenttask !== 'undefined'"
+				class="parent-tasks"
+			>
 				<template v-for="(pt, i) in task.relatedTasks.parenttask">
 					{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
 				</template>
@@ -28,13 +34,13 @@
 			{{ task.title }}
 		</span>
 
-		<labels
+		<Labels
 			v-if="task.labels.length > 0"
 			class="labels ml-2 mr-1"
 			:labels="task.labels"
 		/>
 
-		<assignee-list
+		<AssigneeList
 			v-if="task.assignees.length > 0"
 			:assignees="task.assignees"
 			:avatar-size="20"
@@ -44,8 +50,8 @@
 
 		<span
 			v-if="+new Date(task.dueDate) > 0"
-			class="dueDate"
 			v-tooltip="formatDateLong(task.dueDate)"
+			class="dueDate"
 		>
 			<time
 				:datetime="formatISO(task.dueDate)"
@@ -57,23 +63,33 @@
 		</span>
 
 		<span>
-			<span class="project-task-icon" v-if="task.attachments.length > 0">
-				<icon icon="paperclip"/>
+			<span
+				v-if="task.attachments.length > 0"
+				class="project-task-icon"
+			>
+				<icon icon="paperclip" />
 			</span>
-			<span class="project-task-icon" v-if="task.description">
-				<icon icon="align-left"/>
+			<span
+				v-if="task.description"
+				class="project-task-icon"
+			>
+				<icon icon="align-left" />
 			</span>
-			<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
-				<icon icon="history"/>
+			<span
+				v-if="task.repeatAfter.amount > 0"
+				class="project-task-icon"
+			>
+				<icon icon="history" />
 			</span>
 		</span>
 
-		<checklist-summary :task="task"/>
+		<ChecklistSummary :task="task" />
 
 		<progress
-			class="progress is-small"
 			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100"
+			class="progress is-small"
+			:value="task.percentDone * 100"
+			max="100"
 		>
 			{{ task.percentDone * 100 }}%
 		</progress>
diff --git a/src/components/tasks/partials/sort.vue b/src/components/tasks/partials/sort.vue
index 22b316d10..9e180bc4e 100644
--- a/src/components/tasks/partials/sort.vue
+++ b/src/components/tasks/partials/sort.vue
@@ -1,8 +1,18 @@
 <template>
 	<BaseButton>
-		<icon icon="sort-up" v-if="order === 'asc'"/>
-		<icon icon="sort-up" v-else-if="order === 'desc'" rotation="180"/>
-		<icon icon="sort" v-else/>
+		<icon
+			v-if="order === 'asc'"
+			icon="sort-up"
+		/>
+		<icon
+			v-else-if="order === 'desc'"
+			icon="sort-up"
+			rotation="180"
+		/>
+		<icon
+			v-else
+			icon="sort"
+		/>
 	</BaseButton>
 </template>
 
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 94d048f9c..6cf9a66dc 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -52,9 +52,10 @@ export function useRouteWithModal() {
 		}
 		currentModal.value = h(component, routeProps)
 	})
+	
+	const historyState = computed(() => route.fullPath && window.history.state)
 
 	function closeModal() {
-		const historyState = computed(() => route.fullPath && window.history.state)
 
 		// If the current project was changed because the user moved the currently opened task while coming from kanban,
 		// we need to reflect that change in the route when they close the task modal.
diff --git a/src/histoire.setup.ts b/src/histoire.setup.ts
index 09770c14c..c19562ff6 100644
--- a/src/histoire.setup.ts
+++ b/src/histoire.setup.ts
@@ -22,8 +22,8 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 
 	app.directive('cy', cypress)
 
-	app.component('icon', FontAwesomeIcon)
+	app.component('Icon', FontAwesomeIcon)
 	app.component('XButton', XButton)
-	app.component('modal', Modal)
-	app.component('card', Card)
+	app.component('Modal', Modal)
+	app.component('Card', Card)
 })
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c5fc3c4e3..99fb53fb4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -66,10 +66,10 @@ setLanguage(browserLanguage).then(() => {
 	app.directive('shortcut', shortcut)
 	app.directive('cy', cypress)
 
-	app.component('icon', FontAwesomeIcon)
-	app.component('x-button', Button)
-	app.component('modal', Modal)
-	app.component('card', Card)
+	app.component('Icon', FontAwesomeIcon)
+	app.component('XButton', Button)
+	app.component('Modal', Modal)
+	app.component('Card', Card)
 
 	app.config.errorHandler = (err, vm, info) => {
 		if (import.meta.env.DEV) {
diff --git a/src/views/About.vue b/src/views/About.vue
index 643136b0a..7095daa2f 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,15 +1,15 @@
 <template>
 	<modal
-		@close="$router.back()"
 		transition-name="fade"
 		variant="hint-modal"
+		@close="$router.back()"
 	>
 		<card
 			class="has-no-shadow"
 			:title="$t('about.title')"
 			:has-close="true"
-			@close="$router.back()"
 			:padding="false"
+			@close="$router.back()"
 		>
 			<div class="p-4">
 				<p>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index aba1aea5e..8d52a7203 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,8 +1,14 @@
 <template>
 	<div class="content has-text-centered">
-		<h2 v-if="salutation">{{ salutation }}</h2>
+		<h2 v-if="salutation">
+			{{ salutation }}
+		</h2>
 
-		<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
+		<Message
+			v-if="deletionScheduledAt !== null"
+			variant="danger"
+			class="mb-4"
+		>
 			{{
 				$t('user.deletion.scheduled', {
 					date: formatDateShort(deletionScheduledAt),
@@ -12,10 +18,10 @@
 			<router-link :to="{name: 'user.settings', hash: '#deletion'}">
 				{{ $t('user.deletion.scheduledCancel') }}
 			</router-link>
-		</message>
-		<add-task
-			@taskAdded="updateTaskKey"
+		</Message>
+		<AddTask
 			class="is-max-width-desktop"
+			@taskAdded="updateTaskKey"
 		/>
 		<template v-if="!hasTasks && !loading && migratorsEnabled">
 			<p class="mt-4">
@@ -23,18 +29,25 @@
 			</p>
 			<x-button
 				:to="{ name: 'migrate.start' }"
-				:shadow="false">
+				:shadow="false"
+			>
 				{{ $t('home.project.import') }}
 			</x-button>
 		</template>
-		<div v-if="projectHistory.length > 0" class="is-max-width-desktop has-text-left mt-4">
+		<div
+			v-if="projectHistory.length > 0"
+			class="is-max-width-desktop has-text-left mt-4"
+		>
 			<h3>{{ $t('home.lastViewed') }}</h3>
-			<ProjectCardGrid :projects="projectHistory" v-cy="'projectCardGrid'" />
+			<ProjectCardGrid
+				v-cy="'projectCardGrid'"
+				:projects="projectHistory"
+			/>
 		</div>
 		<ShowTasks
 			v-if="projectStore.hasProjects"
-			class="show-tasks"
 			:key="showTasksKey"
+			class="show-tasks"
 		/>
 	</div>
 </template>
diff --git a/src/views/filters/FilterEdit.vue b/src/views/filters/FilterEdit.vue
index b1ed084ba..7957460a3 100644
--- a/src/views/filters/FilterEdit.vue
+++ b/src/views/filters/FilterEdit.vue
@@ -1,55 +1,69 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('filters.edit.title')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
-		@primary="saveFilterWithValidation"
 		:tertiary="$t('misc.delete')"
+		@primary="saveFilterWithValidation"
 		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: projectId } })"
 	>
 		<form @submit.prevent="saveFilterWithValidation()">
 			<div class="field">
-				<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
+				<label
+					class="label"
+					for="title"
+				>{{ $t('filters.attributes.title') }}</label>
 				<div class="control">
 					<input
+						id="Title"
 						v-model="filter.title"
-						:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid  }"
+						v-focus
+						:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid }"
 						:disabled="filterService.loading || undefined"
 						class="input"
-						id="Title"
 						:placeholder="$t('filters.attributes.titlePlaceholder')"
 						type="text"
-						v-focus
 						@focusout="validateTitleField"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!titleValid">{{ $t('filters.create.titleRequired') }}</p>
+				<p
+					v-if="!titleValid"
+					class="help is-danger"
+				>
+					{{ $t('filters.create.titleRequired') }}
+				</p>
 			</div>
 			<div class="field">
-				<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
+				<label
+					class="label"
+					for="description"
+				>{{ $t('filters.attributes.description') }}</label>
 				<div class="control">
-					<editor
+					<Editor
+						id="description"
+						v-model="filter.description"
 						:class="{ 'disabled': filterService.loading}"
 						:disabled="filterService.loading"
-						id="description"
 						:placeholder="$t('filters.attributes.descriptionPlaceholder')"
-						v-model="filter.description"
 					/>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="filters">{{ $t('filters.title') }}</label>
+				<label
+					class="label"
+					for="filters"
+				>{{ $t('filters.title') }}</label>
 				<div class="control">
 					<Filters
+						v-model="filters"
 						:class="{ 'disabled': filterService.loading}"
 						:disabled="filterService.loading"
 						class="has-no-shadow has-no-border"
-						v-model="filters"
 					/>
 				</div>
 			</div>
 		</form>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/filters/FilterNew.vue b/src/views/filters/FilterNew.vue
index 27c638d97..0a5baf1a1 100644
--- a/src/views/filters/FilterNew.vue
+++ b/src/views/filters/FilterNew.vue
@@ -1,65 +1,82 @@
 <template>
 	<modal
-		@close="$router.back()"
 		variant="hint-modal"
+		@close="$router.back()"
 	>
-				<card class="has-no-shadow" :title="$t('filters.create.title')">
-					<p>
-						{{ $t('filters.create.description') }}
-					</p>
-					<div class="field">
-						<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
-						<div class="control">
-							<input
-								v-model="filter.title"
-								:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid  }"
-								:disabled="filterService.loading || undefined"
-								class="input"
-								id="Title"
-								:placeholder="$t('filters.attributes.titlePlaceholder')"
-								type="text"
-								v-focus
-								@focusout="validateTitleField"
-							/>
-						</div>
-						<p class="help is-danger" v-if="!titleValid">{{ $t('filters.create.titleRequired') }}</p>
-					</div>
-					<div class="field">
-						<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
-						<div class="control">
-							<editor
-								:key="filter.id"
-								v-model="filter.description"
-								:class="{ 'disabled': filterService.loading}"
-								:disabled="filterService.loading"
-								id="description"
-								:placeholder="$t('filters.attributes.descriptionPlaceholder')"
-							/>
-						</div>
-					</div>
-					<div class="field">
-						<label class="label" for="filters">{{ $t('filters.title') }}</label>
-						<div class="control">
-							<Filters
-								:class="{ 'disabled': filterService.loading}"
-								:disabled="filterService.loading"
-								class="has-no-shadow has-no-border"
-								v-model="filters"
-							/>
-						</div>
-					</div>
+		<card
+			class="has-no-shadow"
+			:title="$t('filters.create.title')"
+		>
+			<p>
+				{{ $t('filters.create.description') }}
+			</p>
+			<div class="field">
+				<label
+					class="label"
+					for="title"
+				>{{ $t('filters.attributes.title') }}</label>
+				<div class="control">
+					<input
+						id="Title"
+						v-model="filter.title"
+						v-focus
+						:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid }"
+						:disabled="filterService.loading || undefined"
+						class="input"
+						:placeholder="$t('filters.attributes.titlePlaceholder')"
+						type="text"
+						@focusout="validateTitleField"
+					>
+				</div>
+				<p
+					v-if="!titleValid"
+					class="help is-danger"
+				>
+					{{ $t('filters.create.titleRequired') }}
+				</p>
+			</div>
+			<div class="field">
+				<label
+					class="label"
+					for="description"
+				>{{ $t('filters.attributes.description') }}</label>
+				<div class="control">
+					<Editor
+						id="description"
+						:key="filter.id"
+						v-model="filter.description"
+						:class="{ 'disabled': filterService.loading}"
+						:disabled="filterService.loading"
+						:placeholder="$t('filters.attributes.descriptionPlaceholder')"
+					/>
+				</div>
+			</div>
+			<div class="field">
+				<label
+					class="label"
+					for="filters"
+				>{{ $t('filters.title') }}</label>
+				<div class="control">
+					<Filters
+						v-model="filters"
+						:class="{ 'disabled': filterService.loading}"
+						:disabled="filterService.loading"
+						class="has-no-shadow has-no-border"
+					/>
+				</div>
+			</div>
 
-					<template #footer>
-						<x-button
-							:loading="filterService.loading"
-							:disabled="filterService.loading || !titleValid"
-							@click="createFilterWithValidation()"
-							class="is-fullwidth"
-						>
-							{{ $t('filters.create.action') }}
-						</x-button>
-					</template>
-				</card>
+			<template #footer>
+				<x-button
+					:loading="filterService.loading"
+					:disabled="filterService.loading || !titleValid"
+					class="is-fullwidth"
+					@click="createFilterWithValidation()"
+				>
+					{{ $t('filters.create.action') }}
+				</x-button>
+			</template>
+		</card>
 	</modal>
 </template>
 
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 6efa79ab2..10e2a493d 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -1,5 +1,8 @@
 <template>
-	<div :class="{ 'is-loading': loading}" class="loader-container">
+	<div
+		:class="{ 'is-loading': loading}"
+		class="loader-container"
+	>
 		<x-button
 			:to="{name:'labels.create'}"
 			class="is-pulled-right"
@@ -13,61 +16,81 @@
 			<p v-if="Object.entries(labels).length > 0">
 				{{ $t('label.description') }}
 			</p>
-			<p v-else class="has-text-centered has-text-grey is-italic">
+			<p
+				v-else
+				class="has-text-centered has-text-grey is-italic"
+			>
 				{{ $t('label.newCTA') }}
-				<router-link :to="{name:'labels.create'}">{{ $t('label.create.title') }}.</router-link>
+				<router-link :to="{name:'labels.create'}">
+					{{ $t('label.create.title') }}.
+				</router-link>
 			</p>
 		</div>
 
 		<div class="columns">
 			<div class="labels-list column">
 				<span
-					:class="{'disabled': userInfo.id !== l.createdBy.id}" :key="l.id"
+					v-for="l in labels"
+					:key="l.id"
+					:class="{'disabled': userInfo.id !== l.createdBy.id}"
 					:style="{'background': l.hexColor, 'color': l.textColor}"
 					class="tag"
-					v-for="l in labels"
 				>
 					<span
 						v-if="userInfo.id !== l.createdBy.id"
-						v-tooltip.bottom="$t('label.edit.forbidden')">
+						v-tooltip.bottom="$t('label.edit.forbidden')"
+					>
 						{{ l.title }}
 					</span>
 					<BaseButton
+						v-else
 						:style="{'color': l.textColor}"
 						@click="editLabel(l)"
-						v-else>
+					>
 						{{ l.title }}
 					</BaseButton>
-					<BaseButton @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id" />
+					<BaseButton
+						v-if="userInfo.id === l.createdBy.id"
+						class="delete is-small"
+						@click="showDeleteDialoge(l)"
+					/>
 				</span>
 			</div>
-			<div class="column is-4" v-if="isLabelEdit">
-				<card :title="$t('label.edit.header')" :has-close="true" @close="() => isLabelEdit = false">
+			<div
+				v-if="isLabelEdit"
+				class="column is-4"
+			>
+				<card
+					:title="$t('label.edit.header')"
+					:has-close="true"
+					@close="() => isLabelEdit = false"
+				>
 					<form @submit.prevent="editLabelSubmit()">
 						<div class="field">
 							<label class="label">{{ $t('label.attributes.title') }}</label>
 							<div class="control">
 								<input
+									v-model="labelEditLabel.title"
 									class="input"
 									:placeholder="$t('label.attributes.titlePlaceholder')"
 									type="text"
-									v-model="labelEditLabel.title"/>
+								>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label">{{ $t('label.attributes.description') }}</label>
 							<div class="control">
-								<editor
-									:placeholder="$t('label.attributes.description')"
+								<Editor
 									v-if="editorActive"
 									v-model="labelEditLabel.description"
+									:placeholder="$t('label.attributes.description')"
 								/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label">{{ $t('label.attributes.color') }}</label>
 							<div class="control">
-								<color-picker v-model="labelEditLabel.hexColor"/>
+								<ColorPicker v-model="labelEditLabel.hexColor" />
 							</div>
 						</div>
 						<div class="field has-addons">
@@ -82,9 +105,9 @@
 							</div>
 							<div class="control">
 								<x-button
-									@click="showDeleteDialoge(labelEditLabel)"
 									icon="trash-alt"
 									class="is-danger"
+									@click="showDeleteDialoge(labelEditLabel)"
 								/>
 							</div>
 						</div>
@@ -97,11 +120,15 @@
 				@close="showDeleteModal = false"
 				@submit="deleteLabel(labelToDelete)"
 			>
-				<template #header><span>{{ $t('task.label.delete.header') }}</span></template>
+				<template #header>
+					<span>{{ $t('task.label.delete.header') }}</span>
+				</template>
 
 				<template #text>
-					<p>{{ $t('task.label.delete.text1') }}<br/>
-						{{ $t('task.label.delete.text2') }}</p>
+					<p>
+						{{ $t('task.label.delete.text1') }}<br>
+						{{ $t('task.label.delete.text2') }}
+					</p>
 				</template>
 			</modal>
 		</div>
diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 8e557a4f2..fca1f811c 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -1,37 +1,43 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('label.create.title')"
-		@create="newLabel()"
 		:primary-disabled="label.title === ''"
+		@create="newLabel()"
 	>
 		<div class="field">
-			<label class="label" for="labelTitle">{{ $t('label.attributes.title') }}</label>
+			<label
+				class="label"
+				for="labelTitle"
+			>{{ $t('label.attributes.title') }}</label>
 			<div
 				class="control is-expanded"
 				:class="{ 'is-loading': loading }"
 			>
 				<input
+					id="labelTitle"
+					v-model="label.title"
+					v-focus
 					:class="{ disabled: loading }"
 					class="input"
 					:placeholder="$t('label.attributes.titlePlaceholder')"
 					type="text"
-					id="labelTitle"
-					v-focus
-					v-model="label.title"
 					@keyup.enter="newLabel()"
-				/>
+				>
 			</div>
 		</div>
-		<p class="help is-danger" v-if="showError && label.title === ''">
+		<p
+			v-if="showError && label.title === ''"
+			class="help is-danger"
+		>
 			{{ $t('label.create.titleRequired') }}
 		</p>
 		<div class="field">
 			<label class="label">{{ $t('label.attributes.color') }}</label>
 			<div class="control">
-				<color-picker v-model="label.hexColor"/>
+				<ColorPicker v-model="label.hexColor" />
 			</div>
 		</div>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/migrate/Migration.vue b/src/views/migrate/Migration.vue
index a404e0553..422603e23 100644
--- a/src/views/migrate/Migration.vue
+++ b/src/views/migrate/Migration.vue
@@ -13,7 +13,7 @@
 					class="migration-service-image"
 					:alt="name"
 					:src="icon"
-				/>
+				>
 				{{ name }}
 			</router-link>
 		</div>
diff --git a/src/views/migrate/MigrationHandler.vue b/src/views/migrate/MigrationHandler.vue
index d02b9e445..d9ec6febc 100644
--- a/src/views/migrate/MigrationHandler.vue
+++ b/src/views/migrate/MigrationHandler.vue
@@ -8,11 +8,11 @@
 				<template v-if="migrator.isFileMigrator">
 					<p>{{ $t('migrate.importUpload', {name: migrator.name}) }}</p>
 					<input
-						@change="migrate"
-						class="is-hidden"
 						ref="uploadInput"
+						class="is-hidden"
 						type="file"
-					/>
+						@change="migrate"
+					>
 					<x-button
 						:loading="migrationFileService.loading"
 						:disabled="migrationFileService.loading || undefined"
@@ -37,11 +37,18 @@
 				class="migration-in-progress-container"
 			>
 				<div class="migration-in-progress">
-					<img :alt="migrator.name" :src="migrator.icon" class="logo"/>
+					<img
+						:alt="migrator.name"
+						:src="migrator.icon"
+						class="logo"
+					>
 					<div class="progress-dots">
-						<span v-for="i in progressDotsCount" :key="i"/>
+						<span
+							v-for="i in progressDotsCount"
+							:key="i"
+						/>
 					</div>
-					<Logo class="logo"/>
+					<Logo class="logo" />
 				</div>
 				<p>{{ $t('migrate.inProgress') }}</p>
 			</div>
@@ -50,31 +57,47 @@
 			<p>
 				{{ $t('migrate.migrationInProgress') }}
 			</p>
-			<x-button :to="{name: 'home'}">{{ $t('home.goToOverview') }}</x-button>
+			<x-button :to="{name: 'home'}">
+				{{ $t('home.goToOverview') }}
+			</x-button>
 		</div>
 		<div v-else-if="lastMigrationFinishedAt">
 			<p>
 				{{
 					$t('migrate.alreadyMigrated1', {name: migrator.name, date: formatDateLong(lastMigrationFinishedAt)})
-				}}<br/>
+				}}<br>
 				{{ $t('migrate.alreadyMigrated2') }}
 			</p>
 			<div class="buttons">
-				<x-button @click="migrate">{{ $t('migrate.confirm') }}</x-button>
-				<x-button :to="{name: 'home'}" variant="tertiary" class="has-text-danger">
+				<x-button @click="migrate">
+					{{ $t('migrate.confirm') }}
+				</x-button>
+				<x-button
+					:to="{name: 'home'}"
+					variant="tertiary"
+					class="has-text-danger"
+				>
 					{{ $t('misc.cancel') }}
 				</x-button>
 			</div>
 		</div>
 		<div v-else>
-			<Message class="mb-4" v-if="migrator.isFileMigrator">
+			<Message
+				v-if="migrator.isFileMigrator"
+				class="mb-4"
+			>
 				{{ message }}
 			</Message>
-			<Message class="mb-4" v-else>
+			<Message
+				v-else
+				class="mb-4"
+			>
 				{{ $t('migrate.migrationStartedWillReciveEmail', {service: migrator.name}) }}
 			</Message>
 
-			<x-button :to="{name: 'home'}">{{ $t('home.goToOverview') }}</x-button>
+			<x-button :to="{name: 'home'}">
+				{{ $t('home.goToOverview') }}
+			</x-button>
 		</div>
 	</div>
 </template>
@@ -106,13 +129,13 @@ import {MIGRATORS, Migrator} from './migrators'
 import {useTitle} from '@/composables/useTitle'
 import {useProjectStore} from '@/stores/projects'
 
-const PROGRESS_DOTS_COUNT = 8
-
 const props = defineProps<{
 	service: string,
 	code?: string,
 }>()
 
+const PROGRESS_DOTS_COUNT = 8
+
 const {t} = useI18n({useScope: 'global'})
 
 const progressDotsCount = ref(PROGRESS_DOTS_COUNT)
@@ -125,7 +148,9 @@ const migratorAuthCode = ref('')
 
 const migrator = computed<Migrator>(() => MIGRATORS[props.service])
 
+// eslint-disable-next-line vue/no-ref-object-destructure
 const migrationService = shallowReactive(new AbstractMigrationService(migrator.value.id))
+// eslint-disable-next-line vue/no-ref-object-destructure
 const migrationFileService = shallowReactive(new AbstractMigrationFileService(migrator.value.id))
 
 useTitle(() => t('migrate.titleService', {name: migrator.value.name}))
diff --git a/src/views/project/ListProjects.vue b/src/views/project/ListProjects.vue
index 09459ed42..5529ae98f 100644
--- a/src/views/project/ListProjects.vue
+++ b/src/views/project/ListProjects.vue
@@ -1,15 +1,29 @@
 <template>
-	<div class="content loader-container" :class="{'is-loading': loading}" v-cy="'projects-list'">
+	<div
+		v-cy="'projects-list'"
+		class="content loader-container"
+		:class="{'is-loading': loading}"
+	>
 		<header class="project-header">
-			<fancycheckbox v-model="showArchived" v-cy="'show-archived-check'">
+			<Fancycheckbox
+				v-model="showArchived"
+				v-cy="'show-archived-check'"
+			>
 				{{ $t('project.showArchived') }}
-			</fancycheckbox>
+			</Fancycheckbox>
 
 			<div class="action-buttons">
-				<x-button :to="{name: 'filters.create'}" icon="filter">
+				<x-button
+					:to="{name: 'filters.create'}"
+					icon="filter"
+				>
 					{{ $t('filters.create.title') }}
 				</x-button>
-				<x-button :to="{name: 'project.create'}" icon="plus" v-cy="'new-project'">
+				<x-button
+					v-cy="'new-project'"
+					:to="{name: 'project.create'}"
+					icon="plus"
+				>
 					{{ $t('project.create.header') }}
 				</x-button>
 			</div>
diff --git a/src/views/project/NewProject.vue b/src/views/project/NewProject.vue
index 6cef1beb6..185489eb3 100644
--- a/src/views/project/NewProject.vue
+++ b/src/views/project/NewProject.vue
@@ -1,44 +1,53 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('project.create.header')"
-		@create="createNewProject()"
 		:primary-disabled="project.title === ''"
+		@create="createNewProject()"
 	>
 		<div class="field">
-			<label class="label" for="projectTitle">{{ $t('project.title') }}</label>
+			<label
+				class="label"
+				for="projectTitle"
+			>{{ $t('project.title') }}</label>
 			<div
 				:class="{ 'is-loading': projectService.loading }"
 				class="control"
 			>
 				<input
+					v-model="project.title"
+					v-focus
 					:class="{ disabled: projectService.loading }"
-					@keyup.enter="createNewProject()"
-					@keyup.esc="$router.back()"
 					class="input"
 					:placeholder="$t('project.create.titlePlaceholder')"
 					type="text"
 					name="projectTitle"
-					v-focus
-					v-model="project.title"
-				/>
+					@keyup.enter="createNewProject()"
+					@keyup.esc="$router.back()"
+				>
 			</div>
 		</div>
-		<p class="help is-danger" v-if="showError && project.title === ''">
+		<p
+			v-if="showError && project.title === ''"
+			class="help is-danger"
+		>
 			{{ $t('project.create.addTitleRequired') }}
 		</p>
-		<div class="field" v-if="projectStore.hasProjects">
+		<div
+			v-if="projectStore.hasProjects"
+			class="field"
+		>
 			<label class="label">{{ $t('project.parent') }}</label>
 			<div class="control">
-				<project-search v-model="parentProject"/>
+				<ProjectSearch v-model="parentProject" />
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('project.color') }}</label>
 			<div class="control">
-				<color-picker v-model="project.hexColor"/>
+				<ColorPicker v-model="project.hexColor" />
 			</div>
 		</div>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script setup lang="ts">
@@ -56,6 +65,10 @@ import {useProjectStore} from '@/stores/projects'
 import ProjectSearch from '@/components/tasks/partials/projectSearch.vue'
 import type {IProject} from '@/modelTypes/IProject'
 
+const props = defineProps<{
+	parentProjectId?: number,
+}>()
+
 const {t} = useI18n({useScope: 'global'})
 
 useTitle(() => t('project.create.header'))
@@ -66,10 +79,6 @@ const projectService = shallowReactive(new ProjectService())
 const projectStore = useProjectStore()
 const parentProject = ref<IProject | null>(null)
 
-const props = defineProps<{
-	parentProjectId?: number,
-}>()
-
 watch(
 	() => props.parentProjectId,
 	() => parentProject.value = projectStore.projects[props.parentProjectId],
diff --git a/src/views/project/ProjectGantt.vue b/src/views/project/ProjectGantt.vue
index cf9e1c8a6..5bc70ec1a 100644
--- a/src/views/project/ProjectGantt.vue
+++ b/src/views/project/ProjectGantt.vue
@@ -1,46 +1,71 @@
 <template>
-	<ProjectWrapper class="project-gantt" :project-id="filters.projectId" viewName="gantt">
+	<ProjectWrapper
+		class="project-gantt"
+		:project-id="filters.projectId"
+		view-name="gantt"
+	>
 		<template #header>
 			<card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
-						<label class="label" for="range">{{ $t('project.gantt.range') }}</label>
+						<label
+							class="label"
+							for="range"
+						>{{ $t('project.gantt.range') }}</label>
 						<div class="control">
 							<Foo
+								id="range"
 								ref="flatPickerEl"
+								v-model="flatPickerDateRange"
 								:config="flatPickerConfig"
 								class="input"
-								id="range"
 								:placeholder="$t('project.gantt.range')"
-								v-model="flatPickerDateRange"
 							/>
 						</div>
 					</div>
-					<div class="field" v-if="!hasDefaultFilters">
-						<label class="label" for="range">Reset</label>
+					<div
+						v-if="!hasDefaultFilters"
+						class="field"
+					>
+						<label
+							class="label"
+							for="range"
+						>Reset</label>
 						<div class="control">
-							<x-button @click="setDefaultFilters">Reset</x-button>
+							<x-button @click="setDefaultFilters">
+								Reset
+							</x-button>
 						</div>
 					</div>
-					<fancycheckbox is-block v-model="filters.showTasksWithoutDates">
+					<Fancycheckbox
+						v-model="filters.showTasksWithoutDates"
+						is-block
+					>
 						{{ $t('project.gantt.showTasksWithoutDates') }}
-					</fancycheckbox>
+					</Fancycheckbox>
 				</div>
 			</card>
 		</template>
 
 		<template #default>
 			<div class="gantt-chart-container">
-				<card :has-content="false" :padding="false" class="has-overflow">
-					<gantt-chart
+				<card
+					:has-content="false"
+					:padding="false"
+					class="has-overflow"
+				>
+					<GanttChart
 						:filters="filters"
 						:tasks="tasks"
-						:isLoading="isLoading"
+						:is-loading="isLoading"
 						:default-task-start-date="defaultTaskStartDate"
 						:default-task-end-date="defaultTaskEndDate"
 						@update:task="updateTask"
 					/>
-					<TaskForm v-if="canWrite" @create-task="addGanttTask"/>
+					<TaskForm
+						v-if="canWrite"
+						@createTask="addGanttTask"
+					/>
 				</card>
 			</div>
 		</template>
@@ -70,10 +95,10 @@ import type {ITask} from '@/modelTypes/ITask'
 
 type Options = Flatpickr.Options.Options
 
-const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttChart.vue'))
-
 const props = defineProps<{route: RouteLocationNormalized}>()
 
+const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttChart.vue'))
+
 const baseStore = useBaseStore()
 const canWrite = computed(() => baseStore.currentProject?.maxRight > RIGHTS.READ)
 
diff --git a/src/views/project/ProjectInfo.vue b/src/views/project/ProjectInfo.vue
index f435d958e..f451089f6 100644
--- a/src/views/project/ProjectInfo.vue
+++ b/src/views/project/ProjectInfo.vue
@@ -5,8 +5,15 @@
 		<card
 			:title="project?.title"
 		>
-			<div class="has-text-left" v-html="htmlDescription" v-if="htmlDescription !== ''"></div>
-			<p v-else class="is-italic">
+			<div
+				v-if="htmlDescription !== ''"
+				class="has-text-left"
+				v-html="htmlDescription"
+			/>
+			<p
+				v-else
+				class="is-italic"
+			>
 				{{ $t('project.noDescriptionAvailable') }}
 			</p>
 		</card>
diff --git a/src/views/project/ProjectKanban.vue b/src/views/project/ProjectKanban.vue
index 0190dd247..941a42e57 100644
--- a/src/views/project/ProjectKanban.vue
+++ b/src/views/project/ProjectKanban.vue
@@ -2,229 +2,265 @@
 	<ProjectWrapper
 		class="project-kanban"
 		:project-id="projectId"
-		viewName="kanban"
+		view-name="kanban"
 	>
 		<template #header>
-			<div class="filter-container" v-if="!isSavedFilter(project)">
+			<div
+				v-if="!isSavedFilter(project)"
+				class="filter-container"
+			>
 				<div class="items">
-					<filter-popup v-model="params" />
+					<FilterPopup v-model="params" />
 				</div>
 			</div>
 		</template>
 
 		<template #default>
 			<div class="kanban-view">
-			<div
-				:class="{ 'is-loading': loading && !oneTaskUpdating}"
-				class="kanban kanban-bucket-container loader-container"
-			>
-			<draggable
-				v-bind="DRAG_OPTIONS"
-				:modelValue="buckets"
-				@update:modelValue="updateBuckets"
-				@end="updateBucketPosition"
-				@start="() => dragBucket = true"
-				group="buckets"
-				:disabled="!canWrite || newTaskInputFocused"
-				tag="ul"
-				:item-key="({id}: IBucket) => `bucket${id}`"
-				:component-data="bucketDraggableComponentData"
-			>
-				<template #item="{element: bucket, index: bucketIndex }">
-					<div
-						class="bucket"
-						:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
-					>
-						<div class="bucket-header" @click="() => unCollapseBucket(bucket)">
-							<span
-								v-if="project?.doneBucketId === bucket.id"
-								class="icon is-small has-text-success mr-2"
-								v-tooltip="$t('project.kanban.doneBucketHint')"
-							>
-								<icon icon="check-double"/>
-							</span>
-							<h2
-								@keydown.enter.prevent.stop="($event.target as HTMLElement).blur()"
-								@keydown.esc.prevent.stop="($event.target as HTMLElement).blur()"
-								@blur="saveBucketTitle(bucket.id, ($event.target as HTMLElement).textContent as string)"
-								@click="focusBucketTitle"
-								class="title input"
-								:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
-								:spellcheck="false">{{ bucket.title }}</h2>
-							<span
-								:class="{'is-max': bucket.count >= bucket.limit}"
-								class="limit"
-								v-if="bucket.limit > 0">
-								{{ bucket.count }}/{{ bucket.limit }}
-							</span>
-							<dropdown
-								class="is-right options"
-								v-if="canWrite && !collapsedBuckets[bucket.id]"
-								trigger-icon="ellipsis-v"
-								@close="() => showSetLimitInput = false"
-							>
-								<dropdown-item
-									@click.stop="showSetLimitInput = true"
-								>
-									<div class="field has-addons" v-if="showSetLimitInput">
-										<div class="control">
-											<input
-												@keyup.esc="() => showSetLimitInput = false"
-												@keyup.enter="() => showSetLimitInput = false"
-												:value="bucket.limit"
-												@input="(event) => setBucketLimit(bucket.id, parseInt((event.target as HTMLInputElement).value))"
-												class="input"
-												type="number"
-												min="0"
-												v-focus.always
-											/>
-										</div>
-										<div class="control">
-											<x-button
-												:disabled="bucket.limit < 0"
-												:icon="['far', 'save']"
-												:shadow="false"
-												v-cy="'setBucketLimit'"
-											/>
-										</div>
-									</div>
-									<template v-else>
-										{{
-											$t('project.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('project.kanban.noLimit')})
-										}}
-									</template>
-								</dropdown-item>
-								<dropdown-item
-									@click.stop="toggleDoneBucket(bucket)"
-									v-tooltip="$t('project.kanban.doneBucketHintExtended')"
-									:icon-class="{'has-text-success': bucket.id === project?.doneBucketId}"
-									icon="check-double"
-								>
-									{{ $t('project.kanban.doneBucket') }}
-								</dropdown-item>
-								<dropdown-item
-									@click.stop="toggleDefaultBucket(bucket)"
-									v-tooltip="$t('project.kanban.defaultBucketHint')"
-									:icon-class="{'has-text-primary': bucket.id === project.defaultBucketId}"
-									icon="th"
-								>
-									{{ $t('project.kanban.defaultBucket') }}
-								</dropdown-item>
-								<dropdown-item
-									@click.stop="() => collapseBucket(bucket)"
-									icon="angles-up"
-								>
-									{{ $t('project.kanban.collapse') }}
-								</dropdown-item>
-								<dropdown-item
-									:class="{'is-disabled': buckets.length <= 1}"
-									@click.stop="() => deleteBucketModal(bucket.id)"
-									v-tooltip="buckets.length <= 1 ? $t('project.kanban.deleteLast') : ''"
-									icon-class="has-text-danger"
-									icon="trash-alt"
-								>
-									{{ $t('misc.delete') }}
-								</dropdown-item>
-							</dropdown>
-						</div>
-
-						<draggable
-							v-bind="DRAG_OPTIONS"
-							:modelValue="bucket.tasks"
-							@update:modelValue="(tasks) => updateTasks(bucket.id, tasks)"
-							@start="() => dragstart(bucket)"
-							@end="updateTaskPosition"
-							:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
-							:disabled="!canWrite"
-							:data-bucket-index="bucketIndex"
-							tag="ul"
-							:item-key="(task: ITask) => `bucket${bucket.id}-task${task.id}`"
-							:component-data="getTaskDraggableTaskComponentData(bucket)"
-						>
-							<template #footer>
-								<div class="bucket-footer" v-if="canWrite">
-									<div class="field" v-if="showNewTaskInput[bucket.id]">
-										<div class="control" :class="{'is-loading': loading || taskLoading}">
-											<input
-												class="input"
-												:disabled="loading || taskLoading || undefined"
-												@focusout="toggleShowNewTaskInput(bucket.id)"
-												@focusin="() => newTaskInputFocused = true"
-												@keyup.enter="addTaskToBucket(bucket.id)"
-												@keyup.esc="toggleShowNewTaskInput(bucket.id)"
-												:placeholder="$t('project.kanban.addTaskPlaceholder')"
-												type="text"
-												v-focus.always
-												v-model="newTaskText"
-											/>
-										</div>
-										<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
-											{{ $t('project.create.addTitleRequired') }}
-										</p>
-									</div>
-									<x-button
-										@click="toggleShowNewTaskInput(bucket.id)"
-										class="is-fullwidth has-text-centered"
-										:shadow="false"
-										v-else
-										icon="plus"
-										variant="secondary"
-									>
-										{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
-									</x-button>
-								</div>
-							</template>
-
-							<template #item="{element: task}">
-								<div class="task-item">
-									<kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
-								</div>
-							</template>
-						</draggable>
-					</div>
-				</template>
-			</draggable>
-
-			<div class="bucket new-bucket" v-if="canWrite && !loading && buckets.length > 0">
-				<input
-					:class="{'is-loading': loading}"
-					:disabled="loading || undefined"
-					@blur="() => showNewBucketInput = false"
-					@keyup.enter="createNewBucket"
-					@keyup.esc="($event.target as HTMLInputElement).blur()"
-					class="input"
-					:placeholder="$t('project.kanban.addBucketPlaceholder')"
-					type="text"
-					v-focus.always
-					v-if="showNewBucketInput"
-					v-model="newBucketTitle"
-				/>
-				<x-button
-					v-else
-					@click="() => showNewBucketInput = true"
-					:shadow="false"
-					class="is-transparent is-fullwidth has-text-centered"
-					variant="secondary"
-					icon="plus"
+				<div
+					:class="{ 'is-loading': loading && !oneTaskUpdating}"
+					class="kanban kanban-bucket-container loader-container"
 				>
-					{{ $t('project.kanban.addBucket') }}
-				</x-button>
+					<draggable
+						v-bind="DRAG_OPTIONS"
+						:model-value="buckets"
+						group="buckets"
+						:disabled="!canWrite || newTaskInputFocused"
+						tag="ul"
+						:item-key="({id}: IBucket) => `bucket${id}`"
+						:component-data="bucketDraggableComponentData"
+						@update:modelValue="updateBuckets"
+						@end="updateBucketPosition"
+						@start="() => dragBucket = true"
+					>
+						<template #item="{element: bucket, index: bucketIndex }">
+							<div
+								class="bucket"
+								:class="{'is-collapsed': collapsedBuckets[bucket.id]}"
+							>
+								<div
+									class="bucket-header"
+									@click="() => unCollapseBucket(bucket)"
+								>
+									<span
+										v-if="project?.doneBucketId === bucket.id"
+										v-tooltip="$t('project.kanban.doneBucketHint')"
+										class="icon is-small has-text-success mr-2"
+									>
+										<icon icon="check-double" />
+									</span>
+									<h2
+										class="title input"
+										:contenteditable="(bucketTitleEditable && canWrite && !collapsedBuckets[bucket.id]) ? true : undefined"
+										:spellcheck="false"
+										@keydown.enter.prevent.stop="($event.target as HTMLElement).blur()"
+										@keydown.esc.prevent.stop="($event.target as HTMLElement).blur()"
+										@blur="saveBucketTitle(bucket.id, ($event.target as HTMLElement).textContent as string)"
+										@click="focusBucketTitle"
+									>
+										{{ bucket.title }}
+									</h2>
+									<span
+										v-if="bucket.limit > 0"
+										:class="{'is-max': bucket.count >= bucket.limit}"
+										class="limit"
+									>
+										{{ bucket.count }}/{{ bucket.limit }}
+									</span>
+									<Dropdown
+										v-if="canWrite && !collapsedBuckets[bucket.id]"
+										class="is-right options"
+										trigger-icon="ellipsis-v"
+										@close="() => showSetLimitInput = false"
+									>
+										<DropdownItem
+											@click.stop="showSetLimitInput = true"
+										>
+											<div
+												v-if="showSetLimitInput"
+												class="field has-addons"
+											>
+												<div class="control">
+													<input
+														v-focus.always
+														:value="bucket.limit"
+														class="input"
+														type="number"
+														min="0"
+														@keyup.esc="() => showSetLimitInput = false"
+														@keyup.enter="() => showSetLimitInput = false"
+														@input="(event) => setBucketLimit(bucket.id, parseInt((event.target as HTMLInputElement).value))"
+													>
+												</div>
+												<div class="control">
+													<x-button
+														v-cy="'setBucketLimit'"
+														:disabled="bucket.limit < 0"
+														:icon="['far', 'save']"
+														:shadow="false"
+													/>
+												</div>
+											</div>
+											<template v-else>
+												{{
+													$t('project.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('project.kanban.noLimit')})
+												}}
+											</template>
+										</DropdownItem>
+										<DropdownItem
+											v-tooltip="$t('project.kanban.doneBucketHintExtended')"
+											:icon-class="{'has-text-success': bucket.id === project?.doneBucketId}"
+											icon="check-double"
+											@click.stop="toggleDoneBucket(bucket)"
+										>
+											{{ $t('project.kanban.doneBucket') }}
+										</DropdownItem>
+										<DropdownItem
+											v-tooltip="$t('project.kanban.defaultBucketHint')"
+											:icon-class="{'has-text-primary': bucket.id === project.defaultBucketId}"
+											icon="th"
+											@click.stop="toggleDefaultBucket(bucket)"
+										>
+											{{ $t('project.kanban.defaultBucket') }}
+										</DropdownItem>
+										<DropdownItem
+											icon="angles-up"
+											@click.stop="() => collapseBucket(bucket)"
+										>
+											{{ $t('project.kanban.collapse') }}
+										</DropdownItem>
+										<DropdownItem
+											v-tooltip="buckets.length <= 1 ? $t('project.kanban.deleteLast') : ''"
+											:class="{'is-disabled': buckets.length <= 1}"
+											icon-class="has-text-danger"
+											icon="trash-alt"
+											@click.stop="() => deleteBucketModal(bucket.id)"
+										>
+											{{ $t('misc.delete') }}
+										</DropdownItem>
+									</Dropdown>
+								</div>
+
+								<draggable
+									v-bind="DRAG_OPTIONS"
+									:model-value="bucket.tasks"
+									:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
+									:disabled="!canWrite"
+									:data-bucket-index="bucketIndex"
+									tag="ul"
+									:item-key="(task: ITask) => `bucket${bucket.id}-task${task.id}`"
+									:component-data="getTaskDraggableTaskComponentData(bucket)"
+									@update:modelValue="(tasks) => updateTasks(bucket.id, tasks)"
+									@start="() => dragstart(bucket)"
+									@end="updateTaskPosition"
+								>
+									<template #footer>
+										<div
+											v-if="canWrite"
+											class="bucket-footer"
+										>
+											<div
+												v-if="showNewTaskInput[bucket.id]"
+												class="field"
+											>
+												<div
+													class="control"
+													:class="{'is-loading': loading || taskLoading}"
+												>
+													<input
+														v-model="newTaskText"
+														v-focus.always
+														class="input"
+														:disabled="loading || taskLoading || undefined"
+														:placeholder="$t('project.kanban.addTaskPlaceholder')"
+														type="text"
+														@focusout="toggleShowNewTaskInput(bucket.id)"
+														@focusin="() => newTaskInputFocused = true"
+														@keyup.enter="addTaskToBucket(bucket.id)"
+														@keyup.esc="toggleShowNewTaskInput(bucket.id)"
+													>
+												</div>
+												<p
+													v-if="newTaskError[bucket.id] && newTaskText === ''"
+													class="help is-danger"
+												>
+													{{ $t('project.create.addTitleRequired') }}
+												</p>
+											</div>
+											<x-button
+												v-else
+												class="is-fullwidth has-text-centered"
+												:shadow="false"
+												icon="plus"
+												variant="secondary"
+												@click="toggleShowNewTaskInput(bucket.id)"
+											>
+												{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
+											</x-button>
+										</div>
+									</template>
+
+									<template #item="{element: task}">
+										<div class="task-item">
+											<KanbanCard
+												class="kanban-card"
+												:task="task"
+												:loading="taskUpdating[task.id] ?? false"
+											/>
+										</div>
+									</template>
+								</draggable>
+							</div>
+						</template>
+					</draggable>
+
+					<div
+						v-if="canWrite && !loading && buckets.length > 0"
+						class="bucket new-bucket"
+					>
+						<input
+							v-if="showNewBucketInput"
+							v-model="newBucketTitle"
+							v-focus.always
+							:class="{'is-loading': loading}"
+							:disabled="loading || undefined"
+							class="input"
+							:placeholder="$t('project.kanban.addBucketPlaceholder')"
+							type="text"
+							@blur="() => showNewBucketInput = false"
+							@keyup.enter="createNewBucket"
+							@keyup.esc="($event.target as HTMLInputElement).blur()"
+						>
+						<x-button
+							v-else
+							:shadow="false"
+							class="is-transparent is-fullwidth has-text-centered"
+							variant="secondary"
+							icon="plus"
+							@click="() => showNewBucketInput = true"
+						>
+							{{ $t('project.kanban.addBucket') }}
+						</x-button>
+					</div>
+				</div>
+
+				<modal
+					:enabled="showBucketDeleteModal"
+					@close="showBucketDeleteModal = false"
+					@submit="deleteBucket()"
+				>
+					<template #header>
+						<span>{{ $t('project.kanban.deleteHeaderBucket') }}</span>
+					</template>
+
+					<template #text>
+						<p>
+							{{ $t('project.kanban.deleteBucketText1') }}<br>
+							{{ $t('project.kanban.deleteBucketText2') }}
+						</p>
+					</template>
+				</modal>
 			</div>
-		</div>
-
-		<modal
-			:enabled="showBucketDeleteModal"
-			@close="showBucketDeleteModal = false"
-			@submit="deleteBucket()"
-		>
-			<template #header><span>{{ $t('project.kanban.deleteHeaderBucket') }}</span></template>
-
-			<template #text>
-				<p>{{ $t('project.kanban.deleteBucketText1') }}<br/>
-					{{ $t('project.kanban.deleteBucketText2') }}</p>
-			</template>
-		</modal>
-		</div>
 		</template>
 	</ProjectWrapper>
 </template>
@@ -259,6 +295,12 @@ import {isSavedFilter} from '@/services/savedFilter'
 import {success} from '@/message'
 import {useProjectStore} from '@/stores/projects'
 
+const {
+	projectId = undefined,
+} = defineProps<{
+	projectId: number,
+}>()
+
 const DRAG_OPTIONS = {
 	// sortable options
 	animation: 150,
@@ -330,12 +372,6 @@ const bucketDraggableComponentData = computed(() => ({
 		{'dragging-disabled': !canWrite.value},
 	],
 }))
-const {
-	projectId = undefined,
-} = defineProps<{
-	projectId: number,
-}>()
-
 const canWrite = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
 const project = computed(() => projectId ? projectStore.projects[projectId]: null)
 
diff --git a/src/views/project/ProjectList.vue b/src/views/project/ProjectList.vue
index e5c0aefa2..060b734ca 100644
--- a/src/views/project/ProjectList.vue
+++ b/src/views/project/ProjectList.vue
@@ -1,117 +1,131 @@
 <template>
-	<ProjectWrapper class="project-list" :project-id="projectId" viewName="project">
+	<ProjectWrapper
+		class="project-list"
+		:project-id="projectId"
+		view-name="project"
+	>
 		<template #header>
-		<div
-			class="filter-container"
-			v-if="!isSavedFilter(project)"
-		>
-			<div class="items">
-				<div class="search">
-					<div :class="{ hidden: !showTaskSearch }" class="field has-addons">
-						<div class="control has-icons-left has-icons-right">
-							<input
-								@blur="hideSearchBar()"
-								@keyup.enter="searchTasks"
-								class="input"
-								:placeholder="$t('misc.search')"
-								type="text"
-								v-focus
-								v-model="searchTerm"
-							/>
-							<span class="icon is-left">
-								<icon icon="search"/>
-							</span>
-						</div>
-						<div class="control">
-							<x-button
-								:loading="loading"
-								@click="searchTasks"
-								:shadow="false"
-							>
-								{{ $t('misc.search') }}
-							</x-button>
+			<div
+				v-if="!isSavedFilter(project)"
+				class="filter-container"
+			>
+				<div class="items">
+					<div class="search">
+						<div
+							:class="{ hidden: !showTaskSearch }"
+							class="field has-addons"
+						>
+							<div class="control has-icons-left has-icons-right">
+								<input
+									v-model="searchTerm"
+									v-focus
+									class="input"
+									:placeholder="$t('misc.search')"
+									type="text"
+									@blur="hideSearchBar()"
+									@keyup.enter="searchTasks"
+								>
+								<span class="icon is-left">
+									<icon icon="search" />
+								</span>
+							</div>
+							<div class="control">
+								<x-button
+									:loading="loading"
+									:shadow="false"
+									@click="searchTasks"
+								>
+									{{ $t('misc.search') }}
+								</x-button>
+							</div>
 						</div>
+						<x-button
+							v-if="!showTaskSearch"
+							icon="search"
+							variant="secondary"
+							@click="showTaskSearch = !showTaskSearch"
+						/>
 					</div>
-					<x-button
-						@click="showTaskSearch = !showTaskSearch"
-						icon="search"
-						variant="secondary"
-						v-if="!showTaskSearch"
+					<FilterPopup
+						v-model="params"
+						@update:modelValue="prepareFiltersAndLoadTasks()"
 					/>
 				</div>
-				<filter-popup
-					v-model="params"
-					@update:modelValue="prepareFiltersAndLoadTasks()"
-				/>
 			</div>
-		</div>
 		</template>
 
 		<template #default>
-		<div
-			:class="{ 'is-loading': loading }"
-			class="loader-container is-max-width-desktop list-view"
-		>
-		<card :padding="false" :has-content="false" class="has-overflow">
-			<add-task
-				v-if="!project.isArchived && canWrite"
-				class="list-view__add-task d-print-none"
-				ref="addTaskRef"
-				:default-position="firstNewPosition"
-				@taskAdded="updateTaskList"
-			/>
-
-			<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
-				{{ $t('project.list.empty') }}
-				<ButtonLink @click="focusNewTaskInput()" v-if="project.id > 0">
-					{{ $t('project.list.newTaskCta') }}
-				</ButtonLink>
-			</nothing>
-
-
-			<draggable
-				v-if="tasks && tasks.length > 0"
-				v-bind="DRAG_OPTIONS"
-				v-model="tasks"
-				group="tasks"
-				@start="() => drag = true"
-				@end="saveTaskPosition"
-				handle=".handle"
-				:disabled="!canWrite"
-				item-key="id"
-				tag="ul"
-				:component-data="{
-					class: {
-						tasks: true,
-						'dragging-disabled': !canWrite || isAlphabeticalSorting
-					},
-					type: 'transition-group'
-				}"
+			<div
+				:class="{ 'is-loading': loading }"
+				class="loader-container is-max-width-desktop list-view"
 			>
-				<template #item="{element: t}">
-					<single-task-in-project
-						:show-list-color="false"
-						:disabled="!canWrite"
-						:can-mark-as-done="canWrite || isSavedFilter(project)"
-						:the-task="t"
-						@taskUpdated="updateTasks"
-						:all-tasks="allTasks"
-					>
-						<template v-if="canWrite">
-							<span class="icon handle">
-								<icon icon="grip-lines"/>
-							</span>
-						</template>
-					</single-task-in-project>
-				</template>
-			</draggable>
+				<card
+					:padding="false"
+					:has-content="false"
+					class="has-overflow"
+				>
+					<AddTask
+						v-if="!project.isArchived && canWrite"
+						ref="addTaskRef"
+						class="list-view__add-task d-print-none"
+						:default-position="firstNewPosition"
+						@taskAdded="updateTaskList"
+					/>
 
-			<Pagination 
-				:total-pages="totalPages"
-				:current-page="currentPage"
-			/>
-		</card>
-		</div>
+					<Nothing v-if="ctaVisible && tasks.length === 0 && !loading">
+						{{ $t('project.list.empty') }}
+						<ButtonLink
+							v-if="project.id > 0"
+							@click="focusNewTaskInput()"
+						>
+							{{ $t('project.list.newTaskCta') }}
+						</ButtonLink>
+					</Nothing>
+
+
+					<draggable
+						v-if="tasks && tasks.length > 0"
+						v-bind="DRAG_OPTIONS"
+						v-model="tasks"
+						group="tasks"
+						handle=".handle"
+						:disabled="!canWrite"
+						item-key="id"
+						tag="ul"
+						:component-data="{
+							class: {
+								tasks: true,
+								'dragging-disabled': !canWrite || isAlphabeticalSorting
+							},
+							type: 'transition-group'
+						}"
+						@start="() => drag = true"
+						@end="saveTaskPosition"
+					>
+						<template #item="{element: t}">
+							<SingleTaskInProject
+								:show-list-color="false"
+								:disabled="!canWrite"
+								:can-mark-as-done="canWrite || isSavedFilter(project)"
+								:the-task="t"
+								:all-tasks="allTasks"
+								@taskUpdated="updateTasks"
+							>
+								<template v-if="canWrite">
+									<span class="icon handle">
+										<icon icon="grip-lines" />
+									</span>
+								</template>
+							</SingleTaskInProject>
+						</template>
+					</draggable>
+
+					<Pagination 
+						:total-pages="totalPages"
+						:current-page="currentPage"
+					/>
+				</card>
+			</div>
 		</template>
 	</ProjectWrapper>
 </template>
diff --git a/src/views/project/ProjectTable.vue b/src/views/project/ProjectTable.vue
index 3cba9c467..1be3a5a08 100644
--- a/src/views/project/ProjectTable.vue
+++ b/src/views/project/ProjectTable.vue
@@ -1,169 +1,244 @@
 <template>
-	<ProjectWrapper class="project-table" :project-id="projectId" viewName="table">
+	<ProjectWrapper
+		class="project-table"
+		:project-id="projectId"
+		view-name="table"
+	>
 		<template #header>
 			<div class="filter-container">
 				<div class="items">
-					<popup>
+					<Popup>
 						<template #trigger="{toggle}">
 							<x-button
-								@click.prevent.stop="toggle()"
 								icon="th"
 								variant="secondary"
+								@click.prevent.stop="toggle()"
 							>
 								{{ $t('project.table.columns') }}
 							</x-button>
 						</template>
 						<template #content="{isOpen}">
-							<card class="columns-filter" :class="{'is-open': isOpen}">
-								<fancycheckbox v-model="activeColumns.index">#</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.done">
+							<card
+								class="columns-filter"
+								:class="{'is-open': isOpen}"
+							>
+								<Fancycheckbox v-model="activeColumns.index">
+									#
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.done">
 									{{ $t('task.attributes.done') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.title">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.title">
 									{{ $t('task.attributes.title') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.priority">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.priority">
 									{{ $t('task.attributes.priority') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.labels">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.labels">
 									{{ $t('task.attributes.labels') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.assignees">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.assignees">
 									{{ $t('task.attributes.assignees') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.dueDate">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.dueDate">
 									{{ $t('task.attributes.dueDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.startDate">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.startDate">
 									{{ $t('task.attributes.startDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.endDate">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.endDate">
 									{{ $t('task.attributes.endDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.percentDone">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.percentDone">
 									{{ $t('task.attributes.percentDone') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.created">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.created">
 									{{ $t('task.attributes.created') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.updated">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.updated">
 									{{ $t('task.attributes.updated') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.createdBy">
+								</Fancycheckbox>
+								<Fancycheckbox v-model="activeColumns.createdBy">
 									{{ $t('task.attributes.createdBy') }}
-								</fancycheckbox>
+								</Fancycheckbox>
 							</card>
 						</template>
-					</popup>
-					<filter-popup v-model="params"/>
+					</Popup>
+					<FilterPopup v-model="params" />
 				</div>
 			</div>
 		</template>
 
 		<template #default>
-			<div :class="{'is-loading': loading}" class="loader-container">
-				<card :padding="false" :has-content="false">
+			<div
+				:class="{'is-loading': loading}"
+				class="loader-container"
+			>
+				<card
+					:padding="false"
+					:has-content="false"
+				>
 					<div class="has-horizontal-overflow">
 						<table class="table has-actions is-hoverable is-fullwidth mb-0">
 							<thead>
-							<tr>
-								<th v-if="activeColumns.index">
-									#
-									<Sort :order="sortBy.index" @click="sort('index')"/>
-								</th>
-								<th v-if="activeColumns.done">
-									{{ $t('task.attributes.done') }}
-									<Sort :order="sortBy.done" @click="sort('done')"/>
-								</th>
-								<th v-if="activeColumns.title">
-									{{ $t('task.attributes.title') }}
-									<Sort :order="sortBy.title" @click="sort('title')"/>
-								</th>
-								<th v-if="activeColumns.priority">
-									{{ $t('task.attributes.priority') }}
-									<Sort :order="sortBy.priority" @click="sort('priority')"/>
-								</th>
-								<th v-if="activeColumns.labels">
-									{{ $t('task.attributes.labels') }}
-								</th>
-								<th v-if="activeColumns.assignees">
-									{{ $t('task.attributes.assignees') }}
-								</th>
-								<th v-if="activeColumns.dueDate">
-									{{ $t('task.attributes.dueDate') }}
-									<Sort :order="sortBy.due_date" @click="sort('due_date')"/>
-								</th>
-								<th v-if="activeColumns.startDate">
-									{{ $t('task.attributes.startDate') }}
-									<Sort :order="sortBy.start_date" @click="sort('start_date')"/>
-								</th>
-								<th v-if="activeColumns.endDate">
-									{{ $t('task.attributes.endDate') }}
-									<Sort :order="sortBy.end_date" @click="sort('end_date')"/>
-								</th>
-								<th v-if="activeColumns.percentDone">
-									{{ $t('task.attributes.percentDone') }}
-									<Sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
-								</th>
-								<th v-if="activeColumns.created">
-									{{ $t('task.attributes.created') }}
-									<Sort :order="sortBy.created" @click="sort('created')"/>
-								</th>
-								<th v-if="activeColumns.updated">
-									{{ $t('task.attributes.updated') }}
-									<Sort :order="sortBy.updated" @click="sort('updated')"/>
-								</th>
-								<th v-if="activeColumns.createdBy">
-									{{ $t('task.attributes.createdBy') }}
-								</th>
-							</tr>
+								<tr>
+									<th v-if="activeColumns.index">
+										#
+										<Sort
+											:order="sortBy.index"
+											@click="sort('index')"
+										/>
+									</th>
+									<th v-if="activeColumns.done">
+										{{ $t('task.attributes.done') }}
+										<Sort
+											:order="sortBy.done"
+											@click="sort('done')"
+										/>
+									</th>
+									<th v-if="activeColumns.title">
+										{{ $t('task.attributes.title') }}
+										<Sort
+											:order="sortBy.title"
+											@click="sort('title')"
+										/>
+									</th>
+									<th v-if="activeColumns.priority">
+										{{ $t('task.attributes.priority') }}
+										<Sort
+											:order="sortBy.priority"
+											@click="sort('priority')"
+										/>
+									</th>
+									<th v-if="activeColumns.labels">
+										{{ $t('task.attributes.labels') }}
+									</th>
+									<th v-if="activeColumns.assignees">
+										{{ $t('task.attributes.assignees') }}
+									</th>
+									<th v-if="activeColumns.dueDate">
+										{{ $t('task.attributes.dueDate') }}
+										<Sort
+											:order="sortBy.due_date"
+											@click="sort('due_date')"
+										/>
+									</th>
+									<th v-if="activeColumns.startDate">
+										{{ $t('task.attributes.startDate') }}
+										<Sort
+											:order="sortBy.start_date"
+											@click="sort('start_date')"
+										/>
+									</th>
+									<th v-if="activeColumns.endDate">
+										{{ $t('task.attributes.endDate') }}
+										<Sort
+											:order="sortBy.end_date"
+											@click="sort('end_date')"
+										/>
+									</th>
+									<th v-if="activeColumns.percentDone">
+										{{ $t('task.attributes.percentDone') }}
+										<Sort
+											:order="sortBy.percent_done"
+											@click="sort('percent_done')"
+										/>
+									</th>
+									<th v-if="activeColumns.created">
+										{{ $t('task.attributes.created') }}
+										<Sort
+											:order="sortBy.created"
+											@click="sort('created')"
+										/>
+									</th>
+									<th v-if="activeColumns.updated">
+										{{ $t('task.attributes.updated') }}
+										<Sort
+											:order="sortBy.updated"
+											@click="sort('updated')"
+										/>
+									</th>
+									<th v-if="activeColumns.createdBy">
+										{{ $t('task.attributes.createdBy') }}
+									</th>
+								</tr>
 							</thead>
 							<tbody>
-							<tr :key="t.id" v-for="t in tasks">
-								<td v-if="activeColumns.index">
-									<router-link :to="taskDetailRoutes[t.id]">
-										<template v-if="t.identifier === ''">
-											#{{ t.index }}
-										</template>
-										<template v-else>
-											{{ t.identifier }}
-										</template>
-									</router-link>
-								</td>
-								<td v-if="activeColumns.done">
-									<Done :is-done="t.done" variant="small"/>
-								</td>
-								<td v-if="activeColumns.title">
-									<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
-								</td>
-								<td v-if="activeColumns.priority">
-									<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
-								</td>
-								<td v-if="activeColumns.labels">
-									<labels :labels="t.labels"/>
-								</td>
-								<td v-if="activeColumns.assignees">
-									<assignee-list
-										v-if="t.assignees.length > 0"
-										:assignees="t.assignees"
-										:avatar-size="28"
-										class="ml-1"
-										:inline="true"
+								<tr
+									v-for="t in tasks"
+									:key="t.id"
+								>
+									<td v-if="activeColumns.index">
+										<router-link :to="taskDetailRoutes[t.id]">
+											<template v-if="t.identifier === ''">
+												#{{ t.index }}
+											</template>
+											<template v-else>
+												{{ t.identifier }}
+											</template>
+										</router-link>
+									</td>
+									<td v-if="activeColumns.done">
+										<Done
+											:is-done="t.done"
+											variant="small"
+										/>
+									</td>
+									<td v-if="activeColumns.title">
+										<router-link :to="taskDetailRoutes[t.id]">
+											{{ t.title }}
+										</router-link>
+									</td>
+									<td v-if="activeColumns.priority">
+										<PriorityLabel
+											:priority="t.priority"
+											:done="t.done"
+											:show-all="true"
+										/>
+									</td>
+									<td v-if="activeColumns.labels">
+										<Labels :labels="t.labels" />
+									</td>
+									<td v-if="activeColumns.assignees">
+										<AssigneeList
+											v-if="t.assignees.length > 0"
+											:assignees="t.assignees"
+											:avatar-size="28"
+											class="ml-1"
+											:inline="true"
+										/>
+									</td>
+									<DateTableCell
+										v-if="activeColumns.dueDate"
+										:date="t.dueDate"
 									/>
-								</td>
-								<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
-								<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
-								<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
-								<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
-								<date-table-cell :date="t.created" v-if="activeColumns.created"/>
-								<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
-								<td v-if="activeColumns.createdBy">
-									<user
-										:avatar-size="27"
-										:show-username="false"
-										:user="t.createdBy"/>
-								</td>
-							</tr>
+									<DateTableCell
+										v-if="activeColumns.startDate"
+										:date="t.startDate"
+									/>
+									<DateTableCell
+										v-if="activeColumns.endDate"
+										:date="t.endDate"
+									/>
+									<td v-if="activeColumns.percentDone">
+										{{ t.percentDone * 100 }}%
+									</td>
+									<DateTableCell
+										v-if="activeColumns.created"
+										:date="t.created"
+									/>
+									<DateTableCell
+										v-if="activeColumns.updated"
+										:date="t.updated"
+									/>
+									<td v-if="activeColumns.createdBy">
+										<User
+											:avatar-size="27"
+											:show-username="false"
+											:user="t.createdBy"
+										/>
+									</td>
+								</tr>
 							</tbody>
 						</table>
 					</div>
@@ -202,6 +277,12 @@ import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
 
+const {
+	projectId,
+} = defineProps<{
+	projectId: IProject['id'],
+}>()
+
 const ACTIVE_COLUMNS_DEFAULT = {
 	index: true,
 	done: true,
@@ -218,12 +299,6 @@ const ACTIVE_COLUMNS_DEFAULT = {
 	createdBy: false,
 }
 
-const {
-	projectId,
-} = defineProps<{
-	projectId: IProject['id'],
-}>()
-
 const SORT_BY_DEFAULT: SortBy = {
 	index: 'desc',
 }
diff --git a/src/views/project/settings/archive.vue b/src/views/project/settings/archive.vue
index ad59af279..d229521a7 100644
--- a/src/views/project/settings/archive.vue
+++ b/src/views/project/settings/archive.vue
@@ -3,7 +3,9 @@
 		@close="$router.back()"
 		@submit="archiveProject()"
 	>
-		<template #header><span>{{ project.isArchived ? $t('project.archive.unarchive') : $t('project.archive.archive') }}</span></template>
+		<template #header>
+			<span>{{ project.isArchived ? $t('project.archive.unarchive') : $t('project.archive.archive') }}</span>
+		</template>
 		
 		<template #text>
 			<p>{{ project.isArchived ? $t('project.archive.unarchiveText') : $t('project.archive.archiveText') }}</p>
@@ -12,7 +14,7 @@
 </template>
 
 <script lang="ts">
-export default {name: 'project-setting-archive'}
+export default {name: 'ProjectSettingArchive'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/project/settings/background.vue b/src/views/project/settings/background.vue
index b31977fec..96061641c 100644
--- a/src/views/project/settings/background.vue
+++ b/src/views/project/settings/background.vue
@@ -1,46 +1,54 @@
 <template>
-	<create-edit
+	<CreateEdit
 		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
 		:title="$t('project.background.title')"
 		:loading="backgroundService.loading"
 		class="project-background-setting"
 		:wide="true"
 	>
-		<div class="mb-4" v-if="uploadBackgroundEnabled">
+		<div
+			v-if="uploadBackgroundEnabled"
+			class="mb-4"
+		>
 			<input
-				@change="uploadBackground"
+				ref="backgroundUploadInput"
 				accept="image/*"
 				class="is-hidden"
-				ref="backgroundUploadInput"
 				type="file"
-			/>
+				@change="uploadBackground"
+			>
 			<x-button
 				:loading="backgroundUploadService.loading"
-				@click="backgroundUploadInput?.click()"
 				variant="primary"
+				@click="backgroundUploadInput?.click()"
 			>
 				{{ $t('project.background.upload') }}
 			</x-button>
 		</div>
 		<template v-if="unsplashBackgroundEnabled">
 			<input
+				v-model="backgroundSearchTerm"
 				:class="{'is-loading': backgroundService.loading}"
-				@keyup="debounceNewBackgroundSearch()"
 				class="input is-expanded"
 				:placeholder="$t('project.background.searchPlaceholder')"
 				type="text"
-				v-model="backgroundSearchTerm"
-			/>
+				@keyup="debounceNewBackgroundSearch()"
+			>
 
 			<p class="unsplash-credit">
-				<BaseButton class="unsplash-credit__link" href="https://unsplash.com">{{ $t('project.background.poweredByUnsplash') }}</BaseButton>
+				<BaseButton
+					class="unsplash-credit__link"
+					href="https://unsplash.com"
+				>
+					{{ $t('project.background.poweredByUnsplash') }}
+				</BaseButton>
 			</p>
 
 			<ul class="image-search__result-list">
 				<li
 					v-for="im in backgroundSearchResult"
-					class="image-search__result-item"
 					:key="im.id"
+					class="image-search__result-item"
 					:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
 				>
 					<CustomTransition name="fade">
@@ -49,7 +57,11 @@
 							class="image-search__image-button"
 							@click="setBackground(im.id)"
 						>
-							<img class="image-search__image" :src="backgroundThumbs[im.id]" alt="" />
+							<img
+								class="image-search__image"
+								:src="backgroundThumbs[im.id]"
+								alt=""
+							>
 						</BaseButton>
 					</CustomTransition>
 
@@ -64,10 +76,10 @@
 			<x-button
 				v-if="backgroundSearchResult.length > 0"
 				:disabled="backgroundService.loading"
-				@click="searchBackgrounds(currentPage + 1)"
 				class="is-load-more-button mt-4"
 				:shadow="false"
 				variant="secondary"
+				@click="searchBackgrounds(currentPage + 1)"
 			>
 				{{ backgroundService.loading ? $t('misc.loading') : $t('project.background.loadMore') }}
 			</x-button>
@@ -90,11 +102,11 @@
 				{{ $t('misc.close') }}
 			</x-button>
 		</template>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script lang="ts">
-export default { name: 'project-setting-background' }
+export default { name: 'ProjectSettingBackground' }
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/project/settings/delete.vue b/src/views/project/settings/delete.vue
index b5b97b3a2..2ee998672 100644
--- a/src/views/project/settings/delete.vue
+++ b/src/views/project/settings/delete.vue
@@ -3,19 +3,28 @@
 		@close="$router.back()"
 		@submit="deleteProject()"
 	>
-		<template #header><span>{{ $t('project.delete.header') }}</span></template>
+		<template #header>
+			<span>{{ $t('project.delete.header') }}</span>
+		</template>
 
 		<template #text>
 			<p>
 				{{ $t('project.delete.text1') }}
 			</p>
 
-			<p class="has-text-weight-bold" v-if="totalTasks !== null">
+			<p
+				v-if="totalTasks !== null"
+				class="has-text-weight-bold"
+			>
 				{{
 					totalTasks > 0 ? $t('project.delete.tasksToDelete', {count: totalTasks}) : $t('project.delete.noTasksToDelete')
 				}}
 			</p>
-			<Loading v-else class="is-loading-small" variant="default"/>
+			<Loading
+				v-else
+				class="is-loading-small"
+				variant="default"
+			/>
 
 			<p>
 				{{ $t('misc.cannotBeUndone') }}
diff --git a/src/views/project/settings/duplicate.vue b/src/views/project/settings/duplicate.vue
index 8da9ba5d8..4ebfc1720 100644
--- a/src/views/project/settings/duplicate.vue
+++ b/src/views/project/settings/duplicate.vue
@@ -1,14 +1,14 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('project.duplicate.title')"
 		primary-icon="paste"
 		:primary-label="$t('project.duplicate.label')"
-		@primary="duplicate"
 		:loading="isLoading"
+		@primary="duplicate"
 	>
 		<p>{{ $t('project.duplicate.text') }}</p>
-		<project-search v-model="parentProject"/>
-	</create-edit>
+		<ProjectSearch v-model="parentProject" />
+	</CreateEdit>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/project/settings/edit.vue b/src/views/project/settings/edit.vue
index 595e1d96f..45a808689 100644
--- a/src/views/project/settings/edit.vue
+++ b/src/views/project/settings/edit.vue
@@ -1,77 +1,85 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('project.edit.header')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
-		@primary="save"
 		:tertiary="$t('misc.delete')"
+		@primary="save"
 		@tertiary="$router.push({ name: 'project.settings.delete', params: { id: projectId } })"
 	>
 		<div class="field">
-			<label class="label" for="title">{{ $t('project.title') }}</label>
+			<label
+				class="label"
+				for="title"
+			>{{ $t('project.title') }}</label>
 			<div class="control">
 				<input
+					id="title"
+					v-model="project.title"
+					v-focus
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading || undefined"
-					@keyup.enter="save"
 					class="input"
-					id="title"
 					:placeholder="$t('project.edit.titlePlaceholder')"
 					type="text"
-					v-focus
-					v-model="project.title"/>
+					@keyup.enter="save"
+				>
 			</div>
 		</div>
 		<div class="field">
 			<label
+				v-tooltip="$t('project.edit.identifierTooltip')"
 				class="label"
 				for="identifier"
-				v-tooltip="$t('project.edit.identifierTooltip')">
+			>
 				{{ $t('project.edit.identifier') }}
 			</label>
 			<div class="control">
 				<input
+					id="identifier"
+					v-model="project.identifier"
+					v-focus
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading || undefined"
-					@keyup.enter="save"
 					class="input"
-					id="identifier"
 					:placeholder="$t('project.edit.identifierPlaceholder')"
 					type="text"
-					v-focus
-					v-model="project.identifier"/>
+					@keyup.enter="save"
+				>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('project.parent') }}</label>
 			<div class="control">
-				<project-search v-model="parentProject"/>
+				<ProjectSearch v-model="parentProject" />
 			</div>
 		</div>
 		<div class="field">
-			<label class="label" for="projectdescription">{{ $t('project.edit.description') }}</label>
+			<label
+				class="label"
+				for="projectdescription"
+			>{{ $t('project.edit.description') }}</label>
 			<div class="control">
 				<Editor
+					id="projectdescription"
+					v-model="project.description"
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading"
-					id="projectdescription"
 					:placeholder="$t('project.edit.descriptionPlaceholder')"
-					v-model="project.description"
 				/>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">{{ $t('project.edit.color') }}</label>
 			<div class="control">
-				<color-picker v-model="project.hexColor"/>
+				<ColorPicker v-model="project.hexColor" />
 			</div>
 		</div>
-
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script lang="ts">
-export default {name: 'project-setting-edit'}
+export default {name: 'ProjectSettingEdit'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/project/settings/share.vue b/src/views/project/settings/share.vue
index 47c959355..ffa5da1b9 100644
--- a/src/views/project/settings/share.vue
+++ b/src/views/project/settings/share.vue
@@ -1,29 +1,33 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('project.share.header')"
 		:has-primary-action="false"
 	>
 		<template v-if="project">
 			<userTeam
 				:id="project.id"
-				:userIsAdmin="userIsAdmin"
-				shareType="user"
+				:user-is-admin="userIsAdmin"
+				share-type="user"
 				type="project"
 			/>
 			<userTeam
 				:id="project.id"
-				:userIsAdmin="userIsAdmin"
-				shareType="team"
+				:user-is-admin="userIsAdmin"
+				share-type="team"
 				type="project"
 			/>
 		</template>
 
-		<link-sharing :project-id="projectId" v-if="linkSharingEnabled" class="mt-4"/>
-	</create-edit>
+		<LinkSharing
+			v-if="linkSharingEnabled"
+			:project-id="projectId"
+			class="mt-4"
+		/>
+	</CreateEdit>
 </template>
 
 <script lang="ts">
-export default {name: 'project-setting-share'}
+export default {name: 'ProjectSettingShare'}
 </script>
 
 <script lang="ts" setup>
diff --git a/src/views/project/settings/webhooks.vue b/src/views/project/settings/webhooks.vue
index e72c0cf38..56f27e11d 100644
--- a/src/views/project/settings/webhooks.vue
+++ b/src/views/project/settings/webhooks.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-export default {name: 'project-setting-webhooks'}
+export default {name: 'ProjectSettingWebhooks'}
 </script>
 
 <script lang="ts" setup>
@@ -118,48 +118,61 @@ function validateSelectedEvents() {
 </script>
 
 <template>
-	<create-edit
+	<CreateEdit
 		:title="$t('project.webhooks.title')"
 		:has-primary-action="false"
 		:wide="true"
 	>
 		<x-button
 			v-if="!(webhooks?.length === 0 || showNewForm)"
-			@click="showNewForm = true"
 			icon="plus"
-			class="mb-4">
+			class="mb-4"
+			@click="showNewForm = true"
+		>
 			{{ $t('project.webhooks.create') }}
 		</x-button>
 
-		<div class="p-4" v-if="webhooks?.length === 0 || showNewForm">
+		<div
+			v-if="webhooks?.length === 0 || showNewForm"
+			class="p-4"
+		>
 			<div class="field">
-				<label class="label" for="targetUrl">
+				<label
+					class="label"
+					for="targetUrl"
+				>
 					{{ $t('project.webhooks.targetUrl') }}
 				</label>
 				<div class="control">
 					<input
-						required
 						id="targetUrl"
+						v-model="newWebhook.targetUrl"
+						required
 						class="input"
 						:placeholder="$t('project.webhooks.targetUrl')"
-						v-model="newWebhook.targetUrl"
 						@focusout="validateTargetUrl"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!webhookTargetUrlValid">
+				<p
+					v-if="!webhookTargetUrlValid"
+					class="help is-danger"
+				>
 					{{ $t('project.webhooks.targetUrlInvalid') }}
 				</p>
 			</div>
 			<div class="field">
-				<label class="label" for="secret">
+				<label
+					class="label"
+					for="secret"
+				>
 					{{ $t('project.webhooks.secret') }}
 				</label>
 				<div class="control">
 					<input
 						id="secret"
-						class="input"
 						v-model="newWebhook.secret"
-					/>
+						class="input"
+					>
 				</div>
 				<p class="help">
 					{{ $t('project.webhooks.secretHint') }}
@@ -169,65 +182,77 @@ function validateSelectedEvents() {
 				</p>
 			</div>
 			<div class="field">
-				<label class="label" for="secret">
+				<label
+					class="label"
+					for="secret"
+				>
 					{{ $t('project.webhooks.events') }}
 				</label>
 				<p class="help">
 					{{ $t('project.webhooks.eventsHint') }}
 				</p>
 				<div class="control">
-					<fancycheckbox
+					<Fancycheckbox
 						v-for="event in availableEvents"
 						:key="event"
-						class="available-events-check"
 						v-model="newWebhookEvents[event]"
-						@update:model-value="validateSelectedEvents"
+						class="available-events-check"
+						@update:modelValue="validateSelectedEvents"
 					>
 						{{ event }}
-					</fancycheckbox>
+					</Fancycheckbox>
 				</div>
-				<p class="help is-danger" v-if="!selectedEventsValid">
+				<p
+					v-if="!selectedEventsValid"
+					class="help is-danger"
+				>
 					{{ $t('project.webhooks.mustSelectEvents') }}
 				</p>
 			</div>
-			<x-button @click="create" icon="plus">
+			<x-button
+				icon="plus"
+				@click="create"
+			>
 				{{ $t('project.webhooks.create') }}
 			</x-button>
 		</div>
 
 		<table
-			class="table has-actions is-striped is-hoverable is-fullwidth"
 			v-if="webhooks?.length > 0"
+			class="table has-actions is-striped is-hoverable is-fullwidth"
 		>
 			<thead>
-			<tr>
-				<th>{{ $t('project.webhooks.targetUrl') }}</th>
-				<th>{{ $t('project.webhooks.events') }}</th>
-				<th>{{ $t('misc.created') }}</th>
-				<th>{{ $t('misc.createdBy') }}</th>
-				<th></th>
-			</tr>
+				<tr>
+					<th>{{ $t('project.webhooks.targetUrl') }}</th>
+					<th>{{ $t('project.webhooks.events') }}</th>
+					<th>{{ $t('misc.created') }}</th>
+					<th>{{ $t('misc.createdBy') }}</th>
+					<th />
+				</tr>
 			</thead>
 			<tbody>
-			<tr :key="w.id" v-for="w in webhooks">
-				<td>{{ w.targetUrl }}</td>
-				<td>{{ w.events.join(', ') }}</td>
-				<td>{{ formatDateShort(w.created) }}</td>
-				<td>
-					<User
-						:avatar-size="25"
-						:user="w.createdBy"
-					/>
-				</td>
+				<tr
+					v-for="w in webhooks"
+					:key="w.id"
+				>
+					<td>{{ w.targetUrl }}</td>
+					<td>{{ w.events.join(', ') }}</td>
+					<td>{{ formatDateShort(w.created) }}</td>
+					<td>
+						<User
+							:avatar-size="25"
+							:user="w.createdBy"
+						/>
+					</td>
 
-				<td class="actions">
-					<x-button
-						@click="() => {showDeleteModal = true;webhookIdToDelete = w.id}"
-						class="is-danger"
-						icon="trash-alt"
-					/>
-				</td>
-			</tr>
+					<td class="actions">
+						<x-button
+							class="is-danger"
+							icon="trash-alt"
+							@click="() => {showDeleteModal = true;webhookIdToDelete = w.id}"
+						/>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 
@@ -244,7 +269,7 @@ function validateSelectedEvents() {
 				<p>{{ $t('project.webhooks.deleteText') }}</p>
 			</template>
 		</modal>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/sharing/LinkSharingAuth.vue b/src/views/sharing/LinkSharingAuth.vue
index c19bb29c9..8daa79ba5 100644
--- a/src/views/sharing/LinkSharingAuth.vue
+++ b/src/views/sharing/LinkSharingAuth.vue
@@ -1,9 +1,12 @@
 <template>
 	<div>
-		<message v-if="loading">
+		<Message v-if="loading">
 			{{ $t('sharing.authenticating') }}
-		</message>
-		<div v-if="authenticateWithPassword" class="box">
+		</Message>
+		<div
+			v-if="authenticateWithPassword"
+			class="box"
+		>
 			<p class="pb-2">
 				{{ $t('sharing.passwordRequired') }}
 			</p>
@@ -11,21 +14,28 @@
 				<div class="control">
 					<input
 						id="linkSharePassword"
+						v-model="password"
+						v-focus
 						type="password"
 						class="input"
 						:placeholder="$t('user.auth.passwordPlaceholder')"
-						v-model="password"
-						v-focus
 						@keyup.enter.prevent="authenticate()"
-					/>
+					>
 				</div>
 			</div>
 
-			<x-button @click="authenticate()" :loading="loading">
+			<x-button
+				:loading="loading"
+				@click="authenticate()"
+			>
 				{{ $t('user.auth.login') }}
 			</x-button>
 
-			<Message variant="danger" class="mt-4" v-if="errorMessage !== ''">
+			<Message
+				v-if="errorMessage !== ''"
+				variant="danger"
+				class="mt-4"
+			>
 				{{ errorMessage }}
 			</Message>
 		</div>
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 71d35b3ee..0d2d747ea 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -1,26 +1,46 @@
 <template>
-	<div class="is-max-width-desktop has-text-left" v-cy="'showTasks'">
+	<div
+		v-cy="'showTasks'"
+		class="is-max-width-desktop has-text-left"
+	>
 		<h3 class="mb-2 title">
 			{{ pageTitle }}
 		</h3>
-		<p v-if="!showAll" class="show-tasks-options">
-			<datepicker-with-range @update:model-value="setDate">
+		<p
+			v-if="!showAll"
+			class="show-tasks-options"
+		>
+			<DatepickerWithRange @update:modelValue="setDate">
 				<template #trigger="{toggle}">
-					<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
+					<x-button
+						variant="primary"
+						:shadow="false"
+						class="mb-2"
+						@click.prevent.stop="toggle()"
+					>
 						{{ $t('task.show.select') }}
 					</x-button>
 				</template>
-			</datepicker-with-range>
-			<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
+			</DatepickerWithRange>
+			<Fancycheckbox
+				:model-value="showNulls"
+				class="mr-2"
+				@update:modelValue="setShowNulls"
+			>
 				{{ $t('task.show.noDates') }}
-			</fancycheckbox>
-			<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
+			</Fancycheckbox>
+			<Fancycheckbox
+				:model-value="showOverdue"
+				@update:modelValue="setShowOverdue"
+			>
 				{{ $t('task.show.overdue') }}
-			</fancycheckbox>
+			</Fancycheckbox>
 		</p>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
-			<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
-			<LlamaCool class="llama-cool"/>
+			<h3 class="has-text-centered mt-6">
+				{{ $t('task.show.noTasks') }}
+			</h3>
+			<LlamaCool class="llama-cool" />
 		</template>
 
 		<card
@@ -31,15 +51,20 @@
 			:loading="loading"
 		>
 			<div class="p-2">
-				<single-task-in-project
+				<SingleTaskInProject
 					v-for="t in tasks"
 					:key="t.id"
 					:show-project="true"
 					:the-task="t"
-					@taskUpdated="updateTasks"/>
+					@taskUpdated="updateTasks"
+				/>
 			</div>
 		</card>
-		<div v-else :class="{ 'is-loading': loading}" class="spinner"></div>
+		<div
+			v-else
+			:class="{ 'is-loading': loading}"
+			class="spinner"
+		/>
 	</div>
 </template>
 
@@ -61,19 +86,6 @@ import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 import {useProjectStore} from '@/stores/projects'
 
-const authStore = useAuthStore()
-const taskStore = useTaskStore()
-const route = useRoute()
-const router = useRouter()
-const {t} = useI18n({useScope: 'global'})
-
-const tasks = ref<ITask[]>([])
-const showNothingToDo = ref<boolean>(false)
-
-const projectStore = useProjectStore()
-
-setTimeout(() => showNothingToDo.value = true, 100)
-
 // Linting disabled because we explicitely enabled destructuring in vite's config, this will work.
 // eslint-disable-next-line vue/no-setup-props-destructure
 const {
@@ -87,6 +99,18 @@ const {
 	showNulls?: boolean,
 	showOverdue?: boolean,
 }>()
+const authStore = useAuthStore()
+const taskStore = useTaskStore()
+const route = useRoute()
+const router = useRouter()
+const {t} = useI18n({useScope: 'global'})
+
+const tasks = ref<ITask[]>([])
+const showNothingToDo = ref<boolean>(false)
+
+const projectStore = useProjectStore()
+
+setTimeout(() => showNothingToDo.value = true, 100)
 
 const showAll = computed(() => typeof dateFrom === 'undefined' || typeof dateTo === 'undefined')
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 396f13153..da8c7c9a0 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -7,312 +7,402 @@
 		}"
 	>
 		<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
-		<div class="task-view" v-if="visible">
+		<div
+			v-if="visible"
+			class="task-view"
+		>
 			<Heading
-				:task="task"
-				@update:task="Object.assign(task, $event)"
-				:can-write="canWrite"
 				ref="heading"
+				:task="task"
+				:can-write="canWrite"
+				@update:task="Object.assign(task, $event)"
 			/>
-			<h6 class="subtitle" v-if="project?.id">
-				<template v-for="p in projectStore.getAncestors(project)" :key="p.id">
+			<h6
+				v-if="project?.id"
+				class="subtitle"
+			>
+				<template
+					v-for="p in projectStore.getAncestors(project)"
+					:key="p.id"
+				>
 					<router-link :to="{ name: 'project.index', params: { projectId: p.id } }">
 						{{ getProjectTitle(p) }}
 					</router-link>
-					<span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span>
+					<span
+						v-if="p.id !== project?.id"
+						class="has-text-grey-light"
+					> &gt; </span>
 				</template>
 			</h6>
 
-			<checklist-summary :task="task"/>
+			<ChecklistSummary :task="task" />
 
 			<!-- Content and buttons -->
 			<div class="columns mt-2">
 				<!-- Content -->
-				<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
+				<div
+					:class="{'is-two-thirds': canWrite}"
+					class="column detail-content"
+				>
 					<div class="columns details">
-						<div class="column assignees" v-if="activeFields.assignees">
+						<div
+							v-if="activeFields.assignees"
+							class="column assignees"
+						>
 							<!-- Assignees -->
 							<div class="detail-title">
-								<icon icon="users"/>
+								<icon icon="users" />
 								{{ $t('task.attributes.assignees') }}
 							</div>
-							<edit-assignees
+							<EditAssignees
 								v-if="canWrite"
-								:project-id="task.projectId"
-								:task-id="task.id"
 								:ref="e => setFieldRef('assignees', e)"
 								v-model="task.assignees"
+								:project-id="task.projectId"
+								:task-id="task.id"
 							/>
-							<assignee-list
+							<AssigneeList
 								v-else
 								:assignees="task.assignees"
 								class="mt-2"
 							/>
 						</div>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.priority">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.priority"
+								class="column"
+							>
 								<!-- Priority -->
 								<div class="detail-title">
-									<icon icon="exclamation"/>
+									<icon icon="exclamation" />
 									{{ $t('task.attributes.priority') }}
 								</div>
-								<priority-select
-									:disabled="!canWrite"
-									@update:model-value="setPriority"
+								<PrioritySelect
 									:ref="e => setFieldRef('priority', e)"
-									v-model="task.priority"/>
+									v-model="task.priority"
+									:disabled="!canWrite"
+									@update:modelValue="setPriority"
+								/>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.dueDate">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.dueDate"
+								class="column"
+							>
 								<!-- Due Date -->
 								<div class="detail-title">
-									<icon icon="calendar"/>
+									<icon icon="calendar" />
 									{{ $t('task.attributes.dueDate') }}
 								</div>
 								<div class="date-input">
-									<datepicker
+									<Datepicker
+										:ref="e => setFieldRef('dueDate', e)"
 										v-model="task.dueDate"
-										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseDueDate')"
 										:disabled="taskService.loading || !canWrite"
-										:ref="e => setFieldRef('dueDate', e)"
+										@closeOnChange="saveTask()"
 									/>
 									<BaseButton
 										v-if="task.dueDate && canWrite"
+										class="remove"
 										@click="() => {task.dueDate = null;saveTask()}"
-										class="remove">
+									>
 										<span class="icon is-small">
-											<icon icon="times"></icon>
+											<icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.percentDone">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.percentDone"
+								class="column"
+							>
 								<!-- Progress -->
 								<div class="detail-title">
-									<icon icon="percent"/>
+									<icon icon="percent" />
 									{{ $t('task.attributes.percentDone') }}
 								</div>
-								<percent-done-select
-									:disabled="!canWrite"
-									@update:model-value="setPercentDone"
+								<PercentDoneSelect
 									:ref="e => setFieldRef('percentDone', e)"
-									v-model="task.percentDone"/>
+									v-model="task.percentDone"
+									:disabled="!canWrite"
+									@update:modelValue="setPercentDone"
+								/>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.startDate">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.startDate"
+								class="column"
+							>
 								<!-- Start Date -->
 								<div class="detail-title">
-									<icon icon="play"/>
+									<icon icon="play" />
 									{{ $t('task.attributes.startDate') }}
 								</div>
 								<div class="date-input">
-									<datepicker
+									<Datepicker
+										:ref="e => setFieldRef('startDate', e)"
 										v-model="task.startDate"
-										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseStartDate')"
 										:disabled="taskService.loading || !canWrite"
-										:ref="e => setFieldRef('startDate', e)"
+										@closeOnChange="saveTask()"
 									/>
 									<BaseButton
-										@click="() => {task.startDate = null;saveTask()}"
 										v-if="task.startDate && canWrite"
 										class="remove"
+										@click="() => {task.startDate = null;saveTask()}"
 									>
 										<span class="icon is-small">
-											<icon icon="times"></icon>
+											<icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.endDate">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.endDate"
+								class="column"
+							>
 								<!-- End Date -->
 								<div class="detail-title">
-									<icon icon="stop"/>
+									<icon icon="stop" />
 									{{ $t('task.attributes.endDate') }}
 								</div>
 								<div class="date-input">
-									<datepicker
+									<Datepicker
+										:ref="e => setFieldRef('endDate', e)"
 										v-model="task.endDate"
-										@close-on-change="saveTask()"
 										:choose-date-label="$t('task.detail.chooseEndDate')"
 										:disabled="taskService.loading || !canWrite"
-										:ref="e => setFieldRef('endDate', e)"
+										@closeOnChange="saveTask()"
 									/>
 									<BaseButton
-										@click="() => {task.endDate = null;saveTask()}"
 										v-if="task.endDate && canWrite"
-										class="remove">
+										class="remove"
+										@click="() => {task.endDate = null;saveTask()}"
+									>
 										<span class="icon is-small">
-											<icon icon="times"></icon>
+											<icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.reminders">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.reminders"
+								class="column"
+							>
 								<!-- Reminders -->
 								<div class="detail-title">
-									<icon :icon="['far', 'clock']"/>
+									<icon :icon="['far', 'clock']" />
 									{{ $t('task.attributes.reminders') }}
 								</div>
-								<reminders
-									:disabled="!canWrite"
+								<Reminders
 									:ref="e => setFieldRef('reminders', e)"
 									v-model="task"
-									@update:model-value="saveTask()"
+									:disabled="!canWrite"
+									@update:modelValue="saveTask()"
 								/>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.repeatAfter">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.repeatAfter"
+								class="column"
+							>
 								<!-- Repeat after -->
 								<div class="is-flex is-justify-content-space-between">
 									<div class="detail-title">
-										<icon icon="history"/>
+										<icon icon="history" />
 										{{ $t('task.attributes.repeat') }}
 									</div>
 									<BaseButton
-										@click="removeRepeatAfter"
 										v-if="canWrite"
-										class="remove">
+										class="remove"
+										@click="removeRepeatAfter"
+									>
 										<span class="icon is-small">
-											<icon icon="times"></icon>
+											<icon icon="times" />
 										</span>
 									</BaseButton>
 								</div>
-								<repeat-after
-									:disabled="!canWrite"
+								<RepeatAfter
 									:ref="e => setFieldRef('repeatAfter', e)"
 									v-model="task"
-									@update:model-value="saveTask()"
+									:disabled="!canWrite"
+									@update:modelValue="saveTask()"
 								/>
 							</div>
 						</CustomTransition>
-						<CustomTransition name="flash-background" appear>
-							<div class="column" v-if="activeFields.color">
+						<CustomTransition
+							name="flash-background"
+							appear
+						>
+							<div
+								v-if="activeFields.color"
+								class="column"
+							>
 								<!-- Color -->
 								<div class="detail-title">
-									<icon icon="fill-drip"/>
+									<icon icon="fill-drip" />
 									{{ $t('task.attributes.color') }}
 								</div>
-								<color-picker
-									menu-position="bottom"
+								<ColorPicker
 									:ref="e => setFieldRef('color', e)"
 									v-model="taskColor"
-									@update:model-value="saveTask()"
+									menu-position="bottom"
+									@update:modelValue="saveTask()"
 								/>
 							</div>
 						</CustomTransition>
 					</div>
 
 					<!-- Labels -->
-					<div class="labels-list details" v-if="activeFields.labels">
+					<div
+						v-if="activeFields.labels"
+						class="labels-list details"
+					>
 						<div class="detail-title">
 							<span class="icon is-grey">
-								<icon icon="tags"/>
+								<icon icon="tags" />
 							</span>
 							{{ $t('task.attributes.labels') }}
 						</div>
-						<edit-labels
+						<EditLabels
+							:ref="e => setFieldRef('labels', e)"
+							v-model="task.labels"
 							:disabled="!canWrite"
 							:task-id="taskId"
-							:ref="e => setFieldRef('labels', e)"
-							v-model="task.labels"/>
+						/>
 					</div>
 
 					<!-- Description -->
 					<div class="details content description">
-						<description
+						<Description
 							:model-value="task"
-							@update:modelValue="Object.assign(task, $event)"
 							:can-write="canWrite"
 							:attachment-upload="attachmentUpload"
+							@update:modelValue="Object.assign(task, $event)"
 						/>
 					</div>
 
 					<!-- Attachments -->
-					<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
-						<attachments
+					<div
+						v-if="activeFields.attachments || hasAttachments"
+						class="content attachments"
+					>
+						<Attachments
+							:ref="e => setFieldRef('attachments', e)"
 							:edit-enabled="canWrite"
 							:task="task"
-							@task-changed="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId"
-							:ref="e => setFieldRef('attachments', e)"
+							@taskChanged="({coverImageAttachmentId}) => task.coverImageAttachmentId = coverImageAttachmentId"
 						/>
 					</div>
 
 					<!-- Related Tasks -->
-					<div class="content details mb-0" v-if="activeFields.relatedTasks">
+					<div
+						v-if="activeFields.relatedTasks"
+						class="content details mb-0"
+					>
 						<h3>
 							<span class="icon is-grey">
-								<icon icon="sitemap"/>
+								<icon icon="sitemap" />
 							</span>
 							{{ $t('task.attributes.relatedTasks') }}
 						</h3>
-						<related-tasks
+						<RelatedTasks
+							:ref="e => setFieldRef('relatedTasks', e)"
 							:edit-enabled="canWrite"
 							:initial-related-tasks="task.relatedTasks"
 							:project-id="task.projectId"
 							:show-no-relations-notice="true"
 							:task-id="taskId"
-							:ref="e => setFieldRef('relatedTasks', e)"
 						/>
 					</div>
 
 					<!-- Move Task -->
-					<div class="content details" v-if="activeFields.moveProject">
+					<div
+						v-if="activeFields.moveProject"
+						class="content details"
+					>
 						<h3>
 							<span class="icon is-grey">
-								<icon icon="list"/>
+								<icon icon="list" />
 							</span>
 							{{ $t('task.detail.move') }}
 						</h3>
 						<div class="field has-addons">
 							<div class="control is-expanded">
-								<project-search
-									@update:modelValue="changeProject"
+								<ProjectSearch
 									:ref="e => setFieldRef('moveProject', e)"
+									@update:modelValue="changeProject"
 								/>
 							</div>
 						</div>
 					</div>
 
 					<!-- Comments -->
-					<comments :can-write="canWrite" :task-id="taskId"/>
+					<Comments
+						:can-write="canWrite"
+						:task-id="taskId"
+					/>
 				</div>
 				
 				<!-- Task Actions -->
-				<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
+				<div
+					v-if="canWrite || isModal"
+					class="column is-one-third action-buttons d-print-none"
+				>
 					<template v-if="canWrite">
 						<x-button
+							v-shortcut="'t'"
 							:class="{'is-success': !task.done}"
 							:shadow="task.done"
-							@click="toggleTaskDone()"
 							class="is-outlined has-no-border"
 							icon="check-double"
 							variant="secondary"
-							v-shortcut="'t'"
+							@click="toggleTaskDone()"
 						>
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
-						<task-subscription
+						<TaskSubscription
 							entity="task"
 							:entity-id="task.id"
 							:model-value="task.subscription"
-							@update:model-value="sub => task.subscription = sub"
+							@update:modelValue="sub => task.subscription = sub"
 						/>
 						<x-button
-							@click="toggleFavorite"
+							v-shortcut="'s'"
 							variant="secondary"
 							:icon="task.isFavorite ? 'star' : ['far', 'star']"
-							v-shortcut="'s'"
+							@click="toggleFavorite"
 						>
 							{{
 								task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
@@ -322,34 +412,34 @@
 						<span class="action-heading">{{ $t('task.detail.organization') }}</span>
 						
 						<x-button
-							@click="setFieldActive('labels')"
+							v-shortcut="'l'"
 							variant="secondary"
 							icon="tags"
-							v-shortcut="'l'"
+							@click="setFieldActive('labels')"
 						>
 							{{ $t('task.detail.actions.label') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('priority')"
+							v-shortcut="'p'"
 							variant="secondary"
 							icon="exclamation"
-							v-shortcut="'p'"
+							@click="setFieldActive('priority')"
 						>
 							{{ $t('task.detail.actions.priority') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('percentDone')"
 							variant="secondary"
 							icon="percent"
+							@click="setFieldActive('percentDone')"
 						>
 							{{ $t('task.detail.actions.percentDone') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('color')"
+							v-shortcut="'c'"
 							variant="secondary"
 							icon="fill-drip"
 							:icon-color="color"
-							v-shortcut="'c'"
+							@click="setFieldActive('color')"
 						>
 							{{ $t('task.detail.actions.color') }}
 						</x-button>
@@ -357,35 +447,35 @@
 						<span class="action-heading">{{ $t('task.detail.management') }}</span>
 
 						<x-button
-							@click="setFieldActive('assignees')"
-							variant="secondary"
 							v-shortcut="'a'"
 							v-cy="'taskDetail.assign'"
+							variant="secondary"
+							@click="setFieldActive('assignees')"
 						>
-							<span class="icon is-small"><icon icon="users"/></span>
+							<span class="icon is-small"><icon icon="users" /></span>
 							{{ $t('task.detail.actions.assign') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('attachments')"
+							v-shortcut="'f'"
 							variant="secondary"
 							icon="paperclip"
-							v-shortcut="'f'"
+							@click="setFieldActive('attachments')"
 						>
 							{{ $t('task.detail.actions.attachments') }}
 						</x-button>
 						<x-button
-							@click="setRelatedTasksActive()"
+							v-shortcut="'r'"
 							variant="secondary"
 							icon="sitemap"
-							v-shortcut="'r'"
+							@click="setRelatedTasksActive()"
 						>
 							{{ $t('task.detail.actions.relatedTasks') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('moveProject')"
+							v-shortcut="'m'"
 							variant="secondary"
 							icon="list"
-							v-shortcut="'m'"
+							@click="setFieldActive('moveProject')"
 						>
 							{{ $t('task.detail.actions.moveProject') }}
 						</x-button>
@@ -393,59 +483,62 @@
 						<span class="action-heading">{{ $t('task.detail.dateAndTime') }}</span>
 						
 						<x-button
-							@click="setFieldActive('dueDate')"
+							v-shortcut="'d'"
 							variant="secondary"
 							icon="calendar"
-							v-shortcut="'d'"
+							@click="setFieldActive('dueDate')"
 						>
 							{{ $t('task.detail.actions.dueDate') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('startDate')"
 							variant="secondary"
 							icon="play"
+							@click="setFieldActive('startDate')"
 						>
 							{{ $t('task.detail.actions.startDate') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('endDate')"
 							variant="secondary"
 							icon="stop"
+							@click="setFieldActive('endDate')"
 						>
 							{{ $t('task.detail.actions.endDate') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('reminders')"
+							v-shortcut="'Alt+r'"
 							variant="secondary"
 							:icon="['far', 'clock']"
-							v-shortcut="'Alt+r'"
+							@click="setFieldActive('reminders')"
 						>
 							{{ $t('task.detail.actions.reminders') }}
 						</x-button>
 						<x-button
-							@click="setFieldActive('repeatAfter')"
 							variant="secondary"
 							icon="history"
+							@click="setFieldActive('repeatAfter')"
 						>
 							{{ $t('task.detail.actions.repeatAfter') }}
 						</x-button>
 						<x-button
-							@click="showDeleteModal = true"
+							v-shortcut="'Shift+Delete'"
 							icon="trash-alt"
 							:shadow="false"
 							class="is-danger is-outlined has-no-border"
-							v-shortcut="'Shift+Delete'"
+							@click="showDeleteModal = true"
 						>
 							{{ $t('task.detail.actions.delete') }}
 						</x-button>
 					</template>
 
 					<!-- Created / Updated [by] -->
-					<created-updated :task="task"/>
+					<CreatedUpdated :task="task" />
 				</div>
 			</div>
 			<!-- Created / Updated [by] -->
-			<created-updated :task="task" v-if="!canWrite && !isModal"/>
+			<CreatedUpdated
+				v-if="!canWrite && !isModal"
+				:task="task"
+			/>
 		</div>
 
 		<modal
@@ -453,18 +546,22 @@
 			@close="showDeleteModal = false"
 			@submit="deleteTask()"
 		>
-			<template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
+			<template #header>
+				<span>{{ $t('task.detail.delete.header') }}</span>
+			</template>
 
 			<template #text>
-				<p>{{ $t('task.detail.delete.text1') }}<br/>
-					{{ $t('task.detail.delete.text2') }}</p>
+				<p>
+					{{ $t('task.detail.delete.text1') }}<br>
+					{{ $t('task.detail.delete.text2') }}
+				</p>
 			</template>
 		</modal>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, toRef, shallowReactive, computed, watch, nextTick, onMounted, onBeforeUnmount} from 'vue'
+import {ref, reactive, shallowReactive, computed, watch, nextTick, onMounted, onBeforeUnmount} from 'vue'
 import {useRouter, type RouteLocation} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
@@ -539,7 +636,8 @@ const taskStore = useTaskStore()
 const kanbanStore = useKanbanStore()
 
 const task = ref<ITask>(new TaskModel())
-useTitle(toRef(task.value, 'title'))
+const taskTitle = computed(() => task.value.title)
+useTitle(taskTitle)
 
 // See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
 function saveTaskViaHotkey(event) {
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 540a4b7c1..03cc7e96c 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -3,38 +3,48 @@
 		class="loader-container is-max-width-desktop"
 		:class="{ 'is-loading': teamService.loading }"
 	>
-		<card class="is-fullwidth" v-if="userIsAdmin" :title="title">
+		<card
+			v-if="userIsAdmin"
+			class="is-fullwidth"
+			:title="title"
+		>
 			<form @submit.prevent="save()">
 				<div class="field">
-					<label class="label" for="teamtext">{{ $t('team.attributes.name') }}</label>
+					<label
+						class="label"
+						for="teamtext"
+					>{{ $t('team.attributes.name') }}</label>
 					<div class="control">
 						<input
+							id="teamtext"
+							v-model="team.name"
+							v-focus
 							:class="{ disabled: teamMemberService.loading }"
 							:disabled="teamMemberService.loading || undefined"
 							class="input"
-							id="teamtext"
 							:placeholder="$t('team.attributes.namePlaceholder')"
 							type="text"
-							v-focus
-							v-model="team.name"
-						/>
+						>
 					</div>
 				</div>
 				<p
-					class="help is-danger"
 					v-if="showErrorTeamnameRequired && team.name === ''"
+					class="help is-danger"
 				>
 					{{ $t('team.attributes.nameRequired') }}
 				</p>
 				<div class="field">
-					<label class="label" for="teamdescription">{{ $t('team.attributes.description') }}</label>
+					<label
+						class="label"
+						for="teamdescription"
+					>{{ $t('team.attributes.description') }}</label>
 					<div class="control">
-						<editor
+						<Editor
+							id="teamdescription"
+							v-model="team.description"
 							:class="{ disabled: teamService.loading }"
 							:disabled="teamService.loading"
-							id="teamdescription"
 							:placeholder="$t('team.attributes.descriptionPlaceholder')"
-							v-model="team.description"
 						/>
 					</div>
 				</div>
@@ -43,99 +53,129 @@
 			<div class="field has-addons mt-4">
 				<div class="control is-fullwidth">
 					<x-button
-						@click="save()"
 						:loading="teamService.loading"
 						class="is-fullwidth"
+						@click="save()"
 					>
 						{{ $t('misc.save') }}
 					</x-button>
 				</div>
 				<div class="control">
 					<x-button
-						@click="showDeleteModal = true"
 						:loading="teamService.loading"
 						class="is-danger"
 						icon="trash-alt"
+						@click="showDeleteModal = true"
 					/>
 				</div>
 			</div>
 		</card>
 
-		<card class="is-fullwidth has-overflow" :title="$t('team.edit.members')" :padding="false">
-			<div class="p-4" v-if="userIsAdmin">
+		<card
+			class="is-fullwidth has-overflow"
+			:title="$t('team.edit.members')"
+			:padding="false"
+		>
+			<div
+				v-if="userIsAdmin"
+				class="p-4"
+			>
 				<div class="field has-addons">
 					<div class="control is-expanded">
-						<multiselect
+						<Multiselect
+							v-model="newMember"
 							:loading="userService.loading"
 							:placeholder="$t('team.edit.search')"
-							@search="findUser"
 							:search-results="foundUsers"
 							label="username"
-							v-model="newMember"
+							@search="findUser"
 						>
 							<template #searchResult="{option: user}">
-								<User :avatar-size="24" :user="user" class="m-0"/>
+								<User
+									:avatar-size="24"
+									:user="user"
+									class="m-0"
+								/>
 							</template>
-						</multiselect>
+						</Multiselect>
 					</div>
 					<div class="control">
-						<x-button @click="addUser" icon="plus">
+						<x-button
+							icon="plus"
+							@click="addUser"
+						>
 							{{ $t('team.edit.addUser') }}
 						</x-button>
 					</div>
 				</div>
-				<p class="help is-danger" v-if="showMustSelectUserError">
+				<p
+					v-if="showMustSelectUserError"
+					class="help is-danger"
+				>
 					{{ $t('team.edit.mustSelectUser') }}
 				</p>
 			</div>
 			<table class="table has-actions is-striped is-hoverable is-fullwidth">
 				<tbody>
-				<tr :key="m.id" v-for="m in team?.members">
-					<td>
-						<User :avatar-size="24" :user="m" class="m-0"/>
-					</td>
-					<td>
-						<template v-if="m.id === userInfo.id">
-							<b class="is-success">You</b>
-						</template>
-					</td>
-					<td class="type">
-						<template v-if="m.admin">
+					<tr
+						v-for="m in team?.members"
+						:key="m.id"
+					>
+						<td>
+							<User
+								:avatar-size="24"
+								:user="m"
+								class="m-0"
+							/>
+						</td>
+						<td>
+							<template v-if="m.id === userInfo.id">
+								<b class="is-success">You</b>
+							</template>
+						</td>
+						<td class="type">
+							<template v-if="m.admin">
 								<span class="icon is-small">
-									<icon icon="lock"/>
+									<icon icon="lock" />
 								</span>
-							{{ $t('team.attributes.admin') }}
-						</template>
-						<template v-else>
+								{{ $t('team.attributes.admin') }}
+							</template>
+							<template v-else>
 								<span class="icon is-small">
-									<icon icon="user"/>
+									<icon icon="user" />
 								</span>
-							{{ $t('team.attributes.member') }}
-						</template>
-					</td>
-					<td class="actions" v-if="userIsAdmin">
-						<x-button
-							:loading="teamMemberService.loading"
-							@click="() => toggleUserType(m)"
-							class="mr-2"
-							v-if="m.id !== userInfo.id"
+								{{ $t('team.attributes.member') }}
+							</template>
+						</td>
+						<td
+							v-if="userIsAdmin"
+							class="actions"
 						>
-							{{ m.admin ? $t('team.edit.makeMember') : $t('team.edit.makeAdmin') }}
-						</x-button>
-						<x-button
-							:loading="teamMemberService.loading"
-							@click="() => {memberToDelete = m; showUserDeleteModal = true}"
-							class="is-danger"
-							v-if="m.id !== userInfo.id"
-							icon="trash-alt"
-						/>
-					</td>
-				</tr>
+							<x-button
+								v-if="m.id !== userInfo.id"
+								:loading="teamMemberService.loading"
+								class="mr-2"
+								@click="() => toggleUserType(m)"
+							>
+								{{ m.admin ? $t('team.edit.makeMember') : $t('team.edit.makeAdmin') }}
+							</x-button>
+							<x-button
+								v-if="m.id !== userInfo.id"
+								:loading="teamMemberService.loading"
+								class="is-danger"
+								icon="trash-alt"
+								@click="() => {memberToDelete = m; showUserDeleteModal = true}"
+							/>
+						</td>
+					</tr>
 				</tbody>
 			</table>
 		</card>
 
-		<x-button class="is-fullwidth is-danger" @click="showLeaveModal = true">
+		<x-button
+			class="is-fullwidth is-danger"
+			@click="showLeaveModal = true"
+		>
 			{{ $t('team.edit.leave.title') }}
 		</x-button>
 
@@ -145,11 +185,15 @@
 			@close="showLeaveModal = false"
 			@submit="leave()"
 		>
-			<template #header><span>{{ $t('team.edit.leave.title') }}</span></template>
+			<template #header>
+				<span>{{ $t('team.edit.leave.title') }}</span>
+			</template>
 
 			<template #text>
-				<p>{{ $t('team.edit.leave.text1') }}<br/>
-					{{ $t('team.edit.leave.text2') }}</p>
+				<p>
+					{{ $t('team.edit.leave.text1') }}<br>
+					{{ $t('team.edit.leave.text2') }}
+				</p>
 			</template>
 		</modal>
 
@@ -159,11 +203,15 @@
 			@close="showDeleteModal = false"
 			@submit="deleteTeam()"
 		>
-			<template #header><span>{{ $t('team.edit.delete.header') }}</span></template>
+			<template #header>
+				<span>{{ $t('team.edit.delete.header') }}</span>
+			</template>
 
 			<template #text>
-				<p>{{ $t('team.edit.delete.text1') }}<br/>
-					{{ $t('team.edit.delete.text2') }}</p>
+				<p>
+					{{ $t('team.edit.delete.text1') }}<br>
+					{{ $t('team.edit.delete.text2') }}
+				</p>
 			</template>
 		</modal>
 
@@ -173,11 +221,15 @@
 			@close="showUserDeleteModal = false"
 			@submit="deleteMember()"
 		>
-			<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
+			<template #header>
+				<span>{{ $t('team.edit.deleteUser.header') }}</span>
+			</template>
 
 			<template #text>
-				<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
-					{{ $t('team.edit.deleteUser.text2') }}</p>
+				<p>
+					{{ $t('team.edit.deleteUser.text1') }}<br>
+					{{ $t('team.edit.deleteUser.text2') }}
+				</p>
 			</template>
 		</modal>
 	</div>
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index bf5d68452..a7f01c7d0 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -1,5 +1,8 @@
 <template>
-	<div class="content loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
+	<div
+		class="content loader-container is-max-width-desktop"
+		:class="{ 'is-loading': teamService.loading}"
+	>
 		<x-button
 			:to="{name:'teams.create'}"
 			class="is-pulled-right"
@@ -9,14 +12,23 @@
 		</x-button>
 
 		<h1>{{ $t('team.title') }}</h1>
-		<ul class="teams box" v-if="teams.length > 0">
-			<li :key="t.id" v-for="t in teams">
-				<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
-					{{ t.name }}
+		<ul
+			v-if="teams.length > 0"
+			class="teams box"
+		>
+			<li
+				v-for="team in teams"
+				:key="team.id"
+			>
+				<router-link :to="{name: 'teams.edit', params: {id: team.id}}">
+					{{ team.name }}
 				</router-link>
 			</li>
 		</ul>
-		<p v-else-if="!teamService.loading" class="has-text-centered has-text-grey is-italic">
+		<p
+			v-else-if="!teamService.loading"
+			class="has-text-centered has-text-grey is-italic"
+		>
 			{{ $t('team.noTeams') }}
 			<router-link :to="{name: 'teams.create'}">
 				{{ $t('team.create.title') }}.
diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index 0cb0c0796..e3cff0591 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -1,31 +1,37 @@
 <template>
-	<create-edit
+	<CreateEdit
 		:title="title"
-		@create="newTeam()"
 		:primary-disabled="team.name === ''"
+		@create="newTeam()"
 	>
 		<div class="field">
-			<label class="label" for="teamName">{{ $t('team.attributes.name') }}</label>
+			<label
+				class="label"
+				for="teamName"
+			>{{ $t('team.attributes.name') }}</label>
 			<div
 				class="control is-expanded"
 				:class="{ 'is-loading': teamService.loading }"
 			>
 				<input
+					id="teamName"
+					v-model="team.name"
+					v-focus
 					:class="{ 'disabled': teamService.loading }"
 					class="input"
-					id="teamName"
 					:placeholder="$t('team.attributes.namePlaceholder')"
 					type="text"
-					v-focus
-					v-model="team.name"
 					@keyup.enter="newTeam"
-				/>
+				>
 			</div>
 		</div>
-		<p class="help is-danger" v-if="showError && team.name === ''">
+		<p
+			v-if="showError && team.name === ''"
+			class="help is-danger"
+		>
 			{{ $t('team.attributes.nameRequired') }}
 		</p>
-	</create-edit>
+	</CreateEdit>
 </template>
 
 <script lang="ts">
diff --git a/src/views/user/DataExportDownload.vue b/src/views/user/DataExportDownload.vue
index 353da48be..d29c90b15 100644
--- a/src/views/user/DataExportDownload.vue
+++ b/src/views/user/DataExportDownload.vue
@@ -4,22 +4,28 @@
 		<template v-if="isLocalUser">
 			<p>{{ $t('user.export.descriptionPasswordRequired') }}</p>
 			<div class="field">
-				<label class="label" for="currentPasswordDataExport">
+				<label
+					class="label"
+					for="currentPasswordDataExport"
+				>
 					{{ $t('user.settings.currentPassword') }}
 				</label>
 				<div class="control">
 					<input
+						id="currentPasswordDataExport"
+						ref="passwordInput"
+						v-model="password"
 						class="input"
 						:class="{'is-danger': errPasswordRequired}"
-						id="currentPasswordDataExport"
 						:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 						type="password"
-						v-model="password"
 						@keyup="() => errPasswordRequired = password === ''"
-						ref="passwordInput"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="errPasswordRequired">
+				<p
+					v-if="errPasswordRequired"
+					class="help is-danger"
+				>
 					{{ $t('user.deletion.passwordRequired') }}
 				</p>
 			</div>
@@ -28,8 +34,9 @@
 		<x-button
 			v-focus
 			:loading="dataExportService.loading"
+			class="mt-4"
 			@click="download()"
-			class="mt-4">
+		>
 			{{ $t('misc.download') }}
 		</x-button>
 	</div>
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 516a35406..742249b28 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -1,36 +1,59 @@
 <template>
 	<div>
-		<message variant="success" text-align="center" class="mb-4" v-if="confirmedEmailSuccess">
+		<Message
+			v-if="confirmedEmailSuccess"
+			variant="success"
+			text-align="center"
+			class="mb-4"
+		>
 			{{ $t('user.auth.confirmEmailSuccess') }}
-		</message>
-		<message variant="danger" v-if="errorMessage" class="mb-4">
+		</Message>
+		<Message
+			v-if="errorMessage"
+			variant="danger"
+			class="mb-4"
+		>
 			{{ errorMessage }}
-		</message>
-		<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
+		</Message>
+		<form
+			v-if="localAuthEnabled"
+			id="loginform"
+			@submit.prevent="submit"
+		>
 			<div class="field">
-				<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
+				<label
+					class="label"
+					for="username"
+				>{{ $t('user.auth.usernameEmail') }}</label>
 				<div class="control">
 					<input
-						class="input" id="username"
+						id="username"
+						ref="usernameRef"
+						v-focus
+						class="input"
 						name="username"
 						:placeholder="$t('user.auth.usernamePlaceholder')"
-						ref="usernameRef"
 						required
 						type="text"
 						autocomplete="username"
-						v-focus
-						@keyup.enter="submit"
 						tabindex="1"
+						@keyup.enter="submit"
 						@focusout="validateUsernameField()"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!usernameValid">
+				<p
+					v-if="!usernameValid"
+					class="help is-danger"
+				>
 					{{ $t('user.auth.usernameRequired') }}
 				</p>
 			</div>
 			<div class="field">
 				<div class="label-with-link">
-					<label class="label" for="password">{{ $t('user.auth.password') }}</label>
+					<label
+						class="label"
+						for="password"
+					>{{ $t('user.auth.password') }}</label>
 					<router-link
 						:to="{ name: 'user.password-reset.request' }"
 						class="reset-password-link"
@@ -39,41 +62,59 @@
 						{{ $t('user.auth.forgotPassword') }}
 					</router-link>
 				</div>
-				<Password tabindex="2" @submit="submit" v-model="password" :validate-initially="validatePasswordInitially"/>
+				<Password
+					v-model="password"
+					tabindex="2"
+					:validate-initially="validatePasswordInitially"
+					@submit="submit"
+				/>
 			</div>
-			<div class="field" v-if="needsTotpPasscode">
-				<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
+			<div
+				v-if="needsTotpPasscode"
+				class="field"
+			>
+				<label
+					class="label"
+					for="totpPasscode"
+				>{{ $t('user.auth.totpTitle') }}</label>
 				<div class="control">
 					<input
+						id="totpPasscode"
+						ref="totpPasscode"
+						v-focus
 						autocomplete="one-time-code"
 						class="input"
-						id="totpPasscode"
 						:placeholder="$t('user.auth.totpPlaceholder')"
-						ref="totpPasscode"
 						required
 						type="text"
-						v-focus
-						@keyup.enter="submit"
 						tabindex="3"
 						inputmode="numeric"
-					/>
+						@keyup.enter="submit"
+					>
 				</div>
 			</div>
 			<div class="field">
 				<label class="label">
-					<input type="checkbox" v-model="rememberMe" class="mr-1"/>
+					<input
+						v-model="rememberMe"
+						type="checkbox"
+						class="mr-1"
+					>
 					{{ $t('user.auth.remember') }}
 				</label>
 			</div>
 
 			<x-button
-				@click="submit"
 				:loading="isLoading"
 				tabindex="4"
+				@click="submit"
 			>
 				{{ $t('user.auth.login') }}
 			</x-button>
-			<p class="mt-2" v-if="registrationEnabled">
+			<p
+				v-if="registrationEnabled"
+				class="mt-2"
+			>
 				{{ $t('user.auth.noAccountYet') }}
 				<router-link
 					:to="{ name: 'user.register' }"
@@ -87,13 +128,14 @@
 
 		<div
 			v-if="hasOpenIdProviders"
-			class="mt-4">
+			class="mt-4"
+		>
 			<x-button
 				v-for="(p, k) in openidConnect.providers"
 				:key="k"
-				@click="redirectToProvider(p)"
 				variant="secondary"
 				class="is-fullwidth mt-2"
+				@click="redirectToProvider(p)"
 			>
 				{{ $t('user.auth.loginWith', {provider: p.name}) }}
 			</x-button>
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index 8311b2ede..9743b1bb3 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -1,14 +1,21 @@
 <template>
 	<div>
-		<message variant="danger" v-if="errorMessage">
+		<Message
+			v-if="errorMessage"
+			variant="danger"
+		>
 			{{ errorMessage }}
-		</message>
-		<message variant="danger" v-if="errorMessageFromQuery" class="mt-2">
+		</Message>
+		<Message
+			v-if="errorMessageFromQuery"
+			variant="danger"
+			class="mt-2"
+		>
 			{{ errorMessageFromQuery }}
-		</message>
-		<message v-if="loading">
+		</Message>
+		<Message v-if="loading">
 			{{ $t('user.auth.authenticating') }}
-		</message>
+		</Message>
 	</div>
 </template>
 
diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue
index f004c5738..d6fb54950 100644
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@@ -1,20 +1,39 @@
 <template>
 	<div>
-		<message v-if="errorMsg" class="mb-4">
+		<Message
+			v-if="errorMsg"
+			class="mb-4"
+		>
 			{{ errorMsg }}
-		</message>
-		<div class="has-text-centered mb-4" v-if="successMessage">
-			<message variant="success">
+		</Message>
+		<div
+			v-if="successMessage"
+			class="has-text-centered mb-4"
+		>
+			<Message variant="success">
 				{{ successMessage }}
-			</message>
-			<x-button :to="{ name: 'user.login' }" class="mt-4">
+			</Message>
+			<x-button
+				:to="{ name: 'user.login' }"
+				class="mt-4"
+			>
 				{{ $t('user.auth.login') }}
 			</x-button>
 		</div>
-		<form @submit.prevent="resetPassword" id="form" v-if="!successMessage">
+		<form
+			v-if="!successMessage"
+			id="form"
+			@submit.prevent="resetPassword"
+		>
 			<div class="field">
-				<label class="label" for="password">{{ $t('user.auth.password') }}</label>
-				<Password @submit="resetPassword" @update:modelValue="v => credentials.password = v"/>
+				<label
+					class="label"
+					for="password"
+				>{{ $t('user.auth.password') }}</label>
+				<Password
+					@submit="resetPassword"
+					@update:modelValue="v => credentials.password = v"
+				/>
 			</div>
 
 			<div class="field is-grouped">
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 61dc88c47..fe67affc6 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -1,73 +1,99 @@
 <template>
 	<div>
-		<message variant="danger" v-if="errorMessage !== ''" class="mb-4">
+		<Message
+			v-if="errorMessage !== ''"
+			variant="danger"
+			class="mb-4"
+		>
 			{{ errorMessage }}
-		</message>
-		<form @submit.prevent="submit" id="registerform">
+		</Message>
+		<form
+			id="registerform"
+			@submit.prevent="submit"
+		>
 			<div class="field">
-				<label class="label" for="username">{{ $t('user.auth.username') }}</label>
+				<label
+					class="label"
+					for="username"
+				>{{ $t('user.auth.username') }}</label>
 				<div class="control">
 					<input
-						class="input"
 						id="username"
+						v-model="credentials.username"
+						v-focus
+						class="input"
 						name="username"
 						:placeholder="$t('user.auth.usernamePlaceholder')"
 						required
 						type="text"
 						autocomplete="username"
-						v-focus
-						v-model="credentials.username"
 						@keyup.enter="submit"
 						@focusout="validateUsername"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!usernameValid">
+				<p
+					v-if="!usernameValid"
+					class="help is-danger"
+				>
 					{{ $t('user.auth.usernameRequired') }}
 				</p>
 			</div>
 			<div class="field">
-				<label class="label" for="email">{{ $t('user.auth.email') }}</label>
+				<label
+					class="label"
+					for="email"
+				>{{ $t('user.auth.email') }}</label>
 				<div class="control">
 					<input
-						class="input"
 						id="email"
+						v-model="credentials.email"
+						class="input"
 						name="email"
 						:placeholder="$t('user.auth.emailPlaceholder')"
 						required
 						type="email"
-						v-model="credentials.email"
 						@keyup.enter="submit"
 						@focusout="validateEmail"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!emailValid">
+				<p
+					v-if="!emailValid"
+					class="help is-danger"
+				>
 					{{ $t('user.auth.emailInvalid') }}
 				</p>
 			</div>
 			<div class="field">
-				<label class="label" for="password">{{ $t('user.auth.password') }}</label>
-				<password @submit="submit" @update:modelValue="v => credentials.password = v" :validate-initially="validatePasswordInitially"/>
+				<label
+					class="label"
+					for="password"
+				>{{ $t('user.auth.password') }}</label>
+				<Password
+					:validate-initially="validatePasswordInitially"
+					@submit="submit"
+					@update:modelValue="v => credentials.password = v"
+				/>
 			</div>
 
 			<x-button
-				:loading="isLoading"
 				id="register-submit"
-				@click="submit"
+				:loading="isLoading"
 				class="mr-2"
 				:disabled="!everythingValid"
+				@click="submit"
 			>
 				{{ $t('user.auth.createAccount') }}
 			</x-button>
 			
-			<message
+			<Message
 				v-if="configStore.demoModeEnabled"
 				variant="warning"
 				class="mt-4"
 			>
 				{{ $t('demo.title') }}
-				{{ $t('demo.accountWillBeDeleted') }}<br/>
+				{{ $t('demo.accountWillBeDeleted') }}<br>
 				<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
-			</message>
+			</Message>
 			
 			<p class="mt-2">
 				{{ $t('user.auth.alreadyHaveAnAccount') }}
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index bab15eae9..24bac17f3 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@@ -1,29 +1,46 @@
 <template>
 	<div>
-		<message variant="danger" v-if="errorMsg" class="mb-4">
+		<Message
+			v-if="errorMsg"
+			variant="danger"
+			class="mb-4"
+		>
 			{{ errorMsg }}
-		</message>
-		<div class="has-text-centered mb-4" v-if="isSuccess">
-			<message variant="success">
+		</Message>
+		<div
+			v-if="isSuccess"
+			class="has-text-centered mb-4"
+		>
+			<Message variant="success">
 				{{ $t('user.auth.resetPasswordSuccess') }}
-			</message>
-			<x-button :to="{ name: 'user.login' }" class="mt-4">
+			</Message>
+			<x-button
+				:to="{ name: 'user.login' }"
+				class="mt-4"
+			>
 				{{ $t('user.auth.login') }}
 			</x-button>
 		</div>
-		<form @submit.prevent="requestPasswordReset" v-if="!isSuccess">
+		<form
+			v-if="!isSuccess"
+			@submit.prevent="requestPasswordReset"
+		>
 			<div class="field">
-				<label class="label" for="email">{{ $t('user.auth.email') }}</label>
+				<label
+					class="label"
+					for="email"
+				>{{ $t('user.auth.email') }}</label>
 				<div class="control">
 					<input
-						class="input"
 						id="email"
+						v-model="passwordReset.email"
+						v-focus
+						class="input"
 						name="email"
 						:placeholder="$t('user.auth.emailPlaceholder')"
 						required
 						type="email"
-						v-focus
-						v-model="passwordReset.email"/>
+					>
 				</div>
 			</div>
 
@@ -35,7 +52,10 @@
 					>
 						{{ $t('user.auth.resetPasswordAction') }}
 					</x-button>
-					<x-button :to="{ name: 'user.login' }" variant="secondary">
+					<x-button
+						:to="{ name: 'user.login' }"
+						variant="secondary"
+					>
 						{{ $t('user.auth.login') }}
 					</x-button>
 				</div>
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 4403e3650..d23204cd7 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -3,15 +3,21 @@
 		<div class="user-settings">
 			<nav class="navigation">
 				<ul>
-					<li v-for="({routeName, title }, index) in navigationItems" :key="index">
-						<router-link class="navigation-link" :to="{name: routeName}">
+					<li
+						v-for="({routeName, title }, index) in navigationItems"
+						:key="index"
+					>
+						<router-link
+							class="navigation-link"
+							:to="{name: routeName}"
+						>
 							{{ title }}
 						</router-link>
 					</li>
 				</ul>
 			</nav>
 			<section class="view">
-				<router-view/>
+				<router-view />
 			</section>
 		</div>
 	</div>
diff --git a/src/views/user/settings/ApiTokens.vue b/src/views/user/settings/ApiTokens.vue
index 63c0d176a..0353b8806 100644
--- a/src/views/user/settings/ApiTokens.vue
+++ b/src/views/user/settings/ApiTokens.vue
@@ -141,48 +141,69 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 
 <template>
 	<card :title="$t('user.settings.apiTokens.title')">
-
-		<message v-if="tokenCreatedSuccessMessage !== ''" class="has-text-centered mb-4">
-			{{ tokenCreatedSuccessMessage }}<br/>
+		<Message
+			v-if="tokenCreatedSuccessMessage !== ''"
+			class="has-text-centered mb-4"
+		>
+			{{ tokenCreatedSuccessMessage }}<br>
 			{{ $t('user.settings.apiTokens.tokenCreatedNotSeeAgain') }}
-		</message>
+		</Message>
 
 		<p>
 			{{ $t('user.settings.apiTokens.general') }}
-			<BaseButton :href="apiDocsUrl">{{ $t('user.settings.apiTokens.apiDocs') }}</BaseButton>
+			<BaseButton :href="apiDocsUrl">
+				{{ $t('user.settings.apiTokens.apiDocs') }}
+			</BaseButton>
 			.
 		</p>
 
-		<table class="table" v-if="tokens.length > 0">
+		<table
+			v-if="tokens.length > 0"
+			class="table"
+		>
 			<tr>
 				<th>{{ $t('misc.id') }}</th>
 				<th>{{ $t('user.settings.apiTokens.attributes.title') }}</th>
 				<th>{{ $t('user.settings.apiTokens.attributes.permissions') }}</th>
 				<th>{{ $t('user.settings.apiTokens.attributes.expiresAt') }}</th>
 				<th>{{ $t('misc.created') }}</th>
-				<th class="has-text-right">{{ $t('misc.actions') }}</th>
+				<th class="has-text-right">
+					{{ $t('misc.actions') }}
+				</th>
 			</tr>
-			<tr v-for="tk in tokens" :key="tk.id">
+			<tr
+				v-for="tk in tokens"
+				:key="tk.id"
+			>
 				<td>{{ tk.id }}</td>
 				<td>{{ tk.title }}</td>
 				<td class="is-capitalized">
-					<template v-for="(v, p) in tk.permissions" :key="'permission-' + p">
+					<template
+						v-for="(v, p) in tk.permissions"
+						:key="'permission-' + p"
+					>
 						<strong>{{ formatPermissionTitle(p) }}:</strong>
 						{{ v.map(formatPermissionTitle).join(', ') }}
-						<br/>
+						<br>
 					</template>
 				</td>
 				<td>
 					{{ formatDateShort(tk.expiresAt) }}
-					<p v-if="tk.expiresAt < new Date()" class="has-text-danger">
+					<p
+						v-if="tk.expiresAt < new Date()"
+						class="has-text-danger"
+					>
 						{{ $t('user.settings.apiTokens.expired', {ago: formatDateSince(tk.expiresAt)}) }}
 					</p>
 				</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
 				<td class="has-text-right">
-					<x-button variant="secondary" @click="() => {tokenToDelete = tk; showDeleteModal = true}">
+					<XButton
+						variant="secondary"
+						@click="() => {tokenToDelete = tk; showDeleteModal = true}"
+					>
 						{{ $t('misc.delete') }}
-					</x-button>
+					</XButton>
 				</td>
 			</tr>
 		</table>
@@ -193,44 +214,65 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 		>
 			<!-- Title -->
 			<div class="field">
-				<label class="label" for="apiTokenTitle">{{ $t('user.settings.apiTokens.attributes.title') }}</label>
+				<label
+					class="label"
+					for="apiTokenTitle"
+				>{{ $t('user.settings.apiTokens.attributes.title') }}</label>
 				<div class="control">
 					<input
-						class="input"
 						id="apiTokenTitle"
 						ref="apiTokenTitle"
-						type="text"
-						v-focus
-						:placeholder="$t('user.settings.apiTokens.attributes.titlePlaceholder')"
 						v-model="newToken.title"
+						v-focus
+						class="input"
+						type="text"
+						:placeholder="$t('user.settings.apiTokens.attributes.titlePlaceholder')"
 						@keyup="() => newTokenTitleValid = newToken.title !== ''"
 						@focusout="() => newTokenTitleValid = newToken.title !== ''"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="!newTokenTitleValid">
+				<p
+					v-if="!newTokenTitleValid"
+					class="help is-danger"
+				>
 					{{ $t('user.settings.apiTokens.titleRequired') }}
 				</p>
 			</div>
 
 			<!-- Expiry -->
 			<div class="field">
-				<label class="label" for="apiTokenExpiry">
+				<label
+					class="label"
+					for="apiTokenExpiry"
+				>
 					{{ $t('user.settings.apiTokens.attributes.expiresAt') }}
 				</label>
 				<div class="is-flex">
 					<div class="control select">
-						<select class="select" v-model="newTokenExpiry" id="apiTokenExpiry">
-							<option value="30">{{ $t('user.settings.apiTokens.30d') }}</option>
-							<option value="60">{{ $t('user.settings.apiTokens.60d') }}</option>
-							<option value="90">{{ $t('user.settings.apiTokens.90d') }}</option>
-							<option value="custom">{{ $t('misc.custom') }}</option>
+						<select
+							id="apiTokenExpiry"
+							v-model="newTokenExpiry"
+							class="select"
+						>
+							<option value="30">
+								{{ $t('user.settings.apiTokens.30d') }}
+							</option>
+							<option value="60">
+								{{ $t('user.settings.apiTokens.60d') }}
+							</option>
+							<option value="90">
+								{{ $t('user.settings.apiTokens.90d') }}
+							</option>
+							<option value="custom">
+								{{ $t('misc.custom') }}
+							</option>
 						</select>
 					</div>
 					<flat-pickr
 						v-if="newTokenExpiry === 'custom'"
+						v-model="newTokenExpiryCustom"
 						class="ml-2"
 						:config="flatPickerConfig"
-						v-model="newTokenExpiryCustom"
 					/>
 				</div>
 			</div>
@@ -239,50 +281,57 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 			<div class="field">
 				<label class="label">{{ $t('user.settings.apiTokens.attributes.permissions') }}</label>
 				<p>{{ $t('user.settings.apiTokens.permissionExplanation') }}</p>
-				<div v-for="(routes, group) in availableRoutes" class="mb-2" :key="group">
-					<strong class="is-capitalized">{{ formatPermissionTitle(group) }}</strong><br/>
+				<div
+					v-for="(routes, group) in availableRoutes"
+					:key="group"
+					class="mb-2"
+				>
+					<strong class="is-capitalized">{{ formatPermissionTitle(group) }}</strong><br>
 					<template
 						v-if="Object.keys(routes).length > 1"
 					>
-						<fancycheckbox
-							class="mr-2 is-italic"
+						<Fancycheckbox
 							v-model="newTokenPermissionsGroup[group]"
-							@update:model-value="checked => selectPermissionGroup(group, checked)"
+							class="mr-2 is-italic"
+							@update:modelValue="checked => selectPermissionGroup(group, checked)"
 						>
 							{{ $t('user.settings.apiTokens.selectAll') }}
-						</fancycheckbox>
-						<br/>
+						</Fancycheckbox>
+						<br>
 					</template>
 					<template
 						v-for="(paths, route) in routes"
 						:key="group+'-'+route"
 					>
-						<fancycheckbox
-							class="mr-2 is-capitalized"
+						<Fancycheckbox
 							v-model="newTokenPermissions[group][route]"
-							@update:model-value="checked => toggleGroupPermissionsFromChild(group, checked)"
+							class="mr-2 is-capitalized"
+							@update:modelValue="checked => toggleGroupPermissionsFromChild(group, checked)"
 						>
 							{{ formatPermissionTitle(route) }}
-						</fancycheckbox>
-						<br/>
+						</Fancycheckbox>
+						<br>
 					</template>
 				</div>
 			</div>
 
-			<x-button :loading="service.loading" @click="createToken">
+			<XButton
+				:loading="service.loading"
+				@click="createToken"
+			>
 				{{ $t('user.settings.apiTokens.createToken') }}
-			</x-button>
+			</XButton>
 		</form>
 
-		<x-button
+		<XButton
 			v-else
 			icon="plus"
 			class="mb-4"
-			@click="() => showCreateForm = true"
 			:loading="service.loading"
+			@click="() => showCreateForm = true"
 		>
 			{{ $t('user.settings.apiTokens.createAToken') }}
-		</x-button>
+		</XButton>
 
 		<modal
 			:enabled="showDeleteModal"
@@ -295,7 +344,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
 
 			<template #text>
 				<p>
-					{{ $t('user.settings.apiTokens.delete.text1', {token: tokenToDelete.title}) }}<br/>
+					{{ $t('user.settings.apiTokens.delete.text1', {token: tokenToDelete.title}) }}<br>
 					{{ $t('user.settings.apiTokens.delete.text2') }}
 				</p>
 			</template>
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 0a27faa84..193a3d167 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/src/views/user/settings/Avatar.vue
@@ -6,19 +6,24 @@
 				:key="providerId"
 				class="radio"
 			>
-				<input name="avatarProvider" type="radio" v-model="avatarProvider" :value="providerId"/>
+				<input
+					v-model="avatarProvider"
+					name="avatarProvider"
+					type="radio"
+					:value="providerId"
+				>
 				{{ label }}
 			</label>
 		</div>
 
 		<template v-if="avatarProvider === 'upload'">
 			<input
-				@change="cropAvatar"
+				ref="avatarUploadInput"
 				accept="image/*"
 				class="is-hidden"
-				ref="avatarUploadInput"
 				type="file"
-			/>
+				@change="cropAvatar"
+			>
 
 			<x-button
 				v-if="!isCropAvatar"
@@ -29,27 +34,30 @@
 			</x-button>
 			<template v-else>
 				<Cropper
+					ref="cropper"
 					:src="avatarToCrop"
 					:stencil-props="{aspectRatio: 1}"
-					@ready="() => loading = false"
 					class="mb-4 cropper"
-					ref="cropper"
+					@ready="() => loading = false"
 				/>
 				<x-button
+					v-cy="'uploadAvatar'"
 					:loading="avatarService.loading || loading"
 					@click="uploadAvatar"
-					v-cy="'uploadAvatar'"
 				>
 					{{ $t('user.settings.avatar.uploadAvatar') }}
 				</x-button>
 			</template>
 		</template>
 
-		<div class="mt-2" v-else>
+		<div
+			v-else
+			class="mt-2"
+		>
 			<x-button
 				:loading="avatarService.loading || loading"
-				@click="updateAvatarStatus()"
 				class="is-fullwidth"
+				@click="updateAvatarStatus()"
 			>
 				{{ $t('misc.save') }}
 			</x-button>
@@ -58,7 +66,7 @@
 </template>
 
 <script lang="ts">
-export default { name: 'user-settings-avatar' }
+export default { name: 'UserSettingsAvatar' }
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index cb2218585..ae081bc2f 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -1,18 +1,26 @@
 <template>
-	<card v-if="caldavEnabled" :title="$t('user.settings.caldav.title')">
+	<card
+		v-if="caldavEnabled"
+		:title="$t('user.settings.caldav.title')"
+	>
 		<p>
 			{{ $t('user.settings.caldav.howTo') }}
 		</p>
 		<div class="field has-addons no-input-mobile">
 			<div class="control is-expanded">
-				<input type="text" v-model="caldavUrl" class="input" readonly/>
+				<input
+					v-model="caldavUrl"
+					type="text"
+					class="input"
+					readonly
+				>
 			</div>
 			<div class="control">
 				<x-button
-					@click="copy(caldavUrl)"
-					:shadow="false"
 					v-tooltip="$t('misc.copy')"
+					:shadow="false"
 					icon="paste"
+					@click="copy(caldavUrl)"
 				/>
 			</div>
 		</div>
@@ -24,41 +32,66 @@
 		<p>
 			{{ isLocalUser ? $t('user.settings.caldav.tokensHowTo') : $t('user.settings.caldav.mustUseToken') }}
 			<template v-if="!isLocalUser">
-				<br/>
-				<i18n-t keypath="user.settings.caldav.usernameIs" scope="global">
+				<br>
+				<i18n-t
+					keypath="user.settings.caldav.usernameIs"
+					scope="global"
+				>
 					<strong>{{ username }}</strong>
 				</i18n-t>
 			</template>
 		</p>
 
-		<table class="table" v-if="tokens.length > 0">
+		<table
+			v-if="tokens.length > 0"
+			class="table"
+		>
 			<tr>
 				<th>{{ $t('misc.id') }}</th>
 				<th>{{ $t('misc.created') }}</th>
-				<th class="has-text-right">{{ $t('misc.actions') }}</th>
+				<th class="has-text-right">
+					{{ $t('misc.actions') }}
+				</th>
 			</tr>
-			<tr v-for="tk in tokens" :key="tk.id">
+			<tr
+				v-for="tk in tokens"
+				:key="tk.id"
+			>
 				<td>{{ tk.id }}</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
 				<td class="has-text-right">
-					<x-button variant="secondary" @click="deleteToken(tk)">
+					<x-button
+						variant="secondary"
+						@click="deleteToken(tk)"
+					>
 						{{ $t('misc.delete') }}
 					</x-button>
 				</td>
 			</tr>
 		</table>
 
-		<Message v-if="newToken" class="mb-4">
-			{{ $t('user.settings.caldav.tokenCreated', {token: newToken.token}) }}<br/>
+		<Message
+			v-if="newToken"
+			class="mb-4"
+		>
+			{{ $t('user.settings.caldav.tokenCreated', {token: newToken.token}) }}<br>
 			{{ $t('user.settings.caldav.wontSeeItAgain') }}
 		</Message>
 
-		<x-button icon="plus" class="mb-4" @click="createToken" :loading="service.loading">
+		<x-button
+			icon="plus"
+			class="mb-4"
+			:loading="service.loading"
+			@click="createToken"
+		>
 			{{ $t('user.settings.caldav.createToken') }}
 		</x-button>
 
 		<p>
-			<BaseButton :href="CALDAV_DOCS" target="_blank">
+			<BaseButton
+				:href="CALDAV_DOCS"
+				target="_blank"
+			>
 				{{ $t('user.settings.caldav.more') }}
 			</BaseButton>
 		</p>
diff --git a/src/views/user/settings/DataExport.vue b/src/views/user/settings/DataExport.vue
index 7e0005d2b..9e2d810e6 100644
--- a/src/views/user/settings/DataExport.vue
+++ b/src/views/user/settings/DataExport.vue
@@ -8,22 +8,28 @@
 				{{ $t('user.export.descriptionPasswordRequired') }}
 			</p>
 			<div class="field">
-				<label class="label" for="currentPasswordDataExport">
+				<label
+					class="label"
+					for="currentPasswordDataExport"
+				>
 					{{ $t('user.settings.currentPassword') }}
 				</label>
 				<div class="control">
 					<input
+						id="currentPasswordDataExport"
+						ref="passwordInput"
+						v-model="password"
 						class="input"
 						:class="{'is-danger': errPasswordRequired}"
-						id="currentPasswordDataExport"
 						:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 						type="password"
-						v-model="password"
 						@keyup="() => errPasswordRequired = password === ''"
-						ref="passwordInput"
-					/>
+					>
 				</div>
-				<p class="help is-danger" v-if="errPasswordRequired">
+				<p
+					v-if="errPasswordRequired"
+					class="help is-danger"
+				>
 					{{ $t('user.deletion.passwordRequired') }}
 				</p>
 			</div>
@@ -31,15 +37,16 @@
 
 		<x-button
 			:loading="dataExportService.loading"
+			class="is-fullwidth mt-4"
 			@click="requestDataExport()"
-			class="is-fullwidth mt-4">
+		>
 			{{ $t('user.export.request') }}
 		</x-button>
 	</card>
 </template>
 
 <script lang="ts">
-export default {name: 'user-settings-data-export'}
+export default {name: 'UserSettingsDataExport'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/Deletion.vue b/src/views/user/settings/Deletion.vue
index 4e335ad77..30c7e1d00 100644
--- a/src/views/user/settings/Deletion.vue
+++ b/src/views/user/settings/Deletion.vue
@@ -1,5 +1,8 @@
 <template>
-	<card :title="$t('user.deletion.title')" v-if="userDeletionEnabled">
+	<card
+		v-if="userDeletionEnabled"
+		:title="$t('user.deletion.title')"
+	>
 		<template v-if="deletionScheduledAt !== null">
 			<form @submit.prevent="cancelDeletion()">
 				<p>
@@ -15,22 +18,28 @@
 						{{ $t('user.deletion.scheduledCancelText') }}
 					</p>
 					<div class="field">
-						<label class="label" for="currentPasswordAccountDelete">
+						<label
+							class="label"
+							for="currentPasswordAccountDelete"
+						>
 							{{ $t('user.settings.currentPassword') }}
 						</label>
 						<div class="control">
 							<input
+								id="currentPasswordAccountDelete"
+								ref="passwordInput"
+								v-model="password"
 								class="input"
 								:class="{'is-danger': errPasswordRequired}"
-								id="currentPasswordAccountDelete"
 								:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 								type="password"
-								v-model="password"
 								@keyup="() => errPasswordRequired = password === ''"
-								ref="passwordInput"
-							/>
+							>
 						</div>
-						<p class="help is-danger" v-if="errPasswordRequired">
+						<p
+							v-if="errPasswordRequired"
+							class="help is-danger"
+						>
 							{{ $t('user.deletion.passwordRequired') }}
 						</p>
 					</div>
@@ -42,8 +51,9 @@
 
 			<x-button
 				:loading="accountDeleteService.loading"
+				class="is-fullwidth mt-4"
 				@click="cancelDeletion()"
-				class="is-fullwidth mt-4">
+			>
 				{{ $t('user.deletion.scheduledCancelConfirm') }}
 			</x-button>
 		</template>
@@ -51,27 +61,36 @@
 			<p>
 				{{ $t('user.deletion.text1') }}
 			</p>
-			<form @submit.prevent="deleteAccount()" v-if="isLocalUser">
+			<form
+				v-if="isLocalUser"
+				@submit.prevent="deleteAccount()"
+			>
 				<p>
 					{{ $t('user.deletion.text2') }}
 				</p>
 				<div class="field">
-					<label class="label" for="currentPasswordAccountDelete">
+					<label
+						class="label"
+						for="currentPasswordAccountDelete"
+					>
 						{{ $t('user.settings.currentPassword') }}
 					</label>
 					<div class="control">
 						<input
+							id="currentPasswordAccountDelete"
+							ref="passwordInput"
+							v-model="password"
 							class="input"
 							:class="{'is-danger': errPasswordRequired}"
-							id="currentPasswordAccountDelete"
 							:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 							type="password"
-							v-model="password"
 							@keyup="() => errPasswordRequired = password === ''"
-							ref="passwordInput"
-						/>
+						>
 					</div>
-					<p class="help is-danger" v-if="errPasswordRequired">
+					<p
+						v-if="errPasswordRequired"
+						class="help is-danger"
+					>
 						{{ $t('user.deletion.passwordRequired') }}
 					</p>
 				</div>
@@ -82,8 +101,9 @@
 
 			<x-button
 				:loading="accountDeleteService.loading"
+				class="is-fullwidth mt-4 is-danger"
 				@click="deleteAccount()"
-				class="is-fullwidth mt-4 is-danger">
+			>
 				{{ $t('user.deletion.confirm') }}
 			</x-button>
 		</template>
@@ -91,7 +111,7 @@
 </template>
 
 <script lang="ts">
-export default {name: 'user-settings-deletion'}
+export default {name: 'UserSettingsDeletion'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/EmailUpdate.vue b/src/views/user/settings/EmailUpdate.vue
index 96e9e42d2..481c3b486 100644
--- a/src/views/user/settings/EmailUpdate.vue
+++ b/src/views/user/settings/EmailUpdate.vue
@@ -1,43 +1,55 @@
 <template>
-	<card v-if="isLocalUser" :title="$t('user.settings.updateEmailTitle')">
+	<card
+		v-if="isLocalUser"
+		:title="$t('user.settings.updateEmailTitle')"
+	>
 		<form @submit.prevent="updateEmail">
 			<div class="field">
-				<label class="label" for="newEmail">{{ $t('user.settings.updateEmailNew') }}</label>
+				<label
+					class="label"
+					for="newEmail"
+				>{{ $t('user.settings.updateEmailNew') }}</label>
 				<div class="control">
 					<input
-						@keyup.enter="updateEmail"
-						class="input"
 						id="newEmail"
+						v-model="emailUpdate.newEmail"
+						class="input"
 						:placeholder="$t('user.auth.emailPlaceholder')"
 						type="email"
-						v-model="emailUpdate.newEmail"/>
+						@keyup.enter="updateEmail"
+					>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="currentPasswordEmail">{{ $t('user.settings.currentPassword') }}</label>
+				<label
+					class="label"
+					for="currentPasswordEmail"
+				>{{ $t('user.settings.currentPassword') }}</label>
 				<div class="control">
 					<input
-						@keyup.enter="updateEmail"
-						class="input"
 						id="currentPasswordEmail"
+						v-model="emailUpdate.password"
+						class="input"
 						:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 						type="password"
-						v-model="emailUpdate.password"/>
+						@keyup.enter="updateEmail"
+					>
 				</div>
 			</div>
 		</form>
 
 		<x-button
 			:loading="emailUpdateService.loading"
+			class="is-fullwidth mt-4"
 			@click="updateEmail"
-			class="is-fullwidth mt-4">
+		>
 			{{ $t('misc.save') }}
 		</x-button>
 	</card>
 </template>
 
 <script lang="ts">
-export default { name: 'user-settings-update-email' }
+export default { name: 'UserSettingsUpdateEmail' }
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index c1673f0b7..64622d11b 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -1,77 +1,113 @@
 <template>
-	<card :title="$t('user.settings.general.title')" class="general-settings" :loading="loading">
+	<card
+		:title="$t('user.settings.general.title')"
+		class="general-settings"
+		:loading="loading"
+	>
 		<div class="field">
-			<label class="label" :for="`newName${id}`">{{ $t('user.settings.general.name') }}</label>
+			<label
+				class="label"
+				:for="`newName${id}`"
+			>{{ $t('user.settings.general.name') }}</label>
 			<div class="control">
 				<input
-					@keyup.enter="updateSettings"
-					class="input"
 					:id="`newName${id}`"
+					v-model="settings.name"
+					class="input"
 					:placeholder="$t('user.settings.general.newName')"
 					type="text"
-					v-model="settings.name"/>
+					@keyup.enter="updateSettings"
+				>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label">
 				{{ $t('user.settings.general.defaultProject') }}
 			</label>
-			<project-search v-model="defaultProject"/>
+			<ProjectSearch v-model="defaultProject" />
 		</div>
-		<div class="field" v-if="hasFilters">
+		<div
+			v-if="hasFilters"
+			class="field"
+		>
 			<label class="label">
 				{{ $t('user.settings.general.filterUsedOnOverview') }}
 			</label>
-			<project-search v-model="filterUsedInOverview" :saved-filters-only="true"/>
+			<ProjectSearch
+				v-model="filterUsedInOverview"
+				:saved-filters-only="true"
+			/>
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="settings.emailRemindersEnabled"/>
+				<input
+					v-model="settings.emailRemindersEnabled"
+					type="checkbox"
+				>
 				{{ $t('user.settings.general.emailReminders') }}
 			</label>
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="settings.discoverableByName"/>
+				<input
+					v-model="settings.discoverableByName"
+					type="checkbox"
+				>
 				{{ $t('user.settings.general.discoverableByName') }}
 			</label>
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="settings.discoverableByEmail"/>
+				<input
+					v-model="settings.discoverableByEmail"
+					type="checkbox"
+				>
 				{{ $t('user.settings.general.discoverableByEmail') }}
 			</label>
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="settings.frontendSettings.playSoundWhenDone"/>
+				<input
+					v-model="settings.frontendSettings.playSoundWhenDone"
+					type="checkbox"
+				>
 				{{ $t('user.settings.general.playSoundWhenDone') }}
 			</label>
 		</div>
 		<div class="field">
 			<label class="checkbox">
-				<input type="checkbox" v-model="settings.overdueTasksRemindersEnabled"/>
+				<input
+					v-model="settings.overdueTasksRemindersEnabled"
+					type="checkbox"
+				>
 				{{ $t('user.settings.general.overdueReminders') }}
 			</label>
 		</div>
-		<div class="field" v-if="settings.overdueTasksRemindersEnabled">
-			<label class="label" for="overdueTasksReminderTime">
+		<div
+			v-if="settings.overdueTasksRemindersEnabled"
+			class="field"
+		>
+			<label
+				class="label"
+				for="overdueTasksReminderTime"
+			>
 				{{ $t('user.settings.general.overdueTasksRemindersTime') }}
 			</label>
 			<div class="control">
 				<input
-					@keyup.enter="updateSettings"
-					class="input"
 					id="overdueTasksReminderTime"
+					v-model="settings.overdueTasksRemindersTime"
+					class="input"
 					type="time"
-					v-model="settings.overdueTasksRemindersTime"/>
+					@keyup.enter="updateSettings"
+				>
 			</div>
 		</div>
 		<div class="field">
 			<label class="is-flex is-align-items-center">
-					<span>
-						{{ $t('user.settings.general.weekStart') }}
-					</span>
+				<span>
+					{{ $t('user.settings.general.weekStart') }}
+				</span>
 				<div class="select ml-2">
 					<select v-model.number="settings.weekStart">
 						<option value="0">{{ $t('user.settings.general.weekStartSunday') }}</option>
@@ -82,9 +118,9 @@
 		</div>
 		<div class="field">
 			<label class="is-flex is-align-items-center">
-					<span>
-						{{ $t('user.settings.general.language') }}
-					</span>
+				<span>
+					{{ $t('user.settings.general.language') }}
+				</span>
 				<div class="select ml-2">
 					<select v-model="settings.language">
 						<option
@@ -99,12 +135,16 @@
 		</div>
 		<div class="field">
 			<label class="is-flex is-align-items-center">
-					<span>
-						{{ $t('user.settings.quickAddMagic.title') }}
-					</span>
+				<span>
+					{{ $t('user.settings.quickAddMagic.title') }}
+				</span>
 				<div class="select ml-2">
 					<select v-model="settings.frontendSettings.quickAddMagicMode">
-						<option v-for="set in PrefixMode" :key="set" :value="set">
+						<option
+							v-for="set in PrefixMode"
+							:key="set"
+							:value="set"
+						>
 							{{ $t(`user.settings.quickAddMagic.${set}`) }}
 						</option>
 					</select>
@@ -119,7 +159,11 @@
 				<div class="select ml-2">
 					<select v-model="settings.frontendSettings.colorSchema">
 						<!-- TODO: use the Vikunja logo in color scheme as option buttons -->
-						<option v-for="(title, schemeId) in colorSchemeSettings" :key="schemeId" :value="schemeId">
+						<option
+							v-for="(title, schemeId) in colorSchemeSettings"
+							:key="schemeId"
+							:value="schemeId"
+						>
 							{{ title }}
 						</option>
 					</select>
@@ -133,7 +177,10 @@
 				</span>
 				<div class="select ml-2">
 					<select v-model="settings.timezone">
-						<option v-for="tz in availableTimezones" :key="tz">
+						<option
+							v-for="tz in availableTimezones"
+							:key="tz"
+						>
 							{{ tz }}
 						</option>
 					</select>
@@ -142,10 +189,10 @@
 		</div>
 
 		<x-button
-			:loading="loading"
-			@click="updateSettings()"
-			class="is-fullwidth mt-4"
 			v-cy="'saveGeneralSettings'"
+			:loading="loading"
+			class="is-fullwidth mt-4"
+			@click="updateSettings()"
 		>
 			{{ $t('misc.save') }}
 		</x-button>
@@ -153,7 +200,7 @@
 </template>
 
 <script lang="ts">
-export default {name: 'user-settings-general'}
+export default {name: 'UserSettingsGeneral'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/PasswordUpdate.vue b/src/views/user/settings/PasswordUpdate.vue
index 155385bea..389d30caf 100644
--- a/src/views/user/settings/PasswordUpdate.vue
+++ b/src/views/user/settings/PasswordUpdate.vue
@@ -1,58 +1,75 @@
 <template>
-	<card v-if="isLocalUser" :title="$t('user.settings.newPasswordTitle')" :loading="passwordUpdateService.loading">
+	<card
+		v-if="isLocalUser"
+		:title="$t('user.settings.newPasswordTitle')"
+		:loading="passwordUpdateService.loading"
+	>
 		<form @submit.prevent="updatePassword">
 			<div class="field">
-				<label class="label" for="newPassword">{{ $t('user.settings.newPassword') }}</label>
+				<label
+					class="label"
+					for="newPassword"
+				>{{ $t('user.settings.newPassword') }}</label>
 				<div class="control">
 					<input
-						autocomplete="new-password"
-						@keyup.enter="updatePassword"
-						class="input"
 						id="newPassword"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						type="password"
-						v-model="passwordUpdate.newPassword"/>
-				</div>
-			</div>
-			<div class="field">
-				<label class="label" for="newPasswordConfirm">{{ $t('user.settings.newPasswordConfirm') }}</label>
-				<div class="control">
-					<input
+						v-model="passwordUpdate.newPassword"
 						autocomplete="new-password"
-						@keyup.enter="updatePassword"
 						class="input"
-						id="newPasswordConfirm"
 						:placeholder="$t('user.auth.passwordPlaceholder')"
 						type="password"
-						v-model="passwordConfirm"/>
+						@keyup.enter="updatePassword"
+					>
 				</div>
 			</div>
 			<div class="field">
-				<label class="label" for="currentPassword">{{ $t('user.settings.currentPassword') }}</label>
+				<label
+					class="label"
+					for="newPasswordConfirm"
+				>{{ $t('user.settings.newPasswordConfirm') }}</label>
 				<div class="control">
 					<input
-						autocomplete="current-password"
-						@keyup.enter="updatePassword"
+						id="newPasswordConfirm"
+						v-model="passwordConfirm"
+						autocomplete="new-password"
 						class="input"
+						:placeholder="$t('user.auth.passwordPlaceholder')"
+						type="password"
+						@keyup.enter="updatePassword"
+					>
+				</div>
+			</div>
+			<div class="field">
+				<label
+					class="label"
+					for="currentPassword"
+				>{{ $t('user.settings.currentPassword') }}</label>
+				<div class="control">
+					<input
 						id="currentPassword"
+						v-model="passwordUpdate.oldPassword"
+						autocomplete="current-password"
+						class="input"
 						:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 						type="password"
-						v-model="passwordUpdate.oldPassword"/>
+						@keyup.enter="updatePassword"
+					>
 				</div>
 			</div>
 		</form>
 
 		<x-button
 			:loading="passwordUpdateService.loading"
+			class="is-fullwidth mt-4"
 			@click="updatePassword"
-			class="is-fullwidth mt-4">
+		>
 			{{ $t('misc.save') }}
 		</x-button>
 	</card>
 </template>
 
 <script lang="ts">
-export default {name: 'user-settings-password-update'}
+export default {name: 'UserSettingsPasswordUpdate'}
 </script>
 
 <script setup lang="ts">
diff --git a/src/views/user/settings/TOTP.vue b/src/views/user/settings/TOTP.vue
index c589c54e2..838d066c7 100644
--- a/src/views/user/settings/TOTP.vue
+++ b/src/views/user/settings/TOTP.vue
@@ -1,62 +1,91 @@
 <template>
-	<card :title="$t('user.settings.totp.title')" v-if="totpEnabled">
+	<card
+		v-if="totpEnabled"
+		:title="$t('user.settings.totp.title')"
+	>
 		<x-button
+			v-if="!totpEnrolled && totp.secret === ''"
 			:loading="totpService.loading"
 			@click="totpEnroll()"
-			v-if="!totpEnrolled && totp.secret === ''">
+		>
 			{{ $t('user.settings.totp.enroll') }}
 		</x-button>
 		<template v-else-if="totp.secret !== '' && !totp.enabled">
 			<p>
 				{{ $t('user.settings.totp.finishSetupPart1') }}
-				<strong>{{ totp.secret }}</strong><br/>
+				<strong>{{ totp.secret }}</strong><br>
 				{{ $t('user.settings.totp.finishSetupPart2') }}
 			</p>
 			<p>
-				{{ $t('user.settings.totp.scanQR') }}<br/>
-				<img :src="totpQR" alt=""/>
+				{{ $t('user.settings.totp.scanQR') }}<br>
+				<img
+					:src="totpQR"
+					alt=""
+				>
 			</p>
 			<div class="field">
-				<label class="label" for="totpConfirmPasscode">{{ $t('user.settings.totp.passcode') }}</label>
+				<label
+					class="label"
+					for="totpConfirmPasscode"
+				>{{ $t('user.settings.totp.passcode') }}</label>
 				<div class="control">
 					<input
-						autocomplete="one-time-code"
-						@keyup.enter="totpConfirm"
-						class="input"
 						id="totpConfirmPasscode"
+						v-model="totpConfirmPasscode"
+						autocomplete="one-time-code"
+						class="input"
 						:placeholder="$t('user.settings.totp.passcodePlaceholder')"
 						type="text"
 						inputmode="numeric"
-						v-model="totpConfirmPasscode"/>
+						@keyup.enter="totpConfirm"
+					>
 				</div>
 			</div>
-			<x-button @click="totpConfirm">{{ $t('misc.confirm') }}</x-button>
+			<x-button @click="totpConfirm">
+				{{ $t('misc.confirm') }}
+			</x-button>
 		</template>
 		<template v-else-if="totp.secret !== '' && totp.enabled">
 			<p>
 				{{ $t('user.settings.totp.setupSuccess') }}
 			</p>
 			<p v-if="!totpDisableForm">
-				<x-button @click="totpDisableForm = true" class="is-danger">{{ $t('misc.disable') }}</x-button>
+				<x-button
+					class="is-danger"
+					@click="totpDisableForm = true"
+				>
+					{{ $t('misc.disable') }}
+				</x-button>
 			</p>
 			<div v-if="totpDisableForm">
 				<div class="field">
-					<label class="label" for="currentPassword">{{ $t('user.settings.totp.enterPassword') }}</label>
+					<label
+						class="label"
+						for="currentPassword"
+					>{{ $t('user.settings.totp.enterPassword') }}</label>
 					<div class="control">
 						<input
-							@keyup.enter="totpDisable"
-							class="input"
 							id="currentPassword"
+							v-model="totpDisablePassword"
+							v-focus
+							class="input"
 							:placeholder="$t('user.settings.currentPasswordPlaceholder')"
 							type="password"
-							v-focus
-							v-model="totpDisablePassword"/>
+							@keyup.enter="totpDisable"
+						>
 					</div>
 				</div>
-				<x-button @click="totpDisable" class="is-danger">
+				<x-button
+					class="is-danger"
+					@click="totpDisable"
+				>
 					{{ $t('user.settings.totp.disable') }}
 				</x-button>
-				<x-button @click="totpDisableForm = false" variant="tertiary" class="ml-2">
+				<x-button
+					variant="tertiary"
+					class="ml-2"
+					@click="totpDisableForm = false"
+				>
 					{{ $t('misc.cancel') }}
 				</x-button>
 			</div>
@@ -65,7 +94,7 @@
 </template>
 
 <script lang="ts">
-export default { name: 'user-settings-totp' }
+export default { name: 'UserSettingsTotp' }
 </script>
 
 <script lang="ts" setup>