Show mentions in post subheader

src/api/posts.ts

@@ -25,11 +25,18 @@ export async function uploadAttachment(
   return data
 }
 
+export interface Mention {
+  id: string;
+  username: string;
+  acct: string;
+  url: string;
+}
+
 export interface Post {
   id: string;
   uri: string;
   created_at: string;
-  account: Profile,
+  account: Profile;
   content: string;
   in_reply_to_id: string | null;
   reblog: Post | null;
@@ -38,6 +45,7 @@ export interface Post {
   favourites_count: number;
   reblogs_count: number;
   media_attachments: Attachment[];
+  mentions: Mention[];
   favourited: boolean;
   reblogged: boolean;
   ipfs_cid: string | null;

src/components/Post.vue

@@ -40,6 +40,16 @@
         {{ formatDate(post.created_at) }}
       </a>
     </div>
+    <div class="post-subheader" v-if="replyingTo.length > 0">
+      <span>replying to</span>
+      <router-link
+        v-for="mention in replyingTo"
+        :to="{ name: 'profile', params: { profileId: mention.id }}"
+        :key="mention.id"
+      >
+        @{{ mention.username }}
+      </router-link>
+    </div>
     <div class="post-content" ref="postContent" v-html="post.content"></div>
     <div class="post-attachment" v-if="post.media_attachments.length === 1">
       <img :src="post.media_attachments[0].url">
@@ -179,6 +189,7 @@ import { Prop } from "vue-property-decorator"
 
 import { makePermanent, getSignature, mintToken, onTokenMinted } from "@/api/nft"
 import {
+  Mention,
   Post,
   getPost,
   deletePost,
@@ -265,6 +276,13 @@ export default class PostComponent extends Vue {
     return formatDate(isoDate)
   }
 
+  get replyingTo(): Mention[] {
+    if (this.post.in_reply_to_id === null) {
+      return []
+    }
+    return this.post.mentions
+  }
+
   canReply(): boolean {
     return this.store.currentUser !== null
   }
@@ -527,6 +545,15 @@ export default class PostComponent extends Vue {
   }
 }
 
+.post-subheader {
+  color: $secondary-text-color;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25em;
+  padding: $block-inner-padding / 4 $block-inner-padding 0;
+}
+
 .post-content {
   color: $text-color;
   line-height: 1.5;