feat: styling

components/AccountInfo.vue

@@ -21,5 +21,6 @@ defineProps<{
         @{{ account.acct }}
       </p>
     </NuxtLink>
+    <slot />
   </div>
 </template>

components/status/StatusActions.vue

@@ -7,21 +7,29 @@ defineProps<{
 </script>
 
 <template>
-  <div flex justify-between gap-4>
-    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
+  <div flex gap-8>
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group>
+      <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
-      <span>{{ status.repliesCount }}</span>
+      </div>
+      <span v-if="status.repliesCount">{{ status.repliesCount }}</span>
     </button>
-    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
+    <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 />
-      <span>{{ status.reblogsCount }}</span>
+      </div>
+      <span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
     </button>
-    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
+      <div rounded-full p2 group-hover="bg-rose/10">
         <div i-ri:heart-3-line />
-      <span>{{ status.favouritesCount }}</span>
+      </div>
+      <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
     </button>
-    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
-      <div i-ri:more-2-fill />
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
+      <div rounded-full p2 group-hover="bg-purple/10">
+        <div i-ri:share-circle-line />
+      </div>
     </button>
   </div>
 </template>

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>

components/status/StatusMedia.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Attachment } from 'masto'
+
+const { attachment } = defineProps<{
+  attachment: Attachment
+}>()
+</script>
+
+<template>
+  <template v-if="attachment.type === 'image'">
+    <img
+      class="status-attachment-image"
+      :src="attachment.previewUrl!"
+      :alt="attachment.description!"
+      rounded-lg border="~ gray/10"
+    >
+  </template>
+  <template v-else>
+    TODO: {{ attachment }}
+  </template>
+</template>

unocss.config.ts

@@ -13,7 +13,9 @@ export default defineConfig({
   shortcuts: [
   ],
   presets: [
-    presetUno(),
+    presetUno({
+      attributifyPseudo: true,
+    }),
     presetAttributify(),
     presetIcons({
       scale: 1.2,