feat: port base store to pinia

src/App.vue

@@ -18,7 +18,6 @@
 import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'
@@ -34,16 +33,17 @@ import Ready from '@/components/misc/ready.vue'
 import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
 
+import {useBaseStore} from '@/stores/base'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
 import {useAuthStore} from './stores/auth'
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 const router = useRouter()
 
 useBodyClass('is-touch', isTouchDevice())
-const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
+const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
 
 const authUser = computed(() => authStore.authUser)
 const authLinkShare = computed(() => authStore.authLinkShare)

src/components/home/MenuButton.vue

@@ -1,8 +1,8 @@
 <template>
 	<BaseButton
 		class="menu-show-button"
-		@click="$store.commit('toggleMenu')"
-		@shortkey="() => $store.commit('toggleMenu')"
+		@click="baseStore.toggleMenu()"
+		@shortkey="() => baseStore.toggleMenu()"
 		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
 		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
@@ -11,12 +11,12 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const store = useStore()
-const menuActive = computed(() => store.state.menuActive)
+const baseStore = useBaseStore()
+const menuActive = computed(() => baseStore.menuActive)
 </script>
 
 <style lang="scss" scoped>

src/components/home/TheNavigation.vue

@@ -70,7 +70,7 @@
 						{{ $t('navigation.privacy') }}
 					</dropdown-item>
 					<dropdown-item
-						@click="$store.commit('keyboardShortcutsActive', true)"
+						@click="baseStore.setKeyboardShortcutsActive(true)"
 					>
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
@@ -92,9 +92,7 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from '@/store'
 
-import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import {RIGHTS as Rights} from '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
@@ -107,21 +105,24 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
 import {getListTitle} from '@/helpers/getListTitle'
+
+import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
-const store = useStore()
-const authStore = useAuthStore()
-const configStore = useConfigStore()
+const baseStore = useBaseStore()
+const currentList = computed(() => baseStore.currentList)
+const background = computed(() => baseStore.background)
+const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
+const menuActive = computed(() => baseStore.menuActive)
 
+const authStore = useAuthStore()
 const userInfo = computed(() => authStore.info)
 const userAvatar = computed(() => authStore.avatarUrl)
-const currentList = computed(() => store.state.currentList)
-const background = computed(() => store.state.background)
+
+const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
-const menuActive = computed(() => store.state.menuActive)
 
 const usernameDropdown = ref()
 const listTitle = ref()
@@ -140,7 +141,7 @@ function logout() {
 }
 
 function openQuickActions() {
-	store.commit(QUICK_ACTIONS_ACTIVE, true)
+	baseStore.setQuickActionsActive(true)
 }
 </script>
 

src/components/home/contentAuth.vue

@@ -2,7 +2,7 @@
 	<div class="content-auth">
 		<BaseButton
 			v-if="menuActive"
-			@click="$store.commit('menuActive', false)"
+			@click="baseStore.setMenuActive(false)"
 			class="menu-hide-button d-print-none"
 		>
 			<icon icon="times"/>
@@ -26,7 +26,7 @@
 			>
 				<BaseButton
 					v-if="menuActive"
-					@click="$store.commit('menuActive', false)"
+					@click="baseStore.setMenuActive(false)"
 					class="mobile-overlay d-print-none"
 				/>
 
@@ -61,11 +61,10 @@
 
 <script lang="ts" setup>
 import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
 
-import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import {useLabelStore} from '@/stores/labels'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
@@ -123,20 +122,19 @@ function useRouteWithModal() {
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 
-const store = useStore()
-
-const background = computed(() => store.state.background)
-const blurHash = computed(() => store.state.blurHash)
-const menuActive = computed(() => store.state.menuActive)
+const baseStore = useBaseStore()
+const background = computed(() => baseStore.background)
+const blurHash = computed(() => baseStore.blurHash)
+const menuActive = computed(() => baseStore.menuActive)
 
 function showKeyboardShortcuts() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
+	baseStore.setKeyboardShortcutsActive(true)
 }
 
 const route = useRoute()
 
 // hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
+watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
 
 // FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
@@ -158,7 +156,7 @@ watch(() => route.name as string, (routeName) => {
 			routeName.startsWith('user.settings')
 		)
 	) {
-		store.dispatch(CURRENT_LIST, {list: null})
+		baseStore.handleSetCurrentList({list: null})
 	}
 })
 

src/components/home/contentLinkShare.vue

@@ -24,15 +24,16 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from '@/store'
+
+import {useBaseStore} from '@/stores/base'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
 
-const store = useStore()
-const currentList = computed(() => store.state.currentList)
-const background = computed(() => store.state.background)
-const logoVisible = computed(() => store.state.logoVisible)
+const baseStore = useBaseStore()
+const currentList = computed(() => baseStore.currentList)
+const background = computed(() => baseStore.background)
+const logoVisible = computed(() => baseStore.logoVisible)
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -141,7 +141,6 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from '@/store'
 import draggable from 'zhyswan-vuedraggable'
 import type {SortableEvent} from 'sortablejs'
 
@@ -151,7 +150,6 @@ import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 
-import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
@@ -159,6 +157,8 @@ 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 {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 
@@ -168,10 +168,10 @@ const dragOptions = {
 	ghostClass: 'ghost',
 }
 
-const store = useStore()
+const baseStore = useBaseStore()
 const namespaceStore = useNamespaceStore()
-const currentList = computed(() => store.state.currentList)
-const menuActive = computed(() => store.state.menuActive)
+const currentList = computed(() => baseStore.currentList)
+const menuActive = computed(() => baseStore.menuActive)
 const loading = computed(() => namespaceStore.isLoading)
 
 
@@ -202,7 +202,7 @@ const listStore = useListStore()
 
 function resize() {
 	// Hide the menu by default on mobile
-	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
+	baseStore.setMenuActive(window.innerWidth >= 770)
 }
 
 function toggleLists(namespaceId: INamespace['id']) {
@@ -262,7 +262,7 @@ async function saveListPosition(e: SortableEvent) {
 	)
 
 	try {
-		// create a copy of the list in order to not violate vuex mutations
+		// create a copy of the list in order to not violate pinia manipulation
 		await listStore.updateList({
 			...list,
 			position,

src/components/list/partials/filters.vue

@@ -1,22 +1,25 @@
 <template>
 	<card class="filters has-overflow" :title="hasTitle ? $t('filters.title') : ''">
 		<div class="field is-flex is-flex-direction-column">
-			<fancycheckbox v-model="params.filter_include_nulls" @change="change()">
+			<fancycheckbox
+				v-model="params.filter_include_nulls"
+				@update:model-value="change()"
+			>
 				{{ $t('filters.attributes.includeNulls') }}
 			</fancycheckbox>
 			<fancycheckbox
 				v-model="filters.requireAllFilters"
-				@change="setFilterConcat()"
+				@update:model-value="setFilterConcat()"
 			>
 				{{ $t('filters.attributes.requireAll') }}
 			</fancycheckbox>
-			<fancycheckbox @change="setDoneFilter" v-model="filters.done">
+			<fancycheckbox v-model="filters.done" @update:model-value="setDoneFilter">
 				{{ $t('filters.attributes.showDoneTasks') }}
 			</fancycheckbox>
 			<fancycheckbox
 				v-if="!$route.name.includes('list.kanban') || !$route.name.includes('list.table')"
 				v-model="sortAlphabetically"
-				@change="change()"
+				@update:model-value="change()"
 			>
 				{{ $t('filters.attributes.sortAlphabetically') }}
 			</fancycheckbox>
@@ -43,7 +46,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				>
 					{{ $t('filters.attributes.enablePriority') }}
 				</fancycheckbox>
@@ -59,7 +62,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePercentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
 				</fancycheckbox>

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

@@ -33,18 +33,15 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'
 
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
-const store = useStore()
-
 function close() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+	useBaseStore().setKeyboardShortcutsActive(false)
 }
 </script>
 

src/components/misc/ready.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
+import {useRouter, useRoute} from 'vue-router'
 
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'
@@ -52,13 +52,14 @@ import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
 import {useOnline} from '@/composables/useOnline'
 
-import {useRouter, useRoute} from 'vue-router'
 import {getAuthForRoute} from '@/router'
 
+import {useBaseStore} from '@/stores/base'
+
 const router = useRouter()
 const route = useRoute()
 
-const store = useStore()
+const baseStore = useBaseStore()
 
 const ready = ref(false)
 const online = useOnline()
@@ -68,7 +69,7 @@ const showLoading = computed(() => !ready.value && error.value === '')
 
 async function load() {
 	try {
-		await store.dispatch('loadApp')
+		await baseStore.loadApp()
 		const redirectTo = getAuthForRoute(route)
 		if (typeof redirectTo !== 'undefined') {
 			await router.push(redirectTo)

src/components/quick-actions/quick-actions.vue

@@ -61,7 +61,6 @@ import TeamService from '@/services/team'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
-import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -70,6 +69,8 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useLabelStore} from '@/stores/labels'
@@ -112,8 +113,10 @@ export default defineComponent({
 	},
 	computed: {
 		active() {
-			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+			const active = useBaseStore().quickActionsActive
 			if (!active) {
+				// FIXME: computeds shouldn't have side effects.
+				// create a watcher instead
 				this.reset()
 			}
 			return active
@@ -181,8 +184,7 @@ export default defineComponent({
 		},
 		loading() {
 			return this.taskService.loading ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'namespaces') ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'lists') ||
+				useNamespaceStore().isLoading || useListStore().isLoading ||
 				this.teamService.loading
 		},
 		placeholder() {
@@ -219,7 +221,8 @@ export default defineComponent({
 			return this.$t('quickActions.hint', prefixes)
 		},
 		currentList() {
-			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
+			const currentList = useBaseStore().currentList
+			return Object.keys(currentList).length === 0 ? null : currentList
 		},
 		availableCmds() {
 			const cmds = []
@@ -360,7 +363,7 @@ export default defineComponent({
 			}, 150)
 		},
 		closeQuickActions() {
-			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+			useBaseStore().setQuickActionsActive(false)
 		},
 		doAction(type, item) {
 			switch (type) {

src/components/tasks/gantt-component.vue

@@ -173,6 +173,7 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import {mapState} from 'pinia'
 
 import VueDragResize from 'vue-drag-resize'
 import EditTask from './edit-task.vue'
@@ -182,7 +183,6 @@ import TaskModel from '../../models/task'
 import {PRIORITIES as priorities} from '@/constants/priorities'
 import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
-import {mapState} from 'vuex'
 import {RIGHTS as Rights} from '@/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -190,6 +190,8 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {formatDate} from '@/helpers/time/formatDate'
 
+import {useBaseStore} from '@/stores/base'
+
 export default defineComponent({
 	name: 'GanttChart',
 	components: {
@@ -256,7 +258,7 @@ export default defineComponent({
 	mounted() {
 		this.buildTheGanttChart()
 	},
-	computed: mapState({
+	computed: mapState(useBaseStore, {
 		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {

src/components/tasks/partials/heading.vue

@@ -41,13 +41,13 @@ import {ref, computed, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import ColorBubble from '@/components/misc/colorBubble.vue'
 import Done from '@/components/misc/Done.vue'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+import {useTaskStore} from '@/stores/tasks'
 
 import type {ITask} from '@/modelTypes/ITask'
-import ColorBubble from '@/components/misc/colorBubble.vue'
-import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	task: {

src/components/tasks/partials/singleTaskInList.vue

@@ -35,7 +35,7 @@
 				{{ task.title }}
 			</span>
 
-			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
+			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0" />
 			<user
 				:avatar-size="27"
 				:is-inline="true"
@@ -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 {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 
 export default defineComponent({
@@ -188,10 +189,11 @@ export default defineComponent({
 			return list !== null ? list.hexColor : ''
 		},
 		currentList() {
-			return typeof this.$store.state.currentList === 'undefined' ? {
+			const baseStore = useBaseStore()
+			return typeof baseStore.currentList === 'undefined' ? {
 				id: 0,
 				title: '',
-			} : this.$store.state.currentList
+			} : baseStore.currentList
 		},
 		taskDetailRoute() {
 			return {
@@ -238,8 +240,7 @@ export default defineComponent({
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
 			this.$emit('task-updated', this.task)
-			const namespaceStore = useNamespaceStore()
-			namespaceStore.loadNamespacesIfFavoritesDontExist()
+			useNamespaceStore().loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {

src/helpers/saveListView.ts

@@ -1,5 +1,5 @@
 // Save the current list view to local storage
-// We use local storage and not vuex here to make it persistent across reloads.
+// We use local storage and not a store here to make it persistent across reloads.
 export const saveListView = (listId, routeName) => {
 	if (routeName.includes('settings.')) {
 		return

src/main.ts

@@ -14,8 +14,6 @@ import Notifications from '@kyvg/vue3-notification'
 // PWA
 import './registerServiceWorker'
 
-// Vuex
-import { store, key } from './store'
 // i18n
 import {i18n} from './i18n'
 
@@ -106,8 +104,6 @@ if (window.SENTRY_ENABLED) {
 }
 
 app.use(pinia)
-
-app.use(store, key) // pass the injection key
 app.use(router)
 app.use(i18n)
 

src/models/user.ts

@@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import UserSettingsModel from '@/models/userSettings'
 
-import { AUTH_TYPES, type IUser } from '@/modelTypes/IUser'
+import { AUTH_TYPES, type IUser, type AuthType } from '@/modelTypes/IUser'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 
 export function getAvatarUrl(user: IUser, size = 50) {
@@ -22,7 +22,7 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 	username = ''
 	name = ''
 	exp = 0
-	type = AUTH_TYPES.UNKNOWN
+	type: AuthType = AUTH_TYPES.UNKNOWN
 
 	created: Date
 	updated: Date

src/store/helper.ts

@@ -1,53 +0,0 @@
-import type { ActionContext } from 'vuex'
-import type { StoreDefinition } from 'pinia'
-import {LOADING, LOADING_MODULE} from './mutation-types'
-import type { RootStoreState } from './types'
-
-/**
- * This helper sets the loading state with a 100ms delay to avoid flickering.
- * 
- * @param {*} context The vuex module context.
- * @param {null|String} module The module that is loading. This parameter allows components to listen for specific parts of the application loading.
- * @param {null|function} loadFunc If not null, this function will be executed instead of the default setting loading.
- */
-export function setLoading<State>(
-	context : ActionContext<State, RootStoreState>,
-	module : string | null = null,
-	loadFunc : (() => void) | null = null,
-) {
-	const timeout = setTimeout(() => {
-		if (loadFunc === null) {
-			context.commit(LOADING, true, {root: true})
-			context.commit(LOADING_MODULE, module, {root: true})
-		} else {
-			loadFunc(true)
-		}
-	}, 100)
-	return () => {
-		clearTimeout(timeout)
-		if (loadFunc === null) {
-			context.commit(LOADING, false, {root: true})
-			context.commit(LOADING_MODULE, null, {root: true})
-		} else {
-			loadFunc(false)
-		}
-	}
-}
-
-export const setLoadingPinia = (store: StoreDefinition, loadFunc : ((isLoading: boolean) => void) | null = null) => {
-	const timeout = setTimeout(() => {
-		if (loadFunc === null) {
-			store.isLoading = true
-		} else {
-			loadFunc(true)
-		}
-	}, 100)
-	return () => {
-		clearTimeout(timeout)
-		if (loadFunc === null) {
-			store.isLoading = false
-		} else {
-			loadFunc(false)
-		}
-	}
-}

src/store/mutation-types.ts

@@ -1,12 +0,0 @@
-export const LOADING = 'loading'
-export const LOADING_MODULE = 'loadingModule'
-export const CURRENT_LIST = 'currentList'
-export const HAS_TASKS = 'hasTasks'
-export const MENU_ACTIVE = 'menuActive'
-export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
-export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
-export const BACKGROUND = 'background'
-export const BLUR_HASH = 'blurHash'
-export const LOGO_VISIBLE = 'logoVisible'
-
-export const CONFIG = 'config'

src/store/types.ts

@@ -1,114 +0,0 @@
-import type { IBucket } from '@/modelTypes/IBucket'
-import type { IUserSettings } from '@/modelTypes/IUserSettings'
-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,
-	loadingModule: null,
-	currentList: IList,
-	background: string,
-	blurHash: string,
-	hasTasks: boolean,
-	menuActive: boolean,
-	keyboardShortcutsActive: boolean,
-	quickActionsActive: boolean,
-	logoVisible: boolean,
-}
-
-export interface AttachmentState {
-	attachments: IAttachment[],
-}
-
-export interface AuthState {
-	authenticated: boolean,
-	isLinkShareAuth: boolean,
-	info: IUser | null,
-	needsTotpPasscode: boolean,
-	avatarUrl: string,
-	lastUserInfoRefresh: Date | null,
-	settings: IUserSettings,
-	isLoading: boolean,
-	isLoadingGeneralSettings: boolean
-}
-
-export interface ConfigState {
-	version: string,
-	frontendUrl: string,
-	motd: string,
-	linkSharingEnabled: boolean,
-	maxFileSize: '20MB',
-	registrationEnabled: boolean,
-	availableMigrators: [],
-	taskAttachmentsEnabled: boolean,
-	totpEnabled: boolean,
-	enabledBackgroundProviders: [],
-	legal: {
-		imprintUrl: string,
-		privacyPolicyUrl: string,
-	},
-	caldavEnabled: boolean,
-	userDeletionEnabled: boolean,
-	taskCommentsEnabled: boolean,
-	auth: {
-		local: {
-			enabled: boolean,
-		},
-		openidConnect: {
-			enabled: boolean,
-			redirectUrl: string,
-			providers: [],
-		},
-	},
-}
-
-export interface KanbanState {
-	buckets: IBucket[],
-	listId: IList['id'],
-	bucketLoading: {
-		[id: IBucket['id']]: boolean
-	},
-	taskPagesPerBucket: {
-		[id: IBucket['id']]: number
-	},
-	allTasksLoadedForBucket: {
-		[id: IBucket['id']]: boolean
-	},
-	isLoading: boolean,
-}
-
-export interface LabelState {
-	labels: {
-		[id: ILabel['id']]: ILabel
-	},
-	isLoading: boolean,
-}
-
-export interface ListState {
-	lists: { [id: IList['id']]: IList },
-	isLoading: boolean,
-}
-
-export interface NamespaceState {
-	namespaces: INamespace[]
-	isLoading: boolean,
-}
-
-export interface TaskState {
-	isLoading: boolean,
-}
-
-
-export type StoreState = RootStoreState & {
-	config: ConfigState,
-	auth: AuthState,
-	namespaces: NamespaceState,
-	kanban: KanbanState,
-	tasks: TaskState,
-	lists: ListState,
-	attachments: AttachmentState,
-	labels: LabelState,
-}

src/stores/attachments.ts

@@ -1,9 +1,12 @@
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import {findIndexById} from '@/helpers/utils'
 
-import type {AttachmentState} from '@/store/types'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 
+export interface AttachmentState {
+	attachments: IAttachment[],
+}
+
 export const useAttachmentStore = defineStore('attachment', {
 	state: (): AttachmentState => ({
 		attachments: [],

src/stores/auth.ts

@@ -6,16 +6,27 @@ import {objectToSnakeCase} from '@/helpers/case'
 import UserModel, { getAvatarUrl } from '@/models/user'
 import UserSettingsService from '@/services/userSettings'
 import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
-import {setLoadingPinia} from '@/store/helper'
+import {setLoadingPinia} from '@/stores/helper'
 import {success} from '@/message'
 import {redirectToProvider} from '@/helpers/redirectToProvider'
 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'
+import {useBaseStore} from '@/stores/base'
 import UserSettingsModel from '@/models/userSettings'
-import {store} from '@/store'
+
+export interface AuthState {
+	authenticated: boolean,
+	isLinkShareAuth: boolean,
+	info: IUser | null,
+	needsTotpPasscode: boolean,
+	avatarUrl: string,
+	lastUserInfoRefresh: Date | null,
+	settings: IUserSettings,
+	isLoading: boolean,
+	isLoadingGeneralSettings: boolean
+}
 
 export const useAuthStore = defineStore('auth', {
 	state: () : AuthState => ({
@@ -93,7 +104,8 @@ export const useAuthStore = defineStore('auth', {
 		// Logs a user in with a set of credentials.
 		async login(credentials) {
 			const HTTP = HTTPFactory()
-			store.commit('loading', true)
+			const baseStore = useBaseStore()
+			baseStore.setLoading(true)
 			this.setIsLoading(true)
 
 			// Delete an eventually preexisting old token
@@ -117,7 +129,7 @@ export const useAuthStore = defineStore('auth', {
 
 				throw e
 			} finally {
-				store.commit('loading', false)
+				baseStore.setLoading(false)
 				this.setIsLoading(false)
 			}
 		},
@@ -126,7 +138,8 @@ 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)
+			const baseStore = useBaseStore()
+			baseStore.setLoading(true)
 			this.setIsLoading(true)
 			try {
 				await HTTP.post('register', credentials)
@@ -138,14 +151,15 @@ export const useAuthStore = defineStore('auth', {
 
 				throw e
 			} finally {
-			store.commit('loading', false)
+				baseStore.setLoading(false)
 				this.setIsLoading(false)
 			}
 		},
 
 		async openIdAuth({provider, code}) {
 			const HTTP = HTTPFactory()
-			store.commit('loading', true)
+			const baseStore = useBaseStore()
+			baseStore.setLoading(true)
 			this.setIsLoading(true)
 
 			const data = {
@@ -162,7 +176,7 @@ export const useAuthStore = defineStore('auth', {
 				// Tell others the user is autheticated
 				this.checkAuth()
 			} finally {
-				store.commit('loading', false)
+				baseStore.setLoading(false)
 				this.setIsLoading(false)
 			}
 		},

src/stores/base.ts

@@ -1,40 +1,34 @@
-import type {InjectionKey} from 'vue'
-import {createStore, useStore as baseUseStore, Store} from 'vuex'
+import {defineStore, acceptHMRUpdate} from 'pinia'
 
-import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
-import {
-	BACKGROUND,
-	BLUR_HASH,
-	CURRENT_LIST,
-	HAS_TASKS,
-	KEYBOARD_SHORTCUTS_ACTIVE,
-	LOADING,
-	LOADING_MODULE, LOGO_VISIBLE,
-	MENU_ACTIVE,
-	QUICK_ACTIONS_ACTIVE,
-} from '../store/mutation-types'
+import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import ListModel from '@/models/list'
-
 import ListService from '../services/list'
 import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 
-import type { RootStoreState, StoreState } from '../store/types'
-import pinia from '@/pinia'
 import {useAuthStore} from '@/stores/auth'
+import type {IList} from '@/modelTypes/IList'
 
-export const key: InjectionKey<Store<StoreState>> = Symbol()
+export interface RootStoreState {
+	loading: boolean,
+	loadingModule: null,
 
-// define your own `useStore` composition function
-export function useStore () {
-  return baseUseStore(key)
+	currentList: IList,
+	background: string,
+	blurHash: string,
+
+	hasTasks: boolean,
+	menuActive: boolean,
+	keyboardShortcutsActive: boolean,
+	quickActionsActive: boolean,
+	logoVisible: boolean,
 }
 
-export const store = createStore<RootStoreState>({
-	strict: import.meta.env.DEV,
-	state: () => ({
+export const useBaseStore = defineStore('base', {
+	state: () : RootStoreState => ({
 		loading: false,
 		loadingModule: null,
+
 		// This is used to highlight the current list in menu for all list related views
 		currentList: new ListModel({
 			id: 0,
@@ -42,76 +36,94 @@ export const store = createStore<RootStoreState>({
 		}),
 		background: '',
 		blurHash: '',
+
 		hasTasks: false,
 		menuActive: true,
 		keyboardShortcutsActive: false,
 		quickActionsActive: false,
 		logoVisible: true,
 	}),
-	mutations: {
-		[LOADING](state, loading) {
-			state.loading = loading
+
+	actions: {
+		setLoading(loading: boolean) {
+			this.loading = loading
 		},
-		[LOADING_MODULE](state, module) {
-			state.loadingModule = module
+
+		setLoadingModule(module) {
+			this.loadingModule = module
 		},
-		[CURRENT_LIST](state, currentList) {
+
+		// FIXME: same action as mutation name
+		setCurrentList(currentList: IList) {
 			// Server updates don't return the right. Therefore, the right is reset after updating the list which is
 			// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
 			// when updating the list in global state.
-			if (typeof state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
-				currentList.maxRight = state.currentList.maxRight
+			if (
+				typeof this.currentList.maxRight !== 'undefined' &&
+				(
+					typeof currentList.maxRight === 'undefined' ||
+					currentList.maxRight === null
+				)
+			) {
+				currentList.maxRight = this.currentList.maxRight
 			}
-			state.currentList = currentList
+			this.currentList = currentList
 		},
-		[HAS_TASKS](state, hasTasks) {
-			state.hasTasks = hasTasks
-		},
-		[MENU_ACTIVE](state, menuActive) {
-			state.menuActive = menuActive
-		},
-		toggleMenu(state) {
-			state.menuActive = !state.menuActive
-		},
-		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
-			state.keyboardShortcutsActive = active
-		},
-		[QUICK_ACTIONS_ACTIVE](state, active) {
-			state.quickActionsActive = active
-		},
-		[BACKGROUND](state, background) {
-			state.background = background
-		},
-		[BLUR_HASH](state, blurHash) {
-			state.blurHash = blurHash
-		},
-		[LOGO_VISIBLE](state, visible: boolean) {
-			state.logoVisible = visible
-		},
-	},
-	actions: {
-		async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) {
 
+		setHasTasks(hasTasks: boolean) {
+			this.hasTasks = hasTasks
+		},
+
+		setMenuActive(menuActive: boolean) {
+			this.menuActive = menuActive
+		},
+
+		toggleMenu() {
+			this.menuActive = !this.menuActive
+		},
+
+		setKeyboardShortcutsActive(active: boolean) {
+			this.keyboardShortcutsActive = active
+		},
+
+		setQuickActionsActive(active: boolean) {
+			this.quickActionsActive = active
+		},
+
+		setBackground(background: string) {
+			this.background = background
+		},
+
+		setBlurHash(blurHash: string) {
+			this.blurHash = blurHash
+		},
+
+		setLogoVisible(visible: boolean) {
+			this.logoVisible = visible
+		},
+
+		// FIXME: update all actions handleSetCurrentList
+		async handleSetCurrentList({list, forceUpdate = false}) {
 			if (list === null) {
-				commit(CURRENT_LIST, {})
-				commit(BACKGROUND, null)
-				commit(BLUR_HASH, null)
+				this.setCurrentList({})
+				this.setBackground('')
+				this.setBlurHash('')
 				return
 			}
 
 			// The forceUpdate parameter is used only when updating a list background directly because in that case 
 			// the current list stays the same, but we want to show the new background right away.
-			if (list.id !== state.currentList.id || forceUpdate) {
+			if (list.id !== this.currentList.id || forceUpdate) {
 				if (list.backgroundInformation) {
 					try {
 						const blurHash = await getBlobFromBlurHash(list.backgroundBlurHash)
 						if (blurHash) {
-							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
+							this.setBlurHash(window.URL.createObjectURL(blurHash))
 						}
 
 						const listService = new ListService()
 						const background = await listService.background(list)
-						commit(BACKGROUND, background)
+						this.setBackground(background)
 					} catch (e) {
 						console.error('Error getting background image for list', list.id, e)
 					}
@@ -119,16 +131,21 @@ export const store = createStore<RootStoreState>({
 			}
 
 			if (typeof list.backgroundInformation === 'undefined' || list.backgroundInformation === null) {
-				commit(BACKGROUND, null)
-				commit(BLUR_HASH, null)
+				this.setBackground('')
+				this.setBlurHash('')
 			}
 
-			commit(CURRENT_LIST, list)
+			this.setCurrentList(list)
 		},
+
 		async loadApp() {
 			await checkAndSetApiUrl(window.API_URL)
-			const authStore = useAuthStore(pinia)
-			await authStore.checkAuth()
+			await useAuthStore().checkAuth()
 		},
 	},
 })
+
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useBaseStore, import.meta.hot))
+}

src/stores/config.ts

@@ -1,10 +1,38 @@
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import {parseURL} from 'ufo'
 
-import {CONFIG} from '../store/mutation-types'
 import {HTTPFactory} from '@/http-common'
 import {objectToCamelCase} from '@/helpers/case'
-import type {ConfigState} from '@/store/types'
+
+export interface ConfigState {
+	version: string,
+	frontendUrl: string,
+	motd: string,
+	linkSharingEnabled: boolean,
+	maxFileSize: '20MB',
+	registrationEnabled: boolean,
+	availableMigrators: [],
+	taskAttachmentsEnabled: boolean,
+	totpEnabled: boolean,
+	enabledBackgroundProviders: [],
+	legal: {
+		imprintUrl: string,
+		privacyPolicyUrl: string,
+	},
+	caldavEnabled: boolean,
+	userDeletionEnabled: boolean,
+	taskCommentsEnabled: boolean,
+	auth: {
+		local: {
+			enabled: boolean,
+		},
+		openidConnect: {
+			enabled: boolean,
+			redirectUrl: string,
+			providers: [],
+		},
+	},
+}
 
 export const useConfigStore = defineStore('config', {
 	state: (): ConfigState => ({
@@ -45,13 +73,13 @@ export const useConfigStore = defineStore('config', {
 		},
 	},
 	actions: {
-		[CONFIG](config: ConfigState) {
+		setConfig(config: ConfigState) {
 			Object.assign(this, config)
 		},
 		async update() {
 			const HTTP = HTTPFactory()
 			const {data: config} = await HTTP.get('info')
-			this[CONFIG](objectToCamelCase(config))
+			this.setConfig(objectToCamelCase(config))
 			return config
 		},
 	},

src/stores/helper.ts

@@ -0,0 +1,19 @@
+import type { StoreDefinition } from 'pinia'
+
+export const setLoadingPinia = (store: StoreDefinition, loadFunc : ((isLoading: boolean) => void) | null = null) => {
+	const timeout = setTimeout(() => {
+		if (loadFunc === null) {
+			store.isLoading = true
+		} else {
+			loadFunc(true)
+		}
+	}, 100)
+	return () => {
+		clearTimeout(timeout)
+		if (loadFunc === null) {
+			store.isLoading = false
+		} else {
+			loadFunc(false)
+		}
+	}
+}

src/stores/kanban.ts

@@ -5,10 +5,11 @@ import {findById, findIndexById} from '@/helpers/utils'
 import {i18n} from '@/i18n'
 import {success} from '@/message'
 
-import BucketService from '../services/bucket'
-import {setLoadingPinia} from '@/store/helper'
+import BucketService from '@/services/bucket'
 import TaskCollectionService from '@/services/taskCollection'
-import type { KanbanState } from '@/store/types'
+
+import {setLoadingPinia} from '@/stores/helper'
+
 import type { ITask } from '@/modelTypes/ITask'
 import type { IList } from '@/modelTypes/IList'
 import type { IBucket } from '@/modelTypes/IBucket'
@@ -37,6 +38,21 @@ const addTaskToBucketAndSort = (state: KanbanState, task: ITask) => {
 	state.buckets[bucketIndex].tasks.sort((a, b) => a.kanbanPosition > b.kanbanPosition ? 1 : -1)
 }
 
+export interface KanbanState {
+	buckets: IBucket[],
+	listId: IList['id'],
+	bucketLoading: {
+		[id: IBucket['id']]: boolean
+	},
+	taskPagesPerBucket: {
+		[id: IBucket['id']]: number
+	},
+	allTasksLoadedForBucket: {
+		[id: IBucket['id']]: boolean
+	},
+	isLoading: boolean,
+}
+
 /**
  * This store is intended to hold the currently active kanban view.
  * It should hold only the current buckets.

src/stores/labels.ts

@@ -4,7 +4,7 @@ import LabelService from '@/services/label'
 import {success} from '@/message'
 import {i18n} from '@/i18n'
 import {createNewIndexer} from '@/indexes'
-import {setLoadingPinia} from '@/store/helper'
+import {setLoadingPinia} from '@/stores/helper'
 import type {ILabel} from '@/modelTypes/ILabel'
 
 const {add, remove, update, search} = createNewIndexer('labels', ['title', 'description'])
@@ -20,7 +20,12 @@ async function getAllLabels(page = 1): Promise<ILabel[]> {
 	}
 }
 
-import type {LabelState} from '@/store/types'
+export interface LabelState {
+	labels: {
+		[id: ILabel['id']]: ILabel
+	},
+	isLoading: boolean,
+}
 
 export const useLabelStore = defineStore('label', {
 	state: () : LabelState => ({

src/stores/lists.ts

@@ -3,12 +3,11 @@ import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useI18n} from 'vue-i18n'
 
 import ListService from '@/services/list'
-import {setLoadingPinia} from '@/store/helper'
+import {setLoadingPinia} from '@/stores/helper'
 import {removeListFromHistory} from '@/modules/listHistory'
 import {createNewIndexer} from '@/indexes'
 import {useNamespaceStore} from './namespaces'
 
-import type {ListState} from '@/store/types'
 import type {IList} from '@/modelTypes/IList'
 
 import type {MaybeRef} from '@vueuse/core'
@@ -20,6 +19,11 @@ const {add, remove, search, update} = createNewIndexer('lists', ['title', 'descr
 
 const FavoriteListsNamespace = -2
 
+export interface ListState {
+	lists: { [id: IList['id']]: IList },
+	isLoading: boolean,
+}
+
 export const useListStore = defineStore('list', {
 	state: () : ListState => ({
 		isLoading: false,
@@ -113,7 +117,7 @@ export const useListStore = defineStore('list', {
 				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
+				// in order to not create a manipulation in pinia store we have to create a new copy
 				const newList = {
 					...list,
 					namespaceId: FavoriteListsNamespace,

src/stores/namespaces.ts

@@ -1,15 +1,19 @@
 import {defineStore, acceptHMRUpdate} from 'pinia'
 
 import NamespaceService from '../services/namespace'
-import {setLoadingPinia} from '@/store/helper'
+import {setLoadingPinia} from '@/stores/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 interface NamespaceState {
+	namespaces: INamespace[]
+	isLoading: boolean,
+}
+
 export const useNamespaceStore = defineStore('namespace', {
 	state: (): NamespaceState => ({
 		isLoading: false,

src/stores/tasks.ts

@@ -7,8 +7,7 @@ import TaskAssigneeService from '@/services/taskAssignee'
 import LabelTaskService from '@/services/labelTask'
 import UserService from '@/services/user'
 
-import {HAS_TASKS} from '../store/mutation-types'
-import {setLoadingPinia} from '../store/helper'
+import {playPop} from '@/helpers/playPop'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {parseTaskText} from '@/modules/parseTaskText'
 
@@ -24,13 +23,12 @@ import type {IUser} from '@/modelTypes/IUser'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {IList} from '@/modelTypes/IList'
 
-import type {TaskState} from '@/store/types'
+import {setLoadingPinia} from '@/stores/helper'
+import {useBaseStore} from '@/stores/base'
 import {useLabelStore} from '@/stores/labels'
 import {useListStore} from '@/stores/lists'
 import {useAttachmentStore} from '@/stores/attachments'
 import {useKanbanStore} from '@/stores/kanban'
-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) {
@@ -40,10 +38,13 @@ function findPropertyByValue(object, key, value) {
 }
 
 // Check if the user exists in the search results
-function validateUser(users: IUser[], username: IUser['username']) {
-	return findPropertyByValue(users, 'username', username) ||
-		findPropertyByValue(users, 'name', username) ||
-		findPropertyByValue(users, 'email', username)
+function validateUser(
+	users: IUser[],
+	query: IUser['username'] | IUser['name'] | IUser['email'],
+) {
+	return findPropertyByValue(users, 'username', query) ||
+		findPropertyByValue(users, 'name', query) ||
+		findPropertyByValue(users, 'email', query)
 }
 
 // Check if the label exists
@@ -77,6 +78,9 @@ async function findAssignees(parsedTaskAssignees: string[]) {
 	return validatedUsers.filter((item) => Boolean(item))
 }
 
+export interface TaskState {
+	isLoading: boolean,
+}
 
 export const useTaskStore = defineStore('task', {
 	state: () : TaskState => ({
@@ -89,7 +93,7 @@ export const useTaskStore = defineStore('task', {
 			const cancel = setLoadingPinia(this)
 			try {
 				const tasks = await taskService.getAll({}, params)
-				store.commit(HAS_TASKS, tasks.length > 0)
+				useBaseStore().setHasTasks(tasks.length > 0)
 				return tasks
 			} finally {
 				cancel()

src/types/shims-vue.d.ts

@@ -1,30 +0,0 @@
-// https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support
-import { Store } from 'vuex'
-
-import type {
-	RootStoreState,
-	AttachmentState,
-	AuthState,
-	ConfigState,
-	KanbanState,
-	LabelState,
-	ListState,
-	NamespaceState,
-	TaskState,
-} from '@/store/types'
-
-declare module '@vue/runtime-core' {
-
-  interface ComponentCustomProperties {
-    $store: Store<RootStoreState & {
-			config: ConfigState,
-			auth: AuthState,
-			namespaces: NamespaceState,
-			kanban: KanbanState,
-			tasks: TaskState,
-			lists: ListState,
-			attachments: AttachmentState,
-			labels: LabelState,
-		}>
-  }
-}

src/views/Home.vue

@@ -60,7 +60,6 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
 
 import Message from '@/components/misc/message.vue'
 import ShowTasks from '@/views/tasks/ShowTasks.vue'
@@ -71,18 +70,23 @@ import {getHistory} from '@/modules/listHistory'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useConfigStore} from '@/stores/config'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useAuthStore} from '@/stores/auth'
+import {useTaskStore} from '@/stores/tasks'
 
 const welcome = useDateTimeSalutation()
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 const configStore = useConfigStore()
 const namespaceStore = useNamespaceStore()
 const listStore = useListStore()
+const taskStore = useTaskStore()
+
 const listHistory = computed(() => {
 	// If we don't check this, it tries to load the list background right after logging out	
 	if(!authStore.authenticated) {
@@ -96,15 +100,15 @@ const listHistory = computed(() => {
 
 const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
 const userInfo = computed(() => authStore.info)
-const hasTasks = computed(() => store.state.hasTasks)
+const hasTasks = computed(() => baseStore.hasTasks)
 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 loading = computed(() => taskStore.isLoading)
 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?)
+// FIXME: Should use pinia (somehow?)
 const showTasksKey = ref(0)
 
 function updateTaskList() {

src/views/filters/FilterEdit.vue

@@ -54,11 +54,9 @@
 <script setup lang="ts">
 import {ref, shallowRef, computed, watch, unref } from 'vue'
 import {useRouter, useRoute} from 'vue-router'
-import {useStore} from '@/store'
 import {success} from '@/message'
 import {useI18n} from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {default as Editor} from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -70,9 +68,12 @@ import SavedFilterService from '@/services/savedFilter'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import type {IList} from '@/modelTypes/IList'
+
+import {useBaseStore} from '@/stores/base'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
+const baseStore = useBaseStore()
 const namespaceStore = useNamespaceStore()
 
 function useSavedFilter(listId: MaybeRef<IList['id']>) {
@@ -115,7 +116,6 @@ function useSavedFilter(listId: MaybeRef<IList['id']>) {
 }
 
 const route = useRoute()
-const store = useStore()
 const listId =	computed(() => Number(route.params.listId as string))
 
 const {
@@ -129,7 +129,7 @@ const router = useRouter()
 
 async function saveSavedFilter() {
 	await save()
-	await store.dispatch(CURRENT_LIST, {list: filter})
+	await baseStore.setCurrentList({list: filter})
 	router.back()
 }
 </script>

src/views/list/ListKanban.vue

@@ -227,10 +227,9 @@
 import {defineComponent} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
 import cloneDeep from 'lodash.clonedeep'
+import {mapState} from 'pinia'
 
 import BucketModel from '../../models/bucket'
-import {mapState as mapStateVuex} from 'vuex'
-import {mapState} from 'pinia'
 import {RIGHTS as Rights} from '@/constants/rights'
 import ListWrapper from './ListWrapper.vue'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
@@ -240,6 +239,8 @@ 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 {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 import {useKanbanStore} from '@/stores/kanban'
 
@@ -343,7 +344,7 @@ export default defineComponent({
 				],
 			}
 		},
-		...mapStateVuex({
+		...mapState(useBaseStore, {
 			canWrite: state => state.currentList.maxRight > Rights.READ,
 			list: state => state.currentList,
 		}),
@@ -430,7 +431,7 @@ export default defineComponent({
 			const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
 			this.taskUpdating[task.id] = true
 
-			const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
+			const newTask = cloneDeep(task) // cloning the task to avoid pinia store manipulation
 			newTask.bucketId = newBucket.id
 			newTask.kanbanPosition = calculateItemPosition(
 				taskBefore !== null ? taskBefore.kanbanPosition : null,
@@ -444,7 +445,7 @@ export default defineComponent({
 				// Make sure the first and second task don't both get position 0 assigned
 				if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
 					const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
-					const newTaskAfter = cloneDeep(taskAfter) // cloning the task to avoid vuex store mutations
+					const newTaskAfter = cloneDeep(taskAfter) // cloning the task to avoid pinia store manipulation
 					newTaskAfter.bucketId = newBucket.id
 					newTaskAfter.kanbanPosition = calculateItemPosition(
 						0,

src/views/list/ListList.vue

@@ -154,13 +154,13 @@ import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
 
-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'
+
+import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 
 import type {IList} from '@/modelTypes/IList'
@@ -238,8 +238,8 @@ const firstNewPosition = computed(() => {
 })
 
 const taskStore = useTaskStore()
-const store = useStore()
-const list = computed(() => store.state.currentList)
+const baseStore = useBaseStore()
+const list = computed(() => baseStore.currentList)
 
 const canWrite = computed(() => {
 	return list.value.maxRight > Rights.READ && list.value.id > 0
@@ -293,7 +293,7 @@ function updateTaskList(task: ITask) {
 		]
 	}
 
-	store.commit(HAS_TASKS, true)
+	baseStore.setHasTasks(true)
 }
 
 function editTask(id: ITask['id']) {

src/views/list/ListWrapper.vue

@@ -55,12 +55,11 @@ import Message from '@/components/misc/message.vue'
 import ListModel from '@/models/list'
 import ListService from '@/services/list'
 
-import {BACKGROUND, BLUR_HASH, CURRENT_LIST} from '@/store/mutation-types'
-
 import {getListTitle} from '@/helpers/getListTitle'
 import {saveListToHistory} from '@/modules/listHistory'
 import {useTitle} from '@/composables/useTitle'
-import {useStore} from '@/store'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useKanbanStore} from '@/stores/kanban'
 
@@ -76,20 +75,20 @@ const props = defineProps({
 })
 
 const route = useRoute()
-const store = useStore()
 
+const baseStore = useBaseStore()
 const kanbanStore = useKanbanStore()
 const listStore = useListStore()
 const listService = ref(new ListService())
 const loadedListId = ref(0)
 
 const currentList = computed(() => {
-	return typeof store.state.currentList === 'undefined' ? {
+	return typeof baseStore.currentList === 'undefined' ? {
 		id: 0,
 		title: '',
 		isArchived: false,
 		maxRight: null,
-	} : store.state.currentList
+	} : baseStore.currentList
 })
 
 // watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
@@ -141,16 +140,16 @@ async function loadList(listIdToLoad: number) {
 	loadedListId.value = 0
 	const listFromStore = listStore.getListById(listData.id)
 	if (listFromStore !== null) {
-		store.commit(BACKGROUND, null)
-		store.commit(BLUR_HASH, null)
-		store.dispatch(CURRENT_LIST, {list: listFromStore})
+		baseStore.setBackground(null)
+		baseStore.setBlurHash(null)
+		baseStore.handleSetCurrentList({list: listFromStore})
 	}
 
 	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
 	const list = new ListModel(listData)
 	try {
 		const loadedList = await listService.value.get(list)
-		await store.dispatch(CURRENT_LIST, {list: loadedList})
+		await baseStore.handleSetCurrentList({list: loadedList})
 	} finally {
 		loadedListId.value = props.listId
 	}

src/views/list/settings/archive.vue

@@ -17,16 +17,16 @@ export default {name: 'list-setting-archive'}
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from '@/store'
 import {useRouter, useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
-import { success } from '@/message'
-import { useTitle } from '@/composables/useTitle'
-import { useListStore } from '@/stores/lists'
+import {success} from '@/message'
+import {useTitle} from '@/composables/useTitle'
+
+import {useBaseStore} from '@/stores/base'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const listStore = useListStore()
 const router = useRouter()
 const route = useRoute()
@@ -40,7 +40,7 @@ async function archiveList() {
 			...list.value,
 			isArchived: !list.value.isArchived,
 		})
-		store.commit('currentList', newList)
+		useBaseStore().setCurrentList(newList)
 		success({message: t('list.archive.success')})
 	} finally {
 		router.back()

src/views/list/settings/background.vue

@@ -100,10 +100,11 @@ export default { name: 'list-setting-background' }
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import debounce from 'lodash.debounce'
 import BaseButton from '@/components/base/BaseButton.vue'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useConfigStore} from '@/stores/config'
@@ -115,7 +116,6 @@ import type BackgroundImageModel from '@/models/backgroundImage'
 
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 import {useTitle} from '@/composables/useTitle'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
 import CreateEdit from '@/components/misc/create-edit.vue'
 import {success} from '@/message'
@@ -123,7 +123,7 @@ import {success} from '@/message'
 const SEARCH_DEBOUNCE = 300
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const baseStore = useBaseStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -149,8 +149,8 @@ const configStore = useConfigStore()
 
 const unsplashBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('unsplash'))
 const uploadBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('upload'))
-const currentList = computed(() => store.state.currentList)
-const hasBackground = computed(() => store.state.background !== null)
+const currentList = computed(() => baseStore.currentList)
+const hasBackground = computed(() => baseStore.background !== null)
 
 // Show the default collection of backgrounds
 newBackgroundSearch()
@@ -188,8 +188,11 @@ async function setBackground(backgroundId: string) {
 		return
 	}
 
-	const list = await backgroundService.update({id: backgroundId, listId: route.params.listId})
-	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
+	const list = await backgroundService.update({
+		id: backgroundId,
+		listId: route.params.listId,
+	})
+	await baseStore.handleSetCurrentList({list, forceUpdate: true})
 	namespaceStore.setListInNamespaceById(list)
 	listStore.setList(list)
 	success({message: t('list.background.success')})
@@ -201,8 +204,11 @@ async function uploadBackground() {
 		return
 	}
 
-	const list = await backgroundUploadService.value.create(route.params.listId, backgroundUploadInput.value?.files[0])
-	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
+	const list = await backgroundUploadService.value.create(
+		route.params.listId,
+		backgroundUploadInput.value?.files[0],
+	)
+	await baseStore.handleSetCurrentList({list, forceUpdate: true})
 	namespaceStore.setListInNamespaceById(list)
 	listStore.setList(list)
 	success({message: t('list.background.success')})
@@ -210,7 +216,7 @@ async function uploadBackground() {
 
 async function removeBackground() {
 	const list = await listService.value.removeBackground(currentList.value)
-	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
+	await baseStore.handleSetCurrentList({list, forceUpdate: true})
 	namespaceStore.setListInNamespaceById(list)
 	listStore.setList(list)
 	success({message: t('list.background.removeSuccess')})

src/views/list/settings/edit.vue

@@ -72,17 +72,17 @@ export default { name: 'list-setting-edit' }
 <script setup lang="ts">
 import type {PropType} from 'vue'
 import {useRouter} from 'vue-router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/colorPicker.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
 
-import {CURRENT_LIST} from '@/store/mutation-types'
 import type {IList} from '@/modelTypes/IList'
 
+import {useBaseStore} from '@/stores/base'
 import {useList} from '@/stores/lists'
+
 import {useTitle} from '@/composables/useTitle'
 
 const props = defineProps({
@@ -93,7 +93,6 @@ const props = defineProps({
 })
 
 const router = useRouter()
-const store = useStore()
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -103,7 +102,7 @@ useTitle(() => list?.title ? t('list.edit.title', {list: list.title}) : '')
 
 async function save() {
 	await saveList()
-	await store.dispatch(CURRENT_LIST, {list})
+	await useBaseStore().handleSetCurrentList({list})
 	router.back()
 }
 </script>

src/views/list/settings/share.vue

@@ -28,18 +28,18 @@ export default {name: 'list-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 ListService from '@/services/list'
 import ListModel from '@/models/list'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
 import CreateEdit from '@/components/misc/create-edit.vue'
 import LinkSharing from '@/components/sharing/linkSharing.vue'
 import userTeam from '@/components/sharing/userTeam.vue'
+
+import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
@@ -52,7 +52,6 @@ const title = computed(() => list.value?.title
 )
 useTitle(title)
 
-const store = useStore()
 const authStore = useAuthStore()
 const configStore = useConfigStore()
 
@@ -62,7 +61,7 @@ const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id
 async function loadList(listId: number) {
 	const listService = new ListService()
 	const newList = await listService.get(new ListModel({id: listId}))
-	await store.dispatch(CURRENT_LIST, {list: newList})
+	await useBaseStore().handleSetCurrentList({list: newList})
 	list.value = newList
 }
 

src/views/namespaces/ListNamespaces.vue

@@ -71,7 +71,6 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import ListCard from '@/components/list/partials/list-card.vue'
@@ -79,16 +78,18 @@ 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 {useBaseStore} from '@/stores/base'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n()
-const store = useStore()
+const baseStore = useBaseStore()
 const namespaceStore = useNamespaceStore()
 
 useTitle(() => t('namespace.title'))
 const showArchived = useStorage('showArchived', false)
 
-const loading = computed(() => store.state.loading)
+const loading = computed(() => baseStore.loading) // FIXME: shouldn't this reference the namespace store?
 const namespaces = computed(() => {
 	return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
 	// return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {

src/views/sharing/LinkSharingAuth.vue

@@ -34,21 +34,21 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 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 {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(t('sharing.authenticating'))
 
 function useAuth() {
-	const store = useStore()
+	const baseStore = useBaseStore()
 	const authStore = useAuthStore()
 	const route = useRoute()
 	const router = useRouter()
@@ -81,7 +81,7 @@ function useAuth() {
 			const logoVisible = route.query.logoVisible
 				? route.query.logoVisible === 'true'
 				: true
-			store.commit(LOGO_VISIBLE, logoVisible)
+			baseStore.setLogoVisible(logoVisible)
 
 			const view = route.query.view && Object.values(LIST_VIEWS).includes(route.query.view as ListView)
 				? route.query.view

src/views/tasks/ShowTasks.vue

@@ -45,7 +45,6 @@
 
 <script setup lang="ts">
 import {computed, ref, watchEffect} from 'vue'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -56,13 +55,11 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import SingleTaskInList from '@/components/tasks/partials/singleTaskInList.vue'
 import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
 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'
 import {useTaskStore} from '@/stores/tasks'
 
-const store = useStore()
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
 const route = useRoute()
@@ -109,7 +106,7 @@ const pageTitle = computed(() => {
 })
 const hasTasks = computed(() => tasks.value && tasks.value.length > 0)
 const userAuthenticated = computed(() => authStore.authenticated)
-const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
+const loading = computed(() => taskStore.isLoading)
 
 interface dateStrings {
 	dateFrom: string,

src/views/tasks/TaskDetailView.vue

@@ -452,7 +452,6 @@ import heading from '@/components/tasks/partials/heading.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import {CURRENT_LIST} from '@/store/mutation-types'
 
 import {uploadFile} from '@/helpers/attachments'
 import ChecklistSummary from '../../components/tasks/partials/checklist-summary.vue'
@@ -462,6 +461,7 @@ import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
 import type {IList} from '@/modelTypes/IList'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useBaseStore} from '@/stores/base'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useAttachmentStore} from '@/stores/attachments'
 import {useTaskStore} from '@/stores/tasks'
@@ -561,7 +561,7 @@ export default defineComponent({
 			handler(parent) {
 				const parentList = parent !== null ? parent.list : null
 				if (parentList !== null) {
-					this.$store.dispatch(CURRENT_LIST, {list: parentList})
+					useBaseStore().handleSetCurrentList({list: parentList})
 				}
 			},
 			immediate: true,
@@ -576,7 +576,7 @@ export default defineComponent({
 	},
 	computed: {
 		currentList() {
-			return this.$store.state[CURRENT_LIST]
+			return useBaseStore().currentList
 		},
 		parent() {
 			if (!this.task.listId) {

src/views/user/Login.vue

@@ -68,7 +68,7 @@
 
 			<x-button
 				@click="submit"
-				:loading="loading"
+				:loading="isLoading"
 				tabindex="4"
 			>
 				{{ $t('user.auth.login') }}
@@ -104,17 +104,17 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
-import {mapState as mapStateVuex} from 'vuex'
 import {mapState} from 'pinia'
 
 import {HTTPFactory} from '@/http-common'
-import {LOADING} from '@/store/mutation-types'
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
-import { setTitle } from '@/helpers/setTitle'
+import {setTitle} from '@/helpers/setTitle'
+
+import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
@@ -172,8 +172,8 @@ export default defineComponent({
 		hasOpenIdProviders() {
 			return this.openidConnect.enabled && this.openidConnect.providers?.length > 0
 		},
-		...mapStateVuex({
-			loading: LOADING,
+		...mapState(useBaseStore, {
+			isLoading: state => state.loading,
 		}),
 
 		...mapState(useAuthStore, {
@@ -197,11 +197,11 @@ export default defineComponent({
 	methods: {
 		setLoading() {
 			const timeout = setTimeout(() => {
-				this.loading = true
+				this.isLoading = true
 			}, 100)
 			return () => {
 				clearTimeout(timeout)
-				this.loading = false
+				this.isLoading = false
 			}
 		},
 

src/views/user/OpenIdAuth.vue

@@ -15,13 +15,14 @@ export default { name: 'Auth' }
 
 <script setup lang="ts">
 import {ref, computed, onMounted} from 'vue'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import {getErrorText} from '@/message'
 import Message from '@/components/misc/message.vue'
 import {clearLastVisited, getLastVisited} from '@/helpers/saveLastVisited'
+
+import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
 const {t} = useI18n({useScope: 'global'})
@@ -29,10 +30,10 @@ const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 const route = useRoute()
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 
-const loading = computed(() => store.state.loading)
+const loading = computed(() => baseStore.loading)
 const errorMessage = ref('')
 
 async function authenticateWithCode() {

src/views/user/Register.vue

@@ -50,7 +50,7 @@
 			</div>
 
 			<x-button
-				:loading="loading"
+				:loading="isLoading"
 				id="register-submit"
 				@click="submit"
 				class="mr-2"
@@ -73,12 +73,14 @@ import {useDebounceFn} from '@vueuse/core'
 import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
 
 import router from '@/router'
-import {store} from '@/store'
 import Message from '@/components/misc/message.vue'
 import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/password.vue'
+
+import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 
 // FIXME: use the `beforeEnter` hook of vue-router
@@ -95,7 +97,7 @@ const credentials = reactive({
 	password: '',
 })
 
-const loading = computed(() => store.state.loading)
+const isLoading = computed(() => baseStore.loading)
 const errorMessage = ref('')
 const validatePasswordInitially = ref(false)
 

src/views/user/settings/General.vue

@@ -159,7 +159,6 @@ export default defineComponent({
 <script setup lang="ts">
 import {computed, watch, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {PrefixMode} from '@/modules/parseTaskText'
 
@@ -172,6 +171,8 @@ import {createRandomID} from '@/helpers/randomId'
 import {success} from '@/message'
 import {AuthenticatedHTTPFactory} from '@/http-common'
 
+import {useBaseStore} from '@/stores/base'
+
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useTitle} from '@/composables/useTitle'
 import {objectIsEmpty} from '@/helpers/objectIsEmpty'
@@ -227,7 +228,7 @@ function getPlaySoundWhenDoneSetting() {
 const playSoundWhenDone = ref(getPlaySoundWhenDoneSetting())
 const quickAddMagicMode = ref(getQuickAddMagicMode())
 
-const store = useStore()
+const baseStore = useBaseStore()
 const authStore = useAuthStore()
 const settings = ref({...authStore.settings})
 const id = ref(createRandomID())
@@ -256,7 +257,7 @@ const defaultList = computed({
 		settings.value.defaultListId = l ? l.id : DEFAULT_LIST_ID
 	},
 })
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'general-settings')
+const loading = computed(() => baseStore.loading && baseStore.loadingModule === 'general-settings')
 
 watch(
 	playSoundWhenDone,