Persist hideAnswer switch

app/pages/hunt/[huntSlug]/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TeamAddModal from '~/components/TeamAddModal.vue';
+import { useSettingsStore } from '~/stores/settings';
 import { useTitleStore } from '~/stores/title';
 import { fullDate } from '~~/server/utils/date';
 
@@ -15,7 +16,7 @@ const titleStore = useTitleStore();
 
 const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
 
-const hideAnswers = ref(true);
+const settings = useSettingsStore();
 
 useHead({
   title: t('layouts.title', {
@@ -204,7 +205,7 @@ ${document.location.href}`
         </VaCardActions>
       </VaCard>
       <div v-else-if="!data.isMember" class="my-4 flex flex-row gap-2">
-        <VaSwitch v-model="hideAnswers" icon="image">{{
+        <VaSwitch v-model="settings.hideAnswers" icon="image">{{
           t('page.hunt.hide_answers')
         }}</VaSwitch>
       </div>
@@ -235,7 +236,7 @@ ${document.location.href}`
         >
           <VaCardTitle><QuestTags :quest="quest" /></VaCardTitle>
           <VaImage
-            v-if="!hideAnswers"
+            v-if="!settings.hideAnswers"
             :src="quest?.answer?.picture?.url ?? ''"
             :fallback-text="t('page.hunt.no_picture_uploaded')"
             class="h-32"
@@ -251,14 +252,14 @@ ${document.location.href}`
                   quest.answer?.review?.score > 0) ||
                 quest.answer?.final
               ) ||
-              (!hideAnswers && quest.answer?.text)
+              (!settings.hideAnswers && quest.answer?.text)
             "
           >
             <p class="line-clamp-4">
               {{ tKey(quest, 'description').value.split('\n')[0] }}
             </p>
 
-            <div v-if="!hideAnswers && quest.answer?.text">
+            <div v-if="!settings.hideAnswers && quest.answer?.text">
               <VaDivider />
               <p class="line-clamp-1">{{ quest.answer?.text }}</p>
             </div>

app/stores/settings.ts

@@ -0,0 +1,12 @@
+export const useSettingsStore = defineStore(
+  'picSettings',
+  () => {
+    const hideAnswers = ref(true);
+
+    return { hideAnswers };
+  },
+  { persist: true }
+);
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useSettingsStore, import.meta.hot));
+}

bun.lock

@@ -22,6 +22,7 @@
         "nuxt": "^4.0.1",
         "nuxt-auth-utils": "^0.5.22",
         "pinia": "^3.0.3",
+        "pinia-plugin-persistedstate": "^4.5.0",
         "slugify": "^1.6.6",
         "superjson": "^2.2.2",
         "unique-names-generator": "^4.7.1",
@@ -975,6 +976,8 @@
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
+    "deep-pick-omit": ["deep-pick-omit@1.2.1", "", {}, "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw=="],
+
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
     "deepmerge-ts": ["deepmerge-ts@7.1.5", "", {}, "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw=="],
@@ -1709,6 +1712,8 @@
 
     "pinia": ["pinia@3.0.3", "", { "dependencies": { "@vue/devtools-api": "^7.7.2" }, "peerDependencies": { "typescript": ">=4.4.4", "vue": "^2.7.0 || ^3.5.11" }, "optionalPeers": ["typescript"] }, "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA=="],
 
+    "pinia-plugin-persistedstate": ["pinia-plugin-persistedstate@4.5.0", "", { "dependencies": { "deep-pick-omit": "^1.2.1", "defu": "^6.1.4", "destr": "^2.0.5" }, "peerDependencies": { "@nuxt/kit": ">=3.0.0", "@pinia/nuxt": ">=0.10.0", "pinia": ">=3.0.0" }, "optionalPeers": ["@nuxt/kit", "@pinia/nuxt", "pinia"] }, "sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw=="],
+
     "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
 
     "pkg-types": ["pkg-types@2.2.0", "", { "dependencies": { "confbox": "^0.2.2", "exsolve": "^1.0.7", "pathe": "^2.0.3" } }, "sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ=="],

nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     '@vuestic/nuxt',
     '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt',
     '@vueuse/nuxt',
     '@nuxt/eslint',
     '@artmizu/nuxt-prometheus'

package.json

@@ -36,6 +36,7 @@
     "nuxt": "^4.0.1",
     "nuxt-auth-utils": "^0.5.22",
     "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "slugify": "^1.6.6",
     "superjson": "^2.2.2",
     "unique-names-generator": "^4.7.1",