From bbf4ef4697fc6338ad603e2491fe4aed61057cd8 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Wed, 28 Sep 2022 16:08:23 +0000
Subject: [PATCH 01/19] feat: ListList script setup (#2441)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2441
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 .../list/list-settings-dropdown.vue           |   5 +-
 src/composables/taskList.ts                   |   7 +-
 src/helpers/savedFilter.ts                    |   4 +
 src/models/list.ts                            |  10 -
 src/views/list/ListKanban.vue                 |   8 +-
 src/views/list/ListList.vue                   | 306 +++++++++---------
 6 files changed, 163 insertions(+), 177 deletions(-)

diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index bcd8a80ff..b56adcdcd 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -1,6 +1,6 @@
 <template>
 	<dropdown>
-		<template v-if="isSavedFilter">
+		<template v-if="isSavedFilter(list)">
 			<dropdown-item
 				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
@@ -78,7 +78,7 @@
 <script setup lang="ts">
 import {ref, computed, watchEffect, type PropType} from 'vue'
 
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+import {isSavedFilter} 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'
@@ -100,5 +100,4 @@ watchEffect(() => {
 
 const configStore = useConfigStore()
 const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders?.length > 0)
-const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
 </script>
diff --git a/src/composables/taskList.ts b/src/composables/taskList.ts
index 0c6f09e22..e23f10087 100644
--- a/src/composables/taskList.ts
+++ b/src/composables/taskList.ts
@@ -2,6 +2,7 @@ import {ref, shallowReactive, watch, computed} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
+import type { ITask } from '@/modelTypes/ITask'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
 export const getDefaultParams = () => ({
@@ -70,7 +71,7 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 	const loading = computed(() => taskCollectionService.loading)
 	const totalPages = computed(() => taskCollectionService.totalPages)
 
-	const tasks = ref([])
+	const tasks = ref<ITask[]>([])
 	async function loadTasks() {
 		tasks.value = []
 		tasks.value = await taskCollectionService.getAll(...getAllTasksParams.value)
@@ -81,10 +82,10 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 	watch(() => route.query, (query) => {
 		const { page: pageQueryValue, search: searchQuery } = query
 		if (searchQuery !== undefined) {
-			search.value = searchQuery
+			search.value = searchQuery as string
 		}
 		if (pageQueryValue !== undefined) {
-			page.value = parseInt(pageQueryValue)
+			page.value = Number(pageQueryValue)
 		}
 
 	}, { immediate: true })
diff --git a/src/helpers/savedFilter.ts b/src/helpers/savedFilter.ts
index 3ad23f087..326315704 100644
--- a/src/helpers/savedFilter.ts
+++ b/src/helpers/savedFilter.ts
@@ -7,4 +7,8 @@ export function getSavedFilterIdFromListId(listId: IList['id']) {
 		filterId = 0
 	}
 	return filterId
+}
+
+export function isSavedFilter(list: IList) {
+	return getSavedFilterIdFromListId(list.id) > 0
 }
\ No newline at end of file
diff --git a/src/models/list.ts b/src/models/list.ts
index b041694e1..a9b834d59 100644
--- a/src/models/list.ts
+++ b/src/models/list.ts
@@ -9,8 +9,6 @@ import type {ITask} from '@/modelTypes/ITask'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {ISubscription} from '@/modelTypes/ISubscription'
 
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
-
 export default class ListModel extends AbstractModel<IList> implements IList {
 	id = 0
 	title = ''
@@ -52,12 +50,4 @@ export default class ListModel extends AbstractModel<IList> implements IList {
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 	}
-
-	isSavedFilter() {
-		return this.getSavedFilterId() > 0
-	}
-
-	getSavedFilterId() {
-		return getSavedFilterIdFromListId(this.id)
-	}
 }
\ No newline at end of file
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index bb3fb5144..c1d875383 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -1,7 +1,7 @@
 <template>
 	<ListWrapper class="list-kanban" :list-id="listId" viewName="kanban">
 		<template #header>
-			<div class="filter-container" v-if="isSavedFilter">
+			<div class="filter-container" v-if="isSavedFilter(list)">
 				<div class="items">
 					<filter-popup
 						v-model="params"
@@ -239,6 +239,7 @@ import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveC
 import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
+import {isSavedFilter} from '@/helpers/savedFilter'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -324,9 +325,6 @@ export default defineComponent({
 			})
 		},
 
-		isSavedFilter() {
-			return this.list.isSavedFilter && !this.list.isSavedFilter()
-		},
 		loadBucketParameter() {
 			return {
 				listId: this.listId,
@@ -356,6 +354,8 @@ export default defineComponent({
 	},
 
 	methods: {
+		isSavedFilter,
+
 		loadBuckets() {
 			const {listId, params} = this.loadBucketParameter
 
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 306624806..e92da5223 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -3,7 +3,7 @@
 		<template #header>
 		<div
 			class="filter-container"
-			v-if="list.isSavedFilter && !list.isSavedFilter()"
+			v-if="!isSavedFilter(list)"
 		>
 			<div class="items">
 				<div class="search">
@@ -58,7 +58,7 @@
 			>
 				<add-task
 					@taskAdded="updateTaskList"
-					ref="addTask"
+					ref="addTaskRef"
 					:default-position="firstNewPosition"
 				/>
 			</template>
@@ -76,7 +76,7 @@
 					v-if="tasks && tasks.length > 0"
 				>
 					<draggable
-						v-bind="dragOptions"
+						v-bind="DRAG_OPTIONS"
 						v-model="tasks"
 						group="tasks"
 						@start="() => drag = true"
@@ -94,7 +94,7 @@
 							<single-task-in-list
 								:show-list-color="false"
 								:disabled="!canWrite"
-								:can-mark-as-done="canWrite || (list.isSavedFilter && list.isSavedFilter())"
+								:can-mark-as-done="canWrite || isSavedFilter(list)"
 								:the-task="t"
 								@taskUpdated="updateTasks"
 							>
@@ -114,7 +114,7 @@
 						</template>
 					</draggable>
 				</div>
-				<edit-task 
+				<EditTask
 					v-if="isTaskEdit"
 					class="taskedit mt-0"
 					:title="$t('list.list.editTask')"
@@ -135,25 +135,32 @@
 </template>
 
 <script lang="ts">
-import { ref, toRef, defineComponent } from 'vue'
+export default { name: 'List' }
+</script>
 
+<script setup lang="ts">
+import {ref, computed, toRef, nextTick, onMounted} from 'vue'
+import draggable from 'zhyswan-vuedraggable'
+import {useRoute, useRouter} from 'vue-router'
+
+import ListWrapper from './ListWrapper.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import ButtonLink from '@/components/misc/ButtonLink.vue'
-import ListWrapper from './ListWrapper.vue'
 import EditTask from '@/components/tasks/edit-task.vue'
 import AddTask from '@/components/tasks/add-task.vue'
 import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
-import { useTaskList } from '@/composables/taskList'
-import {RIGHTS as Rights} from '@/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
-import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
 
-import draggable from 'zhyswan-vuedraggable'
-import {calculateItemPosition} from '../../helpers/calculateItemPosition'
+import {useStore} from '@/store'
+import {HAS_TASKS} from '@/store/mutation-types'
+import {useTaskList} from '@/composables/taskList'
+import {RIGHTS as Rights} from '@/constants/rights'
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import type {ITask} from '@/modelTypes/ITask'
+import {isSavedFilter} from '@/helpers/savedFilter'
 
 function sortTasks(tasks: ITask[]) {
 	if (tasks === null || Array.isArray(tasks) && tasks.length === 0) {
@@ -173,153 +180,138 @@ function sortTasks(tasks: ITask[]) {
 	})
 }
 
-export default defineComponent({
-	name: 'List',
-	
-	props: {
-		listId: {
-			type: Number,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			ctaVisible: false,
-			showTaskSearch: false,
-
-			drag: false,
-			dragOptions: {
-				animation: 100,
-				ghostClass: 'ghost',
-			},
-		}
-	},
-	components: {
-		BaseButton,
-		ListWrapper,
-		Nothing,
-		FilterPopup,
-		SingleTaskInList,
-		EditTask,
-		AddTask,
-		draggable,
-		Pagination,
-		ButtonLink,
-	},
-
-	setup(props) {
-		const taskEditTask = ref(null)
-		const isTaskEdit = ref(false)
-
-		// This function initializes the tasks page and loads the first page of tasks
-		// function beforeLoad() {
-		// 	taskEditTask.value = null
-		// 	isTaskEdit.value = false
-		// }
-
-		const taskList = useTaskList(toRef(props, 'listId'), {
-			position: 'asc',
-		})
-
-		return {
-			taskEditTask,
-			isTaskEdit,
-			...taskList,
-		}
-	},
-	computed: {
-		isAlphabeticalSorting() {
-			return this.params.sort_by.find( sortBy => sortBy === ALPHABETICAL_SORT ) !== undefined
-		},
-		firstNewPosition() {
-			if (this.tasks.length === 0) {
-				return 0
-			}
-
-			return calculateItemPosition(null, this.tasks[0].position)
-		},
-		canWrite() {
-			return this.list.maxRight > Rights.READ && this.list.id > 0
-		},
-		list() {
-			return this.$store.state.currentList
-		},
-	},
-	mounted() {
-		this.$nextTick(() => (this.ctaVisible = true))
-	},
-	methods: {
-		searchTasks() {
-			// Only search if the search term changed
-			if (this.$route.query === this.searchTerm) {
-				return
-			}
-
-			this.$router.push({
-				name: 'list.list',
-				query: {search: this.searchTerm},
-			})
-		},
-		hideSearchBar() {
-			// This is a workaround.
-			// When clicking on the search button, @blur from the input is fired. If we
-			// would then directly hide the whole search bar directly, no click event
-			// from the button gets fired. To prevent this, we wait 200ms until we hide
-			// everything so the button has a chance of firing the search event.
-			setTimeout(() => {
-				this.showTaskSearch = false
-			}, 200)
-		},
-		focusNewTaskInput() {
-			this.$refs.addTask.focusTaskInput()
-		},
-		updateTaskList(task: ITask) {
-			if ( this.isAlphabeticalSorting ) {
-				// reload tasks with current filter and sorting
-				this.loadTasks(1, undefined, undefined, true)
-			}
-			else {
-				this.tasks = [
-					task,
-					...this.tasks,
-				]
-			}
-
-			this.$store.commit(HAS_TASKS, true)
-		},
-		editTask(id: ITask['id']) {
-			this.taskEditTask = {...this.tasks.find(t => t.id === parseInt(id))}
-			this.isTaskEdit = true
-		},
-		updateTasks(updatedTask: ITask) {
-			for (const t in this.tasks) {
-				if (this.tasks[t].id === updatedTask.id) {
-					this.tasks[t] = updatedTask
-					break
-				}
-			}
-			// FIXME: Use computed
-			sortTasks(this.tasks)
-		},
-
-		async saveTaskPosition(e) {
-			this.drag = false
-
-			const task = this.tasks[e.newIndex]
-			const taskBefore = this.tasks[e.newIndex - 1] ?? null
-			const taskAfter = this.tasks[e.newIndex + 1] ?? null
-
-			const newTask = {
-				...task,
-				position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
-			}
-
-			const updatedTask = await this.$store.dispatch('tasks/update', newTask)
-			this.tasks[e.newIndex] = updatedTask
-		},
+const props = defineProps({
+	listId: {
+		type: Number,
+		required: true,
 	},
 })
+
+const ctaVisible = ref(false)
+const showTaskSearch = ref(false)
+
+const drag = ref(false)
+const DRAG_OPTIONS = {
+	animation: 100,
+	ghostClass: 'ghost',
+} as const
+
+
+const taskEditTask = ref(null)
+const isTaskEdit = ref(false)
+
+const {
+	tasks,
+	loading,
+	totalPages,
+	currentPage,
+	loadTasks,
+	searchTerm,
+	params,
+	// sortByParam,
+} = useTaskList(toRef(props, 'listId'), {position: 'asc' })
+
+
+const isAlphabeticalSorting = computed(() => {
+	return params.value.sort_by.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
+})
+
+const firstNewPosition = computed(() => {
+	if (tasks.value.length === 0) {
+		return 0
+	}
+
+	return calculateItemPosition(null, tasks.value[0].position)
+})
+
+const store = useStore()
+const list = computed(() => store.state.currentList)
+
+const canWrite = computed(() => {
+	return list.value.maxRight > Rights.READ && list.value.id > 0
+})
+
+onMounted(async () => {
+	await nextTick()
+	ctaVisible.value = true
+})
+
+const route = useRoute()
+const router = useRouter()
+function searchTasks() {
+	// Only search if the search term changed
+	if (route.query as unknown as string === searchTerm.value) {
+		return
+	}
+
+	router.push({
+		name: 'list.list',
+		query: {search: searchTerm.value},
+	})
+}
+
+function hideSearchBar() {
+	// This is a workaround.
+	// When clicking on the search button, @blur from the input is fired. If we
+	// would then directly hide the whole search bar directly, no click event
+	// from the button gets fired. To prevent this, we wait 200ms until we hide
+	// everything so the button has a chance of firing the search event.
+	setTimeout(() => {
+		showTaskSearch.value = false
+	}, 200)
+}
+
+const addTaskRef = ref<typeof AddTask | null>(null)
+function focusNewTaskInput() {
+	addTaskRef.value?.focusTaskInput()
+}
+
+function updateTaskList(task: ITask) {
+	if (isAlphabeticalSorting.value ) {
+		// reload tasks with current filter and sorting
+		loadTasks(1, undefined, undefined, true)
+	}
+	else {
+		tasks.value = [
+			task,
+			...tasks.value,
+		]
+	}
+
+	store.commit(HAS_TASKS, true)
+}
+
+function editTask(id: ITask['id']) {
+	taskEditTask.value = {...tasks.value.find(t => t.id === Number(id))}
+	isTaskEdit.value = true
+}
+
+function updateTasks(updatedTask: ITask) {
+	for (const t in tasks.value) {
+		if (tasks.value[t].id === updatedTask.id) {
+			tasks.value[t] = updatedTask
+			break
+		}
+	}
+	// FIXME: Use computed
+	sortTasks(tasks.value)
+}
+
+async function saveTaskPosition(e) {
+	drag.value = false
+
+	const task = tasks.value[e.newIndex]
+	const taskBefore = tasks.value[e.newIndex - 1] ?? null
+	const taskAfter = tasks.value[e.newIndex + 1] ?? null
+
+	const newTask = {
+		...task,
+		position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
+	}
+
+	const updatedTask = await this.$store.dispatch('tasks/update', newTask)
+	this.tasks[e.newIndex] = updatedTask
+}
 </script>
 
 <style lang="scss" scoped>

From f30c964c06987f87b615c3eec25197241175db96 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 21 Sep 2022 02:31:52 +0200
Subject: [PATCH 02/19] feat: move auth to stores

---
 src/{store/modules => stores}/auth.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{store/modules => stores}/auth.ts (100%)

diff --git a/src/store/modules/auth.ts b/src/stores/auth.ts
similarity index 100%
rename from src/store/modules/auth.ts
rename to src/stores/auth.ts

From 7b53e684aa405a7874f189dcb404c031dfed1388 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 21 Sep 2022 03:37:39 +0200
Subject: [PATCH 03/19] feat: port auth store to pinia

---
 src/App.vue                                   |   8 +-
 src/components/date/datepickerWithRange.vue   |   6 +-
 src/components/home/TheNavigation.vue         |  12 +-
 src/components/home/contentAuth.vue           |  13 +-
 src/components/input/datepicker.vue           |   7 +-
 .../notifications/notifications.vue           |   8 +-
 src/components/sharing/userTeam.vue           |   8 +-
 src/components/tasks/add-task.vue             |   4 +-
 src/components/tasks/partials/comments.vue    |   8 +-
 src/components/tasks/partials/defer-task.vue  |  12 +-
 src/router/index.ts                           |   8 +-
 src/store/index.ts                            |   8 +-
 src/store/types.ts                            |   1 +
 src/stores/auth.ts                            | 168 ++++++++++--------
 src/views/Home.vue                            |  10 +-
 src/views/labels/ListLabels.vue               |  10 +-
 src/views/list/ListGantt.vue                  |   8 +-
 src/views/list/settings/share.vue             |   4 +-
 src/views/namespaces/settings/share.vue       |  11 +-
 src/views/sharing/LinkSharingAuth.vue         |   6 +-
 src/views/tasks/ShowTasks.vue                 |   4 +-
 src/views/teams/EditTeam.vue                  |  11 +-
 src/views/user/DataExportDownload.vue         |   5 +-
 src/views/user/Login.vue                      |  13 +-
 src/views/user/OpenIdAuth.vue                 |   4 +-
 src/views/user/Register.vue                   |   7 +-
 src/views/user/Settings.vue                   |   6 +-
 src/views/user/settings/Avatar.vue            |  12 +-
 src/views/user/settings/Caldav.vue            |   8 +-
 src/views/user/settings/DataExport.vue        |   8 +-
 src/views/user/settings/Deletion.vue          |   8 +-
 src/views/user/settings/EmailUpdate.vue       |   6 +-
 src/views/user/settings/General.vue           |  10 +-
 src/views/user/settings/PasswordUpdate.vue    |   8 +-
 34 files changed, 241 insertions(+), 189 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c63cf7bf4..81fcf611c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,15 +36,17 @@ import AccountDeleteService from '@/services/accountDelete'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
+import {useAuthStore} from './stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 useBodyClass('is-touch', isTouchDevice())
 const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
-const authUser = computed(() => store.getters['auth/authUser'])
-const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+const authUser = computed(() => authStore.authUser)
+const authLinkShare = computed(() => authStore.authLinkShare)
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -58,7 +60,7 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
 	success({message: t('user.deletion.confirmSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 }, { immediate: true })
 
 // setup password reset redirect
diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 231812799..8546c143d 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -71,7 +71,6 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -81,8 +80,9 @@ import Popup from '@/components/misc/popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
+import {useAuthStore} from '@/stores/auth'
 
-const store = useStore()
+const authStore = useAuthStore()
 const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue'])
@@ -93,7 +93,7 @@ const props = defineProps({
 })
 
 // FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
+const weekStart = computed(() => authStore.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 0df97015a..b693988b2 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -93,7 +93,6 @@
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
 import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 
 import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import {RIGHTS as Rights} from '@/constants/rights'
@@ -109,12 +108,14 @@ import MenuButton from '@/components/home/MenuButton.vue'
 
 import {getListTitle} from '@/helpers/getListTitle'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
-const userInfo = computed(() => store.state.auth.info)
-const userAvatar = computed(() => store.state.auth.avatarUrl)
+const userInfo = computed(() => authStore.info)
+const userAvatar = computed(() => authStore.avatarUrl)
 const currentList = computed(() => store.state.currentList)
 const background = computed(() => store.state.background)
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
@@ -134,11 +135,8 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
-const router = useRouter()
-
 function logout() {
-	store.dispatch('auth/logout')
-	router.push({name: 'user.login'})
+	authStore.logout()
 }
 
 function openQuickActions() {
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index b41e86e56..855279e4c 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -70,6 +70,7 @@ import {useLabelStore} from '@/stores/labels'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useAuthStore} from '@/stores/auth'
 
 function useRouteWithModal() {
 	const router = useRouter()
@@ -165,13 +166,15 @@ watch(() => route.name as string, (routeName) => {
 
 function useRenewTokenOnFocus() {
 	const router = useRouter()
+	const authStore = useAuthStore()
 
-	const userInfo = computed(() => store.state.auth.info)
-	const authenticated = computed(() => store.state.auth.authenticated)
+
+	const userInfo = computed(() => authStore.info)
+	const authenticated = computed(() => authStore.authenticated)
 
 	// Try renewing the token every time vikunja is loaded initially
 	// (When opening the browser the focus event is not fired)
-	store.dispatch('auth/renewToken')
+	authStore.renewToken()
 
 	// Check if the token is still valid if the window gets focus again to maybe renew it
 	useEventListener('focus', () => {
@@ -184,14 +187,14 @@ function useRenewTokenOnFocus() {
 		// If the token expiry is negative, it is already expired and we have no choice but to redirect
 		// the user to the login page
 		if (expiresIn < 0) {
-			store.dispatch('auth/checkAuth')
+			authStore.checkAuth()
 			router.push({name: 'user.login'})
 			return
 		}
 
 		// Check if the token is valid for less than 60 hours and renew if thats the case
 		if (expiresIn < 60 * 3600) {
-			store.dispatch('auth/renewToken')
+			authStore.renewToken()
 			console.debug('renewed token')
 		}
 	})
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 733a9fab1..bb940b89a 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -102,6 +102,8 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {mapState} from 'pinia'
+import {useAuthStore} from '@/stores/auth'
 
 export default defineComponent({
 	name: 'datepicker',
@@ -145,6 +147,9 @@ export default defineComponent({
 		},
 	},
 	computed: {
+		...mapState(useAuthStore, {
+			weekStart: (state) => state.settings.weekStart,
+		}),
 		flatPickerConfig() {
 			return {
 				altFormat: this.$t('date.altFormatLong'),
@@ -154,7 +159,7 @@ export default defineComponent({
 				time_24hr: true,
 				inline: true,
 				locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+					firstDayOfWeek: this.weekStart,
 				},
 			}
 		},
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d1d28c20b..aaaad93ec 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -48,19 +48,19 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, ref} from 'vue'
+import {useRouter} from 'vue-router'
 
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {useAuthStore} from '@/stores/auth'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-const store = useStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 const allNotifications = ref<INotification[]>([])
@@ -73,7 +73,7 @@ const unreadNotifications = computed(() => {
 const notifications = computed(() => {
 	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
 })
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 
 let interval: number
 
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index e675ee07c..f833b8b84 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -139,7 +139,6 @@ export default {name: 'userTeamShare'}
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
@@ -171,6 +170,7 @@ import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	type: {
@@ -208,8 +208,8 @@ const sharables = ref([])
 const showDeleteModal = ref(false)
 
 
-const store = useStore()
-const userInfo = computed(() => store.state.auth.info)
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
 
 function createShareTypeNameComputed(count: number) {
 	return computed(() => {
@@ -365,7 +365,7 @@ async function toggleType(sharable) {
 
 const found = ref([])
 
-const currentUserId = computed(() => store.state.auth.info.id)
+const currentUserId = computed(() => authStore.info.id)
 async function find(query: string) {
 	if (query === '') {
 		found.value = []
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 2aa3cfaf0..d6873a165 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -48,6 +48,7 @@ import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueus
 
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import {useAuthStore} from '@/stores/auth'
 
 function cleanupTitle(title: string) {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@@ -135,6 +136,7 @@ const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
+const authStore = useAuthStore()
 
 const errorMessage = ref('')
 
@@ -168,7 +170,7 @@ async function addTask() {
 
 		const task = await store.dispatch('tasks/createNewTask', {
 			title,
-			listId: store.state.auth.settings.defaultListId,
+			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
 		})
 		emit('taskAdded', task)
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 3b0ebf852..f573bb6ba 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -153,7 +153,6 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
@@ -168,6 +167,7 @@ import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	taskId: {
@@ -180,8 +180,8 @@ const props = defineProps({
 })
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const configStore = useConfigStore()
+const authStore = useAuthStore()
 
 const comments = ref<ITaskComment[]>([])
 
@@ -196,8 +196,8 @@ const newComment = reactive(new TaskCommentModel())
 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)
+const userAvatar = computed(() => authStore.info.getAvatarUrl(48))
+const currentUserId = computed(() => authStore.info.id)
 const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {
 	if (!props.canWrite) {
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 4cd2b10aa..0759a203a 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -39,12 +39,12 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	modelValue: {
@@ -55,7 +55,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@@ -103,7 +103,7 @@ const flatPickerConfig = computed(() => ({
 	time_24hr: true,
 	inline: true,
 	locale: {
-		firstDayOfWeek: store.state.auth.settings.weekStart,
+		firstDayOfWeek: authStore.settings.weekStart,
 	},
 }))
 
@@ -124,8 +124,10 @@ async function updateDueDate() {
 	}
 
 	// FIXME: direct prop manipulation
-	task.value.dueDate = new Date(dueDate.value)
-	const newTask = await taskService.update(task.value)
+	const newTask = await taskService.update({
+		...task.value,
+		dueDate: new Date(dueDate.value),
+	})
 	lastValue.value = newTask.dueDate
 	task.value = newTask
 	emit('update:modelValue', newTask)
diff --git a/src/router/index.ts b/src/router/index.ts
index 2d150edfa..014c32c0d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import type { RouteLocation } from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
-import {store} from '@/store'
 
 import {saveListView, getListView} from '@/helpers/saveListView'
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
@@ -9,6 +8,7 @@ import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
 import {setTitle} from '@/helpers/setTitle'
 
 import {useListStore} from '@/stores/lists'
+import {useAuthStore} from '@/stores/auth'
 
 import HomeComponent from '../views/Home.vue'
 import NotFoundComponent from '../views/404.vue'
@@ -464,10 +464,8 @@ const router = createRouter({
 })
 
 export function getAuthForRoute(route: RouteLocation) {
-	const authUser = store.getters['auth/authUser']
-	const authLinkShare = store.getters['auth/authLinkShare']
-
-	if (authUser || authLinkShare) {
+	const authStore = useAuthStore()
+	if (authStore.authUser || authStore.authLinkShare) {
 		return
 	}
 
diff --git a/src/store/index.ts b/src/store/index.ts
index f0ecd0a44..6c530b531 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -13,7 +13,6 @@ import {
 	MENU_ACTIVE,
 	QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
-import auth from './modules/auth'
 import kanban from './modules/kanban'
 import tasks from './modules/tasks'
 
@@ -23,6 +22,7 @@ import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import type { RootStoreState, StoreState } from './types'
+import {useAuthStore} from '@/stores/auth'
 
 export const key: InjectionKey<Store<StoreState>> = Symbol()
 
@@ -34,7 +34,6 @@ export function useStore () {
 export const store = createStore<RootStoreState>({
 	strict: import.meta.env.DEV,
 	modules: {
-		auth,
 		kanban,
 		tasks,
 	},
@@ -131,9 +130,10 @@ export const store = createStore<RootStoreState>({
 
 			commit(CURRENT_LIST, list)
 		},
-		async loadApp({dispatch}) {
+		async loadApp() {
 			await checkAndSetApiUrl(window.API_URL)
-			await dispatch('auth/checkAuth')
+			const authStore = useAuthStore()
+			await authStore.checkAuth()
 		},
 	},
 })
diff --git a/src/store/types.ts b/src/store/types.ts
index c6daaf823..8216082fa 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -45,6 +45,7 @@ export interface AuthState {
 	avatarUrl: string,
 	lastUserInfoRefresh: Date | null,
 	settings: IUserSettings,
+	isLoading: boolean,
 }
 
 export interface ConfigState {
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index e299e7c17..5d528d398 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,16 +1,15 @@
-import type { Module } from 'vuex'
+import {defineStore, acceptHMRUpdate} from 'pinia'
 
 import {HTTPFactory, AuthenticatedHTTPFactory} from '@/http-common'
 import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
-import {LOADING} from '../mutation-types'
 import UserModel from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
-import {setLoading} from '@/store/helper'
+import {setLoadingPinia} from '@/store/helper'
 import {success} from '@/message'
 import {redirectToProvider} from '@/helpers/redirectToProvider'
-import type { RootStoreState, AuthState, Info} from '@/store/types'
+import type {AuthState, Info} from '@/store/types'
 import {AUTH_TYPES} from '@/store/types'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 import router from '@/router'
@@ -23,9 +22,8 @@ function defaultSettings(settings: Partial<IUserSettings>) {
 	return settings
 }
 
-const authStore : Module<AuthState, RootStoreState> =  {
-	namespaced: true,
-	state: () => ({
+export const useAuthStore = defineStore('auth', {
+	state: () : AuthState => ({
 		authenticated: false,
 		isLinkShareAuth: false,
 		info: null,
@@ -33,6 +31,7 @@ const authStore : Module<AuthState, RootStoreState> =  {
 		avatarUrl: '',
 		lastUserInfoRefresh: null,
 		settings: {}, // should be IUserSettings
+		isLoading: false,
 	}),
 	getters: {
 		authUser(state) {
@@ -48,47 +47,50 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			)
 		},
 	},
-	mutations: {
-		info(state, info: Info) {
-			state.info = info
+	actions: {
+		setIsLoading(isLoading: boolean) {
+			this.isLoading = isLoading 
+		},
+
+		setInfo(info: Info) {
+			this.info = info
 			if (info !== null) {
-				state.avatarUrl = info.getAvatarUrl()
+				this.avatarUrl = info.getAvatarUrl()
 
 				if (info.settings) {
-					state.settings = defaultSettings(info.settings)
+					this.settings = defaultSettings(info.settings)
 				}
 
-				state.isLinkShareAuth = info.id < 0
+				this.isLinkShareAuth = info.id < 0
 			}
 		},
-		setUserSettings(state, settings: IUserSettings) {
-			state.settings = defaultSettings(settings)
-			const info = state.info !== null ? state.info : {} as Info
+		setUserSettings(settings: IUserSettings) {
+			this.settings = defaultSettings(settings)
+			const info = this.info !== null ? this.info : {} as Info
 			info.name = settings.name
-			state.info = info
+			this.info = info
 		},
-		authenticated(state, authenticated: boolean) {
-			state.authenticated = authenticated
+		setAuthenticated(authenticated: boolean) {
+			this.authenticated = authenticated
 		},
-		isLinkShareAuth(state, isLinkShareAuth: boolean) {
-			state.isLinkShareAuth = isLinkShareAuth
+		setIsLinkShareAuth(isLinkShareAuth: boolean) {
+			this.isLinkShareAuth = isLinkShareAuth
 		},
-		needsTotpPasscode(state, needsTotpPasscode: boolean) {
-			state.needsTotpPasscode = needsTotpPasscode
+		setNeedsTotpPasscode(needsTotpPasscode: boolean) {
+			this.needsTotpPasscode = needsTotpPasscode
 		},
-		reloadAvatar(state) {
-			if (!state.info) return
-			state.avatarUrl = `${state.info.getAvatarUrl()}&=${+new Date()}`
+		reloadAvatar() {
+			if (!this.info) return
+			this.avatarUrl = `${this.info.getAvatarUrl()}&=${+new Date()}`
 		},
-		lastUserRefresh(state) {
-			state.lastUserInfoRefresh = new Date()
+		updateLastUserRefresh() {
+			this.lastUserInfoRefresh = new Date()
 		},
-	},
-	actions: {
+
 		// Logs a user in with a set of credentials.
-		async login(ctx, credentials) {
+		async login(credentials) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 
 			// Delete an eventually preexisting old token
 			removeToken()
@@ -99,30 +101,30 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				saveToken(response.data.token, true)
 
 				// Tell others the user is autheticated
-				ctx.dispatch('checkAuth')
+				this.checkAuth()
 			} catch (e) {
 				if (
 					e.response &&
 					e.response.data.code === 1017 &&
 					!credentials.totpPasscode
 				) {
-					ctx.commit('needsTotpPasscode', true)
+					this.setNeedsTotpPasscode(true)
 				}
 
 				throw e
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
 		// Registers a new user and logs them in.
 		// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
-		async register(ctx, credentials) {
+		async register(credentials) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 			try {
 				await HTTP.post('register', credentials)
-				return ctx.dispatch('login', credentials)
+				return this.login(credentials)
 			} catch (e) {
 				if (e.response?.data?.message) {
 					throw e.response.data
@@ -130,13 +132,13 @@ const authStore : Module<AuthState, RootStoreState> =  {
 
 				throw e
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
-		async openIdAuth(ctx, {provider, code}) {
+		async openIdAuth({provider, code}) {
 			const HTTP = HTTPFactory()
-			ctx.commit(LOADING, true, {root: true})
+			this.setIsLoading(true)
 
 			const data = {
 				code: code,
@@ -150,28 +152,31 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				saveToken(response.data.token, true)
 
 				// Tell others the user is autheticated
-				ctx.dispatch('checkAuth')
+				this.checkAuth()
 			} finally {
-				ctx.commit(LOADING, false, {root: true})
+				this.setIsLoading(false)
 			}
 		},
 
-		async linkShareAuth(ctx, {hash, password}) {
+		async linkShareAuth({hash, password}) {
 			const HTTP = HTTPFactory()
 			const response = await HTTP.post('/shares/' + hash + '/auth', {
 				password: password,
 			})
 			saveToken(response.data.token, false)
-			ctx.dispatch('checkAuth')
+			this.checkAuth()
 			return response.data
 		},
 
 		// Populates user information from jwt token saved in local storage in store
-		checkAuth(ctx) {
+		checkAuth() {
 
 			// This function can be called from multiple places at the same time and shortly after one another.
 			// To prevent hitting the api too frequently or race conditions, we check at most once per minute.
-			if (ctx.state.lastUserInfoRefresh !== null && ctx.state.lastUserInfoRefresh > (new Date()).setMinutes((new Date()).getMinutes() + 1)) {
+			if (
+				this.lastUserInfoRefresh !== null &&
+				this.lastUserInfoRefresh > (new Date()).setMinutes((new Date()).getMinutes() + 1)
+			) {
 				return
 			}
 
@@ -185,17 +190,17 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				const info = new UserModel(JSON.parse(atob(base64)))
 				const ts = Math.round((new Date()).getTime() / 1000)
 				authenticated = info.exp >= ts
-				ctx.commit('info', info)
+				this.setInfo(info)
 
 				if (authenticated) {
-					ctx.dispatch('refreshUserInfo')
+					this.refreshUserInfo()
 				}
 			}
 
-			ctx.commit('authenticated', authenticated)
+			this.setAuthenticated(authenticated)
 			if (!authenticated) {
-				ctx.commit('info', null)
-				ctx.dispatch('redirectToProviderIfNothingElseIsEnabled')
+				this.setInfo(null)
+				this.redirectToProviderIfNothingElseIsEnabled()
 			}
 		},
 
@@ -211,7 +216,7 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			}
 		},
 
-		async refreshUserInfo({state, commit, dispatch}) {
+		async refreshUserInfo() {
 			const jwt = getToken()
 			if (!jwt) {
 				return
@@ -220,19 +225,27 @@ const authStore : Module<AuthState, RootStoreState> =  {
 			const HTTP = AuthenticatedHTTPFactory()
 			try {
 				const response = await HTTP.get('user')
-				const info = new UserModel(response.data)
-				info.type = state.info.type
-				info.email = state.info.email
-				info.exp = state.info.exp
+				const info = new UserModel({
+					...response.data,
+					type: this.info.type,
+					email: this.info.email,
+					exp: this.info.exp,
+				})
 
-				commit('info', info)
-				commit('lastUserRefresh')
+				this.setInfo(info)
+				this.updateLastUserRefresh()
 
-				if (info.type === AUTH_TYPES.USER && (typeof info.settings.language === 'undefined' || info.settings.language === '')) {
+				if (
+						info.type === AUTH_TYPES.USER &&
+						(
+							typeof info.settings.language === 'undefined' ||
+							info.settings.language === ''
+						)
+				) {
 					// save current language
-					await dispatch('saveUserSettings', {
+					await this.saveUserSettings({
 						settings: {
-							...state.settings,
+							...this.settings,
 							language: getCurrentLanguage(),
 						},
 						showMessage: false,
@@ -242,23 +255,24 @@ const authStore : Module<AuthState, RootStoreState> =  {
 				return info
 			} catch (e) {
 				if(e?.response?.data?.message === 'invalid or expired jwt') {
-					dispatch('logout')
+					this.logout()
 					return
 				}
 				throw new Error('Error while refreshing user info:', {cause: e})
 			}
 		},
 
-		async saveUserSettings(ctx, payload) {
+		async saveUserSettings(payload) {
 			const {settings} = payload
 			const showMessage = payload.showMessage ?? true
 			const userSettingsService = new UserSettingsService()
 
-			const cancel = setLoading(ctx, 'general-settings')
+			// FIXME
+			const cancel = setLoadingPinia(useAuthStore, 'general-settings')
 			try {
 				saveLanguage(settings.language)
 				await userSettingsService.update(settings)
-				ctx.commit('setUserSettings', {...settings})
+				this.setUserSettings({...settings})
 				if (showMessage) {
 					success({message: i18n.global.t('user.settings.general.savedSuccess')})
 				}
@@ -270,34 +284,38 @@ const authStore : Module<AuthState, RootStoreState> =  {
 		},
 
 		// Renews the api token and saves it to local storage
-		renewToken(ctx) {
+		renewToken() {
 			// FIXME: Timeout to avoid race conditions when authenticated as a user (=auth token in localStorage) and as a
 			// link share in another tab. Without the timeout both the token renew and link share auth are executed at
 			// the same time and one might win over the other.
 			setTimeout(async () => {
-				if (!ctx.state.authenticated) {
+				if (!this.authenticated) {
 					return
 				}
 
 				try {
-					await refreshToken(!ctx.state.isLinkShareAuth)
-					ctx.dispatch('checkAuth')
+					await refreshToken(!this.isLinkShareAuth)
+					this.checkAuth()
 				} catch (e) {
 					// Don't logout on network errors as the user would then get logged out if they don't have
 					// internet for a short period of time - such as when the laptop is still reconnecting
 					if (e?.request?.status) {
-						ctx.dispatch('logout')
+						this.logout()
 					}
 				}
 			}, 5000)
 		},
-		logout(ctx) {
+
+		logout() {
 			removeToken()
 			window.localStorage.clear() // Clear all settings and history we might have saved in local storage.
 			router.push({name: 'user.login'})
-			ctx.dispatch('checkAuth')
+			this.checkAuth()
 		},
 	},
-}
+})
 
-export default authStore
\ No newline at end of file
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAuthStore, import.meta.hot))
+}
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5e8edb8a6..79d13837b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -74,16 +74,18 @@ import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
 import {useListStore} from '@/stores/lists'
 import {useConfigStore} from '@/stores/config'
 import {useNamespaceStore} from '@/stores/namespaces'
+import {useAuthStore} from '@/stores/auth'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 const namespaceStore = useNamespaceStore()
 const listStore = useListStore()
 const listHistory = computed(() => {
 	// If we don't check this, it tries to load the list background right after logging out	
-	if(!store.state.auth.authenticated) {
+	if(!authStore.authenticated) {
 		return []
 	}
 	
@@ -93,13 +95,13 @@ const listHistory = computed(() => {
 })
 
 const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 const hasTasks = computed(() => store.state.hasTasks)
-const defaultListId = computed(() => store.state.auth.settings.defaultListId)
+const defaultListId = computed(() => authStore.settings.defaultListId)
 const defaultNamespaceId = computed(() => namespaceStore.namespaces?.[0]?.id || 0)
 const hasLists = computed(() => namespaceStore.namespaces?.[0]?.lists.length > 0)
 const loading = computed(() => store.state.loading && store.state.loadingModule === 'tasks')
-const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 // This is to reload the tasks list after adding a new task through the global task add.
 // FIXME: Should use vuex (somehow?)
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index a588edae9..7a8957625 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -119,10 +119,10 @@ import ColorPicker from '@/components/input/colorPicker.vue'
 
 import LabelModel from '@/models/label'
 import type {ILabel} from '@/modelTypes/ILabel'
+import {useAuthStore} from '@/stores/auth'
 import {useLabelStore} from '@/stores/labels'
 
 import { useTitle } from '@/composables/useTitle'
-import { useStore } from '@/store'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -134,25 +134,23 @@ const labelToDelete = ref<ILabel>(null)
 
 useTitle(() => t('label.title'))
 
-const store = useStore()
-const userInfo = computed(() => store.state.auth.info)
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 
 // Alphabetically sort the labels
 const labels = computed(() => Object.values(labelStore.labels).sort((f, s) => f.title > s.title ? 1 : -1))
-const loading = computed(() =>labelStore.isLoading)
+const loading = computed(() => labelStore.isLoading)
 
 function deleteLabel(label: ILabel) {
 	showDeleteModal.value = false
 	isLabelEdit.value = false
-	const labelStore = useLabelStore()
 	return labelStore.deleteLabel(label)
 }
 
 function editLabelSubmit() {
-		const labelStore = useLabelStore()
 		return labelStore.updateLabel(labelEditLabel.value)
 	}
 
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index f4dc88829..12ab6e952 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -67,9 +67,9 @@
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
-
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
+
+import {useAuthStore} from '@/stores/auth'
 
 import ListWrapper from './ListWrapper.vue'
 import GanttChart from '@/components/tasks/gantt-component.vue'
@@ -92,14 +92,14 @@ const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
 const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	dateFormat: 'Y-m-d',
 	enableTime: false,
 	locale: {
-		firstDayOfWeek: store.state.auth.settings.weekStart,
+		firstDayOfWeek: authStore.settings.weekStart,
 	},
 }))
 </script>
diff --git a/src/views/list/settings/share.vue b/src/views/list/settings/share.vue
index 856155e60..c86536c97 100644
--- a/src/views/list/settings/share.vue
+++ b/src/views/list/settings/share.vue
@@ -41,6 +41,7 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -52,10 +53,11 @@ const title = computed(() => list.value?.title
 useTitle(title)
 
 const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
 const linkSharingEnabled = computed(() => configStore.linkSharingEnabled)
-const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
+const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === authStore.info.id)
 
 async function loadList(listId: number) {
 	const listService = new ListService()
diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue
index 25f212db9..5bcc9e063 100644
--- a/src/views/namespaces/settings/share.vue
+++ b/src/views/namespaces/settings/share.vue
@@ -26,20 +26,21 @@ export default { name: 'namespace-setting-share' }
 
 <script lang="ts" setup>
 import {ref, computed, watchEffect} from 'vue'
-import {useStore} from '@/store'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
-import {useTitle} from '@vueuse/core'
 
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 
 import CreateEdit from '@/components/misc/create-edit.vue'
 import manageSharing from '@/components/sharing/userTeam.vue'
+import {useTitle} from '@/composables/useTitle'
+import {useAuthStore} from '@/stores/auth'
+import type { INamespace } from '@/modelTypes/INamespace'
 
 const {t} = useI18n({useScope: 'global'})
 
-const namespace = ref()
+const namespace = ref<INamespace>()
 
 const title = computed(() => namespace.value?.title
 	? t('namespace.share.title', { namespace: namespace.value.title })
@@ -47,8 +48,8 @@ const title = computed(() => namespace.value?.title
 )
 useTitle(title)
 
-const store = useStore()
-const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === store.state.auth.info.id)
+const authStore = useAuthStore()
+const userIsAdmin = computed(() => 'owner' in namespace.value && namespace.value.owner.id === authStore.info.id)
 
 async function loadNamespace(namespaceId: number) {
 	if (!namespaceId) return
diff --git a/src/views/sharing/LinkSharingAuth.vue b/src/views/sharing/LinkSharingAuth.vue
index 0962e8b98..4dc9de6e8 100644
--- a/src/views/sharing/LinkSharingAuth.vue
+++ b/src/views/sharing/LinkSharingAuth.vue
@@ -42,12 +42,14 @@ import {useTitle} from '@vueuse/core'
 import Message from '@/components/misc/message.vue'
 import {LOGO_VISIBLE} from '@/store/mutation-types'
 import {LIST_VIEWS, type ListView} from '@/types/ListView'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(t('sharing.authenticating'))
 
 function useAuth() {
 	const store = useStore()
+	const authStore = useAuthStore()
 	const route = useRoute()
 	const router = useRouter()
 
@@ -56,7 +58,7 @@ function useAuth() {
 	const errorMessage = ref('')
 	const password = ref('')
 
-	const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+	const authLinkShare = computed(() => authStore.authLinkShare)
 
 	async function authenticate() {
 		authenticateWithPassword.value = false
@@ -72,7 +74,7 @@ function useAuth() {
 		loading.value = true
 
 		try {
-			const {list_id: listId} = await store.dispatch('auth/linkShareAuth', {
+			const {list_id: listId} = await authStore.linkShareAuth({
 				hash: route.params.share,
 				password: password.value,
 			})
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index a90b69a50..ab80110cd 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -59,8 +59,10 @@ import {DATE_RANGES} from '@/components/date/dateRanges'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import LlamaCool from '@/assets/llama-cool.svg?component'
 import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const store = useStore()
+const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
@@ -104,7 +106,7 @@ const pageTitle = computed(() => {
 		})
 })
 const hasTasks = computed(() => tasks.value && tasks.value.length > 0)
-const userAuthenticated = computed(() => store.state.auth.authenticated)
+const userAuthenticated = computed(() => authStore.authenticated)
 const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
 
 interface dateStrings {
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 1d951e8e1..4c8be9a52 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -163,9 +163,10 @@
 <script lang="ts" setup>
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {useRoute, useRouter} from 'vue-router'
 
 import Editor from '@/components/input/AsyncEditor'
-import {useStore} from '@/store'
+import Multiselect from '@/components/input/multiselect.vue'
 
 import TeamService from '@/services/team'
 import TeamMemberService from '@/services/teamMember'
@@ -173,15 +174,15 @@ import UserService from '@/services/user'
 
 import {RIGHTS as Rights} from '@/constants/rights'
 
-import Multiselect from '@/components/input/multiselect.vue'
-import {useRoute, useRouter} from 'vue-router'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
+
 import type {ITeam} from '@/modelTypes/ITeam'
 import type {IUser} from '@/modelTypes/IUser'
 import type {ITeamMember} from '@/modelTypes/ITeamMember'
 
-const store = useStore()
+const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
@@ -193,7 +194,7 @@ const userIsAdmin = computed(() => {
 		team.value.maxRight > Rights.READ
 	)
 })
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 
 const teamService = ref<TeamService>(new TeamService())
 const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
diff --git a/src/views/user/DataExportDownload.vue b/src/views/user/DataExportDownload.vue
index d0ef27f2e..353da48be 100644
--- a/src/views/user/DataExportDownload.vue
+++ b/src/views/user/DataExportDownload.vue
@@ -38,14 +38,15 @@
 <script setup lang="ts">
 import {ref, computed, reactive} from 'vue'
 import DataExportService from '@/services/dataExport'
-import {store} from '@/store'
+import {useAuthStore} from '@/stores/auth'
 
 const dataExportService = reactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)
 const passwordInput = ref(null)
 
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 function download() {
 	if (password.value === '' && isLocalUser.value) {
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 53e87e58a..aa9947d71 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -116,6 +116,7 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
 import { setTitle } from '@/helpers/setTitle'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 export default defineComponent({
 	components: {
@@ -173,8 +174,11 @@ export default defineComponent({
 		},
 		...mapStateVuex({
 			loading: LOADING,
-			needsTotpPasscode: state => state.auth.needsTotpPasscode,
-			authenticated: state => state.auth.authenticated,
+		}),
+
+		...mapState(useAuthStore, {
+			needsTotpPasscode: state => state.needsTotpPasscode,
+			authenticated: state => state.authenticated,
 		}),
 
 		...mapState(useConfigStore, {
@@ -224,8 +228,9 @@ export default defineComponent({
 			}
 
 			try {
-				await this.$store.dispatch('auth/login', credentials)
-				this.$store.commit('auth/needsTotpPasscode', false)
+				const authStore = useAuthStore()
+				await authStore.login(credentials)
+				authStore.setNeedsTotpPasscode(false)
 			} catch (e) {
 				if (e.response?.data.code === 1017 && !this.credentials.totpPasscode) {
 					return
diff --git a/src/views/user/OpenIdAuth.vue b/src/views/user/OpenIdAuth.vue
index a2d012a32..378a82788 100644
--- a/src/views/user/OpenIdAuth.vue
+++ b/src/views/user/OpenIdAuth.vue
@@ -22,6 +22,7 @@ import {useI18n} from 'vue-i18n'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -29,6 +30,7 @@ const router = useRouter()
 const route = useRoute()
 
 const store = useStore()
+const authStore = useAuthStore()
 
 const loading = computed(() => store.state.loading)
 const errorMessage = ref('')
@@ -65,7 +67,7 @@ async function authenticateWithCode() {
 	}
 
 	try {
-		await store.dispatch('auth/openIdAuth', {
+		await authStore.openIdAuth({
 			provider: route.params.provider,
 			code: route.query.code,
 		})
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 7e630e90c..ce750859a 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -77,11 +77,14 @@ import {store} from '@/store'
 import Message from '@/components/misc/message.vue'
 import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/password.vue'
+import {useAuthStore} from '@/stores/auth'
+
+const authStore = useAuthStore()
 
 // FIXME: use the `beforeEnter` hook of vue-router
 // Check if the user is already logged in, if so, redirect them to the homepage
 onBeforeMount(() => {
-	if (store.state.auth.authenticated) {
+	if (authStore.authenticated) {
 		router.push({name: 'home'})
 	}
 })
@@ -126,7 +129,7 @@ async function submit() {
 	}
 
 	try {
-		await store.dispatch('auth/register', toRaw(credentials))
+		await authStore.register(toRaw(credentials))
 	} catch (e) {
 		errorMessage.value = e.message
 	}
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index cbc429ff5..579c85daf 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -19,19 +19,21 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import { store } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { useTitle } from '@/composables/useTitle'
 import { useConfigStore } from '@/stores/config'
+import { useAuthStore } from '@/stores/auth'
 
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('user.settings.title'))
 
 const configStore = useConfigStore()
+const authStore = useAuthStore()
+
 const totpEnabled = computed(() => configStore.totpEnabled)
 const caldavEnabled = computed(() => configStore.caldavEnabled)
 const migratorsEnabled = computed(() => configStore.migratorsEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 const navigationItems = computed(() => {
 	const items = [
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 4993f9e2e..e71a66bf2 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/src/views/user/settings/Avatar.vue
@@ -64,17 +64,17 @@ export default { name: 'user-settings-avatar' }
 <script setup lang="ts">
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {Cropper} from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
 import AvatarService from '@/services/avatar'
 import AvatarModel from '@/models/avatar'
-import { useTitle } from '@/composables/useTitle'
-import { success } from '@/message'
+import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const AVATAR_PROVIDERS = computed(() => ({
 	default: t('misc.default'),
@@ -102,7 +102,7 @@ avatarStatus()
 async function updateAvatarStatus() {
 	await avatarService.update(new AvatarModel({avatarProvider: avatarProvider.value}))
 	success({message: t('user.settings.avatar.statusUpdateSuccess')})
-	store.commit('auth/reloadAvatar')
+	authStore.reloadAvatar()
 }
 
 const cropper = ref()
@@ -121,7 +121,7 @@ async function uploadAvatar() {
 		const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
 		await avatarService.create(blob)
 		success({message: t('user.settings.avatar.setSuccess')})
-		store.commit('auth/reloadAvatar')
+		authStore.reloadAvatar()
 	} finally {
 		loading.value = false
 		isCropAvatar.value = false
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index a0fcbebb6..190618bb6 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -68,7 +68,6 @@
 <script lang="ts" setup>
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
@@ -80,6 +79,7 @@ import CaldavTokenService from '@/services/caldavToken'
 import { formatDateShort } from '@/helpers/time/formatDate'
 import type {ICaldavToken} from '@/modelTypes/ICaldavToken'
 import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const copy = useCopyToClipboard()
 
@@ -105,10 +105,10 @@ async function deleteToken(token: ICaldavToken) {
 	success(r)
 }
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
-const username = computed(() => store.state.auth.info?.username)
+const username = computed(() => authStore.info?.username)
 const caldavUrl = computed(() => `${configStore.apiBase}/dav/principals/${username.value}/`)
 const caldavEnabled = computed(() => configStore.caldavEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 </script>
diff --git a/src/views/user/settings/DataExport.vue b/src/views/user/settings/DataExport.vue
index 29aeb8523..7e0005d2b 100644
--- a/src/views/user/settings/DataExport.vue
+++ b/src/views/user/settings/DataExport.vue
@@ -44,22 +44,22 @@ export default {name: 'user-settings-data-export'}
 
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import DataExportService from '@/services/dataExport'
-import { useTitle } from '@/composables/useTitle'
+import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 useTitle(() => `${t('user.export.title')} - ${t('user.settings.title')}`)
 
 const dataExportService = shallowReactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 const passwordInput = ref()
 
 async function requestDataExport() {
diff --git a/src/views/user/settings/Deletion.vue b/src/views/user/settings/Deletion.vue
index fc3961a5e..5d855d1af 100644
--- a/src/views/user/settings/Deletion.vue
+++ b/src/views/user/settings/Deletion.vue
@@ -88,7 +88,6 @@ export default { name: 'user-settings-deletion' }
 
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import AccountDeleteService from '@/services/accountDelete'
@@ -96,6 +95,7 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
@@ -105,11 +105,11 @@ const accountDeleteService = shallowReactive(new AccountDeleteService())
 const password = ref('')
 const errPasswordRequired = ref(false)
 
-const store = useStore()
+const authStore = useAuthStore()
 const configStore = useConfigStore()
 
 const userDeletionEnabled = computed(() => configStore.userDeletionEnabled)
-const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
+const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))
 
 const passwordInput = ref()
 async function deleteAccount() {
@@ -133,7 +133,7 @@ async function cancelDeletion() {
 
 	await accountDeleteService.cancel(password.value)
 	success({message: t('user.deletion.scheduledCancelSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 	password.value = ''
 }
 </script>
diff --git a/src/views/user/settings/EmailUpdate.vue b/src/views/user/settings/EmailUpdate.vue
index ef8a3e423..96e9e42d2 100644
--- a/src/views/user/settings/EmailUpdate.vue
+++ b/src/views/user/settings/EmailUpdate.vue
@@ -43,18 +43,18 @@ export default { name: 'user-settings-update-email' }
 <script setup lang="ts">
 import {reactive, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import EmailUpdateService from '@/services/emailUpdate'
 import EmailUpdateModel from '@/models/emailUpdate'
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
+import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.updateEmailTitle')} - ${t('user.settings.title')}`)
 
-const store = useStore()
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 const emailUpdate = reactive(new EmailUpdateModel())
 const emailUpdateService = shallowReactive(new EmailUpdateService())
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index cc435b218..2664fe019 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -149,6 +149,7 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import { useListStore } from '@/stores/lists'
+import { useAuthStore } from '@/stores/auth'
 
 export default defineComponent({
 	name: 'user-settings-general',
@@ -227,7 +228,8 @@ const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
 const quickAddMagicMode = ref(getQuickAddMagicMode())
 
 const store = useStore()
-const settings = ref({...store.state.auth.settings})
+const authStore = useAuthStore()
+const settings = ref({...authStore.settings})
 const id = ref(createRandomID())
 const availableLanguageOptions = ref(
 	Object.entries(availableLanguages)
@@ -236,13 +238,13 @@ const availableLanguageOptions = ref(
 )
 
 watch(
-	() => store.state.auth.settings,
+	() => authStore.settings,
 	() => {
 		// Only setting if we don't have values set yet to avoid overriding edited values
 		if (!objectIsEmpty(settings.value)) {
 			return
 		}
-		settings.value = {...store.state.auth.settings}
+		settings.value = {...authStore.settings}
 	},
 	{immediate: true},
 )
@@ -265,7 +267,7 @@ async function updateSettings() {
 	localStorage.setItem(playSoundWhenDoneKey, playSoundWhenDone.value ? 'true' : 'false')
 	setQuickAddMagicMode(quickAddMagicMode.value)
 
-	await store.dispatch('auth/saveUserSettings', {
+	await authStore.saveUserSettings({
 		settings: {...settings.value},
 	})
 }
diff --git a/src/views/user/settings/PasswordUpdate.vue b/src/views/user/settings/PasswordUpdate.vue
index 96b7c431e..155385bea 100644
--- a/src/views/user/settings/PasswordUpdate.vue
+++ b/src/views/user/settings/PasswordUpdate.vue
@@ -57,24 +57,24 @@ export default {name: 'user-settings-password-update'}
 
 <script setup lang="ts">
 import {ref, reactive, shallowReactive, computed} from 'vue'
-import { useI18n } from 'vue-i18n'
-import {useStore} from '@/store'
+import {useI18n} from 'vue-i18n'
 
 import PasswordUpdateService from '@/services/passwordUpdateService'
 import PasswordUpdateModel from '@/models/passwordUpdate'
 
 import {useTitle} from '@/composables/useTitle'
 import {success, error} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const passwordUpdateService = shallowReactive(new PasswordUpdateService())
 const passwordUpdate = reactive(new PasswordUpdateModel())
 const passwordConfirm = ref('')
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 useTitle(() => `${t('user.settings.newPasswordTitle')} - ${t('user.settings.title')}`)
 
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const authStore = useAuthStore()
+const isLocalUser = computed(() => authStore.info?.isLocalUser)
 
 async function updatePassword() {
 	if (passwordConfirm.value !== passwordUpdate.newPassword) {

From 176ad565cc64e2212eedb1601c844e458d7e4bb6 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 23 Sep 2022 16:21:05 +0200
Subject: [PATCH 04/19] feat: auth store type improvements

---
 src/modelTypes/IUser.ts         |  8 +++++
 src/modelTypes/IUserSettings.ts |  1 +
 src/models/user.ts              | 14 ++++----
 src/models/userSettings.ts      | 10 +++---
 src/store/types.ts              | 18 ++--------
 src/stores/auth.ts              | 58 +++++++++++++++++----------------
 6 files changed, 53 insertions(+), 56 deletions(-)

diff --git a/src/modelTypes/IUser.ts b/src/modelTypes/IUser.ts
index d2ee19ea8..2465a37df 100644
--- a/src/modelTypes/IUser.ts
+++ b/src/modelTypes/IUser.ts
@@ -1,11 +1,19 @@
 import type {IAbstract} from './IAbstract'
 import type {IUserSettings} from './IUserSettings'
 
+export const AUTH_TYPES = {
+	'UNKNOWN': 0,
+	'USER': 1,
+	'LINK_SHARE': 2,
+} as const
+
 export interface IUser extends IAbstract {
 	id: number
 	email: string
 	username: string
 	name: string
+	exp: number
+	type: typeof AUTH_TYPES[keyof typeof AUTH_TYPES],
 
 	created: Date
 	updated: Date
diff --git a/src/modelTypes/IUserSettings.ts b/src/modelTypes/IUserSettings.ts
index 9550e1e67..31e921e0e 100644
--- a/src/modelTypes/IUserSettings.ts
+++ b/src/modelTypes/IUserSettings.ts
@@ -11,4 +11,5 @@ export interface IUserSettings extends IAbstract {
 	defaultListId: undefined | IList['id']
 	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	timezone: string
+	language: string
 }
\ No newline at end of file
diff --git a/src/models/user.ts b/src/models/user.ts
index a01484458..d7071c243 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import UserSettingsModel from '@/models/userSettings'
 
-import type { IUser } from '@/modelTypes/IUser'
+import { AUTH_TYPES, type IUser } from '@/modelTypes/IUser'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 
 export default class UserModel extends AbstractModel<IUser> implements IUser {
@@ -9,10 +9,12 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 	email = ''
 	username = ''
 	name = ''
+	exp = 0
+	type = AUTH_TYPES.UNKNOWN
 
-	created: Date = null
-	updated: Date = null
-	settings: IUserSettings = null
+	created: Date
+	updated: Date
+	settings: IUserSettings
 
 	constructor(data: Partial<IUser> = {}) {
 		super()
@@ -21,9 +23,7 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 
-		if (this.settings !== null) {
-			this.settings = new UserSettingsModel(this.settings)
-		}
+		this.settings = new UserSettingsModel(this.settings || {})
 	}
 
 	getAvatarUrl(size = 50) {
diff --git a/src/models/userSettings.ts b/src/models/userSettings.ts
index 308c72d80..ddb6f0296 100644
--- a/src/models/userSettings.ts
+++ b/src/models/userSettings.ts
@@ -1,8 +1,7 @@
-
 import AbstractModel from './abstractModel'
 
 import type {IUserSettings} from '@/modelTypes/IUserSettings'
-import type {IList} from '@/modelTypes/IList'
+import {getCurrentLanguage} from '@/i18n'
 
 export default class UserSettingsModel extends AbstractModel<IUserSettings> implements IUserSettings {
 	name = ''
@@ -10,11 +9,12 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 	discoverableByName = false
 	discoverableByEmail = false
 	overdueTasksRemindersEnabled = true
-	defaultListId: undefined | IList['id'] = undefined
-	weekStart: IUserSettings['weekStart'] = 0
+	defaultListId = undefined
+	weekStart = 0 as IUserSettings['weekStart']
 	timezone = ''
+	language = getCurrentLanguage()
 
-	constructor(data: Partial<IUserSettings>) {
+	constructor(data: Partial<IUserSettings> = {}) {
 		super()
 		this.assignData(data)
 	}
diff --git a/src/store/types.ts b/src/store/types.ts
index 8216082fa..3bda4dfbb 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -4,6 +4,7 @@ import type { IList } from '@/modelTypes/IList'
 import type { IAttachment } from '@/modelTypes/IAttachment'
 import type { ILabel } from '@/modelTypes/ILabel'
 import type { INamespace } from '@/modelTypes/INamespace'
+import type { IUser } from '@/modelTypes/IUser'
 
 export interface RootStoreState {
 	loading: boolean,
@@ -22,25 +23,10 @@ export interface AttachmentState {
 	attachments: IAttachment[],
 }
 
-export const AUTH_TYPES = {
-	'UNKNOWN': 0,
-	'USER': 1,
-	'LINK_SHARE': 2,
-} as const
-
-export interface Info {
-	id: number // what kind of id is this?
-	type: typeof AUTH_TYPES[keyof typeof AUTH_TYPES],
-	getAvatarUrl: () => string
-	settings: IUserSettings
-	name: string
-	email: string
-	exp: any
-}
 export interface AuthState {
 	authenticated: boolean,
 	isLinkShareAuth: boolean,
-	info: Info | null,
+	info: IUser | null,
 	needsTotpPasscode: boolean,
 	avatarUrl: string,
 	lastUserInfoRefresh: Date | null,
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 5d528d398..1f949e7fd 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -9,28 +9,24 @@ import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 import {setLoadingPinia} from '@/store/helper'
 import {success} from '@/message'
 import {redirectToProvider} from '@/helpers/redirectToProvider'
-import type {AuthState, Info} from '@/store/types'
-import {AUTH_TYPES} from '@/store/types'
-import type { IUserSettings } from '@/modelTypes/IUserSettings'
+import {AUTH_TYPES, type IUser} from '@/modelTypes/IUser'
+import type {AuthState} from '@/store/types'
+import type {IUserSettings} from '@/modelTypes/IUserSettings'
 import router from '@/router'
 import {useConfigStore} from '@/stores/config'
-
-function defaultSettings(settings: Partial<IUserSettings>) {
-	if (typeof settings.weekStart === 'undefined' || settings.weekStart === '') {
-		settings.weekStart = 0
-	}
-	return settings
-}
+import UserSettingsModel from '@/models/userSettings'
 
 export const useAuthStore = defineStore('auth', {
 	state: () : AuthState => ({
 		authenticated: false,
 		isLinkShareAuth: false,
-		info: null,
 		needsTotpPasscode: false,
+		
+		info: null,
 		avatarUrl: '',
+		settings: new UserSettingsModel(),
+		
 		lastUserInfoRefresh: null,
-		settings: {}, // should be IUserSettings
 		isLoading: false,
 	}),
 	getters: {
@@ -52,23 +48,24 @@ export const useAuthStore = defineStore('auth', {
 			this.isLoading = isLoading 
 		},
 
-		setInfo(info: Info) {
+		setUser(info: IUser | null) {
 			this.info = info
 			if (info !== null) {
-				this.avatarUrl = info.getAvatarUrl()
+				this.reloadAvatar()
 
 				if (info.settings) {
-					this.settings = defaultSettings(info.settings)
+					this.settings = new UserSettingsModel(info.settings)
 				}
 
 				this.isLinkShareAuth = info.id < 0
 			}
 		},
 		setUserSettings(settings: IUserSettings) {
-			this.settings = defaultSettings(settings)
-			const info = this.info !== null ? this.info : {} as Info
-			info.name = settings.name
-			this.info = info
+			this.settings = new UserSettingsModel(settings)
+			this.info = new UserModel({
+				...this.info !== null ? this.info : {},
+				name: settings.name,
+			})
 		},
 		setAuthenticated(authenticated: boolean) {
 			this.authenticated = authenticated
@@ -190,7 +187,7 @@ export const useAuthStore = defineStore('auth', {
 				const info = new UserModel(JSON.parse(atob(base64)))
 				const ts = Math.round((new Date()).getTime() / 1000)
 				authenticated = info.exp >= ts
-				this.setInfo(info)
+				this.setUser(info)
 
 				if (authenticated) {
 					this.refreshUserInfo()
@@ -199,7 +196,7 @@ export const useAuthStore = defineStore('auth', {
 
 			this.setAuthenticated(authenticated)
 			if (!authenticated) {
-				this.setInfo(null)
+				this.setUser(null)
 				this.redirectToProviderIfNothingElseIsEnabled()
 			}
 		},
@@ -227,12 +224,12 @@ export const useAuthStore = defineStore('auth', {
 				const response = await HTTP.get('user')
 				const info = new UserModel({
 					...response.data,
-					type: this.info.type,
-					email: this.info.email,
-					exp: this.info.exp,
+					...(this.info?.type && {type: this.info?.type}),
+					...(this.info?.email && {email: this.info?.email}),
+					...(this.info?.exp && {exp: this.info?.exp}),
 				})
 
-				this.setInfo(info)
+				this.setUser(info)
 				this.updateLastUserRefresh()
 
 				if (
@@ -262,9 +259,14 @@ export const useAuthStore = defineStore('auth', {
 			}
 		},
 
-		async saveUserSettings(payload) {
-			const {settings} = payload
-			const showMessage = payload.showMessage ?? true
+		async saveUserSettings({
+			settings,
+			showMessage = true,
+		}: {
+			settings: IUserSettings
+			showMessage : boolean
+		}) {
+			// const showMessage = payload.showMessage ?? true
 			const userSettingsService = new UserSettingsService()
 
 			// FIXME

From c421701fb74b63e262374ea1a84faaa11d78c48b Mon Sep 17 00:00:00 2001
From: renovate <renovatebot@kolaente.de>
Date: Thu, 29 Sep 2022 06:03:19 +0000
Subject: [PATCH 05/19] chore(deps): update dependency @vue/test-utils to
 v2.1.0

---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ab418312b..a487c0c98 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "@vitejs/plugin-legacy": "2.2.0",
     "@vitejs/plugin-vue": "3.1.0",
     "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.0.2",
+    "@vue/test-utils": "2.1.0",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.12",
     "browserslist": "4.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78250b1dd..f965343ad 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,7 @@ specifiers:
   '@vitejs/plugin-legacy': 2.2.0
   '@vitejs/plugin-vue': 3.1.0
   '@vue/eslint-config-typescript': 11.0.2
-  '@vue/test-utils': 2.0.2
+  '@vue/test-utils': 2.1.0
   '@vue/tsconfig': 0.1.3
   '@vueuse/core': 9.3.0
   '@vueuse/router': 9.3.0
@@ -142,7 +142,7 @@ devDependencies:
   '@vitejs/plugin-legacy': 2.2.0_terser@5.10.0+vite@3.1.4
   '@vitejs/plugin-vue': 3.1.0_vite@3.1.4+vue@3.2.40
   '@vue/eslint-config-typescript': 11.0.2_b985cba226e1126d4cc23df4d3ba9cd4
-  '@vue/test-utils': 2.0.2_vue@3.2.40
+  '@vue/test-utils': 2.1.0_vue@3.2.40
   '@vue/tsconfig': 0.1.3_@types+node@16.11.62
   autoprefixer: 10.4.12_postcss@8.4.16
   browserslist: 4.21.4
@@ -3522,8 +3522,8 @@ packages:
   /@vue/shared/3.2.40:
     resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
 
-  /@vue/test-utils/2.0.2_vue@3.2.40:
-    resolution: {integrity: sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==}
+  /@vue/test-utils/2.1.0_vue@3.2.40:
+    resolution: {integrity: sha512-U4AxAD/tKJ3ajxYew1gkfEotpr96DE/gLXpbl+nPbsNRqGBfQZZA7YhwGoQNDPgon56v+IGZDrYq7pe3GDl9aw==}
     peerDependencies:
       vue: ^3.0.1
     dependencies:

From 94d6f38e89174f879be4e5b1897b52603b40a745 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Thu, 29 Sep 2022 09:44:58 +0000
Subject: [PATCH 06/19] fix missed conversion to ref (#2445)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2445
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/views/list/ListList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index e92da5223..fa5f09972 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -197,7 +197,7 @@ const DRAG_OPTIONS = {
 } as const
 
 
-const taskEditTask = ref(null)
+const taskEditTask = ref<ITask | null>(null)
 const isTaskEdit = ref(false)
 
 const {
@@ -310,7 +310,7 @@ async function saveTaskPosition(e) {
 	}
 
 	const updatedTask = await this.$store.dispatch('tasks/update', newTask)
-	this.tasks[e.newIndex] = updatedTask
+	tasks.value[e.newIndex] = updatedTask
 }
 </script>
 

From 8f25f5d353064f383e97bbc524ce6e00ba559d0f Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Thu, 29 Sep 2022 10:47:45 +0000
Subject: [PATCH 07/19] feat: improve api-config (#2444)

remove obsolet `success` (not used)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2444
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/misc/api-config.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 964a497c9..cf3ad9383 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -30,10 +30,7 @@
 			<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
 		</div>
 
-		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
-			{{ successMsg }}
-		</message>
-		<message variant="danger" v-if="errorMsg !== '' && successMsg === ''" class="mt-2">
+		<message variant="danger" v-if="errorMsg !== ''" class="mt-2">
 			{{ errorMsg }}
 		</message>
 	</div>
@@ -74,7 +71,6 @@ watch(() => props.configureOpen, (value) => {
 const {t} = useI18n({useScope: 'global'})
 
 const errorMsg = ref('')
-const successMsg = ref('')
 
 async function setApiUrl() {
 	if (apiUrl.value === '') {
@@ -99,7 +95,6 @@ async function setApiUrl() {
 		emit('foundApi', apiUrl.value)
 	} catch (e) {
 		// Still not found, url is still invalid
-		successMsg.value = ''
 		errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})
 	}
 }

From 8e3f54ae42c21fdae62225892ad340877651df27 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 23 Sep 2022 16:51:35 +0200
Subject: [PATCH 08/19] feat: convert model methods to named functions

---
 src/components/misc/user.vue                  | 19 +++++++++------
 .../notifications/notifications.vue           |  3 ++-
 src/components/sharing/linkSharing.vue        |  3 ++-
 src/components/sharing/userTeam.vue           |  4 ++--
 src/components/tasks/partials/comments.vue    |  9 +++----
 .../tasks/partials/createdUpdated.vue         |  3 ++-
 src/components/tasks/partials/defer-task.vue  |  9 ++++---
 src/modelTypes/IUser.ts                       |  4 +++-
 src/models/notification.ts                    |  9 +++----
 src/models/user.ts                            | 24 +++++++++----------
 src/store/types.ts                            |  1 +
 src/stores/auth.ts                            | 19 +++++++++++----
 src/stores/labels.ts                          |  8 +++----
 src/stores/lists.ts                           |  6 ++---
 src/views/namespaces/settings/share.vue       |  2 +-
 src/views/teams/EditTeam.vue                  |  3 ++-
 16 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index 89a2abda2..b10bcdd8b 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -2,34 +2,39 @@
 	<div :class="{'is-inline': isInline}" class="user">
 		<img
 			:height="avatarSize"
-			:src="user.getAvatarUrl(avatarSize)"
+			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
 			alt=""
 			class="avatar"
-			v-tooltip="user.getDisplayName()"/>
-		<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</span>
+			v-tooltip="getDisplayName(user)"/>
+		<span class="username" v-if="showUsername">{{ getDisplayName(user) }}</span>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import type {PropType} from 'vue'
+
+import {getAvatarUrl, getDisplayName} from '@/models/user'
+import type {IUser} from '@/modelTypes/IUser'
+
 defineProps({
 	user: {
+		type: Object as PropType<IUser>,
 		required: true,
-		type: Object,
 	},
 	showUsername: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: true,
 	},
 	avatarSize: {
-		required: false,
 		type: Number,
+		required: false,
 		default: 50,
 	},
 	isInline: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: false,
 	},
 })
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index aaaad93ec..c93d12b56 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -24,7 +24,7 @@
 					<div class="detail">
 						<div>
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
-								{{ n.notification.doer.getDisplayName() }}
+								{{ getDisplayName(n.notification.doer) }}
 							</span>
 							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
@@ -56,6 +56,7 @@ import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
 import {useAuthStore} from '@/stores/auth'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 94a9cba33..8cf5dc36d 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -93,7 +93,7 @@
 
 						<p class="mb-2">
 							<i18n-t keypath="list.share.links.sharedBy" scope="global">
-								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
+								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
 							</i18n-t>
 						</p>
 
@@ -201,6 +201,7 @@ import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import {getDisplayName} from '@/models/user'
 import type {ListView} from '@/types/ListView'
 import {LIST_VIEWS} from '@/types/ListView'
 import {useConfigStore} from '@/stores/config'
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index f833b8b84..6d56baaf0 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -28,7 +28,7 @@
 			<tbody>
 			<tr :key="s.id" v-for="s in sharables">
 				<template v-if="shareType === 'user'">
-					<td>{{ s.getDisplayName() }}</td>
+					<td>{{ getDisplayName(s) }}</td>
 					<td>
 						<template v-if="s.id === userInfo.id">
 							<b class="is-success">{{ $t('list.share.userTeam.you') }}</b>
@@ -150,7 +150,7 @@ import UserListModel from '@/models/userList'
 import type {IUserList} from '@/modelTypes/IUserList'
 
 import UserService from '@/services/user'
-import UserModel from '@/models/user'
+import UserModel, { getDisplayName } from '@/models/user'
 import type {IUser} from '@/modelTypes/IUser'
 
 import TeamNamespaceService from '@/services/teamNamespace'
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index f573bb6ba..dd07f5b88 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -17,7 +17,7 @@
 			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
 					<img
-						:src="c.author.getAvatarUrl(48)"
+						:src="getAvatarUrl(c.author, 48)"
 						alt=""
 						class="image is-avatar"
 						height="48"
@@ -27,13 +27,13 @@
 				<div class="media-content">
 					<div class="comment-info">
 						<img
-							:src="c.author.getAvatarUrl(20)"
+							:src="getAvatarUrl(c.author, 20)"
 							alt=""
 							class="image is-avatar d-print-none"
 							height="20"
 							width="20"
 						/>
-						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
+						<strong>{{ getDisplayName(c.author) }}</strong>&nbsp;
 						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
@@ -166,6 +166,7 @@ import type {ITask} from '@/modelTypes/ITask'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getAvatarUrl, getDisplayName} from '@/models/user'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
@@ -196,7 +197,7 @@ const newComment = reactive(new TaskCommentModel())
 const saved = ref<ITask['id'] | null>(null)
 const saving = ref<ITask['id'] | null>(null)
 
-const userAvatar = computed(() => authStore.info.getAvatarUrl(48))
+const userAvatar = computed(() => getAvatarUrl(authStore.info, 48))
 const currentUserId = computed(() => authStore.info.id)
 const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {
diff --git a/src/components/tasks/partials/createdUpdated.vue b/src/components/tasks/partials/createdUpdated.vue
index d7fd8f0a3..d34e015b5 100644
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@@ -3,7 +3,7 @@
 		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
 			<i18n-t keypath="task.detail.created" scope="global">
 				<span>{{ formatDateSince(task.created) }}</span>
-				{{ task.createdBy.getDisplayName() }}
+				{{ getDisplayName(task.createdBy) }}
 			</i18n-t>
 		</time>
 		<template v-if="+new Date(task.created) !== +new Date(task.updated)">
@@ -30,6 +30,7 @@
 import {computed, toRefs, type PropType} from 'vue'
 import type {ITask} from '@/modelTypes/ITask'
 import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
 
 const props = defineProps({
 	task: {
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 0759a203a..c86db0fc4 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
@@ -63,12 +63,12 @@ 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>()
 const lastValue = ref<Date>()
-const changeInterval = ref<number>()
+const changeInterval = ref<ReturnType<typeof setInterval>>()
 
 watch(
-	() => props.modelValue,
+	toRef(props, 'modelValue'),
 	(value) => {
-		task.value = value
+		task.value = { ...value }
 		dueDate.value = value.dueDate
 		lastValue.value = value.dueDate
 	},
@@ -123,7 +123,6 @@ async function updateDueDate() {
 		return
 	}
 
-	// FIXME: direct prop manipulation
 	const newTask = await taskService.update({
 		...task.value,
 		dueDate: new Date(dueDate.value),
diff --git a/src/modelTypes/IUser.ts b/src/modelTypes/IUser.ts
index 2465a37df..01b64a927 100644
--- a/src/modelTypes/IUser.ts
+++ b/src/modelTypes/IUser.ts
@@ -7,13 +7,15 @@ export const AUTH_TYPES = {
 	'LINK_SHARE': 2,
 } as const
 
+type AuthType = typeof AUTH_TYPES[keyof typeof AUTH_TYPES]
+
 export interface IUser extends IAbstract {
 	id: number
 	email: string
 	username: string
 	name: string
 	exp: number
-	type: typeof AUTH_TYPES[keyof typeof AUTH_TYPES],
+	type: AuthType
 
 	created: Date
 	updated: Date
diff --git a/src/models/notification.ts b/src/models/notification.ts
index 911c49e7e..4645bb04c 100644
--- a/src/models/notification.ts
+++ b/src/models/notification.ts
@@ -1,12 +1,13 @@
 import AbstractModel from './abstractModel'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
-import UserModel from '@/models/user'
+import UserModel, {getDisplayName} from '@/models/user'
 import TaskModel from '@/models/task'
 import TaskCommentModel from '@/models/taskComment'
 import ListModel from '@/models/list'
 import TeamModel from '@/models/team'
 
 import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
+import type { IUser } from '@/modelTypes/IUser'
 
 export default class NotificationModel extends AbstractModel<INotification> implements INotification {
 	id = 0
@@ -61,14 +62,14 @@ export default class NotificationModel extends AbstractModel<INotification> impl
 		this.readAt = parseDateOrNull(this.readAt)
 	}
 
-	toText(user = null) {
+	toText(user: IUser | null = null) {
 		let who = ''
 
 		switch (this.name) {
 			case NOTIFICATION_NAMES.TASK_COMMENT:
 				return `commented on ${this.notification.task.getTextIdentifier()}`
 			case NOTIFICATION_NAMES.TASK_ASSIGNED:
-				who = `${this.notification.assignee.getDisplayName()}`
+				who = `${getDisplayName(this.notification.assignee)}`
 
 				if (user !== null && user.id === this.notification.assignee.id) {
 					who = 'you'
@@ -80,7 +81,7 @@ export default class NotificationModel extends AbstractModel<INotification> impl
 			case NOTIFICATION_NAMES.LIST_CREATED:
 				return `created ${this.notification.list.title}`
 			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
-				who = `${this.notification.member.getDisplayName()}`
+				who = `${getDisplayName(this.notification.member)}`
 
 				if (user !== null && user.id === this.notification.member.id) {
 					who = 'you'
diff --git a/src/models/user.ts b/src/models/user.ts
index d7071c243..ce99f4a9e 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -4,6 +4,18 @@ import UserSettingsModel from '@/models/userSettings'
 import { AUTH_TYPES, type IUser } from '@/modelTypes/IUser'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 
+export function getAvatarUrl(user: IUser, size = 50) {
+	return `${window.API_URL}/avatar/${user.username}?size=${size}`
+}
+
+export function getDisplayName(user: IUser) {
+	if (user.name !== '') {
+		return user.name
+	}
+
+	return user.username
+}
+
 export default class UserModel extends AbstractModel<IUser> implements IUser {
 	id = 0
 	email = ''
@@ -25,16 +37,4 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 
 		this.settings = new UserSettingsModel(this.settings || {})
 	}
-
-	getAvatarUrl(size = 50) {
-		return `${window.API_URL}/avatar/${this.username}?size=${size}`
-	}
-
-	getDisplayName() {
-		if (this.name !== '') {
-			return this.name
-		}
-
-		return this.username
-	}
 }
\ No newline at end of file
diff --git a/src/store/types.ts b/src/store/types.ts
index 3bda4dfbb..a263ef089 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -32,6 +32,7 @@ export interface AuthState {
 	lastUserInfoRefresh: Date | null,
 	settings: IUserSettings,
 	isLoading: boolean,
+	isLoadingGeneralSettings: boolean
 }
 
 export interface ConfigState {
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 1f949e7fd..4d06ef3ff 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -3,7 +3,7 @@ import {defineStore, acceptHMRUpdate} from 'pinia'
 import {HTTPFactory, AuthenticatedHTTPFactory} from '@/http-common'
 import {i18n, getCurrentLanguage, saveLanguage} from '@/i18n'
 import {objectToSnakeCase} from '@/helpers/case'
-import UserModel from '@/models/user'
+import UserModel, { getAvatarUrl } from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
 import {setLoadingPinia} from '@/store/helper'
@@ -15,6 +15,7 @@ import type {IUserSettings} from '@/modelTypes/IUserSettings'
 import router from '@/router'
 import {useConfigStore} from '@/stores/config'
 import UserSettingsModel from '@/models/userSettings'
+import {store} from '@/store'
 
 export const useAuthStore = defineStore('auth', {
 	state: () : AuthState => ({
@@ -28,6 +29,7 @@ export const useAuthStore = defineStore('auth', {
 		
 		lastUserInfoRefresh: null,
 		isLoading: false,
+		isLoadingGeneralSettings: false,
 	}),
 	getters: {
 		authUser(state) {
@@ -48,6 +50,10 @@ export const useAuthStore = defineStore('auth', {
 			this.isLoading = isLoading 
 		},
 
+		setIsLoadingGeneralSettings(isLoading: boolean) {
+			this.isLoadingGeneralSettings = isLoading 
+		},
+
 		setUser(info: IUser | null) {
 			this.info = info
 			if (info !== null) {
@@ -78,7 +84,7 @@ export const useAuthStore = defineStore('auth', {
 		},
 		reloadAvatar() {
 			if (!this.info) return
-			this.avatarUrl = `${this.info.getAvatarUrl()}&=${+new Date()}`
+			this.avatarUrl = `${getAvatarUrl(this.info)}&=${+new Date()}`
 		},
 		updateLastUserRefresh() {
 			this.lastUserInfoRefresh = new Date()
@@ -87,6 +93,7 @@ export const useAuthStore = defineStore('auth', {
 		// Logs a user in with a set of credentials.
 		async login(credentials) {
 			const HTTP = HTTPFactory()
+			store.commit('loading', true)
 			this.setIsLoading(true)
 
 			// Delete an eventually preexisting old token
@@ -110,6 +117,7 @@ export const useAuthStore = defineStore('auth', {
 
 				throw e
 			} finally {
+				store.commit('loading', false)
 				this.setIsLoading(false)
 			}
 		},
@@ -118,6 +126,7 @@ export const useAuthStore = defineStore('auth', {
 		// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
 		async register(credentials) {
 			const HTTP = HTTPFactory()
+			store.commit('loading', true)
 			this.setIsLoading(true)
 			try {
 				await HTTP.post('register', credentials)
@@ -129,12 +138,14 @@ export const useAuthStore = defineStore('auth', {
 
 				throw e
 			} finally {
+			store.commit('loading', false)
 				this.setIsLoading(false)
 			}
 		},
 
 		async openIdAuth({provider, code}) {
 			const HTTP = HTTPFactory()
+			store.commit('loading', true)
 			this.setIsLoading(true)
 
 			const data = {
@@ -151,6 +162,7 @@ export const useAuthStore = defineStore('auth', {
 				// Tell others the user is autheticated
 				this.checkAuth()
 			} finally {
+				store.commit('loading', false)
 				this.setIsLoading(false)
 			}
 		},
@@ -266,11 +278,10 @@ export const useAuthStore = defineStore('auth', {
 			settings: IUserSettings
 			showMessage : boolean
 		}) {
-			// const showMessage = payload.showMessage ?? true
 			const userSettingsService = new UserSettingsService()
 
 			// FIXME
-			const cancel = setLoadingPinia(useAuthStore, 'general-settings')
+			const cancel = setLoadingPinia(this, this.setIsLoadingGeneralSettings)
 			try {
 				saveLanguage(settings.language)
 				await userSettingsService.update(settings)
diff --git a/src/stores/labels.ts b/src/stores/labels.ts
index 765fa16ed..06a372cd1 100644
--- a/src/stores/labels.ts
+++ b/src/stores/labels.ts
@@ -80,7 +80,7 @@ export const useLabelStore = defineStore('label', {
 				return
 			}
 
-			const cancel = setLoadingPinia(useLabelStore, this.setIsLoading)
+			const cancel = setLoadingPinia(this)
 
 			try {
 				const labels = await getAllLabels()
@@ -92,7 +92,7 @@ export const useLabelStore = defineStore('label', {
 		},
 
 		async deleteLabel(label: ILabel) {
-			const cancel = setLoadingPinia(useLabelStore)
+			const cancel = setLoadingPinia(this)
 			const labelService = new LabelService()
 
 			try {
@@ -106,7 +106,7 @@ export const useLabelStore = defineStore('label', {
 		},
 
 		async updateLabel(label: ILabel) {
-			const cancel = setLoadingPinia(useLabelStore)
+			const cancel = setLoadingPinia(this)
 			const labelService = new LabelService()
 
 			try {
@@ -120,7 +120,7 @@ export const useLabelStore = defineStore('label', {
 		},
 
 		async createLabel(label: ILabel) {
-			const cancel = setLoadingPinia(useLabelStore)
+			const cancel = setLoadingPinia(this)
 			const labelService = new LabelService()
 
 			try {
diff --git a/src/stores/lists.ts b/src/stores/lists.ts
index abf72922b..5802250b9 100644
--- a/src/stores/lists.ts
+++ b/src/stores/lists.ts
@@ -87,7 +87,7 @@ export const useListStore = defineStore('list', {
 		},
 
 		async createList(list: IList) {
-			const cancel = setLoadingPinia(useListStore)
+			const cancel = setLoadingPinia(this)
 			const listService = new ListService()
 
 			try {
@@ -103,7 +103,7 @@ export const useListStore = defineStore('list', {
 		},
 
 		async updateList(list: IList) {
-			const cancel = setLoadingPinia(useListStore)
+			const cancel = setLoadingPinia(this)
 			const listService = new ListService()
 
 			try {
@@ -139,7 +139,7 @@ export const useListStore = defineStore('list', {
 		},
 
 		async deleteList(list: IList) {
-			const cancel = setLoadingPinia(useListStore)
+			const cancel = setLoadingPinia(this)
 			const listService = new ListService()
 
 			try {
diff --git a/src/views/namespaces/settings/share.vue b/src/views/namespaces/settings/share.vue
index 5bcc9e063..923a56999 100644
--- a/src/views/namespaces/settings/share.vue
+++ b/src/views/namespaces/settings/share.vue
@@ -36,7 +36,7 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import manageSharing from '@/components/sharing/userTeam.vue'
 import {useTitle} from '@/composables/useTitle'
 import {useAuthStore} from '@/stores/auth'
-import type { INamespace } from '@/modelTypes/INamespace'
+import type {INamespace} from '@/modelTypes/INamespace'
 
 const {t} = useI18n({useScope: 'global'})
 
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 4c8be9a52..60ec6b851 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -85,7 +85,7 @@
 			<table class="table has-actions is-striped is-hoverable is-fullwidth">
 				<tbody>
 				<tr :key="m.id" v-for="m in team?.members">
-					<td>{{ m.getDisplayName() }}</td>
+					<td>{{ getDisplayName(m) }}</td>
 					<td>
 						<template v-if="m.id === userInfo.id">
 							<b class="is-success">You</b>
@@ -176,6 +176,7 @@ import {RIGHTS as Rights} from '@/constants/rights'
 
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {getDisplayName} from '@/models/user'
 import {useAuthStore} from '@/stores/auth'
 
 import type {ITeam} from '@/modelTypes/ITeam'

From 1fdda07f650702b7e3943e0afc7532367ee20100 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 23 Sep 2022 11:45:52 +0200
Subject: [PATCH 09/19] feat: move tasks to stores

---
 src/store/index.ts                     | 2 --
 src/{store/modules => stores}/tasks.ts | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)
 rename src/{store/modules => stores}/tasks.ts (98%)

diff --git a/src/store/index.ts b/src/store/index.ts
index 6c530b531..40690179d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -14,7 +14,6 @@ import {
 	QUICK_ACTIONS_ACTIVE,
 } from './mutation-types'
 import kanban from './modules/kanban'
-import tasks from './modules/tasks'
 
 import ListModel from '@/models/list'
 
@@ -35,7 +34,6 @@ export const store = createStore<RootStoreState>({
 	strict: import.meta.env.DEV,
 	modules: {
 		kanban,
-		tasks,
 	},
 	state: () => ({
 		loading: false,
diff --git a/src/store/modules/tasks.ts b/src/stores/tasks.ts
similarity index 98%
rename from src/store/modules/tasks.ts
rename to src/stores/tasks.ts
index 9f7248aa0..5ef453a71 100644
--- a/src/store/modules/tasks.ts
+++ b/src/stores/tasks.ts
@@ -7,8 +7,8 @@ import TaskAssigneeService from '@/services/taskAssignee'
 import LabelTaskService from '@/services/labelTask'
 import UserService from '@/services/user'
 
-import {HAS_TASKS} from '../mutation-types'
-import {setLoading} from '../helper'
+import {HAS_TASKS} from '../store/mutation-types'
+import {setLoading} from '../store/helper'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {parseTaskText} from '@/modules/parseTaskText'
 

From 64cf1c8ccf1bf4950560cd3fede723b3144eb525 Mon Sep 17 00:00:00 2001
From: renovate <renovatebot@kolaente.de>
Date: Thu, 29 Sep 2022 17:03:26 +0000
Subject: [PATCH 10/19] chore(deps): update dependency esbuild to v0.15.10

---
 package.json   |   2 +-
 pnpm-lock.yaml | 142 ++++++++++++++++++++++++-------------------------
 2 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/package.json b/package.json
index a487c0c98..536cde16d 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "browserslist": "4.21.4",
     "caniuse-lite": "1.0.30001412",
     "cypress": "10.9.0",
-    "esbuild": "0.15.9",
+    "esbuild": "0.15.10",
     "eslint": "8.24.0",
     "eslint-plugin-vue": "9.5.1",
     "express": "4.18.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f965343ad..64a064d20 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,7 +40,7 @@ specifiers:
   date-fns: 2.29.3
   dompurify: 2.4.0
   easymde: 2.18.0
-  esbuild: 0.15.9
+  esbuild: 0.15.10
   eslint: 8.24.0
   eslint-plugin-vue: 9.5.1
   express: 4.18.1
@@ -148,7 +148,7 @@ devDependencies:
   browserslist: 4.21.4
   caniuse-lite: 1.0.30001412
   cypress: 10.9.0
-  esbuild: 0.15.9
+  esbuild: 0.15.10
   eslint: 8.24.0
   eslint-plugin-vue: 9.5.1_eslint@8.24.0
   express: 4.18.1
@@ -1611,8 +1611,8 @@ packages:
       kuler: 2.0.0
     dev: true
 
-  /@esbuild/android-arm/0.15.9:
-    resolution: {integrity: sha512-VZPy/ETF3fBG5PiinIkA0W/tlsvlEgJccyN2DzWZEl0DlVKRbu91PvY2D6Lxgluj4w9QtYHjOWjAT44C+oQ+EQ==}
+  /@esbuild/android-arm/0.15.10:
+    resolution: {integrity: sha512-FNONeQPy/ox+5NBkcSbYJxoXj9GWu8gVGJTVmUyoOCKQFDTrHVKgNSzChdNt0I8Aj/iKcsDf2r9BFwv+FSNUXg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -1620,8 +1620,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64/0.15.9:
-    resolution: {integrity: sha512-O+NfmkfRrb3uSsTa4jE3WApidSe3N5++fyOVGP1SmMZi4A3BZELkhUUvj5hwmMuNdlpzAZ8iAPz2vmcR7DCFQA==}
+  /@esbuild/linux-loong64/0.15.10:
+    resolution: {integrity: sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -5859,8 +5859,8 @@ packages:
     resolution: {integrity: sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==}
     dev: true
 
-  /esbuild-android-64/0.15.9:
-    resolution: {integrity: sha512-HQCX7FJn9T4kxZQkhPjNZC7tBWZqJvhlLHPU2SFzrQB/7nDXjmTIFpFTjt7Bd1uFpeXmuwf5h5fZm+x/hLnhbw==}
+  /esbuild-android-64/0.15.10:
+    resolution: {integrity: sha512-UI7krF8OYO1N7JYTgLT9ML5j4+45ra3amLZKx7LO3lmLt1Ibn8t3aZbX5Pu4BjWiqDuJ3m/hsvhPhK/5Y/YpnA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -5868,8 +5868,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-android-arm64/0.15.9:
-    resolution: {integrity: sha512-E6zbLfqbFVCNEKircSHnPiSTsm3fCRxeIMPfrkS33tFjIAoXtwegQfVZqMGR0FlsvVxp2NEDOUz+WW48COCjSg==}
+  /esbuild-android-arm64/0.15.10:
+    resolution: {integrity: sha512-EOt55D6xBk5O05AK8brXUbZmoFj4chM8u3riGflLa6ziEoVvNjRdD7Cnp82NHQGfSHgYR06XsPI8/sMuA/cUwg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -5877,8 +5877,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-64/0.15.9:
-    resolution: {integrity: sha512-gI7dClcDN/HHVacZhTmGjl0/TWZcGuKJ0I7/xDGJwRQQn7aafZGtvagOFNmuOq+OBFPhlPv1T6JElOXb0unkSQ==}
+  /esbuild-darwin-64/0.15.10:
+    resolution: {integrity: sha512-hbDJugTicqIm+WKZgp208d7FcXcaK8j2c0l+fqSJ3d2AzQAfjEYDRM3Z2oMeqSJ9uFxyj/muSACLdix7oTstRA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -5886,8 +5886,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-darwin-arm64/0.15.9:
-    resolution: {integrity: sha512-VZIMlcRN29yg/sv7DsDwN+OeufCcoTNaTl3Vnav7dL/nvsApD7uvhVRbgyMzv0zU/PP0xRhhIpTyc7lxEzHGSw==}
+  /esbuild-darwin-arm64/0.15.10:
+    resolution: {integrity: sha512-M1t5+Kj4IgSbYmunf2BB6EKLkWUq+XlqaFRiGOk8bmBapu9bCDrxjf4kUnWn59Dka3I27EiuHBKd1rSO4osLFQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -5895,8 +5895,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-64/0.15.9:
-    resolution: {integrity: sha512-uM4z5bTvuAXqPxrI204txhlsPIolQPWRMLenvGuCPZTnnGlCMF2QLs0Plcm26gcskhxewYo9LkkmYSS5Czrb5A==}
+  /esbuild-freebsd-64/0.15.10:
+    resolution: {integrity: sha512-KMBFMa7C8oc97nqDdoZwtDBX7gfpolkk6Bcmj6YFMrtCMVgoU/x2DI1p74DmYl7CSS6Ppa3xgemrLrr5IjIn0w==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -5904,8 +5904,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.15.9:
-    resolution: {integrity: sha512-HHDjT3O5gWzicGdgJ5yokZVN9K9KG05SnERwl9nBYZaCjcCgj/sX8Ps1jvoFSfNCO04JSsHSOWo4qvxFuj8FoA==}
+  /esbuild-freebsd-arm64/0.15.10:
+    resolution: {integrity: sha512-m2KNbuCX13yQqLlbSojFMHpewbn8wW5uDS6DxRpmaZKzyq8Dbsku6hHvh2U+BcLwWY4mpgXzFUoENEf7IcioGg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -5913,8 +5913,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-32/0.15.9:
-    resolution: {integrity: sha512-AQIdE8FugGt1DkcekKi5ycI46QZpGJ/wqcMr7w6YUmOmp2ohQ8eO4sKUsOxNOvYL7hGEVwkndSyszR6HpVHLFg==}
+  /esbuild-linux-32/0.15.10:
+    resolution: {integrity: sha512-guXrwSYFAvNkuQ39FNeV4sNkNms1bLlA5vF1H0cazZBOLdLFIny6BhT+TUbK/hdByMQhtWQ5jI9VAmPKbVPu1w==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -5922,8 +5922,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-64/0.15.9:
-    resolution: {integrity: sha512-4RXjae7g6Qs7StZyiYyXTZXBlfODhb1aBVAjd+ANuPmMhWthQilWo7rFHwJwL7DQu1Fjej2sODAVwLbcIVsAYQ==}
+  /esbuild-linux-64/0.15.10:
+    resolution: {integrity: sha512-jd8XfaSJeucMpD63YNMO1JCrdJhckHWcMv6O233bL4l6ogQKQOxBYSRP/XLWP+6kVTu0obXovuckJDcA0DKtQA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -5931,8 +5931,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm/0.15.9:
-    resolution: {integrity: sha512-3Zf2GVGUOI7XwChH3qrnTOSqfV1V4CAc/7zLVm4lO6JT6wbJrTgEYCCiNSzziSju+J9Jhf9YGWk/26quWPC6yQ==}
+  /esbuild-linux-arm/0.15.10:
+    resolution: {integrity: sha512-6N8vThLL/Lysy9y4Ex8XoLQAlbZKUyExCWyayGi2KgTBelKpPgj6RZnUaKri0dHNPGgReJriKVU6+KDGQwn10A==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -5940,8 +5940,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-arm64/0.15.9:
-    resolution: {integrity: sha512-a+bTtxJmYmk9d+s2W4/R1SYKDDAldOKmWjWP0BnrWtDbvUBNOm++du0ysPju4mZVoEFgS1yLNW+VXnG/4FNwdQ==}
+  /esbuild-linux-arm64/0.15.10:
+    resolution: {integrity: sha512-GByBi4fgkvZFTHFDYNftu1DQ1GzR23jws0oWyCfhnI7eMOe+wgwWrc78dbNk709Ivdr/evefm2PJiUBMiusS1A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -5949,8 +5949,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-mips64le/0.15.9:
-    resolution: {integrity: sha512-Zn9HSylDp89y+TRREMDoGrc3Z4Hs5u56ozZLQCiZAUx2+HdbbXbWdjmw3FdTJ/i7t5Cew6/Q+6kfO3KCcFGlyw==}
+  /esbuild-linux-mips64le/0.15.10:
+    resolution: {integrity: sha512-BxP+LbaGVGIdQNJUNF7qpYjEGWb0YyHVSKqYKrn+pTwH/SiHUxFyJYSP3pqkku61olQiSBnSmWZ+YUpj78Tw7Q==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -5958,8 +5958,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.15.9:
-    resolution: {integrity: sha512-OEiOxNAMH9ENFYqRsWUj3CWyN3V8P3ZXyfNAtX5rlCEC/ERXrCEFCJji/1F6POzsXAzxvUJrTSTCy7G6BhA6Fw==}
+  /esbuild-linux-ppc64le/0.15.10:
+    resolution: {integrity: sha512-LoSQCd6498PmninNgqd/BR7z3Bsk/mabImBWuQ4wQgmQEeanzWd5BQU2aNi9mBURCLgyheuZS6Xhrw5luw3OkQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -5967,8 +5967,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-riscv64/0.15.9:
-    resolution: {integrity: sha512-ukm4KsC3QRausEFjzTsOZ/qqazw0YvJsKmfoZZm9QW27OHjk2XKSQGGvx8gIEswft/Sadp03/VZvAaqv5AIwNA==}
+  /esbuild-linux-riscv64/0.15.10:
+    resolution: {integrity: sha512-Lrl9Cr2YROvPV4wmZ1/g48httE8z/5SCiXIyebiB5N8VT7pX3t6meI7TQVHw/wQpqP/AF4SksDuFImPTM7Z32Q==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -5976,8 +5976,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-linux-s390x/0.15.9:
-    resolution: {integrity: sha512-uDOQEH55wQ6ahcIKzQr3VyjGc6Po/xblLGLoUk3fVL1qjlZAibtQr6XRfy5wPJLu/M2o0vQKLq4lyJ2r1tWKcw==}
+  /esbuild-linux-s390x/0.15.10:
+    resolution: {integrity: sha512-ReP+6q3eLVVP2lpRrvl5EodKX7EZ1bS1/z5j6hsluAlZP5aHhk6ghT6Cq3IANvvDdscMMCB4QEbI+AjtvoOFpA==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -5985,8 +5985,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-netbsd-64/0.15.9:
-    resolution: {integrity: sha512-yWgxaYTQz+TqX80wXRq6xAtb7GSBAp6gqLKfOdANg9qEmAI1Bxn04IrQr0Mzm4AhxvGKoHzjHjMgXbCCSSDxcw==}
+  /esbuild-netbsd-64/0.15.10:
+    resolution: {integrity: sha512-iGDYtJCMCqldMskQ4eIV+QSS/CuT7xyy9i2/FjpKvxAuCzrESZXiA1L64YNj6/afuzfBe9i8m/uDkFHy257hTw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -5994,8 +5994,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-openbsd-64/0.15.9:
-    resolution: {integrity: sha512-JmS18acQl4iSAjrEha1MfEmUMN4FcnnrtTaJ7Qg0tDCOcgpPPQRLGsZqhes0vmx8VA6IqRyScqXvaL7+Q0Uf3A==}
+  /esbuild-openbsd-64/0.15.10:
+    resolution: {integrity: sha512-ftMMIwHWrnrYnvuJQRJs/Smlcb28F9ICGde/P3FUTCgDDM0N7WA0o9uOR38f5Xe2/OhNCgkjNeb7QeaE3cyWkQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -6003,8 +6003,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-sunos-64/0.15.9:
-    resolution: {integrity: sha512-UKynGSWpzkPmXW3D2UMOD9BZPIuRaSqphxSCwScfEE05Be3KAmvjsBhht1fLzKpiFVJb0BYMd4jEbWMyJ/z1hQ==}
+  /esbuild-sunos-64/0.15.10:
+    resolution: {integrity: sha512-mf7hBL9Uo2gcy2r3rUFMjVpTaGpFJJE5QTDDqUFf1632FxteYANffDZmKbqX0PfeQ2XjUDE604IcE7OJeoHiyg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -6012,8 +6012,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-32/0.15.9:
-    resolution: {integrity: sha512-aqXvu4/W9XyTVqO/hw3rNxKE1TcZiEYHPsXM9LwYmKSX9/hjvfIJzXwQBlPcJ/QOxedfoMVH0YnhhQ9Ffb0RGA==}
+  /esbuild-windows-32/0.15.10:
+    resolution: {integrity: sha512-ttFVo+Cg8b5+qHmZHbEc8Vl17kCleHhLzgT8X04y8zudEApo0PxPg9Mz8Z2cKH1bCYlve1XL8LkyXGFjtUYeGg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -6021,8 +6021,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-64/0.15.9:
-    resolution: {integrity: sha512-zm7h91WUmlS4idMtjvCrEeNhlH7+TNOmqw5dJPJZrgFaxoFyqYG6CKDpdFCQXdyKpD5yvzaQBOMVTCBVKGZDEg==}
+  /esbuild-windows-64/0.15.10:
+    resolution: {integrity: sha512-2H0gdsyHi5x+8lbng3hLbxDWR7mKHWh5BXZGKVG830KUmXOOWFE2YKJ4tHRkejRduOGDrBvHBriYsGtmTv3ntA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -6030,8 +6030,8 @@ packages:
     dev: true
     optional: true
 
-  /esbuild-windows-arm64/0.15.9:
-    resolution: {integrity: sha512-yQEVIv27oauAtvtuhJVfSNMztJJX47ismRS6Sv2QMVV9RM+6xjbMWuuwM2nxr5A2/gj/mu2z9YlQxiwoFRCfZA==}
+  /esbuild-windows-arm64/0.15.10:
+    resolution: {integrity: sha512-S+th4F+F8VLsHLR0zrUcG+Et4hx0RKgK1eyHc08kztmLOES8BWwMiaGdoW9hiXuzznXQ0I/Fg904MNbr11Nktw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -6039,34 +6039,34 @@ packages:
     dev: true
     optional: true
 
-  /esbuild/0.15.9:
-    resolution: {integrity: sha512-OnYr1rkMVxtmMHIAKZLMcEUlJmqcbxBz9QoBU8G9v455na0fuzlT/GLu6l+SRghrk0Mm2fSSciMmzV43Q8e0Gg==}
+  /esbuild/0.15.10:
+    resolution: {integrity: sha512-N7wBhfJ/E5fzn/SpNgX+oW2RLRjwaL8Y0ezqNqhjD6w0H2p0rDuEz2FKZqpqLnO8DCaWumKe8dsC/ljvVSSxng==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': 0.15.9
-      '@esbuild/linux-loong64': 0.15.9
-      esbuild-android-64: 0.15.9
-      esbuild-android-arm64: 0.15.9
-      esbuild-darwin-64: 0.15.9
-      esbuild-darwin-arm64: 0.15.9
-      esbuild-freebsd-64: 0.15.9
-      esbuild-freebsd-arm64: 0.15.9
-      esbuild-linux-32: 0.15.9
-      esbuild-linux-64: 0.15.9
-      esbuild-linux-arm: 0.15.9
-      esbuild-linux-arm64: 0.15.9
-      esbuild-linux-mips64le: 0.15.9
-      esbuild-linux-ppc64le: 0.15.9
-      esbuild-linux-riscv64: 0.15.9
-      esbuild-linux-s390x: 0.15.9
-      esbuild-netbsd-64: 0.15.9
-      esbuild-openbsd-64: 0.15.9
-      esbuild-sunos-64: 0.15.9
-      esbuild-windows-32: 0.15.9
-      esbuild-windows-64: 0.15.9
-      esbuild-windows-arm64: 0.15.9
+      '@esbuild/android-arm': 0.15.10
+      '@esbuild/linux-loong64': 0.15.10
+      esbuild-android-64: 0.15.10
+      esbuild-android-arm64: 0.15.10
+      esbuild-darwin-64: 0.15.10
+      esbuild-darwin-arm64: 0.15.10
+      esbuild-freebsd-64: 0.15.10
+      esbuild-freebsd-arm64: 0.15.10
+      esbuild-linux-32: 0.15.10
+      esbuild-linux-64: 0.15.10
+      esbuild-linux-arm: 0.15.10
+      esbuild-linux-arm64: 0.15.10
+      esbuild-linux-mips64le: 0.15.10
+      esbuild-linux-ppc64le: 0.15.10
+      esbuild-linux-riscv64: 0.15.10
+      esbuild-linux-s390x: 0.15.10
+      esbuild-netbsd-64: 0.15.10
+      esbuild-openbsd-64: 0.15.10
+      esbuild-sunos-64: 0.15.10
+      esbuild-windows-32: 0.15.10
+      esbuild-windows-64: 0.15.10
+      esbuild-windows-arm64: 0.15.10
     dev: true
 
   /escalade/3.1.1:
@@ -12596,7 +12596,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      esbuild: 0.15.9
+      esbuild: 0.15.10
       postcss: 8.4.16
       resolve: 1.22.1
       rollup: 2.78.0

From 34ffd1d5729341bdede217387a4a4c490d7d60d8 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 23 Sep 2022 12:55:53 +0200
Subject: [PATCH 11/19] feat: port tasks store to pinia

---
 .../quick-actions/quick-actions.vue           |   4 +-
 src/components/tasks/add-task.vue             |   9 +-
 src/components/tasks/partials/description.vue |  11 +-
 .../tasks/partials/editAssignees.vue          |  11 +-
 src/components/tasks/partials/editLabels.vue  |  20 +--
 src/components/tasks/partials/heading.vue     |   8 +-
 src/components/tasks/partials/kanban-card.vue |   3 +-
 .../tasks/partials/relatedTasks.vue           |   6 +-
 .../tasks/partials/singleTaskInList.vue       |   3 +-
 src/helpers/attachments.ts                    |   4 +-
 src/main.ts                                   |   5 +-
 src/pinia.ts                                  |   5 +
 src/store/index.ts                            |   3 +-
 src/store/types.ts                            |   4 +-
 src/stores/labels.ts                          |   2 +-
 src/stores/tasks.ts                           | 158 ++++++++++--------
 src/views/list/ListKanban.vue                 |   8 +-
 src/views/list/ListList.vue                   |  11 +-
 src/views/tasks/ShowTasks.vue                 |   4 +-
 src/views/tasks/TaskDetailView.vue            |   6 +-
 20 files changed, 157 insertions(+), 128 deletions(-)
 create mode 100644 src/pinia.ts

diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index a71d7b386..a90467a7a 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -73,6 +73,7 @@ import {PREFIXES} from '@/modules/parseTaskText'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useLabelStore} from '@/stores/labels'
+import {useTaskStore} from '@/stores/tasks'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -412,7 +413,8 @@ export default defineComponent({
 				return
 			}
 
-			const task = await this.$store.dispatch('tasks/createNewTask', {
+			const taskStore = useTaskStore()
+			const task = await taskStore.createNewTask({
 				title: this.query,
 				listId: this.currentList.id,
 			})
diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index d6873a165..2a2953866 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -43,12 +43,11 @@
 <script setup lang="ts">
 import {ref, watch, unref, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
 
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
-import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import {useAuthStore} from '@/stores/auth'
+import {useTaskStore} from '@/stores/tasks'
 
 function cleanupTitle(title: string) {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@@ -135,8 +134,8 @@ const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const authStore = useAuthStore()
+const taskStore = useTaskStore()
 
 const errorMessage = ref('')
 
@@ -149,7 +148,7 @@ function resetEmptyTitleError(e) {
 	}
 }
 
-const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
+const loading = computed(() => taskStore.isLoading)
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')
@@ -168,7 +167,7 @@ async function addTask() {
 			return
 		}
 
-		const task = await store.dispatch('tasks/createNewTask', {
+		const task = await taskStore.createNewTask({
 			title,
 			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index 5e34b84ca..d443d2380 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -32,11 +32,12 @@
 
 <script setup lang="ts">
 import {ref,computed, watch, type PropType} from 'vue'
-import {useStore} from '@/store'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import type {ITask} from '@/modelTypes/ITask'
+import {useTaskStore} from '@/stores/tasks'
+import TaskModel from '@/models/task'
 
 
 const props = defineProps({
@@ -55,14 +56,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<ITask>({description: ''})
+const task = ref<ITask>(new TaskModel())
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
 const saving = ref(false)
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const taskStore = useTaskStore()
+const loading = computed(() => taskStore.isLoading)
 
 watch(
 	() => props.modelValue,
@@ -77,7 +78,7 @@ async function save() {
 
 	try {
 		// FIXME: don't update state from internal.
-		task.value = await store.dispatch('tasks/update', task.value)
+		task.value = await taskStore.update(task.value)
 		emit('update:modelValue', task.value)
 
 		saved.value = true
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 09e96e3fc..06ca42d1d 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -29,7 +29,6 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, watch, type PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -39,7 +38,9 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {includesById} from '@/helpers/utils'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
-import type { IUser } from '@/modelTypes/IUser'
+import {useTaskStore} from '@/stores/tasks'
+
+import type {IUser} from '@/modelTypes/IUser'
 
 const props = defineProps({
 		taskId: {
@@ -60,7 +61,7 @@ const props = defineProps({
 	})
 const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
+const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
@@ -79,13 +80,13 @@ watch(
 )
 
 async function addAssignee(user: IUser) {
-	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
+	await taskStore.addAssignee({user: user, taskId: props.taskId})
 	emit('update:modelValue', assignees.value)
 	success({message: t('task.assignee.assignSuccess')})
 }
 
 async function removeAssignee(user: IUser) {
-	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
+	await taskStore.removeAssignee({user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list
 	for (const a in assignees.value) {
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 7aea64308..7bb3ee8c6 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -40,7 +40,6 @@
 
 <script setup lang="ts">
 import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import LabelModel from '@/models/label'
@@ -49,8 +48,9 @@ import {success} from '@/message'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
-import type { ILabel } from '@/modelTypes/ILabel'
-import { useLabelStore } from '@/stores/labels'
+import type {ILabel} from '@/modelTypes/ILabel'
+import {useLabelStore} from '@/stores/labels'
+import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	modelValue: {
@@ -69,7 +69,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
@@ -87,6 +86,7 @@ watch(
 	},
 )
 
+const taskStore = useTaskStore()
 const labelStore = useLabelStore()
 
 const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
@@ -97,17 +97,13 @@ function findLabel(newQuery: string) {
 }
 
 async function addLabel(label: ILabel, showNotification = true) {
-	const bubble = () => {
-		emit('update:modelValue', labels.value)
-	}
-	
 	if (props.taskId === 0) {
-		bubble()
+		emit('update:modelValue', labels.value)
 		return
 	}
 
-	await store.dispatch('tasks/addLabel', {label, taskId: props.taskId})
-	bubble()
+	await taskStore.addLabel({label, taskId: props.taskId})
+	emit('update:modelValue', labels.value)
 	if (showNotification) {
 		success({message: t('task.label.addSuccess')})
 	}
@@ -115,7 +111,7 @@ async function addLabel(label: ILabel, showNotification = true) {
 
 async function removeLabel(label: ILabel) {
 	if (props.taskId !== 0) {
-		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
+		await taskStore.removeLabel({label, taskId: props.taskId})
 	}
 
 	for (const l in labels.value) {
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index b8bc51cf6..5b53018ce 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -38,7 +38,6 @@
 
 <script setup lang="ts">
 import {ref, computed, type PropType} from 'vue'
-import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -48,6 +47,7 @@ import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 
 import type {ITask} from '@/modelTypes/ITask'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	task: {
@@ -72,8 +72,8 @@ async function copyUrl() {
 	await copy(absoluteURL)
 }
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const taskStore = useTaskStore()
+const loading = computed(() => taskStore.isLoading)
 
 const textIdentifier = computed(() => props.task?.getTextIdentifier() || '')
 
@@ -93,7 +93,7 @@ async function save(title: string) {
 
 	try {
 		saving.value = true
-		const newTask = await store.dispatch('tasks/update', {
+		const newTask = await taskStore.update({
 			...props.task,
 			title,
 		})
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 68b0b4809..6ddd776a8 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -78,6 +78,7 @@ import type {ITask} from '@/modelTypes/ITask'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useTaskStore} from '@/stores/tasks'
 
 export default defineComponent({
 	name: 'kanban-card',
@@ -121,7 +122,7 @@ export default defineComponent({
 			this.loadingInternal = true
 			try {
 				const done = !task.done
-				await this.$store.dispatch('tasks/update', {
+				await useTaskStore().update({
 					...task,
 					done,
 				})
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index ff868865a..3d76ebfde 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -149,7 +149,6 @@
 import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRoute} from 'vue-router'
-import {useStore} from '@/store'
 
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
@@ -167,6 +166,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	taskId: {
@@ -190,7 +190,7 @@ const props = defineProps({
 	},
 })
 
-const store = useStore()
+const taskStore = useTaskStore()
 const namespaceStore = useNamespaceStore()
 const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
@@ -344,7 +344,7 @@ async function createAndRelateTask(title: string) {
 }
 
 async function toggleTaskDone(task: ITask) {
-	await store.dispatch('tasks/update', task)
+	await taskStore.update(task)
 	
 	// Find the task in the list and update it so that it is correctly strike through
 	Object.entries(relatedTasks.value).some(([kind, tasks]) => {
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index ccf06f246..4abf633d7 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -119,6 +119,7 @@ import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatD
 import ColorBubble from '@/components/misc/colorBubble.vue'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
+import {useTaskStore} from '@/stores/tasks'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -208,7 +209,7 @@ export default defineComponent({
 
 		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
-				const task = await this.$store.dispatch('tasks/update', this.task)
+				const task = await useTaskStore().update(this.task)
 				this.task = task
 				this.$emit('task-updated', task)
 				this.$message.success({
diff --git a/src/helpers/attachments.ts b/src/helpers/attachments.ts
index e99d3e573..ce51c2038 100644
--- a/src/helpers/attachments.ts
+++ b/src/helpers/attachments.ts
@@ -2,7 +2,7 @@ import AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 
 import AttachmentService from '@/services/attachment'
-import { store } from '@/store'
+import {useTaskStore} from '@/stores/tasks'
 
 export function uploadFile(taskId: number, file: File, onSuccess: (url: string) => void) {
 	const attachmentService = new AttachmentService()
@@ -22,7 +22,7 @@ export async function uploadFiles(
 	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
 
 	response.success?.map((attachment: IAttachment) => {
-		store.dispatch('tasks/addTaskAttachment', {
+		useTaskStore().addTaskAttachment({
 			taskId,
 			attachment,
 		})
diff --git a/src/main.ts b/src/main.ts
index aa64ea3ed..a1e143cc6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,8 @@
 import {createApp} from 'vue'
 
-import App from './App.vue'
+import pinia from './pinia'
 import router from './router'
-import { createPinia } from 'pinia'
+import App from './App.vue'
 
 import {error, success} from './message'
 
@@ -105,7 +105,6 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }
 
-const pinia = createPinia()
 app.use(pinia)
 
 app.use(store, key) // pass the injection key
diff --git a/src/pinia.ts b/src/pinia.ts
new file mode 100644
index 000000000..2999936c2
--- /dev/null
+++ b/src/pinia.ts
@@ -0,0 +1,5 @@
+import {createPinia} from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia
diff --git a/src/store/index.ts b/src/store/index.ts
index 40690179d..73b4a6982 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -21,6 +21,7 @@ import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
 import type { RootStoreState, StoreState } from './types'
+import pinia from '@/pinia'
 import {useAuthStore} from '@/stores/auth'
 
 export const key: InjectionKey<Store<StoreState>> = Symbol()
@@ -130,7 +131,7 @@ export const store = createStore<RootStoreState>({
 		},
 		async loadApp() {
 			await checkAndSetApiUrl(window.API_URL)
-			const authStore = useAuthStore()
+			const authStore = useAuthStore(pinia)
 			await authStore.checkAuth()
 		},
 	},
diff --git a/src/store/types.ts b/src/store/types.ts
index a263ef089..76696a057 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -94,7 +94,9 @@ export interface NamespaceState {
 	isLoading: boolean,
 }
 
-export interface TaskState {}
+export interface TaskState {
+	isLoading: boolean,
+}
 
 
 export type StoreState = RootStoreState & {
diff --git a/src/stores/labels.ts b/src/stores/labels.ts
index 06a372cd1..356524e3c 100644
--- a/src/stores/labels.ts
+++ b/src/stores/labels.ts
@@ -124,7 +124,7 @@ export const useLabelStore = defineStore('label', {
 			const labelService = new LabelService()
 
 			try {
-				const newLabel = await labelService.create(label)
+				const newLabel = await labelService.create(label) as ILabel
 				this.setLabel(newLabel)
 				return newLabel
 			} finally {
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 5ef453a71..a69b1f591 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -1,4 +1,4 @@
-import type { Module } from 'vuex'
+import {defineStore, acceptHMRUpdate} from 'pinia'
 import router from '@/router'
 import {formatISO} from 'date-fns'
 
@@ -8,7 +8,7 @@ import LabelTaskService from '@/services/labelTask'
 import UserService from '@/services/user'
 
 import {HAS_TASKS} from '../store/mutation-types'
-import {setLoading} from '../store/helper'
+import {setLoadingPinia} from '../store/helper'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {parseTaskText} from '@/modules/parseTaskText'
 
@@ -20,15 +20,16 @@ import LabelModel from '@/models/label'
 
 import type {ILabel} from '@/modelTypes/ILabel'
 import type {ITask} from '@/modelTypes/ITask'
-import type { IUser } from '@/modelTypes/IUser'
-import type { IAttachment } from '@/modelTypes/IAttachment'
-import type { IList } from '@/modelTypes/IList'
+import type {IUser} from '@/modelTypes/IUser'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import type {IList} from '@/modelTypes/IList'
 
-import type { RootStoreState, TaskState } from '@/store/types'
+import type {TaskState} from '@/store/types'
 import {useLabelStore} from '@/stores/labels'
 import {useListStore} from '@/stores/lists'
 import {useAttachmentStore} from '@/stores/attachments'
 import {playPop} from '@/helpers/playPop'
+import {store} from '@/store'
 
 // IDEA: maybe use a small fuzzy search here to prevent errors
 function findPropertyByValue(object, key, value) {
@@ -43,7 +44,7 @@ function validateUsername(users: IUser[], username: IUser['username']) {
 }
 
 // Check if the label exists
-function validateLabel(labels: ILabel[], label: ILabel) {
+function validateLabel(labels: ILabel[], label: string) {
 	return findPropertyByValue(labels, 'title', label)
 }
 
@@ -58,7 +59,7 @@ async function addLabelToTask(task: ITask, label: ILabel) {
 	return response
 }
 
-async function findAssignees(parsedTaskAssignees) {
+async function findAssignees(parsedTaskAssignees: string[]) {
 	if (parsedTaskAssignees.length <= 0) {
 		return []
 	}
@@ -74,30 +75,31 @@ async function findAssignees(parsedTaskAssignees) {
 }
 
 
-const tasksStore : Module<TaskState, RootStoreState>= {
-	namespaced: true,
-	state: () => ({}),
+export const useTaskStore = defineStore('task', {
+	state: () : TaskState => ({
+		isLoading: false,
+	}),
 	actions: {
-		async loadTasks(ctx, params) {
+		async loadTasks(params) {
 			const taskService = new TaskService()
 
-			const cancel = setLoading(ctx, 'tasks')
+			const cancel = setLoadingPinia(this)
 			try {
 				const tasks = await taskService.getAll({}, params)
-				ctx.commit(HAS_TASKS, tasks.length > 0, {root: true})
+				store.commit(HAS_TASKS, tasks.length > 0)
 				return tasks
 			} finally {
 				cancel()
 			}
 		},
 
-		async update(ctx, task: ITask) {
-			const cancel = setLoading(ctx, 'tasks')
+		async update(task: ITask) {
+			const cancel = setLoadingPinia(this)
 
 			const taskService = new TaskService()
 			try {
 				const updatedTask = await taskService.update(task)
-				ctx.commit('kanban/setTaskInBucket', updatedTask, {root: true})
+				store.commit('kanban/setTaskInBucket', updatedTask)
 				if (task.done) {
 					playPop()
 				}
@@ -107,23 +109,23 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			}
 		},
 
-		async delete(ctx, task: ITask) {
+		async delete(task: ITask) {
 			const taskService = new TaskService()
 			const response = await taskService.delete(task)
-			ctx.commit('kanban/removeTaskInBucket', task, {root: true})
+			store.commit('kanban/removeTaskInBucket', task)
 			return response
 		},
 
 		// Adds a task attachment in store.
 		// This is an action to be able to commit other mutations
-		addTaskAttachment(ctx, {
+		addTaskAttachment({
 			taskId,
 			attachment,
 		}: {
 			taskId: ITask['id']
 			attachment: IAttachment
 		}) {
-			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			const t = store.getters['kanban/getTaskById'](taskId)
 			if (t.task !== null) {
 				const attachments = [
 					...t.task.attachments,
@@ -137,24 +139,25 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 						attachments,
 					},
 				}
-				ctx.commit('kanban/setTaskInBucketByIndex', newTask, {root: true})
+				store.commit('kanban/setTaskInBucketByIndex', newTask)
 			}
 			const attachmentStore = useAttachmentStore()
 			attachmentStore.add(attachment)
 		},
 
-		async addAssignee(ctx, {
+		async addAssignee({
 			user,
 			taskId,
 		}: {
 			user: IUser,
 			taskId: ITask['id']
 		}) {
-			const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: taskId})
-
 			const taskAssigneeService = new TaskAssigneeService()
-			const r = await taskAssigneeService.create(taskAssignee)
-			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			const r = await taskAssigneeService.create(new TaskAssigneeModel({
+				userId: user.id,
+				taskId: taskId,
+			}))
+			const t = store.getters['kanban/getTaskById'](taskId)
 			if (t.task === null) {
 				// Don't try further adding a label if the task is not in kanban
 				// Usually this means the kanban board hasn't been accessed until now.
@@ -163,33 +166,32 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 				return r
 			}
 
-			const assignees = [
-				...t.task.assignees,
-				user,
-			]
-
-			ctx.commit('kanban/setTaskInBucketByIndex', {
+			store.commit('kanban/setTaskInBucketByIndex', {
 				...t,
 				task: {
 					...t.task,
-					assignees,
+					assignees: [
+						...t.task.assignees,
+						user,
+					],
 				},
-			}, {root: true})
+			})
 			return r
 		},
 
-		async removeAssignee(ctx, {
+		async removeAssignee({
 			user,
 			taskId,
 		}: {
 			user: IUser,
 			taskId: ITask['id']
 		}) {
-			const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: taskId})
-
 			const taskAssigneeService = new TaskAssigneeService()
-			const response = await taskAssigneeService.delete(taskAssignee)
-			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			const response = await taskAssigneeService.delete(new TaskAssigneeModel({
+				userId: user.id,
+				taskId: taskId,
+			}))
+			const t = store.getters['kanban/getTaskById'](taskId)
 			if (t.task === null) {
 				// Don't try further adding a label if the task is not in kanban
 				// Usually this means the kanban board hasn't been accessed until now.
@@ -200,29 +202,30 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 
 			const assignees = t.task.assignees.filter(({ id }) => id !== user.id)
 
-			ctx.commit('kanban/setTaskInBucketByIndex', {
+			store.commit('kanban/setTaskInBucketByIndex', {
 				...t,
 				task: {
 					...t.task,
 					assignees,
 				},
-			}, {root: true})
+			})
 			return response
 
 		},
 
-		async addLabel(ctx, {
+		async addLabel({
 			label,
 			taskId,
 		} : {
 			label: ILabel,
 			taskId: ITask['id']
 		}) {
-			const labelTask = new LabelTaskModel({taskId, labelId: label.id})
-
 			const labelTaskService = new LabelTaskService()
-			const r = await labelTaskService.create(labelTask)
-			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			const r = await labelTaskService.create(new LabelTaskModel({
+				taskId,
+				labelId: label.id,
+			}))
+			const t = store.getters['kanban/getTaskById'](taskId)
 			if (t.task === null) {
 				// Don't try further adding a label if the task is not in kanban
 				// Usually this means the kanban board hasn't been accessed until now.
@@ -231,28 +234,30 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 				return r
 			}
 
-			const labels = [
-				...t.task.labels,
-				label,
-			]
-
-			ctx.commit('kanban/setTaskInBucketByIndex', {
+			store.commit('kanban/setTaskInBucketByIndex', {
 				...t,
 				task: {
 					...t.task,
-					labels,
+					labels: [
+						...t.task.labels,
+						label,
+					],
 				},
-			}, {root: true})
+			})
 
 			return r
 		},
 
-		async removeLabel(ctx, {label, taskId}) {
-			const labelTask = new LabelTaskModel({taskId, labelId: label.id})
-
+		async removeLabel(
+			{label, taskId}:
+			{label: ILabel, taskId: ITask['id']},
+		) {
 			const labelTaskService = new LabelTaskService()
-			const response = await labelTaskService.delete(labelTask)
-			const t = ctx.rootGetters['kanban/getTaskById'](taskId)
+			const response = await labelTaskService.delete(new LabelTaskModel({
+				taskId, labelId:
+				label.id,
+			}))
+			const t = store.getters['kanban/getTaskById'](taskId)
 			if (t.task === null) {
 				// Don't try further adding a label if the task is not in kanban
 				// Usually this means the kanban board hasn't been accessed until now.
@@ -264,19 +269,22 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			// Remove the label from the list
 			const labels = t.task.labels.filter(({ id }) => id !== label.id)
 
-			ctx.commit('kanban/setTaskInBucketByIndex', {
+			store.commit('kanban/setTaskInBucketByIndex', {
 				...t,
 				task: {
 					...t.task,
 					labels,
 				},
-			}, {root: true})
+			})
 
 			return response
 		},
 
 		// Do everything that is involved in finding, creating and adding the label to the task
-		async addLabelsToTask(_, { task, parsedLabels }) {
+		async addLabelsToTask(
+			{ task, parsedLabels }:
+			{ task: ITask, parsedLabels: string[] },
+		) {
 			if (parsedLabels.length <= 0) {
 				return task
 			}
@@ -299,10 +307,9 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			return task
 		},
 
-		findListId(_, { list: listName, listId }: {
-			list: string,
-			listId: IList['id']
-		}) {
+		findListId(
+			{ list: listName, listId }:
+			{ list: string, listId: IList['id'] }) {
 			let foundListId = null
 			
 			// Uses the following ways to get the list id of the new task:
@@ -320,7 +327,7 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 		
 			//  3. Otherwise use the id from the route parameter
 			if (typeof router.currentRoute.value.params.listId !== 'undefined') {
-				foundListId = parseInt(router.currentRoute.value.params.listId)
+				foundListId = Number(router.currentRoute.value.params.listId)
 			}
 			
 			//  4. If none of the above worked, reject the promise with an error.
@@ -331,7 +338,7 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			return foundListId
 		},
 
-		async createNewTask(ctx, { 
+		async createNewTask({
 			title,
 			bucketId,
 			listId,
@@ -339,10 +346,10 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 		} : 
 			Partial<ITask>,
 		) {
-			const cancel = setLoading(ctx, 'tasks')
+			const cancel = setLoadingPinia(this)
 			const parsedTask = parseTaskText(title, getQuickAddMagicMode())
 		
-			const foundListId = await ctx.dispatch('findListId', {
+			const foundListId = await this.findListId({
 				list: parsedTask.list,
 				listId: listId || 0,
 			})
@@ -369,7 +376,7 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 		
 			const taskService = new TaskService()
 			const createdTask = await taskService.create(task)
-			const result = await ctx.dispatch('addLabelsToTask', {
+			const result = await this.addLabelsToTask({
 				task: createdTask,
 				parsedLabels: parsedTask.labels,
 			})
@@ -377,6 +384,9 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			return result
 		},
 	},
-}
+})
 
-export default tasksStore
\ No newline at end of file
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useTaskStore, import.meta.hot))
+}
\ No newline at end of file
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index c1d875383..c950e0083 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -240,6 +240,7 @@ import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import {isSavedFilter} from '@/helpers/savedFilter'
+import {useTaskStore} from '@/stores/tasks'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -433,7 +434,8 @@ export default defineComponent({
 			)
 
 			try {
-				await this.$store.dispatch('tasks/update', newTask)
+				const taskStore = useTaskStore()
+				await taskStore.update(newTask)
 				
 				// Make sure the first and second task don't both get position 0 assigned
 				if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
@@ -445,7 +447,7 @@ export default defineComponent({
 						taskAfterAfter !== null ? taskAfterAfter.kanbanPosition : null,
 					)
 
-					await this.$store.dispatch('tasks/update', newTaskAfter)
+					await taskStore.update(newTaskAfter)
 				}
 			} finally {
 				this.taskUpdating[task.id] = false
@@ -464,7 +466,7 @@ export default defineComponent({
 			}
 			this.newTaskError[bucketId] = false
 			
-			const task = await this.$store.dispatch('tasks/createNewTask', {
+			const task = await useTaskStore().createNewTask({
 				title: this.newTaskText,
 				bucketId,
 				listId: this.listId,
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index fa5f09972..d0663acad 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -139,7 +139,7 @@ export default { name: 'List' }
 </script>
 
 <script setup lang="ts">
-import {ref, computed, toRef, nextTick, onMounted} from 'vue'
+import {ref, computed, toRef, nextTick, onMounted, type PropType} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import {useRoute, useRouter} from 'vue-router'
 
@@ -161,6 +161,9 @@ import {RIGHTS as Rights} from '@/constants/rights'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import type {ITask} from '@/modelTypes/ITask'
 import {isSavedFilter} from '@/helpers/savedFilter'
+import {useTaskStore} from '@/stores/tasks'
+
+import type {IList} from '@/modelTypes/IList'
 
 function sortTasks(tasks: ITask[]) {
 	if (tasks === null || Array.isArray(tasks) && tasks.length === 0) {
@@ -182,7 +185,7 @@ function sortTasks(tasks: ITask[]) {
 
 const props = defineProps({
 	listId: {
-		type: Number,
+		type: Number as PropType<IList['id']>,
 		required: true,
 	},
 })
@@ -224,6 +227,7 @@ const firstNewPosition = computed(() => {
 	return calculateItemPosition(null, tasks.value[0].position)
 })
 
+const taskStore = useTaskStore()
 const store = useStore()
 const list = computed(() => store.state.currentList)
 
@@ -238,6 +242,7 @@ onMounted(async () => {
 
 const route = useRoute()
 const router = useRouter()
+
 function searchTasks() {
 	// Only search if the search term changed
 	if (route.query as unknown as string === searchTerm.value) {
@@ -309,7 +314,7 @@ async function saveTaskPosition(e) {
 		position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
 	}
 
-	const updatedTask = await this.$store.dispatch('tasks/update', newTask)
+	const updatedTask = await taskStore.update(newTask)
 	tasks.value[e.newIndex] = updatedTask
 }
 </script>
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index ab80110cd..de2acce3c 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -60,9 +60,11 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 import LlamaCool from '@/assets/llama-cool.svg?component'
 import type {ITask} from '@/modelTypes/ITask'
 import {useAuthStore} from '@/stores/auth'
+import {useTaskStore} from '@/stores/tasks'
 
 const store = useStore()
 const authStore = useAuthStore()
+const taskStore = useTaskStore()
 const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
@@ -180,7 +182,7 @@ async function loadPendingTasks(from: string, to: string) {
 		}
 	}
 
-	tasks.value = await store.dispatch('tasks/loadTasks', params)
+	tasks.value = await taskStore.loadTasks(params)
 }
 
 // FIXME: this modification should happen in the store
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index ea67956e1..ab61a0774 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -464,6 +464,7 @@ import type {IList} from '@/modelTypes/IList'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useAttachmentStore} from '@/stores/attachments'
+import {useTaskStore} from '@/stores/tasks'
 
 function scrollIntoView(el) {
 	if (!el) {
@@ -696,7 +697,8 @@ export default defineComponent({
 				task.endDate = task.dueDate
 			}
 
-			this.task = await this.$store.dispatch('tasks/update', task)
+			
+			this.task = await useTaskStore().update(task)
 
 			if (!showNotification) {
 				return
@@ -728,7 +730,7 @@ export default defineComponent({
 		},
 
 		async deleteTask() {
-			await this.$store.dispatch('tasks/delete', this.task)
+			await useTaskStore().delete(this.task)
 			this.$message.success({message: this.$t('task.detail.deleteSuccess')})
 			this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
 		},

From b84da722ca6b08ba6bed7e0a666ba56ea2922460 Mon Sep 17 00:00:00 2001
From: renovate <renovatebot@kolaente.de>
Date: Thu, 29 Sep 2022 21:53:19 +0000
Subject: [PATCH 12/19] chore(deps): update dependency @cypress/vite-dev-server
 to v3.2.0 (#2448)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2448
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>
---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 536cde16d..70f70d543 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "3.1.1",
+    "@cypress/vite-dev-server": "3.2.0",
     "@cypress/vue": "4.2.0",
     "@faker-js/faker": "7.5.0",
     "@types/dompurify": "2.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64a064d20..30965c0fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,7 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
   '@4tw/cypress-drag-drop': 2.2.1
-  '@cypress/vite-dev-server': 3.1.1
+  '@cypress/vite-dev-server': 3.2.0
   '@cypress/vue': 4.2.0
   '@faker-js/faker': 7.5.0
   '@fortawesome/fontawesome-svg-core': 6.2.0
@@ -131,7 +131,7 @@ dependencies:
 
 devDependencies:
   '@4tw/cypress-drag-drop': 2.2.1_cypress@10.9.0
-  '@cypress/vite-dev-server': 3.1.1
+  '@cypress/vite-dev-server': 3.2.0
   '@cypress/vue': 4.2.0_cypress@10.9.0+vue@3.2.40
   '@faker-js/faker': 7.5.0
   '@types/dompurify': 2.3.4
@@ -1567,8 +1567,8 @@ packages:
       uuid: 8.3.2
     dev: true
 
-  /@cypress/vite-dev-server/3.1.1:
-    resolution: {integrity: sha512-bZhDt3D3KEu8RDCxMb4GpFJoAEZOMOdFPB1xebHyjTZ6wmTs6i3oi4zXhN6FgGL8kXCI7JZXwC70LthEmxIZfw==}
+  /@cypress/vite-dev-server/3.2.0:
+    resolution: {integrity: sha512-tVOtSQst1yjah972nmhFue67UstxyEm69yuvcaOv9BxtI0e1hd5mM6gfLJINHXCeMmCjsoUxM382iUAr6UGu/Q==}
     dependencies:
       debug: 4.3.3
       find-up: 6.3.0

From cc378b83fee2b326610cdda1997cc5236f947fbf Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 28 Sep 2022 19:46:12 +0200
Subject: [PATCH 13/19] feat: automatically create subtask relations based on
 indention

---
 src/components/tasks/add-task.vue             |  51 ++++++--
 src/helpers/parseSubtasksViaIndention.test.ts | 109 ++++++++++++++++++
 src/helpers/parseSubtasksViaIndention.ts      |  42 +++++++
 3 files changed, 191 insertions(+), 11 deletions(-)
 create mode 100644 src/helpers/parseSubtasksViaIndention.test.ts
 create mode 100644 src/helpers/parseSubtasksViaIndention.ts

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 2a2953866..88d1f0cf0 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -41,18 +41,19 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, unref, computed} from 'vue'
+import {computed, ref, unref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
+import {debouncedWatch, type MaybeRef, tryOnMounted, useWindowSize} from '@vueuse/core'
 
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
+import type {ITask} from '@/modelTypes/ITask'
+import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention'
+import TaskRelationService from '@/services/taskRelation'
+import TaskRelationModel from '@/models/taskRelation'
+import {RELATION_KIND} from '@/types/IRelationKind'
 import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 
-function cleanupTitle(title: string) {
-	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
-}
-
 function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLInputElement>()
 	const minHeight = ref(0)
@@ -161,24 +162,52 @@ async function addTask() {
 	}
 
 	const taskTitleBackup = newTaskTitle.value
-	const newTasks = newTaskTitle.value.split(/[\r\n]+/).map(async uncleanedTitle => {
-		const title = cleanupTitle(uncleanedTitle)
-		if (title === '') {
+	const createdTasks: ITask[] = []
+	const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value)
+	const newTasks = tasksToCreate.map(async t => {
+		if (t.title === '') {
 			return
 		}
 
 		const task = await taskStore.createNewTask({
-			title,
+			title: t.title,
 			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
 		})
-		emit('taskAdded', task)
+		createdTasks.push(task)
 		return task
 	})
 
 	try {
 		newTaskTitle.value = ''
 		await Promise.all(newTasks)
+		
+		const taskRelationService = new TaskRelationService()
+		const relations = tasksToCreate.map(async t => {
+			const createdTask = createdTasks.find(ct => ct.title === t.title)
+			if (t.parent === null) {
+				emit('taskAdded', createdTask)
+				return
+			}
+			
+			const createdParentTask = createdTasks.find(ct => ct.title === t.parent)
+			if (typeof createdTask === 'undefined' || typeof createdParentTask === 'undefined') {
+				return
+			}
+
+			const rel = await taskRelationService.create(new TaskRelationModel({
+				taskId: createdTask.id,
+				otherTaskId: createdParentTask.id,
+				relationKind: RELATION_KIND.PARENTTASK,
+			}))
+			
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
+			// we're only emitting here so that the relation shows up in the task list
+			emit('taskAdded', createdTask)
+			
+			return rel
+		})
+		await Promise.all(relations)
 	} catch (e: any) {
 		newTaskTitle.value = taskTitleBackup
 		if (e?.message === 'NO_LIST') {
diff --git a/src/helpers/parseSubtasksViaIndention.test.ts b/src/helpers/parseSubtasksViaIndention.test.ts
new file mode 100644
index 000000000..bae01b634
--- /dev/null
+++ b/src/helpers/parseSubtasksViaIndention.test.ts
@@ -0,0 +1,109 @@
+import {describe, it, expect} from 'vitest'
+import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention'
+
+describe('Parse Subtasks via Relation', () => {
+	it('Should not return a parent for a single task', () => {
+		const tasks = parseSubtasksViaIndention('single task')
+		
+		expect(tasks).to.have.length(1)
+		expect(tasks[0].parent).toBeNull()
+	})
+	it('Should not return a parent for multiple tasks without indention', () => {
+		const tasks = parseSubtasksViaIndention(`task one
+task two`)
+
+		expect(tasks).to.have.length(2)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[1].parent).toBeNull()
+	})
+	it('Should return a parent for two tasks with indention', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task`)
+
+		expect(tasks).to.have.length(2)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+	})
+	it('Should return a parent for multiple subtasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task one
+  sub task two`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task one')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub task two')
+		expect(tasks[2].parent).to.eq('parent task')
+	})
+	it('Should work with multiple indention levels', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task')
+		expect(tasks[2].parent).to.eq('sub task')
+	})
+	it('Should work with multiple indention levels and multiple tasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task one
+    sub sub task two`)
+
+		expect(tasks).to.have.length(4)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task one')
+		expect(tasks[2].parent).to.eq('sub task')
+		expect(tasks[3].title).to.eq('sub sub task two')
+		expect(tasks[3].parent).to.eq('sub task')
+	})
+	it('Should work with multiple indention levels and multiple tasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task one
+      sub sub sub task
+    sub sub task two`)
+
+		expect(tasks).to.have.length(5)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task one')
+		expect(tasks[2].parent).to.eq('sub task')
+		expect(tasks[3].title).to.eq('sub sub sub task')
+		expect(tasks[3].parent).to.eq('sub sub task one')
+		expect(tasks[4].title).to.eq('sub sub task two')
+		expect(tasks[4].parent).to.eq('sub task')
+	})
+	it('Should return a parent for multiple subtasks with special stuff', () => {
+		const tasks = parseSubtasksViaIndention(`* parent task
+  * sub task one
+  sub task two`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task one')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub task two')
+		expect(tasks[2].parent).to.eq('parent task')
+	})
+	it('Should not break when the first line is indented', () => {
+		const tasks = parseSubtasksViaIndention('  single task')
+
+		expect(tasks).to.have.length(1)
+		expect(tasks[0].parent).toBeNull()
+	})
+})
diff --git a/src/helpers/parseSubtasksViaIndention.ts b/src/helpers/parseSubtasksViaIndention.ts
new file mode 100644
index 000000000..614d3b0ce
--- /dev/null
+++ b/src/helpers/parseSubtasksViaIndention.ts
@@ -0,0 +1,42 @@
+export interface TaskWithParent {
+	title: string,
+	parent: string | null,
+}
+
+function cleanupTitle(title: string) {
+	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
+}
+
+const spaceRegex = /^ */
+
+// taskTitles should be multiple lines of task tiles with indention to declare their parent/subtask 
+// relation between each other.
+export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[] {
+	const titles = taskTitles.split(/[\r\n]+/)
+
+	return titles.map((t, i) => {
+		const task: TaskWithParent = {
+			title: cleanupTitle(t),
+			parent: null,
+		}
+
+		const matched = spaceRegex.exec(t)
+		const matchedSpaces = matched ? matched[0].length : 0
+
+		if (matchedSpaces > 0 && i > 0) {
+			// Go up the tree to find the first task with less indention than the current one
+			let pi = 1
+			let parentSpaces = 0
+			do {
+				task.parent = cleanupTitle(titles[i - pi])
+				pi++
+				const parentMatched = spaceRegex.exec(task.parent)
+				parentSpaces = parentMatched ? parentMatched[0].length : 0
+			} while (parentSpaces >= matchedSpaces)
+			task.title = cleanupTitle(t.replace(spaceRegex, ''))
+			task.parent = task.parent.replace(spaceRegex, '')
+		}
+
+		return task
+	})
+}

From 3970d0fd315488427df0c4a37447eb52dca322b4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 29 Sep 2022 18:03:23 +0200
Subject: [PATCH 14/19] chore: spread title

---
 src/components/tasks/add-task.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 88d1f0cf0..318a6ec62 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -164,13 +164,13 @@ async function addTask() {
 	const taskTitleBackup = newTaskTitle.value
 	const createdTasks: ITask[] = []
 	const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value)
-	const newTasks = tasksToCreate.map(async t => {
-		if (t.title === '') {
+	const newTasks = tasksToCreate.map(async ({title}) => {
+		if (title === '') {
 			return
 		}
 
 		const task = await taskStore.createNewTask({
-			title: t.title,
+			title,
 			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
 		})

From 5f5ed410df1a2fe73e821d7dee7ebd4c0b918069 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 29 Sep 2022 18:05:25 +0200
Subject: [PATCH 15/19] fix: don't emit a possible null task

---
 src/components/tasks/add-task.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 318a6ec62..c5decc1a5 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -181,15 +181,19 @@ async function addTask() {
 	try {
 		newTaskTitle.value = ''
 		await Promise.all(newTasks)
-		
+
 		const taskRelationService = new TaskRelationService()
 		const relations = tasksToCreate.map(async t => {
 			const createdTask = createdTasks.find(ct => ct.title === t.title)
+			if (typeof createdTask === 'undefined') {
+				return
+			}
+
 			if (t.parent === null) {
 				emit('taskAdded', createdTask)
 				return
 			}
-			
+
 			const createdParentTask = createdTasks.find(ct => ct.title === t.parent)
 			if (typeof createdTask === 'undefined' || typeof createdParentTask === 'undefined') {
 				return
@@ -200,11 +204,11 @@ async function addTask() {
 				otherTaskId: createdParentTask.id,
 				relationKind: RELATION_KIND.PARENTTASK,
 			}))
-			
+
 			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
 			// we're only emitting here so that the relation shows up in the task list
 			emit('taskAdded', createdTask)
-			
+
 			return rel
 		})
 		await Promise.all(relations)

From 8ce242bb6595ef12442a6ba0fb37eb66c65dd71b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 29 Sep 2022 18:08:05 +0200
Subject: [PATCH 16/19] chore: use better variable names

---
 src/helpers/parseSubtasksViaIndention.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/helpers/parseSubtasksViaIndention.ts b/src/helpers/parseSubtasksViaIndention.ts
index 614d3b0ce..e2900b098 100644
--- a/src/helpers/parseSubtasksViaIndention.ts
+++ b/src/helpers/parseSubtasksViaIndention.ts
@@ -14,26 +14,26 @@ const spaceRegex = /^ */
 export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[] {
 	const titles = taskTitles.split(/[\r\n]+/)
 
-	return titles.map((t, i) => {
+	return titles.map((title, index) => {
 		const task: TaskWithParent = {
-			title: cleanupTitle(t),
+			title: cleanupTitle(title),
 			parent: null,
 		}
 
-		const matched = spaceRegex.exec(t)
+		const matched = spaceRegex.exec(title)
 		const matchedSpaces = matched ? matched[0].length : 0
 
-		if (matchedSpaces > 0 && i > 0) {
+		if (matchedSpaces > 0 && index > 0) {
 			// Go up the tree to find the first task with less indention than the current one
 			let pi = 1
 			let parentSpaces = 0
 			do {
-				task.parent = cleanupTitle(titles[i - pi])
+				task.parent = cleanupTitle(titles[index - pi])
 				pi++
 				const parentMatched = spaceRegex.exec(task.parent)
 				parentSpaces = parentMatched ? parentMatched[0].length : 0
 			} while (parentSpaces >= matchedSpaces)
-			task.title = cleanupTitle(t.replace(spaceRegex, ''))
+			task.title = cleanupTitle(title.replace(spaceRegex, ''))
 			task.parent = task.parent.replace(spaceRegex, '')
 		}
 

From d58f8b4ba1d873abb0fc8dc4c2cec64a33b55ab8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 29 Sep 2022 18:09:35 +0200
Subject: [PATCH 17/19] chore: break earlier if index === 0

---
 src/helpers/parseSubtasksViaIndention.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/helpers/parseSubtasksViaIndention.ts b/src/helpers/parseSubtasksViaIndention.ts
index e2900b098..5c9589b78 100644
--- a/src/helpers/parseSubtasksViaIndention.ts
+++ b/src/helpers/parseSubtasksViaIndention.ts
@@ -20,10 +20,14 @@ export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[]
 			parent: null,
 		}
 
+		if (index === 0) {
+			return task
+		}
+
 		const matched = spaceRegex.exec(title)
 		const matchedSpaces = matched ? matched[0].length : 0
 
-		if (matchedSpaces > 0 && index > 0) {
+		if (matchedSpaces > 0) {
 			// Go up the tree to find the first task with less indention than the current one
 			let pi = 1
 			let parentSpaces = 0

From 5bd7c77b68f08ab4771f3d80d5191def9d634204 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 30 Sep 2022 13:36:57 +0200
Subject: [PATCH 18/19] chore: use jsDoc to explain param

---
 src/helpers/parseSubtasksViaIndention.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/helpers/parseSubtasksViaIndention.ts b/src/helpers/parseSubtasksViaIndention.ts
index 5c9589b78..8a451bdd1 100644
--- a/src/helpers/parseSubtasksViaIndention.ts
+++ b/src/helpers/parseSubtasksViaIndention.ts
@@ -9,8 +9,10 @@ function cleanupTitle(title: string) {
 
 const spaceRegex = /^ */
 
-// taskTitles should be multiple lines of task tiles with indention to declare their parent/subtask 
-// relation between each other.
+/**
+ * @param taskTitles should be multiple lines of task tiles with indention to declare their parent/subtask
+ * relation between each other.
+ */
 export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[] {
 	const titles = taskTitles.split(/[\r\n]+/)
 

From d120e8c82d4563e0e6e4b504a1e6fd4a51d0d9af Mon Sep 17 00:00:00 2001
From: renovate <renovatebot@kolaente.de>
Date: Fri, 30 Sep 2022 12:58:39 +0000
Subject: [PATCH 19/19] chore(deps): update dependency postcss to v8.4.17
 (#2449)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2449
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>
---
 package.json   |   2 +-
 pnpm-lock.yaml | 320 ++++++++++++++++++++++++-------------------------
 2 files changed, 161 insertions(+), 161 deletions(-)

diff --git a/package.json b/package.json
index 70f70d543..330d20e7f 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "express": "4.18.1",
     "happy-dom": "6.0.4",
     "netlify-cli": "11.8.3",
-    "postcss": "8.4.16",
+    "postcss": "8.4.17",
     "postcss-preset-env": "7.8.2",
     "rollup": "2.79.1",
     "rollup-plugin-visualizer": "5.8.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30965c0fb..5cc19eaa9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,7 +55,7 @@ specifiers:
   minimist: 1.2.6
   netlify-cli: 11.8.3
   pinia: 2.0.22
-  postcss: 8.4.16
+  postcss: 8.4.17
   postcss-preset-env: 7.8.2
   register-service-worker: 1.7.2
   rollup: 2.79.1
@@ -144,7 +144,7 @@ devDependencies:
   '@vue/eslint-config-typescript': 11.0.2_b985cba226e1126d4cc23df4d3ba9cd4
   '@vue/test-utils': 2.1.0_vue@3.2.40
   '@vue/tsconfig': 0.1.3_@types+node@16.11.62
-  autoprefixer: 10.4.12_postcss@8.4.16
+  autoprefixer: 10.4.12_postcss@8.4.17
   browserslist: 4.21.4
   caniuse-lite: 1.0.30001412
   cypress: 10.9.0
@@ -154,8 +154,8 @@ devDependencies:
   express: 4.18.1
   happy-dom: 6.0.4
   netlify-cli: 11.8.3
-  postcss: 8.4.16
-  postcss-preset-env: 7.8.2_postcss@8.4.16
+  postcss: 8.4.17
+  postcss-preset-env: 7.8.2_postcss@8.4.17
   rollup: 2.79.1
   rollup-plugin-visualizer: 5.8.2_rollup@2.79.1
   sass: 1.55.0
@@ -1388,158 +1388,158 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@csstools/postcss-cascade-layers/1.1.1_postcss@8.4.16:
+  /@csstools/postcss-cascade-layers/1.1.1_postcss@8.4.17:
     resolution: {integrity: sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/selector-specificity': 2.0.2_7b6fee2724f05f3c8883c74281a3791a
-      postcss: 8.4.16
+      '@csstools/selector-specificity': 2.0.2_cd239324a5aeb6e3cee0fb61f6a33448
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /@csstools/postcss-color-function/1.1.1_postcss@8.4.16:
+  /@csstools/postcss-color-function/1.1.1_postcss@8.4.17:
     resolution: {integrity: sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      postcss: 8.4.16
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-font-format-keywords/1.0.1_postcss@8.4.16:
+  /@csstools/postcss-font-format-keywords/1.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-hwb-function/1.0.2_postcss@8.4.16:
+  /@csstools/postcss-hwb-function/1.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-ic-unit/1.0.1_postcss@8.4.16:
+  /@csstools/postcss-ic-unit/1.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      postcss: 8.4.16
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-is-pseudo-class/2.0.7_postcss@8.4.16:
+  /@csstools/postcss-is-pseudo-class/2.0.7_postcss@8.4.17:
     resolution: {integrity: sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/selector-specificity': 2.0.2_7b6fee2724f05f3c8883c74281a3791a
-      postcss: 8.4.16
+      '@csstools/selector-specificity': 2.0.2_cd239324a5aeb6e3cee0fb61f6a33448
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /@csstools/postcss-nested-calc/1.0.0_postcss@8.4.16:
+  /@csstools/postcss-nested-calc/1.0.0_postcss@8.4.17:
     resolution: {integrity: sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-normalize-display-values/1.0.1_postcss@8.4.16:
+  /@csstools/postcss-normalize-display-values/1.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-oklab-function/1.1.1_postcss@8.4.16:
+  /@csstools/postcss-oklab-function/1.1.1_postcss@8.4.17:
     resolution: {integrity: sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      postcss: 8.4.16
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-progressive-custom-properties/1.3.0_postcss@8.4.16:
+  /@csstools/postcss-progressive-custom-properties/1.3.0_postcss@8.4.17:
     resolution: {integrity: sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.3
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-stepped-value-functions/1.0.1_postcss@8.4.16:
+  /@csstools/postcss-stepped-value-functions/1.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-text-decoration-shorthand/1.0.0_postcss@8.4.16:
+  /@csstools/postcss-text-decoration-shorthand/1.0.0_postcss@8.4.17:
     resolution: {integrity: sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-trigonometric-functions/1.0.2_postcss@8.4.16:
+  /@csstools/postcss-trigonometric-functions/1.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==}
     engines: {node: ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-unset-value/1.0.2_postcss@8.4.16:
+  /@csstools/postcss-unset-value/1.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /@csstools/selector-specificity/2.0.2_7b6fee2724f05f3c8883c74281a3791a:
+  /@csstools/selector-specificity/2.0.2_cd239324a5aeb6e3cee0fb61f6a33448:
     resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
       postcss-selector-parser: ^6.0.10
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
@@ -3399,7 +3399,7 @@ packages:
       '@vue/shared': 3.2.37
       estree-walker: 2.0.2
       magic-string: 0.25.7
-      postcss: 8.4.16
+      postcss: 8.4.17
       source-map: 0.6.1
     dev: true
 
@@ -3414,7 +3414,7 @@ packages:
       '@vue/shared': 3.2.40
       estree-walker: 2.0.2
       magic-string: 0.25.7
-      postcss: 8.4.16
+      postcss: 8.4.17
       source-map: 0.6.1
 
   /@vue/compiler-ssr/3.2.37:
@@ -3988,7 +3988,7 @@ packages:
     hasBin: true
     dev: true
 
-  /autoprefixer/10.4.12_postcss@8.4.16:
+  /autoprefixer/10.4.12_postcss@8.4.17:
     resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -4000,7 +4000,7 @@ packages:
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -5022,36 +5022,36 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /css-blank-pseudo/3.0.3_postcss@8.4.16:
+  /css-blank-pseudo/3.0.3_postcss@8.4.17:
     resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==}
     engines: {node: ^12 || ^14 || >=16}
     hasBin: true
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /css-has-pseudo/3.0.4_postcss@8.4.16:
+  /css-has-pseudo/3.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==}
     engines: {node: ^12 || ^14 || >=16}
     hasBin: true
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /css-prefers-color-scheme/6.0.3_postcss@8.4.16:
+  /css-prefers-color-scheme/6.0.3_postcss@8.4.17:
     resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==}
     engines: {node: ^12 || ^14 || >=16}
     hasBin: true
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
   /css-select/4.2.1:
@@ -5537,8 +5537,8 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dependencies:
       is-url: 1.2.4
-      postcss: 8.4.16
-      postcss-values-parser: 6.0.2_postcss@8.4.16
+      postcss: 8.4.17
+      postcss-values-parser: 6.0.2_postcss@8.4.17
     dev: true
 
   /detective-sass/4.0.1:
@@ -10138,209 +10138,209 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /postcss-attribute-case-insensitive/5.0.2_postcss@8.4.16:
+  /postcss-attribute-case-insensitive/5.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-clamp/4.1.0_postcss@8.4.16:
+  /postcss-clamp/4.1.0_postcss@8.4.17:
     resolution: {integrity: sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==}
     engines: {node: '>=7.6.0'}
     peerDependencies:
       postcss: ^8.4.6
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-functional-notation/4.2.4_postcss@8.4.16:
+  /postcss-color-functional-notation/4.2.4_postcss@8.4.17:
     resolution: {integrity: sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-hex-alpha/8.0.4_postcss@8.4.16:
+  /postcss-color-hex-alpha/8.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-rebeccapurple/7.1.1_postcss@8.4.16:
+  /postcss-color-rebeccapurple/7.1.1_postcss@8.4.17:
     resolution: {integrity: sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-custom-media/8.0.2_postcss@8.4.16:
+  /postcss-custom-media/8.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.3
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-custom-properties/12.1.9_postcss@8.4.16:
+  /postcss-custom-properties/12.1.9_postcss@8.4.17:
     resolution: {integrity: sha512-/E7PRvK8DAVljBbeWrcEQJPG72jaImxF3vvCNFwv9cC8CzigVoNIpeyfnJzphnN3Fd8/auBf5wvkw6W9MfmTyg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-custom-selectors/6.0.3_postcss@8.4.16:
+  /postcss-custom-selectors/6.0.3_postcss@8.4.17:
     resolution: {integrity: sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.3
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-dir-pseudo-class/6.0.5_postcss@8.4.16:
+  /postcss-dir-pseudo-class/6.0.5_postcss@8.4.17:
     resolution: {integrity: sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-double-position-gradients/3.1.2_postcss@8.4.16:
+  /postcss-double-position-gradients/3.1.2_postcss@8.4.17:
     resolution: {integrity: sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      postcss: 8.4.16
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-env-function/4.0.6_postcss@8.4.16:
+  /postcss-env-function/4.0.6_postcss@8.4.17:
     resolution: {integrity: sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-focus-visible/6.0.4_postcss@8.4.16:
+  /postcss-focus-visible/6.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-focus-within/5.0.4_postcss@8.4.16:
+  /postcss-focus-within/5.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-font-variant/5.0.0_postcss@8.4.16:
+  /postcss-font-variant/5.0.0_postcss@8.4.17:
     resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-gap-properties/3.0.5_postcss@8.4.16:
+  /postcss-gap-properties/3.0.5_postcss@8.4.17:
     resolution: {integrity: sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-image-set-function/4.0.7_postcss@8.4.16:
+  /postcss-image-set-function/4.0.7_postcss@8.4.17:
     resolution: {integrity: sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-initial/4.0.1_postcss@8.4.16:
+  /postcss-initial/4.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-lab-function/4.2.1_postcss@8.4.16:
+  /postcss-lab-function/4.2.1_postcss@8.4.17:
     resolution: {integrity: sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      postcss: 8.4.16
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-logical/5.0.4_postcss@8.4.16:
+  /postcss-logical/5.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-media-minmax/5.0.0_postcss@8.4.16:
+  /postcss-media-minmax/5.0.0_postcss@8.4.17:
     resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-nesting/10.2.0_postcss@8.4.16:
+  /postcss-nesting/10.2.0_postcss@8.4.17:
     resolution: {integrity: sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/selector-specificity': 2.0.2_7b6fee2724f05f3c8883c74281a3791a
-      postcss: 8.4.16
+      '@csstools/selector-specificity': 2.0.2_cd239324a5aeb6e3cee0fb61f6a33448
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
@@ -10349,117 +10349,117 @@ packages:
     engines: {node: ^12 || ^14 || >=16}
     dev: true
 
-  /postcss-overflow-shorthand/3.0.4_postcss@8.4.16:
+  /postcss-overflow-shorthand/3.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-page-break/3.0.4_postcss@8.4.16:
+  /postcss-page-break/3.0.4_postcss@8.4.17:
     resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==}
     peerDependencies:
       postcss: ^8
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-place/7.0.5_postcss@8.4.16:
+  /postcss-place/7.0.5_postcss@8.4.17:
     resolution: {integrity: sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-preset-env/7.8.2_postcss@8.4.16:
+  /postcss-preset-env/7.8.2_postcss@8.4.17:
     resolution: {integrity: sha512-rSMUEaOCnovKnwc5LvBDHUDzpGP+nrUeWZGWt9M72fBvckCi45JmnJigUr4QG4zZeOHmOCNCZnd2LKDvP++ZuQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      '@csstools/postcss-cascade-layers': 1.1.1_postcss@8.4.16
-      '@csstools/postcss-color-function': 1.1.1_postcss@8.4.16
-      '@csstools/postcss-font-format-keywords': 1.0.1_postcss@8.4.16
-      '@csstools/postcss-hwb-function': 1.0.2_postcss@8.4.16
-      '@csstools/postcss-ic-unit': 1.0.1_postcss@8.4.16
-      '@csstools/postcss-is-pseudo-class': 2.0.7_postcss@8.4.16
-      '@csstools/postcss-nested-calc': 1.0.0_postcss@8.4.16
-      '@csstools/postcss-normalize-display-values': 1.0.1_postcss@8.4.16
-      '@csstools/postcss-oklab-function': 1.1.1_postcss@8.4.16
-      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
-      '@csstools/postcss-stepped-value-functions': 1.0.1_postcss@8.4.16
-      '@csstools/postcss-text-decoration-shorthand': 1.0.0_postcss@8.4.16
-      '@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.16
-      '@csstools/postcss-unset-value': 1.0.2_postcss@8.4.16
-      autoprefixer: 10.4.12_postcss@8.4.16
+      '@csstools/postcss-cascade-layers': 1.1.1_postcss@8.4.17
+      '@csstools/postcss-color-function': 1.1.1_postcss@8.4.17
+      '@csstools/postcss-font-format-keywords': 1.0.1_postcss@8.4.17
+      '@csstools/postcss-hwb-function': 1.0.2_postcss@8.4.17
+      '@csstools/postcss-ic-unit': 1.0.1_postcss@8.4.17
+      '@csstools/postcss-is-pseudo-class': 2.0.7_postcss@8.4.17
+      '@csstools/postcss-nested-calc': 1.0.0_postcss@8.4.17
+      '@csstools/postcss-normalize-display-values': 1.0.1_postcss@8.4.17
+      '@csstools/postcss-oklab-function': 1.1.1_postcss@8.4.17
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.17
+      '@csstools/postcss-stepped-value-functions': 1.0.1_postcss@8.4.17
+      '@csstools/postcss-text-decoration-shorthand': 1.0.0_postcss@8.4.17
+      '@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.17
+      '@csstools/postcss-unset-value': 1.0.2_postcss@8.4.17
+      autoprefixer: 10.4.12_postcss@8.4.17
       browserslist: 4.21.4
-      css-blank-pseudo: 3.0.3_postcss@8.4.16
-      css-has-pseudo: 3.0.4_postcss@8.4.16
-      css-prefers-color-scheme: 6.0.3_postcss@8.4.16
+      css-blank-pseudo: 3.0.3_postcss@8.4.17
+      css-has-pseudo: 3.0.4_postcss@8.4.17
+      css-prefers-color-scheme: 6.0.3_postcss@8.4.17
       cssdb: 7.0.1
-      postcss: 8.4.16
-      postcss-attribute-case-insensitive: 5.0.2_postcss@8.4.16
-      postcss-clamp: 4.1.0_postcss@8.4.16
-      postcss-color-functional-notation: 4.2.4_postcss@8.4.16
-      postcss-color-hex-alpha: 8.0.4_postcss@8.4.16
-      postcss-color-rebeccapurple: 7.1.1_postcss@8.4.16
-      postcss-custom-media: 8.0.2_postcss@8.4.16
-      postcss-custom-properties: 12.1.9_postcss@8.4.16
-      postcss-custom-selectors: 6.0.3_postcss@8.4.16
-      postcss-dir-pseudo-class: 6.0.5_postcss@8.4.16
-      postcss-double-position-gradients: 3.1.2_postcss@8.4.16
-      postcss-env-function: 4.0.6_postcss@8.4.16
-      postcss-focus-visible: 6.0.4_postcss@8.4.16
-      postcss-focus-within: 5.0.4_postcss@8.4.16
-      postcss-font-variant: 5.0.0_postcss@8.4.16
-      postcss-gap-properties: 3.0.5_postcss@8.4.16
-      postcss-image-set-function: 4.0.7_postcss@8.4.16
-      postcss-initial: 4.0.1_postcss@8.4.16
-      postcss-lab-function: 4.2.1_postcss@8.4.16
-      postcss-logical: 5.0.4_postcss@8.4.16
-      postcss-media-minmax: 5.0.0_postcss@8.4.16
-      postcss-nesting: 10.2.0_postcss@8.4.16
+      postcss: 8.4.17
+      postcss-attribute-case-insensitive: 5.0.2_postcss@8.4.17
+      postcss-clamp: 4.1.0_postcss@8.4.17
+      postcss-color-functional-notation: 4.2.4_postcss@8.4.17
+      postcss-color-hex-alpha: 8.0.4_postcss@8.4.17
+      postcss-color-rebeccapurple: 7.1.1_postcss@8.4.17
+      postcss-custom-media: 8.0.2_postcss@8.4.17
+      postcss-custom-properties: 12.1.9_postcss@8.4.17
+      postcss-custom-selectors: 6.0.3_postcss@8.4.17
+      postcss-dir-pseudo-class: 6.0.5_postcss@8.4.17
+      postcss-double-position-gradients: 3.1.2_postcss@8.4.17
+      postcss-env-function: 4.0.6_postcss@8.4.17
+      postcss-focus-visible: 6.0.4_postcss@8.4.17
+      postcss-focus-within: 5.0.4_postcss@8.4.17
+      postcss-font-variant: 5.0.0_postcss@8.4.17
+      postcss-gap-properties: 3.0.5_postcss@8.4.17
+      postcss-image-set-function: 4.0.7_postcss@8.4.17
+      postcss-initial: 4.0.1_postcss@8.4.17
+      postcss-lab-function: 4.2.1_postcss@8.4.17
+      postcss-logical: 5.0.4_postcss@8.4.17
+      postcss-media-minmax: 5.0.0_postcss@8.4.17
+      postcss-nesting: 10.2.0_postcss@8.4.17
       postcss-opacity-percentage: 1.1.2
-      postcss-overflow-shorthand: 3.0.4_postcss@8.4.16
-      postcss-page-break: 3.0.4_postcss@8.4.16
-      postcss-place: 7.0.5_postcss@8.4.16
-      postcss-pseudo-class-any-link: 7.1.6_postcss@8.4.16
-      postcss-replace-overflow-wrap: 4.0.0_postcss@8.4.16
-      postcss-selector-not: 6.0.1_postcss@8.4.16
+      postcss-overflow-shorthand: 3.0.4_postcss@8.4.17
+      postcss-page-break: 3.0.4_postcss@8.4.17
+      postcss-place: 7.0.5_postcss@8.4.17
+      postcss-pseudo-class-any-link: 7.1.6_postcss@8.4.17
+      postcss-replace-overflow-wrap: 4.0.0_postcss@8.4.17
+      postcss-selector-not: 6.0.1_postcss@8.4.17
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-pseudo-class-any-link/7.1.6_postcss@8.4.16:
+  /postcss-pseudo-class-any-link/7.1.6_postcss@8.4.17:
     resolution: {integrity: sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /postcss-replace-overflow-wrap/4.0.0_postcss@8.4.16:
+  /postcss-replace-overflow-wrap/4.0.0_postcss@8.4.17:
     resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==}
     peerDependencies:
       postcss: ^8.0.3
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
     dev: true
 
-  /postcss-selector-not/6.0.1_postcss@8.4.16:
+  /postcss-selector-not/6.0.1_postcss@8.4.17:
     resolution: {integrity: sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.16
+      postcss: 8.4.17
       postcss-selector-parser: 6.0.10
     dev: true
 
@@ -10475,7 +10475,7 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss-values-parser/6.0.2_postcss@8.4.16:
+  /postcss-values-parser/6.0.2_postcss@8.4.17:
     resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -10483,12 +10483,12 @@ packages:
     dependencies:
       color-name: 1.1.4
       is-url-superb: 4.0.0
-      postcss: 8.4.16
+      postcss: 8.4.17
       quote-unquote: 1.0.0
     dev: true
 
-  /postcss/8.4.16:
-    resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
+  /postcss/8.4.17:
+    resolution: {integrity: sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.4
@@ -12597,7 +12597,7 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.15.10
-      postcss: 8.4.16
+      postcss: 8.4.17
       resolve: 1.22.1
       rollup: 2.78.0
       sass: 1.55.0