finally put #3 to bed with state. also introduce email/password signup and login

stores/account.store.ts

@@ -1,4 +1,4 @@
-import { ACCOUNT_ACCESS } from ".prisma/client"
+import { ACCOUNT_ACCESS } from '@prisma/client';
 import { defineStore } from "pinia"
 import { FullDBUser, MembershipWithUser } from "~~/lib/services/service.types";
 
@@ -54,21 +54,26 @@ export const useAccountStore = defineStore('account', {
           this.activeAccountId = activeAccountId;
         }
       }
-      if(this.activeAccountMembers.length == 0){
-        await this.getActiveAccountMembers();
-      }
+    },
+    signout(){
+      this.dbUser = null;
+      this.activeAccountId = null;
+      this.activeAccountMembers = [];
     },
     async getActiveAccountMembers(){
-      const { $client } = useNuxtApp();
-      const { data: memberships } = await $client.account.getAccountMembers.useQuery();
-      if(memberships.value?.memberships){
-        this.activeAccountMembers = memberships.value?.memberships;
+      if(this.activeMembership && (this.activeMembership.access === ACCOUNT_ACCESS.ADMIN || this.activeMembership.access === ACCOUNT_ACCESS.OWNER)){
+        const { $client } = useNuxtApp();
+        const { data: memberships } = await $client.account.getAccountMembers.useQuery();
+        if(memberships.value?.memberships){
+          this.activeAccountMembers = memberships.value?.memberships;
+        }
       }
     },
     async changeActiveAccount(account_id: number){
       const { $client } = useNuxtApp();
-      this.activeAccountId = account_id;
       await $client.account.changeActiveAccount.mutate({account_id}); // sets active account on context for other routers and sets the preference in a cookie
+      
+      this.activeAccountId = account_id;    // because this is used as a trigger to some other components, NEEDS TO BE AFTER THE MUTATE CALL
       await this.getActiveAccountMembers(); // these relate to the active account and need to ber re-fetched
     },
     async changeAccountName(new_name: string){

stores/notes.store.ts

@@ -1,23 +1,35 @@
 import { Note } from ".prisma/client"
-import { defineStore } from "pinia"
+import { defineStore, storeToRefs } from "pinia"
+import { Ref } from "vue";
 
 interface State {
   notes: Note[]
 }
 
-export const useNotesStore = defineStore('notes', {
-  state: (): State => {
-    return {
-      notes: [],
-    }
-  },
-  actions: {
-    async fetchNotesForCurrentUser() {
-      const { $client } = useNuxtApp();
-      const { notes } = await $client.notes.getForCurrentUser.query();
-      if(notes){
-        this.notes = notes;
-      }  
-    },
+/*
+Note) the Notes Store needs to be a 'Setup Store' (https://pinia.vuejs.org/core-concepts/#setup-stores)
+because this enables the use of the watch on the Account Store
+If the UI does not need to dynamically respond to a change in the active Account e.g. if state is always retrieved with an explicit fetch after onMounted.
+then an Options store can be used.
+*/
+export const useNotesStore = defineStore('notes', () => {
+  const accountStore = useAccountStore()
+  const { activeAccountId } = storeToRefs(accountStore);
+
+  let _notes: Ref<Note[]> = ref([]);
+
+  async function fetchNotesForCurrentUser() {
+    const { $client } = useNuxtApp();
+    const { notes } = await $client.notes.getForCurrentUser.query();
+    if(notes){
+      _notes.value = notes;
+    }  
   }
+
+  // if the active account changes, fetch notes again (i.e dynamic.. probabl overkill)
+  watch(activeAccountId, async (val, oldVal)=> {
+    await fetchNotesForCurrentUser()
+  });
+
+  return { notes: _notes, fetchNotesForCurrentUser }
 });