feat: styling

components/PostActions.vue

@@ -7,18 +7,21 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div flex justify-around px-2>
-    <button flex gap-1 items-center>
+  <div flex justify-between gap-4>
+    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:chat-3-line />
       <span>{{ post.replies_count }}</span>
     </button>
-    <button flex gap-1 items-center>
+    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:repeat-fill />
       <span>{{ post.reblogs_count }}</span>
     </button>
-    <button flex gap-1 items-center>
+    <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:heart-3-line />
       <span>{{ post.favourites_count }}</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>
   </div>
 </template>

components/PostBody.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Post } from '~/api-client/types'
+
+const props = defineProps<{
+  post: Post
+}>()
+</script>
+
+<template>
+  <div class="post-body" v-html="sanitize(post.content)" />
+</template>
+
+<style>
+.post-body a {
+  --at-apply: text-primary hover:underline;
+}
+.post-body b {
+  --at-apply: font-bold;
+}
+.post-body p {
+  --at-apply: my-1;
+}
+.post-body a .invisible {
+  --at-apply: hidden;
+}
+.post-body a .ellipsis {
+  --at-apply: truncate overflow-hidden ws-nowrap;
+}
+</style>

components/PostCard.vue

@@ -7,9 +7,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div flex flex-col gap-4 mb-5>
+  <NuxtLink flex flex-col gap-2 my-4 :to="`/${post.account.acct}/${post.id}`">
     <AccountInfo :account="post.account" />
-    <div v-html="post.content" />
+    <PostBody :post="post" />
     <PostActions :post="post" />
-  </div>
+  </NuxtLink>
 </template>