Fixed store and reactiveness when toggling user settings

NOTES.md

@@ -5,6 +5,9 @@ These are development notes for bug or feature to be implemented.
 ## TODO
 
 - Add some transition/animation to the play/stop button SVG
-- Create an actual menu (drop down) for the menu button
+- Create an actual menu (drop down) for the menu button (use https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover ?)
+  - Add a11y text to the menu button
   - Add About modal/page to the menu
   - Add light/dark theme toggle in the menu (or somewhere else?)
+  - Add right/left handed toggle
+  - Maybe add icons for the menu items/actions

app.vue

@@ -9,10 +9,9 @@ const initialUserSettings: UserSettings = {
   theme: 'auto',
 }
 const userSettings = useWebStorage<UserSettings>(STORE_USER_SETTINGS, initialUserSettings)
-const isLeftHanded = userSettings.get('leftHanded')
-const theme = userSettings.get<UserSettings>('theme')
-
-const bodyClasses = `${theme ? `theme-${theme}` : ''} ${isNight ? 'is-night' : 'is-day'} ${isLeftHanded ? 'left-handed' : ''}`
+const isLeftHanded = computed(() => userSettings.store.value.leftHanded)
+const theme = computed(() => userSettings.store.value.theme)
+const bodyClasses = computed(() => `${theme.value ? `theme-${theme.value}` : ''} ${isNight ? 'is-night' : 'is-day'} ${isLeftHanded.value ? 'left-handed' : ''}`)
 
 useHead({
   bodyAttrs: {

components/AppHeader/index.vue

@@ -12,7 +12,7 @@
 
 <style scoped>
 header {
-  align-items: flex-start;
+  align-items: center;
   display: flex;
   flex-wrap: wrap;
   grid-area: header;

components/Menu/index.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+import { STORE_USER_SETTINGS } from '@/config'
+import type { UserSettings } from '@/types/sharedTypes'
+
+const userSettings = useWebStorage<UserSettings>(STORE_USER_SETTINGS)
+const isLeftHanded = computed(() => userSettings.store.value.leftHanded)
+const theme = computed(() => userSettings.store.value.theme)
+
 async function handleClick() {
-  // console.log('@TODO: implement this')
-  await navigateTo('/about')
+  userSettings.set<UserSettings>({
+    leftHanded: !isLeftHanded.value,
+    theme: theme.value === 'night' ? 'day' : 'night',
+  })
 }
 </script>
 

composables/useWebStorage.ts

@@ -1,32 +1,34 @@
+const storeData: Ref<Record<any, never>> = ref({})
+
 export default function main<T>(
   store: string,
   initialValue?: T,
 ) {
   const isClient = typeof window != 'undefined'
   const storage = isClient ? window.localStorage : undefined
-  let storeData: T | Record<string, never> = {}
 
   if (storage && store) {
     try {
       const previousStore = storage.getItem(store)
       if (previousStore) {
-        storeData = JSON.parse(previousStore)
+        storeData.value = JSON.parse(previousStore)
       } else {
         storage.setItem(store, JSON.stringify(initialValue))
-        storeData = JSON.parse(storage.getItem(store) || '{}')
+        storeData.value = JSON.parse(storage.getItem(store) || '{}')
       }
     } catch (_error) {
-      storeData = {}
+      storeData.value = {}
     }
   }
 
   function set<T>(value: { [K in keyof T]?: T[K] }): T | Record<string, never> {
     if (storage && store) {
       try {
         const currentStore = JSON.parse(storage.getItem(store) || '{}')
-        const newStore: T = Object.assign({}, currentStore, value)
+        const newStore = Object.assign({}, currentStore, value)
 
         storage.setItem(store, JSON.stringify(newStore))
+        storeData.value = newStore
 
         return newStore
       } catch (_error) {

layouts/main.vue

@@ -1,31 +1,30 @@
 <script setup lang="ts">
-import { STORE_USER_SETTINGS } from '@/config'
 import isItNight from '@/lib/isItNight'
+import { STORE_USER_SETTINGS } from '@/config'
 import type { UserSettings } from '@/types/sharedTypes'
 
 const isNight = isItNight()
 const userSettings = useWebStorage(STORE_USER_SETTINGS)
-const theme = userSettings.get<UserSettings>('theme')
-const src = ref(isNight ? 'background-night.webp' : 'background.webp')
+const theme = computed<UserSettings['theme']>(() => userSettings.store.value.theme)
+const src = computed(() => {
+  let image = isNight ? 'background-night.webp' : 'background.webp'
 
-function setBackground() {
-  switch (theme) {
+  switch (theme.value) {
     case 'day':
-      src.value = 'background.webp'
+      image = 'background.webp'
       break
 
     case 'night':
-      src.value = 'background-night.webp'
+      image = 'background-night.webp'
       break
 
     case 'auto':
-      src.value = isNight ? 'background-night.webp' : 'background.webp'
+    default:
+      image = isNight ? 'background-night.webp' : 'background.webp'
       break
   }
-}
 
-onMounted(() => {
-  setBackground()
+  return image
 })
 </script>
 
@@ -40,11 +39,11 @@ onMounted(() => {
     </AppFooter>
   </div>
   <BackgroundImage :src="`/img/${src}`" />
-  <!-- <ClientOnly>
+  <ClientOnly>
     <template #fallback>
       <BackgroundImage src="/img/background.webp" />
     </template>
-  </ClientOnly> -->
+  </ClientOnly>
 </template>
 
 <style scoped>

public/.well-known/security.txt

@@ -0,0 +1,4 @@
+Contact: https://github.com/Ex-iT/CDR-Player/issues
+Expires: 2030-03-31T22:00:00.000Z
+Acknowledgments: ♥
+Preferred-Languages: en, nl