fix: do not break letter avatars when switching languages

src/renderer/components/Input/InputGrid/InputGrid.vue

@@ -109,7 +109,12 @@ export default {
     },
 
     activeItem () {
-      return this.allItems.find(i => i.title === this.selectedItem.title)
+      return this.allItems.find(item => {
+        return this.selectedItem.onlyLetter
+          ? item.onlyLetter
+          // Letter avatar title depends on language
+          : item.title === this.selectedItem.title
+      })
     }
   },
 

src/renderer/components/Input/InputGrid/InputGridItem.vue

@@ -25,7 +25,7 @@
       </span>
       <ButtonLetter
         :value="label"
-        :size="!isForModal ? '2xl' : null"
+        :size="isForModal ? null : '2xl'"
         :class="{
           'w-24 h-24 text-5xl': isForModal
         }"
@@ -41,6 +41,7 @@
     >
       <Component :is="component" />
     </div>
+
     <span
       v-if="isSelected"
       class="InputGridItem__check rounded-full p-1 flex items-center justify-center absolute pin-b pin-r w-6 h-6 bg-green border-2 border-theme-feature text-white"

src/renderer/components/Selection/SelectionAvatar.vue

@@ -21,11 +21,6 @@ export default {
   mixins: [selectionMixin, selectionImageMixin],
 
   props: {
-    extraItems: {
-      type: Array,
-      required: false,
-      default: () => ([])
-    },
     categories: {
       type: Array,
       required: false,
@@ -36,6 +31,11 @@ export default {
       required: false,
       default: true
     },
+    letterValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
     profile: {
       type: Object,
       required: false,
@@ -53,14 +53,22 @@ export default {
     availableAvatars () {
       const images = { ...this.images }
       const key = Object.keys(images)[0]
-      images[key] = [...this.extraItems, ...images[key]]
+      images[key] = [this.letterAvatar, ...images[key]]
       if (this.pluginAvatars && this.pluginAvatars.length) {
         images[this.$t('SELECTION_AVATAR.ADDITIONAL_AVATARS')] = this.pluginAvatars
       }
 
       return images
     },
 
+    letterAvatar () {
+      return {
+        title: this.$t('SELECTION_AVATAR.NO_AVATAR'),
+        textContent: this.letterValue,
+        onlyLetter: true
+      }
+    },
+
     additional () {
       return this.pluginAvatars
     },

src/renderer/i18n/locales/en-US.js

@@ -519,8 +519,7 @@ export default {
         },
         NAME: 'Profile name',
         TITLE: '1. Profile details',
-        AVATAR: 'Select your favorite avatar or the first letter of your profile name',
-        NO_AVATAR: 'No Avatar'
+        AVATAR: 'Select your favorite avatar or the first letter of your profile name'
       },
       STEP2: {
         INSTRUCTIONS: {
@@ -722,7 +721,8 @@ export default {
   SELECTION_AVATAR: {
     ADDITIONAL_AVATARS: 'Additional Avatars',
     AVATARS: 'Avatars',
-    MODAL_HEADER: 'Select avatar'
+    MODAL_HEADER: 'Select avatar',
+    NO_AVATAR: 'No Avatar'
   },
 
   SELECTION_BACKGROUND: {

src/renderer/i18n/locales/it-IT.js

@@ -513,8 +513,7 @@ export default {
         },
         NAME: 'Nome profilo',
         TITLE: '1. Dettagli profilo',
-        AVATAR: 'Seleziona il tuo avatar preferito o la prima lettera del nome del tuo profilo',
-        NO_AVATAR: 'Nessun Avatar'
+        AVATAR: 'Seleziona il tuo avatar preferito o la prima lettera del nome del tuo profilo'
       },
       STEP2: {
         INSTRUCTIONS: {
@@ -694,7 +693,8 @@ export default {
 
   SELECTION_AVATAR: {
     AVATARS: 'Avatars',
-    MODAL_HEADER: 'Seleziona avatar'
+    MODAL_HEADER: 'Seleziona avatar',
+    NO_AVATAR: 'Nessun Avatar'
   },
 
   SELECTION_BACKGROUND: {

src/renderer/pages/Profile/ProfileEdition.vue

@@ -179,12 +179,8 @@
                 class="ProfileEdition__avatar"
               >
                 <SelectionAvatar
-                  :extra-items="[{
-                    title: $t('PAGES.PROFILE_NEW.STEP1.NO_AVATAR'),
-                    textContent: name,
-                    onlyLetter: true
-                  }]"
                   :enable-modal="true"
+                  :letter-value="name"
                   :max-visible-items="3"
                   :selected="avatar"
                   :profile="profile"

src/renderer/pages/Profile/ProfileNew.vue

@@ -88,11 +88,7 @@
                 </div>
                 <SelectionAvatar
                   :selected="schema.avatar"
-                  :extra-items="[{
-                    title: $t('PAGES.PROFILE_NEW.STEP1.NO_AVATAR'),
-                    textContent: schema.name,
-                    onlyLetter: true
-                  }]"
+                  :letter-value="schema.name"
                   @select="selectAvatar"
                 />
               </div>