♻️ Refactor post list

pages/posts/[id].vue

@@ -45,10 +45,16 @@
       <span v-for="tag in post.tags">#{{ tag.alias }}</span>
     </div>
 
-    <div class="text-xs text-grey flex flex-col">
+    <div class="text-xs text-grey flex flex-col mb-5">
       <span>Solar Network Post Web Preview</span>
       <span>To get full view of this post, open it on <a class="underline" :href="externalOpenLink">Solian</a></span>
     </div>
+
+    <div v-if="post.metric.reply_count" class="mb-5">
+      <v-card variant="outlined" :title="t('postReplies')" :subtitle="t('postRepliesCaption')">
+        <post-reply-list class="mt-[-20px] mx-[-1ch] mb-3" :post-id="post.id" />
+      </v-card>
+    </div>
   </v-container>
 </template>
 
@@ -60,6 +66,8 @@ const attachments = ref<any[]>([])
 const firstImage = ref<string | null>()
 const firstVideo = ref<string | null>()
 
+const { t } = useI18n()
+
 const { data: post } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/interactive/posts/${route.params.id}`)
 
 if (!post.value) {

pages/posts/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-container class="content-container mx-auto">
+    <div class="my-3 mx-[3.5ch]">
+      <h1 class="text-2xl">{{ t("navPosts") }}</h1>
+      <span>{{ t("navPostsCaption") }}</span>
+    </div>
+
+    <post-list />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHead({
+  title: t("navActivity"),
+})
+
+useSeoMeta({
+  title: t("navActivity"),
+  ogTitle: t("navActivity"),
+  description: t("navActivityCaption"),
+  ogDescription: t("navActivityCaption"),
+  ogType: "website",
+})
+</script>
+
+<style scoped>
+.content-container {
+  max-width: 70ch !important;
+}
+</style>