refactor: reflect other settings changes

app/src/App.vue

@@ -4,18 +4,12 @@ import { useStore } from 'vuex'
 
 import { useStoreGetters } from '@/store/utils'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
+import { useSettings } from '@/composables/useSettings'
 
 const store = useStore()
-const {
+
-  connected,
+const { connected, yunohost, routerKey, waiting, ssoLink } = useStoreGetters()
-  yunohost,
+const { spinner, dark, transitions, transitionName } = useSettings()
-  routerKey,
-  transitions,
-  transitionName,
-  waiting,
-  dark,
-  ssoLink,
-} = useStoreGetters()
 
 async function logout() {
   store.dispatch('LOGOUT')
@@ -56,7 +50,7 @@ onMounted(() => {
   document.addEventListener('keydown', ({ key }) => {
     if (key === konamiCode[konamistep++]) {
       if (konamistep === konamiCode.length) {
-        store.commit('SET_SPINNER', 'nyancat')
+        spinner.value = 'nyancat'
         konamistep = 0
       }
     } else {
@@ -67,18 +61,13 @@ onMounted(() => {
   // April fools easter egg ;)
   const today = new Date()
   if (today.getDate() === 1 && today.getMonth() + 1 === 4) {
-    store.commit('SET_SPINNER', 'magikarp')
+    spinner.value = 'magikarp'
   }
 
   // Halloween easter egg ;)
   if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
-    store.commit('SET_SPINNER', 'spookycat')
+    spinner.value = 'spookycat'
   }
-  // updates the data-bs-theme attribute
-  document.documentElement.setAttribute(
-    'data-bs-theme',
-    dark.value ? 'dark' : 'light',
-  )
 })
 </script>
 

app/src/router/index.ts

@@ -1,4 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+
+import { useSettings } from '@/composables/useSettings'
 import routes from './routes'
 import store from '@/store'
 
@@ -13,7 +15,8 @@ const router = createRouter({
     // if animations are enabled, we need to delay a bit the returned value of the saved
     // scroll state because the component probably hasn't updated the window height yet.
     // Note: this will only work with routes that use stored data or that has static content
-    if (store.getters.transitions && savedPosition) {
+    const { transitions } = useSettings()
+    if (transitions.value && savedPosition) {
       return new Promise((resolve) => {
         setTimeout(() => resolve(savedPosition), 0)
       })
@@ -24,8 +27,9 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (store.getters.transitions && from.name !== null) {
+  const { transitions, updateTransitionName } = useSettings()
-    store.dispatch('UPDATE_TRANSITION_NAME', { to, from })
+  if (transitions.value && from.name !== null) {
+    updateTransitionName({ to, from })
   }
 
   if (store.getters.error) {

app/src/views/_partials/ViewLockOverlay.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 
 import QueryHeader from '@/components/QueryHeader.vue'
 import { useStoreGetters } from '@/store/utils'
+import { useSettings } from '@/composables/useSettings'
 import {
   ErrorDisplay,
   ReconnectingDisplay,
@@ -10,7 +11,8 @@ import {
   WarningDisplay,
 } from '@/views/_partials'
 
-const { waiting, reconnecting, error, currentRequest, dark } = useStoreGetters()
+const { dark } = useSettings()
+const { waiting, reconnecting, error, currentRequest } = useStoreGetters()
 const component = computed(() => {
   const request = currentRequest.value
   // FIXME should we pass refs or unwrap refs as props?

app/src/views/diagnosis/DiagnosisView.vue

@@ -5,7 +5,6 @@ import api from '@/api'
 import { useInitialQueries } from '@/composables/useInitialQueries'
 import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
-import { useStoreGetters } from '@/store/utils'
 
 const { loading, refetch } = useInitialQueries(
   [
@@ -14,7 +13,6 @@ const { loading, refetch } = useInitialQueries(
   ],
   { wait: true, onQueriesResponse },
 )
-const { dark } = useStoreGetters()
 
 const reports = ref()
 

app/src/views/update/SystemUpdate.vue

@@ -7,7 +7,6 @@ import api from '@/api'
 import CardCollapse from '@/components/CardCollapse.vue'
 import { useAutoModal } from '@/composables/useAutoModal'
 import { useInitialQueries } from '@/composables/useInitialQueries'
-import { useStoreGetters } from '@/store/utils'
 
 const { t } = useI18n()
 const store = useStore()
@@ -17,7 +16,6 @@ const { loading } = useInitialQueries([['PUT', 'update/all', {}, 'update']], {
   onQueriesResponse,
 })
 
-const { dark } = useStoreGetters()
 const system = ref()
 const apps = ref()
 const importantYunohostUpgrade = ref()