ditch useState and composables in favour of pinia store - add server rendered note detail page

pages/dashboard.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-  const user = await useSupabaseUser();
+  import { storeToRefs } from 'pinia';
+
   definePageMeta({
     middleware: ['auth'],
   });
 
   const { $client } = useNuxtApp();
 
-  const theAppState = appState();
-  watch(theAppState.value, (newAppState) => {
-    if(newAppState.activeMembership){
-      const { data: foundNotes } = $client.notes.getForCurrentUser.useQuery({account_id: newAppState.activeMembership.account_id});
-      if(foundNotes.value?.notes){
-        theAppState.value.notes = foundNotes.value.notes;
-      }
-    }
-  }); 
+  const store = useAppStore();
+  const { notes } = storeToRefs(store);  // ensure the notes list is reactive
+
+  onMounted(async () => {
+    await store.initUser();
+  })
 
   async function changeAccountPlan(){
     const { data: account } = await $client.userAccount.changeAccountPlan.useQuery();
@@ -35,18 +33,15 @@
     const { data: membership } = await $client.userAccount.claimOwnershipOfAccount.useQuery();
     console.log(`updated membership on current account: ${JSON.stringify(membership)}`);
   }
-
-  
 </script>
 <template>
   <div>
-    <h3>{{ user?.user_metadata.full_name }}'s Notes Dashboard</h3>
-    <p v-for="note in theAppState.notes">{{ note.note_text }}</p>
+    <h3>Notes Dashboard</h3>
+    <p v-for="note in notes">{{ note.note_text }}</p>
 
     <button @click.prevent="changeAccountPlan()">Change Account Plan</button>
     <button @click.prevent="joinUserToAccount()">Join user to account</button>
     <button @click.prevent="changeUserAccessWithinAccount()">Change user access within account</button>
     <button @click.prevent="claimOwnershipOfAccount()">Claim Account Ownership</button>
-    <p>Active ->{{ theAppState.activeMembership?.account_id }}</p>
   </div>
 </template>

pages/notes/[note_id].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const route = useRoute();
+const { $client } = useNuxtApp();
+const { data: note } = await $client.notes.getById.useQuery({note_id: +route.params.note_id});
+</script>
+<template>
+  <div>
+    <h3>Note Detail {{ route.params.note_id }}</h3>
+    <pre>{{ note?.note.note_text }}</pre>
+
+    <NuxtLink to="/notes/1">Back to Note 1 via an internal link (should not reload page)</NuxtLink>
+  </div>
+</template>