feat: use email as fallback for display name (#2746)

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

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

@@ -38,7 +38,7 @@
           interactive
           trigger="click"
           theme="popover"
-          :on-shown="() => tippyActions.focus()"
+          :on-shown="() => tippyActions!.focus()"
         >
           <ButtonSecondary
             :icon="IconHelpCircle"
@@ -221,6 +221,8 @@ import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { TippyComponent } from "vue-tippy"
+import SmartItem from "@components/smart/Item.vue"
 
 const t = useI18n()
 const showShortcuts = ref(false)
@@ -277,8 +279,8 @@ const showDeveloperOptionModal = () => {
 }
 
 // Template refs
-const tippyActions = ref<any | null>(null)
-const documentation = ref<any | null>(null)
-const shortcuts = ref<any | null>(null)
-const chat = ref<any | null>(null)
+const tippyActions = ref<TippyComponent | null>(null)
+const documentation = ref<typeof SmartItem | null>(null)
+const shortcuts = ref<typeof SmartItem | null>(null)
+const chat = ref<typeof SmartItem | null>(null)
 </script>

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

@@ -77,6 +77,7 @@
                 "
                 :title="
                   currentUser.displayName ||
+                  currentUser.email ||
                   t('profile.default_hopp_displayname')
                 "
                 indicator
@@ -89,9 +90,10 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="
                   currentUser.displayName ||
+                  currentUser.email ||
                   t('profile.default_hopp_displayname')
                 "
-                :initial="currentUser.displayName"
+                :initial="currentUser.displayName || currentUser.email"
                 indicator
                 :indicator-styles="
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
@@ -100,7 +102,10 @@
               <template #content="{ hide }">
                 <div class="flex flex-col px-2 text-tiny">
                   <span class="inline-flex font-semibold truncate">
-                    {{ currentUser.displayName }}
+                    {{
+                      currentUser.displayName ||
+                      t("profile.default_hopp_displayname")
+                    }}
                   </span>
                   <span class="inline-flex truncate text-secondaryLight">
                     {{ currentUser.email }}

packages/hoppscotch-app/src/components/teams/Team.vue

@@ -32,7 +32,11 @@
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
             v-tippy="{ theme: 'tooltip' }"
-            :title="member.user.displayName"
+            :title="
+              member.user.displayName ||
+              member.user.email ||
+              t('default_hopp_displayName')
+            "
             class="inline-flex"
           >
             <ProfilePicture
@@ -43,7 +47,7 @@
             />
             <ProfilePicture
               v-else
-              :initial="member.user.displayName"
+              :initial="member.user.displayName || member.user.email"
               class="ring-primary ring-2"
             />
           </div>
@@ -193,6 +197,7 @@ const props = defineProps<{
       user: {
         displayName: string
         photoURL: string | null
+        email: string | null
       }
     }>
   }