feat: status details

components/status/StatusActions.vue

@@ -8,12 +8,12 @@ defineProps<{
 
 <template>
   <div flex gap-8>
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
+    <RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
       <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
       </div>
       <span v-if="status.repliesCount">{{ status.repliesCount }}</span>
-    </button>
+    </RouterLink>
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-green" group>
       <div rounded-full p2 group-hover="bg-green/10">
         <div i-ri:repeat-fill />

components/status/StatusAttachment.vue

@@ -12,7 +12,7 @@ const { attachment } = defineProps<{
       class="status-attachment-image"
       :src="attachment.previewUrl!"
       :alt="attachment.description!"
-      border="~ gray/10"
+      border="~ border"
       object-cover rounded-lg
     >
   </template>

components/status/StatusBody.vue

@@ -27,7 +27,7 @@ defineProps<{
     --at-apply: font-bold;
   }
   p {
-    --at-apply: my-1;
+    --at-apply: my-2;
   }
 }
 </style>

components/status/StatusCard.vue

@@ -1,16 +1,30 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-const { status } = defineProps<{
-  status: Status
-}>()
-const el = ref<HTMLElement>()
+const props = withDefaults(
+  defineProps<{
+    status: Status
+    actions?: boolean
+  }>(),
+  {
+    actions: true,
+  },
+)
 
+const status = $computed(() => {
+  if (props.status.reblog && !props.status.content)
+    return props.status.reblog
+  return props.status
+})
+
+const rebloggedBy = $computed(() => props.status.reblog ? props.status.account : null)
+
+const el = ref<HTMLElement>()
 const router = useRouter()
 
 function go(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const hasButton = path.find(el => el.tagName === 'A' || el.tagName === 'BUTTON')
+  const hasButton = path.find(el => ['A', 'BUTTON', 'P'].includes(el.tagName.toUpperCase()))
   if (hasButton)
     return
 
@@ -52,18 +66,35 @@ const timeago = useTimeAgo(() => status.createdAt, {
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 my-4 @click="go">
+  <div ref="el" flex flex-col gap-2 my-2 px-4 @click="go">
+    <div v-if="rebloggedBy" pl8>
+      <div flex gap-1 items-center text-gray:75 text-sm>
+        <div i-ri:repeat-fill mr-1 />
+        <a :href="`/@${rebloggedBy.acct}`" flex gap-2 font-bold items-center>
+          <img :src="rebloggedBy.avatar" class="w-5 h-5 rounded">
+          {{ rebloggedBy.displayName }}
+        </a>
+        reblogged
+      </div>
+    </div>
     <AccountInfo :account="status.account">
       <div flex-auto />
       <div text-sm op50>
         {{ timeago }}
       </div>
     </AccountInfo>
-    <StatusBody :status="status" />
-    <StatusMedia
-      v-if="status.mediaAttachments?.length"
-      :status="status"
-    />
-    <StatusActions :status="status" />
+    <div pl14>
+      <StatusBody :status="status" />
+      <StatusMedia
+        v-if="status.mediaAttachments?.length"
+        :status="status"
+      />
+      <StatusCard
+        v-if="status.reblog"
+        :status="status.reblog" border="~ rounded"
+        :actions="false"
+      />
+    </div>
+    <StatusActions v-if="actions !== false" pl12 :status="status" />
   </div>
 </template>

components/status/StatusDetails.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const props = defineProps<{
+  status: Status
+}>()
+
+const status = $computed(() => {
+  if (props.status.reblog && props.status.reblog)
+    return props.status.reblog
+  return props.status
+})
+
+const formatter = Intl.DateTimeFormat(undefined, { dateStyle: 'long' })
+const date = computed(() => formatter.format(new Date(status.createdAt)))
+</script>
+
+<template>
+  <div flex flex-col gap-2 my-4 px-4>
+    <AccountInfo :account="status.account" />
+    <StatusBody :status="status" text-xl />
+    <StatusMedia
+      v-if="status.mediaAttachments?.length"
+      :status="status"
+    />
+    <div>
+      <span op50 text-sm>
+        {{ date }} · {{ status.application?.name || 'Unknown client' }}
+      </span>
+    </div>
+    <StatusActions :status="status" border="t border" pt-2 />
+  </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 gray/10" pt-4 />
+    <StatusCard :status="status" border="t border" pt-4 />
   </template>
 </template>