chore: better variable typing

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/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

@@ -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

@@ -62,7 +62,7 @@
 </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

@@ -160,7 +160,7 @@
 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 ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
@@ -171,8 +171,9 @@ import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 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'
+import {getListTitle} from '@/helpers/getListTitle'
 
 const drag = ref(false)
 const dragOptions = {
@@ -224,7 +225,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]
 }
 

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

@@ -117,7 +117,8 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {i18n} from '@/i18n'
 
-import {format} from 'date-fns'
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
+
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -189,11 +190,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 +254,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')
 		},
 	},
 })

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/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

@@ -34,14 +34,14 @@
 </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'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)

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/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/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

@@ -30,7 +30,7 @@
 								{{ n.toText(userInfo) }}
 							</a>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -51,17 +51,18 @@ import {computed, onMounted, onUnmounted, ref} from 'vue'
 
 import NotificationService from '@/services/notification'
 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/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

@@ -139,7 +139,7 @@ export default defineComponent({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 +158,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 +355,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

@@ -174,15 +174,15 @@
 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 {colorIsDark} from '@/helpers/color/colorIsDark'
@@ -434,7 +434,7 @@ export default defineComponent({
 			this.hideCrateNewTask()
 		},
 		formatYear(date) {
-			return this.format(date, 'MMMM, yyyy')
+			return this.formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -36,7 +36,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
@@ -142,11 +142,13 @@ 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'
 
 export default defineComponent({
 	name: 'attachments',
@@ -220,7 +222,10 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+		downloadAttachment(attachment: AttachmentModel) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -230,7 +235,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files) {
+		uploadFiles(files: FileModel[]) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		async deleteAttachment() {

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,6 +162,8 @@ 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: {
@@ -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

@@ -28,7 +28,7 @@
 </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'
 
@@ -36,7 +36,7 @@ import User from '@/components/misc/user.vue'
 import Multiselect from '@/components/input/multiselect.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 +95,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

@@ -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'
 

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/relatedTasks.vue

@@ -142,8 +142,7 @@ 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 Multiselect from '@/components/input/multiselect.vue'
 
@@ -154,7 +153,7 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
 			newTaskRelationKind: 'related',
 			taskRelationService: new TaskRelationService(),
@@ -217,7 +216,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

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, onMounted, watch} from 'vue'
+import {type PropType, ref, onMounted, watch} from 'vue'
 
 import Datepicker from '@/components/input/datepicker.vue'
 

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

@@ -45,7 +45,7 @@
 				class="is-italic"
 				@click.prevent.stop="showDefer = !showDefer"
 				v-if="+new Date(task.dueDate) > 0"
-				v-tooltip="formatDate(task.dueDate)"
+				v-tooltip="formatDateLong(task.dueDate)"
 				:aria-expanded="showDefer ? 'true' : 'false'"
 			>
 				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
@@ -95,15 +95,16 @@
 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 Labels from './labels.vue'
+import User from '../../misc/user.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 {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
+import ChecklistSummary from './checklist-summary.vue'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -178,7 +179,10 @@ 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 +207,7 @@ export default defineComponent({
 			}
 		},
 
-		undoDone(checked) {
+		undoDone(checked: boolean) {
 			this.task.done = !this.task.done
 			this.markAsDone(!checked)
 		},

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/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})

src/views/filters/FilterDelete.vue

@@ -27,7 +27,7 @@ const route = useRoute()
 
 async function deleteSavedFilter() {
 	// We assume the listId in the route is the pseudolist
-	const savedFilterId = getSavedFilterIdFromListId(route.params.listId)
+	const savedFilterId = getSavedFilterIdFromListId(Number((route.params.listId as string)))
 
 	const filterService = new SavedFilterService()
 	const filter = new SavedFilterModel({id: savedFilterId})

src/views/filters/FilterEdit.vue

@@ -52,11 +52,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef, computed, watch } from 'vue'
+import { ref, shallowRef, computed, watch, unref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { store } from '@/store'
 import { success }  from '@/message'
 import { useI18n } from 'vue-i18n'
+import type {MaybeRef} from '@vueuse/core'
 
 import {default as Editor} from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -67,10 +68,11 @@ import SavedFilterService from '@/services/savedFilter'
 
 import {objectToSnakeCase} from '@/helpers/case'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+import type ListModel from '@/models/list'
 
 const { t } = useI18n({useScope: 'global'})
 
-function useSavedFilter(listId) {
+function useSavedFilter(listId: MaybeRef<ListModel['id']>) {
 	const filterService = shallowRef(new SavedFilterService())
 
 	const filter = ref(new SavedFilterModel())
@@ -82,9 +84,9 @@ function useSavedFilter(listId) {
 	})
 	
 	// loadSavedFilter
-	watch(listId, async () => {
+	watch(() => unref(listId), async () => {
 		// We assume the listId in the route is the pseudolist
-		const savedFilterId = getSavedFilterIdFromListId(route.params.listId)
+		const savedFilterId = getSavedFilterIdFromListId(Number(route.params.listId as string))
 
 		filter.value = new SavedFilterModel({id: savedFilterId })
 		const response = await filterService.value.get(filter.value)
@@ -110,7 +112,7 @@ function useSavedFilter(listId) {
 }
 
 const route = useRoute()
-const listId =	computed(() => route.params.listId)
+const listId =	computed(() => Number(route.params.listId as string))
 
 const {
 	save,

src/views/labels/ListLabels.vue

@@ -117,7 +117,8 @@ import LabelModel from '../../models/label'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 import AsyncEditor from '@/components/input/AsyncEditor'
-import ColorPicker from '@/components/input/colorPicker'
+import ColorPicker from '@/components/input/colorPicker.vue'
+import { setTitle } from '@/helpers/setTitle'
 
 export default defineComponent({
 	name: 'ListLabels',
@@ -138,7 +139,7 @@ export default defineComponent({
 		this.$store.dispatch('labels/loadAllLabels')
 	},
 	mounted() {
-		this.setTitle(this.$t('label.title'))
+		setTitle(this.$t('label.title'))
 	},
 	computed: mapState({
 		userInfo: state => state.auth.info,
@@ -147,7 +148,7 @@ export default defineComponent({
 		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',
 	}),
 	methods: {
-		deleteLabel(label) {
+		deleteLabel(label: LabelModel) {
 			this.showDeleteModal = false
 			this.isLabelEdit = false
 			return this.$store.dispatch('labels/deleteLabel', label)
@@ -155,7 +156,7 @@ export default defineComponent({
 		editLabelSubmit() {
 			return this.$store.dispatch('labels/updateLabel', this.labelEditLabel)
 		},
-		editLabel(label) {
+		editLabel(label: LabelModel) {
 			if (label.createdBy.id !== this.userInfo.id) {
 				return
 			}
@@ -177,7 +178,7 @@ export default defineComponent({
 			this.editorActive = false
 			this.$nextTick(() => this.editorActive = true)
 		},
-		showDeleteDialoge(label) {
+		showDeleteDialoge(label: LabelModel) {
 			this.labelToDelete = label
 			this.showDeleteModal = true
 		},

src/views/labels/NewLabel.vue

@@ -38,9 +38,10 @@
 import {defineComponent} from 'vue'
 import LabelModel from '../../models/label'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '../../components/input/colorPicker'
+import ColorPicker from '../../components/input/colorPicker.vue'
 import {mapState} from 'vuex'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import { setTitle } from '@/helpers/setTitle'
 
 export default defineComponent({
 	name: 'NewLabel',
@@ -55,7 +56,7 @@ export default defineComponent({
 		ColorPicker,
 	},
 	mounted() {
-		this.setTitle(this.$t('label.create.title'))
+		setTitle(this.$t('label.create.title'))
 	},
 	computed: mapState({
 		loading: state => state[LOADING] && state[LOADING_MODULE] === 'labels',

src/views/list/ListKanban.vue

@@ -233,7 +233,7 @@ import cloneDeep from 'lodash.clonedeep'
 
 import BucketModel from '../../models/bucket'
 import {mapState} from 'vuex'
-import Rights from '../../models/constants/rights.json'
+import {RIGHTS as Rights} from '@/models/constants/rights'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import ListWrapper from './ListWrapper.vue'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'

src/views/list/ListList.vue

@@ -135,11 +135,11 @@
 import { ref, toRef, defineComponent } from 'vue'
 
 import ListWrapper from './ListWrapper.vue'
-import EditTask from '@/components/tasks/edit-task'
-import AddTask from '@/components/tasks/add-task'
-import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
+import EditTask from '@/components/tasks/edit-task.vue'
+import AddTask from '@/components/tasks/add-task.vue'
+import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
 import { useTaskList } from '@/composables/taskList'
-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 {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
@@ -148,8 +148,9 @@ import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
 
 import draggable from 'zhyswan-vuedraggable'
 import {calculateItemPosition} from '../../helpers/calculateItemPosition'
+import type TaskModel from '@/models/task'
 
-function sortTasks(tasks) {
+function sortTasks(tasks: TaskModel[]) {
 	if (tasks === null || tasks === []) {
 		return
 	}
@@ -264,7 +265,7 @@ export default defineComponent({
 		focusNewTaskInput() {
 			this.$refs.addTask.focusTaskInput()
 		},
-		updateTaskList( task ) {
+		updateTaskList(task: TaskModel) {
 			if ( this.isAlphabeticalSorting ) {
 				// reload tasks with current filter and sorting
 				this.loadTasks(1, undefined, undefined, true)
@@ -278,13 +279,13 @@ export default defineComponent({
 
 			this.$store.commit(HAS_TASKS, true)
 		},
-		editTask(id) {
+		editTask(id: TaskModel['id']) {
 			// Find the selected task and set it to the current object
 			let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
 			this.taskEditTask = theTask
 			this.isTaskEdit = true
 		},
-		getTaskById(id) {
+		getTaskById(id: TaskModel['id']) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === parseInt(id)) {
 					return this.tasks[t]
@@ -292,7 +293,7 @@ export default defineComponent({
 			}
 			return {} // FIXME: This should probably throw something to make it clear to the user noting was found
 		},
-		updateTasks(updatedTask) {
+		updateTasks(updatedTask: TaskModel) {
 			for (const t in this.tasks) {
 				if (this.tasks[t].id === updatedTask.id) {
 					this.tasks[t] = updatedTask

src/views/list/ListTable.vue

@@ -180,7 +180,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRef, computed, Ref } from 'vue'
+import { toRef, computed, type Ref } from 'vue'
 
 import { useStorage } from '@vueuse/core'
 
@@ -197,7 +197,7 @@ import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
 import { useTaskList } from '@/composables/taskList'
-import TaskModel from '@/models/task'
+import type TaskModel from '@/models/task'
 
 const ACTIVE_COLUMNS_DEFAULT = {
 	id: true,

src/views/list/NewList.vue

@@ -63,7 +63,7 @@ async function createNewList() {
 	}
 	showError.value = false
 
-	list.namespaceId = parseInt(route.params.namespaceId)
+	list.namespaceId = Number(route.params.namespaceId as string)
 	const newList = await store.dispatch('lists/createList', list)
 	await router.push({
 		name: 'list.index',

src/views/list/settings/archive.vue

@@ -12,8 +12,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-export default defineComponent({name: 'list-setting-archive'})
+export default {name: 'list-setting-archive'}
 </script>
 
 <script setup lang="ts">

src/views/list/settings/background.vue

@@ -83,6 +83,7 @@ import ListService from '@/services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import debounce from 'lodash.debounce'
+import { setTitle } from '@/helpers/setTitle'
 
 const SEARCH_DEBOUNCE = 300
 
@@ -114,7 +115,7 @@ export default defineComponent({
 		hasBackground: state => state.background !== null,
 	}),
 	created() {
-		this.setTitle(this.$t('list.background.title'))
+		setTitle(this.$t('list.background.title'))
 		// Show the default collection of backgrounds
 		this.newBackgroundSearch()
 	},

src/views/list/settings/edit.vue

@@ -75,6 +75,7 @@ import ListService from '@/services/list'
 import ColorPicker from '@/components/input/colorPicker.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
+import { setTitle } from '@/helpers/setTitle'
 
 export default defineComponent({
 	name: 'list-setting-edit',
@@ -106,7 +107,7 @@ export default defineComponent({
 		async save() {
 			await this.$store.dispatch('lists/updateList', this.list)
 			await this.$store.dispatch(CURRENT_LIST, {list: this.list})
-			this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
+			setTitle(this.$t('list.edit.title', {list: this.list.title}))
 			this.$message.success({message: this.$t('list.edit.success')})
 			this.$router.back()
 		},

src/views/list/settings/share.vue

@@ -23,11 +23,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-	name: 'list-setting-share',
-})
+export default {name: 'list-setting-share'}
 </script>
 
 <script lang="ts" setup>

src/views/migrator/MigrateService.vue

@@ -48,7 +48,7 @@
 		</template>
 		<div v-else-if="lastMigrationDate">
 			<p>
-				{{ $t('migrate.alreadyMigrated1', {name: migrator.name, date: formatDate(lastMigrationDate)}) }}<br/>
+				{{ $t('migrate.alreadyMigrated1', {name: migrator.name, date: formatDateLong(lastMigrationDate)}) }}<br/>
 				{{ $t('migrate.alreadyMigrated2') }}
 			</p>
 			<div class="buttons">
@@ -71,7 +71,8 @@ import {defineComponent} from 'vue'
 import AbstractMigrationService from '@/services/migrator/abstractMigration'
 import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
 import Logo from '@/assets/logo.svg?component'
-import Message from '@/components/misc/message'
+import Message from '@/components/misc/message.vue'
+import { setTitle } from '@/helpers/setTitle'
 
 import {MIGRATORS} from './migrators'
 
@@ -114,7 +115,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.setTitle(this.$t('migrate.titleService', {name: this.migrator.name}))
+		setTitle(this.$t('migrate.titleService', {name: this.migrator.name}))
 	},
 
 	methods: {

src/views/namespaces/ListNamespaces.vue

@@ -75,6 +75,8 @@ import {mapState} from 'vuex'
 import Fancycheckbox from '../../components/input/fancycheckbox.vue'
 import {LOADING} from '@/store/mutation-types'
 import ListCard from '@/components/list/partials/list-card.vue'
+import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
+import { setTitle } from '@/helpers/setTitle'
 
 export default defineComponent({
 	name: 'ListNamespaces',
@@ -88,7 +90,7 @@ export default defineComponent({
 		}
 	},
 	mounted() {
-		this.setTitle(this.$t('namespace.title'))
+		setTitle(this.$t('namespace.title'))
 	},
 	computed: mapState({
 		namespaces(state) {
@@ -101,6 +103,7 @@ export default defineComponent({
 		loading: LOADING,
 	}),
 	methods: {
+		getNamespaceTitle,
 		saveShowArchivedState() {
 			localStorage.setItem('showArchived', JSON.stringify(this.showArchived))
 		},

src/views/namespaces/NewNamespace.vue

@@ -43,11 +43,12 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import Message from '@/components/misc/message'
+import Message from '@/components/misc/message.vue'
 import NamespaceModel from '../../models/namespace'
 import NamespaceService from '../../services/namespace'
 import CreateEdit from '@/components/misc/create-edit.vue'
-import ColorPicker from '../../components/input/colorPicker'
+import ColorPicker from '../../components/input/colorPicker.vue'
+import { setTitle } from '@/helpers/setTitle'
 
 export default defineComponent({
 	name: 'NewNamespace',
@@ -64,7 +65,7 @@ export default defineComponent({
 		CreateEdit,
 	},
 	mounted() {
-		this.setTitle(this.$t('namespace.create.title'))
+		setTitle(this.$t('namespace.create.title'))
 	},
 	methods: {
 		async newNamespace() {