feat: pivot to social media workflow app

frontend/src/components/AppAvatar.vue

@@ -0,0 +1,79 @@
+<script setup>
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        name: {
+            type: String,
+            default: '',
+        },
+        email: {
+            type: String,
+            default: '',
+        },
+        src: {
+            type: String,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: 'md',
+        },
+    });
+
+    const initials = computed(() => {
+        const basis = props.name?.trim() || props.email?.trim() || '?';
+        const parts = basis.split(/[\s@._-]+/).filter(Boolean);
+
+        if (!parts.length) {
+            return '?';
+        }
+
+        if (parts.length === 1) {
+            return parts[0].slice(0, 2).toUpperCase();
+        }
+
+        return `${parts[0][0] ?? ''}${parts[1][0] ?? ''}`.toUpperCase();
+    });
+
+    const classes = computed(() => ({
+        avatar: true,
+        'avatar-sm': props.size === 'sm',
+        'avatar-md': props.size === 'md',
+        'avatar-lg': props.size === 'lg',
+    }));
+</script>
+
+<template>
+    <div :class="classes">
+        <img
+            v-if="src"
+            :src="src"
+            :alt="name || email || 'Avatar'"
+        />
+        <span v-else>{{ initials }}</span>
+    </div>
+</template>
+
+<style scoped>
+    .avatar {
+        @apply inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-black uppercase;
+        background: linear-gradient(135deg, rgba(15, 118, 110, 0.16) 0%, rgba(255, 138, 61, 0.18) 100%);
+        color: #172033;
+    }
+
+    .avatar img {
+        @apply h-full w-full object-cover;
+    }
+
+    .avatar-sm {
+        @apply h-9 w-9 text-xs;
+    }
+
+    .avatar-md {
+        @apply h-11 w-11 text-sm;
+    }
+
+    .avatar-lg {
+        @apply h-14 w-14 text-base;
+    }
+</style>