use localSetting to store a global state of user choices

components/Calendar.vue

@@ -4,7 +4,7 @@
       ref='cal'
       v-model='selectedDate'
       title-position='left'
-      :is-dark="settings['theme.is_dark']"
+      :is-dark="is_dark"
       :columns="!$vuetify.breakpoint.smAndDown ? 2 : 1"
       @input='click'
       @update:from-page='updatePage'
@@ -15,20 +15,14 @@
       aria-label='Calendar'
       is-expanded
       is-inline)
-      //- template(v-slot="{ inputValue, inputEvents }")
-        v-btn#calendarButton(v-on='inputEvents' text tile :color='selectedDate ? "primary" : "" ') {{inputValue || $t('common.calendar')}} 
-          v-icon(v-if='selectedDate' v-text='mdiClose' right small icon @click.prevent.stop='selectedDate = null')
-          v-icon(v-else v-text='mdiChevronDown' right small icon)
     .calh.d-flex.justify-center.align-center(slot='placeholder')
       v-progress-circular(indeterminate)
-    //-   v-btn#calendarButton(text tile) {{$t('common.calendar')}} 
-    //-     v-icon(v-text='mdiChevronDown' right small icon)
 
   </template>
 
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import dayjs from 'dayjs'
 import { mdiChevronDown, mdiClose } from '@mdi/js'
 import { attributesFromEvents } from '../assets/helper'
@@ -46,6 +40,7 @@ export default {
   },
   computed: {
     ...mapState(['settings', 'events']),
+    ...mapGetters(['is_dark']),
     attributes () {
       return attributesFromEvents(this.events)
     }

components/Event.vue

@@ -17,15 +17,13 @@ v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
 
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import MyPicture from '~/components/MyPicture'
 import { mdiRepeat, mdiCalendar, mdiMapMarker } from '@mdi/js'
 
 export default {
   data({ $store }) {
-    return { mdiRepeat, mdiMapMarker, mdiCalendar,
-      hide_thumbs: this.$cookies.get('theme.hide_thumbs') || $store.state.settings.hide_thumbs
-    }
+    return { mdiRepeat, mdiMapMarker, mdiCalendar }
   },
   components: {
     MyPicture
@@ -34,6 +32,6 @@ export default {
     event: { type: Object, default: () => ({}) },
     lazy: Boolean
   },
-  computed: mapState(['settings'])
+  computed: mapGetters(['hide_thumbs'])
 }
 </script>

components/ThemeView.vue

@@ -1,48 +1,31 @@
 <template lang="pug">
-div.p-0.m-0.d-flex.justify-end(:key='reload')
-  v-icon.ml-5(@click='_is_dark()' v-text='mdiContrastCircle')
-  v-icon.ml-5(@click='_hide_thumbs()' v-if="!hide_thumbs" v-text='!hide_thumbs_icon ?  mdiViewList : mdiViewModule')
+div.p-0.m-0.d-flex.justify-end
+  v-icon.ml-5(@click='toggleDark' v-text='mdiContrastCircle')
+  v-icon.ml-5(@click='toggleHideThumbs' v-text='hide_thumbs ?  mdiViewList : mdiViewModule')
 
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import { mdiViewModule, mdiViewList, mdiContrastCircle } from '@mdi/js'
 
 export default {
   name: 'ThemeView',
-  data ({ $store }) {
-    return {
-      mdiViewModule, mdiViewList, mdiContrastCircle,
-      hide_thumbs: $store.state.settings.hide_thumbs,
-      hide_thumbs_icon: $store.state.settings.hide_thumbs || this.$cookies.get('theme.hide_thumbs'),
-      reload: 0
-    }
+  data () {
+    return { mdiViewModule, mdiViewList, mdiContrastCircle }
+  },
+  computed: {
+    ...mapGetters(['hide_thumbs', 'is_dark']),
   },
   methods: {
-    ...mapState(['settings']),
-    async _is_dark() {
+    ...mapActions(['setLocalSetting']),
+    async toggleDark() {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-      await this.$cookies.set('theme.is_dark', this.$vuetify.theme.dark, {
-        path: '/',
-        maxAge: 60 * 60 * 24 * 7
-      })
-    },
-    async _hide_thumbs() {
-      let theme_hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
-      if (theme_hide_thumbs != null) {
-        theme_hide_thumbs = !theme_hide_thumbs
-      } else {
-        theme_hide_thumbs = !this.settings.hide_thumbs
-      }
-      await this.$cookies.set('theme.hide_thumbs', theme_hide_thumbs, {
-        path: '/',
-        maxAge: 60 * 60 * 24 * 7
-      })
-      this.hide_thumbs_icon = theme_hide_thumbs
-      this.reload++
-      this.$root.$emit('layout_loaded', true)
+      this.setLocalSetting({ key: 'theme.is_dark', value: !this.is_dark })
     },
+    async toggleHideThumbs() {
+      this.setLocalSetting({ key: 'hide_thumbs', value: !this.hide_thumbs })
+    }
   }
 }
 </script>

layouts/default.vue

@@ -19,7 +19,7 @@ import Appbar from '../components/Appbar.vue'
 import Snackbar from '../components/Snackbar'
 import Footer from '../components/Footer'
 import Confirm from '../components/Confirm'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
   head () {
@@ -32,14 +32,12 @@ export default {
   },
   name: 'Default',
   components: { Appbar, Snackbar, Footer, Confirm },
-  computed: mapState(['settings']),
+  computed: {
+    ...mapState(['settings']),
+    ...mapGetters(['is_dark'])
+  },
   created () {
-    const theme_is_dark = this.$cookies.get('theme.is_dark')
-    if ( theme_is_dark != null ) {
-      this.$vuetify.theme.dark = theme_is_dark
-    } else {
-      this.$vuetify.theme.dark = this.settings['theme.is_dark']
-    }
+    this.$vuetify.theme.dark = this.is_dark
   }
 }
 </script>

pages/index.vue

@@ -10,7 +10,7 @@ v-container.px-2.px-sm-6.pt-0
     Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
 
   //- Events
-  #events.mt-sm-4.mt-2(:key="reload_events")
+  #events.mt-sm-4.mt-2
     Event(:event='event' v-for='(event, idx) in visibleEvents' :lazy='idx>2' :key='event.id')
 </template>
 
@@ -48,7 +48,6 @@ export default {
       tmpEvents: [],
       selectedDay: null,
       storeUnsubscribe: null,
-      reload_events: 0
     }
   },
   head () {
@@ -100,10 +99,6 @@ export default {
         }
       }
     }})
-    // this.$root.$on('search', debounce(this.search, 100))
-    // this.$root.$on('layout_loaded', () => {
-    //     this.reload_events++
-    // })
   },
   destroyed () {
     this.$root.$off('dayclick')

store/index.js

@@ -1,6 +1,10 @@
 import dayjs from 'dayjs'
 
 export const state = () => ({
+  localSettings : {
+    hide_thumbs: null,
+    'theme.is_dark': null
+  },
   settings: {
     instance_timezone: 'Europe/Rome',
     instance_name: '',
@@ -21,7 +25,10 @@ export const state = () => ({
     enable_trusted_instances: true,
     trusted_instances: [],
     trusted_instances_label: '',
-    footerLinks: []
+    footerLinks: [],
+    hide_thumbs: false,
+    'theme.is_dark': true,
+    hide_calendar: false
   },
   filter: {
     query: '',
@@ -32,6 +39,15 @@ export const state = () => ({
   events: []
 })
 
+export const getters = {
+  hide_thumbs (state) {
+    return (state.localSettings['hide_thumbs'] === null) ? state.settings.hide_thumbs : state.localSettings.hide_thumbs
+  },
+  is_dark (state) {
+    return (state.localSettings['theme.is_dark'] === null) ? state.settings['theme.is_dark'] : state.localSettings['theme.is_dark']
+  }
+}
+
 export const mutations = {
   setSettings (state, settings) {
     state.settings = settings
@@ -39,6 +55,9 @@ export const mutations = {
   setSetting (state, setting) {
     state.settings[setting.key] = setting.value
   },
+  setLocalSetting(state, setting) {
+    state.localSettings[setting.key] = setting.value
+  },
   setAnnouncements (state, announcements) {
     state.announcements = announcements
   },
@@ -53,13 +72,17 @@ export const mutations = {
 export const actions = {
   // this method is called server side only for each request for nuxt
   // we use it to get configuration from db, set locale, etc...
-  nuxtServerInit ({ commit }, { _req, res }) {
+  nuxtServerInit ({ commit }, { res, app }) {
+
     if (res.locals && res.locals.settings) {
       commit('setSettings', res.locals.settings)
     }
     commit('setFilter', {  type: 'show_recurrent',
         value: res.locals.settings.allow_recurrent_event && res.locals.settings.recurrent_event_visible })
 
+    commit('setLocalSetting', { key: 'hide_thumbs', value: app.$cookies.get('hide_thumbs') })
+    commit('setLocalSetting', { key: 'theme.is_dark', value: app.$cookies.get('theme.is_dark') })
+
     if (res.locals.status === 'READY') {
       commit('setAnnouncements', res.locals.announcements)
     }
@@ -75,6 +98,13 @@ export const actions = {
     await this.$axios.$post('/settings', setting)
     commit('setSetting', setting)
   },
+  async setLocalSetting ({ commit }, setting) {
+    this.$cookies.set(setting.key, setting.value, {
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7
+    })
+    commit('setLocalSetting', setting)
+  },
   setFilter ({ commit }, [type, value]) {
     commit('setFilter', { type, value })
   },