From 77473622fd50783c76f7901a63f1234f9fd54887 Mon Sep 17 00:00:00 2001
From: Marty Friedel <marty.dev@mity.com.au>
Date: Wed, 27 Aug 2025 10:40:25 +0930
Subject: [PATCH 01/14] Update Avatar for 6.x appearance style

---
 resources/js/components/Avatar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 6ce462c33e6..829c41ac5a9 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="overflow-hidden rounded-full" v-tooltip="user.name">
-        <img v-if="useAvatar" :src="avatarSrc" class="block" @error="hasAvatarError = true" />
-        <div v-if="useInitials" class="flex h-full w-full items-center justify-center bg-pink text-center text-white">
-            <span>{{ initials }}</span>
-        </div>
-    </div>
+    <template v-if="hasAvatar">
+        <img :src="avatarSrc" class="size-7 rounded-full [button:has(&)]:rounded-full" :alt="user.name" @error="hasAvatarError = true" />
+    </template>
+    <template v-else>
+        <div :aria-label="user.name" class="size-7 text-white text-2xs font-medium flex items-center justify-center rounded-full [button:has(&)]:rounded-full bg-gradient-to-tr from-purple-500 to-red-600">{{ initials }}</div>
+    </template>
 </template>
 
 <script>

From fa68e83c42522263648f62be5e93e1a19db715f7 Mon Sep 17 00:00:00 2001
From: Marty Friedel <marty.dev@mity.com.au>
Date: Wed, 27 Aug 2025 10:58:42 +0930
Subject: [PATCH 02/14] Refactor to Composition

---
 resources/js/components/Avatar.vue | 85 ++++++++++++++++--------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/resources/js/components/Avatar.vue b/resources/js/components/Avatar.vue
index 829c41ac5a9..b5dd5a6cc9a 100644
--- a/resources/js/components/Avatar.vue
+++ b/resources/js/components/Avatar.vue
@@ -1,46 +1,51 @@
+<script setup>
+import { cva } from 'cva';
+import { twMerge } from 'tailwind-merge';
+import {computed, ref} from "vue";
+
+const props = defineProps({
+    user: Object,
+    class: {
+        type: String,
+        default: ''
+    }
+})
+
+const hasAvatarError = ref(false);
+
+const hasAvatar = computed(() => {
+    return !!props.user.avatar && !hasAvatarError.value
+});
+
+const avatarSrc = computed(() => {
+    if (!hasAvatar.value) return null;
+
+    return props.user.avatar.permalink || props.user.avatar;
+})
+
+const avatarClasses = computed(() => {
+    const classes = cva({
+        base: 'size-7 rounded-full [button:has(&)]:rounded-full',
+        variants: {
+            type: {
+                avatar: '',
+                initials: 'text-white text-2xs font-medium flex flex-shrink-0 items-center justify-center bg-gradient-to-tr from-purple-500 to-red-600'
+            }
+        }
+    })({
+        type: hasAvatar.value ? 'avatar' : 'initials'
+    })
+
+    return twMerge(classes, props.class);
+})
+</script>
 <template>
     <template v-if="hasAvatar">
-        <img :src="avatarSrc" class="size-7 rounded-full [button:has(&)]:rounded-full" :alt="user.name" @error="hasAvatarError = true" />
+        <img :src="avatarSrc" :class="avatarClasses" :alt="user.name" @error="hasAvatarError = true" />
     </template>
     <template v-else>
-        <div :aria-label="user.name" class="size-7 text-white text-2xs font-medium flex items-center justify-center rounded-full [button:has(&)]:rounded-full bg-gradient-to-tr from-purple-500 to-red-600">{{ initials }}</div>
+        <div :aria-label="user.name" :class="avatarClasses">
+            {{ user.initials || '?' }}
+        </div>
     </template>
 </template>
-
-<script>
-export default {
-    props: {
-        user: Object,
-    },
-
-    data() {
-        return {
-            hasAvatarError: false,
-        };
-    },
-
-    computed: {
-        initials() {
-            return this.user.initials || '?';
-        },
-
-        useAvatar() {
-            return this.hasAvatar && !this.hasAvatarError;
-        },
-
-        hasAvatar() {
-            return !!this.user.avatar;
-        },
-
-        avatarSrc() {
-            if (!this.hasAvatar) return null;
-
-            return this.user.avatar.permalink || this.user.avatar;
-        },
-
-        useInitials() {
-            return !this.hasAvatar || this.hasAvatarError;
-        },
-    },
-};
-</script>

From 3c4920979944eaeebb383d87b088a8e1ddeceec9 Mon Sep 17 00:00:00 2001
From: Marty Friedel <marty.dev@mity.com.au>
Date: Wed, 27 Aug 2025 10:59:36 +0930
Subject: [PATCH 03/14] Clean up User Listing size and styles

---
 resources/js/components/users/Listing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 5afac7ac998..69baa1d5a25 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -14,7 +14,7 @@
         >
             <template #cell-email="{ row: user }">
                 <a class="title-index-field" :href="user.edit_url" @click.stop>
-                    <avatar :user="user" class="h-8 w-8 rounded-full ltr:mr-2 rtl:ml-2" />
+                    <avatar :user="user" class="size-8 text-xs ltr:mr-2 rtl:ml-2" />
                     <span v-text="user.email" />
                 </a>
             </template>

From 4d333b21c3dbdf3fcd884c6f3cd00aa7fbc5a8a4 Mon Sep 17 00:00:00 2001
From: Marty Friedel <marty.dev@mity.com.au>
Date: Wed, 27 Aug 2025 11:08:14 +0930
Subject: [PATCH 04/14] Use Vue component throughout the CP

---
 resources/views/components/avatar.blade.php        | 7 -------
 resources/views/components/user-dropdown.blade.php | 6 ++++--
 2 files changed, 4 insertions(+), 9 deletions(-)
 delete mode 100644 resources/views/components/avatar.blade.php

diff --git a/resources/views/components/avatar.blade.php b/resources/views/components/avatar.blade.php
deleted file mode 100644
index babc910c8d6..00000000000
--- a/resources/views/components/avatar.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@props(['user', 'class' => ''])
-
-@if ($user->avatar())
-    <img src="{{ $user->avatar() }}" class="size-7 rounded-full [button:has(&)]:rounded-full {{ $class ?? '' }}" alt="{{ $user->name() }}" />
-@else
-    <div aria-label="{{ $user->name() }}" class="size-7 text-white text-2xs font-medium flex items-center justify-center rounded-full [button:has(&)]:rounded-full bg-gradient-to-tr from-purple-500 to-red-600 {{ $class ?? '' }}">{{ $user->initials() }}</div>
-@endif
diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
index 3e0225eb4e2..8c48e573e7c 100644
--- a/resources/views/components/user-dropdown.blade.php
+++ b/resources/views/components/user-dropdown.blade.php
@@ -1,13 +1,15 @@
 <ui-dropdown align="end" x-cloak>
     <template #trigger>
         <ui-button :icon-only="true" variant="ghost">
-            <x-statamic::avatar :user="$user" />
+            <avatar :user='@json($user)' />
         </ui-button>
     </template>
 
     <ui-dropdown-header>
         <div class="flex items-center gap-2">
-            <x-statamic::avatar :user="$user" class="size-8!" />
+            <div>
+                <avatar :user='@json($user)' class="size-8" />
+            </div>
             <div>
                 <div class="text-sm" v-pre>{{ $user->email() }}</div>
                 @if ($user->isSuper())

From e9ab06dee3a32884056207209a906e3dc4d75994 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 10:46:33 -0400
Subject: [PATCH 05/14] Move avatar to ui components

---
 resources/js/bootstrap/components.js               | 2 --
 resources/js/components/{ => ui}/Avatar.vue        | 0
 resources/js/components/ui/index.js                | 1 +
 resources/views/components/user-dropdown.blade.php | 6 +++---
 4 files changed, 4 insertions(+), 5 deletions(-)
 rename resources/js/components/{ => ui}/Avatar.vue (100%)

diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index eded87fdb21..4b82c9d5cce 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -17,7 +17,6 @@ import FileIcon from '../components/FileIcon.vue';
 
 import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
-import Avatar from '../components/Avatar.vue';
 import CreateEntryButton from '../components/entries/CreateEntryButton.vue';
 import Portal from '../components/portals/Portal.vue';
 import ConfirmationModal from '../components/modals/ConfirmationModal.vue';
@@ -62,7 +61,6 @@ export default function registerGlobalComponents(app) {
 
     app.component('slugify', Slugify);
     app.component('element-container', ElementContainer);
-    app.component('avatar', Avatar);
     app.component('create-entry-button', CreateEntryButton);
     app.component('portal', Portal);
     app.component('date-time', DateTime);
diff --git a/resources/js/components/Avatar.vue b/resources/js/components/ui/Avatar.vue
similarity index 100%
rename from resources/js/components/Avatar.vue
rename to resources/js/components/ui/Avatar.vue
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b07211b6a75..bed939ed8b4 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -1,5 +1,6 @@
 export * from '../../../../packages/ui/src/index.js';
 
+export { default as Avatar } from "./Avatar.vue";
 export { default as CreateForm } from "./CreateForm.vue";
 export { default as LivePreview } from "./LivePreview/LivePreview.vue";
 import { default as LivePreviewPopout } from "./LivePreview/Popout.vue";
diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
index 13f4eb862ba..9ef1ebab75e 100644
--- a/resources/views/components/user-dropdown.blade.php
+++ b/resources/views/components/user-dropdown.blade.php
@@ -1,18 +1,18 @@
 <div v-if="false" class="inline-flex items-center justify-center h-10 w-10">
-    <avatar :user='@json($user)' />
+    <ui-avatar :user='@json($user)' />
 </div>
 
 <ui-dropdown align="end" v-cloak>
     <template #trigger>
         <ui-button :icon-only="true" variant="ghost">
-            <avatar :user='@json($user)' />
+            <ui-avatar :user='@json($user)' />
         </ui-button>
     </template>
 
     <ui-dropdown-header>
         <div class="flex items-center gap-2">
             <div>
-                <avatar :user='@json($user)' class="size-8" />
+                <ui-avatar :user='@json($user)' class="size-8" />
             </div>
             <div>
                 <div class="text-sm" v-pre>{{ $user->email() }}</div>

From 6e435ae48d9cb2af107f1771fe692ee4d615a476 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 10:48:11 -0400
Subject: [PATCH 06/14] require user prop but default to empty object so it
 doesnt completely break

---
 resources/js/components/ui/Avatar.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index 12a4451533c..dfec14412d1 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -4,7 +4,11 @@ import { twMerge } from 'tailwind-merge';
 import {computed, ref} from "vue";
 
 const props = defineProps({
-    user: Object,
+    user: {
+        type: Object,
+        required: true,
+        default: () => ({})
+    },
     class: {
         type: String,
         default: ''

From fa15a43aab5e6042b90431cd84956bc34cf40114 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 11:01:34 -0400
Subject: [PATCH 07/14] typescript

---
 resources/js/components/ui/Avatar.vue | 29 +++++++++++++++++----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index dfec14412d1..fff1f8924d2 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -1,18 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import {computed, ref} from "vue";
 
-const props = defineProps({
-    user: {
-        type: Object,
-        required: true,
-        default: () => ({})
-    },
-    class: {
-        type: String,
-        default: ''
-    }
+interface Asset {
+    permalink: string;
+}
+
+interface User {
+    initials?: string;
+    avatar?: string | Asset;
+}
+
+interface Props {
+    user: User;
+    class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    user: () => ({}),
+    class: ''
 })
 
 const hasAvatarError = ref(false);

From ed55f94d2d59d382cb01e1d27e3e8528a35ee085 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 11:09:24 -0400
Subject: [PATCH 08/14] class prop isnt necessary

---
 resources/js/components/ui/Avatar.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index fff1f8924d2..d26dd888ef7 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
-import {computed, ref} from "vue";
+import {computed, ref, useAttrs} from "vue";
 
 interface Asset {
     permalink: string;
@@ -14,14 +14,13 @@ interface User {
 
 interface Props {
     user: User;
-    class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    user: () => ({}),
-    class: ''
+    user: () => ({})
 })
 
+const attrs = useAttrs();
 const hasAvatarError = ref(false);
 
 const hasAvatar = computed(() => {
@@ -47,7 +46,7 @@ const avatarClasses = computed(() => {
         type: hasAvatar.value ? 'avatar' : 'initials'
     })
 
-    return twMerge(classes, props.class);
+    return twMerge(classes, attrs.class);
 })
 </script>
 <template>

From f076b57c6602d6e5a81beb24304b25192a699d35 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 11:11:10 -0400
Subject: [PATCH 09/14] nitpick

---
 resources/js/components/ui/Avatar.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index d26dd888ef7..5c3d9d55cac 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
-import {computed, ref, useAttrs} from "vue";
+import { computed, ref, useAttrs } from "vue";
 
 interface Asset {
     permalink: string;
@@ -22,10 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const attrs = useAttrs();
 const hasAvatarError = ref(false);
-
-const hasAvatar = computed(() => {
-    return !!props.user.avatar && !hasAvatarError.value
-});
+const hasAvatar = computed(() => !!props.user.avatar && !hasAvatarError.value);
 
 const avatarSrc = computed(() => {
     if (!hasAvatar.value) return null;
@@ -49,6 +46,7 @@ const avatarClasses = computed(() => {
     return twMerge(classes, attrs.class);
 })
 </script>
+
 <template>
     <template v-if="hasAvatar">
         <img :src="avatarSrc" :class="avatarClasses" :alt="user.name" @error="hasAvatarError = true" />

From 439f02ecc089b075cf891166f3cd07908264164d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 11:26:26 -0400
Subject: [PATCH 10/14] fix types

---
 resources/js/components/ui/Avatar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index 5c3d9d55cac..240201f3c3a 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -10,6 +10,7 @@ interface Asset {
 interface User {
     initials?: string;
     avatar?: string | Asset;
+    name?: string;
 }
 
 interface Props {
@@ -27,7 +28,7 @@ const hasAvatar = computed(() => !!props.user.avatar && !hasAvatarError.value);
 const avatarSrc = computed(() => {
     if (!hasAvatar.value) return null;
 
-    return props.user.avatar.permalink || props.user.avatar;
+    return typeof props.user.avatar === 'object' ? props.user.avatar.permalink : props.user.avatar;
 })
 
 const avatarClasses = computed(() => {
@@ -43,7 +44,7 @@ const avatarClasses = computed(() => {
         type: hasAvatar.value ? 'avatar' : 'initials'
     })
 
-    return twMerge(classes, attrs.class);
+    return twMerge(classes, attrs.class as string);
 })
 </script>
 

From 7319e08f3bbbc6edb935390ad94c2f57615aefef Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 11:32:25 -0400
Subject: [PATCH 11/14] initials can be generated from name

---
 resources/js/components/ui/Avatar.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index 240201f3c3a..518419a4440 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -31,6 +31,19 @@ const avatarSrc = computed(() => {
     return typeof props.user.avatar === 'object' ? props.user.avatar.permalink : props.user.avatar;
 })
 
+const initials = computed(() => {
+    if (props.user.initials) return props.user.initials;
+
+    if (props.user.name) {
+        const names = props.user.name.split(' ');
+        return names.length === 1
+            ? names[0].charAt(0).toUpperCase()
+            : (names[0].charAt(0) + names[names.length - 1].charAt(0)).toUpperCase();
+    }
+
+    return '?';
+});
+
 const avatarClasses = computed(() => {
     const classes = cva({
         base: 'size-7 rounded-xl [button:has(&)]:rounded-xl shape-squircle',
@@ -54,7 +67,7 @@ const avatarClasses = computed(() => {
     </template>
     <template v-else>
         <div :aria-label="user.name" :class="avatarClasses">
-            {{ user.initials || '?' }}
+            {{ initials }}
         </div>
     </template>
 </template>

From c45d7766d5516616a94dc5eddb6f424f2903b38b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 12:40:24 -0400
Subject: [PATCH 12/14] export

---
 packages/cms/src/ui.js             | 1 +
 resources/js/bootstrap/cms/ui.js   | 1 +
 resources/js/tests/Package.test.js | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 9ad47008756..f33d2b00eab 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -1,5 +1,6 @@
 export const {
     AuthCard,
+    Avatar,
     Badge,
     Button,
     ButtonGroup,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 79970165f63..bc0dc3128ca 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -1,5 +1,6 @@
 export {
     AuthCard,
+    Avatar,
     Badge,
     Button,
     ButtonGroup,
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 2d4beceb854..7ab843eeb28 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -144,6 +144,7 @@ it('exports ui', async () => {
 
     const expectedCmsPackageExports = [
         ...expectedUiPackageExports,
+        'Avatar',
         'CommandPaletteItem',
         'CreateForm',
         'Listing',

From 2ca9935556052018855267d1e2f73daaddcae5fe Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 12:48:11 -0400
Subject: [PATCH 13/14] toJson one time

---
 resources/views/components/user-dropdown.blade.php | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
index 9ef1ebab75e..5f14f6a2fc2 100644
--- a/resources/views/components/user-dropdown.blade.php
+++ b/resources/views/components/user-dropdown.blade.php
@@ -1,18 +1,20 @@
+@php($userJson = json_encode($user))
+
 <div v-if="false" class="inline-flex items-center justify-center h-10 w-10">
-    <ui-avatar :user='@json($user)' />
+    <ui-avatar :user='{{ $userJson }}' />
 </div>
 
 <ui-dropdown align="end" v-cloak>
     <template #trigger>
         <ui-button :icon-only="true" variant="ghost">
-            <ui-avatar :user='@json($user)' />
+            <ui-avatar :user='{{ $userJson }}' />
         </ui-button>
     </template>
 
     <ui-dropdown-header>
         <div class="flex items-center gap-2">
             <div>
-                <ui-avatar :user='@json($user)' class="size-8" />
+                <ui-avatar :user='{{ $userJson }}' class="size-8" />
             </div>
             <div>
                 <div class="text-sm" v-pre>{{ $user->email() }}</div>

From 21af8eb07ac4f4ec65852eb08441ead4986b1c90 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 24 Sep 2025 12:49:08 -0400
Subject: [PATCH 14/14] div wrapper didnt seem necessary

---
 resources/views/components/user-dropdown.blade.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
index 5f14f6a2fc2..6f72bdf2430 100644
--- a/resources/views/components/user-dropdown.blade.php
+++ b/resources/views/components/user-dropdown.blade.php
@@ -13,9 +13,7 @@
 
     <ui-dropdown-header>
         <div class="flex items-center gap-2">
-            <div>
-                <ui-avatar :user='{{ $userJson }}' class="size-8" />
-            </div>
+            <ui-avatar :user='{{ $userJson }}' class="size-8" />
             <div>
                 <div class="text-sm" v-pre>{{ $user->email() }}</div>
                 @if ($user->isSuper())