feat: display status meta over card (#325)

components/account/AccountInlineInfo.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { link = true } = defineProps<{
+const { link = true, avatar = true } = defineProps<{
   account: Account
   link?: boolean
+  avatar?: boolean
 }>()
 </script>
 
@@ -14,7 +15,7 @@ const { link = true } = defineProps<{
       :class="link ? 'text-link-rounded ml-0 pl-0' : ''"
       min-w-0 flex gap-1 items-center
     >
-      <AccountAvatar :account="account" w-5 h-5 />
+      <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
       <ContentRich ws-nowrap :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
     </NuxtLink>
   </AccountHoverWrapper>

components/common/CommonMetaWrapper.vue

@@ -0,0 +1,5 @@
+<template>
+  <div flex="~ wrap" gap-1 items-center absolute top-0 pt-2 left-0 px-3>
+    <slot />
+  </div>
+</template>

components/nav/SelectFeatureFlags.vue

@@ -12,6 +12,12 @@ const featureFlags = useFeatureFlags()
       >
         {{ $t('feature_flag.virtual_scroll') }}
       </CommonDropdownItem>
+      <CommonDropdownItem
+        :checked="featureFlags.experimentalAvatarOnAvatar"
+        @click="toggleFeatureFlag('experimentalAvatarOnAvatar')"
+      >
+        {{ $t('feature_flag.avatar_on_avatar') }}
+      </CommonDropdownItem>
     </template>
   </CommonDropdown>
 </template>

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,6 +30,7 @@ const isExpanded = ref(false)
         {{ $t('notification.followed_you_count', count, { named: { followers: count } }) }}
       </span>
     </div>
+    <div pt-1 pb-2>
       <div v-if="isExpanded">
         <AccountCard
           v-for="item in items.items"
@@ -45,9 +46,10 @@ const isExpanded = ref(false)
           :account="item.account"
         >
           <NuxtLink :to="getAccountRoute(item.account)">
-          <AccountAvatar :account="item.account" w-8 h-8 />
+            <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>

components/status/StatusCard.vue

@@ -7,8 +7,10 @@ const props = withDefaults(
     actions?: boolean
     context?: FilterContext
     hover?: boolean
+    decorated?: boolean
+    showReplyTo?: boolean
   }>(),
-  { actions: true },
+  { actions: true, showReplyTo: true },
 )
 
 const status = $computed(() => {
@@ -53,25 +55,28 @@ const filter = $computed(() => filterResult?.filter)
 // clean up when masto.js supports explicit versions: https://github.com/neet/masto.js/issues/722
 const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
 const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
+
+const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
 </script>
 
 <template>
-  <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
-    <div v-if="rebloggedBy" pl8>
-      <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
-        <div i-ri:repeat-fill mr-1 />
-        <i18n-t keypath="status.reblogged">
-          <AccountInlineInfo font-bold :account="rebloggedBy" />
-        </i18n-t>
-      </div>
-    </div>
+  <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-2 px-4 pt-3 pb-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
+    <StatusReplyingTo v-if="showReplyTo" :status="status" />
+    <CommonMetaWrapper v-if="rebloggedBy" text-secondary text-sm>
+      <div i-ri:repeat-fill mr-1 text-primary />
+      <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
+    </CommonMetaWrapper>
+    <div v-if="decorated || rebloggedBy || (showReplyTo && status.inReplyToAccountId)" h-4 />
     <div flex gap-4>
-      <div>
-        <AccountHoverWrapper :account="status.account">
+      <div relative>
+        <AccountHoverWrapper :account="status.account" :class="rebloggedBy && avatarOnAvatar ? 'mt-4' : 'mt-1'">
           <NuxtLink :to="getAccountRoute(status.account)" rounded-full>
             <AccountAvatar w-12 h-12 :account="status.account" />
           </NuxtLink>
         </AccountHoverWrapper>
+        <div v-if="(rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)" absolute class="-top-1 -left-2" w-8 h-8 border-bg-base border-3 rounded-full>
+          <AccountAvatar :account="rebloggedBy" />
+        </div>
       </div>
       <div flex="~ col 1" min-w-0>
         <div flex items-center>
@@ -91,7 +96,6 @@ const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.cont
           </div>
           <StatusActionsMore :status="status" mr--2 />
         </div>
-        <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
         <div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
           <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
             <template #spoiler>

components/status/StatusCardSkeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div flex flex-col gap-2 px-4>
+  <div flex flex-col gap-2 px-4 py-3>
     <div flex gap-4>
       <div>
         <div w-12 h-12 rounded-full class="skeleton-loading-bg" />

components/status/StatusDetails.vue

@@ -25,7 +25,6 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
         <AccountInfo :account="status.account" />
       </AccountHoverWrapper>
     </NuxtLink>
-    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <div
       :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
     >

components/status/StatusReplyingTo.vue

@@ -9,14 +9,20 @@ const account = useAccountById(status.inReplyToAccountId!)
 </script>
 
 <template>
+  <div v-if="status.inReplyToAccountId" absolute top-0 pt-2 right-0 px-4 flex="~ wrap" gap-1>
     <NuxtLink
       v-if="status.inReplyToId"
-    flex="~ wrap" items-center text-sm text-secondary
+      flex="~ wrap" items-center font-bold text-sm text-secondary gap-1
       :to="getStatusInReplyToRoute(status)"
       :title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
     >
-    <div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" />
+      <div i-ri:reply-fill class="scale-x-[-1]" text-secondary-light />
+      <template v-if="account?.id !== status.account.id">
         <AccountInlineInfo v-if="account" :account="account" :link="false" />
         <span v-else>Someone</span>
-  </NuxtLink>
+      </template>
+      <span v-else>Thread</span>
+      <div i-ph:chats-fill text-primary text-lg />
+    </NuxtLink>
+  </div>
 </template>

components/timeline/TimelineList.vue

@@ -8,6 +8,6 @@ defineProps<{
 
 <template>
   <template v-for="status of timelines" :key="status.id">
-    <StatusCard :status="status" border="t base" pt-4 />
+    <StatusCard :status="status" border="t base" />
   </template>
 </template>

components/timeline/TimelinePaginator.vue

@@ -22,17 +22,17 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
     <template #default="{ item, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :status="item" border="b base" :context="context" py-3 />
+          <StatusCard :status="item" border="b base" :context="context" />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard :status="item" border="b base" :context="context" py-3 />
+        <StatusCard :status="item" border="b base" :context="context" />
       </template>
     </template>
     <template #loading>
-      <StatusCardSkeleton border="b base" py-3 />
-      <StatusCardSkeleton border="b base" py-3 op50 />
-      <StatusCardSkeleton border="b base" py-3 op25 />
+      <StatusCardSkeleton border="b base" />
+      <StatusCardSkeleton border="b base" op50 />
+      <StatusCardSkeleton border="b base" op25 />
     </template>
   </CommonPaginator>
 </template>

composables/featureFlags.ts

@@ -3,6 +3,7 @@ import { STORAGE_KEY_FEATURE_FLAGS } from '~/constants'
 
 export interface FeatureFlags {
   experimentalVirtualScroll: boolean
+  experimentalAvatarOnAvatar: boolean
 }
 export type FeatureFlagsMap = Record<string, FeatureFlags>
 
@@ -11,6 +12,7 @@ export const allFeatureFlags = useLocalStorage<FeatureFlagsMap>(STORAGE_KEY_FEAT
 export function getDefaultFeatureFlags(): FeatureFlags {
   return {
     experimentalVirtualScroll: false,
+    experimentalAvatarOnAvatar: true,
   }
 }
 

locales/en-US.json

@@ -72,6 +72,7 @@
     "status_not_found": "Status not found"
   },
   "feature_flag": {
+    "avatar_on_avatar": "Avatar on Avatar",
     "virtual_scroll": "Virtual Scrolling"
   },
   "help": {

package.json

@@ -23,6 +23,7 @@
     "@iconify-json/carbon": "^1.1.11",
     "@iconify-json/logos": "^1.1.19",
     "@iconify-json/material-symbols": "^1.1.25",
+    "@iconify-json/ph": "^1.1.3",
     "@iconify-json/ri": "^1.1.4",
     "@iconify-json/twemoji": "^1.1.7",
     "@nuxtjs/i18n": "^8.0.0-beta.6",

pages/[[server]]/@[account]/[status].vue

@@ -52,7 +52,7 @@ onReactivated(() => {
       <div v-if="status" min-h-100vh>
         <template v-if="context">
           <template v-for="comment of context?.ancestors" :key="comment.id">
-            <StatusCard :status="comment" context="account" border="t base" py3 />
+            <StatusCard :status="comment" context="account" border="t base" :show-reply-to="false" />
           </template>
         </template>
 
@@ -73,7 +73,7 @@ onReactivated(() => {
 
         <template v-if="context">
           <template v-for="comment of context?.descendants" :key="comment.id">
-            <StatusCard :status="comment" context="account" border="t base" py3 />
+            <StatusCard :status="comment" context="account" border="t base" />
           </template>
         </template>
 
@@ -83,6 +83,6 @@ onReactivated(() => {
       <StatusNotFound v-else :account="$route.params.account" :status="id" />
     </template>
 
-    <StatusCardSkeleton v-else border="b base" py-3 />
+    <StatusCardSkeleton v-else border="b base" />
   </MainContent>
 </template>

pnpm-lock.yaml

@@ -6,6 +6,7 @@ specifiers:
   '@iconify-json/carbon': ^1.1.11
   '@iconify-json/logos': ^1.1.19
   '@iconify-json/material-symbols': ^1.1.25
+  '@iconify-json/ph': ^1.1.3
   '@iconify-json/ri': ^1.1.4
   '@iconify-json/twemoji': ^1.1.7
   '@nuxtjs/i18n': ^8.0.0-beta.6
@@ -71,6 +72,7 @@ devDependencies:
   '@iconify-json/carbon': 1.1.11
   '@iconify-json/logos': 1.1.19
   '@iconify-json/material-symbols': 1.1.25
+  '@iconify-json/ph': 1.1.3
   '@iconify-json/ri': 1.1.4
   '@iconify-json/twemoji': 1.1.7
   '@nuxtjs/i18n': 8.0.0-beta.6
@@ -662,6 +664,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/ph/1.1.3:
+    resolution: {integrity: sha512-QSzWMGF8GiBPW89RpQ3bEwEjuRWTv/xxskStUpK7tsXlz3qoPTEM5CQxDUpzUmc9luAWViqD/shIUiuNhUeolw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/ri/1.1.4:
     resolution: {integrity: sha512-gAk2gQBVghgbMLOmbUCc3l4COMMH5sR3HhBqpjaPUFBbC4WsNNRyOD4RZgjlanU7DTgFrj4NarY5K2EkXaVxuw==}
     dependencies: