From 1872522203d1cb4f4e72f5a2036267717409c97e Mon Sep 17 00:00:00 2001
From: cxroop <chenxxyy299@gmail.com>
Date: Sat, 29 Jun 2024 11:55:32 +0800
Subject: [PATCH] fix(ui): notification like avatar not shrink

---
 .../NotificationGroupedLikeItem.vue           | 30 ++++++++++++++
 .../notification/NotificationGroupedLikes.vue | 40 ++++++++-----------
 2 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 components/notification/NotificationGroupedLikeItem.vue

diff --git a/components/notification/NotificationGroupedLikeItem.vue b/components/notification/NotificationGroupedLikeItem.vue
new file mode 100644
index 0000000000..2750c22072
--- /dev/null
+++ b/components/notification/NotificationGroupedLikeItem.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { GroupedAccountLike } from '~/types'
+
+const { likes } = defineProps<{
+  likes: GroupedAccountLike[]
+  hint: string
+}>()
+</script>
+
+<template>
+  <div v-if="likes.length" flex="~ gap-1">
+    <slot name="icon" />
+    <div flex="~ col">
+      <div flex="~ wrap gap-1">
+        <template v-for="i, idx of likes" :key="idx">
+          <div flex-shrink-0>
+            <AccountHoverWrapper class="flex-shrink-0" :account="i.account">
+              <NuxtLink :to="getAccountRoute(i.account)">
+                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
+              </NuxtLink>
+            </AccountHoverWrapper>
+          </div>
+        </template>
+      </div>
+      <div mt2>
+        {{ hint }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index 045794ef86..1a4f5d2df0 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -14,32 +14,24 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
   <article flex flex-col relative>
     <StatusLink :status="group.status!" pb4 pt5>
       <div flex flex-col gap-3>
-        <div v-if="reblogs.length" flex="~ gap-1">
-          <div i-ri:repeat-fill text-xl me-2 color-green />
-          <template v-for="i, idx of reblogs" :key="idx">
-            <AccountHoverWrapper :account="i.account">
-              <NuxtLink :to="getAccountRoute(i.account)">
-                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
-              </NuxtLink>
-            </AccountHoverWrapper>
+        <NotificationGroupedLikeItem
+          v-if="reblogs.length"
+          :likes="reblogs"
+          :hint="$t('notification.reblogged_post')"
+        >
+          <template #icon>
+            <div i-ri:repeat-fill text-xl me-2 color-green />
           </template>
-          <div ml1>
-            {{ $t('notification.reblogged_post') }}
-          </div>
-        </div>
-        <div v-if="likes.length" flex="~ gap-1">
-          <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
-          <template v-for="i, idx of likes" :key="idx">
-            <AccountHoverWrapper :account="i.account">
-              <NuxtLink :to="getAccountRoute(i.account)">
-                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
-              </NuxtLink>
-            </AccountHoverWrapper>
+        </NotificationGroupedLikeItem>
+        <NotificationGroupedLikeItem
+          v-if="likes.length"
+          :likes="likes"
+          :hint="$t('notification.favourited_post')"
+        >
+          <template #icon>
+            <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           </template>
-          <div ms1>
-            {{ $t('notification.favourited_post') }}
-          </div>
-        </div>
+        </NotificationGroupedLikeItem>
       </div>
       <div ps9 mt-1>
         <StatusBody :status="group.status!" text-secondary />