feat: init boring avatars (#3615)

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

@@ -134,15 +134,10 @@
               :on-shown="() => tippyActions.focus()"
             >
               <HoppSmartPicture
-                v-if="currentUser.photoURL"
                 v-tippy="{
                   theme: 'tooltip',
                 }"
-                :url="currentUser.photoURL"
+                :name="currentUser.uid"
-                :alt="
-                  currentUser.displayName ||
-                  t('profile.default_hopp_displayname')
-                "
                 :title="
                   currentUser.displayName ||
                   currentUser.email ||
@@ -153,20 +148,6 @@
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
                 "
               />
-              <HoppSmartPicture
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  currentUser.displayName ||
-                  currentUser.email ||
-                  t('profile.default_hopp_displayname')
-                "
-                :initial="currentUser.displayName || currentUser.email"
-                indicator
-                :indicator-styles="
-                  network.isOnline ? 'bg-green-500' : 'bg-red-500'
-                "
-              />
               <template #content="{ hide }">
                 <div
                   ref="tippyActions"

packages/hoppscotch-common/src/components/teams/MemberStack.vue

@@ -6,19 +6,9 @@
       class="inline-flex"
     >
       <HoppSmartPicture
-        v-if="member.user.photoURL"
         v-tippy="{ theme: 'tooltip' }"
-        :url="member.user.photoURL"
+        :name="member.user.uid"
-        :title="getUserName(member)"
+        :title="getUserName(member as TeamMember)"
-        :alt="getUserName(member)"
-        class="ring-2 ring-primary"
-        @click="handleClick()"
-      />
-      <HoppSmartPicture
-        v-else
-        v-tippy="{ theme: 'tooltip' }"
-        :title="getUserName(member)"
-        :initial="getUserName(member)"
         class="ring-2 ring-primary"
         @click="handleClick()"
       />
@@ -59,7 +49,7 @@ const emit = defineEmits<{
 const getUserName = (member: TeamMember): string =>
   member.user.displayName ||
   member.user.email ||
-  t("profile.default_hopp_displayName")
+  t("profile.default_hopp_displayname")
 
 const maxMembersSoftLimit = 4
 const maxMembersHardLimit = 6
@@ -77,7 +67,7 @@ const remainingSlicedMembers = computed(
     props.teamMembers
       .slice(maxMembersSoftLimit)
       .slice(0, maxMembersHardLimit)
-      .map((member) => getUserName(member))
+      .map((member) => getUserName(member as TeamMember))
       .join(`,<br>`) +
     (props.teamMembers.length - (maxMembersSoftLimit + maxMembersHardLimit) > 0
       ? `,<br>${t("team.more_members", {

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

@@ -21,27 +21,15 @@
         </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div
-            class="-mb-11 h-24 rounded bg-primaryLight md:h-32"
+            class="-mb-12 h-24 rounded bg-primaryLight md:h-32"
             style="background-image: url(/images/cover.svg)"
           ></div>
           <div class="flex flex-col justify-between space-y-8 px-4 md:flex-row">
             <div class="flex items-end">
               <HoppSmartPicture
-                v-if="currentUser.photoURL"
+                :name="currentUser.uid"
-                :url="currentUser.photoURL"
+                class="ring-8 ring-primary"
-                :alt="
+                :size="64"
-                  currentUser.displayName || t('profile.default_displayname')
-                "
-                class="ring-4 ring-primary"
-                size="16"
-                rounded="lg"
-              />
-              <HoppSmartPicture
-                v-else
-                :initial="currentUser.displayName || currentUser.email"
-                rounded="lg"
-                size="16"
-                class="ring-4 ring-primary"
               />
               <div class="ml-4">
                 <label class="heading">

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

@@ -33,28 +33,16 @@
           :on-shown="() => tippyActions!.focus()"
         >
           <HoppSmartPicture
-            v-if="currentUser.photoURL"
             v-tippy="{
               theme: 'tooltip',
             }"
-            :url="currentUser.photoURL"
+            :name="currentUser.uid"
-            :alt="currentUser.displayName ?? `${t('app.no_name')}`"
             :title="
               currentUser.displayName ??
               currentUser.email ??
               `${t('app.no_name')}`
             "
           />
-          <HoppSmartPicture
-            v-else
-            v-tippy="{ theme: 'tooltip' }"
-            :title="
-              currentUser.displayName ??
-              currentUser.email ??
-              `${t('app.no_name')}`
-            "
-            :initial="currentUser.displayName ?? currentUser.email"
-          />
           <template #content="{ hide }">
             <div
               ref="tippyActions"

packages/hoppscotch-ui/package.json

@@ -17,6 +17,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
+    "@boringer-avatars/vue3": "^0.2.1",
     "@fontsource-variable/inter": "^5.0.5",
     "@fontsource-variable/material-symbols-rounded": "^5.0.5",
     "@fontsource-variable/roboto-mono": "^5.0.6",

packages/hoppscotch-ui/src/components/smart/Picture.vue

@@ -1,72 +1,38 @@
 <template>
   <div
     tabindex="0"
-    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative rounded-full flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
-    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
   >
-    <img
+    <Avatar
-      v-if="url"
+      :size="size"
-      class="absolute object-cover object-center transition bg-primaryDark"
+      :name="name"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :square="false"
-      :src="url"
+      :colors="['#FFAD08', '#EDD75A', '#73B06F', '#0C8F8F', '#405059']"
-      :alt="alt"
+      variant="beam"
-      loading="lazy"
-      referrerpolicy="no-referrer"
     />
-    <div
-      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: ${initial ? toHex(initial) : '#480000'}`"
-    >
-      <template v-if="initial && initial.charAt(0).toUpperCase()">
-        {{ initial.charAt(0).toUpperCase() }}
-      </template>
-      <icon-lucide-user v-else />
-    </div>
     <span
       v-if="indicator"
-      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="[`rounded-${rounded}`, indicatorStyles]"
+      :class="indicatorStyles"
     ></span>
-    <!-- w-5 h-5 rounded-lg -->
   </div>
 </template>
 
 <script setup lang="ts">
+import { Avatar } from "@boringer-avatars/vue3";
+
 withDefaults(
   defineProps<{
-    url: string
+    name: string
-    alt: string
     indicator: boolean
     indicatorStyles: string
-    rounded: string
+    size: number
-    size: string
-    initial: string | undefined | null
   }>(),
   {
-    url: "",
+    name: "",
-    alt: "Profile picture",
     indicator: false,
     indicatorStyles: "bg-green-500",
-    rounded: "full",
+    size: 24,
-    size: "5",
-    initial: "",
   }
 )
-
-const toHex = (initial: string) => {
-  let hash = 0
-  if (initial.length === 0) return hash
-  for (let i = 0; i < initial.length; i++) {
-    hash = initial.charCodeAt(i) + ((hash << 5) - hash)
-    hash = hash & hash
-  }
-  let color = "#"
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 255
-    color += `00${value.toString(16)}`.slice(-2)
-  }
-  return color
-}
 </script>

pnpm-lock.yaml

@@ -1414,6 +1414,9 @@ importers:
 
   packages/hoppscotch-ui:
     dependencies:
+      '@boringer-avatars/vue3':
+        specifier: ^0.2.1
+        version: 0.2.1(vue@3.2.45)
       '@fontsource-variable/inter':
         specifier: ^5.0.5
         version: 5.0.5
@@ -4447,6 +4450,14 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
+  /@boringer-avatars/vue3@0.2.1(vue@3.2.45):
+    resolution: {integrity: sha512-KzAfh31SDXToTvFL0tBNG5Ur+VzfD1PP4jmY5/GS+eIuObGTIAiUu9eiht0LjuAGI+0xCgnaEgsTrOx8H3vLOQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.2.45
+    dev: false
+
   /@codemirror/autocomplete@6.10.2(@codemirror/language@6.9.0)(@codemirror/state@6.3.1)(@codemirror/view@6.22.0)(@lezer/common@1.0.3):
     resolution: {integrity: sha512-3dCL7b0j2GdtZzWN5j7HDpRAJ26ip07R4NGYz7QYthIYMiX8I4E4TNrYcdTayPJGeVQtd/xe7lWU4XL7THFb/w==}
     peerDependencies:
@@ -11990,7 +12001,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.4(@types/node@18.18.8)(sass@1.58.0)
+      vite: 3.2.4(@types/node@17.0.27)(sass@1.53.0)(terser@5.24.0)
       vue: 3.2.45
     dev: true
 
@@ -26181,7 +26192,7 @@ packages:
     dependencies:
       fast-glob: 3.2.12
       unplugin: 1.4.0
-      vite: 3.2.4(@types/node@18.18.8)(sass@1.58.0)
+      vite: 3.2.4(@types/node@17.0.27)(sass@1.53.0)(terser@5.24.0)
     dev: true
 
   /unplugin-fonts@1.0.3(vite@4.4.9):
@@ -27177,7 +27188,7 @@ packages:
       json5: 2.2.3
       local-pkg: 0.4.3
       picocolors: 1.0.0
-      vite: 3.2.4(@types/node@18.18.8)(sass@1.58.0)
+      vite: 3.2.4(@types/node@17.0.27)(sass@1.53.0)(terser@5.24.0)
       yaml: 2.3.1
     transitivePeerDependencies:
       - supports-color