refs #3771 Set reply

src/renderer/components/TimelineSpace/Compose.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, ref, onMounted } from 'vue'
+import { defineComponent, reactive, computed, ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
@@ -94,6 +94,7 @@ import { MyWindow } from '~/src/types/global'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import visibilityList from '~/src/constants/visibility'
+import { MUTATION_TYPES } from '@/store/TimelineSpace/Compose'
 
 export default defineComponent({
   name: 'Compose',
@@ -101,6 +102,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const store = useStore()
+    const space = 'TimelineSpace/Compose'
     const win = (window as any) as MyWindow
 
     const id = computed(() => parseInt(route.params.id as string))
@@ -130,6 +132,8 @@ export default defineComponent({
     const cw = ref<boolean>(false)
     const visibility = ref(visibilityList.Public.key)
     const nsfw = ref<boolean>(false)
+    const inReplyTo = computed(() => store.state.TimelineSpace.Compose.inReplyTo)
+
     const loading = ref<boolean>(false)
     const emojiVisible = ref<boolean>(false)
     const imageRef = ref<any>(null)
@@ -162,6 +166,12 @@ export default defineComponent({
       emojiData.value = new EmojiIndex(emojiDefault, { custom: customEmojis })
     })
 
+    watch(inReplyTo, current => {
+      if (current) {
+        form.status = `@${current.acct} `
+      }
+    })
+
     const post = async () => {
       if (!client.value) {
         return
@@ -186,6 +196,11 @@ export default defineComponent({
             spoiler_text: form.spoiler
           })
         }
+        if (inReplyTo.value) {
+          options = Object.assign(options, {
+            in_reply_to_id: inReplyTo.value?.id
+          })
+        }
 
         await client.value.postStatus(form.status, options)
         clear()
@@ -202,6 +217,7 @@ export default defineComponent({
       attachments.value = []
       cw.value = false
       emojiVisible.value = false
+      store.commit(`${space}/${MUTATION_TYPES.CLEAR_REPLY_TO_ID}`)
     }
 
     const selectImage = () => {

src/renderer/components/organisms/Toot.vue

@@ -255,9 +255,9 @@ import { usernameWithStyle, accountNameWithStyle } from '@/utils/username'
 import { parseDatetime } from '@/utils/datetime'
 import { MUTATION_TYPES as SIDEBAR_MUTATION, ACTION_TYPES as SIDEBAR_ACTION } from '@/store/TimelineSpace/Contents/SideBar'
 import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
-import { ACTION_TYPES as NEW_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
 import { ACTION_TYPES as DETAIL_ACTION } from '@/store/TimelineSpace/Contents/SideBar/TootDetail'
 import { ACTION_TYPES as REPORT_ACTION } from '@/store/TimelineSpace/Modals/Report'
+import { MUTATION_TYPES as COMPOSE_MUTATION } from '@/store/TimelineSpace/Compose'
 import { ACTION_TYPES as MUTE_ACTION } from '@/store/TimelineSpace/Modals/MuteConfirm'
 import { ACTION_TYPES as VIEWER_ACTION } from '@/store/TimelineSpace/Modals/ImageViewer'
 import { ACTION_TYPES } from '@/store/organisms/Toot'
@@ -477,7 +477,10 @@ export default defineComponent({
       }
     }
     const openReply = () => {
-      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_ACTION.OPEN_REPLY}`, originalMessage.value)
+      store.commit(`TimelineSpace/Compose/${COMPOSE_MUTATION.SET_REPLY_TO_ID}`, {
+        acct: originalMessage.value.account.acct,
+        id: originalMessage.value.id
+      })
     }
     const openDetail = (message: Entity.Status) => {
       store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_TOOT_COMPONENT}`)

src/renderer/store/TimelineSpace.ts

@@ -11,6 +11,7 @@ import { MyWindow } from '~/src/types/global'
 import { LocalServer } from '~/src/types/localServer'
 import { Setting } from '~/src/types/setting'
 import { DefaultSetting } from '~/src/constants/initializer/setting'
+import Compose, { ComposeState } from './TimelineSpace/Compose'
 
 const win = (window as any) as MyWindow
 
@@ -201,6 +202,7 @@ type TimelineSpaceModule = {
   HeaderMenu: HeaderMenuState
   Modals: ModalsModuleState
   Contents: ContentsModuleState
+  Compose: ComposeState
 }
 
 export type TimelineSpaceModuleState = TimelineSpaceModule & TimelineSpaceState
@@ -211,7 +213,8 @@ const TimelineSpace: Module<TimelineSpaceState, RootState> = {
     SideMenu,
     HeaderMenu,
     Modals,
-    Contents
+    Contents,
+    Compose
   },
   state: state,
   mutations: mutations,

src/renderer/store/TimelineSpace/Compose.ts

@@ -0,0 +1,37 @@
+import { Module, MutationTree } from 'vuex'
+import { RootState } from '@/store'
+
+export type ReplyTo = {
+  acct: string
+  id: string
+}
+
+export type ComposeState = {
+  inReplyTo: ReplyTo | null
+}
+
+const state = (): ComposeState => ({
+  inReplyTo: null
+})
+
+export const MUTATION_TYPES = {
+  SET_REPLY_TO_ID: 'setReplyToId',
+  CLEAR_REPLY_TO_ID: 'clearReplyToId'
+}
+
+const mutations: MutationTree<ComposeState> = {
+  [MUTATION_TYPES.SET_REPLY_TO_ID]: (state, inReplyTo: ReplyTo) => {
+    state.inReplyTo = inReplyTo
+  },
+  [MUTATION_TYPES.CLEAR_REPLY_TO_ID]: state => {
+    state.inReplyTo = null
+  }
+}
+
+const Compose: Module<ComposeState, RootState> = {
+  namespaced: true,
+  state: state,
+  mutations: mutations
+}
+
+export default Compose