refactor: ♻️ Refactor Avatar usage into a single component

components/profiles/avatar.vue

@@ -0,0 +1,31 @@
+<template>
+    <Avatar shape="square">
+        <AvatarFallback v-if="name">
+            {{ getInitials(name) }}
+        </AvatarFallback>
+        <AvatarImage v-if="src" :src="src" />
+    </Avatar>
+</template>
+
+<script lang="ts" setup>
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+
+const { name } = defineProps<{
+    src?: string;
+    name?: string;
+}>();
+
+/**
+ * Gets the initials of any string, even if it's not a name.
+ * If not a name, it will return the first two characters.
+ * @param name
+ */
+const getInitials = (name: string): string => {
+    const initials = name.match(/\b\w/g) || [];
+
+    const firstLetter = initials.shift() || name[0] || "";
+    const secondLetter = initials.pop() || name[1] || "";
+
+    return `${firstLetter}${secondLetter}`.toUpperCase();
+};
+</script>

components/profiles/profile-header.vue

@@ -6,19 +6,18 @@
             <div class="absolute bottom-0 w-full h-1/3 bg-gradient-to-b from-black/0 to-black/40"></div>
         </div>
         <div class="absolute bottom-0 translate-y-1/3 left-4 flex flex-row items-start gap-2">
-            <Avatar shape="square" size="lg" class="border">
-                <AvatarImage :src="avatar" alt="" />
-                <AvatarFallback>AA</AvatarFallback>
-            </Avatar>
+            <Avatar size="lg" class="border" :src="avatar" :name="displayName" />
         </div>
     </CardHeader>
 </template>
 
 <script lang="ts" setup>
 import { CardHeader } from "~/components/ui/card";
+import Avatar from "./avatar.vue";
 
 defineProps<{
     header: string;
     avatar: string;
+    displayName: string;
 }>();
 </script>

components/profiles/profile.vue

@@ -1,6 +1,6 @@
 <template>
     <Card>
-        <ProfileHeader :header="account.header" :avatar="account.avatar" />
+        <ProfileHeader :header="account.header" :avatar="account.avatar" :display-name="account.display_name" />
         <CardContent class="pt-3 gap-4 flex flex-col">
             <div class="flex flex-row justify-end gap-2">
                 <Button variant="secondary" :disabled="isLoading || relationship?.requested" v-if="!isMe"