feat: port config store to pinia

src/views/About.vue

@@ -34,8 +34,9 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
-import { store } from '@/store'
 import {VERSION as frontendVersion} from '@/version.json'
+import {useConfigStore} from '@/stores/config'
 
-const apiVersion = computed(() => store.state.config.version)
+const configStore = useConfigStore()
+const apiVersion = computed(() => configStore.version)
 </script>

src/views/Home.vue

@@ -72,11 +72,13 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
 import {useListStore} from '@/stores/lists'
+import {useConfigStore} from '@/stores/config'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+const configStore = useConfigStore()
 const namespaceStore = useNamespaceStore()
 const listStore = useListStore()
 const listHistory = computed(() => {
@@ -90,7 +92,7 @@ const listHistory = computed(() => {
 		.filter(l => l !== null)
 })
 
-const migratorsEnabled = computed(() => store.state.config.availableMigrators?.length > 0)
+const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
 const userInfo = computed(() => store.state.auth.info)
 const hasTasks = computed(() => store.state.hasTasks)
 const defaultListId = computed(() => store.state.auth.settings.defaultListId)

src/views/list/settings/background.vue

@@ -106,6 +106,7 @@ import debounce from 'lodash.debounce'
 import BaseButton from '@/components/base/BaseButton.vue'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
+import {useConfigStore} from '@/stores/config'
 
 import BackgroundUnsplashService from '@/services/backgroundUnsplash'
 import BackgroundUploadService from '@/services/backgroundUpload'
@@ -144,9 +145,10 @@ const backgroundUploadService = ref(new BackgroundUploadService())
 const listService = ref(new ListService())
 const listStore = useListStore()
 const namespaceStore = useNamespaceStore()
+const configStore = useConfigStore()
 
-const unsplashBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('unsplash'))
-const uploadBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('upload'))
+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)
 

src/views/list/settings/share.vue

@@ -40,6 +40,7 @@ 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 {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -51,7 +52,9 @@ const title = computed(() => list.value?.title
 useTitle(title)
 
 const store = useStore()
-const linkSharingEnabled = computed(() => store.state.config.linkSharingEnabled)
+const configStore = useConfigStore()
+
+const linkSharingEnabled = computed(() => configStore.linkSharingEnabled)
 const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id === store.state.auth.info.id)
 
 async function loadList(listId: number) {

src/views/migrator/Migrate.vue

@@ -23,17 +23,17 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 
 import {MIGRATORS} from './migrators'
 import {useTitle} from '@/composables/useTitle'
+import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 
 useTitle(() => t('migrate.title'))
 
-const availableMigrators = computed(() => store.state.config.availableMigrators
+const configStore = useConfigStore()
+const availableMigrators = computed(() => configStore.availableMigrators
 	.map((id) => MIGRATORS[id])
 	.filter((item) => Boolean(item)),
 )

src/views/user/Login.vue

@@ -104,7 +104,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
-import {mapState} from 'vuex'
+import {mapState as mapStateVuex} from 'vuex'
+import {mapState} from 'pinia'
 
 import {HTTPFactory} from '@/http-common'
 import {LOADING} from '@/store/mutation-types'
@@ -114,6 +115,7 @@ import {redirectToProvider} from '../../helpers/redirectToProvider'
 import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
 import Password from '@/components/input/password.vue'
 import { setTitle } from '@/helpers/setTitle'
+import {useConfigStore} from '@/stores/config'
 
 export default defineComponent({
 	components: {
@@ -169,13 +171,16 @@ export default defineComponent({
 		hasOpenIdProviders() {
 			return this.openidConnect.enabled && this.openidConnect.providers?.length > 0
 		},
-		...mapState({
-			registrationEnabled: state => state.config.registrationEnabled,
+		...mapStateVuex({
 			loading: LOADING,
 			needsTotpPasscode: state => state.auth.needsTotpPasscode,
 			authenticated: state => state.auth.authenticated,
-			localAuthEnabled: state => state.config.auth.local.enabled,
-			openidConnect: state => state.config.auth.openidConnect,
+		}),
+
+		...mapState(useConfigStore, {
+			registrationEnabled: state => state.registrationEnabled,
+			localAuthEnabled: state => state.auth.local.enabled,
+			openidConnect: state => state.auth.openidConnect,
 		}),
 
 		validateField() {

src/views/user/Settings.vue

@@ -22,13 +22,15 @@ import {computed} from 'vue'
 import { store } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { useTitle } from '@/composables/useTitle'
+import { useConfigStore } from '@/stores/config'
 
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('user.settings.title'))
 
-const totpEnabled = computed(() => store.state.config.totpEnabled)
-const caldavEnabled = computed(() => store.state.config.caldavEnabled)
-const migratorsEnabled = computed(() => store.getters['config/migratorsEnabled'])
+const configStore = useConfigStore()
+const totpEnabled = computed(() => configStore.totpEnabled)
+const caldavEnabled = computed(() => configStore.caldavEnabled)
+const migratorsEnabled = computed(() => configStore.migratorsEnabled)
 const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 
 const navigationItems = computed(() => {

src/views/user/settings/Caldav.vue

@@ -79,6 +79,7 @@ import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import { formatDateShort } from '@/helpers/time/formatDate'
 import type {ICaldavToken} from '@/modelTypes/ICaldavToken'
+import {useConfigStore} from '@/stores/config'
 
 const copy = useCopyToClipboard()
 
@@ -105,8 +106,9 @@ async function deleteToken(token: ICaldavToken) {
 }
 
 const store = useStore()
+const configStore = useConfigStore()
 const username = computed(() => store.state.auth.info?.username)
-const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${username.value}/`)
-const caldavEnabled = computed(() => store.state.config.caldavEnabled)
+const caldavUrl = computed(() => `${configStore.apiBase}/dav/principals/${username.value}/`)
+const caldavEnabled = computed(() => configStore.caldavEnabled)
 const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 </script>

src/views/user/settings/Deletion.vue

@@ -96,6 +96,7 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.deletion.title')} - ${t('user.settings.title')}`)
@@ -105,7 +106,9 @@ const password = ref('')
 const errPasswordRequired = ref(false)
 
 const store = useStore()
-const userDeletionEnabled = computed(() => store.state.config.userDeletionEnabled)
+const configStore = useConfigStore()
+
+const userDeletionEnabled = computed(() => configStore.userDeletionEnabled)
 const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
 
 const passwordInput = ref()

src/views/user/settings/TOTP.vue

@@ -70,7 +70,6 @@ export default { name: 'user-settings-totp' }
 
 <script lang="ts" setup>
 import {computed, ref, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import TotpService from '@/services/totp'
@@ -78,7 +77,8 @@ import TotpModel from '@/models/totp'
 
 import {success} from '@/message'
 
-import { useTitle } from '@/composables/useTitle'
+import {useTitle} from '@/composables/useTitle'
+import {useConfigStore} from '@/stores/config'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.totp.title')} - ${t('user.settings.title')}`)
@@ -92,8 +92,8 @@ const totpConfirmPasscode = ref('')
 const totpDisableForm = ref(false)
 const totpDisablePassword = ref('')
 
-const store = useStore()
-const totpEnabled = computed(() => store.state.config.totpEnabled)
+const configStore = useConfigStore()
+const totpEnabled = computed(() => configStore.totpEnabled)
 
 totpStatus()