From a38075f376aa5cc2d8a06943cf8932366a0d4011 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Wed, 21 Sep 2022 16:21:25 +0000
Subject: [PATCH] feat: move list store to pina (#2392)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2392
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/home/navigation.vue            |  15 +-
 src/components/list/partials/list-card.vue    |  15 +-
 .../quick-actions/quick-actions.vue           |  18 +-
 src/components/tasks/partials/listSearch.vue  |   6 +-
 .../tasks/partials/singleTaskInList.vue       |  19 +-
 src/composables/useList.ts                    |  37 ----
 src/router/index.ts                           |   7 +-
 src/store/index.ts                            |   2 -
 src/store/modules/lists.ts                    | 130 -------------
 src/store/modules/namespaces.ts               |   4 +-
 src/store/modules/tasks.ts                    |   6 +-
 src/store/types.ts                            |   3 +-
 src/stores/lists.ts                           | 182 ++++++++++++++++++
 src/views/Home.vue                            |   4 +-
 src/views/list/ListInfo.vue                   |   6 +-
 src/views/list/ListWrapper.vue                |   4 +-
 src/views/list/NewList.vue                    |  10 +-
 src/views/list/settings/archive.vue           |   6 +-
 src/views/list/settings/background.vue        |   9 +-
 src/views/list/settings/delete.vue            |  14 +-
 src/views/list/settings/duplicate.vue         |   4 +-
 src/views/list/settings/edit.vue              |   6 +-
 src/views/user/settings/General.vue           |   4 +-
 23 files changed, 272 insertions(+), 239 deletions(-)
 delete mode 100644 src/composables/useList.ts
 delete mode 100644 src/store/modules/lists.ts
 create mode 100644 src/stores/lists.ts

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 07be48e0..2e594771 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -124,7 +124,7 @@
 								<BaseButton
 									class="favorite"
 									:class="{'is-favorite': l.isFavorite}"
-									@click="toggleFavoriteList(l)"
+									@click="listStore.toggleListFavorite(l)"
 								>
 									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 								</BaseButton>
@@ -159,6 +159,7 @@ import {useEventListener} from '@vueuse/core'
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
 
 const drag = ref(false)
 const dragOptions = {
@@ -195,15 +196,7 @@ const namespaceListsCount = computed(() => {
 useEventListener('resize', resize)
 onMounted(() => resize())
 
-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 
 function resize() {
 	// Hide the menu by default on mobile
@@ -268,7 +261,7 @@ async function saveListPosition(e: SortableEvent) {
 
 	try {
 		// create a copy of the list in order to not violate vuex mutations
-		await store.dispatch('lists/updateList', {
+		await listStore.updateList({
 			...list,
 			position,
 			namespaceId,
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index f2a8b4eb..99da97ee 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -24,7 +24,7 @@
 			<BaseButton
 				v-else
 				:class="{'is-favorite': list.isFavorite}"
-				@click.stop="toggleFavoriteList(list)"
+				@click.stop="listStore.toggleListFavorite(list)"
 				class="favorite"
 			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
@@ -37,7 +37,6 @@
 
 <script lang="ts" setup>
 import {type PropType, ref, watch} from 'vue'
-import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@@ -46,6 +45,7 @@ import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -84,16 +84,7 @@ async function loadBackground() {
 	}
 }
 
-const store = useStore()
-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 27cbdc9c..a9b3058e 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -70,6 +70,7 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import {useListStore} from '@/stores/lists'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -116,6 +117,8 @@ export default defineComponent({
 		},
 		results() {
 			let lists = []
+			const listStore = useListStore()
+
 			if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
 				const {list} = this.parsedQuery
 
@@ -126,10 +129,8 @@ export default defineComponent({
 					const history = getHistory()
 					// Puts recently visited lists at the top
 					const allLists = [...new Set([
-						...history.map(l => {
-							return this.$store.getters['lists/getListById'](l.id)
-						}),
-						...this.$store.getters['lists/searchList'](list),
+						...history.map(l => listStore.getListById(l.id)),
+						...listStore.searchList(list),
 					])]
 
 					lists = allLists.filter(l => {
@@ -296,8 +297,10 @@ export default defineComponent({
 				filter_comparator: [],
 			}
 
+			const listStore = useListStore()
+
 			if (list !== null) {
-				const l = this.$store.getters['lists/findListByExactname'](list)
+				const l = listStore.findListByExactname(list)
 				if (l !== null) {
 					params.filter_by.push('list_id')
 					params.filter_value.push(l.id)
@@ -318,7 +321,7 @@ export default defineComponent({
 				const r = await this.taskService.getAll({}, params)
 				this.foundTasks = r.map(t => {
 					t.type = TYPE_TASK
-					const list = this.$store.getters['lists/getListById'](t.listId)
+					const list = listStore.getListById(t.listId)
 					if (list !== null) {
 						t.title = `${t.title} (${list.title})`
 					}
@@ -424,7 +427,8 @@ export default defineComponent({
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			const list = await this.$store.dispatch('lists/createList', newList)
+			const listStore = useListStore()
+			const list = await listStore.createList(newList)
 			this.$message.success({message: this.$t('list.create.createdSuccess')})
 			this.$router.push({name: 'list.index', params: {listId: list.id}})
 			this.closeQuickActions()
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 8386695f..4a5e1b2e 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -24,6 +24,7 @@ import {useI18n} from 'vue-i18n'
 import ListModel from '@/models/list'
 import type {IList} from '@/modelTypes/IList'
 import Multiselect from '@/components/input/multiselect.vue'
+import {useListStore} from '@/stores/lists'
 
 const props = defineProps({
 	modelValue: {
@@ -34,6 +35,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const store = useStore()
+const listStore = useListStore()
 const {t} = useI18n({useScope: 'global'})
 
 const list: IList = reactive(new ListModel())
@@ -47,12 +49,12 @@ watch(
 	},
 )
 
-const foundLists = ref([])
+const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
 		select(null)
 	}
-	foundLists.value = store.getters['lists/searchList'](query)
+	foundLists.value = listStore.searchList(query)
 }
 
 function select(l: IList | null) {
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 6fef7fa7..47f00a64 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -15,9 +15,9 @@
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
 					:class="{'mr-2': task.hexColor !== ''}"
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-					{{ $store.getters['lists/getListById'](task.listId).title }}
+					v-if="showList && getListById(task.listId) !== null"
+					v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+					{{ getListById(task.listId).title }}
 				</router-link>
 
 				<ColorBubble
@@ -85,9 +85,9 @@
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
-			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-			{{ $store.getters['lists/getListById'](task.listId).title }}
+			v-if="!showList && currentList.id !== task.listId && getListById(task.listId) !== null"
+			v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+			{{ getListById(task.listId).title }}
 		</router-link>
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
@@ -102,6 +102,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue'
+import {mapState} from 'pinia'
 
 import TaskModel from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
@@ -117,6 +118,7 @@ import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary.vue'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -177,8 +179,11 @@ export default defineComponent({
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},
 	computed: {
+		...mapState(useListStore, {
+			getListById: 'getListById',
+		}),
 		listColor() {
-			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			const list = this.getListById(this.task.listId)
 			return list !== null ? list.hexColor : ''
 		},
 		currentList() {
diff --git a/src/composables/useList.ts b/src/composables/useList.ts
deleted file mode 100644
index 0ee12539..00000000
--- a/src/composables/useList.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
-import type {MaybeRef} from '@vueuse/core'
-import {useStore} from '@/store'
-
-import ListService from '@/services/list'
-import ListModel from '@/models/list'
-import { success } from '@/message'
-import {useI18n} from 'vue-i18n'
-
-export function useList(listId: MaybeRef<ListModel['id']>) {
-	const listService = shallowReactive(new ListService())
-	const {loading: isLoading} = toRefs(listService)
-	const list : ListModel = reactive(new ListModel({}))
-	const {t} = useI18n({useScope: 'global'})
-
-	watch(
-		() => unref(listId),
-		async (listId) => {
-			const loadedList = await listService.get(new ListModel({id: listId}))
-			Object.assign(list, loadedList)
-		},
-		{immediate: true},
-	)
-
-
-	const store = useStore()
-	async function save() {
-		await store.dispatch('lists/updateList', list)
-		success({message: t('list.edit.success')})
-	}
-
-	return {
-		isLoading: readonly(isLoading),
-		list,
-		save,
-	}
-}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index b69ea366..14afeb38 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,9 @@ import type ListModel from '@/models/list'
 import {saveListView, getListView} from '@/helpers/saveListView'
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
 import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
+import {setTitle} from '@/helpers/setTitle'
+
+import {useListStore} from '@/stores/lists'
 
 import HomeComponent from '../views/Home.vue'
 import NotFoundComponent from '../views/404.vue'
@@ -55,7 +58,6 @@ import NamespaceSettingDelete from '../views/namespaces/settings/delete.vue'
 import FilterNew from '@/views/filters/FilterNew.vue'
 import FilterEdit from '@/views/filters/FilterEdit.vue'
 import FilterDelete from '@/views/filters/FilterDelete.vue'
-import {setTitle} from '@/helpers/setTitle'
 
 const PasswordResetComponent = () => import('../views/user/PasswordReset.vue')
 const GetPasswordResetComponent = () => import('../views/user/RequestPasswordReset.vue')
@@ -392,7 +394,8 @@ const router = createRouter({
 			beforeEnter: (to) => {
 				saveListView(to.params.listId, to.name)
 				// Properly set the page title when a task popup is closed
-				const listFromStore = store.getters['lists/getListById'](parseInt(to.params.listId))
+				const listStore = useListStore()
+				const listFromStore = listStore.getListById(Number(to.params.listId))
 				if(listFromStore) {
 					setTitle(listFromStore.title)
 				}
diff --git a/src/store/index.ts b/src/store/index.ts
index 2abc52d4..605d070a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -18,7 +18,6 @@ import auth from './modules/auth'
 import namespaces from './modules/namespaces'
 import kanban from './modules/kanban'
 import tasks from './modules/tasks'
-import lists from './modules/lists'
 import attachments from './modules/attachments'
 
 import ListModel from '@/models/list'
@@ -43,7 +42,6 @@ export const store = createStore<RootStoreState>({
 		namespaces,
 		kanban,
 		tasks,
-		lists,
 		attachments,
 	},
 	state: () => ({
diff --git a/src/store/modules/lists.ts b/src/store/modules/lists.ts
deleted file mode 100644
index be2e3fcf..00000000
--- a/src/store/modules/lists.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import type { Module } from 'vuex'
-
-import ListService from '@/services/list'
-import {setLoading} from '@/store/helper'
-import {removeListFromHistory} from '@/modules/listHistory'
-import {createNewIndexer} from '@/indexes'
-import type {ListState, RootStoreState} from '@/store/types'
-import type {IList} from '@/modelTypes/IList'
-
-const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])
-
-const FavoriteListsNamespace = -2
-
-const listsStore : Module<ListState, RootStoreState>= {
-	namespaced: true,
-	// The state is an object which has the list ids as keys.
-	state: () => ({}),
-	mutations: {
-		setList(state, list: IList) {
-			state[list.id] = list
-			update(list)
-		},
-		setLists(state, lists: IList[]) {
-			lists.forEach(l => {
-				state[l.id] = l
-				add(l)
-			})
-		},
-		removeListById(state, list: IList) {
-			remove(list)
-			delete state[list.id]
-		},
-	},
-	getters: {
-		getListById: (state) => (id: IList['id']) => {
-			if (typeof state[id] !== 'undefined') {
-				return state[id]
-			}
-			return null
-		},
-		findListByExactname: (state) => (name: string) => {
-			const list = Object.values(state).find(l => {
-				return l.title.toLowerCase() === name.toLowerCase()
-			})
-			return typeof list === 'undefined' ? null : list
-		},
-		searchList: (state) => (query: string, includeArchived = false) => {
-			return search(query)
-					?.filter(value => value > 0)
-					.map(id => state[id])
-					.filter(list => list.isArchived === includeArchived)
-				|| []
-		},
-	},
-	actions: {
-		toggleListFavorite(ctx, list: IList) {
-			return ctx.dispatch('updateList', {
-				...list,
-				isFavorite: !list.isFavorite,
-			})
-		},
-
-		async createList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				const createdList = await listService.create(list)
-				createdList.namespaceId = list.namespaceId
-				ctx.commit('namespaces/addListToNamespace', createdList, {root: true})
-				ctx.commit('setList', createdList)
-				return createdList
-			} finally {
-				cancel()
-			}
-		},
-
-		async updateList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				await listService.update(list)
-				ctx.commit('setList', list)
-				ctx.commit('namespaces/setListInNamespaceById', list, {root: true})
-
-				// the returned list from listService.update is the same!
-				// in order to not validate vuex mutations we have to create a new copy
-				const newList = {
-					...list,
-					namespaceId: FavoriteListsNamespace,
-				}
-				if (list.isFavorite) {
-					ctx.commit('namespaces/addListToNamespace', newList, {root: true})
-				} else {
-					ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
-				}
-				ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
-				ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
-				return newList
-			} catch (e) {
-				// Reset the list state to the initial one to avoid confusion for the user
-				ctx.commit('setList', {
-					...list,
-					isFavorite: !list.isFavorite,
-				})
-				throw e
-			} finally {
-				cancel()
-			}
-		},
-
-		async deleteList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				const response = await listService.delete(list)
-				ctx.commit('removeListById', list)
-				ctx.commit('namespaces/removeListFromNamespaceById', list, {root: true})
-				removeListFromHistory({id: list.id})
-				return response
-			} finally {
-				cancel()
-			}
-		},
-	},
-}
-
-export default listsStore
\ No newline at end of file
diff --git a/src/store/modules/namespaces.ts b/src/store/modules/namespaces.ts
index d835c709..74545a35 100644
--- a/src/store/modules/namespaces.ts
+++ b/src/store/modules/namespaces.ts
@@ -6,6 +6,7 @@ import {createNewIndexer} from '@/indexes'
 import type {NamespaceState, RootStoreState} from '@/store/types'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'
 
 const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description'])
 
@@ -130,7 +131,8 @@ const namespacesStore : Module<NamespaceState, RootStoreState> = {
 				// Put all lists in the list state
 				const lists = namespaces.flatMap(({lists}) => lists)
 
-				ctx.commit('lists/setLists', lists, {root: true})
+				const listStore = useListStore()
+				listStore.setLists(lists)
 
 				return namespaces
 			} finally {
diff --git a/src/store/modules/tasks.ts b/src/store/modules/tasks.ts
index 81e2a239..5849bd7a 100644
--- a/src/store/modules/tasks.ts
+++ b/src/store/modules/tasks.ts
@@ -26,6 +26,7 @@ import type { IList } from '@/modelTypes/IList'
 
 import type { RootStoreState, TaskState } from '@/store/types'
 import { useLabelStore } from '@/stores/labels'
+import { useListStore } from '@/stores/lists'
 
 // IDEA: maybe use a small fuzzy search here to prevent errors
 function findPropertyByValue(object, key, value) {
@@ -292,7 +293,7 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			return task
 		},
 
-		findListId({ rootGetters }, { list: listName, listId }: {
+		findListId(_, { list: listName, listId }: {
 			list: string,
 			listId: IList['id']
 		}) {
@@ -301,7 +302,8 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			// Uses the following ways to get the list id of the new task:
 			//  1. If specified in quick add magic, look in store if it exists and use it if it does
 			if (listName !== null) {
-				const list = rootGetters['lists/findListByExactname'](listName)
+				const listStore = useListStore()
+				const list = listStore.findListByExactname(listName)
 				foundListId = list === null ? null : list.id
 			}
 			
diff --git a/src/store/types.ts b/src/store/types.ts
index 287fc89b..ee24f9e8 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -97,7 +97,8 @@ export interface LabelState {
 }
 
 export interface ListState {
-	[id: IList['id']]: IList
+	lists: { [id: IList['id']]: IList },
+	isLoading: boolean,
 }
 
 export interface NamespaceState {
diff --git a/src/stores/lists.ts b/src/stores/lists.ts
new file mode 100644
index 00000000..2f5193bf
--- /dev/null
+++ b/src/stores/lists.ts
@@ -0,0 +1,182 @@
+import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
+import {defineStore} from 'pinia'
+import {useI18n} from 'vue-i18n'
+
+import ListService from '@/services/list'
+import {setLoadingPinia} from '@/store/helper'
+import {removeListFromHistory} from '@/modules/listHistory'
+import {createNewIndexer} from '@/indexes'
+import {store as vuexStore} from '@/store' // for gradual conversion, see fullUserDetails
+
+import type {ListState} from '@/store/types'
+import type {IList} from '@/modelTypes/IList'
+
+import type {MaybeRef} from '@vueuse/core'
+
+import ListModel from '@/models/list'
+import {success} from '@/message'
+
+const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])
+
+const FavoriteListsNamespace = -2
+
+export const useListStore = defineStore('list', {
+	state: () : ListState => ({
+		isLoading: false,
+		// The lists are stored as an object which has the list ids as keys.
+		lists: {},
+	}),
+
+	getters: {
+		getListById(state) {
+			return (id: IList['id']) => typeof state.lists[id] !== 'undefined' ? state.lists[id] : null
+		},
+
+		findListByExactname(state) {
+			return (name: string) => {
+				const list = Object.values(state.lists).find(l => {
+					return l.title.toLowerCase() === name.toLowerCase()
+				})
+				return typeof list === 'undefined' ? null : list
+			}
+		},
+
+		searchList(state) {
+			return (query: string, includeArchived = false) => {
+				return search(query)
+					?.filter(value => value > 0)
+					.map(id => state.lists[id])
+					.filter(list => list.isArchived === includeArchived)
+					|| []
+			}
+		},
+	},
+
+	actions: {
+		setIsLoading(isLoading: boolean) {
+			this.isLoading = isLoading
+		},
+
+		setList(list: IList) {
+			this.lists[list.id] = list
+			update(list)
+		},
+
+		setLists(lists: IList[]) {
+			lists.forEach(l => {
+				this.lists[l.id] = l
+				add(l)
+			})
+		},
+
+		removeListById(list: IList) {
+			remove(list)
+			delete this.lists[list.id]
+		},
+
+		toggleListFavorite(list: IList) {
+			// The favorites pseudo list is always favorite
+			// Archived lists cannot be marked favorite
+			if (list.id === -1 || list.isArchived) {
+				return
+			}
+			return this.updateList({
+				...list,
+				isFavorite: !list.isFavorite,
+			})
+		},
+
+		async createList(list: IList) {
+			const cancel = setLoadingPinia(useListStore)
+			const listService = new ListService()
+
+			try {
+				const createdList = await listService.create(list)
+				createdList.namespaceId = list.namespaceId
+				vuexStore.commit('namespaces/addListToNamespace', createdList, {root: true})
+				this.setList(createdList)
+				return createdList
+			} finally {
+				cancel()
+			}
+		},
+
+		async updateList(list: IList) {
+			const cancel = setLoadingPinia(useListStore)
+			const listService = new ListService()
+
+			try {
+				await listService.update(list)
+				this.setList(list)
+				vuexStore.commit('namespaces/setListInNamespaceById', list, {root: true})
+
+				// the returned list from listService.update is the same!
+				// in order to not validate vuex mutations we have to create a new copy
+				const newList = {
+					...list,
+					namespaceId: FavoriteListsNamespace,
+				}
+				if (list.isFavorite) {
+					vuexStore.commit('namespaces/addListToNamespace', newList, {root: true})
+				} else {
+					vuexStore.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
+				}
+				vuexStore.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
+				vuexStore.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
+				return newList
+			} catch (e) {
+				// Reset the list state to the initial one to avoid confusion for the user
+				this.setList({
+					...list,
+					isFavorite: !list.isFavorite,
+				})
+				throw e
+			} finally {
+				cancel()
+			}
+		},
+
+		async deleteList(list: IList) {
+			const cancel = setLoadingPinia(useListStore)
+			const listService = new ListService()
+
+			try {
+				const response = await listService.delete(list)
+				this.removeListById(list)
+				vuexStore.commit('namespaces/removeListFromNamespaceById', list, {root: true})
+				removeListFromHistory({id: list.id})
+				return response
+			} finally {
+				cancel()
+			}
+		},
+	},
+})
+
+export function useList(listId: MaybeRef<ListModel['id']>) {
+	const listService = shallowReactive(new ListService())
+	const {loading: isLoading} = toRefs(listService)
+	const list : ListModel = reactive(new ListModel({}))
+	const {t} = useI18n({useScope: 'global'})
+
+	watch(
+		() => unref(listId),
+		async (listId) => {
+			const loadedList = await listService.get(new ListModel({id: listId}))
+			Object.assign(list, loadedList)
+		},
+		{immediate: true},
+	)
+
+	const listStore = useListStore()
+	async function save() {
+		await listStore.updateList(list)
+		success({message: t('list.edit.success')})
+	}
+
+	return {
+		isLoading: readonly(isLoading),
+		list,
+		save,
+	}
+}
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index fe34d205..176c990c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -71,10 +71,12 @@ import {getHistory} from '@/modules/listHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
+import {useListStore} from '@/stores/lists'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+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) {
@@ -82,7 +84,7 @@ const listHistory = computed(() => {
 	}
 	
 	return getHistory()
-		.map(l => store.getters['lists/getListById'](l.id))
+		.map(l => listStore.getListById(l.id))
 		.filter(l => l !== null)
 })
 
diff --git a/src/views/list/ListInfo.vue b/src/views/list/ListInfo.vue
index fb311a67..91492d04 100644
--- a/src/views/list/ListInfo.vue
+++ b/src/views/list/ListInfo.vue
@@ -15,11 +15,11 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from '@/store'
 import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
 import {createRandomID} from '@/helpers/randomId'
+import {useListStore} from '@/stores/lists'
 
 const props = defineProps({
 	listId: {
@@ -28,8 +28,8 @@ const props = defineProps({
 	},
 })
 
-const store = useStore()
-const list = computed(() => store.getters['lists/getListById'](props.listId))
+const listStore = useListStore()
+const list = computed(() => listStore.getListById(props.listId))
 const htmlDescription = computed(() => {
 	const description = list.value?.description || ''
 	if (description === '') {
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index cbe50fc8..6509324c 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -61,6 +61,7 @@ import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
 import {useTitle} from '@/composables/useTitle'
 import {useStore} from '@/store'
+import {useListStore} from '@/stores/lists'
 
 const props = defineProps({
 	listId: {
@@ -76,6 +77,7 @@ const props = defineProps({
 const route = useRoute()
 const store = useStore()
 
+const listStore = useListStore()
 const listService = ref(new ListService())
 const loadedListId = ref(0)
 
@@ -135,7 +137,7 @@ async function loadList(listIdToLoad: number) {
 
 	// Set the current list to the one we're about to load so that the title is already shown at the top
 	loadedListId.value = 0
-	const listFromStore = store.getters['lists/getListById'](listData.id)
+	const listFromStore = listStore.getListById(listData.id)
 	if (listFromStore !== null) {
 		store.commit(BACKGROUND, null)
 		store.commit(BLUR_HASH, null)
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index 47af4178..e8f5962e 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -35,18 +35,17 @@
 import {ref, reactive, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter, useRoute} from 'vue-router'
-import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import ListModel from '@/models/list'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '@/components/input/colorPicker.vue'
 
-import { success } from '@/message'
-import { useTitle } from '@/composables/useTitle'
+import {success} from '@/message'
+import {useTitle} from '@/composables/useTitle'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -55,6 +54,7 @@ useTitle(() => t('list.create.header'))
 const showError = ref(false)
 const list = reactive(new ListModel())
 const listService = shallowReactive(new ListService())
+const listStore = useListStore()
 
 async function createNewList() {
 	if (list.title === '') {
@@ -64,7 +64,7 @@ async function createNewList() {
 	showError.value = false
 
 	list.namespaceId = Number(route.params.namespaceId as string)
-	const newList = await store.dispatch('lists/createList', list)
+	const newList = await listStore.createList(list)
 	await router.push({
 		name: 'list.index',
 		params: { listId: newList.id },
diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index 922f8300..ad24fe2d 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -23,18 +23,20 @@ import {useI18n} from 'vue-i18n'
 
 import { success } from '@/message'
 import { useTitle } from '@/composables/useTitle'
+import { useListStore } from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
+const listStore = useListStore()
 const router = useRouter()
 const route = useRoute()
 
-const list = computed(() => store.getters['lists/getListById'](route.params.listId))
+const list = computed(() => listStore.getListById(route.params.listId))
 useTitle(() => t('list.archive.title', {list: list.value.title}))
 
 async function archiveList() {
 	try {
-		const newList = await store.dispatch('lists/updateList', {
+		const newList = await listStore.updateList({
 			...list.value,
 			isArchived: !list.value.isArchived,
 		})
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index 18d720cd..565e037f 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -105,6 +105,7 @@ import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import debounce from 'lodash.debounce'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useListStore} from '@/stores/lists'
 
 import BackgroundUnsplashService from '@/services/backgroundUnsplash'
 import BackgroundUploadService from '@/services/backgroundUpload'
@@ -141,6 +142,7 @@ const debounceNewBackgroundSearch = debounce(newBackgroundSearch, SEARCH_DEBOUNC
 
 const backgroundUploadService = ref(new BackgroundUploadService())
 const listService = ref(new ListService())
+const listStore = useListStore()
 
 const unsplashBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('unsplash'))
 const uploadBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('upload'))
@@ -176,6 +178,7 @@ async function searchBackgrounds(page = 1) {
 	})
 }
 
+
 async function setBackground(backgroundId: string) {
 	// Don't set a background if we're in the process of setting one
 	if (backgroundService.loading) {
@@ -185,7 +188,7 @@ async function setBackground(backgroundId: string) {
 	const list = await backgroundService.update({id: backgroundId, listId: route.params.listId})
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.success')})
 }
 
@@ -198,7 +201,7 @@ async function uploadBackground() {
 	const list = await backgroundUploadService.value.create(route.params.listId, backgroundUploadInput.value?.files[0])
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.success')})
 }
 
@@ -206,7 +209,7 @@ async function removeBackground() {
 	const list = await listService.value.removeBackground(currentList.value)
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.removeSuccess')})
 	router.back()
 }
diff --git a/src/views/list/settings/delete.vue b/src/views/list/settings/delete.vue
index a455dcf6..85720191 100644
--- a/src/views/list/settings/delete.vue
+++ b/src/views/list/settings/delete.vue
@@ -30,24 +30,24 @@
 import {computed, ref, watchEffect} from 'vue'
 import {useTitle} from '@/composables/useTitle'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {success} from '@/message'
 import TaskCollectionService from '@/services/taskCollection'
 import Loading from '@/components/misc/loading.vue'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const listStore = useListStore()
 const route = useRoute()
 const router = useRouter()
 
 const totalTasks = ref<number | null>(null)
 
-const list = computed(() => store.getters['lists/getListById'](route.params.listId))
+const list = computed(() => listStore.getListById(route.params.listId))
 
 watchEffect(
 	() => {
-		if (!route.params.lisId) {
+		if (!route.params.listId) {
 			return
 		}
 
@@ -61,7 +61,11 @@ watchEffect(
 useTitle(() => t('list.delete.title', {list: list?.value?.title}))
 
 async function deleteList() {
-	await store.dispatch('lists/deleteList', list.value)
+	if (!list.value) {
+		return
+	}
+
+	await listStore.deleteList(list.value)
 	success({message: t('list.delete.success')})
 	router.push({name: 'home'})
 }
diff --git a/src/views/list/settings/duplicate.vue b/src/views/list/settings/duplicate.vue
index 0752a78e..e4ed6072 100644
--- a/src/views/list/settings/duplicate.vue
+++ b/src/views/list/settings/duplicate.vue
@@ -35,6 +35,7 @@ import type {INamespace} from '@/modelTypes/INamespace'
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 import {useNameSpaceSearch} from '@/composables/useNamespaceSearch'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('list.duplicate.title'))
@@ -53,6 +54,7 @@ function selectNamespace(namespace: INamespace) {
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const listStore = useListStore()
 
 const listDuplicateService = shallowReactive(new ListDuplicateService())
 
@@ -66,7 +68,7 @@ async function duplicateList() {
 	const duplicate = await listDuplicateService.create(listDuplicate)
 
 	store.commit('namespaces/addListToNamespace', duplicate.list)
-	store.commit('lists/setList', duplicate.list)
+	listStore.setList(duplicate.list)
 	success({message: t('list.duplicate.success')})
 	router.push({name: 'list.index', params: {listId: duplicate.list.id}})
 }
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index e7fc0947..ff760e30 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -45,7 +45,7 @@
 		<div class="field">
 			<label class="label" for="listdescription">{{ $t('list.edit.description') }}</label>
 			<div class="control">
-				<editor
+				<Editor
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading"
 					:previewIsDefault="false"
@@ -82,8 +82,8 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import type {IList} from '@/modelTypes/IList'
 
-import { useList } from '@/composables/useList'
-import { useTitle } from '@/composables/useTitle'
+import {useList} from '@/stores/lists'
+import {useTitle} from '@/composables/useTitle'
 
 const props = defineProps({
 	listId: {
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index d72febe2..cc435b21 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -148,6 +148,7 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import { useListStore } from '@/stores/lists'
 
 export default defineComponent({
 	name: 'user-settings-general',
@@ -246,8 +247,9 @@ watch(
 	{immediate: true},
 )
 
+const listStore = useListStore()
 const defaultList = computed({
-	get: () => store.getters['lists/getListById'](settings.value.defaultListId),
+	get: () => listStore.getListById(settings.value.defaultListId),
 	set(l) {
 		settings.value.defaultListId = l ? l.id : DEFAULT_LIST_ID
 	},