feat: improve types

Resolves #2176

cypress.config.ts

@@ -1,23 +1,25 @@
-import { defineConfig } from 'cypress'
+import {defineConfig} from 'cypress'
 
 export default defineConfig({
-  env: {
-    API_URL: 'http://localhost:3456/api/v1',
-    TEST_SECRET: 'averyLongSecretToSe33dtheDB',
-  },
-  video: false,
-  retries: {
-    runMode: 2,
-  },
-  projectId: '181c7x',
-  e2e: {
-    baseUrl: 'http://localhost:4173',
-    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-  },
+	env: {
+		API_URL: 'http://localhost:3456/api/v1',
+		TEST_SECRET: 'averyLongSecretToSe33dtheDB',
+	},
+	video: false,
+	retries: {
+		runMode: 2,
+	},
+	projectId: '181c7x',
+	e2e: {
+		baseUrl: 'http://localhost:4173',
+		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+	},
 	component: {
-    devServer: {
-      framework: 'vue',
-      bundler: 'vite',
-    },
-  },
+		devServer: {
+			framework: 'vue',
+			bundler: 'vite',
+		},
+	},
+	viewportWidth: 1600,
+	viewportHeight: 900,
 })

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

@@ -91,7 +91,9 @@ describe('List View List', () => {
 		cy.visit('/lists/1/list')
 
 		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[99].title)
+			.should('contain', tasks[1].title)
+		cy.get('.tasks-container .tasks')
+			.should('not.contain', tasks[99].title)
 
 		cy.get('.card-content .pagination .pagination-link')
 			.contains('2')
@@ -100,8 +102,8 @@ describe('List View List', () => {
 		cy.url()
 			.should('contain', '?page=2')
 		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[1].title)
+			.should('contain', tasks[99].title)
 		cy.get('.tasks-container .tasks')
-			.should('not.contain', tasks[99].title)
+			.should('not.contain', tasks[1].title)
 	})
 })

cypress/e2e/task/task.spec.ts

@@ -340,6 +340,7 @@ describe('Task', () => {
 				list_id: 1,
 			})
 			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 

cypress/factories/task.ts

@@ -15,6 +15,7 @@ export class TaskFactory extends Factory {
 			list_id: 1,
 			created_by_id: 1,
 			index: '{increment}',
+			position: '{increment}',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

cypress/factories/user.ts

@@ -14,6 +14,7 @@ export class UserFactory extends Factory {
             username: faker.lorem.word(10) + faker.datatype.uuid(),
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
+			issuer: 'local',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

package.json

@@ -19,80 +19,80 @@
   },
   "dependencies": {
     "@github/hotkey": "2.0.0",
-    "@kyvg/vue3-notification": "2.3.4",
-    "@sentry/tracing": "7.5.0",
-    "@sentry/vue": "7.5.0",
+    "@kyvg/vue3-notification": "2.3.5",
+    "@sentry/tracing": "7.7.0",
+    "@sentry/vue": "7.7.0",
     "@types/is-touch-device": "1.0.0",
     "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "8.7.5",
-    "@vueuse/router": "8.7.5",
+    "@vueuse/core": "8.9.4",
+    "@vueuse/router": "8.9.4",
     "blurhash": "1.1.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "date-fns": "2.28.0",
-    "dompurify": "2.3.8",
+    "dompurify": "2.3.10",
     "easymde": "2.16.1",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
-    "highlight.js": "11.5.1",
+    "highlight.js": "11.6.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.17",
+    "marked": "4.0.18",
     "minimist": "1.2.6",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "ufo": "0.8.4",
+    "ufo": "0.8.5",
     "v-tooltip": "4.0.0-beta.17",
     "vue": "3.2.37",
     "vue-advanced-cropper": "2.8.3",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.6",
-    "vue-i18n": "9.2.0-beta.36",
-    "vue-router": "4.1.0",
+    "vue-i18n": "9.2.0-beta.40",
+    "vue-router": "4.1.2",
     "vuex": "4.0.2",
     "workbox-precaching": "6.5.3",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "2.2.2",
-    "@cypress/vue": "3.1.1",
+    "@cypress/vite-dev-server": "3.0.0",
+    "@cypress/vue": "4.0.0",
     "@faker-js/faker": "7.3.0",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.30.4",
-    "@typescript-eslint/parser": "5.30.4",
-    "@vitejs/plugin-legacy": "1.8.2",
-    "@vitejs/plugin-vue": "2.3.3",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
+    "@vitejs/plugin-legacy": "2.0.0",
+    "@vitejs/plugin-vue": "3.0.1",
     "@vue/eslint-config-typescript": "11.0.0",
-    "@vue/test-utils": "2.0.0-rc.18",
+    "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.7",
     "axios": "0.27.2",
     "browserslist": "4.21.1",
     "caniuse-lite": "1.0.30001363",
-    "cypress": "10.3.0",
-    "esbuild": "0.14.48",
-    "eslint": "8.19.0",
-    "eslint-plugin-vue": "9.1.1",
+    "cypress": "10.3.1",
+    "esbuild": "0.14.49",
+    "eslint": "8.20.0",
+    "eslint-plugin-vue": "9.2.0",
     "express": "4.18.1",
-    "happy-dom": "6.0.0",
-    "netlify-cli": "10.3.1",
+    "happy-dom": "6.0.4",
+    "netlify-cli": "10.9.0",
     "postcss": "8.4.14",
     "postcss-preset-env": "7.7.2",
-    "rollup": "2.75.7",
-    "rollup-plugin-visualizer": "5.6.0",
+    "rollup": "2.77.0",
+    "rollup-plugin-visualizer": "5.7.1",
     "sass": "1.53.0",
     "typescript": "4.7.4",
-    "vite": "2.9.13",
-    "vite-plugin-pwa": "0.12.2",
+    "vite": "3.0.2",
+    "vite-plugin-pwa": "0.12.3",
     "vite-svg-loader": "3.4.0",
-    "vitest": "0.17.0",
-    "vue-tsc": "0.38.2",
+    "vitest": "0.18.1",
+    "vue-tsc": "0.38.9",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.3"
   },

src/App.vue

@@ -10,14 +10,12 @@
 		</no-auth-wrapper>
 		<Notification/>
 
-		<transition name="fade">
-			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
-		</transition>
+		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 	</ready>
 </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

@@ -5,18 +5,14 @@
 		:class="{ 'base-button--type-button': isButton }"
 		v-bind="elementBindings"
 		:disabled="disabled || undefined"
+		ref="button"
 	>
 		<slot />
 	</component>
 </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>
@@ -89,6 +85,15 @@ watchEffect(() => {
 })
 
 const isButton = computed(() => componentNodeName.value === 'button')
+
+const button = ref()
+function focus() {
+	button.value.focus()
+}
+
+defineExpose({
+	focus,
+})
 </script>
 
 <style lang="scss">

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/date/datepickerWithRange.vue

@@ -85,7 +85,12 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['dateChanged'])
+const emit = defineEmits(['dateChanged', 'update:modelValue'])
+const props = defineProps({
+	modelValue: {
+		required: false,
+	},
+})
 
 // FIXME: This seems to always contain the default value - that breaks the picker
 const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
@@ -108,11 +113,22 @@ const flatpickrRange = ref('')
 const from = ref('')
 const to = ref('')
 
+watch(
+	() => props.modelValue,
+	newValue => {
+		from.value = newValue.dateFrom
+		to.value = newValue.dateTo
+		flatpickrRange.value = `${from.value} to ${to.value}`
+	},
+)
+
 function emitChanged() {
-	emit('dateChanged', {
+	const args = {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
-	})
+	}
+	emit('dateChanged', args)
+	emit('update:modelValue', args)
 }
 
 watch(

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

@@ -38,16 +38,14 @@
 					</keep-alive>
 				</router-view>
 
-				<transition name="modal">
-					<modal
-						v-if="currentModal"
-						@close="closeModal()"
-						variant="scrolling"
-						class="task-detail-view-modal"
-					>
-						<component :is="currentModal"/>
-					</modal>
-				</transition>
+				<modal
+					v-if="currentModal"
+					@close="closeModal()"
+					variant="scrolling"
+					class="task-detail-view-modal"
+				>
+					<component :is="currentModal"/>
+				</modal>
 
 				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
@@ -62,7 +60,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

@@ -88,13 +88,12 @@
 						@end="saveListPosition"
 						handle=".handle"
 						:disabled="n.id < 0 || undefined"
-						tag="transition-group"
+						tag="ul"
 						item-key="id"
 						:data-namespace-id="n.id"
 						:data-namespace-index="nk"
 						:component-data="{
-							type: 'transition',
-							tag: 'ul',
+							type: 'transition-group',
 							name: !drag ? 'flip-list' : null,
 							class: [
 								'menu-list can-be-hidden',
@@ -144,7 +143,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 BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -155,9 +154,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 = {
@@ -209,7 +209,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]
 }
 
@@ -555,8 +555,4 @@ $vikunja-nav-selected-width: 0.4rem;
 .namespaces-list.loader-container.is-loading {
 	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
-
-a.dropdown-item:hover {
-	background: var(--dropdown-item-hover-background-color) !important;
-}
 </style>

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

@@ -76,7 +76,7 @@
 				/>
 
 				<x-button
-					class="datepicker__close-button is-fullwidth"
+					class="datepicker__close-button"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"
@@ -97,7 +97,7 @@ import {i18n} from '@/i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-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'
@@ -170,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
@@ -233,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')
 		},
 	},
 })

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

@@ -89,6 +89,15 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
+function elementInResults(elem: string | any, label: string, query: string): boolean {
+	// Don't make create available if we have an exact match in our search results.
+	if (label !== '') {
+		return elem[label] === query
+	}
+
+	return elem === query
+}
+
 export default defineComponent({
 	name: 'multiselect',
 	components: {
@@ -222,14 +231,12 @@ export default defineComponent({
 			)
 		},
 		creatableAvailable() {
-			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
-				// Don't make create available if we have an exact match in our search results.
-				if (this.label !== '') {
-					return elem[this.label] === this.query
-				}
+			const hasResult = this.filteredSearchResults.some(elem => elementInResults(elem, this.label, this.query))
+			const hasQueryAlreadyAdded = Array.isArray(this.internalValue) && this.internalValue.some(elem => elementInResults(elem, this.label, this.query))
 
-				return elem === this.query
-			})
+			return this.creatable 
+				&& this.query !== '' 
+				&& !(hasResult || hasQueryAlreadyAdded)
 		},
 		filteredSearchResults() {
 			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
@@ -352,6 +359,12 @@ export default defineComponent({
 			}
 
 			if (!this.creatableAvailable) {
+				// Check if there's an exact match for our search term
+				const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
+				if(exactMatch) {
+					this.select(exactMatch)
+				}
+
 				return
 			}
 

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

@@ -56,12 +56,13 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				class="dropdown-item has-no-shadow"
+				class="has-no-shadow"
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
 				:subscription="list.subscription"
 				@change="sub => subscription = sub"
+				type="dropdown"
 			/>
 			<dropdown-item
 				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
@@ -83,7 +84,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/filter-popup.vue

@@ -25,7 +25,6 @@
 			v-model="value"
 			ref="filters"
 			class="filter-popup"
-			:class="{'is-open': isOpen}"
 		/>
 	</modal>
 </template>

src/components/list/partials/filters.vue

@@ -67,7 +67,9 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
-				<datepicker-with-range @dateChanged="values => setDateFilter('due_date', values)">
+				<datepicker-with-range
+					@dateChanged="values => setDateFilter('due_date', values)"
+					v-model="filters.dueDate">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -79,7 +81,9 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
-				<datepicker-with-range @dateChanged="values => setDateFilter('start_date', values)">
+				<datepicker-with-range
+					@dateChanged="values => setDateFilter('start_date', values)"
+					v-model="filters.startDate">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -91,7 +95,9 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
-				<datepicker-with-range @dateChanged="values => setDateFilter('end_date', values)">
+				<datepicker-with-range
+					@dateChanged="values => setDateFilter('end_date', values)"
+					v-model="filters.endDate">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -103,7 +109,9 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
-				<datepicker-with-range @dateChanged="values => setDateFilter('reminders', values)">
+				<datepicker-with-range
+					@dateChanged="values => setDateFilter('reminders', values)"
+					v-model="filters.reminders">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -137,7 +145,8 @@
 			</div>
 		</div>
 
-		<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
+		<template
+			v-if="$route.name === 'filters.create' || $route.name === 'list.edit' || $route.name === 'filter.settings.edit'">
 			<div class="field">
 				<label class="label">{{ $t('list.lists') }}</label>
 				<div class="control">
@@ -177,8 +186,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'
@@ -193,6 +202,7 @@ import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
 import {getDefaultParams} from '@/composables/taskList'
+import {camelCase} from 'camel-case'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
@@ -368,6 +378,8 @@ export default defineComponent({
 					this.params.filter_comparator.push('less_equals')
 					this.params.filter_value.push(dateTo)
 				}
+
+				this.filters[camelCase(filterName)] = {dateFrom, dateTo}
 				this.change()
 				return
 			}
@@ -397,9 +409,16 @@ export default defineComponent({
 			}
 
 			if (foundDateStart !== false && foundDateEnd !== false) {
-				const start = new Date(this.params.filter_value[foundDateStart])
-				const end = new Date(this.params.filter_value[foundDateEnd])
-				this.filters[variableName] = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()} to ${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
+				const startDate = new Date(this.params.filter_value[foundDateStart])
+				const endDate = new Date(this.params.filter_value[foundDateEnd])
+				this.filters[variableName] = {
+					dateFrom: !isNaN(startDate)
+						? `${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`
+						: this.params.filter_value[foundDateStart],
+					dateTo: !isNaN(endDate)
+						? `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`
+						: this.params.filter_value[foundDateEnd],
+				}
 			}
 		},
 		setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {

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

@@ -36,14 +36,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'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

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/dropdown-item.vue

@@ -1,25 +1,95 @@
 <template>
-	<router-link
+	<component
+		:is="componentNodeName"
+		v-bind="elementBindings"
 		:to="to"
 		class="dropdown-item">
-		<span class="icon" v-if="icon !== ''">
+		<span class="icon" v-if="icon">
 			<icon :icon="icon"/>
 		</span>
 		<span>
 			<slot></slot>
 		</span>
-	</router-link>
+	</component>
 </template>
 
 <script lang="ts" setup>
-defineProps({
-	to: {
-		required: true,
-	},
-	icon: {
-		type: String,
-		required: false,
-		default: '',
-	},
+import {ref, useAttrs, watchEffect} from 'vue'
+
+const props = defineProps<{
+	to?: object,
+	icon?: string | string[],
+}>()
+
+const componentNodeName = ref<Node['nodeName']>('a')
+const elementBindings = ref({})
+
+const attrs = useAttrs()
+watchEffect(() => {
+	let nodeName = 'a'
+
+	if (props.to) {
+		nodeName = 'router-link'
+	}
+
+	if ('href' in attrs) {
+		nodeName = 'BaseButton'
+	}
+
+	componentNodeName.value = nodeName
+	elementBindings.value = {
+		...attrs,
+	}
 })
 </script>
+
+<style scoped lang="scss">
+.dropdown-item {
+	color: var(--text);
+	display: block;
+	font-size: 0.875rem;
+	line-height: 1.5;
+	padding: $item-padding;
+	position: relative;
+}
+
+a.dropdown-item,
+button.dropdown-item {
+	text-align: inherit;
+	white-space: nowrap;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: left !important;
+
+	&:hover {
+		background-color: var(--grey-100) !important;
+	}
+
+	&.is-active {
+		background-color: var(--link);
+		color: var(--link-invert);
+	}
+
+	.icon {
+		padding-right: .5rem;
+	}
+
+	.icon:not(.has-text-success) {
+		color: var(--grey-300) !important;
+	}
+
+	&.has-text-danger .icon {
+		color: var(--danger) !important;
+	}
+
+	&.is-disabled {
+		cursor: not-allowed;
+
+		&:hover {
+			background-color: transparent;
+		}
+	}
+}
+
+</style>

src/components/misc/dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="dropdown is-right is-active" ref="dropdown">
+	<div class="dropdown" ref="dropdown">
 		<slot name="trigger" :close="close" :toggleOpen="toggleOpen">
 			<BaseButton class="dropdown-trigger is-flex" @click="toggleOpen">
 				<icon :icon="triggerIcon" class="icon"/>
@@ -51,7 +51,36 @@ onClickOutside(dropdown, (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-.dropdown-menu  .dropdown-content {
+.dropdown {
+	display: inline-flex;
+	position: relative;
+	vertical-align: top;
+}
+
+.dropdown-menu {
+	min-width: 12rem;
+	padding-top: 4px;
+	position: absolute;
+	top: 100%;
+	z-index: 20;
+	display: block;
+	left: auto;
+	right: 0;
+}
+
+.dropdown-content {
+	background-color: var(--scheme-main);
+	border-radius: $radius;
+	padding-bottom: .5rem;
+	padding-top: .5rem;
 	box-shadow: var(--shadow-md);
 }
-</style>
+
+.dropdown-divider {
+	background-color: var(--border-light);
+	border: none;
+	display: block;
+	height: 1px;
+	margin: 0.5rem 0;
+}
+</style>

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

@@ -1,15 +1,16 @@
 <template>
 	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
-		<transition name="modal">
+		<transition :name="transitionName">
 			<section
 				v-if="enabled"
 				class="modal-mask"
 				:class="[
-				{ 'has-overflow': overflow },
-				variant,
-			]"
+					{ 'has-overflow': overflow },
+					variant,
+				]"
 				ref="modal"
+				v-bind="attrs"
 			>
 				<div
 					class="modal-container"
@@ -62,11 +63,18 @@
 	</Teleport>
 </template>
 
+<script lang="ts">
+export default {
+	inheritAttrs: false,
+}
+</script>
+
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {onUnmounted, ref, watch} from 'vue'
+import {onUnmounted, ref, useAttrs, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
+
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
@@ -81,6 +89,8 @@ const props = withDefaults(defineProps<{
 
 defineEmits(['close', 'submit'])
 
+const attrs = useAttrs()
+
 const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 

src/components/misc/pagination.vue

@@ -69,9 +69,9 @@ function createPagination(totalPages: number, currentPage: number) {
 	return pages
 }
 
-function getRouteForPagination(page = 1, type = 'list') {
+function getRouteForPagination(page = 1, type = null) {
 	return {
-		name: 'list.' + type,
+		name: type,
 		params: {
 			type: type,
 		},

src/components/misc/subscription.vue

@@ -1,6 +1,6 @@
 <template>
 	<x-button
-		v-if="isButton"
+		v-if="type === 'button'"
 		variant="secondary"
 		:icon="iconName"
 		v-tooltip="tooltipText"
@@ -9,6 +9,15 @@
 	>
 		{{ buttonText }}
 	</x-button>
+	<DropdownItem
+		v-else-if="type === 'dropdown'"
+		v-tooltip="tooltipText"
+		@click="changeSubscription"
+		:class="{'is-disabled': disabled}"
+		:icon="iconName"
+	>
+		{{ buttonText }}
+	</DropdownItem>
 	<BaseButton
 		v-else
 		v-tooltip="tooltipText"
@@ -23,26 +32,32 @@
 </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'
+import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 import SubscriptionService from '@/services/subscription'
 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,
+	},
+	type: {
+		type: String as PropType<'button' | 'dropdown' | 'null'>,
+		default: 'button',
+	},
 })
 
 const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

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

@@ -34,12 +34,13 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				class="dropdown-item has-no-shadow"
+				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
 				:subscription="subscription"
 				@change="sub => subscription = sub"
+				type="dropdown"
 			/>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"

src/components/notifications/notifications.vue

@@ -30,7 +30,7 @@
 								{{ n.toText(userInfo) }}
 							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -52,17 +52,18 @@ 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

@@ -526,7 +526,7 @@ export default defineComponent({
 
 		.result {
 			&-title {
-				background: var(--grey-50);
+				background: var(--grey-100);
 				padding: .5rem;
 				display: block;
 				font-size: .75rem;
@@ -549,7 +549,7 @@ export default defineComponent({
 					cursor: pointer;
 
 					&:focus, &:hover {
-						background: var(--grey-50);
+						background: var(--grey-100);
 						box-shadow: none !important;
 					}
 

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'
@@ -200,7 +200,7 @@ function handleEnter(e: KeyboardEvent) {
 }
 
 function focusTaskInput() {
-	newTaskInput.value.focus()
+	newTaskInput.value?.focus()
 }
 
 defineExpose({

src/components/tasks/gantt-component.vue

@@ -16,7 +16,7 @@
 						class="month"
 						v-for="(m, mk) in days[yk]"
 					>
-						{{ formatYear(new Date(`${yk}-${parseInt(mk) + 1}-01`)) }}
+						{{ formatMonthAndYear(yk, parseInt(mk) + 1) }}
 						<div class="days">
 							<div
 								:class="{ today: d.toDateString() === now.toDateString() }"
@@ -175,19 +175,20 @@
 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',
@@ -436,8 +437,10 @@ export default defineComponent({
 			this.newTaskTitle = ''
 			this.hideCrateNewTask()
 		},
-		formatYear(date) {
-			return this.format(date, 'MMMM, yyyy')
+		formatMonthAndYear(year, month) {
+			month = month < 10 ? '0' + month : month
+			const date = new Date(`${year}-${month}-01`)
+			return formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -39,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
@@ -148,11 +148,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'
 
 import BaseButton from '@/components/base/BaseButton'
 
@@ -229,7 +231,11 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+
+		downloadAttachment(attachment: AttachmentModel) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -239,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() {

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

@@ -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'
 
@@ -37,7 +37,7 @@ 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'
 

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'
 
@@ -117,7 +117,7 @@ async function removeLabel(label: LabelModel) {
 
 	for (const l in labels.value) {
 		if (labels.value[l].id === label.id) {
-			labels.value.splice(l, 1)
+			labels.value.splice(l, 1) // FIXME: l should be index
 		}
 	}
 	emit('update:modelValue', labels.value)

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

@@ -4,9 +4,9 @@
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
-			'has-light-text': task.getHexColor() !== TASK_DEFAULT_COLOR && !colorIsDark(task.getHexColor()),
+			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
 		}"
-		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== '' ? task.hexColor : false}"
+		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
@@ -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: {
@@ -103,9 +105,19 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	computed: {
+		color() {
+			return this.task.getHexColor
+				? this.task.getHexColor() 
+				: TASK_DEFAULT_COLOR
+		},
+	},
 	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

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
 		@search="findLists"
@@ -13,7 +13,7 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script lang="ts" setup>
@@ -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

@@ -42,6 +42,10 @@
 					{{ $t('task.quickAddMagic.list1', {prefix: prefixes.list}) }}
 					{{ $t('task.quickAddMagic.list2') }}
 				</p>
+				<p>
+					{{ $t('task.quickAddMagic.list3') }}
+					{{ $t('task.quickAddMagic.list4', {prefix: prefixes.list}) }}
+				</p>
 
 				<h3>{{ $t('task.quickAddMagic.dateAndTime') }}</h3>
 				<p>

src/components/tasks/partials/relatedTasks.vue

@@ -35,6 +35,7 @@
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
+						@select="addTaskRelation"
 					>
 						<template #searchResult="props">
 							<span v-if="typeof props.option !== 'string'" class="search-result">
@@ -143,8 +144,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 BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -156,7 +156,7 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
 			newTaskRelationKind: 'related',
 			taskRelationService: new TaskRelationService(),
@@ -220,7 +220,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 BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
@@ -45,12 +45,11 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: any) => e instanceof Date
-			const isString = (e: any) => typeof e === 'string'
+			const isDate = (e: unknown) => e instanceof Date
+			const isString = (e: unknown) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {
-					console.log('validation failed', e, e instanceof Date)
 					return false
 				}
 			}
@@ -118,7 +117,7 @@ function removeReminderByIndex(index: number) {
     display: flex;
     align-items: center;
 
-    &.overdue :deep(.datepicker a.show) {
+    &.overdue :deep(.datepicker .show) {
       color: var(--danger);
     }
 
@@ -126,7 +125,7 @@ function removeReminderByIndex(index: number) {
       margin-bottom: 0.75rem;
     }
 
-    a.remove {
+    .remove {
       color: var(--danger);
       padding-left: .5rem;
     }

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

@@ -1,6 +1,6 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
-		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
+		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
 		<span
 			v-if="showListColor && listColor !== ''"
 			:style="{backgroundColor: listColor }"
@@ -43,7 +43,7 @@
 				v-if="+new Date(task.dueDate) > 0"
 				class="dueDate"
 				@click.prevent.stop="showDefer = !showDefer"
-				v-tooltip="formatDate(task.dueDate)"
+				v-tooltip="formatDateLong(task.dueDate)"
 			>
 				<time
 					:datetime="formatISO(task.dueDate)"
@@ -99,16 +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 BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
-import DeferTask from './defer-task'
+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',
@@ -149,6 +148,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		canMarkAsDone: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	emits: ['task-updated'],
 	watch: {
@@ -184,7 +187,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) {
@@ -209,7 +216,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/composables/taskList.ts

@@ -1,4 +1,4 @@
-import { ref, shallowReactive, watch, computed } from 'vue'
+import {ref, shallowReactive, watch, computed} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
@@ -20,14 +20,13 @@ const SORT_BY_DEFAULT = {
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
-export function useTaskList(listId) {
+export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 	const params = ref({...getDefaultParams()})
 	
 	const search = ref('')
 	const page = ref(1)
 
-	const sortBy = ref({ ...SORT_BY_DEFAULT })
-
+	const sortBy = ref({ ...sortByDefault })
 
 	// This makes sure an id sort order is always sorted last.
 	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
@@ -108,5 +107,6 @@ export function useTaskList(listId) {
 		loadTasks,
 		searchTerm: search,
 		params,
+		sortByParam: sortBy,
 	}
 }

src/helpers/attachments.ts

@@ -29,6 +29,6 @@ export async function uploadFiles(attachmentService: AttachmentService, taskId:
 	}
 }
 
-export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
+export function generateAttachmentUrl(taskId: number, attachmentId: number) {
 	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
 }

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/helpers/time/parseDate.ts

@@ -222,8 +222,8 @@ export const getDateFromTextIn = (text: string, now: Date = new Date()) => {
 }
 
 const getDateFromWeekday = (text: string): dateFoundResult => {
-	const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/ig
-	const results: string[] | null = matcher.exec(text)
+	const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
+	const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work.
 	if (results === null) {
 		return {
 			foundText: null,

src/helpers/utils.ts

@@ -11,11 +11,11 @@ export function includesById(array: [], id: string | number) {
 }
 
 // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isnil
-export function isNil(value: any) {
+export function isNil(value: unknown) {
 	return value == null
 }
 
-export function omitBy(obj: {}, check: (value: any) => boolean): {} {
+export function omitBy(obj: {}, check: (value: unknown) => boolean) {
 	if (isNil(obj)) {
 		return {}
 	}

src/i18n/lang/ca-ES.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/cs-CZ.json

@@ -790,13 +790,15 @@
       "multiple": "Toto můžete použít několikrát.",
       "label1": "Chcete-li přidat štítek, jednoduše napište před název štítku {prefix}.",
       "label2": "Vikunja nejprve zkontroluje, zda štítek již existuje a vytvoří jej, pokud ne.",
-      "label3": "Chcete-li použít mezery, jednoduše přidejte \" kolem názvu popisku.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Například: {prefix}\"Štítek s mezerami\".",
       "priority1": "Chcete-li nastavit prioritu úkolu, přidejte číslo 1-5, s prefixem {prefix}.",
       "priority2": "Čím vyšší číslo, tím vyšší priorita.",
       "assignees": "Chcete-li přímo přiřadit úkol k uživateli, přidejte k úkolu jejich uživatelské jméno s prefixem {prefix}.",
       "list1": "Chcete-li nastavit seznam, ve kterém se má úkol zobrazit, zadejte jeho název s předponou {prefix}.",
       "list2": "Toto vrátí chybu, pokud seznam neexistuje.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Datum a čas",
       "date": "Jakékoliv datum bude použito jako datum dokončení nového úkolu. Můžete použít data v kterémkoli z těchto formátů:",
       "dateWeekday": "každý pracovní den použije další datum s tímto datem",

src/i18n/lang/de-DE.json

@@ -790,13 +790,15 @@
       "multiple": "Du kannst das mehrmals benutzen.",
       "label1": "Um ein Label hinzuzufügen, gibt einfach den Name mit einem vorangestellten {prefix} ein.",
       "label2": "Vikunja prüft zuerst, ob das Label bereits vorhanden ist und erstellt es, falls nicht.",
-      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" um den Namen des Labels hinzu.",
+      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen des Labels hinzu.",
       "label4": "Zum Beispiel: {prefix}\"Label mit Leerzeichen\".",
       "priority1": "Um die Priorität einer Aufgabe zu setzen, gibt eine Zahl zwischen 1 und 5 mit einem vorangestellten {prefix} ein.",
       "priority2": "Je höher die Zahl, desto höher die Priorität.",
       "assignees": "Um die Aufgabe direkt jemandem zuzuweisen, füge vor dem Anmeldenamen der Person ein {prefix} Zeichen ein.",
       "list1": "Um eine Liste zu erstellen, in der die Aufgabe erscheinen soll, gib ihren Namen vorangestellt mit einem {prefix} ein.",
       "list2": "Dies gibt einen Fehler zurück, wenn die Liste nicht existiert.",
+      "list3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen der Liste hinzu.",
+      "list4": "Zum Beispiel: {prefix}\"Liste mit Leerzeichen\".",
       "dateAndTime": "Datum und Uhrzeit",
       "date": "Jedes Datum wird als Enddatum der neuen Aufgabe verwendet. Du kannst Daten in jedem dieser Formate verwenden:",
       "dateWeekday": "jeder Wochentag, wird das nächste Datum mit diesem Tag verwenden",

src/i18n/lang/de-swiss.json

@@ -790,13 +790,15 @@
       "multiple": "Du chasch da mehrmals mache.",
       "label1": "Um es Label hinzuezfüege, schriib eifach es {prefix} vorne ane.",
       "label2": "Vikunja prüeft z'ersch, obs da Label bereits git und machst neu, falls nööd.",
-      "label3": "Um Leerschläg zverwende, setz eifach zwei \" um de Labelname.",
+      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen des Labels hinzu.",
       "label4": "Zum Blaistift: {prefix}\"Label mit Leerschlag\".",
       "priority1": "Um e Task Priorität z'setze: füeg e nummere zwüsched 1 und 5, mit em {prefix} als Prefix iih.",
       "priority2": "Je höher d'nummere, desto höher d'Priorität.",
       "assignees": "Um die Aufgabe direkt jemandem zuzuweisen, füge vor dem Anmeldenamen der Person ein {prefix} Zeichen ein.",
       "list1": "Um e Liste ahzgeh, wo de Task drin erschiine set, gib de name vo de liste mit emne {prefix} ah.",
       "list2": "Das wird en Fehler werfe, wenn d'Liste nid existiert.",
+      "list3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen der Liste hinzu.",
+      "list4": "Zum Beispiel: {prefix}\"Liste mit Leerzeichen\".",
       "dateAndTime": "Datum und Ziit",
       "date": "Jedes Datum wird als Abgabedatum für di neu Uufgab gnoh. Du chasch Date i de folgende Format verwende:",
       "dateWeekday": "jede Wuchetaag wird nimmt s'negste Datum mit dem Datum",

src/i18n/lang/en.json

@@ -793,13 +793,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/es-ES.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/fr-FR.json

@@ -790,13 +790,15 @@
       "multiple": "Tu peux utiliser ceci plusieurs fois.",
       "label1": "Pour ajouter une étiquette, il suffit de préfixer le nom de l’étiquette avec {prefix}.",
       "label2": "Vikunja va d’abord vérifier si l’étiquette existe déjà et la créer si ce n’est pas le cas.",
-      "label3": "Pour utiliser des espaces, il suffit d’ajouter \" autour du nom de l’étiquette.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Par exemple : {prefix}\"Étiquette avec espaces\".",
       "priority1": "Pour définir la priorité d’une tâche, ajoutez un chiffre de 1 à 5, précédé d’un {prefix}.",
       "priority2": "Plus le numéro est élevé, plus la priorité est élevée.",
       "assignees": "Pour assigner directement la tâche à un utilisateur, ajoutez son nom d'utilisateur préfixé avec {prefix} à la tâche.",
       "list1": "Pour définir une liste dans laquelle la tâche doit apparaître, entrez son nom précédé de {prefix}.",
       "list2": "Ceci renverra une erreur si la liste n’existe pas.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date et heure",
       "date": "Toute date sera utilisée comme date d’échéance de la nouvelle tâche. Vous pouvez utiliser des dates dans un des formats suivants :",
       "dateWeekday": "n’importe quel jour de la semaine, utilisera la date suivante avec cette date",

src/i18n/lang/it-IT.json

@@ -790,13 +790,15 @@
       "multiple": "Puoi usarlo più volte.",
       "label1": "Per aggiungere un'etichetta, basta aggiungere il nome dell'etichetta preceduto da {prefix}.",
       "label2": "Vikunja controllerà prima se l'etichetta esiste già e nel caso la creerà.",
-      "label3": "Per usare gli spazi, basta \" prima e dopo del nome dell'etichetta.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Per esempio: {prefix}\"Etichetta con spazi\".",
       "priority1": "Per impostare la priorità di un'attività, aggiungi un numero 1-5, preceduto da {prefix}.",
       "priority2": "Più alto è il numero, più alta è la priorità.",
       "assignees": "Per assegnare direttamente l'attività a un utente, aggiungere il suo nome utente preceduto da {prefix} all'attività.",
       "list1": "Per impostare una lista di appartenenza all'attività, inserisci il suo nome prefisso con {prefix}.",
       "list2": "Ciò restituirà un errore se la lista non esiste.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Data e ora",
       "date": "Qualsiasi data verrà utilizzata come data di scadenza della nuova attività. È possibile utilizzare le date in uno qualsiasi di questi formati:",
       "dateWeekday": "qualsiasi giorno della settimana, userà la data più vicina",

src/i18n/lang/nl-NL.json

@@ -790,13 +790,15 @@
       "multiple": "Je kan dit meerdere keren gebruiken.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "Om prioriteit aan een taak te geven voeg je een nummer tussen 1-5 toe, beginnend met een {prefix}.",
       "priority2": "Hoe hoger het getal, hoe hoger de prioriteit.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "Dit geeft een foutmelding als de lijst niet bestaat.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Datum en tijd",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/pl-PL.json

@@ -790,13 +790,15 @@
       "multiple": "Możesz użyć tego wielokrotnie.",
       "label1": "Aby dodać etykietę, po prostu poprzedź nazwę etykiety przedrostkiem {prefix}.",
       "label2": "Vikunja najpierw sprawdzi, czy etykieta już istnieje, a jeśli nie, utworzy ją.",
-      "label3": "Aby użyć spacji, po prostu podaj nazwę etykiety pomiędzy \".",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Na przykład: {prefix}\"Etykieta ze spacjami\".",
       "priority1": "Aby ustawić priorytet zadania, dodaj liczbę 1-5 poprzedzoną {prefix}.",
       "priority2": "Im większa liczba, tym wyższy priorytet.",
       "assignees": "Aby bezpośrednio przypisać zadanie użytkownikowi, dodaj nazwę użytkownika poprzedzoną przedrostkiem {prefix} do zadania.",
       "list1": "Aby ustawić listę, do której ma zostać przypisane zadanie, wprowadź jego nazwę z prefiksem {prefix}.",
       "list2": "Jeśli lista nie istnieje zostanie zwrócony błąd.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Data i godzina",
       "date": "Dowolna data może być użyta jako termin wykonania nowego zadania. Możesz wykorzystać datę w dowolnym z podanych formatów:",
       "dateWeekday": "dowolny dzień tygodnia spowoduje wybranie najbliższej daty przypadającej na podany dzień tygodnia",

src/i18n/lang/pt-BR.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/pt-PT.json

@@ -790,13 +790,15 @@
       "multiple": "Podes usar isto várias vezes.",
       "label1": "Para adicionar uma etiqueta, basta prefixares o nome da etiqueta com {prefix}.",
       "label2": "Vikunja irá primeiro verificar se a etiqueta já existe e criá-la se não.",
-      "label3": "Para utilizares espaços, basta adicionares um \" no início e fim do nome da etiqueta.",
+      "label3": "Para utilizares espaços, basta adicionares um \" ou ' no início e fim do nome da etiqueta.",
       "label4": "Por exemplo: {prefix}\"Etiqueta com espaços\".",
       "priority1": "Para definir a prioridade de uma tarefa, adiciona um número entre 1 a 5, prefixado com um {prefix}.",
       "priority2": "Quanto maior o número, maior a prioridade.",
       "assignees": "Para atribuires uma tarefa diretamente a um utilizador, adiciona à tarefa os seus nomes de utilizador prefixados com {prefix}.",
       "list1": "Para definir uma lista onde a tarefa deve aparecer, adiciona o seu nome prefixado com {prefix}.",
       "list2": "Isto vai retornar um erro se a lista não existir.",
+      "list3": "Para utilizares espaços, basta adicionares um \" ou ' no início e fim do nome da lista.",
+      "list4": "Por exemplo: {prefix}\"Etiqueta com espaços\".",
       "dateAndTime": "Data e hora",
       "date": "Qualquer data será utilizada como data de vencimento da nova tarefa. Podes utilizar datas em qualquer dos seguintes formatos:",
       "dateWeekday": "qualquer dia de semana, usará a próxima data com essa data",

src/i18n/lang/ro-RO.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/ru-RU.json

@@ -790,13 +790,15 @@
       "multiple": "Ты можешь использовать это несколько раз.",
       "label1": "Чтобы добавить метку, просто добавь к названию метки префикс {prefix}.",
       "label2": "Vikunja проверит, существует ли такая метка, и создаст её, если ещё нет.",
-      "label3": "Чтобы использовать пробелы, оберни метку в \"кавычки\".",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Например: {prefix}\"Метка с пробелами\".",
       "priority1": "Чтобы установить задаче приоритет, добавь число 1-5 с префиксом {prefix}.",
       "priority2": "Чем больше число, тем выше приоритет.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "Чтобы выбрать список, в который будет помещена создаваемая задача, введи его имя с префиксом {prefix}.",
       "list2": "Если списка не существует, будет возвращена ошибка.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Дата и время",
       "date": "Любая дата будет использоваться как срок выполнения новой задачи. Ты можешь использовать даты в любом из этих форматов:",
       "dateWeekday": "любой день недели, будет использовать следующую дату",

src/i18n/lang/sk-SK.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/sv-SE.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/tr-TR.json

@@ -790,13 +790,15 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" around the label name.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/vi-VN.json

@@ -790,13 +790,15 @@
       "multiple": "Bạn có thể sử dụng tác vụ này nhiều lần.",
       "label1": "Để thêm một nhãn, chỉ cần đặt tiền tố tên nhãn bằng {prefix}.",
       "label2": "Đầu tiên Vikunja sẽ kiểm tra xem nhãn đã tồn tại chưa và tạo nó nếu chưa.",
-      "label3": "Để sử dụng dấu cách, chỉ cần thêm dấu \" xung quanh tên nhãn.",
+      "label3": "To use spaces, simply add a \" or ' around the label name.",
       "label4": "Ví dụ: {prefix} \"Nhãn có dấu cách\".",
       "priority1": "Để đặt mức độ ưu tiên của công việc, hãy thêm số từ 1-5, có tiền tố là {prefix}.",
       "priority2": "Số càng lớn, độ ưu tiên càng cao.",
       "assignees": "Để chỉ định trực tiếp công việc cho một người, hãy thêm tên người dùng của họ có tiền tố là {prefix} vào nhiệm vụ.",
       "list1": "Để chọn danh sách trong đó nhiệm vụ sẽ xuất hiện, hãy nhập tên của nhiệm vụ trước {prefix}.",
       "list2": "Điều này sẽ trả về một lỗi nếu danh sách không tồn tại.",
+      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Ngày và giờ",
       "date": "Bất kỳ ngày nào sẽ được sử dụng làm ngày hết hạn của nhiệm vụ mới. Bạn có thể sử dụng ngày ở bất kỳ định dạng nào sau đây:",
       "dateWeekday": "bất kỳ ngày nào trong tuần, sẽ sử dụng ngày tiếp theo với ngày đó",

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,10 @@
+export const PRIORITIES = {
+	'UNSET': 0,
+	'LOW': 1,
+	'MEDIUM': 2,
+	'HIGH': 3,
+	'URGENT': 4,
+	'DO_NOW': 5,
+} as const
+
+export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]

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)