From 1f16393dcaf675d7f1b123fdbada841467870e6c Mon Sep 17 00:00:00 2001
From: Twyco <twyco@icloud.com>
Date: Wed, 24 Jun 2026 16:34:00 +0200
Subject: [PATCH] Added UserAvatar

---
 resources/js/components/AppHeader.vue         | 18 +------
 resources/js/components/UserInfo.vue          |  9 +---
 .../js/components/ui/avatar/UserAvatar.vue    | 41 +++++++++++++++
 resources/js/pages/admin/users/Index.vue      | 51 +++++++++++++++----
 resources/js/pages/settings/Profile.vue       | 16 +-----
 5 files changed, 89 insertions(+), 46 deletions(-)
 create mode 100644 resources/js/components/ui/avatar/UserAvatar.vue

diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index ca3cb1c..bce4a1d 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -5,7 +5,6 @@ import { computed } from 'vue';
 import AppLogo from '@/components/AppLogo.vue';
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
@@ -33,10 +32,10 @@ import {
 } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import { getInitials } from '@/composables/useInitials';
 import { toUrl } from '@/lib/utils';
 import { dashboard } from '@/routes/index';
 import type { BreadcrumbItem, NavItem } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 type Props = {
     breadcrumbs?: BreadcrumbItem[];
@@ -245,20 +244,7 @@ const rightNavItems: NavItem[] = [
                                 size="icon"
                                 class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
                             >
-                                <Avatar
-                                    class="size-8 overflow-hidden rounded-full"
-                                >
-                                    <AvatarImage
-                                        v-if="auth.user.avatar"
-                                        :src="auth.user.avatar"
-                                        :alt="auth.user.name"
-                                    />
-                                    <AvatarFallback
-                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ getInitials(auth.user?.name) }}
-                                    </AvatarFallback>
-                                </Avatar>
+                                <UserAvatar rounded />
                             </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end" class="w-56">
diff --git a/resources/js/components/UserInfo.vue b/resources/js/components/UserInfo.vue
index bdae50b..598390b 100644
--- a/resources/js/components/UserInfo.vue
+++ b/resources/js/components/UserInfo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 type Props = {
     user: User;
@@ -22,12 +22,7 @@ const showAvatar = computed(
 </script>
 
 <template>
-    <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
-        <AvatarFallback class="rounded-lg text-black dark:text-white">
-            {{ getInitials(user.name) }}
-        </AvatarFallback>
-    </Avatar>
+    <UserAvatar />
 
     <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>
diff --git a/resources/js/components/ui/avatar/UserAvatar.vue b/resources/js/components/ui/avatar/UserAvatar.vue
new file mode 100644
index 0000000..3412c64
--- /dev/null
+++ b/resources/js/components/ui/avatar/UserAvatar.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { getInitials } from "@/composables/useInitials";
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar/index";
+import { usePage } from "@inertiajs/vue3";
+import { computed, PropType } from "vue";
+import { UserModel } from "@/types/models/user-model";
+
+const props = defineProps({
+    user: {
+        type: Object as PropType<UserModel>,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const page = usePage();
+const auth = computed(() => page.props.auth);
+
+const user = computed(() => props.user ?? auth.value.user)
+</script>
+
+<template>
+    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
+        <AvatarImage
+            v-if="user.avatar"
+            :src="user.avatar"
+            :alt="user.name"
+        />
+        <AvatarFallback
+            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+        >
+            {{ getInitials(auth.user?.name) }}
+        </AvatarFallback>
+    </Avatar>
+</template>
diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
index 9c1ce93..754e0ae 100644
--- a/resources/js/pages/admin/users/Index.vue
+++ b/resources/js/pages/admin/users/Index.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { Form, Head, Link } from '@inertiajs/vue3';
-import { FolderPlus, KeyRound, Pencil, Shield, UserPlus, Users } from 'lucide-vue-next';
+import {
+    FolderPlus,
+    KeyRound,
+    Pencil,
+    Shield,
+    UserPlus,
+    Users,
+} from 'lucide-vue-next';
 import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
 import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
@@ -19,6 +26,7 @@ import {
     index as adminUsers,
 } from '@/routes/admin/users';
 import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 const props = defineProps<AdminUsersPageProps>();
 
@@ -111,8 +119,13 @@ const hasPermission = (actorId: number, permission: string) =>
                                 >
                                     <td class="px-4 py-4">
                                         <div
-                                            class="text-foreground font-medium"
+                                            class="text-foreground items-medium flex items-center"
                                         >
+                                            <UserAvatar
+                                                :user="user"
+                                                class="mr-2 size-8"
+                                                rounded
+                                            />
                                             {{ user.name }}
                                         </div>
                                     </td>
@@ -122,7 +135,9 @@ const hasPermission = (actorId: number, permission: string) =>
                                     <td class="px-4 py-4">
                                         <div class="flex flex-wrap gap-2">
                                             <Badge
-                                                v-if="user.must_change_password_on_next_login"
+                                                v-if="
+                                                    user.must_change_password_on_next_login
+                                                "
                                                 variant="outline"
                                                 class="gap-1.5"
                                             >
@@ -170,10 +185,24 @@ const hasPermission = (actorId: number, permission: string) =>
                                     </td>
                                     <td class="px-4 py-4">
                                         <div class="flex justify-end">
-                                            <div class="flex flex-wrap justify-end gap-3">
-                                                <Button as-child size="sm" variant="outline">
-                                                    <Link :href="editAdminUser(user.id)">
-                                                        <Pencil class="size-4" />
+                                            <div
+                                                class="flex flex-wrap justify-end gap-3"
+                                            >
+                                                <Button
+                                                    as-child
+                                                    size="sm"
+                                                    variant="outline"
+                                                >
+                                                    <Link
+                                                        :href="
+                                                            editAdminUser(
+                                                                user.id,
+                                                            )
+                                                        "
+                                                    >
+                                                        <Pencil
+                                                            class="size-4"
+                                                        />
                                                         Edit
                                                     </Link>
                                                 </Button>
@@ -195,7 +224,9 @@ const hasPermission = (actorId: number, permission: string) =>
                                                         <input
                                                             type="checkbox"
                                                             name="permissions[]"
-                                                            :value="option.value"
+                                                            :value="
+                                                                option.value
+                                                            "
                                                             :checked="
                                                                 hasPermission(
                                                                     user.id,
@@ -209,7 +240,9 @@ const hasPermission = (actorId: number, permission: string) =>
                                                         }}</span>
                                                     </label>
 
-                                                    <div class="w-full sm:hidden" />
+                                                    <div
+                                                        class="w-full sm:hidden"
+                                                    />
 
                                                     <Button
                                                         type="submit"
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index 677c901..82ddff3 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -6,7 +6,6 @@ import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileCo
 import DeleteUser from '@/components/DeleteUser.vue';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -14,8 +13,8 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/profile/index';
 import { send } from '@/routes/verification';
-import { getInitials } from '@/composables/useInitials';
 import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 defineProps<SettingsProfilePageProps>();
 
@@ -94,18 +93,7 @@ onBeforeUnmount(() => {
                     <div class="grid gap-3">
                         <Label for="avatar">Profile picture</Label>
                         <div class="flex items-center gap-4">
-                            <Avatar class="size-16 overflow-hidden rounded-lg">
-                                <AvatarImage
-                                    v-if="displayedAvatar"
-                                    :src="displayedAvatar"
-                                    :alt="user.name"
-                                />
-                                <AvatarFallback
-                                    class="rounded-lg font-semibold text-black dark:text-white"
-                                >
-                                    {{ getInitials(user.name) }}
-                                </AvatarFallback>
-                            </Avatar>
+                            <UserAvatar class="size-16" />
                             <div class="grid flex-1 gap-2">
                                 <div class="flex flex-col gap-2 sm:flex-row">
                                     <Input