Use pinia to persist card settings

Signed-off-by: Pascal Syma <pascal@syma.dev>

src/App.vue

@@ -1,16 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Card from '@/components/card.vue'
 import { type CardT, type Preset, presets, validPreset } from '@/colors.ts'
+import { useCards } from '@/stores/cards.ts'
 
-const cards = ref<CardT[]>(
-  new Array(8).fill(0).map((_) => ({
-    ...presets.default,
-    name: 'Name',
-    textSize: 10,
-  })),
-)
-
+const cardStore = useCards()
 function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
   if (!validPreset(preset)) {
     return
@@ -25,7 +18,11 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
 <template>
   <div class="grid grid-cols-3">
     <div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
-      <div v-for="(card, i) in cards" :key="i" class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0">
+      <div
+        v-for="(card, i) in cardStore.cards"
+        :key="i"
+        class="p-3 bg-gray-300 flex flex-col gap-1 m-2 mr-0"
+      >
         <input v-model="card.title" placeholder="Title" />
         <div class="flex flex-row gap-2">
           <input
@@ -74,7 +71,7 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
       </div>
     </div>
     <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
-      <card v-for="(_, i) in cards" :key="i" v-model="cards[i]" />
+      <card v-for="(_, i) in cardStore.cards" :key="i" v-model="cardStore.cards[i]" />
     </div>
   </div>
 </template>

src/main.ts

@@ -2,5 +2,9 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+
+createApp(App).use(pinia.use(piniaPluginPersistedstate)).mount('#app')

src/stores/cards.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { CardT } from '@/colors.ts'
+import { presets } from '@/colors.ts'
+
+export const useCards = defineStore(
+  'cards',
+  () => {
+    const cards = ref<CardT[]>(
+      new Array(8).fill(0).map((_) => ({
+        ...presets.default,
+        name: 'Name',
+        textSize: 10,
+      })),
+    )
+
+    return { cards }
+  },
+  { persist: true },
+)