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,27 +78,32 @@ const timeago = useTimeAgo(() => status.createdAt, {
         reblogged
       </div>
     </div>
-    <AccountInfo :account="status.account">
-      <template #default>
-        <div flex-auto />
-        <div text-sm op50 :title="status.createdAt">
-          {{ timeago }}
+    <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>
+        </StatusAccountDetails>
+        <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
+        <div>
+          <StatusBody :status="status" />
+          <StatusMedia
+            v-if="status.mediaAttachments?.length"
+            :status="status"
+          />
+          <StatusCard
+            v-if="status.reblog"
+            :status="status.reblog" border="~ rounded"
+            :actions="false"
+          />
         </div>
-      </template>
-    </AccountInfo>
-    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
-    <div pl15>
-      <StatusBody :status="status" />
-      <StatusMedia
-        v-if="status.mediaAttachments?.length"
-        :status="status"
-      />
-      <StatusCard
-        v-if="status.reblog"
-        :status="status.reblog" border="~ rounded"
-        :actions="false"
-      />
+        <StatusActions v-if="actions !== false" pt2 :status="status" />
+      </div>
     </div>
-    <StatusActions v-if="actions !== false" px13 :status="status" />
   </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