Implement top menu user popover (#3631)

Co-authored-by: github-actions <github-actions@github.com>

src/components/topbar/CurrentUserButton.vue

@@ -1,45 +1,50 @@
 <!-- A button that shows current authenticated user's avatar -->
 <template>
-  <Button
-    v-if="isAuthenticated"
-    v-tooltip="{ value: $t('userSettings.title'), showDelay: 300 }"
-    class="user-profile-button p-1"
-    severity="secondary"
-    text
-    :aria-label="$t('userSettings.title')"
-    @click="openUserSettings"
-  >
-    <div
-      class="flex items-center rounded-full bg-[var(--p-content-background)]"
+  <div>
+    <Button
+      v-if="isAuthenticated"
+      v-tooltip="{ value: $t('userSettings.title'), showDelay: 300 }"
+      class="user-profile-button p-1"
+      severity="secondary"
+      text
+      :aria-label="$t('userSettings.title')"
+      @click="popover?.toggle($event)"
     >
-      <Avatar
-        :image="photoURL"
-        :icon="photoURL ? undefined : 'pi pi-user'"
-        shape="circle"
-        aria-label="User Avatar"
-      />
+      <div
+        class="flex items-center rounded-full bg-[var(--p-content-background)]"
+      >
+        <Avatar
+          :image="photoURL"
+          :icon="photoURL ? undefined : 'pi pi-user'"
+          shape="circle"
+          aria-label="User Avatar"
+        />
 
-      <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
-    </div>
-  </Button>
+        <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
+      </div>
+    </Button>
+
+    <Popover ref="popover" :show-arrow="false">
+      <CurrentUserPopover />
+    </Popover>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Avatar from 'primevue/avatar'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
 
-import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
+import CurrentUserPopover from './CurrentUserPopover.vue'
+
 const authStore = useFirebaseAuthStore()
-const dialogService = useDialogService()
+
+const popover = ref<InstanceType<typeof Popover> | null>(null)
 const isAuthenticated = computed(() => authStore.isAuthenticated)
 const photoURL = computed<string | undefined>(
   () => authStore.currentUser?.photoURL ?? undefined
 )
-
-const openUserSettings = () => {
-  dialogService.showSettingsDialog('user')
-}
 </script>