From e674a117a8c88d98dfc31f0c2d964f16a550fcca Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 5 Jul 2023 15:39:43 +0530
Subject: [PATCH] feat: allow slot in avatar and thumbnail

---
 .../dashboard/components/widgets/Avatar.vue   |  2 +-
 .../components/widgets/Thumbnail.vue          | 28 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index c6cb55b91..28255209e 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="avatar-container" :style="style" aria-hidden="true">
-    {{ userInitial }}
+    <slot>{{ userInitial }}</slot>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index c827135df..ff460e2d2 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -5,19 +5,21 @@
     :title="title"
   >
     <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <img
-      v-show="shouldShowImage"
-      :src="src"
-      :class="thumbnailClass"
-      @load="onImgLoad"
-      @error="onImgError"
-    />
-    <Avatar
-      v-show="!shouldShowImage"
-      :username="userNameWithoutEmoji"
-      :class="thumbnailClass"
-      :size="avatarSize"
-    />
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
     <img
       v-if="badgeSrc"
       class="source-badge"