refactor and restructure pinia store and trpc routers + add members list to account store

pages/account.vue

@@ -2,11 +2,20 @@
   import { storeToRefs } from 'pinia';
   import { ACCOUNT_ACCESS } from '@prisma/client';
 
-  const store = useAppStore();
-  const { activeMembership } = storeToRefs(store);
+  const authStore = useAuthStore();
+  const { activeMembership } = storeToRefs(authStore);
+  const accountStore = useAccountStore();
+  const { activeAccountMembers } = storeToRefs(accountStore)
+
   const config = useRuntimeConfig();
   const newAccountName = ref("");
 
+  watchEffect(async () => {
+    if (activeMembership.value) {
+      await accountStore.getActiveAccountMembers();
+    }
+  })
+
   function formatDate(date: Date | undefined){
     if(!date){ return ""; }
     return new Intl.DateTimeFormat('default', {dateStyle: 'long'}).format(date);
@@ -15,13 +24,18 @@
 <template>
   <div>
     <h3>Account</h3>
-    <p>Name: {{ activeMembership?.account.name }} <span v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access !== ACCOUNT_ACCESS.ADMIN)"><input v-model="newAccountName" placeholder="Enter New Name"/><button @click.prevent="store.changeAccountName(newAccountName)">Change Name</button></span></p>
+    <p>Name: {{ activeMembership?.account.name }} <span v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access !== ACCOUNT_ACCESS.ADMIN)"><input v-model="newAccountName" placeholder="Enter New Name"/><button @click.prevent="accountStore.changeAccountName(newAccountName)">Change Name</button></span></p>
     <p>Current Period Ends: {{ formatDate(activeMembership?.account.current_period_ends) }}</p>
     <p>Permitted Features: {{ activeMembership?.account.features }}</p>
     <p>Maximum Notes: {{ activeMembership?.account.max_notes }}</p>
     <p>Maximum Members: {{ activeMembership?.account.max_members }}</p>
     <p>Access Level: {{ activeMembership?.access }}</p>
     <p>Plan: {{ activeMembership?.account.plan_name }}</p>
+
+    <h4>Members</h4>
+    <ul>
+      <li v-for="accountMember in activeAccountMembers">{{ accountMember.user.display_name }}</li>
+    </ul>
     
     <template v-if="config.public.debugMode">
       <p>******* Debug *******</p>
@@ -32,5 +46,11 @@
       <p>Membership Id: {{ activeMembership?.id }}</p>
       <p>User Id: {{ activeMembership?.user_id }}</p>
     </template>
+
+    <button @click.prevent="accountStore.changeAccountPlan(2)">Change active Account Plan to 2</button>
+    <button @click.prevent="accountStore.joinUserToAccount(4)">Join user 4 to active account</button>
+    <button @click.prevent="accountStore.changeUserAccessWithinAccount(4, 'OWNER')">Change user 4 access within account 5 to OWNER (SHOULD FAIL)</button>
+    <button @click.prevent="accountStore.changeUserAccessWithinAccount(4, 'ADMIN')">Change user 4 access within account 5 to ADMIN</button>
+    <button @click.prevent="accountStore.claimOwnershipOfAccount()">Claim Ownership of current account for current user</button>
   </div>
 </template>

pages/dashboard.vue

@@ -5,19 +5,21 @@
     middleware: ['auth'],
   });
 
-  const store = useAppStore();
-  const { notes } = storeToRefs(store);  // ensure the notes list is reactive
+  const authStore = useAuthStore();
+  const { activeMembership } = storeToRefs(authStore);
 
+  const notesStore = useNotesStore();
+  const { notes } = storeToRefs(notesStore);  // ensure the notes list is reactive
+
+  watchEffect(async () => {
+    if (activeMembership.value) {
+      await notesStore.fetchNotesForCurrentUser();
+    }
+  })
 </script>
 <template>
   <div>
     <h3>Notes Dashboard</h3>
     <p v-for="note in notes">{{ note.note_text }}</p>
-
-    <button @click.prevent="store.changeAccountPlan(2)">Change active Account Plan to 2</button>
-    <button @click.prevent="store.joinUserToAccount(4)">Join user 4 to active account</button>
-    <button @click.prevent="store.changeUserAccessWithinAccount(4, 'OWNER')">Change user 4 access within account 5 to OWNER (SHOULD FAIL)</button>
-    <button @click.prevent="store.changeUserAccessWithinAccount(4, 'ADMIN')">Change user 4 access within account 5 to ADMIN</button>
-    <button @click.prevent="store.claimOwnershipOfAccount()">Claim Ownership of current account for current user</button>
   </div>
 </template>

pages/pricing.vue

@@ -2,8 +2,8 @@
   import { storeToRefs } from 'pinia';
   import { ACCOUNT_ACCESS } from '@prisma/client';
 
-  const store = useAppStore()
-  const { activeMembership } = storeToRefs(store);
+  const authStore = useAuthStore()
+  const { activeMembership } = storeToRefs(authStore);
 
 </script>
 <template>