feat/add_user_theme_view_controls: yarn add cookie-universal-nuxt , to allow users to choose the lightness of the theme and the compactness of the view on events

components/Event.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
   nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
-    MyPicture(v-if='!settings.hide_thumbs' :event='event' thumb :lazy='lazy')
+    MyPicture(v-if='!hide_thumbs' :event='event' thumb :lazy='lazy')
     v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
     .title.p-name(itemprop="name") {{ event.title }}
 
@@ -22,8 +22,13 @@ import MyPicture from '~/components/MyPicture'
 import { mdiRepeat, mdiCalendar, mdiMapMarker } from '@mdi/js'
 
 export default {
-  data() {
-    return { mdiRepeat, mdiMapMarker, mdiCalendar }
+  data({ $store }) {
+    return { mdiRepeat, mdiMapMarker, mdiCalendar,
+      // user can't see hidden thumbs
+      hide_thumbs: this.$cookies.get('theme.hide_thumbs') || $store.state.settings.hide_thumbs
+      // user can override
+      // hide_thumbs: this.$cookies.get('theme.hide_thumbs')
+    }
   },
   components: {
     MyPicture

components/ThemeView.vue

@@ -0,0 +1,54 @@
+<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-text='!hide_thumbs ?  mdiViewList : mdiViewModule')
+
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import { mdiViewModule, mdiViewList, mdiContrastCircle } from '@mdi/js'
+
+export default {
+  name: 'ThemeView',
+  data ({ $store }) {
+    return {
+      mdiViewModule, mdiViewList, mdiContrastCircle,
+      reload: 0
+    }
+  },
+  methods: {
+    ...mapState(['settings']),
+    async _is_dark() {
+      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() {
+      const theme_hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
+      if (theme_hide_thumbs != null) {
+        this.hide_thumbs = !theme_hide_thumbs
+      } else {
+        this.hide_thumbs = !$store.state.settings.hide_thumbs
+      }
+      await this.$cookies.set('theme.hide_thumbs', this.hide_thumbs, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 7
+      })
+      await this.reload++
+      this.$root.$emit('layout_loaded', true)
+    },
+    async hide_thumbs () {
+      const hide_thumbs = await this.$cookies.get('theme.hide_thumbs')
+      if (hide_thumbs != null) {
+        this.hide_thumbs = hide_thumbs
+      } else {
+        this.hide_thumbs = $store.state.settings.hide_thumbs
+      }
+      return hide_thumbs
+    }
+  }
+}
+</script>