From 440527c0785224bbbdff3e8845d92067600e23b4 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 17 Jan 2025 18:53:43 +0100
Subject: [PATCH] feat(front): username initials as fallback for profile image
 and usermenu icon

---
 front/src/components/common/ActorAvatar.vue |  3 +--
 front/src/style/components/_avatar.scss     |  2 +-
 front/src/ui/components/UserMenu.vue        | 11 ++++++++++
 front/src/views/auth/ProfileBase.vue        | 24 ++++++++++++---------
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/front/src/components/common/ActorAvatar.vue b/front/src/components/common/ActorAvatar.vue
index 815a6f348..f6222afa1 100644
--- a/front/src/components/common/ActorAvatar.vue
+++ b/front/src/components/common/ActorAvatar.vue
@@ -31,7 +31,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
 <style lang="scss">
 .ui.circular.avatar {
   float: left;
-  margin-right: 8px;
   text-align: center;
   border-radius: 50%;
 
@@ -39,4 +38,4 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
     align-content: center;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/style/components/_avatar.scss b/front/src/style/components/_avatar.scss
index f7c3506ef..350937ce9 100644
--- a/front/src/style/components/_avatar.scss
+++ b/front/src/style/components/_avatar.scss
@@ -5,7 +5,7 @@
   width: 3em;
 }
 
-.ui.circular.avatar {
+.ui.tiny.avatar {
   width: 28px;
   height: 28px;
   font-size: 1em !important;
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index 87e46931b..611e33584 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { computed, ref} from 'vue'
 import { useStore } from '~/store'
 import { useRoute } from 'vue-router'
+import { hashCode, intToRGB } from '~/utils/color'
 
 import useThemeList from '~/composables/useThemeList'
 import useTheme from '~/composables/useTheme'
@@ -23,6 +24,9 @@ const { theme } = useTheme()
 
 const isOpen = ref(false)
 
+const actorColor = computed(() => intToRGB(hashCode(store.state.auth.profile.full_username)))
+const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.value}` }))
+
 const labels = computed(() => ({
   profile: t('components.common.UserMenu.link.profile'),
   settings: t('components.common.UserMenu.link.settings'),
@@ -57,6 +61,13 @@ const labels = computed(() => ({
         :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
         class="avatar"
       >
+      <span
+        v-else-if="store.state.auth.authenticated"
+        :style="defaultAvatarStyle"
+        class="ui avatar circular label"
+      >
+        {{ store.state.auth.profile?.full_username?.[0] || "" }}
+      </span>
       <i v-else class="bi bi-gear-fill" />
     </Button>
     <template #items>
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index 1243726c6..23e52e111 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -5,6 +5,8 @@ import { onBeforeRouteUpdate } from 'vue-router'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
+import { hashCode, intToRGB } from '~/utils/color'
+
 import UserFollowButton from '~/components/federation/UserFollowButton.vue'
 import axios from 'axios'
 
@@ -39,6 +41,9 @@ const store = useStore()
 // We are working either with an Actor or null
 const object = ref<Actor | null>(null)
 
+const actorColor = computed(() => intToRGB(hashCode(object.full_username)))
+const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.value}` }))
+
 const displayName = computed(() => object.value?.name ?? object.value?.preferred_username)
 const fullUsername = computed(() => props.domain
   ? `${props.username}@${props.domain}`
@@ -83,19 +88,19 @@ watch(props, fetchData, { immediate: true })
   >
     <Layout flex>
       <!-- Profile Picture -->
-      <i
-        v-if="!object?.icon"
-        class="avatar icon"
-      >
-        <!-- TODO: Get User Initials -->
-        TU
-      </i>
       <img
-        v-else
+      v-if="object?.icon"
         v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
         alt=""
         class="avatar"
       />
+      <span
+        v-else
+        :style="defaultAvatarStyle"
+        class="ui avatar circular label"
+      >
+        {{ store.state.auth.profile?.full_username?.[0] || "" }}
+      </span>
       <!-- <div class="ui five wide column">
         <button
           ref="dropdown"
@@ -264,11 +269,10 @@ watch(props, fetchData, { immediate: true })
     border-radius: 50%;
   }
 
-  i.avatar {
+  span.avatar {
     font-size: 100px;
     font-style: normal;
     font-weight: 800;
-    padding: 26px 0px 0px 26px;
     background-color: var(--fw-gray-500);
     border-radius: 50%;
     width: 176px;