Merge branch 'main' into feature/ganttastic

# Conflicts:
#	package.json
#	src/components/tasks/gantt-component.vue
#	src/main.ts

.drone.yml

@@ -108,7 +108,7 @@ steps:
       - dependencies
 
   - name: test-frontend
-    image: cypress/browsers:node16.5.0-chrome94-ff93
+    image: cypress/browsers:node16.14.0-chrome99-ff97
     pull: true
     environment:
       CYPRESS_API_URL: http://api:3456/api/v1

CHANGELOG.md

@@ -9,6 +9,64 @@ All releases can be found on https://code.vikunja.io/frontend/releases.
 
 The releases aim at the api versions which is why there are missing versions.
 
+## [0.19.1] - 2022-08-17
+
+### Bug Fixes
+
+* *(dark mode)* Code background color
+* *(dark mode)* Make a focused text only button actually readable
+* *(lists)* Moving a list into another namespace on the first position* I18n scope ([5b8d142](5b8d142abba9559f6b259940d5f35ccb1c098496))
+* Clear all localstorage when logging out ([51ffe93](51ffe930483bdd02118b512bb00a1ca50a5ce2e5))
+* Search for assignees by username (#2264) ([c6e7390](c6e7390f137991a6d992ad62ddca46a07fd4bf4e))
+
+### Dependencies
+
+* *(deps)* Update dependency sass to v1.54.2 (#2219)
+* *(deps)* Update vueuse to v9.1.0 (#2220)
+* *(deps)* Update dependency sass to v1.54.3 (#2223)
+* *(deps)* Update sentry-javascript monorepo to v7.9.0 (#2224)
+* *(deps)* Update dependency vue-i18n to v9.2.1
+* *(deps)* Update dependency vitest to v0.21.0
+* *(deps)* Update dependency vue-i18n to v9.2.2 (#2228)
+* *(deps)* Update dependency postcss to v8.4.16 (#2230)
+* *(deps)* Update dependency vue-tsc to v0.39.5
+* *(deps)* Update dependency caniuse-lite to v1.0.30001374 (#2231)
+* *(deps)* Update dependency netlify-cli to v10.15.0 (#2232)
+* *(deps)* Update dependency esbuild to v0.14.54 (#2233)
+* *(deps)* Update typescript-eslint monorepo to v5.33.0 (#2235)
+* *(deps)* Update dependency @faker-js/faker to v7.4.0 (#2234)
+* *(deps)* Update dependency vite to v3.0.5 (#2237)
+* *(deps)* Update dependency sass to v1.54.4 (#2238)
+* *(deps)* Update dependency esbuild to v0.15.0 (#2239)
+* *(deps)* Update dependency vue-tsc to v0.40.0 (#2241)
+* *(deps)* Update dependency vitest to v0.21.1 (#2236)
+* *(deps)* Update sentry-javascript monorepo to v7.10.0 (#2242)
+* *(deps)* Update dependency rollup to v2.77.3 (#2245)
+* *(deps)* Update dependency esbuild to v0.15.1 (#2244)
+* *(deps)* Update dependency vue-tsc to v0.40.1 (#2243)
+* *(deps)* Update dependency vite to v3.0.6 (#2252)
+* *(deps)* Update dependency @vitejs/plugin-legacy to v2.0.1 (#2250)
+* *(deps)* Update dependency @cypress/vue to v4.1.0 (#2249)
+* *(deps)* Update dependency @vitejs/plugin-vue to v3.0.2 (#2251)
+* *(deps)* Update dependency @cypress/vite-dev-server to v3.1.0 (#2248)
+* *(deps)* Update dependency esbuild to v0.15.2 (#2255)
+* *(deps)* Update dependency vite to v3.0.7 (#2254)
+* *(deps)* Update dependency @vitejs/plugin-vue to v3.0.3 (#2253)
+* *(deps)* Update dependency eslint to v8.22.0 (#2256)
+* *(deps)* Update dependency rollup to v2.78.0 (#2257)
+* *(deps)* Update dependency esbuild to v0.15.3
+* *(deps)* Update dependency netlify-cli to v10.17.4 (#2262)
+* *(deps)* Update dependency caniuse-lite to v1.0.30001376 (#2261)
+* *(deps)* Update typescript-eslint monorepo to v5.33.1 (#2263)
+* *(deps)* Update dependency vitest to v0.22.0 (#2265)
+* *(deps)* Update dependency cypress to v10.5.0 (#2266)
+* *(deps)* Update dependency @cypress/vite-dev-server to v3.1.1 (#2267)
+* *(deps)* Update dependency postcss-preset-env to v7.8.0 (#2268)
+* *(deps)* Update dependency vite to v3.0.8 (#2269)
+* *(deps)* Update dependency esbuild to v0.15.4 (#2270)
+* *(deps)* Update dependency cypress to v10.6.0 (#2271)
+* *(deps)* Update dependency esbuild to v0.15.5 (#2272)
+
 ## [0.19.0] - 2022-08-03
 
 ### Bug Fixes

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.19.0-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.19.1-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.
@@ -42,3 +42,7 @@ yarn run build
 ```shell
 yarn run lint
 ```
+
+## Sponsors
+
+[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cypress/docker-compose.yml

@@ -9,7 +9,7 @@ services:
     ports:
       - 3456:3456
   cypress:
-    image: cypress/browsers:node12.18.3-chrome87-ff82
+    image: cypress/browsers:node16.14.0-chrome99-ff97
     volumes:
     - ..:/project
     - $HOME/.cache:/home/node/.cache/

cypress/e2e/list/list.spec.ts

@@ -59,7 +59,7 @@ describe('Lists', () => {
 			.click()
 		cy.get('#title')
 			.type(`{selectall}${newListName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

cypress/e2e/list/namespaces.spec.ts

@@ -63,7 +63,7 @@ describe('Namepaces', () => {
 			.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
 		cy.get('#namespacetext')
 			.type(`{selectall}${newNamespaceName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

package.json

@@ -18,38 +18,44 @@
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
+    "@fortawesome/free-regular-svg-icons": "6.2.0",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@fortawesome/vue-fontawesome": "3.0.1",
     "@github/hotkey": "2.0.1",
     "@infectoone/vue-ganttastic": "^2.0.4",
-    "@kyvg/vue3-notification": "2.3.6",
+    "@kyvg/vue3-notification": "2.4.1",
-    "@sentry/tracing": "7.10.0",
+    "@sentry/tracing": "7.12.1",
-    "@sentry/vue": "7.10.0",
+    "@sentry/vue": "7.12.1",
     "@types/is-touch-device": "1.0.0",
+    "@types/lodash.clonedeep": "4.5.7",
     "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "9.1.0",
+    "@vueuse/core": "9.2.0",
-    "@vueuse/router": "9.1.0",
+    "@vueuse/router": "9.2.0",
+    "axios": "0.27.2",
     "blurhash": "1.1.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "date-fns": "2.29.1",
+    "date-fns": "2.29.2",
-    "dompurify": "2.3.10",
+    "dompurify": "2.4.0",
-    "easymde": "2.16.1",
+    "easymde": "2.17.0",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
     "highlight.js": "11.6.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.18",
+    "marked": "4.1.0",
     "minimist": "1.2.6",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.8.5",
     "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.37",
+    "vue": "3.2.39",
     "vue-advanced-cropper": "2.8.3",
     "vue-flatpickr-component": "9.0.6",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.3",
+    "vue-router": "4.1.5",
     "vuex": "4.0.2",
     "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
@@ -57,42 +63,37 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
     "@cypress/vite-dev-server": "3.1.1",
-    "@cypress/vue": "4.1.0",
+    "@cypress/vue": "4.2.0",
-    "@faker-js/faker": "7.4.0",
+    "@faker-js/faker": "7.5.0",
-    "@fortawesome/fontawesome-svg-core": "6.1.2",
-    "@fortawesome/free-regular-svg-icons": "6.1.2",
-    "@fortawesome/free-solid-svg-icons": "6.1.2",
-    "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/eslint-plugin": "5.36.2",
-    "@typescript-eslint/parser": "5.33.1",
+    "@typescript-eslint/parser": "5.36.2",
-    "@vitejs/plugin-legacy": "2.0.1",
+    "@vitejs/plugin-legacy": "2.1.0",
-    "@vitejs/plugin-vue": "3.0.3",
+    "@vitejs/plugin-vue": "3.1.0",
-    "@vue/eslint-config-typescript": "11.0.0",
+    "@vue/eslint-config-typescript": "11.0.1",
     "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.8",
-    "axios": "0.27.2",
     "browserslist": "4.21.3",
-    "caniuse-lite": "1.0.30001376",
+    "caniuse-lite": "1.0.30001390",
-    "cypress": "10.6.0",
+    "cypress": "10.7.0",
-    "esbuild": "0.15.4",
+    "esbuild": "0.15.7",
-    "eslint": "8.22.0",
+    "eslint": "8.23.0",
-    "eslint-plugin-vue": "9.3.0",
+    "eslint-plugin-vue": "9.4.0",
     "express": "4.18.1",
     "happy-dom": "6.0.4",
-    "netlify-cli": "10.17.4",
+    "netlify-cli": "11.5.1",
     "postcss": "8.4.16",
-    "postcss-preset-env": "7.8.0",
+    "postcss-preset-env": "7.8.1",
-    "rollup": "2.78.0",
+    "rollup": "2.79.0",
-    "rollup-plugin-visualizer": "5.7.1",
+    "rollup-plugin-visualizer": "5.8.1",
-    "sass": "1.54.4",
+    "sass": "1.54.9",
-    "typescript": "4.7.4",
+    "typescript": "4.8.2",
-    "vite": "3.0.8",
+    "vite": "3.1.0",
-    "vite-plugin-pwa": "0.12.3",
+    "vite-plugin-pwa": "0.12.7",
-    "vite-svg-loader": "3.4.0",
+    "vite-svg-loader": "3.6.0",
-    "vitest": "0.22.0",
+    "vitest": "0.23.1",
-    "vue-tsc": "0.40.1",
+    "vue-tsc": "0.40.13",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.4"
   },

renovate.json

@@ -19,6 +19,12 @@
       "matchPackagePrefixes": [
         "@vueuse/"
       ]
+    },
+    {
+      "matchDepTypes": ["devDependencies"],
+      "automerge": true,
+      "automergeStrategy": "squash",
+      "automergeType": "pr"
     }
   ]
 }

src/App.vue

@@ -15,10 +15,10 @@
 </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'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'

src/components/base/BaseButton.vue

@@ -12,12 +12,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { inheritAttrs: false }
-
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default defineComponent({
-	inheritAttrs: false,
-})
 </script>
 
 <script lang="ts" setup>
@@ -30,7 +25,7 @@ export default defineComponent({
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
+import { ref, watchEffect, computed, useAttrs, type PropType } from 'vue'
 
 const BASE_BUTTON_TYPES_MAP = Object.freeze({
 	button: 'button',

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

@@ -71,7 +71,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'

src/components/home/MenuButton.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

src/components/home/TheNavigation.vue

@@ -88,11 +88,11 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 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 '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -103,6 +103,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

@@ -60,8 +60,8 @@
 </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 {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
 

src/components/home/contentLinkShare.vue

@@ -6,8 +6,9 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo"/>
+				<Logo class="logo" v-if="logoVisible"/>
 				<h1
+					:class="{'m-0': !logoVisible}"
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
 					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
@@ -23,7 +24,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
@@ -31,6 +32,7 @@ import PoweredByLink from './PoweredByLink.vue'
 const store = useStore()
 const currentList = computed(() => store.state.currentList)
 const background = computed(() => store.state.background)
+const logoVisible = computed(() => store.state.logoVisible)
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -141,9 +141,9 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 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'
@@ -154,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 type { IList } from '@/models/list'
-import ListModel from '@/models/list'
+import type { INamespace } from '@/models/namespace'
 
 const drag = ref(false)
 const dragOptions = {
@@ -171,7 +172,7 @@ const loading = computed(() => store.state.loading && store.state.loadingModule
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
+	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -194,7 +195,7 @@ useEventListener('resize', resize)
 onMounted(() => resize())
 
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {
@@ -208,14 +209,14 @@ function resize() {
 	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: number) {
+function toggleLists(namespaceId: INamespace['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
+	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -223,7 +224,7 @@ onBeforeMount(async () => {
 	})
 })
 
-function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
+function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@@ -240,7 +241,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 	})
 }
 
-const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex && e.newIndex !== 0) return
@@ -249,9 +250,14 @@ async function saveListPosition(e: SortableEvent) {
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
 
 	const listsActive = activeLists.value[newNamespaceIndex]
-	const list = listsActive[e.newIndex]
+	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
-	const listBefore = listsActive[e.newIndex - 1] ?? null
+	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
-	const listAfter = listsActive[e.newIndex + 1] ?? null
+	// To work around that we're explicitly checking that case here and decrease the index.
+	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
+	
+	const list = listsActive[newIndex]
+	const listBefore = listsActive[newIndex - 1] ?? null
+	const listAfter = listsActive[newIndex + 1] ?? null
 	listUpdating.value[list.id] = true
 
 	const position = calculateItemPosition(

src/components/input/button.vue

@@ -18,15 +18,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { name: 'x-button' }
-
-export default defineComponent({
-	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({
@@ -69,9 +65,11 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
+  height: auto;
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
+  white-space: break-spaces;
 
   &:hover {
     box-shadow: var(--shadow-md);

src/components/input/datepicker.vue

@@ -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/editor.vue

@@ -16,14 +16,29 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
+				<ButtonLink
+					@click="toggleEdit"
+					v-shortcut="editShortcut"
+					class="d-print-none">
+					{{ $t('input.editor.edit') }}
+				</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+				<BaseButton
-				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
+					v-if="showEditButton"
+					@click="toggleEdit"
+					v-shortcut="editShortcut">
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+				<BaseButton
+					v-else-if="isEditActive"
+					@click="toggleEdit"
+					class="done-edit">
+					{{ $t('misc.save') }}
+				</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
@@ -32,7 +47,11 @@
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+					<BaseButton
+						@click="toggleEdit"
+						v-shortcut="editShortcut">
+						{{ $t('input.editor.edit') }}
+					</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -110,6 +129,12 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		// If a key is passed the editor will go in "edit" mode when the key is pressed.
+		// Disabled if an empty string is passed.
+		editShortcut: {
+			type: String,
+			default: '',
+		},
 	},
 	emits: ['update:modelValue', 'change'],
 	computed: {

src/components/input/fancycheckbox.vue

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

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

@@ -76,24 +76,24 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
+import {ref, computed, watchEffect, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 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 type {IList} from '@/models/list'
-import SubscriptionModel from '@/models/subscription'
+import type { ISubscription } from '@/models/subscription'
 
 const props = defineProps({
 	list: {
-		type: ListModel,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 })
 
-const subscription = ref<SubscriptionModel | null>(null)
+const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })

src/components/list/partials/filters.vue

@@ -186,8 +186,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
 import {includesById} from '@/helpers/utils'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
@@ -499,6 +499,14 @@ export default defineComponent({
 			if (typeof this.filters[filterName] === 'undefined' || this.filters[filterName] === '') {
 				return
 			}
+			
+			// Don't load things if we already have something loaded.
+			// This is not the most ideal solution because it prevents a re-population when filters are changed 
+			// from the outside. It is still fine because we're not changing them from the outside, other than 
+			// loading them initially.
+			if(this[kind].length > 0) {
+				return
+			}
 
 			this[kind] = await this[`${servicePrefix}Service`].getAll({}, {s: this.filters[filterName]})
 		},
@@ -532,6 +540,7 @@ export default defineComponent({
 
 			if (query === '') {
 				this.clear(kind)
+				return
 			}
 
 			const response = await this[`${kind}Service`].getAll({}, {s: query})
@@ -558,7 +567,7 @@ export default defineComponent({
 
 			let ids = []
 			this[kind].forEach(u => {
-				ids.push(u.id)
+				ids.push(kind === 'users' ? u.username : u.id)
 			})
 
 			this.filters[filterName] = ids.join(',')

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

@@ -36,16 +36,16 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
+import {type PropType, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import type { IList } from '@/models/list'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -53,7 +53,7 @@ const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 	showArchived: {
@@ -86,7 +86,7 @@ async function loadBackground() {
 
 const store = useStore()
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {

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

@@ -16,11 +16,21 @@
 				</span>
 			</BaseButton>
 		</header>
-		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
+		<div
+			class="card-content loader-container"
+			:class="{
+				'p-0': !padding,
+				'is-loading': loading
+			}"
+		>
 			<div :class="{'content': hasContent}">
-				<slot></slot>
+				<slot />
 			</div>
 		</div>
+
+		<footer v-if="$slots.footer" class="card-footer">
+			<slot name="footer" />
+		</footer>
 	</div>
 </template>
 
@@ -76,9 +86,11 @@ defineEmits(['close'])
   border-radius: $radius $radius 0 0;
 }
 
-// FIXME: should maybe be merged somehow with modal
+.card-footer {
-:deep(.modal-card-foot) {
   background-color: var(--grey-50);
   border-top: 0;
+	padding: var(--modal-card-head-padding);
+	display: flex;
+	justify-content: flex-end;
 }
 </style>

src/components/misc/create-edit.vue

@@ -4,38 +4,41 @@
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left has-overflow"
+			class="has-text-left"
 			:has-close="true"
 			@close="$router.back()"
 			:loading="loading"
 		>
 			<div class="p-4">
-				<slot></slot>
+				<slot />
 			</div>
-			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+
-				<x-button
+			<template #footer>
-					v-if="tertiary !== ''"
+				<slot name="footer">
-					:shadow="false"
+					<x-button
-					variant="tertiary"
+						v-if="tertiary !== ''"
-					@click.prevent.stop="$emit('tertiary')"
+						:shadow="false"
-				>
+						variant="tertiary"
-					{{ tertiary }}
+						@click.prevent.stop="$emit('tertiary')"
-				</x-button>
+					>
-				<x-button
+						{{ tertiary }}
-					variant="secondary"
+					</x-button>
-					@click.prevent.stop="$router.back()"
+					<x-button
-				>
+						variant="secondary"
-					{{ $t('misc.cancel') }}
+						@click.prevent.stop="$router.back()"
-				</x-button>
+					>
-				<x-button
+						{{ $t('misc.cancel') }}
-					variant="primary"
+					</x-button>
-					@click.prevent.stop="primary()"
+					<x-button
-					:icon="primaryIcon"
+						variant="primary"
-					:disabled="primaryDisabled"
+						@click.prevent.stop="primary()"
-				>
+						:icon="primaryIcon"
-					{{ primaryLabel || $t('misc.create') }}
+						:disabled="primaryDisabled || loading"
-				</x-button>
+					>
-			</footer>
+						{{ primaryLabel || $t('misc.create') }}
+					</x-button>
+				</slot>
+			</template>
 		</card>
 	</modal>
 </template>

src/components/misc/keyboard-shortcuts/index.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'

src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -136,6 +136,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.reminder',
 				keys: ['alt', 'r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.description',
+				keys: ['e'],
+			},
 		],
 	},
 ]

src/components/misc/legal.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

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/no-auth-wrapper.vue

@@ -30,7 +30,7 @@ import Logo from '@/components/home/Logo.vue'
 import Message from '@/components/misc/message.vue'
 import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {computed} from 'vue'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'

src/components/misc/ready.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'

src/components/misc/subscription.vue

@@ -32,27 +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 SubscriptionModel, { type ISubscription } from '@/models/subscription'
 
 import {success} from '@/message'
 
-interface Props {
+const props = defineProps({
-	entity: string
+	entity: String,
-	entityId: number
+	entityId: Number,
-	subscription: SubscriptionModel | null
+	isButton: {
-	type?: 'button' | 'dropdown' | null
+		type: Boolean,
-}
+		default: true,
-
+	},
-const props = withDefaults(defineProps<Props>(), {
+	subscription: {
-	subscription: null,
+		type: Object as PropType<ISubscription>,
-	type: 'button',
+		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

@@ -54,15 +54,16 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, type PropType} from 'vue'
 
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import type { INamespace } from '@/models/namespace'
 
 const props = defineProps({
 	namespace: {
-		type: Object, // NamespaceModel
+		type: Object as PropType<INamespace>,
 		required: true,
 	},
 })

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 { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 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<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 

src/components/sharing/linkSharing.vue

@@ -177,16 +177,17 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
-import RIGHTS from '@/models/constants/rights.json'
+import {RIGHTS} from '@/constants/rights'
-import LinkShareModel from '@/models/linkShare'
+import LinkShareModel, { type ILinkShare } from '@/models/linkShare'
 
 import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import type { IList } from '@/models/list'
 
 const props = defineProps({
 	listId: {
@@ -197,7 +198,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref([])
+const linkShares = ref<ILinkShare[]>([])
 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: IList['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: IList['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: IList['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,

src/components/sharing/userTeam.vue

@@ -133,32 +133,34 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default {name: 'userTeamShare'}
-
-export default defineComponent({name: 'userTeamShare'})
 </script>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
+import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
-import UserNamespaceModel from '@/models/userNamespace'
+import UserNamespaceModel, { type IUserNamespace } from '@/models/userNamespace'
-import UserListModel from '@/models/userList'
+
 import UserListService from '@/services/userList'
+import UserListModel, { type IUserList } from '@/models/userList'
+
 import UserService from '@/services/user'
-import UserModel from '@/models/user'
+import UserModel, { type IUser } from '@/models/user'
 
 import TeamNamespaceService from '@/services/teamNamespace'
-import TeamNamespaceModel from '@/models/teamNamespace'
+import TeamNamespaceModel, { type ITeamNamespace } from '@/models/teamNamespace'
-import TeamListModel from '@/models/teamList'
-import TeamListService from '@/services/teamList'
-import TeamService from '@/services/team'
-import TeamModel from '@/models/team'
 
-import RIGHTS from '@/models/constants/rights.json'
+import TeamListService from '@/services/teamList'
+import TeamListModel, { type ITeamList } from '@/models/teamList'
+
+import TeamService from '@/services/team'
+import TeamModel, { type ITeam } from '@/models/team'
+
+import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
@@ -185,10 +187,10 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 
 // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
+let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
-let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
+let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
-let searchService: ShallowReactive<UserService | TeamService>
+let searchService: UserService | TeamService
-let sharable: Ref<UserModel | TeamModel>
+let sharable: Ref<IUser | ITeam>
 
 const searchLabel = ref('')
 const selectedRight = ref({})
@@ -355,7 +357,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

@@ -43,8 +43,8 @@
 <script setup lang="ts">
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
-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/edit-task.vue

@@ -76,14 +76,14 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
+import {ref, reactive, computed, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import TaskModel, { type ITask } from '@/models/task'
 import EditLabels from './partials/editLabels.vue'
 import Reminders from './partials/reminders.vue'
 import ColorPicker from '../input/colorPicker.vue'
@@ -93,14 +93,16 @@ import {success} from '@/message'
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 
-const props = defineProps<{
+const props = defineProps({
-	task?: TaskModel | null,
+	task: {
-}>()
+		type: Object as PropType<ITask | null>,
+	},
+})
 
 const taskService = shallowReactive(new TaskService())
 
 const editorActive = ref(false)
-let taskEditTask: TaskModel | undefined
+let taskEditTask: ITask | undefined
 
 
 // FIXME: this initialization should not be necessary here 

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
@@ -49,7 +49,7 @@
 							/>
 						</i18n-t>
 						<span>
-							{{ a.file.getHumanSize() }}
+							{{ getHumanSize(a.file.size) }}
 						</span>
 						<span v-if="a.file.mime">
 							{{ a.file.mime }}
@@ -147,14 +147,17 @@
 import {defineComponent} from 'vue'
 
 import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '../../../models/attachment'
+import AttachmentModel, { type IAttachment } from '@/models/attachment'
-import User from '../../misc/user'
+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'
+import type { IFile } from '@/models/file'
+import { getHumanSize } from '@/helpers/getHumanSize'
 
 export default defineComponent({
 	name: 'attachments',
@@ -190,7 +193,7 @@ export default defineComponent({
 	setup(props) {
 		const copy = useCopyToClipboard()
 
-		function copyUrl(attachment: AttachmentModel) {
+		function copyUrl(attachment: IAttachment) {
 			copy(generateAttachmentUrl(props.taskId, attachment.id))
 		}
 
@@ -229,7 +232,12 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		getHumanSize,
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+
+		downloadAttachment(attachment: IAttachment) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -239,7 +247,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files) {
+		uploadFiles(files: IFile[]) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		async deleteAttachment() {

src/components/tasks/partials/checklist-summary.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type PropType} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/models/task'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

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>
@@ -153,16 +153,18 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '@/services/taskComment'
-import TaskCommentModel from '@/models/taskComment'
+import TaskCommentModel, { type ITaskComment } from '@/models/taskComment'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
+import type { ITask } from '@/models/task'
 const props = defineProps({
 	taskId: {
 		type: Number,
@@ -176,7 +178,7 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
-const comments = ref<TaskCommentModel[]>([])
+const comments = ref<ITaskComment[]>([])
 
 const showDeleteModal = ref(false)
 const commentToDelete = reactive(new TaskCommentModel())
@@ -186,8 +188,8 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref(null)
+const saved = ref<ITask['id'] | null>(null)
-const saving = ref(null)
+const saving = ref<ITask['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: ITask['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -257,12 +259,12 @@ async function addComment() {
 	}
 }
 
-function toggleEdit(comment: TaskCommentModel) {
+function toggleEdit(comment: ITaskComment) {
 	isCommentEdit.value = !isCommentEdit.value
 	Object.assign(commentEdit, comment)
 }
 
-function toggleDelete(commentId) {
+function toggleDelete(commentId: ITaskComment['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }
@@ -292,7 +294,7 @@ async function editComment() {
 	}
 }
 
-async function deleteComment(commentToDelete: TaskCommentModel) {
+async function deleteComment(commentToDelete: ITaskComment) {
 	try {
 		await taskCommentService.delete(commentToDelete)
 		const index = comments.value.findIndex(({id}) => id === commentToDelete.id)

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() }}
@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, toRefs} from 'vue'
+import {computed, toRefs, type PropType} from 'vue'
-import TaskModel from '@/models/task'
+import type { ITask } from '@/models/task'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

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

@@ -1,12 +1,14 @@
 <template>
-	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
+	<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
-		<time :datetime="date ? formatISO(date) : null">
+		<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/defer-task.vue

@@ -38,17 +38,17 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import { type ITask } from '@/models/task'
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })
@@ -58,7 +58,7 @@ const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
 const taskService = shallowReactive(new TaskService())
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 
 // We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 const dueDate = ref<Date>()

src/components/tasks/partials/description.vue

@@ -24,36 +24,38 @@
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
+			edit-shortcut="e"
 			v-model="task.description"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref,computed, watch} from 'vue'
+import {ref,computed, watch, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Editor from '@/components/input/AsyncEditor'
 
-import TaskModel from '@/models/task'
+import type { ITask } from '@/models/task'
 
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	attachmentUpload: {
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		required: true,
 	},
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>({description: ''})
+const task = ref<ITask>({description: ''})
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.

src/components/tasks/partials/editAssignees.vue

@@ -10,7 +10,7 @@
 			@search="findUser"
 			:search-results="foundUsers"
 			@select="addAssignee"
-			label="username"
+			label="name"
 			:select-placeholder="$t('task.assignee.selectPlaceholder')"
 			v-model="assignees"
 			ref="multiselect"
@@ -28,8 +28,8 @@
 </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 {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -37,9 +37,9 @@ 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 ListUserService from '@/services/listUsers'
 import {success} from '@/message'
+import type { IUser } from '@/modelTypes/IUser'
 
 const props = defineProps({
 		taskId: {
@@ -54,7 +54,7 @@ const props = defineProps({
 			default: false,
 		},
 		modelValue: {
-			type: Array as PropType<UserModel[]>,
+			type: Array as PropType<IUser[]>,
 			default: () => [],
 		},
 	})
@@ -65,7 +65,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
 const foundUsers = ref([])
-const assignees = ref<UserModel[]>([])
+const assignees = ref<IUser[]>([])
 
 watch(
 	() => props.modelValue,
@@ -78,13 +78,13 @@ watch(
 	},
 )
 
-async function addAssignee(user: UserModel) {
+async function addAssignee(user: IUser) {
 	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
 	emit('update:modelValue', assignees.value)
 	success({message: t('task.assignee.assignSuccess')})
 }
 
-async function removeAssignee(user: UserModel) {
+async function removeAssignee(user: IUser) {
 	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list
@@ -106,6 +106,11 @@ async function findUser(query: string) {
 
 	// Filter the results to not include users who are already assigned
 	foundUsers.value = response.filter(({id}) => !includesById(assignees.value, id))
+		.map(u => {
+			// Users may not have a display name set, so we fall back on the username in that case
+			u.name = u.name === '' ? u.username : u.name
+			return u
+		})
 }
 
 function clearAllFoundUsers() {

src/components/tasks/partials/editLabels.vue

@@ -39,8 +39,8 @@
 </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 {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import LabelModel from '@/models/label'
@@ -49,10 +49,11 @@ import {success} from '@/message'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import type { ILabel } from '@/modelTypes/ILabel'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<LabelModel[]>,
+		type: Array as PropType<ILabel[]>,
 		default: () => [],
 	},
 	taskId: {
@@ -71,7 +72,7 @@ const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
-const labels = ref<LabelModel[]>([])
+const labels = ref<ILabel[]>([])
 const query = ref('')
 
 watch(
@@ -92,7 +93,7 @@ function findLabel(newQuery: string) {
 	query.value = newQuery
 }
 
-async function addLabel(label: LabelModel, showNotification = true) {
+async function addLabel(label: ILabel, showNotification = true) {
 	const bubble = () => {
 		emit('update:modelValue', labels.value)
 		emit('change', labels.value)
@@ -110,14 +111,14 @@ async function addLabel(label: LabelModel, showNotification = true) {
 	}
 }
 
-async function removeLabel(label: LabelModel) {
+async function removeLabel(label: ILabel) {
 	if (props.taskId !== 0) {
 		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
 	}
 
 	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/heading.vue

@@ -32,18 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from 'vue'
+import {ref, computed, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Done from '@/components/misc/Done.vue'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/models/task'
 import { useRouter } from 'vue-router'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	canWrite: {

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

@@ -24,7 +24,7 @@
 			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 			class="due-date"
 			v-if="task.dueDate > 0"
-			v-tooltip="formatDate(task.dueDate)">
+			v-tooltip="formatDateLong(task.dueDate)">
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
@@ -66,16 +66,17 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
-import User from '../../../components/misc/user'
+import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
+import Labels from '../../../components/tasks/partials/labels.vue'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+import {TASK_DEFAULT_COLOR, type ITask} 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<ITask>,
 			required: true,
 		},
 		loading: {
@@ -111,8 +113,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		formatDateLong,
+		formatISO,
+		formatDateSince,
 		colorIsDark,
-		async toggleTaskDone(task) {
+		async toggleTaskDone(task: ITask) {
 			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 { PropType } from 'vue'
+import type { ILabel } from '@/models/label'
+
 defineProps({
 	labels: {
+		type: Array as PropType<ILabel[]>,
 		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,23 +13,20 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
-import ListModel from '@/models/list'
+import ListModel, { type IList } from '@/models/list'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
-		validator(value) {
-			return value instanceof ListModel
-		},
 		required: false,
 	},
 })
@@ -38,7 +35,7 @@ const emit = defineEmits(['update:modelValue'])
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list = reactive<ListModel>(new ListModel())
+const list: IList = reactive(new ListModel())
 
 watch(
 	() => props.modelValue,
@@ -57,7 +54,10 @@ function findLists(query: string) {
 	foundLists.value = store.getters['lists/searchList'](query)
 }
 
-function select(l: ListModel | null) {
+function select(l: IList | null) {
+	if (l === null) {
+		return
+	}
 	Object.assign(list, l)
 	emit('update:modelValue', list)
 }

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 '@/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.UNSET">{{ $t('task.priority.unset') }}</option>
-			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
+			<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
-			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
+			<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
-			<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
+			<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
-			<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
+			<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
-			<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</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 '@/constants/priorities'
 
 const priority = ref(0)
 

src/components/tasks/partials/relatedTasks.vue

@@ -144,8 +144,8 @@ 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 from '../../../models/taskRelation'
+import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -157,9 +157,9 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
-			newTaskRelationKind: 'related',
+			newTaskRelationKind: RELATION_KIND.RELATED,
 			taskRelationService: new TaskRelationService(),
 			showDeleteModal: false,
 			relationToDelete: {},
@@ -221,7 +221,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,8 +45,8 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: any) => e instanceof Date
+			const isDate = (e: unknown) => e instanceof Date
-			const isString = (e: any) => typeof e === 'string'
+			const isString = (e: unknown) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {

src/components/tasks/partials/repeatAfter.vue

@@ -18,17 +18,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="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
-								$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>
@@ -65,14 +62,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, watch} from 'vue'
+import {ref, reactive, watch, type PropType} from 'vue'
-import repeatModes from '@/models/constants/taskRepeatModes.json'
-import TaskModel from '@/models/task'
-import {error} from '@/message'
 import {useI18n} from 'vue-i18n'
 
+import {error} from '@/message'
+
+import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
+import type {IRepeatAfter} from '@/types/IRepeatAfter'
+import type {ITask} from '@/modelTypes/ITask'
+
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<ITask>,
 		default: () => ({}),
 		required: true,
 	},
@@ -86,7 +87,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue', 'change'])
 
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 const repeatAfter = reactive({
 	amount: 0,
 	type: '',
@@ -104,7 +105,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
 	}
 
@@ -118,8 +119,8 @@ function updateData() {
 	emit('change')
 }
 
-function setRepeatAfter(amount: number, type) {
+function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
-	Object.assign(repeatAfter, {amount, type})
+	Object.assign(repeatAfter, { amount, type})
 	updateData()
 }
 </script>

src/components/tasks/partials/singleTaskInList.vue

@@ -30,7 +30,7 @@
 				{{ task.title }}
 			</span>
 
-			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
+			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0" />
 			<user
 				:avatar-size="27"
 				:is-inline="true"
@@ -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)"
@@ -96,19 +96,20 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
-import TaskModel from '../../../models/task'
+import TaskModel, { type ITask } from '../../../models/task'
-import PriorityLabel from './priorityLabel'
+import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
-import Labels from './labels'
+import Labels from '@/components/tasks/partials/labels.vue'
-import User from '../../misc/user'
+import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
+import Fancycheckbox from '../../input/fancycheckbox.vue'
-import DeferTask from './defer-task'
+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',
@@ -130,7 +131,7 @@ export default defineComponent({
 	},
 	props: {
 		theTask: {
-			type: TaskModel,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		isArchived: {
@@ -188,7 +189,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) {
@@ -213,7 +218,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/useList.ts

@@ -0,0 +1,37 @@
+import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
+import type {MaybeRef} from '@vueuse/core'
+import {useStore} from '@/store'
+
+import ListService from '@/services/list'
+import ListModel from '@/models/list'
+import { success } from '@/message'
+import {useI18n} from 'vue-i18n'
+
+export function useList(listId: MaybeRef<ListModel['id']>) {
+	const listService = shallowReactive(new ListService())
+	const {loading: isLoading} = toRefs(listService)
+	const list : ListModel = reactive(new ListModel({}))
+	const {t} = useI18n()
+
+	watch(
+		() => unref(listId),
+		async (listId) => {
+			const loadedList = await listService.get(new ListModel({id: listId}))
+			Object.assign(list, loadedList)
+		},
+		{immediate: true},
+	)
+
+
+	const store = useStore()
+	async function save() {
+		await store.dispatch('lists/updateList', list)
+		success({message: t('list.edit.success')})
+	}
+
+	return {
+		isLoading: readonly(isLoading),
+		list,
+		save,
+	}
+}

src/composables/useNamespaceSearch.ts

@@ -1,5 +1,5 @@
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 export function useNameSpaceSearch() {
 	const query = ref('')

src/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/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/directives/shortcut.ts

@@ -4,6 +4,9 @@ import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const directive: Directive = {
 	mounted(el, {value}) {
+		if(value === '') {
+			return
+		}
 		if (isAppleDevice() && value.includes('Control')) {
 			value = value.replace('Control', 'Meta')
 		}

src/helpers/attachments.ts

@@ -1,22 +1,27 @@
-import AttachmentModel from '@/models/attachment'
+import AttachmentModel, { type IAttachment } from '@/models/attachment'
-import FileModel from '@/models/file'
+import type {IFile} from '@/models/file'
 
 import AttachmentService from '@/services/attachment'
 import { store } from '@/store'
 
-export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Function) {
+export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
 	return uploadFiles(attachmentService, taskId, files, onSuccess)
 }
 
-export async function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
+export async function uploadFiles(
+	attachmentService: AttachmentService,
+	taskId: number,
+	files: IFile[],
+	onSuccess: Function = () => {},
+) {
 	const attachmentModel = new AttachmentModel({taskId})
 	const response = await attachmentService.create(attachmentModel, files)
 	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
 
-	response.success?.map((attachment: AttachmentModel) => {
+	response.success?.map((attachment: IAttachment) => {
 		store.dispatch('tasks/addTaskAttachment', {
 			taskId,
 			attachment,
@@ -29,6 +34,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/auth.ts

@@ -1,5 +1,5 @@
 import {AuthenticatedHTTPFactory} from '@/http-common'
-import {AxiosResponse} from 'axios'
+import type {AxiosResponse} from 'axios'
 
 let savedToken: string | null = null
 

src/helpers/color/colorIsDark.ts

@@ -1,4 +1,4 @@
-export function colorIsDark(color) {
+export function colorIsDark(color: string | undefined) {
 	if (typeof color === 'undefined') {
 		return true // Defaults to dark
 	}

src/helpers/getHumanSize.ts

@@ -0,0 +1,18 @@
+const SIZES = [
+	'B',
+	'KB',
+	'MB',
+	'GB',
+	'TB',
+ ] as const
+
+export function getHumanSize(inputSize: number) {
+	let iterator = 0
+	let size = inputSize
+	while (size > 1024) {
+		size /= 1024
+		iterator++
+	}
+
+	return Number(Math.round(Number(size + 'e2')) + 'e-2') + ' ' + SIZES[iterator]
+}

src/helpers/getListTitle.ts

@@ -1,8 +1,7 @@
 import {i18n} from '@/i18n'
+import type { IList } from '@/models/list'
 
-import type ListModal from '@/models/list'
+export function getListTitle(l: IList) {
-
-export function getListTitle(l: ListModal) {
 	if (l.id === -1) {
 		return i18n.global.t('list.pseudo.favorites.title')
 	}

src/helpers/getNamespaceTitle.ts

@@ -1,7 +1,7 @@
 import {i18n} from '@/i18n'
-import NamespaceModel from '@/models/namespace'
+import type {INamespace} from '@/models/namespace'
 
-export const getNamespaceTitle = (n: NamespaceModel) => {
+export const getNamespaceTitle = (n: INamespace) => {
 	if (n.id === -1) {
 		return i18n.global.t('namespace.pseudo.sharedLists.title')
 	}

src/helpers/labels.ts

@@ -1,18 +1,10 @@
 import {createNewIndexer} from '../indexes'
 
+import type {LabelState} from '@/store/types'
+import type {ILabel} from '@/models/label'
+
 const {search} = createNewIndexer('labels', ['title', 'description'])
 
-export interface label {
-	id: number,
-	title: string,
-}
-
-interface labelState {
-	labels: {
-		[k: number]: label,
-	},
-}
-
 /**
  * Checks if a list of labels is available in the store and filters them then query
  * @param {Object} state
@@ -20,7 +12,7 @@ interface labelState {
  * @param {String} query
  * @returns {Array}
  */
-export function filterLabelsByQuery(state: labelState, labelsToHide: label[], query: string) {
+export function filterLabelsByQuery(state: LabelState, labelsToHide: ILabel[], query: string) {
 	const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
 
 	return search(query)
@@ -36,6 +28,6 @@ export function filterLabelsByQuery(state: labelState, labelsToHide: label[], qu
  * @param {Array} ids
  * @returns {Array}
  */
-export function getLabelsByIds(state: labelState, ids: number[]) {
+export function getLabelsByIds(state: LabelState, ids: ILabel['id'][]) {
 	return Object.values(state.labels).filter(({id}) => ids.includes(id))
 }

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/saveCollapsedBucketState.ts

@@ -1,4 +1,4 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/models/list'
 
 const key = 'collapsedBuckets'
 
@@ -11,7 +11,10 @@ const getAllState = () => {
 	return JSON.parse(saved)
 }
 
-export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBuckets) => {
+export const saveCollapsedBucketState = (
+	listId: IList['id'],
+	collapsedBuckets,
+) => {
 	const state = getAllState()
 	state[listId] = collapsedBuckets
 	for (const bucketId in state[listId]) {
@@ -22,7 +25,7 @@ export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBucke
 	localStorage.setItem(key, JSON.stringify(state))
 }
 
-export const getCollapsedBucketState = (listId : ListModel['id']) => {
+export const getCollapsedBucketState = (listId : IList['id']) => {
 	const state = getAllState()
 	if (typeof state[listId] !== 'undefined') {
 		return state[listId]

src/helpers/savedFilter.ts

@@ -1,6 +1,6 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/models/list'
 
-export function getSavedFilterIdFromListId(listId: ListModel['id']) {
+export function getSavedFilterIdFromListId(listId: IList['id']) {
 	let filterId = listId * -1 - 1
 	// FilterIds from listIds are always positive
 	if (filterId < 0) {

src/helpers/utils.ts

@@ -1,8 +1,8 @@
-export function findIndexById(array : [], id : string | number) {
+export function findIndexById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.findIndex(({id: currentId}) => currentId === id)
 }
 
-export function findById(array : [], id : string | number) {
+export function findById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.find(({id: currentId}) => currentId === id)
 }
 
@@ -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/http-common/index.ts

@@ -2,17 +2,35 @@ import axios from 'axios'
 import {getToken} from '@/helpers/auth'
 
 export function HTTPFactory() {
-	return axios.create({
+	const instance = axios.create({baseURL: window.API_URL})
-		baseURL: window.API_URL,
+
+	instance.interceptors.request.use((config) => {
+		// by setting the baseURL fresh for every request
+		// we make sure that it is never outdated in case it is updated
+		config.baseURL = window.API_URL
+
+		return config
 	})
+
+	return instance
 }
 
-export function AuthenticatedHTTPFactory(token = getToken()) {	
+export function AuthenticatedHTTPFactory() {	
-	return axios.create({
+	const instance = HTTPFactory()
-		baseURL: window.API_URL,
+
-		headers: {
+	instance.interceptors.request.use((config) => {
-			Authorization: `Bearer ${token}`,
+		config.headers = {
+			...config.headers,
 			'Content-Type': 'application/json',
-		},
+		}
+
+		// Set the default auth header if we have a token
+		const token = getToken()
+		if (token !== null) {
+			config.headers['Authorization'] = `Bearer ${token}`
+		}
+		return config
 	})
+
+	return instance
 }

src/i18n/lang/en.json

@@ -873,7 +873,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

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
@@ -16,7 +14,7 @@ import Notifications from '@kyvg/vue3-notification'
 import './registerServiceWorker'
 
 // Vuex
-import {store} from './store'
+import { store, key } from './store'
 // i18n
 import {i18n} from './i18n'
 
@@ -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)
@@ -127,7 +107,7 @@ if (window.SENTRY_ENABLED) {
 import ganttastic from '@infectoone/vue-ganttastic'
 app.use(ganttastic)
 
-app.use(store)
+app.use(store, key) // pass the injection key
 app.use(router)
 app.use(i18n)
 

src/modelSchema/common/repeats.ts

@@ -0,0 +1,43 @@
+import { REPEAT_TYPES, type IRepeatAfter } from '@/types/IRepeatAfter'
+import { nativeEnum, number, object, preprocess } from 'zod'
+
+export const RepeatsSchema = preprocess(
+	(repeats: unknown) => {
+		// Parses the "repeat after x seconds" from the task into a usable js object inside the task.
+	
+		if (typeof repeats !== 'number') {
+			return repeats
+		}
+	
+		const repeatAfterHours = (repeats / 60) / 60
+		
+		const repeatAfter : IRepeatAfter = {
+			type: 'hours',
+			amount: repeatAfterHours,
+		}
+	
+		// if its dividable by 24, its something with days, otherwise hours
+		if (repeatAfterHours % 24 === 0) {
+			const repeatAfterDays = repeatAfterHours / 24
+			if (repeatAfterDays % 7 === 0) {
+				repeatAfter.type = 'weeks'
+				repeatAfter.amount = repeatAfterDays / 7
+			} else if (repeatAfterDays % 30 === 0) {
+				repeatAfter.type = 'months'
+				repeatAfter.amount = repeatAfterDays / 30
+			} else if (repeatAfterDays % 365 === 0) {
+				repeatAfter.type = 'years'
+				repeatAfter.amount = repeatAfterDays / 365
+			} else {
+				repeatAfter.type = 'days'
+				repeatAfter.amount = repeatAfterDays
+			}
+		}
+	
+		return repeatAfter
+	},
+	object({
+		type: nativeEnum(REPEAT_TYPES),
+		amount: number().int(),
+	}),
+)

src/modelTypes/IAbstract.ts

@@ -0,0 +1,5 @@
+import type {Right} from '@/constants/rights'
+
+export interface IAbstract {
+	maxRight: Right | null // FIXME: should this be readonly?
+}

src/modelTypes/IAttachment.ts

@@ -0,0 +1,11 @@
+import type {IAbstract} from './IAbstract'
+import type {IFile} from './IFile'
+import type {IUser} from './IUser'
+
+export interface IAttachment extends IAbstract {
+	id: number
+	taskId: number
+	createdBy: IUser
+	file: IFile
+	created: Date
+}

src/modelTypes/IAvatar.ts

@@ -0,0 +1,7 @@
+import type {IAbstract} from './IAbstract'
+
+export type AvatarProvider = 'default' | 'initials' | 'gravatar' | 'marble' | 'upload'
+
+export interface IAvatar extends IAbstract {
+	avatarProvider: AvatarProvider
+}

src/modelTypes/IBackgroundImage.ts

@@ -0,0 +1,12 @@
+import type {IAbstract} from './IAbstract'
+
+export interface IBackgroundImage extends IAbstract {
+	id: number
+	url: string
+	thumb: string
+	info: {
+		author: string
+		authorName: string
+	}
+	blurHash: string  
+}

src/modelTypes/IBucket.ts

@@ -0,0 +1,17 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+import type {ITask} from './ITask'
+
+export interface IBucket extends IAbstract {
+	id: number
+	title: string
+	listId: number
+	limit: number
+	tasks: ITask[]
+	isDoneBucket: boolean
+	position: number
+	
+	createdBy: IUser
+	created: Date
+	updated: Date
+}

src/modelTypes/ICaldavToken.ts

@@ -0,0 +1,7 @@
+import type {IAbstract} from './IAbstract'
+
+export interface ICaldavToken extends IAbstract {
+	id: number;
+
+	created: Date;
+}

src/modelTypes/IEmailUpdate.ts

@@ -0,0 +1,6 @@
+import type {IAbstract} from './IAbstract'
+
+export interface IEmailUpdate extends IAbstract {
+	newEmail: string
+	password: string
+}

src/modelTypes/IFile.ts

@@ -0,0 +1,10 @@
+import type {IAbstract} from './IAbstract'
+
+export interface IFile extends IAbstract {
+	id: number
+	mime: string
+	name: string
+	size: number
+
+	created: Date
+} 

src/modelTypes/ILabel.ts

@@ -0,0 +1,15 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+
+export interface ILabel extends IAbstract {
+	id: number
+	title: string
+	hexColor: string
+	description: string
+	createdBy: IUser
+	listId: number
+	textColor: string
+
+	created: Date
+	updated: Date
+}

src/modelTypes/ILabelTask.ts

@@ -0,0 +1,7 @@
+import type {IAbstract} from './IAbstract'
+
+export interface ILabelTask extends IAbstract {
+	id: number
+	taskId: number
+	labelId: number
+}

src/modelTypes/ILinkShare.ts

@@ -0,0 +1,17 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+import type { Right } from '@/constants/rights'
+
+export interface ILinkShare extends IAbstract {
+	id: number
+	hash: string
+	right: Right
+	sharedBy: IUser
+	sharingType: number // FIXME: use correct numbers
+	listId: number
+	name: string
+	password: string
+
+	created: Date
+	updated: Date
+}

src/modelTypes/IList.ts

@@ -0,0 +1,26 @@
+import type {IAbstract} from './IAbstract'
+import type {ITask} from './ITask'
+import type {IUser} from './IUser'
+import type {ISubscription} from './ISubscription'
+import type {INamespace} from './INamespace'
+
+
+export interface IList extends IAbstract {
+	id: number
+	title: string
+	description: string
+	owner: IUser
+	tasks: ITask[]
+	namespaceId: INamespace['id']
+	isArchived: boolean
+	hexColor: string
+	identifier: string
+	backgroundInformation: any // FIXME: improve type
+	isFavorite: boolean
+	subscription: ISubscription
+	position: number
+	backgroundBlurHash: string
+	
+	created: Date
+	updated: Date
+}

src/modelTypes/IListDuplicate.ts

@@ -0,0 +1,9 @@
+import type {IAbstract} from './IAbstract'
+import type {IList} from './IList'
+import type {INamespace} from './INamespace'
+
+export interface IListDuplicate extends IAbstract {
+	listId: number
+	namespaceId: INamespace['id']
+	list: IList
+}

src/modelTypes/INamespace.ts

@@ -0,0 +1,18 @@
+import type {IAbstract} from './IAbstract'
+import type {IList} from './IList'
+import type {IUser} from './IUser'
+import type {ISubscription} from './ISubscription'
+
+export interface INamespace extends IAbstract {
+	id: number
+	title: string
+	description: string
+	owner: IUser
+	lists: IList[]
+	isArchived: boolean
+	hexColor: string
+	subscription: ISubscription
+
+	created: Date
+	updated: Date
+}

src/modelTypes/INotification.ts

@@ -0,0 +1,51 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+import type {ITask} from './ITask'
+import type {ITaskComment} from './ITaskComment'
+import type {ITeam} from './ITeam'
+import type { IList } from './IList'
+
+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: IUser
+}
+interface NotificationTask extends Notification {
+	task: ITask
+	comment: ITaskComment
+}
+
+interface NotificationAssigned extends Notification {
+	task: ITask
+	assignee: IUser
+}
+
+interface NotificationDeleted extends Notification {
+	task: ITask
+}
+
+interface NotificationCreated extends Notification {
+	task: ITask
+	list: IList
+}
+
+interface NotificationMemberAdded extends Notification {
+	member: IUser
+	team: ITeam
+}
+
+export interface INotification extends IAbstract {
+	id: number
+	name: string
+	notification: NotificationTask | NotificationAssigned | NotificationDeleted | NotificationCreated | NotificationMemberAdded
+	read: boolean
+	readAt: Date | null
+
+	created: Date
+}

src/modelTypes/IPasswordReset.ts

@@ -0,0 +1,7 @@
+import type {IAbstract} from './IAbstract'
+
+export interface IPasswordReset extends IAbstract {
+	token: string
+	newPassword: string
+	email: string
+}

src/modelTypes/IPasswordUpdate.ts

@@ -0,0 +1,6 @@
+import type {IAbstract} from './IAbstract'
+
+export interface IPasswordUpdate extends IAbstract {
+	newPassword: string
+	oldPassword: string
+}

src/modelTypes/ISavedFilter.ts

@@ -0,0 +1,14 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+import type {IFilter} from '@/types/IFilter'
+
+export interface ISavedFilter extends IAbstract {
+	id: number
+	title: string
+	description: string
+	filters: IFilter
+
+	owner: IUser
+	created: Date
+	updated: Date
+}

src/modelTypes/ISubscription.ts

@@ -0,0 +1,11 @@
+import type {IAbstract} from './IAbstract'
+import type {IUser} from './IUser'
+
+export interface ISubscription extends IAbstract {
+	id: number
+	entity: string // FIXME: correct type?
+	entityId: number // FIXME: correct type?
+	user: IUser
+
+	created: Date
+}