feat: arbitrary profile picture

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

@@ -79,12 +79,15 @@
                     network.isOnline ? 'bg-green-500' : 'bg-red-500'
                   "
                 />
-                <ButtonSecondary
+                <ProfilePicture
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="t('header.account')"
-                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-                  svg="user"
+                  :title="currentUser.displayName"
+                  :initial="currentUser.displayName"
+                  indicator
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
                 />
               </template>
               <div class="flex flex-col px-2 text-tiny" role="menu">

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

@@ -1,20 +1,31 @@
 <template>
   <div
     tabindex="0"
-    class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative 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
-      class="absolute object-cover object-center w-5 h-5 rounded-full transition bg-primaryDark"
+      v-if="url"
+      class="absolute object-cover object-center transition bg-primaryDark"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="absolute inset-0 rounded-full shadow-inner"></div>
+    <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: ${toHex(initial)}`"
+    >
+      {{ initial.charAt(0).toUpperCase() }}
+    </div>
     <span
       v-if="indicator"
-      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="indicatorStyles"
+      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="[`rounded-${rounded}`, indicatorStyles]"
     ></span>
+    <!-- w-5 h-5 rounded-lg -->
   </div>
 </template>
 
@@ -25,9 +36,7 @@ export default defineComponent({
   props: {
     url: {
       type: String,
-      default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
-        .toString(36)
-        .substring(7)}.svg?mood[]=happy`,
+      default: "",
     },
     alt: {
       type: String,
@@ -41,6 +50,34 @@ export default defineComponent({
       type: String,
       default: "bg-green-500",
     },
+    rounded: {
+      type: String,
+      default: "full",
+    },
+    size: {
+      type: String,
+      default: "5",
+    },
+    initial: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    toHex(initial) {
+      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)}`.substr(-2)
+      }
+      return color
+    },
   },
 })
 </script>

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

@@ -35,17 +35,16 @@
             :title="member.user.displayName"
             class="inline-flex"
           >
-            <img
+            <ProfilePicture
               v-if="member.user.photoURL"
-              :src="member.user.photoURL"
+              :url="member.user.photoURL"
               :alt="member.user.displayName"
-              class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
-              loading="lazy"
+              class="ring-primary ring-2"
             />
-            <SmartIcon
+            <ProfilePicture
               v-else
-              name="user"
-              class="rounded-lg svg-icons bg-primaryLight ring-primary ring-2"
+              :initial="member.user.displayName"
+              class="ring-primary ring-2"
             />
           </div>
         </div>