refs #4085 Show quote target message on compose

src/renderer/components/TimelineSpace/Compose.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="compose">
     <Quote v-if="inReplyTo" :message="inReplyTo" @close="clearReply" />
+    <Quote v-if="quoteTo" :message="quoteTo" @close="clearQuote" />
     <el-form :model="form" class="compose-form">
       <el-input v-model="form.spoiler" class="spoiler" :placeholder="$t('modals.new_toot.cw')" v-if="cw" />
       <el-input
@@ -191,6 +192,7 @@ export default defineComponent({
     const visibility = ref(visibilityList.Public.key)
     const nsfw = ref<boolean>(false)
     const inReplyTo = computed(() => store.state.TimelineSpace.Compose.inReplyTo)
+    const quoteTo = computed(() => store.state.TimelineSpace.Compose.quoteTo)
     const poll = reactive<{ options: Array<string>; expires_in: number }>({
       options: [],
       expires_in: 86400
@@ -291,6 +293,11 @@ export default defineComponent({
             in_reply_to_id: inReplyTo.value?.id
           })
         }
+        if (quoteTo.value) {
+          options = Object.assign(options, {
+            quote_id: quoteTo.value?.id
+          })
+        }
 
         if (poll.options.length > 0) {
           options = Object.assign(options, {
@@ -425,6 +432,10 @@ export default defineComponent({
       store.commit(`${space}/${MUTATION_TYPES.CLEAR_REPLY_TO_ID}`)
     }
 
+    const clearQuote = () => {
+      store.commit(`${space}/${MUTATION_TYPES.CLEAR_QUOTE_TO}`)
+    }
+
     return {
       form,
       post,
@@ -450,7 +461,9 @@ export default defineComponent({
       removePollOption,
       droppableVisible,
       inReplyTo,
+      quoteTo,
       clearReply,
+      clearQuote,
       statusChars
     }
   }

src/renderer/components/organisms/Toot.vue

@@ -145,7 +145,7 @@
             >
               <font-awesome-icon icon="bookmark" size="sm" />
             </el-button>
-            <el-button v-if="quoteSupported" link class="quote-btn" @click="openQuote()" disabled>
+            <el-button v-if="quoteSupported" link class="quote-btn" @click="openQuote()">
               <font-awesome-icon icon="quote-right" size="sm" />
             </el-button>
             <template v-if="server!.sns !== 'mastodon'">
@@ -677,7 +677,7 @@ export default defineComponent({
       ctx.emit('update', status)
     }
     const openQuote = () => {
-      // TODO
+      store.commit(`TimelineSpace/Compose/${COMPOSE_MUTATION.SET_QUOTE_TO}`, originalMessage.value)
     }
     const toggleSpoiler = () => {
       showContent.value = !showContent.value

src/renderer/store/TimelineSpace/Compose.ts

@@ -4,15 +4,19 @@ import { Entity } from 'megalodon'
 
 export type ComposeState = {
   inReplyTo: Entity.Status | null
+  quoteTo: Entity.Status | null
 }
 
 const state = (): ComposeState => ({
-  inReplyTo: null
+  inReplyTo: null,
+  quoteTo: null
 })
 
 export const MUTATION_TYPES = {
   SET_REPLY_TO_ID: 'setReplyToId',
-  CLEAR_REPLY_TO_ID: 'clearReplyToId'
+  CLEAR_REPLY_TO_ID: 'clearReplyToId',
+  SET_QUOTE_TO: 'setQuoteTo',
+  CLEAR_QUOTE_TO: 'clearQuoteTo'
 }
 
 const mutations: MutationTree<ComposeState> = {
@@ -21,6 +25,12 @@ const mutations: MutationTree<ComposeState> = {
   },
   [MUTATION_TYPES.CLEAR_REPLY_TO_ID]: state => {
     state.inReplyTo = null
+  },
+  [MUTATION_TYPES.SET_QUOTE_TO]: (state, quoteTo: Entity.Status) => {
+    state.quoteTo = quoteTo
+  },
+  [MUTATION_TYPES.CLEAR_QUOTE_TO]: state => {
+    state.quoteTo = null
   }
 }