feat: display status meta over card (#325)

components/notification/NotificationCard.vue

@@ -7,50 +7,47 @@ const { notification } = defineProps<{
 </script>
 
 <template>
-  <article flex flex-col>
+  <article flex flex-col relative>
     <template v-if="notification.type === 'follow'">
-      <div flex ml-4 items-center>
-        <div i-ri:user-follow-fill mr-3 color-primary />
+      <div flex ml-4 items-center absolute class="-top-2.5" right-2 px-2>
+        <div i-ri:user-follow-fill mr-1 color-primary />
         <AccountInlineInfo :account="notification.account" mr1 />
         {{ $t('notification.followed_you') }}
       </div>
-      <AccountCard :account="notification.account" p3 />
+      <AccountCard :account="notification.account" />
     </template>
     <template v-else-if="notification.type === 'follow_request'">
-      <div flex ml-4 items-center>
-        <div i-ri:user-follow-fill mr-3 />
+      <div flex ml-4 items-center class="-top-2.5" absolute right-2 px-2>
+        <div i-ri:user-follow-fill mr-1 />
         <AccountInlineInfo :account="notification.account" mr1 />
-        {{ $t('notification.request_to_follow') }}
       </div>
       <!-- TODO: accept request -->
-      <AccountCard :account="notification.account" p3 />
+      <AccountCard :account="notification.account" />
     </template>
     <template v-else-if="notification.type === 'favourite'">
-      <div flex ml-4 items-center>
-        <div i-ri:heart-fill mr-3 color-red />
+      <CommonMetaWrapper>
+        <div i-ri:heart-fill mr-1 color-red />
         <AccountInlineInfo :account="notification.account" mr1 />
-        {{ $t('notification.favourited_post') }}
-      </div>
-      <StatusCard :status="notification.status!" context="notifications" p3 />
+      </CommonMetaWrapper>
+      <StatusCard :status="notification.status!" :decorated="true" />
     </template>
     <template v-else-if="notification.type === 'reblog'">
-      <div flex ml-4 items-center>
-        <div i-ri:repeat-fill mr-3 color-green />
+      <CommonMetaWrapper>
+        <div i-ri:repeat-fill mr-1 color-green />
         <AccountInlineInfo :account="notification.account" mr1 />
-        {{ $t('notification.reblogged_post') }}
-      </div>
-      <StatusCard :status="notification.status!" context="notifications" p3 />
+      </CommonMetaWrapper>
+      <StatusCard :status="notification.status!" :decorated="true" />
     </template>
     <template v-else-if="notification.type === 'update'">
-      <div flex ml-4 items-center>
-        <div i-ri:edit-2-fill mr-3 text-secondary />
+      <CommonMetaWrapper>
+        <div i-ri:edit-2-fill mr-1 text-secondary />
         <AccountInlineInfo :account="notification.account" mr1 />
         {{ $t('notification.update_status') }}
-      </div>
-      <StatusCard :status="notification.status!" context="notifications" p3 />
+      </CommonMetaWrapper>
+      <StatusCard :status="notification.status!" :decorated="true" />
     </template>
     <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
-      <StatusCard :status="notification.status!" context="notifications" p3 />
+      <StatusCard :status="notification.status!" />
     </template>
     <template v-else>
       <div text-red font-bold>

components/notification/NotificationGroupedFollow.vue

@@ -13,8 +13,8 @@ const isExpanded = ref(false)
 </script>
 
 <template>
-  <article flex flex-col>
-    <div flex ml-4 items-center>
+  <article flex flex-col relative>
+    <div flex items-center top-0 left-2 pt-2 px-3>
       <div i-ri:user-follow-fill mr-3 color-primary aria-hidden="true" />
       <template v-if="addSR">
         <span
@@ -30,24 +30,26 @@ const isExpanded = ref(false)
         {{ $t('notification.followed_you_count', count, { named: { followers: count } }) }}
       </span>
     </div>
-    <div v-if="isExpanded">
-      <AccountCard
-        v-for="item in items.items"
-        :key="item.id"
-        :account="item.account"
-        p3
-      />
-    </div>
-    <div v-else flex="~ wrap gap-1" p4>
-      <AccountHoverWrapper
-        v-for="item in items.items"
-        :key="item.id"
-        :account="item.account"
-      >
-        <NuxtLink :to="getAccountRoute(item.account)">
-          <AccountAvatar :account="item.account" w-8 h-8 />
-        </NuxtLink>
-      </AccountHoverWrapper>
+    <div pt-1 pb-2>
+      <div v-if="isExpanded">
+        <AccountCard
+          v-for="item in items.items"
+          :key="item.id"
+          :account="item.account"
+          p3
+        />
+      </div>
+      <div v-else flex="~ wrap gap-1" p4>
+        <AccountHoverWrapper
+          v-for="item in items.items"
+          :key="item.id"
+          :account="item.account"
+        >
+          <NuxtLink :to="getAccountRoute(item.account)">
+            <AccountAvatar :account="item.account" w-12 h-12 />
+          </NuxtLink>
+        </AccountHoverWrapper>
+      </div>
     </div>
   </article>
 </template>

components/notification/NotificationPaginator.vue

@@ -14,7 +14,8 @@ function groupItems(items: Notification[]): (Notification | GroupedNotifications
   let followGroup: Notification[] = []
 
   const bump = () => {
-    if (followGroup.length === 1) {
+    const alwaysGroup = true
+    if (!alwaysGroup && followGroup.length === 1) {
       results.push(followGroup[0])
       followGroup = []
     }
@@ -58,13 +59,13 @@ const { clearNotifications } = useNotifications()
         <NotificationGroupedFollow
           v-if="item.type === 'grouped-follow'"
           :items="item"
-          border="b base" pt-4
+          border="b base"
         />
         <NotificationCard
           v-else
           :notification="item"
           hover:bg-active
-          border="b base" pt-4
+          border="b base"
         />
       </template>
     </template>