Show user avatar on top menu if available (#3572)

Author: huchenlei

src/components/topbar/CurrentUserButton.vue

@@ -0,0 +1,49 @@
+<!-- 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 gap-2 pr-2 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>
+
+      <!-- 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' }" />
+    </div>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+
+const authStore = useFirebaseAuthStore()
+const dialogService = useDialogService()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+const user = computed(() => authStore.currentUser)
+
+const openUserSettings = () => {
+  dialogService.showSettingsDialog('user')
+}
+</script>

src/components/topbar/TopMenubar.vue

@@ -12,6 +12,7 @@
     </div>
     <div ref="menuRight" class="comfyui-menu-right flex-shrink-0" />
     <Actionbar />
+    <CurrentUserButton class="flex-shrink-0" />
     <BottomPanelToggleButton class="flex-shrink-0" />
     <Button
       v-tooltip="{ value: $t('menu.hideMenu'), showDelay: 300 }"
@@ -23,23 +24,6 @@
       @click="workspaceState.focusMode = true"
       @contextmenu="showNativeSystemMenu"
     />
-    <Button
-      v-if="isAuthenticated"
-      v-tooltip="{ value: $t('userSettings.title'), showDelay: 300 }"
-      class="flex-shrink-0 user-profile-button"
-      severity="secondary"
-      text
-      :aria-label="$t('userSettings.title')"
-      @click="openUserSettings"
-    >
-      <template #icon>
-        <div
-          class="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center"
-        >
-          <i class="pi pi-user text-sm" />
-        </div>
-      </template>
-    </Button>
     <div
       v-show="menuSetting !== 'Bottom'"
       class="window-actions-spacer flex-shrink-0"
@@ -61,10 +45,9 @@ import { computed, onMounted, provide, ref } from 'vue'
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import BottomPanelToggleButton from '@/components/topbar/BottomPanelToggleButton.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
+import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
-import { useDialogService } from '@/services/dialogService'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
@@ -76,10 +59,7 @@ import {
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
-const authStore = useFirebaseAuthStore()
-const dialogService = useDialogService()
 
-const isAuthenticated = computed(() => authStore.isAuthenticated)
 const workflowTabsPosition = computed(() =>
   settingStore.get('Comfy.Workflow.WorkflowTabsPosition')
 )
@@ -89,10 +69,6 @@ const showTopMenu = computed(
   () => betaMenuEnabled.value && !workspaceState.focusMode
 )
 
-const openUserSettings = () => {
-  dialogService.showSettingsDialog('user')
-}
-
 const menuRight = ref<HTMLDivElement | null>(null)
 // Menu-right holds legacy topbar elements attached by custom scripts
 onMounted(() => {