feat: styling

components/status/StatusCard.vue

@@ -11,12 +11,52 @@ function go(e: MouseEvent) {
   if (e.target === el.value)
     router.push(`/@${status.account.acct}/${status.id}`)
 }
+
+const timeago = useTimeAgo(() => status.createdAt, {
+  showSecond: true,
+  messages: {
+    justNow: 'just now',
+    past: n => n,
+    future: n => n.match(/\d/) ? `in ${n}` : n,
+    month: (n, past) => n === 1
+      ? past
+        ? 'last month'
+        : 'next month'
+      : `${n}m`,
+    year: (n, past) => n === 1
+      ? past
+        ? 'last year'
+        : 'next year'
+      : `${n}y`,
+    day: (n, past) => n === 1
+      ? past
+        ? 'yesterday'
+        : 'tomorrow'
+      : `${n}d`,
+    week: (n, past) => n === 1
+      ? past
+        ? 'last week'
+        : 'next week'
+      : `${n} week${n > 1 ? 's' : ''}`,
+    hour: n => `${n}h`,
+    minute: n => `${n}min`,
+    second: n => `${n}s`,
+  },
+})
 </script>
 
 <template>
   <div ref="el" flex flex-col gap-2 my-4 @click="go">
-    <AccountInfo :account="status.account" />
+    <AccountInfo :account="status.account">
+      <div flex-auto />
+      <div text-sm op50>
+        {{ timeago }}
+      </div>
+    </AccountInfo>
     <StatusBody :status="status" />
+    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
+      <StatusMedia :attachment="attachment" />
+    </template>
     <StatusActions :status="status" />
   </div>
 </template>