feat: avatar on the side in StatusCard

components/account/AccountInfo.vue

@@ -7,7 +7,7 @@ const { account, link = true, fullServer = false } = defineProps<{
   fullServer?: boolean
 }>()
 
-const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
+const accountHandle = $(useAccountHandle(account, fullServer))
 </script>
 
 <template>
@@ -20,7 +20,7 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
     <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
       <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
-        {{ id }}
+        {{ accountHandle }}
       </p>
       <slot name="bottom" />
     </NuxtLink>

components/status/StatusAccountDetails.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+const { account, link = true } = defineProps<{
+  account: Account
+  link?: boolean
+}>()
+
+const accountHandle = $(useAccountHandle(account))
+</script>
+
+<template>
+  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-2 items-center>
+    <ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+    <p op35 text-sm>
+      {{ accountHandle }}
+    </p>
+  </NuxtLink>
+</template>

components/status/StatusCard.vue

@@ -78,16 +78,19 @@ const timeago = useTimeAgo(() => status.createdAt, {
         reblogged
       </div>
     </div>
-    <AccountInfo :account="status.account">
+    <div flex gap-4>
+      <AccountAvatar mt1 w-12 h-12 :account="status.account" />
+      <div flex flex-col>
+        <StatusAccountDetails :account="status.account">
           <template #default>
             <div flex-auto />
             <div text-sm op50 :title="status.createdAt">
               {{ timeago }}
             </div>
           </template>
-    </AccountInfo>
-    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
-    <div pl15>
+        </StatusAccountDetails>
+        <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
+        <div>
           <StatusBody :status="status" />
           <StatusMedia
             v-if="status.mediaAttachments?.length"
@@ -99,6 +102,8 @@ const timeago = useTimeAgo(() => status.createdAt, {
             :actions="false"
           />
         </div>
-    <StatusActions v-if="actions !== false" px13 :status="status" />
+        <StatusActions v-if="actions !== false" pt2 :status="status" />
+      </div>
+    </div>
   </div>
 </template>

composables/masto.ts

@@ -45,6 +45,10 @@ export function getStatusPath(status: Status) {
   return `/status/${status.id}`
 }
 
+export function useAccountHandle(account: Account, fullServer = true) {
+  return computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account))
+}
+
 // Batch requests for relationships when used in the UI
 // We don't want to hold to old values, so every time a Relationship is needed it
 // is requested again from the server to show the latest state