refactor components and notifications bug

components/UserAccount/UserAccount.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  const props = defineProps({
+    user: {
+      type: Object,
+      required: true,
+    },
+  });
+  const { user } = props;
+</script>
+
+<template>
+  <div class="navbar-end">
+    <div class="dropdown dropdown-end">
+      <label tabindex="0" class="btn btn-ghost btn-circle avatar">
+        <div class="w-10 rounded-full">
+          <img v-if="user.user_metadata?.avatar_url" :src="user.user_metadata.avatar_url" alt="avatar image"/>
+          <img v-else src="~/assets/images/avatar.svg" alt="default avatar image"/>
+        </div>
+      </label>
+      <ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
+        <li v-if="user">{{ user.email }}</li>
+        <li><NuxtLink to="/account">Account</NuxtLink></li>
+        <li><UserAccountSignout/></li>
+        <UserAccountSwitch/>
+      </ul>
+    </div>
+  </div>
+</template>

components/UserAccount/UserAccountSignout.client.vue

@@ -0,0 +1,20 @@
+
+<script setup lang="ts">
+  const supabase = useSupabaseAuthClient();
+  const accountStore = useAccountStore();
+
+  onMounted(async () => {
+    await accountStore.init()
+  });
+
+  async function signout() {
+    await supabase.auth.signOut();
+    if(accountStore){
+      accountStore.signout();
+    }
+    navigateTo('/', {replace: true});
+  }
+</script>
+<template>
+  <a href="#" @click.prevent="signout()">Signout</a>
+</template>

components/UserAccount/UserAccountSwitch.client.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { storeToRefs } from 'pinia';
+
+  const accountStore = useAccountStore()
+  const { dbUser, activeAccountId } = storeToRefs(accountStore);
+
+  onMounted(async () => {
+    await accountStore.init()
+  });
+
+</script>
+
+<template>
+  <template v-if="dbUser?.memberships && dbUser?.memberships.length > 1">
+    <li>Switch Account</li>
+    <li v-for="membership in dbUser?.memberships">
+      <a v-if="membership.account_id !== activeAccountId  && !membership.pending"  href="#" @click="accountStore.changeActiveAccount(membership.account_id)">{{ membership.account.name }}</a>
+      <span v-if="membership.pending">{{ membership.account.name }} (pending)</span>
+    </li>
+  </template>
+</template>