From b79cbf69afa9f80b2dbfa5b68044070021197cc6 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 24 Apr 2025 21:49:03 -0400
Subject: [PATCH] Use PrimeVue Avatar component (#3615)

---
 .../dialog/content/setting/UserPanel.vue      | 16 +++++------
 src/components/topbar/CurrentUserButton.vue   | 28 ++++++++-----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index ed2537601..82c5ae0fa 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -5,14 +5,13 @@
       <Divider class="mb-3" />
 
       <div v-if="user" class="flex flex-col gap-2">
-        <!-- User Avatar if available -->
-        <div v-if="user.photoURL" class="flex items-center gap-2">
-          <img
-            :src="user.photoURL"
-            :alt="user.displayName || ''"
-            class="w-8 h-8 rounded-full"
-          />
-        </div>
+        <Avatar
+          v-if="user.photoURL"
+          :image="user.photoURL"
+          shape="circle"
+          size="large"
+          aria-label="User Avatar"
+        />
 
         <div class="flex flex-col gap-0.5">
           <h3 class="font-medium">
@@ -77,6 +76,7 @@
 </template>
 
 <script setup lang="ts">
+import Avatar from 'primevue/avatar'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 052419125..b048c701f 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -10,28 +10,22 @@
     @click="openUserSettings"
   >
     <div
-      class="flex items-center gap-2 pr-2 rounded-full bg-[var(--p-content-background)]"
+      class="flex items-center rounded-full bg-[var(--p-content-background)]"
     >
-      <!-- User Avatar if available -->
-      <div v-if="user?.photoURL" class="flex items-center gap-1">
-        <img
-          :src="user.photoURL"
-          :alt="user.displayName || ''"
-          class="w-8 h-8 rounded-full"
-        />
-      </div>
+      <Avatar
+        :image="photoURL"
+        :icon="photoURL ? undefined : 'pi pi-user'"
+        shape="circle"
+        aria-label="User Avatar"
+      />
 
-      <!-- User Icon if no avatar -->
-      <div v-else class="w-8 h-8 rounded-full flex items-center justify-center">
-        <i class="pi pi-user text-sm" />
-      </div>
-
-      <i class="pi pi-chevron-down" :style="{ fontSize: '0.5rem' }" />
+      <i class="pi pi-chevron-down px-1" :style="{ fontSize: '0.5rem' }" />
     </div>
   </Button>
 </template>
 
 <script setup lang="ts">
+import Avatar from 'primevue/avatar'
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
@@ -41,7 +35,9 @@ import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
 const isAuthenticated = computed(() => authStore.isAuthenticated)
-const user = computed(() => authStore.currentUser)
+const photoURL = computed<string | undefined>(
+  () => authStore.currentUser?.photoURL ?? undefined
+)
 
 const openUserSettings = () => {
   dialogService.showSettingsDialog('user')