feat: convert namespaces store to pina (#2393)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2393
Reviewed-by: konrad <k@knt.li>

src/components/home/navigation.vue

@@ -160,6 +160,7 @@ import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const drag = ref(false)
 const dragOptions = {
@@ -168,13 +169,14 @@ const dragOptions = {
 }
 
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const currentList = computed(() => store.state.currentList)
 const menuActive = computed(() => store.state.menuActive)
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
+const loading = computed(() => namespaceStore.isLoading)
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
+	return namespaceStore.namespaces.filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -210,7 +212,7 @@ function toggleLists(namespaceId: INamespace['id']) {
 const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
+	const namespaces = await namespaceStore.loadNamespaces()
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -229,7 +231,7 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 		...namespace.lists.filter(l => l.isArchived),
 	]
 
-	store.commit('namespaces/setNamespaceById', {
+	namespaceStore.setNamespaceById({
 		...namespace,
 		lists,
 	})

src/components/tasks/partials/listSearch.vue

@@ -19,12 +19,12 @@
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 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'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	modelValue: {
@@ -34,8 +34,6 @@ 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())
@@ -49,6 +47,8 @@ watch(
 	},
 )
 
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
@@ -66,7 +66,7 @@ function select(l: IList | null) {
 }
 
 function namespace(namespaceId: number) {
-	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	const namespace = namespaceStore.getNamespaceById(namespaceId)
 	return namespace !== null
 		? namespace.title
 		: t('list.shared')

src/components/tasks/partials/relatedTasks.vue

@@ -164,6 +164,8 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
+import {useNamespaceStore} from '@/stores/namespaces'
+
 import {error, success} from '@/message'
 
 const props = defineProps({
@@ -189,6 +191,7 @@ const props = defineProps({
 })
 
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
 
@@ -222,7 +225,7 @@ async function findTasks(newQuery: string) {
 	foundTasks.value = await taskService.getAll({}, {s: newQuery})
 }
 
-const getListAndNamespaceById = (listId: number) => store.getters['namespaces/getListAndNamespaceById'](listId, true)
+const getListAndNamespaceById = (listId: number) => namespaceStore.getListAndNamespaceById(listId, true)
 
 const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
 

src/components/tasks/partials/singleTaskInList.vue

@@ -118,6 +118,7 @@ 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'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -236,7 +237,8 @@ export default defineComponent({
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
 			this.$emit('task-updated', this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			const namespaceStore = useNamespaceStore()
+			namespaceStore.loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {

src/composables/useNamespaceSearch.ts

@@ -1,11 +1,11 @@
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
+import {useNamespaceStore} from '@/stores/namespaces'
 
-export function useNameSpaceSearch() {
+export function useNamespaceSearch() {
 	const query = ref('')
 	
-	const store = useStore()
-	const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
+	const namespaceStore = useNamespaceStore()
+	const namespaces = computed(() => namespaceStore.searchNamespace(query.value))
 	
 	function findNamespaces(newQuery: string) {
 		query.value = newQuery

src/models/savedFilter.ts

@@ -22,7 +22,7 @@ export default class SavedFilterModel extends AbstractModel<ISavedFilter> implem
 	created: Date = null
 	updated: Date = null
 
-	constructor(data: Partial<ISavedFilter>) {
+	constructor(data: Partial<ISavedFilter> = {}) {
 		super()
 		this.assignData(data)
 

src/store/index.ts

@@ -15,7 +15,6 @@ import {
 } from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
-import namespaces from './modules/namespaces'
 import kanban from './modules/kanban'
 import tasks from './modules/tasks'
 import attachments from './modules/attachments'
@@ -39,7 +38,6 @@ export const store = createStore<RootStoreState>({
 	modules: {
 		config,
 		auth,
-		namespaces,
 		kanban,
 		tasks,
 		attachments,

src/store/modules/namespaces.ts

@@ -1,184 +0,0 @@
-import type { Module } from 'vuex'
-
-import NamespaceService from '../../services/namespace'
-import {setLoading} from '@/store/helper'
-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'])
-
-const namespacesStore : Module<NamespaceState, RootStoreState> = {
-	namespaced: true,
-	state: () => ({
-		namespaces: [],
-	}),
-	mutations: {
-		namespaces(state, namespaces: INamespace[]) {
-			state.namespaces = namespaces
-			namespaces.forEach(n => {
-				add(n)
-			})
-		},
-		setNamespaceById(state, namespace: INamespace) {
-			const namespaceIndex = state.namespaces.findIndex(n => n.id === namespace.id)
-
-			if (namespaceIndex === -1) {
-				return
-			}
-
-			if (!namespace.lists || namespace.lists.length === 0) {
-				namespace.lists = state.namespaces[namespaceIndex].lists
-			}
-
-			state.namespaces[namespaceIndex] = namespace
-			update(namespace)
-		},
-		setListInNamespaceById(state, list: IList) {
-			for (const n in state.namespaces) {
-				// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
-				// FIXME: Not ideal at all - we should fix that at the api level.
-				if (state.namespaces[n].id === list.namespaceId) {
-					for (const l in state.namespaces[n].lists) {
-						if (state.namespaces[n].lists[l].id === list.id) {
-							const namespace = state.namespaces[n]
-							namespace.lists[l] = list
-							state.namespaces[n] = namespace
-							return
-						}
-					}
-				}
-			}
-		},
-		addNamespace(state, namespace: INamespace) {
-			state.namespaces.push(namespace)
-			add(namespace)
-		},
-		removeNamespaceById(state, namespaceId: INamespace['id']) {
-			for (const n in state.namespaces) {
-				if (state.namespaces[n].id === namespaceId) {
-					remove(state.namespaces[n])
-					state.namespaces.splice(n, 1)
-					return
-				}
-			}
-		},
-		addListToNamespace(state, list: IList) {
-			for (const n in state.namespaces) {
-				if (state.namespaces[n].id === list.namespaceId) {
-					state.namespaces[n].lists.push(list)
-					return
-				}
-			}
-		},
-		removeListFromNamespaceById(state, list: IList) {
-			for (const n in state.namespaces) {
-				// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
-				// FIXME: Not ideal at all - we should fix that at the api level.
-				if (state.namespaces[n].id === list.namespaceId) {
-					for (const l in state.namespaces[n].lists) {
-						if (state.namespaces[n].lists[l].id === list.id) {
-							state.namespaces[n].lists.splice(l, 1)
-							return
-						}
-					}
-				}
-			}
-		},
-	},
-	getters: {
-		getListAndNamespaceById: (state) => (listId: IList['id'], ignorePseudoNamespaces = false) => {
-			for (const n in state.namespaces) {
-
-				if (ignorePseudoNamespaces && state.namespaces[n].id < 0) {
-					continue
-				}
-
-				for (const l in state.namespaces[n].lists) {
-					if (state.namespaces[n].lists[l].id === listId) {
-						return {
-							list: state.namespaces[n].lists[l],
-							namespace: state.namespaces[n],
-						}
-					}
-				}
-			}
-			return null
-		},
-		getNamespaceById: (state) => (namespaceId: INamespace['id']) => {
-			return state.namespaces.find(({id}) => id == namespaceId) || null
-		},
-		searchNamespace: (state, getters) => (query: string) => {
-			return search(query)
-					?.filter(value => value > 0)
-					.map(getters.getNamespaceById)
-					.filter(n => n !== null)
-				|| []
-		},
-	},
-	actions: {
-		async loadNamespaces(ctx) {
-			const cancel = setLoading(ctx, 'namespaces')
-
-			const namespaceService = new NamespaceService()
-			try {
-				// We always load all namespaces and filter them on the frontend
-				const namespaces = await namespaceService.getAll({}, {is_archived: true})
-				ctx.commit('namespaces', namespaces)
-
-				// Put all lists in the list state
-				const lists = namespaces.flatMap(({lists}) => lists)
-
-				const listStore = useListStore()
-				listStore.setLists(lists)
-
-				return namespaces
-			} finally {
-				cancel()
-			}
-		},
-
-		loadNamespacesIfFavoritesDontExist(ctx) {
-			// The first or second namespace should be the one holding all favorites
-			if (ctx.state.namespaces[0].id !== -2 && ctx.state.namespaces[1]?.id !== -2) {
-				return ctx.dispatch('loadNamespaces')
-			}
-		},
-
-		removeFavoritesNamespaceIfEmpty(ctx) {
-			if (ctx.state.namespaces[0].id === -2 && ctx.state.namespaces[0].lists.length === 0) {
-				ctx.state.namespaces.splice(0, 1)
-			}
-		},
-
-		async deleteNamespace(ctx, namespace: INamespace) {
-			const cancel = setLoading(ctx, 'namespaces')
-			const namespaceService = new NamespaceService()
-
-			try {
-				const response = await namespaceService.delete(namespace)
-				ctx.commit('removeNamespaceById', namespace.id)
-				return response
-			} finally {
-				cancel()
-			}
-		},
-
-		async createNamespace(ctx, namespace: INamespace) {
-			const cancel = setLoading(ctx, 'namespaces')
-			const namespaceService = new NamespaceService()
-
-			try {
-				const createdNamespace = await namespaceService.create(namespace)
-				ctx.commit('addNamespace', createdNamespace)
-				return createdNamespace
-			} finally {
-				cancel()
-			}
-		},
-	},
-}
-
-export default namespacesStore

src/store/types.ts

@@ -103,6 +103,7 @@ export interface ListState {
 
 export interface NamespaceState {
 	namespaces: INamespace[]
+	isLoading: boolean,
 }
 
 export interface TaskState {}

src/stores/labels.ts

@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia'
+import { acceptHMRUpdate, defineStore } from 'pinia'
 
 import LabelService from '@/services/label'
 import {success} from '@/message'
@@ -134,3 +134,8 @@ export const useLabelStore = defineStore('label', {
 		},
 	},
 })
+
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useLabelStore, import.meta.hot))
+}

src/stores/lists.ts

@@ -1,12 +1,12 @@
 import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
-import {defineStore} from 'pinia'
+import {acceptHMRUpdate, 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 {useNamespaceStore} from './namespaces'
 
 import type {ListState} from '@/store/types'
 import type {IList} from '@/modelTypes/IList'
@@ -93,7 +93,8 @@ export const useListStore = defineStore('list', {
 			try {
 				const createdList = await listService.create(list)
 				createdList.namespaceId = list.namespaceId
-				vuexStore.commit('namespaces/addListToNamespace', createdList, {root: true})
+				const namespaceStore = useNamespaceStore()
+				namespaceStore.addListToNamespace(createdList)
 				this.setList(createdList)
 				return createdList
 			} finally {
@@ -108,7 +109,8 @@ export const useListStore = defineStore('list', {
 			try {
 				await listService.update(list)
 				this.setList(list)
-				vuexStore.commit('namespaces/setListInNamespaceById', list, {root: true})
+				const namespaceStore = useNamespaceStore()
+				namespaceStore.setListInNamespaceById(list)
 
 				// the returned list from listService.update is the same!
 				// in order to not validate vuex mutations we have to create a new copy
@@ -117,12 +119,12 @@ export const useListStore = defineStore('list', {
 					namespaceId: FavoriteListsNamespace,
 				}
 				if (list.isFavorite) {
-					vuexStore.commit('namespaces/addListToNamespace', newList, {root: true})
+					namespaceStore.addListToNamespace(newList)
 				} else {
-					vuexStore.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
+					namespaceStore.removeListFromNamespaceById(newList)
 				}
-				vuexStore.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
-				vuexStore.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
+				namespaceStore.loadNamespacesIfFavoritesDontExist(null)
+				namespaceStore.removeFavoritesNamespaceIfEmpty(null)
 				return newList
 			} catch (e) {
 				// Reset the list state to the initial one to avoid confusion for the user
@@ -143,7 +145,8 @@ export const useListStore = defineStore('list', {
 			try {
 				const response = await listService.delete(list)
 				this.removeListById(list)
-				vuexStore.commit('namespaces/removeListFromNamespaceById', list, {root: true})
+				const namespaceStore = useNamespaceStore()
+				namespaceStore.removeListFromNamespaceById(list)
 				removeListFromHistory({id: list.id})
 				return response
 			} finally {
@@ -179,4 +182,9 @@ export function useList(listId: MaybeRef<IList['id']>) {
 		list,
 		save,
 	}
+}
+
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useListStore, import.meta.hot))
 }

src/stores/namespaces.ts

@@ -0,0 +1,203 @@
+import {defineStore, acceptHMRUpdate} from 'pinia'
+
+import NamespaceService from '../services/namespace'
+import {setLoadingPinia} from '@/store/helper'
+import {createNewIndexer} from '@/indexes'
+import type {NamespaceState} 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'])
+
+export const useNamespaceStore = defineStore('namespace', {
+	state: (): NamespaceState => ({
+		isLoading: false,
+		// FIXME: should be object with id as key
+		namespaces: [],
+	}),
+	getters: {
+		getListAndNamespaceById: (state) => (listId: IList['id'], ignorePseudoNamespaces = false) => {
+			for (const n in state.namespaces) {
+
+				if (ignorePseudoNamespaces && state.namespaces[n].id < 0) {
+					continue
+				}
+
+				for (const l in state.namespaces[n].lists) {
+					if (state.namespaces[n].lists[l].id === listId) {
+						return {
+							list: state.namespaces[n].lists[l],
+							namespace: state.namespaces[n],
+						}
+					}
+				}
+			}
+			return null
+		},
+
+		getNamespaceById: state => (namespaceId: INamespace['id']) => {
+			return state.namespaces.find(({id}) => id == namespaceId) || null
+		},
+	
+		searchNamespace() {
+			return (query: string) => (
+				search(query)
+					?.filter(value => value > 0)
+					.map(this.getNamespaceById)
+					.filter(n => n !== null)
+				|| []
+			)
+		},
+	},
+
+	actions: {
+		setIsLoading(isLoading: boolean) {
+			this.isLoading = isLoading
+		},
+
+		setNamespaces(namespaces: INamespace[]) {
+			this.namespaces = namespaces
+			namespaces.forEach(n => {
+				add(n)
+			})
+		},
+
+		setNamespaceById(namespace: INamespace) {
+			const namespaceIndex = this.namespaces.findIndex(n => n.id === namespace.id)
+
+			if (namespaceIndex === -1) {
+				return
+			}
+
+			if (!namespace.lists || namespace.lists.length === 0) {
+				namespace.lists = this.namespaces[namespaceIndex].lists
+			}
+
+			this.namespaces[namespaceIndex] = namespace
+			update(namespace)
+		},
+
+		setListInNamespaceById(list: IList) {
+			for (const n in this.namespaces) {
+				// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
+				// FIXME: Not ideal at all - we should fix that at the api level.
+				if (this.namespaces[n].id === list.namespaceId) {
+					for (const l in this.namespaces[n].lists) {
+						if (this.namespaces[n].lists[l].id === list.id) {
+							const namespace = this.namespaces[n]
+							namespace.lists[l] = list
+							this.namespaces[n] = namespace
+							return
+						}
+					}
+				}
+			}
+		},
+
+		addNamespace(namespace: INamespace) {
+			this.namespaces.push(namespace)
+			add(namespace)
+		},
+
+		removeNamespaceById(namespaceId: INamespace['id']) {
+			for (const n in this.namespaces) {
+				if (this.namespaces[n].id === namespaceId) {
+					remove(this.namespaces[n])
+					this.namespaces.splice(n, 1)
+					return
+				}
+			}
+		},
+
+		addListToNamespace(list: IList) {
+			for (const n in this.namespaces) {
+				if (this.namespaces[n].id === list.namespaceId) {
+					this.namespaces[n].lists.push(list)
+					return
+				}
+			}
+		},
+
+		removeListFromNamespaceById(list: IList) {
+			for (const n in this.namespaces) {
+				// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
+				// FIXME: Not ideal at all - we should fix that at the api level.
+				if (this.namespaces[n].id === list.namespaceId) {
+					for (const l in this.namespaces[n].lists) {
+						if (this.namespaces[n].lists[l].id === list.id) {
+							this.namespaces[n].lists.splice(l, 1)
+							return
+						}
+					}
+				}
+			}
+		},
+
+		async loadNamespaces() {
+			const cancel = setLoadingPinia(this)
+
+			const namespaceService = new NamespaceService()
+			try {
+				// We always load all namespaces and filter them on the frontend
+				const namespaces = await namespaceService.getAll({}, {is_archived: true}) as INamespace[]
+				this.setNamespaces(namespaces)
+
+				// Put all lists in the list state
+				const lists = namespaces.flatMap(({lists}) => lists)
+
+				const listStore = useListStore()
+				listStore.setLists(lists)
+
+				return namespaces
+			} finally {
+				cancel()
+			}
+		},
+
+		loadNamespacesIfFavoritesDontExist() {
+			// The first or second namespace should be the one holding all favorites
+			if (this.namespaces[0].id === -2 || this.namespaces[1]?.id === -2) {
+				return
+			}
+			return this.loadNamespaces()
+		},
+
+		removeFavoritesNamespaceIfEmpty() {
+			if (this.namespaces[0].id === -2 && this.namespaces[0].lists.length === 0) {
+				this.namespaces.splice(0, 1)
+			}
+		},
+
+		async deleteNamespace(namespace: INamespace) {
+			const cancel = setLoadingPinia(this)
+			const namespaceService = new NamespaceService()
+
+			try {
+				const response = await namespaceService.delete(namespace)
+				this.removeNamespaceById(namespace.id)
+				return response
+			} finally {
+				cancel()
+			}
+		},
+
+		async createNamespace(namespace: INamespace) {
+			const cancel = setLoadingPinia(this)
+			const namespaceService = new NamespaceService()
+
+			try {
+				const createdNamespace = await namespaceService.create(namespace)
+				this.addNamespace(createdNamespace)
+				return createdNamespace
+			} finally {
+				cancel()
+			}
+		},
+	},
+})
+
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useNamespaceStore, import.meta.hot))
+}

src/views/Home.vue

@@ -72,10 +72,12 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+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	
@@ -92,8 +94,8 @@ const migratorsEnabled = computed(() => store.state.config.availableMigrators?.l
 const userInfo = computed(() => store.state.auth.info)
 const hasTasks = computed(() => store.state.hasTasks)
 const defaultListId = computed(() => store.state.auth.settings.defaultListId)
-const defaultNamespaceId = computed(() => store.state.namespaces.namespaces?.[0]?.id || 0)
-const hasLists = computed(() => store.state.namespaces.namespaces?.[0]?.lists.length > 0)
+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))
 

src/views/filters/FilterDelete.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { store } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
 import {success} from '@/message'
@@ -20,10 +19,12 @@ import {success} from '@/message'
 import SavedFilterModel from '@/models/savedFilter'
 import SavedFilterService from '@/services/savedFilter'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const { t } = useI18n({useScope: 'global'})
 const router = useRouter()
 const route = useRoute()
+const namespaceStore = useNamespaceStore()
 
 async function deleteSavedFilter() {
 	// We assume the listId in the route is the pseudolist
@@ -33,7 +34,7 @@ async function deleteSavedFilter() {
 	const filter = new SavedFilterModel({id: savedFilterId})
 
 	await filterService.delete(filter)
-	await store.dispatch('namespaces/loadNamespaces')
+	await namespaceStore.loadNamespaces()
 	success({message: t('filters.delete.success')})
 	router.push({name: 'namespaces.index'})
 }

src/views/filters/FilterEdit.vue

@@ -54,8 +54,7 @@
 <script setup lang="ts">
 import {ref, shallowRef, computed, watch, unref } from 'vue'
 import {useRouter, useRoute} from 'vue-router'
-import {store} from '@/store'
-import {success}  from '@/message'
+import {success} from '@/message'
 import {useI18n} from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
 
@@ -69,8 +68,10 @@ import SavedFilterService from '@/services/savedFilter'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import type {IList} from '@/modelTypes/IList'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
+const namespaceStore = useNamespaceStore()
 
 function useSavedFilter(listId: MaybeRef<IList['id']>) {
 	const filterService = shallowRef(new SavedFilterService())
@@ -97,7 +98,7 @@ function useSavedFilter(listId: MaybeRef<IList['id']>) {
 	async function save() {
 		filter.value.filters = filters.value
 		const response = await filterService.value.update(filter.value)
-		await store.dispatch('namespaces/loadNamespaces')
+		await namespaceStore.loadNamespaces()
 		success({message: t('filters.edit.success')})
 		response.filters = objectToSnakeCase(response.filters)
 		filter.value = response

src/views/filters/FilterNew.vue

@@ -65,7 +65,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, computed } from 'vue'
 
-import { store } from '@/store'
 import { useRouter } from 'vue-router'
 
 import {default as Editor} from '@/components/input/AsyncEditor'
@@ -73,6 +72,9 @@ import Filters from '@/components/list/partials/filters.vue'
 
 import SavedFilterService from '@/services/savedFilter'
 import SavedFilterModel from '@/models/savedFilter'
+import {useNamespaceStore} from '@/stores/namespaces'
+
+const namespaceStore = useNamespaceStore()
 
 const savedFilterService = shallowRef(new SavedFilterService())
 
@@ -85,7 +87,7 @@ const filters = computed({
 const router = useRouter()
 async function create() {
 	savedFilter.value = await savedFilterService.value.create(savedFilter.value)
-	await store.dispatch('namespaces/loadNamespaces')
+	await namespaceStore.loadNamespaces()
 	router.push({name: 'list.index', params: {listId: savedFilter.value.getListId()}})
 }
 </script>

src/views/list/settings/duplicate.vue

@@ -22,7 +22,6 @@
 <script setup lang="ts">
 import {ref, shallowReactive} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import ListDuplicateService from '@/services/listDuplicateService'
@@ -34,8 +33,9 @@ import type {INamespace} from '@/modelTypes/INamespace'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
-import {useNameSpaceSearch} from '@/composables/useNamespaceSearch'
+import {useNamespaceSearch} from '@/composables/useNamespaceSearch'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('list.duplicate.title'))
@@ -43,7 +43,7 @@ useTitle(() => t('list.duplicate.title'))
 const {
 	namespaces,
 	findNamespaces,
-} = useNameSpaceSearch()
+} = useNamespaceSearch()
 
 const selectedNamespace = ref<INamespace>()
 
@@ -53,8 +53,8 @@ function selectNamespace(namespace: INamespace) {
 
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
 const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 
 const listDuplicateService = shallowReactive(new ListDuplicateService())
 
@@ -67,7 +67,7 @@ async function duplicateList() {
 
 	const duplicate = await listDuplicateService.create(listDuplicate)
 
-	store.commit('namespaces/addListToNamespace', duplicate.list)
+	namespaceStore.addListToNamespace(duplicate.list)
 	listStore.setList(duplicate.list)
 	success({message: t('list.duplicate.success')})
 	router.push({name: 'list.index', params: {listId: duplicate.list.id}})

src/views/migrator/MigrateService.vue

@@ -77,6 +77,7 @@ import { setTitle } from '@/helpers/setTitle'
 import {formatDateLong} from '@/helpers/time/formatDate'
 
 import {MIGRATORS} from './migrators'
+import { useNamespaceStore } from '@/stores/namespaces'
 
 const PROGRESS_DOTS_COUNT = 8
 
@@ -171,7 +172,8 @@ export default defineComponent({
 			try {
 				const {message} = await this.migrationService.migrate(migrationConfig)
 				this.message = message
-				return this.$store.dispatch('namespaces/loadNamespaces')
+				const namespaceStore = useNamespaceStore()
+				return namespaceStore.loadNamespaces()
 			} finally {
 				this.isMigrating = false
 			}

src/views/namespaces/ListNamespaces.vue

@@ -79,17 +79,19 @@ import ListCard from '@/components/list/partials/list-card.vue'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {useTitle} from '@/composables/useTitle'
 import {useStorage} from '@vueuse/core'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n()
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 
 useTitle(() => t('namespace.title'))
 const showArchived = useStorage('showArchived', false)
 
 const loading = computed(() => store.state.loading)
 const namespaces = computed(() => {
-	return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
-	// return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
+	return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
+	// return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
 	// 	n.lists = n.lists.filter(l => !l.isArchived)
 	// 	return n
 	// })

src/views/namespaces/NewNamespace.vue

@@ -49,6 +49,7 @@ import NamespaceService from '../../services/namespace'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker.vue'
 import { setTitle } from '@/helpers/setTitle'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 export default defineComponent({
 	name: 'NewNamespace',
@@ -76,7 +77,8 @@ export default defineComponent({
 			this.showError = false
 
 			const namespace = await this.namespaceService.create(this.namespace)
-			this.$store.commit('namespaces/addNamespace', namespace)
+			const namespaceStore = useNamespaceStore()
+			namespaceStore.addNamespace(namespace)
 			this.$message.success({message: this.$t('namespace.create.success')})
 			this.$router.back()
 		},

src/views/namespaces/settings/archive.vue

@@ -22,35 +22,36 @@ export default { name: 'namespace-setting-archive' }
 </script>
 
 <script setup lang="ts">
-import {watch, ref, computed, shallowReactive} from 'vue'
+import {watch, ref, computed, shallowReactive, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 
+import {useNamespaceStore} from '@/stores/namespaces'
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
+import type {INamespace} from '@/modelTypes/INamespace'
 
 const props = defineProps({
 	namespaceId: {
-		type: Number,
+		type: Number as PropType<INamespace['id']>,
 		required: true,
 	},
 })
 
-const store = useStore()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
+const namespaceStore = useNamespaceStore()
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace = ref(new NamespaceModel())
+const namespace = ref<INamespace>(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+		namespace.value = namespaceStore.getNamespaceById(props.namespaceId) || new NamespaceModel()
 
 		// FIXME: ressouce should be loaded in store
 		namespace.value = await namespaceService.get({id: props.namespaceId})
@@ -75,7 +76,7 @@ async function archiveNamespace() {
 			...namespace.value,
 			isArchived,
 		})
-		store.commit('namespaces/setNamespaceById', archivedNamespace)
+		namespaceStore.setNamespaceById(archivedNamespace)
 		success({
 			message: isArchived
 				? t('namespace.archive.success')

src/views/namespaces/settings/delete.vue

@@ -12,7 +12,7 @@
 	</modal>
 </template>
 
-<script lang="ts">	
+<script lang="ts">
 export default { name: 'namespace-setting-delete' }
 </script>
 
@@ -21,11 +21,12 @@ import {ref, computed, watch, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
-import {useStore} from '@/store'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useNamespaceStore} from '@/stores/namespaces'
 import NamespaceModel from '@/models/namespace'
 import NamespaceService from '@/services/namespace'
+import type { INamespace } from '@/modelTypes/INamespace'
 
 const props = defineProps({
 	namespaceId: {
@@ -34,17 +35,17 @@ const props = defineProps({
 	},
 })
 
-const store = useStore()
-const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
+const router = useRouter()
+const namespaceStore = useNamespaceStore()
 
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace = ref(new NamespaceModel())
+const namespace = ref<INamespace>(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+		namespace.value = namespaceStore.getNamespaceById(props.namespaceId) || new NamespaceModel()
 
 		// FIXME: ressouce should be loaded in store
 		namespace.value = await namespaceService.get({id: props.namespaceId})
@@ -61,7 +62,7 @@ const title = computed(() => {
 useTitle(title)
 
 async function deleteNamespace() {
-	await store.dispatch('namespaces/deleteNamespace', namespace.value)
+	await namespaceStore.deleteNamespace(namespace.value)
 	success({message: t('namespace.delete.success')})
 	router.push({name: 'home'})
 }

src/views/namespaces/settings/edit.vue

@@ -57,7 +57,6 @@
 
 <script lang="ts" setup>
 import {nextTick, ref, watch} from 'vue'
-import {useStore} from '@/store'
 import {success} from '@/message'
 import router from '@/router'
 
@@ -70,9 +69,10 @@ import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@/composables/useTitle'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const namespaceStore = useNamespaceStore()
 
 const namespaceService = ref(new NamespaceService())
 const namespace = ref(new NamespaceModel())
@@ -111,7 +111,7 @@ async function loadNamespace() {
 async function save() {
 	const updatedNamespace = await namespaceService.value.update(namespace.value)
 	// Update the namespace in the parent
-	store.commit('namespaces/setNamespaceById', updatedNamespace)
+	namespaceStore.setNamespaceById(updatedNamespace)
 	success({message: t('namespace.edit.success')})
 	router.back()
 }

src/views/tasks/TaskDetailView.vue

@@ -460,8 +460,9 @@ import CreatedUpdated from '@/components/tasks/partials/createdUpdated.vue'
 import { setTitle } from '@/helpers/setTitle'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
-import type { IList } from '@/modelTypes/IList'
+import type {IList} from '@/modelTypes/IList'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 function scrollIntoView(el) {
 	if (!el) {
@@ -582,11 +583,13 @@ export default defineComponent({
 				}
 			}
 
-			if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
+			const namespaceStore = useNamespaceStore()
+
+			if (!namespaceStore.getListAndNamespaceById) {
 				return null
 			}
 
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			return namespaceStore.getListAndNamespaceById(this.task.listId)
 		},
 		canWrite() {
 			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
@@ -752,7 +755,8 @@ export default defineComponent({
 		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			const namespaceStore = useNamespaceStore()
+			await namespaceStore.loadNamespacesIfFavoritesDontExist()
 		},
 		
 		colorIsDark,