fix: fix type error when generating profile picture initials (#2742)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/locales/en.json

@@ -335,7 +335,8 @@
     "roles_description": "Roles are used to control access to the shared collections.",
     "updated": "Profile updated",
     "viewer": "Viewer",
-    "viewer_description": "Viewers can only view and use requests."
+    "viewer_description": "Viewers can only view and use requests.",
+    "default_hopp_displayname": "Hoppscotch User"
   },
   "remove": {
     "star": "Remove star"

packages/hoppscotch-app/src/components/app/Header.vue

@@ -71,8 +71,14 @@
                   theme: 'tooltip',
                 }"
                 :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
-                :title="currentUser.displayName"
+                :alt="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
+                :title="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
                 indicator
                 :indicator-styles="
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
@@ -81,7 +87,10 @@
               <ProfilePicture
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
-                :title="currentUser.displayName"
+                :title="
+                  currentUser.displayName ||
+                  t('profile.default_hopp_displayname')
+                "
                 :initial="currentUser.displayName"
                 indicator
                 :indicator-styles="

packages/hoppscotch-app/src/components/profile/Picture.vue

@@ -16,9 +16,13 @@
       v-else
       class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
       :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :style="`background-color: ${toHex(initial)}`"
+      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
     >
-      {{ initial.charAt(0).toUpperCase() }}
+      <template v-if="initial && initial.charAt(0).toUpperCase()">
+        {{ initial.charAt(0).toUpperCase() }}
+      </template>
+
+      <icon-lucide-user v-else></icon-lucide-user>
     </div>
     <span
       v-if="indicator"
@@ -30,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, PropType } from "vue"
 
 export default defineComponent({
   props: {
@@ -59,7 +63,7 @@ export default defineComponent({
       default: "5",
     },
     initial: {
-      type: String,
+      type: String as PropType<string | undefined | null>,
       default: "",
     },
   },

packages/hoppscotch-app/src/pages/profile.vue

@@ -37,7 +37,9 @@
               <ProfilePicture
                 v-if="currentUser.photoURL"
                 :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
+                :alt="
+                  currentUser.displayName || t('profile.default_displayname')
+                "
                 class="ring-primary ring-4"
                 size="16"
                 rounded="lg"