feat: improve store and model typing

src/components/home/navigation.vue

@@ -156,8 +156,8 @@ import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import type NamespaceModel from '@/models/namespace'
-import type ListModel from '@/models/list'
+import type { IList } from '@/models/list'
+import type { INamespace } from '@/models/namespace'
 
 const drag = ref(false)
 const dragOptions = {
@@ -172,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}) => {
@@ -195,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) {
@@ -209,14 +209,14 @@ function resize() {
 	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: NamespaceModel['id']) {
+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
@@ -224,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
@@ -241,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

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 {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 SubscriptionModel from '@/models/subscription'
+import type {IList} from '@/models/list'
+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/list-card.vue

@@ -43,9 +43,9 @@ import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import type 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/subscription.vue

@@ -39,7 +39,7 @@ 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'
 
@@ -51,7 +51,7 @@ const props = defineProps({
 		default: true,
 	},
 	subscription: {
-		type: Object as PropType<SubscriptionModel>,
+		type: Object as PropType<ISubscription>,
 		default: null,
 	},
 	type: {

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

@@ -52,7 +52,7 @@ 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 NotificationModel, { NOTIFICATION_NAMES as names} from '@/models/notification'
+import { NOTIFICATION_NAMES as names, type INotification} from '@/models/notification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {useStore} from 'vuex'
 import {useRouter} from 'vue-router'
@@ -63,7 +63,7 @@ const LOAD_NOTIFICATIONS_INTERVAL = 10000
 const store = useStore()
 const router = useRouter()
 
-const allNotifications = ref<NotificationModel[]>([])
+const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 

src/components/sharing/linkSharing.vue

@@ -181,13 +181,13 @@ import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import {RIGHTS} from '@/models/constants/rights'
-import LinkShareModel from '@/models/linkShare'
-import type ListModel from '@/models/list'
+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: {
@@ -198,7 +198,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref<LinkShareModel[]>([])
+const linkShares = ref<ILinkShare[]>([])
 const linkShareService = shallowReactive(new LinkShareService())
 const selectedRight = ref(RIGHTS.READ)
 const name = ref('')
@@ -217,7 +217,7 @@ watch(
 const store = useStore()
 const frontendUrl = computed(() => store.state.config.frontendUrl)
 
-async function load(listId: ListModel['id']) {
+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
@@ -226,7 +226,7 @@ async function load(listId: ListModel['id']) {
 	linkShares.value = await linkShareService.getAll({listId})
 }
 
-async function add(listId: ListModel['id']) {
+async function add(listId: IList['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
 		listId,
@@ -242,7 +242,7 @@ async function add(listId: ListModel['id']) {
 	await load(listId)
 }
 
-async function remove(listId: ListModel['id']) {
+async function remove(listId: IList['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,

src/components/sharing/userTeam.vue

@@ -143,18 +143,22 @@ import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
-import UserNamespaceModel from '@/models/userNamespace'
-import UserListModel from '@/models/userList'
+import UserNamespaceModel, { type IUserNamespace } from '@/models/userNamespace'
+
 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 TeamListModel from '@/models/teamList'
+import TeamNamespaceModel, { type ITeamNamespace } from '@/models/teamNamespace'
+
 import TeamListService from '@/services/teamList'
+import TeamListModel, { type ITeamList } from '@/models/teamList'
+
 import TeamService from '@/services/team'
-import TeamModel from '@/models/team'
+import TeamModel, { type ITeam } from '@/models/team'
 
 import {RIGHTS} from '@/models/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -183,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 stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
-let searchService: ShallowReactive<UserService | TeamService>
-let sharable: Ref<UserModel | TeamModel>
+let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
+let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
+let searchService: UserService | TeamService
+let sharable: Ref<IUser | ITeam>
 
 const searchLabel = ref('')
 const selectedRight = ref({})

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<{
-	task?: TaskModel | null,
-}>()
+const props = defineProps({
+	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

@@ -147,8 +147,7 @@
 import {defineComponent} from 'vue'
 
 import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '../../../models/attachment'
-import type FileModel from '@/models/file'
+import AttachmentModel, { type IAttachment } from '@/models/attachment'
 import User from '@/components/misc/user.vue'
 import {mapState} from 'vuex'
 
@@ -157,6 +156,7 @@ 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'
 
 export default defineComponent({
 	name: 'attachments',
@@ -192,7 +192,7 @@ export default defineComponent({
 	setup(props) {
 		const copy = useCopyToClipboard()
 
-		function copyUrl(attachment: AttachmentModel) {
+		function copyUrl(attachment: IAttachment) {
 			copy(generateAttachmentUrl(props.taskId, attachment.id))
 		}
 
@@ -235,7 +235,7 @@ export default defineComponent({
 		formatDateSince,
 		formatDateLong,
 
-		downloadAttachment(attachment: AttachmentModel) {
+		downloadAttachment(attachment: IAttachment) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -245,7 +245,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files: FileModel[]) {
+		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

@@ -159,12 +159,12 @@ 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 TaskModel from '@/models/task'
+import type { ITask } from '@/models/task'
 const props = defineProps({
 	taskId: {
 		type: Number,
@@ -178,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())
@@ -188,8 +188,8 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref<TaskModel['id'] | null>(null)
-const saving = ref<TaskModel['id'] | null>(null)
+const saved = ref<ITask['id'] | null>(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)
@@ -215,7 +215,7 @@ function attachmentUpload(...args) {
 
 const taskCommentService = shallowReactive(new TaskCommentService())
 
-async function loadComments(taskId: TaskModel['id']) {
+async function loadComments(taskId: ITask['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -259,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: TaskCommentModel['id']) {
+function toggleDelete(commentId: ITaskComment['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }
@@ -294,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

@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, toRefs} from 'vue'
-import TaskModel from '@/models/task'
+import {computed, toRefs, type PropType} from 'vue'
+import type { ITask } from '@/models/task'
 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/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 {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

@@ -30,17 +30,17 @@
 </template>
 
 <script setup lang="ts">
-import {ref,computed, watch} from 'vue'
+import {ref,computed, watch, type PropType} from 'vue'
 import {useStore} from 'vuex'
 
 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: {
@@ -54,7 +54,7 @@ const props = defineProps({
 
 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

@@ -37,9 +37,9 @@ import Multiselect from '@/components/input/multiselect.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import type UserModel from '@/models/user'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
+import type { IUser } from '@/models/user'
 
 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

src/components/tasks/partials/editLabels.vue

@@ -43,7 +43,7 @@ import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
 import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
-import LabelModel from '@/models/label'
+import LabelModel, { type ILabel } from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {success} from '@/message'
 
@@ -52,7 +52,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<LabelModel[]>,
+		type: Array as PropType<ILabel[]>,
 		default: () => [],
 	},
 	taskId: {
@@ -71,7 +71,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 +92,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,7 +110,7 @@ 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})
 	}

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

@@ -74,7 +74,7 @@ import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
-import TaskModel, {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'
@@ -96,7 +96,7 @@ export default defineComponent({
 	},
 	props: {
 		task: {
-			type: Object as PropType<TaskModel>,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		loading: {
@@ -117,7 +117,7 @@ export default defineComponent({
 		formatISO,
 		formatDateSince,
 		colorIsDark,
-		async toggleTaskDone(task: TaskModel) {
+		async toggleTaskDone(task: ITask) {
 			this.loadingInternal = true
 			try {
 				const done = !task.done

src/components/tasks/partials/labels.vue

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

src/components/tasks/partials/listSearch.vue

@@ -21,15 +21,12 @@ import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
 import {useStore} from 'vuex'
 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>,
-		validator(value) {
-			return value instanceof ListModel
-		},
+		type: Object as PropType<IList>,
 		required: false,
 	},
 })
@@ -38,7 +35,7 @@ const emit = defineEmits(['update:modelValue'])
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list: ListModel= reactive(new ListModel())
+const list: IList = reactive(new ListModel())
 
 watch(
 	() => props.modelValue,
@@ -57,7 +54,7 @@ function findLists(query: string) {
 	foundLists.value = store.getters['lists/searchList'](query)
 }
 
-function select(l: ListModel | null) {
+function select(l: IList | null) {
 	Object.assign(list, l)
 	emit('update:modelValue', list)
 }

src/components/tasks/partials/repeatAfter.vue

@@ -63,14 +63,14 @@
 
 <script setup lang="ts">
 import {ref, reactive, watch, type PropType} from 'vue'
-import {error} from '@/message'
 import {useI18n} from 'vue-i18n'
-import {TASK_REPEAT_MODES, type RepeatAfter} from '@/models/task'
-import type TaskModel from '@/models/task'
+
+import {error} from '@/message'
+import {TASK_REPEAT_MODES, type ITask, type RepeatAfter} from '@/models/task'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<TaskModel>,
+		type: Object as PropType<ITask>,
 		default: () => ({}),
 		required: true,
 	},
@@ -84,7 +84,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: '',

src/components/tasks/partials/singleTaskInList.vue

@@ -98,7 +98,7 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import TaskModel from '../../../models/task'
+import TaskModel, { type ITask } from '../../../models/task'
 import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -129,7 +129,7 @@ export default defineComponent({
 	},
 	props: {
 		theTask: {
-			type: TaskModel,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		isArchived: {