Add quote editor and quote previews

src/api/posts.ts

@@ -160,6 +160,7 @@ export interface PostData {
   in_reply_to_id: string | null;
   visibility: string;
   mentions: string[];
+  links: string[];
   attachments: Attachment[];
 }
 
@@ -175,6 +176,7 @@ export async function createPost(
     in_reply_to_id: postData.in_reply_to_id,
     visibility: postData.visibility,
     mentions: postData.mentions,
+    links: postData.links,
   }
   const response = await http(url, {
     method: "POST",

src/assets/tabler/quote.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg data-name="Layer 1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><path class="cls-1" d="M0,0H24V24H0Z"/><path class="cls-2" d="M9.7,10.85H5.1A1.09,1.09,0,0,1,4,9.7V6.25A1.09,1.09,0,0,1,5.1,5.1H8.55A1.09,1.09,0,0,1,9.7,6.25v6.9c0,3.1-1.49,4.94-4.6,5.75"/><path class="cls-2" d="M20,10.85h-4.6A1.09,1.09,0,0,1,14.3,9.7V6.25A1.09,1.09,0,0,1,15.45,5.1H18.9A1.09,1.09,0,0,1,20,6.25v6.9c0,3.1-1.49,4.94-4.6,5.75"/></svg>

src/components/Post.vue

@@ -65,6 +65,20 @@
         <a v-else :href="attachment.url">{{ attachment.url }}</a>
       </template>
     </div>
+    <a
+      v-if="post.quote"
+      class="post-quote"
+      :href="post.quote.uri"
+      @click="navigateTo($event, post.quote.id)"
+    >
+      <div class="quote-header">
+        <avatar :profile="post.quote.account"></avatar>
+        <span class="actor-address">
+          @{{ getActorAddress(post.quote.account) }}
+        </span>
+      </div>
+      <div class="quote-content" v-html="post.quote.content"></div>
+    </a>
     <div class="post-footer">
       <router-link
         v-if="!inThread"
@@ -684,6 +698,42 @@ async function onMintToken() {
   }
 }
 
+.post-quote {
+  border: 1px solid $separator-color;
+  border-radius: $block-border-radius;
+  color: inherit;
+  display: block;
+  margin: 0 $block-inner-padding $block-inner-padding;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
+.quote-header {
+  align-items: center;
+  color: $secondary-text-color;
+  display: flex;
+  flex-direction: row;
+  gap: calc($block-inner-padding / 2);
+  padding: $block-inner-padding $block-inner-padding 0;
+
+  .avatar {
+    height: $icon-size;
+    width: $icon-size;
+  }
+
+  .actor-address {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: all;
+  }
+}
+
+.quote-content {
+  padding: $block-inner-padding;
+}
+
 .post-attachment {
   padding: 0 $block-inner-padding $block-inner-padding;
   word-wrap: break-word;

src/components/PostEditor.vue

@@ -32,6 +32,12 @@
           <img :src="attachment.url">
         </div>
       </div>
+      <input
+        v-if="quoteInputVisible"
+        id="quote"
+        v-model="quote"
+        placeholder="Enter post ID"
+      >
       <div class="toolbar">
         <button
           type="button"
@@ -49,6 +55,15 @@
             @change="onAttachmentUpload($event)"
           >
         </button>
+        <button
+          v-if="canAddQuote()"
+          type="button"
+          class="icon"
+          title="Add quote"
+          @click="quoteInputVisible = !quoteInputVisible"
+        >
+          <img :src="require('@/assets/tabler/quote.svg')">
+        </button>
         <div
           class="dropdown-menu-wrapper"
           v-click-away="hideVisibilityMenu"
@@ -143,8 +158,10 @@ const attachmentUploadInputRef = $ref<HTMLInputElement | null>(null)
 
 let content = $ref("")
 let attachments = $ref<Attachment[]>([])
+let quote = $ref<string | null>(null)
 let visibility = $ref(Visibility.Public)
 
+const quoteInputVisible = $ref(false)
 let visibilityMenuVisible = $ref(false)
 let isLoading = $ref(false)
 let errorMessage = $ref<string | null>(null)
@@ -203,6 +220,10 @@ function removeAttachment(index: number) {
   attachments.splice(index, 1)
 }
 
+function canAddQuote(): boolean {
+  return props.inReplyTo === null && visibility === Visibility.Public
+}
+
 function toggleVisibilityMenu() {
   visibilityMenuVisible = !visibilityMenuVisible
 }
@@ -229,6 +250,7 @@ async function publish() {
     in_reply_to_id: props.inReplyTo ? props.inReplyTo.id : null,
     visibility: visibility,
     mentions: [],
+    links: quote ? [quote] : [],
     attachments: attachments,
   }
   isLoading = true
@@ -246,8 +268,9 @@ async function publish() {
   // Refresh editor
   errorMessage = null
   isLoading = false
-  attachments = []
   content = ""
+  attachments = []
+  quote = null
   if (postFormContentRef) {
     await nextTick()
     triggerResize(postFormContentRef)
@@ -285,7 +308,7 @@ $line-height: 1.5;
   border-radius: $block-border-radius;
 }
 
-textarea {
+#content {
   border-radius: $block-border-radius $block-border-radius 0 0;
   height: 100px;
   line-height: $line-height;
@@ -320,6 +343,12 @@ textarea {
   }
 }
 
+#quote {
+  border-top: 1px solid $separator-color;
+  line-height: $line-height;
+  padding: calc($block-inner-padding / 1.5) $block-inner-padding;
+}
+
 .toolbar {
   @include post-icon;