[backport cloud/1.34] style: redesign user popover with improved layout and integration with design system (#7311)

Backport of #7303 to `cloud/1.34`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7311-backport-cloud-1-34-style-redesign-user-popover-with-improved-layout-and-integration-w-2c56d73d365081019e0beea29f06e362)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

src/components/topbar/CurrentUserPopover.test.ts

@@ -1,10 +1,10 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import Button from 'primevue/button'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
@@ -74,7 +74,9 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     getAuthHeader: vi
       .fn()
-      .mockResolvedValue({ Authorization: 'Bearer mock-token' })
+      .mockResolvedValue({ Authorization: 'Bearer mock-token' }),
+    balance: { amount_micros: 100_000 }, // 100,000 cents = ~211,000 credits
+    isFetchingBalance: false
   }))
 }))
 
@@ -107,6 +109,39 @@ vi.mock('@/components/common/UserCredit.vue', () => ({
   }
 }))
 
+// Mock formatCreditsFromCents
+vi.mock('@/base/credits/comfyCredits', () => ({
+  formatCreditsFromCents: vi.fn(({ cents }) => (cents / 100).toString())
+}))
+
+// Mock useExternalLink
+vi.mock('@/composables/useExternalLink', () => ({
+  useExternalLink: vi.fn(() => ({
+    buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`)
+  }))
+}))
+
+// Mock useFeatureFlags
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: {
+      subscriptionTiersEnabled: true
+    }
+  }))
+}))
+
+// Mock useTelemetry
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: vi.fn(() => ({
+    trackAddApiCreditButtonClicked: vi.fn()
+  }))
+}))
+
+// Mock isCloud
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
 vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
   default: {
     name: 'SubscribeButtonMock',
@@ -145,27 +180,37 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.text()).toContain('test@example.com')
   })
 
-  it('renders logout button with correct props', () => {
+  it('calls formatCreditsFromCents with correct parameters and displays formatted credits', () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (last button)
-    const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[4]
+    expect(formatCreditsFromCents).toHaveBeenCalledWith({
+      cents: 100_000,
+      locale: 'en',
+      numberOptions: {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2
+      }
+    })
 
-    // Check that logout button has correct props
-    expect(logoutButton.props('label')).toBe('Log Out')
-    expect(logoutButton.props('icon')).toBe('pi pi-sign-out')
+    // Verify the formatted credit string (1000) is rendered in the DOM
+    expect(wrapper.text()).toContain('1000')
   })
 
-  it('opens user settings and emits close event when settings button is clicked', async () => {
+  it('renders logout menu item with correct text', () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the settings button (third button)
-    const buttons = wrapper.findAllComponents(Button)
-    const settingsButton = buttons[2]
+    const logoutItem = wrapper.find('[data-testid="logout-menu-item"]')
+    expect(logoutItem.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Log Out')
+  })
 
-    // Click the settings button
-    await settingsButton.trigger('click')
+  it('opens user settings and emits close event when settings item is clicked', async () => {
+    const wrapper = mountComponent()
+
+    const settingsItem = wrapper.find('[data-testid="user-settings-menu-item"]')
+    expect(settingsItem.exists()).toBe(true)
+
+    await settingsItem.trigger('click')
 
     // Verify showSettingsDialog was called with 'user'
     expect(mockShowSettingsDialog).toHaveBeenCalledWith('user')
@@ -175,15 +220,13 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.emitted('close')!.length).toBe(1)
   })
 
-  it('calls logout function and emits close event when logout button is clicked', async () => {
+  it('calls logout function and emits close event when logout item is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (last button)
-    const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[4]
+    const logoutItem = wrapper.find('[data-testid="logout-menu-item"]')
+    expect(logoutItem.exists()).toBe(true)
 
-    // Click the logout button
-    await logoutButton.trigger('click')
+    await logoutItem.trigger('click')
 
     // Verify handleSignOut was called
     expect(mockHandleSignOut).toHaveBeenCalled()
@@ -193,15 +236,15 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.emitted('close')!.length).toBe(1)
   })
 
-  it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
+  it('opens API pricing docs and emits close event when partner nodes item is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the Partner Nodes info button (first one)
-    const buttons = wrapper.findAllComponents(Button)
-    const partnerNodesButton = buttons[0]
+    const partnerNodesItem = wrapper.find(
+      '[data-testid="partner-nodes-menu-item"]'
+    )
+    expect(partnerNodesItem.exists()).toBe(true)
 
-    // Click the Partner Nodes button
-    await partnerNodesButton.trigger('click')
+    await partnerNodesItem.trigger('click')
 
     // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
@@ -217,11 +260,9 @@ describe('CurrentUserPopover', () => {
   it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the top-up button (second one)
-    const buttons = wrapper.findAllComponents(Button)
-    const topUpButton = buttons[1]
+    const topUpButton = wrapper.find('[data-testid="add-credits-button"]')
+    expect(topUpButton.exists()).toBe(true)
 
-    // Click the top-up button
     await topUpButton.trigger('click')
 
     // Verify showTopUpCreditsDialog was called

src/components/topbar/CurrentUserPopover.vue

@@ -1,120 +1,131 @@
 <!-- A popover that shows current user information and actions -->
 <template>
-  <div class="current-user-popover w-72">
+  <div
+    class="current-user-popover w-80 -m-3 p-2 rounded-lg border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
+  >
     <!-- User Info Section -->
-    <div class="p-3">
-      <div class="flex flex-col items-center">
-        <UserAvatar
-          class="mb-3"
-          :photo-url="userPhotoUrl"
-          :pt:icon:class="{
-            'text-2xl!': !userPhotoUrl
-          }"
-          size="large"
-        />
+    <div class="flex flex-col items-center px-0 py-3 mb-4">
+      <UserAvatar
+        class="mb-1"
+        :photo-url="userPhotoUrl"
+        :pt:icon:class="{
+          'text-2xl!': !userPhotoUrl
+        }"
+        size="large"
+      />
 
-        <!-- User Details -->
-        <h3 class="my-0 mb-1 truncate text-lg font-semibold">
-          {{ userDisplayName || $t('g.user') }}
-        </h3>
-        <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
-          {{ userEmail }}
-        </p>
-      </div>
+      <!-- User Details -->
+      <h3 class="my-0 mb-1 truncate text-base font-bold text-base-foreground">
+        {{ userDisplayName || $t('g.user') }}
+      </h3>
+      <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
+        {{ userEmail }}
+      </p>
     </div>
 
-    <div v-if="isActiveSubscription" class="flex items-center justify-between">
-      <div class="flex flex-col gap-1">
-        <UserCredit text-class="text-2xl" />
-        <div
-          v-if="flags.subscriptionTiersEnabled"
-          class="flex items-center gap-2"
-        >
-          <i
-            v-tooltip="{
-              value: $t('credits.unified.tooltip'),
-              showDelay: 300,
-              hideDelay: 300
-            }"
-            class="icon-[lucide--circle-help] text-muted cursor-help text-xs"
-          />
-          <span class="text-xs text-muted">{{
-            $t('credits.unified.message')
-          }}</span>
-        </div>
-        <Button
-          :label="$t('subscription.partnerNodesCredits')"
-          severity="secondary"
-          text
-          size="small"
-          class="pl-6 p-0 h-auto justify-start"
-          :pt="{
-            root: {
-              class: 'hover:bg-transparent active:bg-transparent'
-            }
-          }"
-          @click="handleOpenPartnerNodesInfo"
-        />
-      </div>
+    <!-- Credits Section -->
+    <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
+      <i class="icon-[lucide--component] text-amber-400 text-sm" />
+      <span class="text-base font-normal text-base-foreground flex-1">{{
+        formattedBalance
+      }}</span>
       <Button
-        :label="$t('credits.topUp.topUp')"
+        :label="$t('subscription.addCredits')"
         severity="secondary"
         size="small"
+        class="text-base-foreground"
+        data-testid="add-credits-button"
         @click="handleTopUp"
       />
     </div>
+
     <SubscribeButton
       v-else
+      class="mx-4"
       :label="$t('subscription.subscribeToComfyCloud')"
       size="small"
       variant="gradient"
       @subscribed="handleSubscribed"
     />
 
-    <Divider class="my-2" />
+    <!-- Credits info row -->
+    <div
+      v-if="flags.subscriptionTiersEnabled && isActiveSubscription"
+      class="flex items-center gap-2 px-4 py-0"
+    >
+      <i
+        v-tooltip="{
+          value: $t('credits.unified.tooltip'),
+          showDelay: 300,
+          hideDelay: 300
+        }"
+        class="icon-[lucide--circle-help] cursor-help text-xs text-muted-foreground"
+      />
+      <span class="text-sm text-muted-foreground">{{
+        $t('credits.unified.message')
+      }}</span>
+    </div>
 
-    <Button
-      class="justify-start"
-      :label="$t('userSettings.title')"
-      icon="pi pi-cog"
-      text
-      fluid
-      severity="secondary"
-      @click="handleOpenUserSettings"
-    />
+    <Divider class="my-2 mx-0" />
 
-    <Button
+    <div
       v-if="isActiveSubscription"
-      class="justify-start"
-      :label="$t(planSettingsLabel)"
-      icon="pi pi-receipt"
-      text
-      fluid
-      severity="secondary"
+      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      data-testid="partner-nodes-menu-item"
+      @click="handleOpenPartnerNodesInfo"
+    >
+      <i class="icon-[lucide--tag] text-muted-foreground text-sm" />
+      <span class="text-sm text-base-foreground flex-1">{{
+        $t('subscription.partnerNodesCredits')
+      }}</span>
+    </div>
+
+    <div
+      v-if="isActiveSubscription"
+      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      data-testid="plan-credits-menu-item"
       @click="handleOpenPlanAndCreditsSettings"
-    />
+    >
+      <i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
+      <span class="text-sm text-base-foreground flex-1">{{
+        $t(planSettingsLabel)
+      }}</span>
+    </div>
 
-    <Divider class="my-2" />
+    <div
+      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      data-testid="user-settings-menu-item"
+      @click="handleOpenUserSettings"
+    >
+      <i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
+      <span class="text-sm text-base-foreground flex-1">{{
+        $t('userSettings.title')
+      }}</span>
+    </div>
 
-    <Button
-      class="justify-start"
-      :label="$t('auth.signOut.signOut')"
-      icon="pi pi-sign-out"
-      text
-      fluid
-      severity="secondary"
+    <Divider class="my-2 mx-0" />
+
+    <div
+      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
+      data-testid="logout-menu-item"
       @click="handleLogout"
-    />
+    >
+      <i class="icon-[lucide--log-out] text-muted-foreground text-sm" />
+      <span class="text-sm text-base-foreground flex-1">{{
+        $t('auth.signOut.signOut')
+      }}</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import UserAvatar from '@/components/common/UserAvatar.vue'
-import UserCredit from '@/components/common/UserCredit.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
@@ -124,6 +135,7 @@ import { useSubscription } from '@/platform/cloud/subscription/composables/useSu
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const emit = defineEmits<{
   close: []
@@ -138,9 +150,24 @@ const planSettingsLabel = isCloud
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
+const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
 const { isActiveSubscription, fetchStatus } = useSubscription()
 const { flags } = useFeatureFlags()
+const { locale } = useI18n()
+
+const formattedBalance = computed(() => {
+  // Backend returns cents despite the *_micros naming convention.
+  const cents = authStore.balance?.amount_micros ?? 0
+  return formatCreditsFromCents({
+    cents,
+    locale: locale.value,
+    numberOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }
+  })
+})
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')

src/locales/en/main.json

@@ -1911,10 +1911,10 @@
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
     "viewEnterprise": "view enterprise",
-    "partnerNodesCredits": "Partner Nodes pricing table"
+    "partnerNodesCredits": "Partner nodes pricing"
   },
   "userSettings": {
-    "title": "User Settings",
+    "title": "My Account Settings",
     "name": "Name",
     "email": "Email",
     "provider": "Sign-in Provider",