From a5ef2bdc674deb2d2c5d44f23ca94499c845c1af Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 24 Nov 2022 15:20:50 +0100
Subject: [PATCH] feat: avatar on the side in StatusCard

---
 components/account/AccountInfo.vue         |  4 +-
 components/status/StatusAccountDetails.vue | 19 +++++++++
 components/status/StatusCard.vue           | 45 ++++++++++++----------
 composables/masto.ts                       |  4 ++
 4 files changed, 50 insertions(+), 22 deletions(-)
 create mode 100644 components/status/StatusAccountDetails.vue

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 1448bde9..986cff86 100644
--- a/components/account/AccountInfo.vue
+++ b/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>
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
new file mode 100644
index 00000000..4b8c7898
--- /dev/null
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index f5690454..d1e54c33 100644
--- a/components/status/StatusCard.vue
+++ b/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>
diff --git a/composables/masto.ts b/composables/masto.ts
index 28e46b11..623940af 100644
--- a/composables/masto.ts
+++ b/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