chore: better variable typing

Add ButtonLink component to fix occasions where the BaseButton needs to be styled in a link color.

cypress/e2e/list/list-view-list.spec.ts

@@ -61,7 +61,7 @@ describe('List View List', () => {
 		})
 		cy.visit(`/lists/${lists[1].id}/`)
 
-		cy.get('.list-title a.icon')
+		cy.get('.list-title .icon')
 			.should('not.exist')
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')

cypress/e2e/list/list.spec.ts

@@ -52,9 +52,9 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
 		cy.get('#title')
@@ -68,7 +68,7 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.visit('/')
@@ -80,9 +80,9 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')
 			.click()
 		cy.url()
@@ -93,7 +93,7 @@ describe('Lists', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.location('pathname')
 			.should('equal', '/')
@@ -112,7 +112,7 @@ describe('Lists', () => {
 		cy.get('.modal-content [data-cy=modalPrimary]')
 			.click()
 		
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.get('main.app-content')
 			.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')

cypress/e2e/task/task.spec.ts

@@ -165,7 +165,7 @@ describe('Task', () => {
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.content.description .editor a')
+			cy.get('.task-view .details.content.description .editor button')
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
@@ -297,7 +297,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
-				.get('a.remove-assignee')
+				.get('.remove-assignee')
 				.click()
 
 			cy.get('.global-notification')
@@ -402,7 +402,7 @@ describe('Task', () => {
 				.contains('Due Date')
 				.get('.date-input .datepicker .show')
 				.click()
-			cy.get('.datepicker .datepicker-popup a')
+			cy.get('.datepicker .datepicker-popup button')
 				.contains('Tomorrow')
 				.click()
 			cy.get('[data-cy="closeDatepicker"]')

src/App.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, Ref} from 'vue'
+import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
 import {useStore} from 'vuex'

src/components/base/BaseButton.vue

@@ -11,12 +11,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default defineComponent({
-  inheritAttrs: false,
-})
+export default { inheritAttrs: false }
 </script>
 
 <script lang="ts" setup>
@@ -53,7 +48,8 @@ const props = defineProps({
 const componentNodeName = ref<Node['nodeName']>('button')
 interface ElementBindings {
 	type?: string;
-	rel?: string,
+	rel?: string;
+	target?: string;
 }
 
 const elementBindings = ref({})
@@ -74,7 +70,10 @@ watchEffect(() => {
 	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
 	if ('href' in attrs) {
 		nodeName = 'a'
-		bindings = {rel: 'noreferrer noopener nofollow'}
+		bindings = {
+			rel: 'noreferrer noopener nofollow',
+			target: '_blank',
+		}
 	}
 
 	componentNodeName.value = nodeName
@@ -103,7 +102,7 @@ const isButton = computed(() => componentNodeName.value === 'button')
 
 :where(.base-button) {
 	cursor: pointer;
-	display: block;
+	display: inline-block;
 	color: inherit;
 	font: inherit;
 	user-select: none;

src/components/date/datemathHelp.vue

@@ -110,10 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import {format} from 'date-fns'
+import { formatDate } from '@/helpers/time/formatDate'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = format(new Date(), 'yyyy-MM-dd')
+const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
 </script>
 
 <style scoped>

src/components/home/TheNavigation.vue

@@ -22,14 +22,14 @@
 
 		<div class="navbar-end">
 			<update/>
-			<a
+			<BaseButton
 				@click="openQuickActions"
 				class="trigger-button pr-0"
 				v-shortcut="'Control+k'"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
-			</a>
+			</BaseButton>
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">
@@ -98,7 +98,7 @@ import {useStore} from 'vuex'
 import {useRouter} from 'vue-router'
 
 import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
-import Rights from '@/models/constants/rights.json'
+import {RIGHTS as Rights} from '@/models/constants/rights'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -108,6 +108,8 @@ import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
+import {getListTitle} from '@/helpers/getListTitle'
+
 const store = useStore()
 
 const userInfo = computed(() => store.state.auth.info)

src/components/home/contentAuth.vue

@@ -49,20 +49,20 @@
 					</modal>
 				</transition>
 
-				<a
+				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
 					<icon icon="keyboard"/>
-				</a>
+				</BaseButton>
 			</main>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
+import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'

src/components/home/navigation.vue

@@ -51,7 +51,7 @@
 		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
-					<span
+					<BaseButton
 						@click="toggleLists(n.id)"
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
@@ -61,32 +61,25 @@
 							:style="{ backgroundColor: n.hexColor }"
 							class="color-bubble"
 						/>
-						<span class="name">
-							{{ namespaceTitles[nk] }}
-						</span>
-						<a
+						<span class="name">{{ namespaceTitles[nk] }}</span>
+						<div
 							class="icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-							@click="toggleLists(n.id)"
 						>
 							<icon icon="chevron-down"/>
-						</a>
+						</div>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
 							({{ namespaceListsCount[nk] }})
 						</span>
-					</span>
+					</BaseButton>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
-				<div
-					v-if="listsVisible[n.id] ?? true"
-					:key="n.id + 'child'"
-					class="more-container"
-				>
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
 					-->
 					<draggable
+						v-if="listsVisible[n.id] ?? true"
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
@@ -111,45 +104,36 @@
 					>
 						<template #item="{element: l}">
 							<li
-								class="loader-container is-loading-small"
+								class="list-menu loader-container is-loading-small"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
-								<router-link
+								<BaseButton
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									v-slot="{ href, navigate, isActive }"
-									custom
+									class="list-menu-link"
+									:class="{'router-link-exact-active': currentList.id === l.id}"
 								>
-									<a
-										@click="navigate"
-										:href="href"
-										class="list-menu-link"
-										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
-									>
-										<span class="icon handle">
-											<icon icon="grip-lines"/>
-										</span>
-										<span
-											:style="{ backgroundColor: l.hexColor }"
-											class="color-bubble"
-											v-if="l.hexColor !== ''">
-										</span>
-										<span class="list-menu-title">
-											{{ getListTitle(l) }}
-										</span>
-										<span
-											:class="{'is-favorite': l.isFavorite}"
-											@click.prevent.stop="toggleFavoriteList(l)"
-											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-										</span>
-									</a>
-								</router-link>
+									<span class="icon handle">
+										<icon icon="grip-lines"/>
+									</span>
+									<span
+										:style="{ backgroundColor: l.hexColor }"
+										class="color-bubble"
+										v-if="l.hexColor !== ''">
+									</span>
+									<span class="list-menu-title">{{ getListTitle(l) }}</span>
+								</BaseButton>
+								<BaseButton
+									class="favorite"
+									:class="{'is-favorite': l.isFavorite}"
+									@click="toggleFavoriteList(l)"
+								>
+									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+								</BaseButton>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
 						</template>
 					</draggable>
-				</div>
 			</template>
 		</nav>
 		<PoweredByLink/>
@@ -160,8 +144,9 @@
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
 import {useStore} from 'vuex'
 import draggable from 'zhyswan-vuedraggable'
-import {SortableEvent} from 'sortablejs'
+import type {SortableEvent} from 'sortablejs'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
@@ -170,9 +155,10 @@ import Logo from '@/components/home/Logo.vue'
 import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
+import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import NamespaceModel from '@/models/namespace'
-import ListModel from '@/models/list'
+import type NamespaceModel from '@/models/namespace'
+import type ListModel from '@/models/list'
 
 const drag = ref(false)
 const dragOptions = {
@@ -224,7 +210,7 @@ function resize() {
 	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: number) {
+function toggleLists(namespaceId: NamespaceModel['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
@@ -334,7 +320,7 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.menu-label,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			display: flex;
 			align-items: center;
@@ -352,28 +338,21 @@ $vikunja-nav-selected-width: 0.4rem;
 				flex: 0 0 12px;
 			}
 
-			.favorite {
-				margin-left: .25rem;
-				transition: opacity $transition, color $transition;
-				opacity: 0;
+		}
+		.favorite {
+			margin-left: .25rem;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
 
-				&:hover {
-					color: var(--warning);
-				}
-
-				&.is-favorite {
-					opacity: 1;
-					color: var(--warning);
-				}
+			&:hover,
+			&.is-favorite {
+				color: var(--warning);
 			}
+		}
 
-			&:hover .favorite {
-				opacity: 1;
-			}
-
-			&:hover {
-				background: transparent;
-			}
+		.favorite.is-favorite,
+		.list-menu:hover .favorite {
+			opacity: 1;
 		}
 
 		.menu-label {
@@ -392,6 +371,8 @@ $vikunja-nav-selected-width: 0.4rem;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
+			color: $vikunja-nav-color;
+			padding: 0 .25rem;
 
 			.menu-label {
 				margin-bottom: 0;
@@ -410,11 +391,6 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			a:not(.dropdown-item) {
-				color: $vikunja-nav-color;
-				padding: 0 .25rem;
-			}
-
 			:deep(.dropdown-trigger) {
 				padding: .5rem;
 				cursor: pointer;
@@ -444,7 +420,7 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label,
 		.nsettings,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			color: $vikunja-nav-color;
 		}
@@ -483,7 +459,11 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			span.list-menu-link, li > a {
+			a:hover {
+				background: transparent;
+			}
+
+			.list-menu-link, li > a {
 				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
 				transition: all 0.2s ease;
 
@@ -556,7 +536,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				font-family: $vikunja-font;
 			}
 
-			span.list-menu-link, li > a {
+			.list-menu-link, li > a {
 				padding-left: 2rem;
 				display: inline-block;
 

src/components/input/button.vue

@@ -18,15 +18,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-	name: 'x-button',
-})
+export default { name: 'x-button' }
 </script>
 
 <script setup lang="ts">
-import {computed, useSlots, PropType} from 'vue'
+import {computed, useSlots, type PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const BUTTON_TYPES_MAP =  Object.freeze({

src/components/input/datepicker.vue

@@ -1,95 +1,73 @@
 <template>
-	<div class="datepicker" :class="{'disabled': disabled}">
-		<a @click.stop="toggleDatePopup" class="show">
-			<template v-if="date === null">
-				{{ chooseDateLabel }}
-			</template>
-			<template v-else>
-				{{ formatDateShort(date) }}
-			</template>
-		</a>
+	<div class="datepicker">
+		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
+			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
+		</BaseButton>
 
 		<transition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
-					<span class="icon">
-						<icon :icon="['far', 'calendar-alt']"/>
-					</span>
+				<BaseButton
+					v-if="(new Date()).getHours() < 21"
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('today')"
+				>
+					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.today') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('today') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('tomorrow')">
-					<span class="icon">
-						<icon :icon="['far', 'sun']"/>
+						<span>{{ $t('input.datepicker.today') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('tomorrow')"
+				>
+					<span class="icon"><icon :icon="['far', 'sun']"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.tomorrow') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('tomorrow') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('nextMonday')">
-					<span class="icon">
-						<icon icon="coffee"/>
+						<span>{{ $t('input.datepicker.tomorrow') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextMonday')"
+				>
+					<span class="icon"><icon icon="coffee"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.nextMonday') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextMonday') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('thisWeekend')">
-					<span class="icon">
-						<icon icon="cocktail"/>
+						<span>{{ $t('input.datepicker.nextMonday') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('thisWeekend')"
+				>
+					<span class="icon"><icon icon="cocktail"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.thisWeekend') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('thisWeekend') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('laterThisWeek')">
-					<span class="icon">
-						<icon icon="chess-knight"/>
+						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('laterThisWeek')"
+				>
+					<span class="icon"><icon icon="chess-knight"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.laterThisWeek') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('laterThisWeek') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('nextWeek')">
-					<span class="icon">
-						<icon icon="forward"/>
+						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextWeek')"
+				>
+					<span class="icon"><icon icon="forward"/></span>
 					<span class="text">
-						<span>
-							{{ $t('input.datepicker.nextWeek') }}
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextWeek') }}
-						</span>
+						<span>{{ $t('input.datepicker.nextWeek') }}</span>
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
 					</span>
-				</a>
+				</BaseButton>
 
 				<flat-pickr
 					:config="flatPickerConfig"
@@ -98,7 +76,7 @@
 				/>
 
 				<x-button
-					class="is-fullwidth"
+					class="datepicker__close-button is-fullwidth"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"
@@ -117,7 +95,9 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {i18n} from '@/i18n'
 
-import {format} from 'date-fns'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -134,6 +114,7 @@ export default defineComponent({
 	},
 	components: {
 		flatPickr,
+		BaseButton,
 	},
 	props: {
 		modelValue: {
@@ -189,11 +170,12 @@ export default defineComponent({
 					return ''
 				}
 
-				return format(this.date, 'yyy-LL-dd H:mm')
+				return formatDate(this.date, 'yyy-LL-dd H:mm')
 			},
 		},
 	},
 	methods: {
+		formatDateShort,
 		setDateValue(newVal) {
 			if (newVal === null) {
 				this.date = null
@@ -252,7 +234,7 @@ export default defineComponent({
 			const interval = calculateDayInterval(date)
 			const newDate = new Date()
 			newDate.setDate(newDate.getDate() + interval)
-			return format(newDate, 'E')
+			return formatDate(newDate, 'E')
 		},
 	},
 })
@@ -263,68 +245,64 @@ export default defineComponent({
 	input.input {
 		display: none;
 	}
+}
 
-	&.disabled a {
-		cursor: default;
-	}
+.datepicker-popup {
+	position: absolute;
+	z-index: 99;
+	width: 320px;
+	background: var(--white);
+	border-radius: $radius;
+	box-shadow: $shadow;
 
-	.datepicker-popup {
-		position: absolute;
-		z-index: 99;
-		width: 320px;
-		background: var(--white);
-		border-radius: $radius;
-		box-shadow: $shadow;
-
-		@media screen and (max-width: ($tablet)) {
-			width: calc(100vw - 5rem);
-		}
-
-		a:not(.button) {
-			display: flex;
-			align-items: center;
-			padding: 0 .5rem;
-			width: 100%;
-			height: 2.25rem;
-			color: var(--text);
-			transition: all $transition;
-
-			&:first-child {
-				border-radius: $radius $radius 0 0;
-			}
-
-			&:hover {
-				background: var(--grey-100);
-			}
-
-			.text {
-				width: 100%;
-				font-size: .85rem;
-				display: flex;
-				justify-content: space-between;
-				padding-right: .25rem;
-
-				.weekday {
-					color: var(--text-light);
-					text-transform: capitalize;
-				}
-			}
-
-			.icon {
-				width: 2rem;
-				text-align: center;
-			}
-		}
-
-		a.button {
-			margin: 1rem;
-			width: calc(100% - 2rem);
-		}
-
-		:deep(.flatpickr-calendar) {
-			margin: 0 auto 8px;
-			box-shadow: none;
-		}
+	@media screen and (max-width: ($tablet)) {
+		width: calc(100vw - 5rem);
 	}
 }
+
+.datepicker__quick-select-date {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	width: 100%;
+	height: 2.25rem;
+	color: var(--text);
+	transition: all $transition;
+
+	&:first-child {
+		border-radius: $radius $radius 0 0;
+	}
+
+	&:hover {
+		background: var(--grey-100);
+	}
+
+	.text {
+		width: 100%;
+		font-size: .85rem;
+		display: flex;
+		justify-content: space-between;
+		padding-right: .25rem;
+
+		.weekday {
+			color: var(--text-light);
+			text-transform: capitalize;
+		}
+	}
+
+	.icon {
+		width: 2rem;
+		text-align: center;
+	}
+}
+	
+.datepicker__close-button {
+	margin: 1rem;
+	width: calc(100% - 2rem);
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
 </style>

src/components/input/editor.vue

@@ -16,23 +16,23 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
+				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
-				<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
+				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
-				<a @click="action.action">{{ action.title }}</a>
+				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
 			</li>
 		</ul>
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
+					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -62,10 +62,15 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
+
 export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
+		BaseButton,
+		ButtonLink,
 	},
 	props: {
 		modelValue: {

src/components/input/fancycheckbox.vue

@@ -53,7 +53,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		updateData(checked) {
+		updateData(checked: boolean) {
 			this.checked = checked
 			this.$emit('update:modelValue', checked)
 			this.$emit('change', checked)

src/components/input/multiselect.vue

@@ -15,7 +15,7 @@
 						<slot name="tag" :item="item">
 						<span :key="`item${key}`" class="tag ml-2 mt-2">
 							{{ label !== '' ? item[label] : item }}
-							<a @click="() => remove(item)" class="delete is-small"></a>
+							<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
 						</span>
 						</slot>
 					</template>
@@ -37,7 +37,7 @@
 
 		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
-				<button
+				<BaseButton
 					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
 					:key="key"
@@ -54,9 +54,9 @@
 					<span class="hint-text">
 						{{ selectPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 
-				<button
+				<BaseButton
 					v-if="creatableAvailable"
 					class="is-fullwidth"
 					:ref="`result-${filteredSearchResults.length}`"
@@ -75,7 +75,7 @@
 					<span class="hint-text">
 						{{ createPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 			</div>
 		</transition>
 
@@ -87,8 +87,13 @@ import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export default defineComponent({
 	name: 'multiselect',
+	components: {
+		BaseButton,
+	},
 	data() {
 		return {
 			query: '',

src/components/list/list-settings-dropdown.vue

@@ -83,7 +83,7 @@ import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
 import ListModel from '@/models/list'
-import SubscriptionModel from '@/models/subscription'
+import type SubscriptionModel from '@/models/subscription'
 
 const props = defineProps({
 	list: {

src/components/list/partials/filters.vue

@@ -177,8 +177,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
-import Fancycheckbox from '../../input/fancycheckbox'
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
 import {includesById} from '@/helpers/utils'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'

src/components/list/partials/list-card.vue

@@ -15,33 +15,37 @@
 		<div
 			class="list-background background-fade-in"
 			:class="{'is-visible': background}"
-			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
+		/>
 		<div class="list-content">
-			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
 				{{ $t('namespace.archived') }}
 			</span>
-				<span
-					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
-					@click.stop="toggleFavoriteList(list)"
-					class="favorite">
+			<BaseButton
+				v-else
+				:class="{'is-favorite': list.isFavorite}"
+				@click.stop="toggleFavoriteList(list)"
+				class="favorite"
+			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
-			</span>
-			</div>
+			</BaseButton>
+
 			<div class="title">{{ list.title }}</div>
 		</div>
 	</router-link>
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
+import {type PropType, ref, watch} from 'vue'
 import {useStore} from 'vuex'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
+import type ListModel from '@/models/list'
+
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -109,13 +113,14 @@ function toggleFavoriteList(list: ListModel) {
 		color: var(--grey-100);
 	}
 
-	&.has-background, .list-background {
+	&.has-background,
+	.list-background {
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
 
-	&.has-background .list-content .title {
+	&.has-background .title {
 		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
 		color: var(--white);
 	}
@@ -176,23 +181,35 @@ function toggleFavoriteList(list: ListModel) {
 
 	.list-content {
 		display: flex;
-		justify-content: space-between;
+		align-content: space-between;
 		flex-wrap: wrap;
 		padding: 1rem;
 		position: absolute;
 		height: 100%;
 		width: 100%;
 
-		.is-archived-container {
-			width: 100%;
-			text-align: right;
 
-			.is-archived {
-				font-size: .75rem;
-				float: left;
+		.is-archived {
+			font-size: .75rem;
+		}
+
+		.favorite {
+			margin-left: auto;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
+			display: block;
+
+			&:hover,
+			&.is-favorite {
+				color: var(--warning);
 			}
 		}
 
+		.favorite.is-favorite,
+		&:hover .favorite {
+			opacity: 1;
+		}
+
 		.title {
 			align-self: flex-end;
 			font-family: $vikunja-font;
@@ -209,30 +226,6 @@ function toggleFavoriteList(list: ListModel) {
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
 		}
-
-		.favorite {
-			transition: opacity $transition, color $transition;
-			opacity: 0;
-
-			&:hover {
-				color: var(--warning);
-			}
-
-			&.is-archived {
-				display: none;
-			}
-
-			&.is-favorite {
-				display: inline-block;
-				opacity: 1;
-				color: var(--warning);
-			}
-		}
-
-		&:hover .favorite {
-			opacity: 1;
-		}
-
 	}
 }
 </style>

src/components/misc/ButtonLink.vue

@@ -0,0 +1,17 @@
+<template>
+	<BaseButton class="button-link"><slot/></BaseButton>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+</script>
+
+<style lang="scss">
+.button-link {
+	color: var(--link);
+
+	&:hover {
+		color: var(--link-hover);
+	}
+}
+</style>

src/components/misc/Done.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 type Variants = 'default' | 'small'
 
 defineProps({

src/components/misc/api-config.vue

@@ -27,7 +27,7 @@
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>
-			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
+			<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
 		</div>
 
 		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@@ -48,6 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 import {success} from '@/message'
 
 import Message from '@/components/misc/message.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 const props = defineProps({
 	configureOpen: {
@@ -117,4 +118,9 @@ async function setApiUrl() {
 .url {
 	border-bottom: 1px dashed var(--primary);
 }
+
+.api-config__change-button {
+	display: inline-block;
+    color: var(--link);
+}
 </style>

src/components/misc/card.vue

@@ -4,7 +4,7 @@
 			<p class="card-header-title">
 				{{ title }}
 			</p>
-			<a
+			<BaseButton
 				v-if="hasClose"
 				class="card-header-icon"
 				:aria-label="$t('misc.close')"
@@ -14,7 +14,7 @@
 				<span class="icon">
 					<icon :icon="closeIcon"/>
 				</span>
-			</a>
+			</BaseButton>
 		</header>
 		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
 			<div :class="{'content': hasContent}">
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+
 defineProps({
 	title: {
 		type: String,

src/components/misc/error.vue

@@ -1,14 +1,15 @@
 <template>
 	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
-			<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
-			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
+			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
+			<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
 		</i18n-t>
 	</message>
 </template>
 
 <script lang="ts" setup>
 import Message from '@/components/misc/message.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 function reload() {
 	window.location.reload()

src/components/misc/legal.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="legal-links">
-		<a :href="imprintUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
+		<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<a :href="privacyPolicyUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
+		<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
 	</div>
 </template>
 
@@ -10,6 +10,8 @@
 import {computed} from 'vue'
 import {useStore} from 'vuex'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const store = useStore()
 
 const imprintUrl = computed(() => store.state.config.legal.imprintUrl)

src/components/misc/message.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType} from 'vue'
+import {computed, type PropType} from 'vue'
 
 const TEXT_ALIGN_MAP = Object.freeze({
 	left: '',

src/components/misc/notification.vue

@@ -1,6 +1,7 @@
 <template>
 	<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',

src/components/misc/subscription.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, shallowRef} from 'vue'
+import {computed, shallowRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -33,16 +33,17 @@ import SubscriptionModel from '@/models/subscription'
 
 import {success} from '@/message'
 
-interface Props {
-  entity: string
-  entityId: number
-  subscription: SubscriptionModel | null
-  isButton?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	isButton: true,
-	subscription: null,
+const props = defineProps({
+	entity: String,
+	entityId: Number,
+	isButton: {
+		type: Boolean,
+		default: true,
+	},
+	subscription: {
+		type: Object as PropType<SubscriptionModel>,
+		default: null,
+	},
 })
 
 const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

src/components/notifications/notifications.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="notifications">
 		<div class="is-flex is-justify-content-center">
-			<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
+			<BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
 				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 				<icon icon="bell"/>
-			</a>
+			</BaseButton>
 		</div>
 
 		<transition name="fade">
@@ -26,11 +26,11 @@
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
 								{{ n.notification.doer.getDisplayName() }}
 							</span>
-							<a @click="() => to(n, index)()">
+							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
-							</a>
+							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -50,18 +50,20 @@
 import {computed, onMounted, onUnmounted, ref} from 'vue'
 
 import NotificationService from '@/services/notification'
+import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
-import names from '@/models/constants/notificationNames.json'
+import NotificationModel, { NOTIFICATION_NAMES as names} from '@/models/notification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {useStore} from 'vuex'
 import {useRouter} from 'vue-router'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
 const store = useStore()
 const router = useRouter()
 
-const allNotifications = ref([])
+const allNotifications = ref<NotificationModel[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 

src/components/quick-actions/quick-actions.vue

@@ -32,7 +32,7 @@
 						{{ r.title }}
 					</span>
 					<div class="result-items">
-						<button
+						<BaseButton
 							v-for="(i, key) in r.items"
 							:key="key"
 							:ref="`result-${k}_${key}`"
@@ -44,7 +44,7 @@
 							:class="{'is-strikethrough': i.done}"
 						>
 							{{ i.title }}
-						</button>
+						</BaseButton>
 					</div>
 				</div>
 			</div>
@@ -63,6 +63,8 @@ import TeamModel from '@/models/team'
 
 import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
+
+import BaseButton from '@/components/base/BaseButton.vue'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
@@ -86,7 +88,10 @@ const SEARCH_MODE_TEAMS = 'teams'
 
 export default defineComponent({
 	name: 'quick-actions',
-	components: {QuickAddMagic},
+	components: {
+		BaseButton,
+		QuickAddMagic,
+	},
 	data() {
 		return {
 			query: '',

src/components/sharing/linkSharing.vue

@@ -180,8 +180,9 @@ import {ref, watch, computed, shallowReactive} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
-import RIGHTS from '@/models/constants/rights.json'
+import {RIGHTS} from '@/models/constants/rights'
 import LinkShareModel from '@/models/linkShare'
+import type ListModel from '@/models/list'
 
 import LinkShareService from '@/services/linkShare'
 
@@ -197,7 +198,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref([])
+const linkShares = ref<LinkShareModel[]>([])
 const linkShareService = shallowReactive(new LinkShareService())
 const selectedRight = ref(RIGHTS.READ)
 const name = ref('')
@@ -216,7 +217,7 @@ watch(
 const store = useStore()
 const frontendUrl = computed(() => store.state.config.frontendUrl)
 
-async function load(listId) {
+async function load(listId: ListModel['id']) {
 	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
 	if (listId === 0) {
 		return
@@ -225,7 +226,7 @@ async function load(listId) {
 	linkShares.value = await linkShareService.getAll({listId})
 }
 
-async function add(listId) {
+async function add(listId: ListModel['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
 		listId,
@@ -241,7 +242,7 @@ async function add(listId) {
 	await load(listId)
 }
 
-async function remove(listId) {
+async function remove(listId: ListModel['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,

src/components/sharing/userTeam.vue

@@ -133,13 +133,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({name: 'userTeamShare'})
+export default {name: 'userTeamShare'}
 </script>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
+import {ref, reactive, computed, shallowReactive, type ShallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
@@ -158,7 +156,7 @@ import TeamListService from '@/services/teamList'
 import TeamService from '@/services/team'
 import TeamModel from '@/models/team'
 
-import RIGHTS from '@/models/constants/rights.json'
+import {RIGHTS} from '@/models/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
@@ -355,7 +353,7 @@ async function toggleType(sharable) {
 const found = ref([])
 
 const currentUserId = computed(() => store.state.auth.info.id)
-async function find(query) {
+async function find(query: string) {
 	if (query === '') {
 		found.value = []
 		return

src/components/tasks/add-task.vue

@@ -44,7 +44,7 @@
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
-import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
+import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
 
 import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'

src/components/tasks/gantt-component.vue

@@ -96,9 +96,10 @@
 					</span>
 					<priority-label :priority="t.priority" :done="t.done"/>
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
-					<a @click="editTask(theTasks[k])" class="edit-toggle">
+					<!-- FIXME: add label -->
+					<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
 						<icon icon="pen"/>
-					</a>
+					</BaseButton>
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
@@ -174,22 +175,25 @@
 import {defineComponent} from 'vue'
 
 import VueDragResize from 'vue-drag-resize'
-import EditTask from './edit-task'
+import EditTask from './edit-task.vue'
 
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
-import priorities from '../../models/constants/priorities'
-import PriorityLabel from './partials/priorityLabel'
+import {PRIORITIES as priorities} from '@/models/constants/priorities'
+import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
-import Rights from '../../models/constants/rights.json'
+import {RIGHTS as Rights} from '@/models/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {formatDate} from '@/helpers/time/formatDate'
 
 export default defineComponent({
 	name: 'GanttChart',
 	components: {
+		BaseButton,
 		FilterPopup,
 		PriorityLabel,
 		EditTask,
@@ -434,7 +438,7 @@ export default defineComponent({
 			this.hideCrateNewTask()
 		},
 		formatYear(date) {
-			return this.format(date, 'MMMM, yyyy')
+			return formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -26,6 +26,9 @@
 		</progress>
 
 		<div class="files" v-if="attachments.length > 0">
+			<!-- FIXME: don't use a for element that wraps other links / buttons
+				Instead: overlay element with button that is inside.
+			-->
 			<a
 				class="attachment"
 				v-for="a in attachments"
@@ -36,7 +39,7 @@
 				<div class="info">
 					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy">
-							<span v-tooltip="formatDate(a.created)">
+							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
 							<user
@@ -53,25 +56,28 @@
 						</span>
 					</p>
 					<p>
-						<a
+						<BaseButton
+							class="attachment-info-meta-button"
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
 							{{ $t('misc.download') }}
-						</a>
-						<a
+						</BaseButton>
+						<BaseButton
+							class="attachment-info-meta-button"
 							@click.stop="copyUrl(a)"
 							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 						>
 							{{ $t('task.attachment.copyUrl') }}
-						</a>
-						<a
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
+						</BaseButton>
+						<BaseButton
 							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
-						</a>
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -142,15 +148,20 @@ import {defineComponent} from 'vue'
 
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
-import User from '../../misc/user'
+import type FileModel from '@/models/file'
+import User from '@/components/misc/user.vue'
 import {mapState} from 'vuex'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
+import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
+
+import BaseButton from '@/components/base/BaseButton'
 
 export default defineComponent({
 	name: 'attachments',
 	components: {
+		BaseButton,
 		User,
 	},
 	data() {
@@ -220,7 +231,11 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+
+		downloadAttachment(attachment: AttachmentModel) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -230,7 +245,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files) {
+		uploadFiles(files: FileModel[]) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		async deleteAttachment() {
@@ -297,7 +312,7 @@ export default defineComponent({
           display: flex;
 
           > span:not(:last-child):after,
-          > a:not(:last-child):after {
+          > button:not(:last-child):after {
             content: '·';
             padding: 0 .25rem;
           }
@@ -377,7 +392,7 @@ export default defineComponent({
 		}
 
 		> span:not(:last-child):after,
-		> a:not(:last-child):after {
+		> button:not(:last-child):after {
 			display: none;
 		}
 
@@ -387,6 +402,10 @@ export default defineComponent({
 	}
 }
 
+.attachment-info-meta-button {
+	color: var(--link);
+}
+
 @keyframes bounce {
   from,
   20%,

src/components/tasks/partials/comments.vue

@@ -34,12 +34,12 @@
 							width="20"
 						/>
 						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
-						<span v-tooltip="formatDate(c.created)" class="has-text-grey">
+						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
 						<span
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
-							v-tooltip="formatDate(c.updated)"
+							v-tooltip="formatDateLong(c.updated)"
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
@@ -162,7 +162,9 @@ import TaskCommentService from '@/services/taskComment'
 import TaskCommentModel from '@/models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
+import type TaskModel from '@/models/task'
 const props = defineProps({
 	taskId: {
 		type: Number,
@@ -186,8 +188,8 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref(null)
-const saving = ref(null)
+const saved = ref<TaskModel['id'] | null>(null)
+const saving = ref<TaskModel['id'] | null>(null)
 
 const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
 const currentUserId = computed(() => store.state.auth.info.id)
@@ -213,7 +215,7 @@ function attachmentUpload(...args) {
 
 const taskCommentService = shallowReactive(new TaskCommentService())
 
-async function loadComments(taskId) {
+async function loadComments(taskId: TaskModel['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -262,7 +264,7 @@ function toggleEdit(comment: TaskCommentModel) {
 	Object.assign(commentEdit, comment)
 }
 
-function toggleDelete(commentId) {
+function toggleDelete(commentId: TaskCommentModel['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }

src/components/tasks/partials/createdUpdated.vue

@@ -1,6 +1,6 @@
 <template>
 	<p class="created">
-		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
 			<i18n-t keypath="task.detail.created">
 				<span>{{ formatDateSince(task.created) }}</span>
 				{{ task.createdBy.getDisplayName() }}
@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import {computed, toRefs} from 'vue'
 import TaskModel from '@/models/task'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const props = defineProps({
 	task: {

src/components/tasks/partials/date-table-cell.vue

@@ -1,12 +1,14 @@
 <template>
-	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		<time :datetime="date ? formatISO(date) : null">
+	<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
+		<time :datetime="date ? formatISO(date) : undefined">
 			{{ +date === 0 ? '-' : formatDateSince(date) }}
 		</time>
 	</td>
 </template>
 
 <script setup lang="ts">
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
 defineProps({
 	date: {
 		type: Date,

src/components/tasks/partials/description.vue

@@ -47,6 +47,7 @@ const props = defineProps({
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		required: true,
 	},
 })

src/components/tasks/partials/editAssignees.vue

@@ -18,9 +18,9 @@
 			<template #tag="{item: user}">
 				<span class="assignee">
 					<user :avatar-size="32" :show-username="false" :user="user"/>
-					<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
+					<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
 						<icon icon="times"/>
-					</a>
+					</BaseButton>
 				</span>
 			</template>
 		</Multiselect>
@@ -28,15 +28,16 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, watch, PropType} from 'vue'
+import {ref, shallowReactive, watch, type PropType} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import UserModel from '@/models/user'
+import type UserModel from '@/models/user'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
 
@@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
 	success({message: t('task.assignee.unassignSuccess')})
 }
 
-async function findUser(query) {
+async function findUser(query: string) {
 	if (query === '') {
 		clearAllFoundUsers()
 		return

src/components/tasks/partials/editLabels.vue

@@ -19,7 +19,7 @@
 				:style="{'background': label.hexColor, 'color': label.textColor}"
 				class="tag">
 				<span>{{ label.title }}</span>
-				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
+				<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
 			</span>
 		</template>
 		<template #searchResult="{option}">
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, computed, shallowReactive, watch} from 'vue'
+import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
@@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {success} from '@/message'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({

src/components/tasks/partials/kanban-card.vue

@@ -24,7 +24,7 @@
 			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 			class="due-date"
 			v-if="task.dueDate > 0"
-			v-tooltip="formatDate(task.dueDate)">
+			v-tooltip="formatDateLong(task.dueDate)">
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
@@ -66,16 +66,17 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
+import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
-import ChecklistSummary from './checklist-summary'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+import Labels from '../../../components/tasks/partials/labels.vue'
+import ChecklistSummary from './checklist-summary.vue'
+import TaskModel, {TASK_DEFAULT_COLOR} from '@/models/task'
 
+import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default defineComponent({
@@ -95,6 +96,7 @@ export default defineComponent({
 	},
 	props: {
 		task: {
+			type: Object as PropType<TaskModel>,
 			required: true,
 		},
 		loading: {
@@ -104,8 +106,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		formatDateLong,
+		formatISO,
+		formatDateSince,
 		colorIsDark,
-		async toggleTaskDone(task) {
+		async toggleTaskDone(task: TaskModel) {
 			this.loadingInternal = true
 			try {
 				const done = !task.done

src/components/tasks/partials/labels.vue

@@ -11,8 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import type LabelModel from '@/models/label'
+import type { PropType } from 'vue'
+
 defineProps({
 	labels: {
+		type: Array as PropType<LabelModel[]>,
 		required: true,
 	},
 })

src/components/tasks/partials/listSearch.vue

@@ -38,7 +38,7 @@ const emit = defineEmits(['update:modelValue'])
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list = reactive<ListModel>(new ListModel())
+const list: ListModel= reactive(new ListModel())
 
 watch(
 	() => props.modelValue,

src/components/tasks/partials/priorityLabel.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import priorities from '@/models/constants/priorities'
+import {PRIORITIES as priorities} from '@/models/constants/priorities'
 	
 defineProps({
 	priority: {

src/components/tasks/partials/prioritySelect.vue

@@ -5,19 +5,19 @@
 			@change="updateData"
 			:disabled="disabled || undefined"
 		>
-			<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>
 
 <script setup lang="ts">
 import {ref, watch} from 'vue'
-import priorities from '@/models/constants/priorities.json'
+import {PRIORITIES} from '@/models/constants/priorities'
 
 const priority = ref(0)
 

src/components/tasks/partials/quick-add-magic.vue

@@ -2,7 +2,7 @@
 	<div v-if="available">
 		<p class="help has-text-grey">
 			{{ $t('task.quickAddMagic.hint') }}.
-			<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
+			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
 		</p>
 		<modal
 			@close="() => visible = false"
@@ -86,13 +86,16 @@
 </template>
 
 <script setup lang="ts">
+import {ref, computed} from 'vue'
+
+import ButtonLink from '@/components/misc/ButtonLink.vue'
+
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
-import {ref, computed} from 'vue'
 
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
 const available = computed(() => mode.value !== 'disabled')
-const prefixes = computed(() =>PREFIXES[mode.value])
+const prefixes = computed(() => PREFIXES[mode.value])
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -103,12 +103,13 @@
 						</span>
 						{{ t.title }}
 					</router-link>
-					<a
+					<BaseButton
+						v-if="editEnabled"
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
 						class="remove"
-						v-if="editEnabled">
+					>
 						<icon icon="trash-alt"/>
-					</a>
+					</BaseButton>
 				</div>
 			</div>
 		</div>
@@ -142,9 +143,9 @@ import {defineComponent} from 'vue'
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
-import relationKinds from '../../../models/constants/relationKinds'
-import TaskRelationModel from '../../../models/taskRelation'
+import TaskRelationModel, {RELATION_KINDS} from '@/models/taskRelation'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 export default defineComponent({
@@ -154,7 +155,7 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
 			newTaskRelationKind: 'related',
 			taskRelationService: new TaskRelationService(),
@@ -166,6 +167,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		Multiselect,
 	},
 	props: {
@@ -217,7 +219,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async findTasks(query) {
+		async findTasks(query: string) {
 			this.query = query
 			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},

src/components/tasks/partials/reminders.vue

@@ -11,9 +11,9 @@
 				:disabled="disabled"
 				@close-on-change="() => addReminderDate(index)"
 			/>
-			<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
+			<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 				<icon icon="times"></icon>
-			</a>
+			</BaseButton>
 		</div>
 		<div class="reminder-input" v-if="!disabled">
 			<Datepicker
@@ -26,12 +26,15 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, onMounted, watch} from 'vue'
+import {type PropType, ref, onMounted, watch} from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 
 type Reminder = Date | string
 
+
+
 const props = defineProps({
 	modelValue: {
 		type: Array as PropType<Reminder[]>,

src/components/tasks/partials/repeatAfter.vue

@@ -12,14 +12,14 @@
 			<div class="control">
 				<div class="select">
 					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
+						<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 !== repeatModes.REPEAT_MODE_MONTH">
+		<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
 			<p class="pr-4">
 				{{ $t('task.repeat.each') }}
 			</p>
@@ -55,12 +55,13 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, watch} from 'vue'
-import repeatModes from '@/models/constants/taskRepeatModes'
-import TaskModel from '@/models/task'
+import {ref, reactive, watch, type PropType} from 'vue'
+import {TASK_REPEAT_MODES, type RepeatAfter} from '@/models/task'
+import type TaskModel from '@/models/task'
 
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<TaskModel>,
 		default: () => ({}),
 		required: true,
 	},
@@ -90,7 +91,7 @@ watch(
 )
 
 function updateData() {
-	if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
+	if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
 		return
 	}
 	
@@ -99,7 +100,7 @@ function updateData() {
 	emit('change')
 }
 
-function setRepeatAfter(amount: number, type) {
+function setRepeatAfter(amount: number, type: RepeatAfter['type']) {
 	Object.assign(repeatAfter, { amount, type})
 	updateData()
 }

src/components/tasks/partials/singleTaskInList.vue

@@ -39,17 +39,21 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<time
-				:datetime="formatISO(task.dueDate)"
-				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				class="is-italic"
-				@click.prevent.stop="showDefer = !showDefer"
+			<BaseButton
 				v-if="+new Date(task.dueDate) > 0"
-				v-tooltip="formatDate(task.dueDate)"
-				:aria-expanded="showDefer ? 'true' : 'false'"
+				class="dueDate"
+				@click.prevent.stop="showDefer = !showDefer"
+				v-tooltip="formatDateLong(task.dueDate)"
 			>
-				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
-			</time>
+				<time
+					:datetime="formatISO(task.dueDate)"
+					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+					class="is-italic"
+					:aria-expanded="showDefer ? 'true' : 'false'"
+				>
+					- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				</time>
+			</BaseButton>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
@@ -80,13 +84,13 @@
 			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
-		<a
+		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
 			@click="toggleFavorite"
 			class="favorite">
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
-		</a>
+		</BaseButton>
 		<slot></slot>
 	</div>
 </template>
@@ -95,15 +99,15 @@
 import {defineComponent} from 'vue'
 
 import TaskModel from '../../../models/task'
-import PriorityLabel from './priorityLabel'
+import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
-import Labels from './labels'
-import User from '../../misc/user'
-import Fancycheckbox from '../../input/fancycheckbox'
-import DeferTask from './defer-task'
+import BaseButton from '@/components/base/BaseButton.vue'
+import Fancycheckbox from '../../input/fancycheckbox.vue'
+import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
+import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -115,6 +119,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		ChecklistSummary,
 		DeferTask,
 		Fancycheckbox,
@@ -178,7 +183,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async markAsDone(checked) {
+		formatDateSince,
+		formatISO,
+		formatDateLong,
+
+		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
 				const task = await this.taskService.update(this.task)
 				if (this.task.done) {
@@ -203,7 +212,7 @@ export default defineComponent({
 			}
 		},
 
-		undoDone(checked) {
+		undoDone(checked: boolean) {
 			this.task.done = !this.task.done
 			this.markAsDone(!checked)
 		},
@@ -249,6 +258,11 @@ export default defineComponent({
 		display: inline-block;
 		flex: 1 0 50%;
 
+		.dueDate {
+			display: inline-block;
+			margin-left: 5px;
+		}
+
 		.overdue {
 			color: var(--danger);
 		}

src/components/tasks/partials/sort.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 type Order = 'asc' | 'desc' | 'none'

src/helpers/redirectToProvider.ts

@@ -1,7 +1,7 @@
 import {createRandomID} from '@/helpers/randomId'
 import {parseURL} from 'ufo'
 
-interface Provider {
+export interface Provider {
 	name: string
 	key: string
 	authUrl: string

src/i18n/lang/it-IT.json

@@ -77,7 +77,7 @@
         "newName": "Il nuovo nome",
         "savedSuccess": "Impostazioni salvate con successo.",
         "emailReminders": "Inviami promemoria per le attività via e-mail",
-        "overdueReminders": "Send me a summary of my undone overdue tasks every day",
+        "overdueReminders": "Inviami ogni giorno un riassunto delle attività in ritardo",
         "discoverableByName": "Lascia che altri utenti mi trovino cercando il mio nome",
         "discoverableByEmail": "Lascia che altri utenti mi trovino quando cercano il mio indirizzo e-mail completo",
         "playSoundWhenDone": "Riproduci un suono quando le attività vengono segnate come fatte",
@@ -87,7 +87,7 @@
         "language": "Lingua",
         "defaultList": "Lista predefinita",
         "timezone": "Fuso Orario",
-        "overdueTasksRemindersTime": "Overdue tasks reminder email time"
+        "overdueTasksRemindersTime": "Orario email del promemoria attività in ritardo"
       },
       "totp": {
         "title": "Autenticazione a due fattori",
@@ -728,16 +728,16 @@
       "removeSuccess": "Etichetta eliminata.",
       "addCreateSuccess": "Etichetta creata e aggiunta.",
       "delete": {
-        "header": "Delete this label",
-        "text1": "Are you sure you want to delete this label?",
-        "text2": "This will remove it from all tasks and cannot be restored."
+        "header": "Elimina etichetta",
+        "text1": "Sei sicuro di voler eliminare questa etichetta?",
+        "text2": "Verrà rimossa da tutte le attività e non potrà essere ripristinata."
       }
     },
     "priority": {
       "unset": "Azzera",
       "low": "Bassa",
       "medium": "Media",
-      "high": "High",
+      "high": "Alta",
       "urgent": "Urgente",
       "doNow": "FARE ORA"
     },

src/main.ts

@@ -5,8 +5,6 @@ import router from './router'
 
 import {error, success} from './message'
 
-import {formatDate, formatDateShort, formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
-
 import {VERSION} from './version.json'
 
 // Notifications
@@ -69,24 +67,6 @@ app.component('x-button', Button)
 app.component('modal', Modal)
 app.component('card', Card)
 
-// Mixins
-import {getNamespaceTitle} from './helpers/getNamespaceTitle'
-import {getListTitle} from './helpers/getListTitle'
-import {setTitle} from './helpers/setTitle'
-
-app.mixin({
-	methods: {
-		formatDateSince,
-		format: formatDate,
-		formatDate: formatDateLong,
-		formatDateShort: formatDateShort,
-		formatISO,
-		getNamespaceTitle,
-		getListTitle,
-		setTitle,
-	},
-})
-
 app.config.errorHandler = (err, vm, info) => {
 	if (import.meta.env.DEV) {
 		console.error(err, vm, info)

src/models/abstractModel.ts

@@ -1,12 +1,13 @@
 import {objectToCamelCase} from '@/helpers/case'
 import {omitBy, isNil} from '@/helpers/utils'
+import type {Right} from '@/models/constants/rights'
 
 export default class AbstractModel {
 
 	/**
 	 * The max right the user has on this object, as returned by the x-max-right header from the api.
 	 */
-	maxRight: number | null = null
+	maxRight: Right | null = null
 
 	/**
 	 * The abstract constructor takes an object and merges its data with the default data of this model.

src/models/attachment.ts

@@ -3,22 +3,25 @@ import UserModel from './user'
 import FileModel from './file'
 
 export default class AttachmentModel extends AbstractModel {
+	id: number
+	taskId: number
+	createdBy: UserModel
+	file: FileModel
+	created: Date
+
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)
 		this.file = new FileModel(this.file)
 		this.created = new Date(this.created)
-
-		/** @type {number} */
-		this.id
 	}
 
 	defaults() {
 		return {
 			id: 0,
 			taskId: 0,
-			file: FileModel,
 			createdBy: UserModel,
+			file: FileModel,
 			created: null,
 		}
 	}

src/models/avatar.ts

@@ -1,6 +1,10 @@
 import AbstractModel from './abstractModel'
 
+export type AVATAR_PROVIDERS = 'default' | 'initials' | 'gravatar' | 'marble' | 'upload'
+
 export default class AvatarModel extends AbstractModel {
+	avatarProvider: AVATAR_PROVIDERS
+
 	defaults() {
 		return {
 			avatarProvider: '',

src/models/backgroundImage.ts

@@ -1,6 +1,15 @@
 import AbstractModel from './abstractModel'
 
 export default class BackgroundImageModel extends AbstractModel {
+	id: number
+	url: string
+	thumb: string
+	info: {
+		author: string
+		authorName: string
+	}
+	blurHash: string  
+
 	defaults() {
 		return {
 			id: 0,

src/models/bucket.ts

@@ -3,6 +3,18 @@ import UserModel from './user'
 import TaskModel from './task'
 
 export default class BucketModel extends AbstractModel {
+	id: number
+	title: string
+	listId: number
+	limit: number
+	tasks: TaskModel[]
+	isDoneBucket: boolean
+	position: number
+	
+	createdBy: UserModel
+	created: Date
+	updated: Date
+
 	constructor(bucket) {
 		super(bucket)
 

src/models/caldavToken.ts

@@ -1,14 +1,15 @@
 import AbstractModel from './abstractModel'
 
 export default class CaldavTokenModel extends AbstractModel {
+	id: number
+	created: Date
+
 	constructor(data? : Object) {
 		super(data)
 		
-		/** @type {number} */
 		this.id
 
 		if (this.created) {
-			/** @type {Date} */
 			this.created = new Date(this.created)
 		}
 	}

src/models/constants/notificationNames.json

@@ -1,7 +0,0 @@
-{
-  "TASK_COMMENT": "task.comment",
-  "TASK_ASSIGNED": "task.assigned",
-  "TASK_DELETED": "task.deleted",
-  "LIST_CREATED": "list.created",
-  "TEAM_MEMBER_ADDED": "team.member.added"
-}

src/models/constants/priorities.json

@@ -1,8 +0,0 @@
-{
-"UNSET": 0,
-"LOW": 1,
-"MEDIUM": 2,
-"HIGH": 3,
-"URGENT": 4,
-"DO_NOW": 5
-}

src/models/constants/priorities.ts

@@ -0,0 +1,8 @@
+export const PRIORITIES = {
+	'UNSET': 0,
+	'LOW': 1,
+	'MEDIUM': 2,
+	'HIGH': 3,
+	'URGENT': 4,
+	'DO_NOW': 5,
+} as const

src/models/constants/relationKinds.json

@@ -1,12 +0,0 @@
-[
-  "subtask",
-  "parenttask",
-  "related",
-  "duplicates",
-  "blocking",
-  "blocked",
-  "precedes",
-  "follows",
-  "copiedfrom",
-  "copiedto"
-]

src/models/constants/rights.json

@@ -1,5 +0,0 @@
-{
-  "READ": 0,
-  "READ_WRITE": 1,
-  "ADMIN": 2
-}

src/models/constants/rights.ts

@@ -0,0 +1,7 @@
+export const RIGHTS = {
+  'READ': 0,
+  'READ_WRITE': 1,
+  'ADMIN': 2,
+} as const
+
+export type Right = typeof RIGHTS[keyof typeof RIGHTS]

src/models/constants/taskRepeatModes.json

@@ -1,5 +0,0 @@
-{
-  "REPEAT_MODE_DEFAULT": 0,
-  "REPEAT_MODE_MONTH": 1,
-  "REPEAT_MODE_FROM_CURRENT_DATE": 2
-}

src/models/emailUpdate.ts

@@ -1,6 +1,9 @@
 import AbstractModel from './abstractModel'
 
 export default class EmailUpdateModel extends AbstractModel {
+	newEmail: string
+	password: string
+
 	defaults() {
 		return {
 			newEmail: '',

src/models/file.ts

@@ -1,6 +1,12 @@
 import AbstractModel from './abstractModel'
 
 export default class FileModel extends AbstractModel {
+	id: number
+	mime: string
+	name: string
+	size: number
+	created: Date
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)

src/models/label.ts

@@ -4,6 +4,17 @@ import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 const DEFAULT_LABEL_BACKGROUND_COLOR = 'e8e8e8'
 export default class LabelModel extends AbstractModel {
+	id: number
+	title: string
+	hexColor: string
+	description: string
+	createdBy: UserModel
+	listId: number
+	textColor: string
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		// FIXME: this should be empty and be definied in the client.

src/models/labelTask.ts

@@ -1,6 +1,10 @@
 import AbstractModel from './abstractModel'
 
 export default class LabelTask extends AbstractModel {
+	id: number
+	taskId: number
+	labelId: number
+
 	defaults() {
 		return {
 			id: 0,

src/models/linkShare.ts

@@ -1,7 +1,18 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
+import {RIGHTS, type Right} from '@/models/constants/rights'
 
 export default class LinkShareModel extends AbstractModel {
+	id: number
+	hash: string
+	right: Right
+	sharedBy: UserModel
+	sharingType: number // FIXME: use correct numbers
+	listId: number
+	name: string
+	password: string
+	created: Date
+	updated: Date
 
 	constructor(data) {
 		// The constructor of AbstractModel handles all the default parsing.
@@ -18,7 +29,7 @@ export default class LinkShareModel extends AbstractModel {
 		return {
 			id: 0,
 			hash: '',
-			right: 0,
+			right: RIGHTS.READ,
 			sharedBy: UserModel,
 			sharingType: 0,
 			listId: 0,

src/models/list.ts

@@ -1,72 +1,48 @@
 import AbstractModel from './abstractModel'
 import TaskModel from './task'
 import UserModel from './user'
+import type NamespaceModel from './namespace'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import SubscriptionModel from '@/models/subscription'
 
 export default class ListModel extends AbstractModel {
+	id: number
+	title: string
+	description: string
+	owner: UserModel
+	tasks: TaskModel[]
+	namespaceId: NamespaceModel['id']
+	isArchived: boolean
+	hexColor: string
+	identifier: string
+	backgroundInformation: any
+	isFavorite: boolean
+	subscription: SubscriptionModel
+	position: number
+	backgroundBlurHash: string
+	
+	created: Date
+	updated: Date
 
 	constructor(data) {
 		super(data)
 
 		this.owner = new UserModel(this.owner)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.title
-
-		/** @type {string} */
-		this.description
-		
-		/** @type {UserModel} */
-		this.owner
-
-		/** @type {TaskModel[]} */
-		this.tasks
-
 		// Make all tasks to task models
 		this.tasks = this.tasks.map(t => {
 			return new TaskModel(t)
 		})
-		
-		/** @type {number} */
-		this.namespaceId
-
-		/** @type {boolean} */
-		this.isArchived
-
-		/** @type {string} */
-		this.hexColor
 
 		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {string} */
-		this.identifier
-
-		/** @type */
-		this.backgroundInformation
-
-		/** @type {boolean} */
-		this.isFavorite
-
-		/** @type */
-		this.subscription
-
 		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.position
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 	}
 

src/models/listDuplicateModel.ts

@@ -1,7 +1,12 @@
 import AbstractModel from './abstractModel'
 import ListModel from './list'
+import NamespaceModel from './namespace'
 
 export default class ListDuplicateModel extends AbstractModel {
+	listId: number
+	namespaceId: NamespaceModel['id']
+	list: ListModel
+
 	constructor(data) {
 		super(data)
 		this.list = new ListModel(this.list)

src/models/namespace.ts

@@ -4,6 +4,18 @@ import UserModel from './user'
 import SubscriptionModel from '@/models/subscription'
 
 export default class NamespaceModel extends AbstractModel {
+	id: number
+	title: string
+	description: string
+	owner: UserModel
+	lists: ListModel[]
+	isArchived: boolean
+	hexColor: string
+	subscription: SubscriptionModel
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 
@@ -11,7 +23,6 @@ export default class NamespaceModel extends AbstractModel {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {ListModel[]} */
 		this.lists = this.lists.map(l => {
 			return new ListModel(l)
 		})
@@ -22,15 +33,6 @@ export default class NamespaceModel extends AbstractModel {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.title
-
-		/** @type {boolean} */
-		this.isArchived
-
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 	}

src/models/notification.ts

@@ -5,35 +5,86 @@ import TaskModel from '@/models/task'
 import TaskCommentModel from '@/models/taskComment'
 import ListModel from '@/models/list'
 import TeamModel from '@/models/team'
-import names from './constants/notificationNames.json'
+
+export const NOTIFICATION_NAMES = {
+	'TASK_COMMENT': 'task.comment',
+	'TASK_ASSIGNED': 'task.assigned',
+	'TASK_DELETED': 'task.deleted',
+	'LIST_CREATED': 'list.created',
+	'TEAM_MEMBER_ADDED': 'team.member.added',
+} as const
+
+interface Notification {
+	doer: UserModel
+}
+interface NotificationTask extends Notification {
+	task: TaskModel
+	comment: TaskCommentModel
+}
+
+interface NotificationAssigned extends Notification {
+	task: TaskModel
+	assignee: UserModel
+}
+
+interface NotificationDeleted extends Notification {
+	task: TaskModel
+}
+
+interface NotificationCreated extends Notification {
+	task: TaskModel
+}
+
+interface NotificationMemberAdded extends Notification {
+	member: UserModel
+	team: TeamModel
+}
 
 export default class NotificationModel extends AbstractModel {
+	id: number
+	name: string
+	notification: NotificationTask | NotificationAssigned | NotificationDeleted | NotificationCreated | NotificationMemberAdded
+	read: boolean
+	readAt: Date | null
+
+	created: Date
+
 	constructor(data) {
 		super(data)
 
 		switch (this.name) {
-			case names.TASK_COMMENT:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
-				this.notification.comment = new TaskCommentModel(this.notification.comment)
+			case NOTIFICATION_NAMES.TASK_COMMENT:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+					comment: new TaskCommentModel(this.notification.comment),
+				}
 				break
-			case names.TASK_ASSIGNED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
-				this.notification.assignee = new UserModel(this.notification.assignee)
+			case NOTIFICATION_NAMES.TASK_ASSIGNED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+					assignee: new UserModel(this.notification.assignee),
+				}
 				break
-			case names.TASK_DELETED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.task = new TaskModel(this.notification.task)
+			case NOTIFICATION_NAMES.TASK_DELETED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					task: new TaskModel(this.notification.task),
+				}
 				break
-			case names.LIST_CREATED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.list = new ListModel(this.notification.list)
+			case NOTIFICATION_NAMES.LIST_CREATED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					list: new ListModel(this.notification.list),
+				}
 				break
-			case names.TEAM_MEMBER_ADDED:
-				this.notification.doer = new UserModel(this.notification.doer)
-				this.notification.member = new UserModel(this.notification.member)
-				this.notification.team = new TeamModel(this.notification.team)
+			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+				this.notification = {
+					doer: new UserModel(this.notification.doer),
+					member: new UserModel(this.notification.member),
+					team: new TeamModel(this.notification.team),
+				}
 				break
 		}
 
@@ -55,9 +106,9 @@ export default class NotificationModel extends AbstractModel {
 		let who = ''
 
 		switch (this.name) {
-			case names.TASK_COMMENT:
+			case NOTIFICATION_NAMES.TASK_COMMENT:
 				return `commented on ${this.notification.task.getTextIdentifier()}`
-			case names.TASK_ASSIGNED:
+			case NOTIFICATION_NAMES.TASK_ASSIGNED:
 				who = `${this.notification.assignee.getDisplayName()}`
 
 				if (user !== null && user.id === this.notification.assignee.id) {
@@ -65,11 +116,11 @@ export default class NotificationModel extends AbstractModel {
 				}
 
 				return `assigned ${who} to ${this.notification.task.getTextIdentifier()}`
-			case names.TASK_DELETED:
+			case NOTIFICATION_NAMES.TASK_DELETED:
 				return `deleted ${this.notification.task.getTextIdentifier()}`
-			case names.LIST_CREATED:
+			case NOTIFICATION_NAMES.LIST_CREATED:
 				return `created ${this.notification.list.title}`
-			case names.TEAM_MEMBER_ADDED:
+			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
 				who = `${this.notification.member.getDisplayName()}`
 
 				if (user !== null && user.id === this.notification.member.id) {

src/models/passwordReset.ts

@@ -1,6 +1,10 @@
 import AbstractModel from './abstractModel'
 
 export default class PasswordResetModel extends AbstractModel {
+	token: string
+	newPassword: string
+	email: string
+
 	constructor(data) {
 		super(data)
 

src/models/passwordUpdate.ts

@@ -1,6 +1,9 @@
 import AbstractModel from './abstractModel'
 
 export default class PasswordUpdateModel extends AbstractModel {
+	newPassword: string
+	oldPassword: string
+
 	defaults() {
 		return {
 			newPassword: '',

src/models/savedFilter.ts

@@ -2,6 +2,23 @@ import AbstractModel from '@/models/abstractModel'
 import UserModel from '@/models/user'
 
 export default class SavedFilterModel extends AbstractModel {
+	id: 0
+	title: string
+	description: string
+	filters: {
+		sortBy: ('done' | 'id')[]
+		orderBy: ('asc' | 'desc')[]
+		filterBy: 'done'[]
+		filterValue: 'false'[]
+		filterComparator: 'equals'[]
+		filterConcat: 'and'
+		filterIncludeNulls: boolean
+	}
+
+	owner: any
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 

src/models/subscription.ts

@@ -2,22 +2,17 @@ import AbstractModel from '@/models/abstractModel'
 import UserModel from '@/models/user'
 
 export default class SubscriptionModel extends AbstractModel {
+	id: number
+	entity: string // FIXME: correct type?
+	entityId: number // FIXME: correct type?
+	user: UserModel
+
+	created: Date
+
 	constructor(data) {
 		super(data)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.entity
-
-		/** @type {number} */
-		this.entityId
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {UserModel} */
 		this.user = new UserModel(this.user)
 	}
 

src/models/task.ts

@@ -2,69 +2,86 @@ import AbstractModel from './abstractModel'
 import UserModel from './user'
 import LabelModel from './label'
 import AttachmentModel from './attachment'
-import {REPEAT_MODE_DEFAULT} from './constants/taskRepeatModes'
 
 import SubscriptionModel from '@/models/subscription'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
+import type ListModel from './list'
 
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 export const TASK_DEFAULT_COLOR = '#1973ff'
 
+export const TASK_REPEAT_MODES = {
+	'REPEAT_MODE_DEFAULT': 0,
+	'REPEAT_MODE_MONTH': 1,
+	'REPEAT_MODE_FROM_CURRENT_DATE': 2,
+} as const
+
+export type TaskRepeatMode = typeof TASK_REPEAT_MODES[keyof typeof TASK_REPEAT_MODES] 
+
+export interface RepeatAfter {
+	type: 'hours' | 'weeks' | 'months' | 'years' | 'days'
+	amount: number
+}
+
 export default class TaskModel extends AbstractModel {
-	constructor(data) {
+	id: number
+	title: string
+	description: string
+	done: boolean
+	doneAt: Date | null
+	priority: 0
+	labels: LabelModel[]
+	assignees: UserModel[]
+
+	dueDate: Date | null
+	startDate: Date | null
+	endDate: Date | null
+	repeatAfter: number | RepeatAfter
+	repeatFromCurrentDate: boolean
+	repeatMode: TaskRepeatMode
+	reminderDates: Date[]
+	parentTaskId: TaskModel['id']
+	hexColor: string
+	percentDone: number
+	relatedTasks: { [relationKind: string]: TaskModel } // FIXME: use relationKinds
+	attachments: AttachmentModel[]
+	identifier: string
+	index: number
+	isFavorite: boolean
+	subscription: SubscriptionModel
+
+	position: number
+	kanbanPosition: number
+
+	createdBy: UserModel
+	created: Date
+	updated: Date
+
+	listId: ListModel['id'] // Meta, only used when creating a new task
+
+	constructor(data: Partial<TaskModel>) {
 		super(data)
 
-		/** @type {number} */
 		this.id = Number(this.id)
-
-		/** @type {string} */
 		this.title = this.title?.trim()
-
-		/** @type {string} */
-		this.description
-
-		/** @type {boolean} */
-		this.done
-
-		/** @type */
 		this.doneAt = parseDateOrNull(this.doneAt)
 
-		/** @type {number} */
-		this.priority
-
-		/** @type {LabelModel[]} */
 		this.labels = this.labels
 			.map(l => new LabelModel(l))
 			.sort((f, s) => f.title > s.title ? 1 : -1)
 
-		/** @type {UserModel[]} */
 		// Parse the assignees into user models
 		this.assignees = this.assignees.map(a => {
 			return new UserModel(a)
 		})
 
-		/** @type {Date} */
 		this.dueDate = parseDateOrNull(this.dueDate)
-
-		/** @type {Date} */
 		this.startDate = parseDateOrNull(this.startDate)
-
-		/** @type {Date} */
 		this.endDate = parseDateOrNull(this.endDate)
 
-		/** @type */
-		this.repeatAfter
-
 		// Parse the repeat after into something usable
 		this.parseRepeatAfter()
 
-		/** @type {boolean} */
-		this.repeatFromCurrentDate
-
-		/** @type {TaskRepeatMode: 0 | 1 | 2} */
-		this.repeatMode
-
-		/** @type {Date[]} */
 		this.reminderDates = this.reminderDates.map(d => new Date(d))
 
 		// Cancel all scheduled notifications for this task to be sure to only have available notifications
@@ -73,22 +90,10 @@ export default class TaskModel extends AbstractModel {
 			this.reminderDates.forEach(d => this.scheduleNotification(d))
 		})
 
-		/** @type {number} */
-		this.parentTaskId
-
-		/** @type {string} */
-		this.hexColor
-
 		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 
-		/** @type {number} */
-		this.percentDone
-
-		/** @type {{ [relationKind: string]: TaskModel }} */
-		this.relatedTasks
-
 		// Make all subtasks to task models
 		Object.keys(this.relatedTasks).forEach(relationKind => {
 			this.relatedTasks[relationKind] = this.relatedTasks[relationKind].map(t => {
@@ -97,46 +102,21 @@ export default class TaskModel extends AbstractModel {
 		})
 
 		// Make all attachments to attachment models
-		/** @type {AttachmentModel[]} */
 		this.attachments = this.attachments.map(a => new AttachmentModel(a))
 
-		/** @type {string} */
-		this.identifier
-
 		// Set the task identifier to empty if the list does not have one
 		if (this.identifier === `-${this.index}`) {
 			this.identifier = ''
 		}
 
-		/** @type {number} */
-		this.index
-
-		/** @type {boolean} */
-		this.isFavorite
-
-		/** @type {SubscriptionModel} */
-		this.subscription
-
 		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 
-		/** @type {number} */
-		this.position
-
-		/** @type {number} */
-		this.kanbanPosition
-
-		/** @type {UserModel} */
 		this.createdBy = new UserModel(this.createdBy)
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 
-		/** @type {number} */
 		this.listId = Number(this.listId)
 	}
 
@@ -156,7 +136,7 @@ export default class TaskModel extends AbstractModel {
 			endDate: 0,
 			repeatAfter: 0,
 			repeatFromCurrentDate: false,
-			repeatMode: REPEAT_MODE_DEFAULT,
+			repeatMode: TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT,
 			reminderDates: [],
 			parentTaskId: 0,
 			hexColor: '',
@@ -204,7 +184,7 @@ export default class TaskModel extends AbstractModel {
 	 * This function should only be called from the constructor.
 	 */
 	parseRepeatAfter() {
-		const repeatAfterHours = (this.repeatAfter / 60) / 60
+		const repeatAfterHours = (this.repeatAfter as number / 60) / 60
 		this.repeatAfter = {type: 'hours', amount: repeatAfterHours}
 
 		// if its dividable by 24, its something with days, otherwise hours

src/models/taskAssignee.ts

@@ -1,6 +1,12 @@
 import AbstractModel from './abstractModel'
+import type UserModel from './user'
+import type TaskModel from './task'
 
 export default class TaskAssigneeModel extends AbstractModel {
+	created: Date
+	userId: UserModel['id']
+	taskId: TaskModel['id']
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)

src/models/taskComment.ts

@@ -1,7 +1,16 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
+import type TaskModel from './task'
 
 export default class TaskCommentModel extends AbstractModel {
+	id: number
+	taskId: TaskModel['id']
+	comment: string
+	author: UserModel
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		this.author = new UserModel(this.author)
@@ -16,7 +25,7 @@ export default class TaskCommentModel extends AbstractModel {
 			comment: '',
 			author: UserModel,
 			created: null,
-			update: null,
+			updated: null,
 		}
 	}
 }

src/models/taskRelation.ts

@@ -1,7 +1,31 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
+import type TaskModel from './task'
+
+export const RELATION_KINDS = [
+	'subtask',
+	'parenttask',
+	'related',
+	'duplicates',
+	'blocking',
+	'blocked',
+	'precedes',
+	'follows',
+	'copiedfrom',
+	'copiedto',
+  ] as const
+
+export type RelationKind = typeof RELATION_KINDS[number]
 
 export default class TaskRelationModel extends AbstractModel {
+	id: number
+	otherTaskId: TaskModel['id']
+	taskId: TaskModel['id']
+	relationKind: RelationKind
+
+	createdBy: UserModel
+	created: Date
+
 	constructor(data) {
 		super(data)
 		this.createdBy = new UserModel(this.createdBy)

src/models/team.ts

@@ -1,8 +1,19 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
 import TeamMemberModel from './teamMember'
+import {RIGHTS, type Right} from '@/models/constants/rights'
 
 export default class TeamModel extends AbstractModel {
+	id: 0
+	name: string
+	description: string
+	members: TeamMemberModel[]
+	right: Right
+
+	createdBy: UserModel
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 
@@ -22,7 +33,7 @@ export default class TeamModel extends AbstractModel {
 			name: '',
 			description: '',
 			members: [],
-			right: 0,
+			right: RIGHTS.READ,
 
 			createdBy: {},
 			created: null,

src/models/teamList.ts

@@ -1,6 +1,9 @@
 import TeamShareBaseModel from './teamShareBase'
+import type ListModel from './list'
 
 export default class TeamListModel extends TeamShareBaseModel {
+	listId: ListModel['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamMember.ts

@@ -1,6 +1,10 @@
 import UserModel from './user'
+import type ListModel from './list'
 
 export default class TeamMemberModel extends UserModel {
+	admin: boolean
+	teamId: ListModel['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamNamespace.ts

@@ -1,6 +1,9 @@
 import TeamShareBaseModel from './teamShareBase'
+import type NamespaceModel from './namespace'
 
 export default class TeamNamespaceModel extends TeamShareBaseModel {
+	namespaceId: NamespaceModel['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/teamShareBase.ts

@@ -1,10 +1,18 @@
 import AbstractModel from './abstractModel'
+import type TeamModel from './team'
+import {RIGHTS, type Right} from '@/models/constants/rights'
 
 /**
  * This class is a base class for common team sharing model.
  * It is extended in a way so it can be used for namespaces as well for lists.
  */
 export default class TeamShareBaseModel extends AbstractModel {
+	teamId: TeamModel['id']
+	right: Right
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)
@@ -14,7 +22,7 @@ export default class TeamShareBaseModel extends AbstractModel {
 	defaults() {
 		return {
 			teamId: 0,
-			right: 0,
+			right: RIGHTS.READ,
 
 			created: null,
 			updated: null,

src/models/totp.ts

@@ -1,6 +1,10 @@
 import AbstractModel from './abstractModel'
 
 export default class TotpModel extends AbstractModel {
+	secret: string
+	enabled: boolean
+	url: string
+
 	defaults() {
 		return {
 			secret: '',

src/models/user.ts

@@ -2,30 +2,21 @@ import AbstractModel from './abstractModel'
 import UserSettingsModel from '@/models/userSettings'
 
 export default class UserModel extends AbstractModel {
+	id: number
+	email: string
+	username: string
+	name: string
+
+	created: Date
+	updated: Date
+	settings: UserSettingsModel
+
 	constructor(data) {
 		super(data)
 
-		/** @type {number} */
-		this.id
-
-		/** @type {string} */
-		this.email
-
-		/** @type {string} */
-		this.username
-
-		/** @type {string} */
-		this.name
-
-		/** @type {Date} */
 		this.created = new Date(this.created)
-
-		/** @type {Date} */
 		this.updated = new Date(this.updated)
 
-		/** @type {UserSettingsModel} */
-		this.settings
-
 		if (this.settings !== null) {
 			this.settings = new UserSettingsModel(this.settings)
 		}

src/models/userList.ts

@@ -1,7 +1,9 @@
 import UserShareBaseModel from './userShareBase'
-
+import type ListModel from './list'
 // This class extends the user share model with a 'rights' parameter which is used in sharing
 export default class UserListModel extends UserShareBaseModel {
+	listId: ListModel['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/userNamespace.ts

@@ -1,7 +1,10 @@
 import UserShareBaseModel from './userShareBase'
+import type NamespaceModel from './namespace'
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
 export default class UserNamespaceModel extends UserShareBaseModel {
+	namespaceId: NamespaceModel['id']
+
 	defaults() {
 		return {
 			...super.defaults(),

src/models/userSettings.ts

@@ -1,7 +1,17 @@
 
 import AbstractModel from './abstractModel'
+import type ListModel from './list'
 
 export default class UserSettingsModel extends AbstractModel {
+	name: string
+	emailRemindersEnabled: boolean
+	discoverableByName: boolean
+	discoverableByEmail: boolean
+	overdueTasksRemindersEnabled: boolean
+	defaultListId: undefined | ListModel['id']
+	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	timezone: string
+
 	defaults() {
 		return {
 			name: '',

src/models/userShareBase.ts

@@ -1,6 +1,14 @@
 import AbstractModel from './abstractModel'
+import type UserModel from './user'
+import {RIGHTS, type Right} from '@/models/constants/rights'
 
 export default class UserShareBaseModel extends AbstractModel {
+	userId: UserModel['id']
+	right: Right
+
+	created: Date
+	updated: Date
+
 	constructor(data) {
 		super(data)
 		this.created = new Date(this.created)
@@ -10,7 +18,7 @@ export default class UserShareBaseModel extends AbstractModel {
 	defaults() {
 		return {
 			userId: '',
-			right: 0,
+			right: RIGHTS.READ,
 
 			created: null,
 			updated: null,

src/modules/parseTaskText.test.ts

@@ -3,7 +3,7 @@ import {beforeEach, afterEach, describe, it, expect, vi} from 'vitest'
 import {parseTaskText} from './parseTaskText'
 import {getDateFromText, getDateFromTextIn} from '../helpers/time/parseDate'
 import {calculateDayInterval} from '../helpers/time/calculateDayInterval'
-import priorities from '../models/constants/priorities.json'
+import {PRIORITIES} from '@/models/constants/priorities.ts'
 
 describe('Parse Task Text', () => {
 	beforeEach(() => {
@@ -490,12 +490,12 @@ describe('Parse Task Text', () => {
 	})
 
 	describe('Priority', () => {
-		for (const p in priorities) {
+		for (const p in PRIORITIES) {
 			it(`should parse priority ${p}`, () => {
-				const result = parseTaskText(`Lorem Ipsum !${priorities[p]}`)
+				const result = parseTaskText(`Lorem Ipsum !${PRIORITIES[p]}`)
 
 				expect(result.text).toBe('Lorem Ipsum')
-				expect(result.priority).toBe(priorities[p])
+				expect(result.priority).toBe(PRIORITIES[p])
 			})
 		}
 		it(`should not parse an invalid priority`, () => {

src/modules/parseTaskText.ts

@@ -1,5 +1,5 @@
 import {parseDate} from '../helpers/time/parseDate'
-import _priorities from '../models/constants/priorities.json'
+import {PRIORITIES} from '@/models/constants/priorities'
 
 const VIKUNJA_PREFIXES: Prefixes = {
 	label: '*',
@@ -27,16 +27,7 @@ export const PREFIXES = {
 	[PrefixMode.Todoist]: TODOIST_PREFIXES,
 }
 
-const priorities: Priorites = _priorities
-
-interface Priorites {
-	UNSET: number,
-	LOW: number,
-	MEDIUM: number,
-	HIGH: number,
-	URGENT: number,
-	DO_NOW: number,
-}
+const priorities = PRIORITIES
 
 enum RepeatType {
 	Hours = 'hours',

src/services/abstractService.ts

@@ -1,8 +1,17 @@
-import axios from 'axios'
+import axios, {Method} from 'axios'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getToken} from '@/helpers/auth'
+import AbstractModel from '@/models/abstractModel'
 
-function convertObject(o) {
+interface Paths {
+	create : string
+	get : string
+	getAll : string
+	update : string
+	delete : string
+}
+
+function convertObject(o: Record<string, unknown>) {
 	if (o instanceof Date) {
 		return o.toISOString()
 	}
@@ -10,7 +19,7 @@ function convertObject(o) {
 	return o
 }
 
-function prepareParams(params) {
+function prepareParams(params: Record<string, unknown | any[]>) {
 	if (typeof params !== 'object') {
 		return params
 	}
@@ -27,16 +36,16 @@ function prepareParams(params) {
 	return objectToSnakeCase(params)
 }
 
-export default class AbstractService {
+export default class AbstractService<Model extends AbstractModel> {
 
 	/////////////////////////////
 	// Initial variable definitions
 	///////////////////////////
 
-	http = null
+	http
 	loading = false
 	uploadProgress = 0
-	paths = {
+	paths: Paths = {
 		create: '',
 		get: '',
 		getAll: '',
@@ -53,14 +62,12 @@ export default class AbstractService {
 
 	/**
 	 * The abstract constructor.
-	 * @param [paths] An object with all paths. Default values are specified above.
+	 * @param [paths] An object with all paths.
 	 */
-	constructor(paths) {
+	constructor(paths : Partial<Paths> = {}) {
 		this.http = axios.create({
 			baseURL: window.API_URL,
-			headers: {
-				'Content-Type': 'application/json',
-			},
+			headers: { 'Content-Type': 'application/json' },
 		})
 
 		// Set the interceptors to process every request
@@ -94,38 +101,28 @@ export default class AbstractService {
 			this.http.defaults.headers.common['Authorization'] = `Bearer ${token}`
 		}
 
-		if (paths) {
-			this.paths = {
-				create: paths.create !== undefined ? paths.create : '',
-				get: paths.get !== undefined ? paths.get : '',
-				getAll: paths.getAll !== undefined ? paths.getAll : '',
-				update: paths.update !== undefined ? paths.update : '',
-				delete: paths.delete !== undefined ? paths.delete : '',
-			}
-		}
+
+		Object.assign(this.paths, paths)
 	}
 
 	/**
 	 * Whether or not to use the create interceptor which processes a request payload into json
-	 * @returns {boolean}
 	 */
-	useCreateInterceptor() {
+	useCreateInterceptor(): boolean {
 		return true
 	}
 
 	/**
 	 * Whether or not to use the update interceptor which processes a request payload into json
-	 * @returns {boolean}
 	 */
-	useUpdateInterceptor() {
+	useUpdateInterceptor(): boolean {
 		return true
 	}
 
 	/**
 	 * Whether or not to use the delete interceptor which processes a request payload into json
-	 * @returns {boolean}
 	 */
-	useDeleteInterceptor() {
+	useDeleteInterceptor(): boolean {
 		return true
 	}
 
@@ -135,11 +132,9 @@ export default class AbstractService {
 
 	/**
 	 * Returns an object with all route parameters and their values.
-	 * @param route
-	 * @returns object
 	 */
-	getRouteReplacements(route, parameters = {}) {
-		const replace$$1 = {}
+	getRouteReplacements(route : string, parameters = {}) {
+		const replace$$1: {} = {}
 		let pattern = this.getRouteParameterPattern()
 		pattern = new RegExp(pattern instanceof RegExp ? pattern.source : pattern, 'g')
 
@@ -152,22 +147,18 @@ export default class AbstractService {
 
 	/**
 	 * Holds the replacement pattern for url paths, can be overwritten by implementations.
-	 * @return {RegExp}
 	 */
-	getRouteParameterPattern() {
+	getRouteParameterPattern(): RegExp {
 		return /{([^}]+)}/
 	}
 
 	/**
 	 * Returns a fully-ready-ready-to-make-a-request-to route with replaced parameters.
-	 * @param path
-	 * @param pathparams
-	 * @return string
 	 */
-	getReplacedRoute(path, pathparams) {
+	getReplacedRoute(path : string, pathparams : {}) : string {
 		const replacements = this.getRouteReplacements(path, pathparams)
 		return Object.entries(replacements).reduce(
-			(result, [parameter, value]) => result.replace(parameter, value),
+			(result, [parameter, value]) => result.replace(parameter, value as string),
 			path,
 		)
 	}
@@ -178,9 +169,8 @@ export default class AbstractService {
 	 * case the api returns a response in < 100ms.
 	 * But because the timeout is created using setTimeout, it will still trigger even if the request is
 	 * already finished, so we return a method to call in that case.
-	 * @returns {Function}
 	 */
-	setLoading() {
+	setLoading(): Function {
 		const timeout = setTimeout(() => {
 			this.loading = true
 		}, 100)
@@ -200,46 +190,36 @@ export default class AbstractService {
 	/**
 	 * The modelFactory returns an model from an object.
 	 * This one here is the default one, usually the service definitions for a model will override this.
-	 * @param data
-	 * @returns {*}
 	 */
-	modelFactory(data) {
-		return data
+	modelFactory(data : Partial<Model>) {
+		return new AbstractModel(data)
 	}
 
 	/**
 	 * This is the model factory for get requests.
-	 * @param data
-	 * @return {*}
 	 */
-	modelGetFactory(data) {
+	modelGetFactory(data : Partial<Model>) {
 		return this.modelFactory(data)
 	}
 
 	/**
 	 * This is the model factory for get all requests.
-	 * @param data
-	 * @return {*}
 	 */
-	modelGetAllFactory(data) {
+	modelGetAllFactory(data : Partial<Model>) {
 		return this.modelFactory(data)
 	}
 
 	/**
 	 * This is the model factory for create requests.
-	 * @param data
-	 * @return {*}
 	 */
-	modelCreateFactory(data) {
+	modelCreateFactory(data : Partial<Model>) {
 		return this.modelFactory(data)
 	}
 
 	/**
 	 * This is the model factory for update requests.
-	 * @param data
-	 * @return {*}
 	 */
-	modelUpdateFactory(data) {
+	modelUpdateFactory(data : Partial<Model>) {
 		return this.modelFactory(data)
 	}
 
@@ -249,37 +229,29 @@ export default class AbstractService {
 
 	/**
 	 * Default preprocessor for get requests
-	 * @param model
-	 * @return {*}
 	 */
-	beforeGet(model) {
+	beforeGet(model : Model) {
 		return model
 	}
 
 	/**
 	 * Default preprocessor for create requests
-	 * @param model
-	 * @return {*}
 	 */
-	beforeCreate(model) {
+	beforeCreate(model : Model) {
 		return model
 	}
 
 	/**
 	 * Default preprocessor for update requests
-	 * @param model
-	 * @return {*}
 	 */
-	beforeUpdate(model) {
+	beforeUpdate(model : Model) {
 		return model
 	}
 
 	/**
 	 * Default preprocessor for delete requests
-	 * @param model
-	 * @return {*}
 	 */
-	beforeDelete(model) {
+	beforeDelete(model : Model) {
 		return model
 	}
 
@@ -291,9 +263,8 @@ export default class AbstractService {
 	 * Performs a get request to the url specified before.
 	 * @param model The model to use. The request path is built using the values from the model.
 	 * @param params Optional query parameters
-	 * @returns {Q.Promise<any>}
 	 */
-	get(model, params = {}) {
+	get(model : Model, params = {}) {
 		if (this.paths.get === '') {
 			throw new Error('This model is not able to get data.')
 		}
@@ -304,12 +275,8 @@ export default class AbstractService {
 	/**
 	 * This is a more abstract implementation which only does a get request.
 	 * Services which need more flexibility can use this.
-	 * @param url
-	 * @param model
-	 * @param params
-	 * @returns {Q.Promise<unknown>}
 	 */
-	async getM(url, model = {}, params = {}) {
+	async getM(url : string, model = new AbstractModel({}), params = {}) {
 		const cancel = this.setLoading()
 
 		model = this.beforeGet(model)
@@ -325,12 +292,12 @@ export default class AbstractService {
 		}
 	}
 
-	async getBlobUrl(url, method = 'GET', data = {}) {
+	async getBlobUrl(url : string, method = 'GET' as Method, data = {}) {
 		const response = await this.http({
-			url: url,
-			method: method,
+			url,
+			method,
 			responseType: 'blob',
-			data: data,
+			data,
 		})
 		return window.URL.createObjectURL(new Blob([response.data]))
 	}
@@ -341,9 +308,8 @@ export default class AbstractService {
 	 * @param model The model to use. The request path is built using the values from the model.
 	 * @param params Optional query parameters
 	 * @param page The page to get
-	 * @returns {Q.Promise<any>}
 	 */
-	async getAll(model = {}, params = {}, page = 1) {
+	async getAll(model : Model = new AbstractModel({}), params = {}, page = 1) {
 		if (this.paths.getAll === '') {
 			throw new Error('This model is not able to get data.')
 		}
@@ -374,10 +340,9 @@ export default class AbstractService {
 
 	/**
 	 * Performs a put request to the url specified before
-	 * @param model
 	 * @returns {Promise<any | never>}
 	 */
-	async create(model) {
+	async create(model : Model) {
 		if (this.paths.create === '') {
 			throw new Error('This model is not able to create data.')
 		}
@@ -400,11 +365,8 @@ export default class AbstractService {
 	/**
 	 * An abstract implementation to send post requests.
 	 * Services can use this to implement functions to do post requests other than using the update method.
-	 * @param url
-	 * @param model
-	 * @returns {Q.Promise<unknown>}
 	 */
-	async post(url, model) {
+	async post(url : string, model : Model) {
 		const cancel = this.setLoading()
 
 		try {
@@ -421,10 +383,8 @@ export default class AbstractService {
 
 	/**
 	 * Performs a post request to the update url
-	 * @param model
-	 * @returns {Q.Promise<any>}
 	 */
-	update(model) {
+	update(model : Model) {
 		if (this.paths.update === '') {
 			throw new Error('This model is not able to update data.')
 		}
@@ -435,10 +395,8 @@ export default class AbstractService {
 
 	/**
 	 * Performs a delete request to the update url
-	 * @param model
-	 * @returns {Q.Promise<any>}
 	 */
-	async delete(model) {
+	async delete(model : Model) {
 		if (this.paths.delete === '') {
 			throw new Error('This model is not able to delete data.')
 		}
@@ -459,21 +417,15 @@ export default class AbstractService {
 	 * @param url
 	 * @param file
 	 * @param fieldName The name of the field the file is uploaded to.
-	 * @returns {Q.Promise<unknown>}
 	 */
-	uploadFile(url, file, fieldName) {
+	uploadFile(url : string, file, fieldName : string) {
 		return this.uploadBlob(url, new Blob([file]), fieldName, file.name)
 	}
 
 	/**
 	 * Uploads a blob to a url.
-	 * @param url
-	 * @param blob
-	 * @param fieldName
-	 * @param filename
-	 * @returns {Q.Promise<unknown>}
 	 */
-	uploadBlob(url, blob, fieldName, filename) {
+	uploadBlob(url : string, blob: Blob, fieldName: string, filename : string) {
 		const data = new FormData()
 		data.append(fieldName, blob, filename)
 		return this.uploadFormData(url, data)
@@ -481,11 +433,8 @@ export default class AbstractService {
 
 	/**
 	 * Uploads a form data object.
-	 * @param url
-	 * @param formData
-	 * @returns {Q.Promise<unknown>}
 	 */
-	async uploadFormData(url, formData) {
+	async uploadFormData(url : string, formData: Record<string, unknown>) {
 		const cancel = this.setLoading()
 		try {
 			const response = await this.http.put(

src/services/accountDelete.ts

@@ -1,15 +1,15 @@
 import AbstractService from './abstractService'
 
 export default class AccountDeleteService extends AbstractService {
-	request(password) {
-		return this.post('/user/deletion/request', {password: password})
+	request(password: string) {
+		return this.post('/user/deletion/request', {password})
 	}
 	
-	confirm(token) {
-		return this.post('/user/deletion/confirm', {token: token})
+	confirm(token: string) {
+		return this.post('/user/deletion/confirm', {token})
 	}
 	
-	cancel(password) {
-		return this.post('/user/deletion/cancel', {password: password})
+	cancel(password: string) {
+		return this.post('/user/deletion/cancel', {password})
 	}
 }

src/services/backgroundUpload.ts

@@ -22,9 +22,9 @@ export default class BackgroundUploadService extends AbstractService {
 	 * @param file
 	 * @returns {Promise<any|never>}
 	 */
-	create(listId, file) {
+	create(listId: ListModel['id'], file) {
 		return this.uploadFile(
-			this.getReplacedRoute(this.paths.create, {listId: listId}),
+			this.getReplacedRoute(this.paths.create, {listId}),
 			file,
 			'background',
 		)

src/services/dataExport.ts

@@ -2,11 +2,11 @@ import AbstractService from './abstractService'
 import {downloadBlob} from '../helpers/downloadBlob'
 
 export default class DataExportService extends AbstractService {
-	request(password) {
-		return this.post('/user/export/request', {password: password})
+	request(password: string) {
+		return this.post('/user/export/request', {password})
 	}
 	
-	async download(password) {
+	async download(password: string) {
 		const clear = this.setLoading()
 		try {
 			const url = await this.getBlobUrl('/user/export/download', 'POST', {password})