From f159802e1371d6159fae269ded037bf9e686e27e Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 15:04:00 -0700
Subject: [PATCH 1/2] Encapsulate app state in a Pinia store.

---
 components/lineup/Lineup.vue               |  44 ++----
 components/lineup/LineupSpot.vue           |  11 +-
 components/player/PlayerJersey.vue         |  10 +-
 components/settings/SettingsButton.vue     |  20 +--
 components/settings/SettingsLockButton.vue |  31 +---
 nuxt.config.ts                             |   1 +
 package-lock.json                          | 174 ++++++++-------------
 package.json                               |  12 +-
 stores/AppSettings.ts                      |  84 ++++++++++
 types/index.ts                             |   9 +-
 10 files changed, 206 insertions(+), 190 deletions(-)
 create mode 100644 stores/AppSettings.ts

diff --git a/components/lineup/Lineup.vue b/components/lineup/Lineup.vue
index 870f19f..eec598c 100644
--- a/components/lineup/Lineup.vue
+++ b/components/lineup/Lineup.vue
@@ -1,38 +1,17 @@
 <script setup lang="ts">
 import { useSortable } from '@vueuse/integrations/useSortable'
 
-import { nanoid } from 'nanoid';
+import { useAppSettingsStore } from '~~/stores/AppSettings'
 
-import type { Spot, Lineup, AppSettings } from '~~/types';
-
-const lineup = useLocalStorage<Lineup>('lineup', {
-    id: nanoid(),
-    teamName: '',
-    spots: []
-}, {
-    mergeDefaults: true
-});
-const appSettings = useLocalStorage<AppSettings>('app-settings', {
-    isLineupLocked: false,
-    jerseyColor: 'f47373',
-    jerseyTextColor: '000000'
-}, {
-    mergeDefaults: true
-});
+const appSettingsStore = useAppSettingsStore();
 
 const sortableContainer = ref<HTMLElement | null>(null);
-useSortable(sortableContainer, lineup.value.spots, {
+useSortable(sortableContainer, appSettingsStore.getSpots, {
   group: 'spots',
   handle: '.drag-handle',
   animation: 150,
-  onMove: () => !appSettings.value.isLineupLocked
+  onMove: () => !appSettingsStore.getIsLocked
 });
-
-function addSpot(spot: Spot) {
-    if (!appSettings.value.isLineupLocked) {
-        lineup.value.spots.push(spot);
-    }
-}
 </script>
 
 <template>
@@ -40,34 +19,31 @@ function addSpot(spot: Spot) {
         <header class="flex font-bold mb-4">
             <input
                 type="text"
-                v-model.trim="lineup.teamName"
+                @change.trim="appSettingsStore.getTeamName"
                 @keyup.enter="($event.target as HTMLInputElement).blur()"
                 class="grow inline-block overflow-x-hidden text-ellipsis bg-transparent focus:shadow rounded text-gray-700 placeholder-gray-500 dark:text-gray-300 leading-[3em] cursor-pointer px-1"
                 placeholder="Team Name"
             />
 
-            <SettingsLockButton :is-locked="appSettings.isLineupLocked" @lock="appSettings.isLineupLocked = true" @unlock="appSettings.isLineupLocked = false" />
+            <SettingsLockButton />
 
-            <SettingsButton :app-settings="appSettings" />
+            <SettingsButton />
         </header>
 
         <div ref="sortableContainer">
             <ClientOnly>
                 <LineupSpot
-                    v-for="spot in lineup.spots"
+                    v-for="spot in appSettingsStore.getSpots"
                     :key="spot.player.id"
                     :spot="spot"
-                    :is-lineup-locked="appSettings.isLineupLocked"
-                    :jersey-color="appSettings.jerseyColor"
-                    :jersey-text-color="appSettings.jerseyTextColor"
-                    @delete="lineup.spots = lineup.spots.filter(s => s.player.id !== $event)"
+                    @delete="appSettingsStore.removeSpot($event)"
                     class="bg-blue-200"
                 />
             </ClientOnly>
         </div>
 
         <footer>
-            <LineupNewSpot @add="addSpot($event)" :class="`${ appSettings.isLineupLocked ? 'collapse' : 'visible' }`" />
+            <LineupNewSpot @add="appSettingsStore.addSpot($event)" :class="`${ appSettingsStore.getIsLocked ? 'collapse' : 'visible' }`" />
         </footer>
     </div>
 </template>
diff --git a/components/lineup/LineupSpot.vue b/components/lineup/LineupSpot.vue
index 3430685..78cc8f5 100644
--- a/components/lineup/LineupSpot.vue
+++ b/components/lineup/LineupSpot.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { useAppSettingsStore } from '~~/stores/AppSettings'
+
 import type { ID, Spot } from '~~/types';
 import { PositionOptions } from '~~/types';
 
+const appSettingsStore = useAppSettingsStore();
+
 const props = defineProps<{
     spot: Spot,
-    isLineupLocked: boolean,
-    jerseyColor: string,
-    jerseyTextColor: string
 }>();
 
 const emit = defineEmits<{
@@ -31,9 +32,9 @@ const isPositionDialogVisible = ref(false);
         @blur="focused = false"
         tabindex="0"
     >
-        <LineupDragHandle :class="`${ props.isLineupLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
+        <LineupDragHandle :class="`${ appSettingsStore.getIsLocked ? 'collapse' : 'visible' } inline-block shrink-0 text-[1.3em] px-2`" />
 
-        <PlayerJersey :player="props.spot.player" :jersey-color="props.jerseyColor" :jersey-text-color="props.jerseyTextColor" class="shrink-0" />
+        <PlayerJersey :player="props.spot.player" class="shrink-0" />
 
         <input
             type="text"
diff --git a/components/player/PlayerJersey.vue b/components/player/PlayerJersey.vue
index e0500c0..95842a1 100644
--- a/components/player/PlayerJersey.vue
+++ b/components/player/PlayerJersey.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
+import { useAppSettingsStore } from '~~/stores/AppSettings'
+
 import type { Player } from '~~/types';
 
+const appSettingsStore = useAppSettingsStore();
+
 const props = defineProps<{
     player: Player,
-    jerseyColor: string,
-    jerseyTextColor: string
 }>();
 </script>
 
 <template>
     <svg viewBox="215 45 526.2 372.045" width="3em" height="3em" xmlns="http://www.w3.org/2000/svg">
-        <use x="-308.27" href="@/assets/images/cloth-t-shirt.svg#shirt-back" :fill="`#${ props.jerseyColor }`" />
-        <text x="390" y="200" font-size="10em" :fill="`#${ props.jerseyTextColor }`">{{ props.player.number }}</text>
+        <use x="-308.27" href="@/assets/images/cloth-t-shirt.svg#shirt-back" :fill="`#${ appSettingsStore.getJerseyColor }`" />
+        <text x="390" y="200" font-size="10em" :fill="`#${ appSettingsStore.getJerseyTextColor }`">{{ props.player.number }}</text>
     </svg>
 </template>
 
diff --git a/components/settings/SettingsButton.vue b/components/settings/SettingsButton.vue
index ecd238e..e5ed952 100644
--- a/components/settings/SettingsButton.vue
+++ b/components/settings/SettingsButton.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import type { AppSettings } from '~~/types';
+import { useAppSettingsStore } from '~~/stores/AppSettings';
 
-const props = defineProps<{
-    appSettings: AppSettings
-}>();
-
-const mode = useColorMode();
+const appSettingsStore = useAppSettingsStore();
 
 const isSettingsDialogVisible = ref(false);
 </script>
@@ -30,22 +26,22 @@ const isSettingsDialogVisible = ref(false);
         </div>
         <div class="md:col-span-3">
           <Button
-              @click="mode.preference = mode.preference === 'system' ? 'dark' : mode.preference === 'dark' ? 'light' : 'system'"
+              @click="appSettingsStore.setColorMode(appSettingsStore.getColorMode === 'system' ? 'dark' : appSettingsStore.getColorMode === 'dark' ? 'light' : 'system')"
               size="small"
               severity="primary"
               rounded
               aria-label="Color mode"
               title="Color mode"
             >
-            <template v-if="mode.preference === 'system'">
+            <template v-if="appSettingsStore.getColorMode === 'system'">
               <i class="pi pi-desktop pr-2"></i>
               System
             </template>
-            <template v-if="mode.preference === 'dark'">
+            <template v-if="appSettingsStore.getColorMode === 'dark'">
               <i class="pi pi-moon pr-2"></i>
               Dark
             </template>
-            <template v-if="mode.preference === 'light'">
+            <template v-if="appSettingsStore.getColorMode === 'light'">
               <i class="pi pi-sun pr-2"></i>
               Light
             </template>
@@ -56,14 +52,14 @@ const isSettingsDialogVisible = ref(false);
           Jersey Color
         </div>
         <div>
-          <ColorPicker v-model="props.appSettings.jerseyColor" format="hex" />
+          <ColorPicker :modelValue="appSettingsStore.getJerseyColor" @update:modelValue="appSettingsStore.setJerseyColor($event as unknown as string)" format="hex" />
         </div>
 
         <div class="text-right text-xs py-2">
           Jersey Text Color
         </div>
         <div>
-          <ColorPicker v-model="props.appSettings.jerseyTextColor" format="hex" />
+          <ColorPicker :modelValue="appSettingsStore.getJerseyTextColor" @update:modelValue="appSettingsStore.setJerseyTextColor($event as unknown as string)" format="hex" />
         </div>
       </div>
     </Dialog>
diff --git a/components/settings/SettingsLockButton.vue b/components/settings/SettingsLockButton.vue
index bb95bc9..a8b1d8e 100644
--- a/components/settings/SettingsLockButton.vue
+++ b/components/settings/SettingsLockButton.vue
@@ -1,34 +1,17 @@
 <script setup lang="ts">
-const props = defineProps<{
-  isLocked: boolean
-}>();
+import { useAppSettingsStore } from '~~/stores/AppSettings'
 
-const emit = defineEmits<{
-  (e: "lock"): void;
-  (e: "unlock"): void;
-}>();
-
-const isLocked = ref(props.isLocked);
-
-function handleClick(): void {
-  isLocked.value = !isLocked.value;
-
-  if (isLocked.value) {
-    emit('lock');
-  } else {
-    emit('unlock');
-  }
-}
+const appSettingsStore = useAppSettingsStore();
 </script>
 
 <template>
   <Button
-      @click="handleClick"
-      :icon="`pi pi-${ isLocked ? 'lock' : 'lock-open' }`"
-      :severity="`${ isLocked ? 'secondary' : 'warning' }`"
+      @click="appSettingsStore.setIsLocked(!appSettingsStore.getIsLocked)"
+      :icon="`pi pi-${ appSettingsStore.getIsLocked ? 'lock' : 'lock-open' }`"
+      :severity="`${ appSettingsStore.getIsLocked ? 'secondary' : 'warning' }`"
       text
       rounded
-      :aria-label="`${ isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
-      :title="`${ isLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+      :aria-label="`${ appSettingsStore.getIsLocked ? 'Unlock lineup' : 'Lock lineup' }`"
+      :title="`${ appSettingsStore.getIsLocked ? 'Unlock lineup' : 'Lock lineup' }`"
   />
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0a88140..1f3a57a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,6 +4,7 @@ export default defineNuxtConfig({
   modules: [
     "@nuxtjs/color-mode",
     "@nuxtjs/tailwindcss",
+    "@pinia/nuxt",
     "@vueuse/nuxt"
   ],
   css: [
diff --git a/package-lock.json b/package-lock.json
index aad78f9..d78dd53 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,16 +14,19 @@
         "@nuxt/devtools": "latest",
         "@nuxtjs/color-mode": "^3.3.0",
         "@nuxtjs/tailwindcss": "^6.8.0",
+        "@pinia/nuxt": "^0.4.11",
         "@types/lodash-es": "^4.17.9",
         "@vueuse/integrations": "^10.4.1",
         "@vueuse/nuxt": "^10.4.1",
         "lodash-es": "^4.17.21",
         "nuxt": "^3.7.0",
+        "pinia": "^2.1.6",
         "primeicons": "^6.0.1",
         "primevue": "^3.33.0"
       },
       "engines": {
-        "node": "18.x"
+        "node": "18.x",
+        "npm": "^9.0.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -2591,6 +2594,19 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.4.11.tgz",
+      "integrity": "sha512-bhuNFngJpmBCdAqWguezNJ/oJFR7wvKieqiZrmmdmPR07XjsidAw8RLXHMZE9kUm32M9E6T057OBbG/22jERTg==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.5.0",
+        "pinia": ">=2.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3483,32 +3499,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/integrations": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-10.4.1.tgz",
@@ -3575,32 +3565,6 @@
         }
       }
     },
-    "node_modules/@vueuse/integrations/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/metadata": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.4.1.tgz",
@@ -3630,32 +3594,6 @@
         "nuxt": "^3.0.0"
       }
     },
-    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/shared": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.4.1.tgz",
@@ -3668,32 +3606,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -10167,6 +10079,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
+      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -14279,6 +14217,32 @@
         "ufo": "^1.2.0"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-devtools-stub": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",
diff --git a/package.json b/package.json
index c71fbed..b373a3d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,8 @@
   "name": "nuxt-app",
   "private": true,
   "engines": {
-    "node": "18.x"
+    "node": "18.x",
+    "npm": "^9.0.0"
   },
   "scripts": {
     "build": "nuxt build",
@@ -17,16 +18,25 @@
     "@nuxt/devtools": "latest",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/tailwindcss": "^6.8.0",
+    "@pinia/nuxt": "^0.4.11",
     "@types/lodash-es": "^4.17.9",
     "@vueuse/integrations": "^10.4.1",
     "@vueuse/nuxt": "^10.4.1",
     "lodash-es": "^4.17.21",
     "nuxt": "^3.7.0",
+    "pinia": "^2.1.6",
     "primeicons": "^6.0.1",
     "primevue": "^3.33.0"
   },
   "dependencies": {
     "nanoid": "^4.0.2",
     "sortablejs": "^1.15.0"
+  },
+  "overrides": {
+    "pinia": {
+      "@vue/composition-api": {
+        "vue": "^3.3.0"
+      }
+    }
   }
 }
diff --git a/stores/AppSettings.ts b/stores/AppSettings.ts
new file mode 100644
index 0000000..181a855
--- /dev/null
+++ b/stores/AppSettings.ts
@@ -0,0 +1,84 @@
+import { defineStore, acceptHMRUpdate } from "pinia";
+
+import type { Spot } from '~~/types';
+
+// HACK: Unfortunately, we were not able to expose any state properties
+//       because we could not enforce writes to be replicated to the
+//       persistent local storage. Specifically, we were not able to
+//       do so under Nuxt's server-side rendering scheme. (With SSR turned
+//       off or with the experimental `renderJsonPayloads: false` flag,
+//       it may work.)
+//
+//       For performance reasons, we store all the values we want separately
+//       instead of as a larger JSON object.
+//
+//       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
+//            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
+//            https://github.com/nuxt/nuxt/issues/20889
+
+export const useAppSettingsStore = defineStore('AppSettingsStore', {
+  // state: () => {
+  //   function $reset() {
+  //     //TODO
+  //   }
+
+  //   return {
+  //     $reset,
+  //   };
+  // },
+  actions: {
+    setColorMode(v: string) {
+      const mode = useColorMode();
+
+      mode.preference = v;
+    },
+
+    setTeamName(v: string) {
+      const store = useLocalStorage('AppSettingsStore:teamName', '');
+
+      store.value = v;
+    },
+    setJerseyColor(v: string) {
+      const store = useLocalStorage('AppSettingsStore:jerseyColor', '');
+
+      store.value = v;
+    },
+    setJerseyTextColor(v: string) {
+      const store = useLocalStorage('AppSettingsStore:jerseyTextColor', '');
+
+      store.value = v;
+    },
+
+    setIsLocked(v: boolean) {
+      const store = useLocalStorage('AppSettingsStore:isLocked', false);
+
+      store.value = v;
+    },
+    addSpot(spot: Spot) {
+      const store = useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>);
+
+      if (!this.getIsLocked) {
+        store.value.push({ ...spot });
+      }
+    },
+    removeSpot(playerId: string) {
+      const store = useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>);
+
+      store.value = store.value.filter(s => s.player.id !== playerId);
+    },
+  },
+  getters: {
+    getColorMode: state => useColorMode().preference,
+
+    getTeamName: state => useLocalStorage('AppSettingsStore:teamName', '').value,
+    getJerseyColor: state => useLocalStorage('AppSettingsStore:jerseyColor', 'f47373').value,
+    getJerseyTextColor: state => useLocalStorage('AppSettingsStore:jerseyTextColor', '000000').value,
+
+    getIsLocked: state => useLocalStorage('AppSettingsStore:isLocked', false).value,
+    getSpots: state => useLocalStorage('AppSettingsStore:spots', [] as Array<Spot>).value,
+  }
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAppSettingsStore, import.meta.hot));
+}
\ No newline at end of file
diff --git a/types/index.ts b/types/index.ts
index 885d2a2..9c3c8b1 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -29,14 +29,13 @@ export interface Spot {
 
 export interface Lineup {
     id: ID;
-    teamName: string;
-    spots: Spot[];
-};
 
-export interface AppSettings {
-    isLineupLocked: boolean,
+    teamName: string;
     jerseyColor: string,
     jerseyTextColor: string,
+
+    isLocked: boolean,
+    spots: Spot[];
 };
 
 //TODO this can probably be refactored into something more readable

From ba160eed52b725ed9cd39d9158d8c7784dcd54a9 Mon Sep 17 00:00:00 2001
From: Mark Ross <krazkidd@gmail.com>
Date: Thu, 7 Sep 2023 15:10:37 -0700
Subject: [PATCH 2/2] Keep experimental Pinia store.

This is a simpler version but does not work under SSR.
---
 stores/AppSettingsClientOnly.ts | 123 ++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 stores/AppSettingsClientOnly.ts

diff --git a/stores/AppSettingsClientOnly.ts b/stores/AppSettingsClientOnly.ts
new file mode 100644
index 0000000..352a2a8
--- /dev/null
+++ b/stores/AppSettingsClientOnly.ts
@@ -0,0 +1,123 @@
+import { defineStore, skipHydrate, acceptHMRUpdate } from "pinia";
+import { nanoid } from "nanoid";
+
+import type { Spot, Lineup } from '~~/types';
+
+// NOTE: This requires `ssr: false` in `nuxt.config.*` because the server will try to
+//       serialize our computed state properties to JSON, and they will fail because
+//       functions can't be serialized. (With SSR turned on but with the experimental
+//       `renderJsonPayloads: false` flag, it may work.)
+//
+//       See: [The Pinia guide](https://pinia.vuejs.org/core-concepts/)
+//            https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
+//            https://github.com/nuxt/nuxt/issues/20889
+
+export const useAppSettingsStoreClientOnly = defineStore('AppSettingsStoreClientOnly', {
+  state: () => {
+    const _colorMode = useColorMode();
+
+    const _lineup = useLocalStorage<Lineup>('AppSettingsStoreClientOnly:lineup', {
+      id: nanoid(),
+
+      teamName: '',
+      jerseyColor: 'f47373',
+      jerseyTextColor: '000000',
+
+      isLocked: false,
+      spots: [],
+    }, {
+      mergeDefaults: true
+    });
+
+    // NOTE: We provide setters so we can persist to storage.
+    //       Source: https://github.com/vuejs/pinia/issues/447#issuecomment-1455285437
+
+    const colorMode = computed<string>({
+      get: () => {
+        return _colorMode.preference;
+      },
+      set: (v) => {
+        _colorMode.preference = v;
+      },
+    });
+
+    const teamName = computed<string>({
+      get: () => {
+        return _lineup.value.teamName;
+      },
+      set: (v) => {
+        _lineup.value.teamName = v;
+      },
+    });
+
+    const jerseyColor = computed<string>({
+      get: () => {
+        return _lineup.value.jerseyColor;
+      },
+      set: (v) => {
+        _lineup.value.jerseyColor = v;
+      },
+    });
+
+    const jerseyTextColor = computed<string>({
+      get: () => {
+        return _lineup.value.jerseyTextColor;
+      },
+      set: (v) => {
+        _lineup.value.jerseyTextColor = v;
+      },
+    });
+
+    const isLocked = computed<boolean>({
+      get: () => {
+        return _lineup.value.isLocked;
+      },
+      set: (v) => {
+        _lineup.value.isLocked = v;
+      },
+    });
+
+    const spots = computed<Spot[]>({
+      get: () => {
+        return _lineup.value.spots;
+      },
+      set: (v) => {
+        _lineup.value.spots = v;
+      },
+    });
+
+    function $reset() {
+      //TODO
+    }
+
+    return {
+      colorMode: skipHydrate(colorMode),
+
+      teamName: skipHydrate(teamName),
+      jerseyColor: skipHydrate(jerseyColor),
+      jerseyTextColor: skipHydrate(jerseyTextColor),
+
+      isLocked: skipHydrate(isLocked),
+      spots: skipHydrate(spots),
+
+      $reset,
+    };
+  },
+  actions: {
+    addSpot(spot: Spot) {
+      if (!this.isLocked) {
+        this.spots.push({ ...spot });
+      }
+    },
+    removeSpot(playerId: string) {
+      this.spots = this.spots.filter(s => s.player.id !== playerId)
+    },
+  },
+  // getters: {
+
+  // }
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAppSettingsStoreClientOnly, import.meta.hot));
+}
\ No newline at end of file