Profile picture display has been standardized across the board.

apps/web/src/components/UserAvatar.vue

@@ -1,29 +1,52 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { personInitials } from '@/lib/person-insights';
+import { DEFAULT_USER_AVATAR, primeUserAvatar, userAvatarSrc } from '@/lib/userAvatars';
 
 const props = withDefaults(
   defineProps<{
     name?: string | null;
     src?: string | null;
+    /** شناسه کاربر سیستم؛ اگر داده شود عکس پروفایل واقعی او نمایش داده می‌شود */
+    userId?: string | null;
+    hasAvatar?: boolean;
     size?: number;
   }>(),
   {
     name: '',
-    src: '/brand/user-avatar.png',
+    src: undefined,
+    userId: null,
+    hasAvatar: undefined,
     size: 28,
   },
 );
 
+watch(
+  () => [props.userId, props.hasAvatar] as const,
+  ([id, has]) => {
+    if (id) primeUserAvatar(id, has);
+  },
+  { immediate: true },
+);
+
+const resolvedSrc = computed(() => {
+  if (props.src !== undefined) return props.src;
+  if (props.userId) return userAvatarSrc(props.userId);
+  return DEFAULT_USER_AVATAR;
+});
+
 const initials = computed(() => personInitials(props.name));
 const failed = ref(false);
+watch(resolvedSrc, () => {
+  failed.value = false;
+});
 </script>
 
 <template>
   <span class="user-avatar" :style="{ width: `${size}px`, height: `${size}px` }" :title="name || undefined">
     <img
-      v-if="src && !failed"
-      :src="src"
+      v-if="resolvedSrc && !failed"
+      :src="resolvedSrc"
       :alt="name || 'آواتار'"
       @error="failed = true"
     />