Show embedded avatar preview after selection

frontend/src/components/user/profile/ProfileAvatarCard.vue

@@ -14,11 +14,13 @@
 
     <div :class="props.embedded ? 'space-y-3' : 'flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start'">
       <div
-        v-if="!props.embedded"
-        class="flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-3xl font-bold text-white shadow-lg shadow-primary-500/20"
+        :class="props.embedded
+          ? 'flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-xl font-bold text-white shadow-lg shadow-primary-500/20'
+          : 'flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-3xl font-bold text-white shadow-lg shadow-primary-500/20'"
       >
         <img
           v-if="avatarPreviewUrl"
+          data-testid="profile-avatar-preview"
           :src="avatarPreviewUrl"
           :alt="displayName"
           class="h-full w-full object-cover"

frontend/src/components/user/profile/__tests__/ProfileAvatarCard.spec.ts

@@ -208,6 +208,35 @@ describe('ProfileAvatarCard', () => {
     expect(showErrorMock).not.toHaveBeenCalled()
   })
 
+  it('shows a preview after selecting an avatar in embedded mode', async () => {
+    installAvatarCompressionMocks()
+    authStoreState.user = createUser()
+
+    const wrapper = mount(ProfileAvatarCard, {
+      props: {
+        user: authStoreState.user,
+        embedded: true
+      },
+      global: {
+        stubs: {
+          Icon: true
+        }
+      }
+    })
+
+    const fileInput = wrapper.get('[data-testid="profile-avatar-file-input"]')
+    Object.defineProperty(fileInput.element, 'files', {
+      value: [new File([new Uint8Array(220 * 1024)], 'avatar.png', { type: 'image/png' })],
+      configurable: true
+    })
+
+    await fileInput.trigger('change')
+    await flushAsyncWork()
+
+    const preview = wrapper.get('[data-testid="profile-avatar-preview"]')
+    expect(preview.attributes('src')).toBe('data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI=')
+  })
+
   it('deletes the current avatar', async () => {
     const updatedUser = createUser({ avatar_url: null })
     updateProfileMock.mockResolvedValue(updatedUser)