Allow to create posts with multiple object links

src/api/posts.ts

@@ -72,7 +72,7 @@ export interface Post {
   ipfs_cid: string | null;
   token_id: number | null;
   token_tx_id: string | null;
-  quote: Post | null;
+  links: Post[];
 }
 
 export async function getHomeTimeline(

src/components/Post.vue

@@ -66,24 +66,25 @@
       ></post-attachment>
     </div>
     <a
-      v-if="post.quote"
+      v-for="linkedPost in post.links"
       class="post-quote"
-      :href="post.quote.uri"
+      :href="linkedPost.uri"
-      @click="navigateTo($event, post.quote.id)"
+      :key="linkedPost.id"
+      @click="navigateTo($event, linkedPost.id)"
     >
       <div class="quote-header">
-        <avatar :profile="post.quote.account"></avatar>
+        <avatar :profile="linkedPost.account"></avatar>
         <span class="display-name">
-          {{ getQuoteAuthorDisplayName() }}
+          {{ getQuoteAuthorDisplayName(linkedPost) }}
         </span>
         <span class="actor-address">
-          @{{ getActorAddress(post.quote.account) }}
+          @{{ getActorAddress(linkedPost.account) }}
         </span>
       </div>
-      <post-content :post="post.quote"></post-content>
+      <post-content :post="linkedPost"></post-content>
-      <div class="quote-attachments" v-if="post.quote.media_attachments.length > 0">
+      <div class="quote-attachments" v-if="linkedPost.media_attachments.length > 0">
         <post-attachment
-          v-for="attachment in post.quote.media_attachments"
+          v-for="attachment in linkedPost.media_attachments"
           :attachment="attachment"
           :key="attachment.id"
         ></post-attachment>
@@ -336,11 +337,8 @@ function getReplyMentions(): Mention[] {
   return props.post.mentions
 }
 
-function getQuoteAuthorDisplayName(): string | null {
+function getQuoteAuthorDisplayName(post: Post): string | null {
-  if (props.post.quote === null) {
+  const profile = new ProfileWrapper(post.account)
-    return null
-  }
-  const profile = new ProfileWrapper(props.post.quote.account)
   return profile.getDisplayName()
 }
 

src/components/PostContent.vue

@@ -56,14 +56,13 @@ function configureInlineLinks() {
       })
     }
   }
-  const quote = props.post.quote
+  for (const linkedPost of props.post.links) {
-  if (quote) {
     const links = postContentRef.querySelectorAll("a")
     for (const linkElement of Array.from(links)) {
-      if (quote.uri === linkElement.getAttribute("href")) {
+      if (linkedPost.uri === linkElement.getAttribute("href")) {
         linkElement.addEventListener("click", (event: Event) => {
           event.preventDefault()
-          router.push({ name: "post", params: { postId: quote.id } })
+          router.push({ name: "post", params: { postId: linkedPost.id } })
         })
       }
     }

src/components/PostEditor.vue

@@ -33,10 +33,10 @@
         </div>
       </div>
       <input
-        v-if="quoteInputVisible"
+        v-if="linkListInputVisible"
-        id="quote"
+        id="link-list"
-        v-model="quote"
+        v-model="linkList"
-        placeholder="Enter post ID"
+        placeholder="Enter post IDs (separated by commas)"
       >
       <div class="toolbar">
         <button
@@ -45,7 +45,7 @@
           title="Attach image"
           :disabled="!canAttachFile()"
           @click="selectAttachment()"
-          @click.middle="canAddQuote() ? quoteInputVisible = !quoteInputVisible : null"
+          @click.middle="canAddLink() ? linkListInputVisible = !linkListInputVisible : null"
         >
           <img :src="require('@/assets/feather/paperclip.svg')">
           <input
@@ -57,11 +57,11 @@
           >
         </button>
         <button
-          v-if="canAddQuote() && false"
+          v-if="canAddLink() && false"
           type="button"
           class="icon"
-          title="Add quote"
+          title="Add link"
-          @click="quoteInputVisible = !quoteInputVisible"
+          @click="linkListInputVisible = !linkListInputVisible"
         >
           <img :src="require('@/assets/tabler/quote.svg')">
         </button>
@@ -159,10 +159,10 @@ const attachmentUploadInputRef = $ref<HTMLInputElement | null>(null)
 
 let content = $ref("")
 let attachments = $ref<Attachment[]>([])
-let quote = $ref<string | null>(null)
+let linkList = $ref<string | null>(null)
 let visibility = $ref(Visibility.Public)
 
-let quoteInputVisible = $ref(false)
+let linkListInputVisible = $ref(false)
 let visibilityMenuVisible = $ref(false)
 let isLoading = $ref(false)
 let errorMessage = $ref<string | null>(null)
@@ -221,7 +221,7 @@ function removeAttachment(index: number) {
   attachments.splice(index, 1)
 }
 
-function canAddQuote(): boolean {
+function canAddLink(): boolean {
   return props.inReplyTo === null && visibility === Visibility.Public
 }
 
@@ -251,7 +251,7 @@ async function publish(contentType = "text/markdown") {
     in_reply_to_id: props.inReplyTo ? props.inReplyTo.id : null,
     visibility: visibility,
     mentions: [],
-    links: quote ? [quote] : [],
+    links: linkList ? linkList.split(",") : [],
     attachments: attachments,
   }
   isLoading = true
@@ -271,8 +271,8 @@ async function publish(contentType = "text/markdown") {
   isLoading = false
   content = ""
   attachments = []
-  quote = null
+  linkList = null
-  quoteInputVisible = false
+  linkListInputVisible = false
   if (postFormContentRef) {
     await nextTick()
     triggerResize(postFormContentRef)
@@ -345,7 +345,7 @@ $line-height: 1.5;
   }
 }
 
-#quote {
+#link-list {
   border-top: 1px solid $separator-color;
   line-height: $line-height;
   padding: calc($block-inner-padding / 1.5) $block-inner-padding;