From fef5f23166a00bc3bddbadf4238a38b1c5bd397c Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 27 Apr 2022 21:17:37 +0900
Subject: [PATCH 01/11] Rewrite Modals/Shortcut with composition API

---
 .../TimelineSpace/Modals/Shortcut.vue         | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index 9afc6541..0be521c7 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -81,20 +81,26 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useStore } from '@/store'
+import { MUTATION_TYPES } from '@/store/TimelineSpace/Modals/Shortcut'
+
+export default defineComponent({
   name: 'shortcut',
-  computed: {
-    shortcutModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.Shortcut.modalOpen
-      },
-      set(value) {
-        this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', value)
-      }
+  setup() {
+    const space = 'TimelineSpace/Modals/Shortcut'
+    const store = useStore()
+    const shortcutModal = computed({
+      get: () => store.state.TimelineSpace.Modals.Shortcut.modalOpen,
+      set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL}`, value)
+    })
+
+    return {
+      shortcutModal
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

From 2acc8468ca8991b0df09758770ce60fe7548df93 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Wed, 27 Apr 2022 23:35:39 +0900
Subject: [PATCH 02/11] Rewrite Modals/Jump with composition API

---
 .../components/TimelineSpace/Modals.vue       |  10 +-
 .../components/TimelineSpace/Modals/Jump.vue  | 158 +++++++-----------
 src/renderer/main.js                          |   6 +
 .../store/TimelineSpace/Modals/Jump.ts        |  15 +-
 4 files changed, 85 insertions(+), 104 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index 54f452f6..1fcb3e45 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <new-toot></new-toot>
-    <jump></jump>
+    <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
     <list-membership></list-membership>
     <add-list-member></add-list-member>
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import NewToot from './Modals/NewToot'
 import Jump from './Modals/Jump'
 import ImageViewer from './Modals/ImageViewer'
@@ -31,7 +32,12 @@ export default {
     AddListMember,
     MuteConfirm,
     Shortcut,
-    Report,
+    Report
   },
+  computed: {
+    ...mapState({
+      jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen
+    })
+  }
 }
 </script>
diff --git a/src/renderer/components/TimelineSpace/Modals/Jump.vue b/src/renderer/components/TimelineSpace/Modals/Jump.vue
index d71e62d4..7c51eda0 100644
--- a/src/renderer/components/TimelineSpace/Modals/Jump.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Jump.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-dialog v-model="jumpModal" width="440px" class="jump-modal">
-    <el-form class="jump-form" v-on:submit.prevent="jump">
+  <el-dialog v-model="jumpModal" width="440px" custom-class="jump-modal">
+    <el-form class="jump-form" v-on:submit.prevent="jumpCurrentSelected">
       <div class="channel">
-        <input type="text" v-model="channel" :placeholder="$t('modals.jump.jump_to')" ref="channel" />
+        <input type="text" v-model="inputtedChannel" :placeholder="$t('modals.jump.jump_to')" ref="channelForm" v-focus autofocus />
         <ul class="channel-list">
           <li
-            v-for="c in filterdChannel"
+            v-for="c in filteredChannel"
             :class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'"
             @click="jump(c)"
             @mouseover="changeSelected(c)"
@@ -22,107 +22,69 @@
   </el-dialog>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, watch } from 'vue'
+import { useStore } from '@/store'
+import { MUTATION_TYPES, ACTION_TYPES, Channel } from '@/store/TimelineSpace/Modals/Jump'
 
-export default {
+export default defineComponent({
   name: 'jump',
-  computed: {
-    ...mapState('TimelineSpace/Modals/Jump', {
-      channelList: state => state.defaultChannelList.concat(state.tagChannelList).concat(state.listChannelList),
-      selectedChannel: state => state.selectedChannel
-    }),
-    channel: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.Jump.channel
-      },
-      set(value) {
-        this.$store.commit('TimelineSpace/Modals/Jump/updateChannel', value)
-      }
-    },
-    filterdChannel() {
-      return this.filterChannelForm()
-    },
-    jumpModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.Jump.modalOpen
-      },
-      set(value) {
-        this.$store.commit('TimelineSpace/Modals/Jump/changeModal', value)
-      }
-    },
-    shortcutEnabled: function () {
-      return this.jumpModal
-    }
-  },
-  watch: {
-    channel: function (_newChannel, _oldChannel) {
-      this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', this.filterChannelForm()[0])
-    },
-    jumpModal: function (newModal, oldModal) {
-      if (!oldModal && newModal) {
-        this.$nextTick(function () {
-          this.$store.dispatch('TimelineSpace/Modals/Jump/syncListChannel')
-          this.$store.dispatch('TimelineSpace/Modals/Jump/syncTagChannel')
-          this.$refs.channel.focus()
-        })
+  setup() {
+    const space = 'TimelineSpace/Modals/Jump'
+    const store = useStore()
+
+    const channelList = computed(() =>
+      store.state.TimelineSpace.Modals.Jump.defaultChannelList
+        .concat(store.state.TimelineSpace.Modals.Jump.tagChannelList)
+        .concat(store.state.TimelineSpace.Modals.Jump.listChannelList)
+    )
+    const selectedChannel = computed(() => store.state.TimelineSpace.Modals.Jump.selectedChannel)
+    const inputtedChannel = computed({
+      get: () => store.state.TimelineSpace.Modals.Jump.channel,
+      set: (value: string) => store.commit(`${space}/${MUTATION_TYPES.UPDATE_CHANNEL}`, value)
+    })
+    const jumpModal = computed({
+      get: () => store.state.TimelineSpace.Modals.Jump.modalOpen,
+      set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL}`, value)
+    })
+    // const shortcutEnabled = computed(() => jumpModal.value)
+    const filteredChannel = computed(() =>
+      channelList.value.filter(c => c.name.toLowerCase().indexOf(inputtedChannel.value.toLowerCase()) !== -1)
+    )
+
+    watch(inputtedChannel, (_new, _old) => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_SELECTED}`, filteredChannel.value[0])
+    })
+    watch(jumpModal, (newValue, oldValue) => {
+      if (!oldValue && newValue) {
+        store.dispatch(`${space}/${ACTION_TYPES.SYNC_LIST_CHANNEL}`)
+        store.dispatch(`${space}/${ACTION_TYPES.SYNC_TAG_CHANNEL}`)
       } else {
-        this.channel = ''
+        store.commit(`${space}/${MUTATION_TYPES.UPDATE_CHANNEL}`, '')
       }
+    })
+
+    const changeSelected = (channel: Channel) => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_SELECTED}`, channel)
     }
-  },
-  methods: {
-    filterChannelForm() {
-      return this.channelList.filter(c => {
-        return c.name.toLowerCase().indexOf(this.channel.toLowerCase()) !== -1
-      })
-    },
-    nextChannel() {
-      const filterd = this.filterChannelForm()
-      const i = filterd.findIndex(e => {
-        return e.name === this.selectedChannel.name
-      })
-      if (i !== undefined && i < filterd.length - 1) {
-        this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i + 1])
-      }
-    },
-    prevChannel() {
-      const filterd = this.filterChannelForm()
-      const i = filterd.findIndex(e => {
-        return e.name === this.selectedChannel.name
-      })
-      if (i !== undefined && i > 0) {
-        this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', filterd[i - 1])
-      }
-    },
-    changeSelected(channel) {
-      this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', channel)
-    },
-    jumpCurrentSelected() {
-      if (this.jumpModal) {
-        this.$store.dispatch('TimelineSpace/Modals/Jump/jumpCurrentSelected')
-      }
-    },
-    jump(channel) {
-      this.$store.dispatch('TimelineSpace/Modals/Jump/jump', channel)
-    },
-    handleKey(event) {
-      switch (event.srcKey) {
-        case 'next':
-          this.nextChannel()
-          break
-        case 'prev':
-          this.prevChannel()
-          break
-        case 'select':
-          this.jumpCurrentSelected()
-          break
-        default:
-          return true
-      }
+    const jump = (channel: Channel) => {
+      store.dispatch(`${space}/${ACTION_TYPES.JUMP}`, channel)
+    }
+    const jumpCurrentSelected = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.JUMP_CURRENT_SELECTED}`)
+    }
+
+    return {
+      selectedChannel,
+      inputtedChannel,
+      jumpModal,
+      filteredChannel,
+      jump,
+      changeSelected,
+      jumpCurrentSelected
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 51922bec..63f67157 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -150,6 +150,12 @@ app.use(VueVirtualScroller)
 app.use(VueResize)
 app.use(i18n)
 
+app.directive('focus', {
+  mounted(el) {
+    el.focus()
+  }
+})
+
 sync(store, router)
 
 app.mount('#app')
diff --git a/src/renderer/store/TimelineSpace/Modals/Jump.ts b/src/renderer/store/TimelineSpace/Modals/Jump.ts
index b194e99e..0eecc62e 100644
--- a/src/renderer/store/TimelineSpace/Modals/Jump.ts
+++ b/src/renderer/store/TimelineSpace/Modals/Jump.ts
@@ -106,19 +106,26 @@ const mutations: MutationTree<JumpState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  JUMP_CURRENT_SELECTED: 'jumpCurrentSelected',
+  JUMP: 'jump',
+  SYNC_LIST_CHANNEL: 'syncListChannel',
+  SYNC_TAG_CHANNEL: 'syncTagChannel'
+}
+
 const actions: ActionTree<JumpState, RootState> = {
-  jumpCurrentSelected: ({ state, commit, rootState }) => {
+  [ACTION_TYPES.JUMP_CURRENT_SELECTED]: ({ state, commit, rootState }) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, false)
     router.push({ path: `/${rootState.TimelineSpace.account._id}/${state.selectedChannel.path}` })
   },
-  jump: ({ commit, rootState }, channel: Channel) => {
+  [ACTION_TYPES.JUMP]: ({ commit, rootState }, channel: Channel) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, false)
     router.push({ path: `/${rootState.TimelineSpace.account._id}/${channel.path}` })
   },
-  syncListChannel: ({ commit, rootState }) => {
+  [ACTION_TYPES.SYNC_LIST_CHANNEL]: ({ commit, rootState }) => {
     commit(MUTATION_TYPES.UPDATE_LIST_CHANNEL, rootState.TimelineSpace.SideMenu.lists)
   },
-  syncTagChannel: ({ commit, rootState }) => {
+  [ACTION_TYPES.SYNC_TAG_CHANNEL]: ({ commit, rootState }) => {
     commit(MUTATION_TYPES.UPDATE_TAG_CHANNEL, rootState.TimelineSpace.SideMenu.tags)
   }
 }

From 892719141bb004e2f6af0e9cf5f32626a655b50d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 28 Apr 2022 21:15:26 +0900
Subject: [PATCH 03/11] Rewrite Modals/ImageViewer with composition API

---
 .../TimelineSpace/Modals/ImageViewer.vue      |  76 +++++++------
 .../Modals/ImageViewer/Media.vue              |  80 ++++++++++++++
 .../components/TimelineSpace/Modals/Media.vue | 103 ------------------
 .../TimelineSpace/Modals/Shortcut.vue         |   2 +-
 .../store/TimelineSpace/Modals/ImageViewer.ts |  18 ++-
 5 files changed, 131 insertions(+), 148 deletions(-)
 create mode 100644 src/renderer/components/TimelineSpace/Modals/ImageViewer/Media.vue
 delete mode 100644 src/renderer/components/TimelineSpace/Modals/Media.vue

diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
index f2c4b508..0c46c194 100644
--- a/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer.vue
@@ -11,7 +11,7 @@
           <span class="button-area"
             ><el-button type="text" v-show="showLeft" @click="decrementIndex()"> <font-awesome-icon icon="angle-left" /> </el-button
           ></span>
-          <Media :src="imageURL" :type="imageType"></Media>
+          <Media :src="imageURL" :imageType="imageType"></Media>
           <span class="button-area"
             ><el-button type="text" v-show="showRight" @click="incrementIndex()"> <font-awesome-icon icon="angle-right" /> </el-button
           ></span>
@@ -21,51 +21,49 @@
   </transition>
 </template>
 
-<script>
-import Media from './Media'
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ImageViewer'
+import Media from './ImageViewer/Media.vue'
 
-export default {
+export default defineComponent({
+  name: 'image-viewer',
   components: {
     Media
   },
-  name: 'image-viewer',
-  computed: {
-    ...mapState({
-      modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen
-    }),
-    imageURL() {
-      return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
-    },
-    imageType() {
-      return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageType']
-    },
-    showLeft() {
-      return this.$store.getters['TimelineSpace/Modals/ImageViewer/showLeft']
-    },
-    showRight() {
-      return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight']
+  setup() {
+    const space = 'TimelineSpace/Modals/ImageViewer'
+    const store = useStore()
+
+    const modalOpen = computed(() => store.state.TimelineSpace.Modals.ImageViewer.modalOpen)
+    const imageURL = computed(() => store.getters[`${space}/imageURL`])
+    const imageType = computed(() => store.getters[`${space}/imageType`])
+    const showLeft = computed(() => store.getters[`${space}/showLeft`])
+    const showRight = computed(() => store.getters[`${space}/showRight`])
+
+    const close = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.CLOSE_MODAL}`)
     }
-  },
-  methods: {
-    close() {
-      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
-    },
-    decrementIndex() {
-      if (this.showLeft) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
-    },
-    incrementIndex() {
-      if (this.showRight) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
-    },
-    closeHandle(event) {
-      switch (event.srcKey) {
-        case 'close':
-          this.close()
-          break
-      }
+    const decrementIndex = () => {
+      if (showLeft.value) store.dispatch(`${space}/${ACTION_TYPES.DECREMENT_INDEX}`)
+    }
+    const incrementIndex = () => {
+      if (showRight.value) store.dispatch(`${space}/${ACTION_TYPES.INCREMENT_INDEX}`)
+    }
+
+    return {
+      modalOpen,
+      imageURL,
+      imageType,
+      showLeft,
+      showRight,
+      close,
+      decrementIndex,
+      incrementIndex
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/TimelineSpace/Modals/ImageViewer/Media.vue b/src/renderer/components/TimelineSpace/Modals/ImageViewer/Media.vue
new file mode 100644
index 00000000..d9ed1117
--- /dev/null
+++ b/src/renderer/components/TimelineSpace/Modals/ImageViewer/Media.vue
@@ -0,0 +1,80 @@
+<template>
+  <div id="current-media" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+    <video :src="imageSrc" v-if="isMovie()" autoplay loop controls v-on:loadstart="loaded()"></video>
+    <video :src="imageSrc" v-else-if="isGIF()" autoplay loop v-on:loadstart="loaded()"></video>
+    <video :src="imageSrc" v-else-if="isAudio()" autoplay loop controls v-on:loadstart="loaded()"></video>
+    <img :src="imageSrc" v-else v-on:load="loaded()" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRefs, watch, computed } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ImageViewer'
+import exifImageUrl from '@/components/utils/exifImageUrl'
+
+export default defineComponent({
+  name: 'Media',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    imageType: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const srcRef = toRefs(props).src
+    const imageTypeRef = toRefs(props).imageType
+    const imageSrc = ref('')
+    imageSrc.value = srcRef.value
+    const store = useStore()
+    const loading = computed(() => store.state.TimelineSpace.Modals.ImageViewer.loading)
+
+    const isMovie = () => ['video'].includes(imageTypeRef.value)
+    const isGIF = () => ['gifv'].includes(imageTypeRef.value)
+    const isAudio = () => ['audio'].includes(imageTypeRef.value)
+
+    watch(srcRef, async (newSrc, _oldSrc) => {
+      imageSrc.value = newSrc
+      if (newSrc && !isMovie() && !isGIF() && !isAudio()) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          imageSrc.value = transformed
+        } catch (err) {
+          console.error(err)
+        }
+      }
+    })
+
+    const loaded = () => store.dispatch(`TimelineSpace/Modals/ImageViewer/${ACTION_TYPES.LOADED}`)
+
+    return {
+      imageSrc,
+      loading,
+      isMovie,
+      isGIF,
+      isAudio,
+      loaded
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+#current-media {
+  max-width: 80%;
+  min-width: 10%;
+  height: 80%;
+  display: inline-flex;
+
+  img,
+  video {
+    max-height: 100%;
+    max-width: 100%;
+    align-self: center;
+  }
+}
+</style>
diff --git a/src/renderer/components/TimelineSpace/Modals/Media.vue b/src/renderer/components/TimelineSpace/Modals/Media.vue
deleted file mode 100644
index b8af9209..00000000
--- a/src/renderer/components/TimelineSpace/Modals/Media.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div
-    id="current-media"
-    v-loading="loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-  >
-    <video
-      :src="src"
-      v-if="isMovieFile()"
-      autoplay
-      loop
-      controls
-      v-on:loadstart="loaded()"
-    ></video>
-    <video
-      :src="src"
-      v-else-if="isGIF()"
-      autoplay
-      loop
-      v-on:loadstart="loaded()"
-    ></video>
-    <video
-      :src="src"
-      v-else-if="isAudio()"
-      autoplay
-      loop
-      controls
-      v-on:loadstart="loaded()"
-    ></video>
-    <img :src="imageSrc" v-else v-on:load="loaded()" />
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import exifImageUrl from '@/components/utils/exifImageUrl'
-
-export default {
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      imageSrc: this.src,
-    }
-  },
-  watch: {
-    src: async function (newSrc, _oldSrc) {
-      this.imageSrc = newSrc
-      if (newSrc && !this.isMovieFile() && !this.isGIF()) {
-        try {
-          const transformed = await exifImageUrl(newSrc)
-          this.imageSrc = transformed
-        } catch (err) {
-          console.error(err)
-        }
-      }
-    },
-  },
-  computed: {
-    ...mapState({
-      loading: (state) => state.TimelineSpace.Modals.ImageViewer.loading,
-    }),
-  },
-  methods: {
-    isMovieFile() {
-      return ['video'].includes(this.type)
-    },
-    isGIF() {
-      return ['gifv'].includes(this.type)
-    },
-    isAudio() {
-      return ['audio'].includes(this.type)
-    },
-    async loaded() {
-      this.$store.dispatch('TimelineSpace/Modals/ImageViewer/loaded')
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-#current-media {
-  max-width: 80%;
-  min-width: 10%;
-  height: 80%;
-  display: inline-flex;
-
-  img,
-  video {
-    max-height: 100%;
-    max-width: 100%;
-    align-self: center;
-  }
-}
-</style>
diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index 0be521c7..9a3078dc 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="shortcut">
-    <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" class="shortcut-modal">
+    <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" custom-class="shortcut-modal">
       <table class="shortcuts">
         <tbody>
           <tr>
diff --git a/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
index 05ddaaf5..b4a97cf3 100644
--- a/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
+++ b/src/renderer/store/TimelineSpace/Modals/ImageViewer.ts
@@ -46,28 +46,36 @@ const mutations: MutationTree<ImageViewerState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  OPEN_MODAL: 'openModal',
+  CLOSE_MODAL: 'closeModal',
+  INCREMENT_INDEX: 'incrementIndex',
+  DECREMENT_INDEX: 'decrementIndex',
+  LOADED: 'loaded'
+}
+
 const actions: ActionTree<ImageViewerState, RootState> = {
-  openModal: ({ commit }, { currentIndex, mediaList }) => {
+  [ACTION_TYPES.OPEN_MODAL]: ({ commit }, { currentIndex, mediaList }) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, true)
     commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, currentIndex as number)
     commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, mediaList as Array<Entity.Attachment>)
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
   },
-  closeModal: ({ commit }) => {
+  [ACTION_TYPES.CLOSE_MODAL]: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, false)
     commit(MUTATION_TYPES.CHANGE_CURRENT_INDEX, -1)
     commit(MUTATION_TYPES.CHANGE_MEDIA_LIST, [])
     commit(MUTATION_TYPES.CHANGE_LOADING, false)
   },
-  incrementIndex: ({ commit }) => {
+  [ACTION_TYPES.INCREMENT_INDEX]: ({ commit }) => {
     commit(MUTATION_TYPES.INCREMENT_INDEX)
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
   },
-  decrementIndex: ({ commit }) => {
+  [ACTION_TYPES.DECREMENT_INDEX]: ({ commit }) => {
     commit(MUTATION_TYPES.DECREMENT_INDEX)
     commit(MUTATION_TYPES.CHANGE_LOADING, true)
   },
-  loaded: ({ commit }) => {
+  [ACTION_TYPES.LOADED]: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_LOADING, false)
   }
 }

From 899cdaabf950207e4a888894bd4706871263152b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 28 Apr 2022 21:30:37 +0900
Subject: [PATCH 04/11] Rewrite Modals/Report with composition API

---
 .../components/TimelineSpace/Modals.vue       |  5 +-
 .../TimelineSpace/Modals/Report.vue           | 64 ++++++++++---------
 .../store/TimelineSpace/Modals/Report.ts      |  9 ++-
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index 1fcb3e45..dfd6ad26 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -7,7 +7,7 @@
     <add-list-member></add-list-member>
     <mute-confirm></mute-confirm>
     <shortcut></shortcut>
-    <report></report>
+    <report v-if="reportModal"></report>
   </div>
 </template>
 
@@ -36,7 +36,8 @@ export default {
   },
   computed: {
     ...mapState({
-      jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen
+      jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
+      reportModal: state => state.TimelineSpace.Modals.Report.modalOpen
     })
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Modals/Report.vue b/src/renderer/components/TimelineSpace/Modals/Report.vue
index 8e9d96a5..f323e266 100644
--- a/src/renderer/components/TimelineSpace/Modals/Report.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Report.vue
@@ -10,43 +10,45 @@
   </el-dialog>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { useStore } from '@/store'
+import { MUTATION_TYPES, ACTION_TYPES } from '@/store/TimelineSpace/Modals/Report'
 
-export default {
+export default defineComponent({
   name: 'Report',
-  data() {
-    return {
-      comment: ''
+  setup() {
+    const space = 'TimelineSpace/Modals/Report'
+    const store = useStore()
+
+    const comment = ref<string>('')
+
+    const status = computed(() => store.state.TimelineSpace.Modals.Report.message)
+    const reportModal = computed({
+      get: () => store.state.TimelineSpace.Modals.Report.modalOpen,
+      set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL_OPEN}`, value)
+    })
+
+    const closeModal = () => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL_OPEN}`, false)
     }
-  },
-  computed: {
-    ...mapState('TimelineSpace/Modals/Report', {
-      toot: state => state.message
-    }),
-    reportModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.Report.modalOpen
-      },
-      set(value) {
-        this.$store.commit('TimelineSpace/Modals/Report/changeModalOpen', value)
-      }
-    }
-  },
-  methods: {
-    closeModal() {
-      this.reportModal = false
-    },
-    async submit() {
-      this.closeModal()
-      await this.$store.dispatch('TimelineSpace/Modals/Report/submit', {
-        account_id: this.toot.account.id,
-        status_id: this.toot.id,
-        comment: this.comment
+    const submit = async () => {
+      closeModal()
+      await store.dispatch(`${space}/${ACTION_TYPES.SUBMIT}`, {
+        account_id: status.value?.account.id,
+        status_id: status.value?.id,
+        comment: comment.value
       })
     }
+
+    return {
+      comment,
+      reportModal,
+      closeModal,
+      submit
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/renderer/store/TimelineSpace/Modals/Report.ts b/src/renderer/store/TimelineSpace/Modals/Report.ts
index a0b975f8..655a1a7d 100644
--- a/src/renderer/store/TimelineSpace/Modals/Report.ts
+++ b/src/renderer/store/TimelineSpace/Modals/Report.ts
@@ -26,12 +26,17 @@ const mutations: MutationTree<ReportState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  OPEN_REPORT: 'openReport',
+  SUBMIT: 'submit'
+}
+
 const actions: ActionTree<ReportState, RootState> = {
-  openReport: ({ commit }, message: Entity.Status) => {
+  [ACTION_TYPES.OPEN_REPORT]: ({ commit }, message: Entity.Status) => {
     commit(MUTATION_TYPES.CHANGE_MESSAGE, message)
     commit(MUTATION_TYPES.CHANGE_MODAL_OPEN, true)
   },
-  submit: async ({ rootState }, { account_id, status_id, comment }) => {
+  [ACTION_TYPES.SUBMIT]: async ({ rootState }, { account_id, status_id, comment }) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,

From 9ddb0f92f1302c061944a02819d16b77273123eb Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 28 Apr 2022 21:47:59 +0900
Subject: [PATCH 05/11] Rewrite Modals/MuteConfirm with composition API

---
 .../TimelineSpace/Modals/MuteConfirm.vue      | 57 ++++++++++---------
 .../store/TimelineSpace/Modals/MuteConfirm.ts | 12 +++-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
index c7ee1c73..84a5d598 100644
--- a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
+++ b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
@@ -12,39 +12,40 @@
   </el-dialog>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/MuteConfirm'
 
-export default {
+export default defineComponent({
   name: 'MuteConfirm',
-  data() {
+  setup() {
+    const space = 'TimelineSpace/Modals/MuteConfirm'
+    const store = useStore()
+
+    const notify = ref<boolean>(true)
+
+    const muteConfirmModal = computed({
+      get: () => store.state.TimelineSpace.Modals.MuteConfirm.modalOpen,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
+    })
+
+    const closeModal = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
+    }
+    const submit = async () => {
+      closeModal()
+      await store.dispatch(`${space}/${ACTION_TYPES.SUBMIT}`, notify.value)
+    }
+
     return {
-      notify: true
-    }
-  },
-  computed: {
-    ...mapState('TimelineSpace/Modals/MuteConfirm', {
-      account: state => state.account
-    }),
-    muteConfirmModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.MuteConfirm.modalOpen
-      },
-      set(value) {
-        this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/changeModal', value)
-      }
-    }
-  },
-  methods: {
-    closeModal() {
-      this.muteConfirmModal = false
-    },
-    async submit() {
-      this.closeModal()
-      await this.$store.dispatch('TimelineSpace/Modals/MuteConfirm/submit', this.notify)
+      notify,
+      muteConfirmModal,
+      closeModal,
+      submit
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/Modals/MuteConfirm.ts b/src/renderer/store/TimelineSpace/Modals/MuteConfirm.ts
index 80dc91dc..8963eac1 100644
--- a/src/renderer/store/TimelineSpace/Modals/MuteConfirm.ts
+++ b/src/renderer/store/TimelineSpace/Modals/MuteConfirm.ts
@@ -26,14 +26,20 @@ const mutations: MutationTree<MuteConfirmState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  CHANGE_ACCOUNT: 'changeAccount',
+  SUBMIT: 'submit'
+}
+
 const actions: ActionTree<MuteConfirmState, RootState> = {
-  changeModal: ({ commit }, value: boolean) => {
+  [ACTION_TYPES.CHANGE_MODAL]: ({ commit }, value: boolean) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, value)
   },
-  changeAccount: ({ commit }, account: Entity.Account) => {
+  [ACTION_TYPES.CHANGE_ACCOUNT]: ({ commit }, account: Entity.Account) => {
     commit(MUTATION_TYPES.CHANGE_ACCOUNT, account)
   },
-  submit: async ({ state, rootState, dispatch }, notify: boolean) => {
+  [ACTION_TYPES.SUBMIT]: async ({ state, rootState, dispatch }, notify: boolean) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,

From 4b2ffd687d1e6a0f0d538a4333519402930098a4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 28 Apr 2022 23:25:21 +0900
Subject: [PATCH 06/11] Rewrite Modals/AddListMember with composition API

---
 .../components/TimelineSpace/Modals.vue       |  8 +-
 .../TimelineSpace/Modals/AddListMember.vue    | 84 +++++++++++--------
 .../TimelineSpace/Contents/Lists/Edit.ts      |  9 +-
 .../TimelineSpace/Modals/AddListMember.ts     | 12 ++-
 4 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index dfd6ad26..d447f121 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -4,8 +4,8 @@
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
     <list-membership></list-membership>
-    <add-list-member></add-list-member>
-    <mute-confirm></mute-confirm>
+    <add-list-member v-if="addListMemberModal"></add-list-member>
+    <mute-confirm v-if="muteConfirmModal"></mute-confirm>
     <shortcut></shortcut>
     <report v-if="reportModal"></report>
   </div>
@@ -37,7 +37,9 @@ export default {
   computed: {
     ...mapState({
       jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
-      reportModal: state => state.TimelineSpace.Modals.Report.modalOpen
+      reportModal: state => state.TimelineSpace.Modals.Report.modalOpen,
+      muteConfirmModal: state => state.TimelineSpace.Modals.MuteConfirm.modalOpen,
+      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen
     })
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index abcd81e0..1e7e7c73 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -33,58 +33,68 @@
   </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { Entity } from 'megalodon'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember'
+import { ACTION_TYPES as LIST_ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
 
-export default {
+export default defineComponent({
   name: 'add-list-member',
-  data() {
-    return {
-      name: ''
-    }
-  },
-  computed: {
-    ...mapState({
-      loadingBackground: state => state.App.theme.wrapper_mask_color,
-      accounts: state => state.TimelineSpace.Modals.AddListMember.accounts,
-      listId: state => state.TimelineSpace.Modals.AddListMember.targetListId
-    }),
-    addListMemberModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.AddListMember.modalOpen
-      },
-      set(value) {
-        this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', value)
-      }
-    }
-  },
-  methods: {
-    username(account) {
+  setup() {
+    const space = 'TimelineSpace/Modals/AddListMember'
+    const store = useStore()
+    const i18n = useI18next()
+
+    const name = ref<string>('')
+
+    const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
+    const accounts = computed(() => store.state.TimelineSpace.Modals.AddListMember.accounts)
+    const listId = computed(() => store.state.TimelineSpace.Modals.AddListMember.targetListId)
+    const addListMemberModal = computed({
+      get: () => store.state.TimelineSpace.Modals.AddListMember.modalOpen,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
+    })
+
+    const username = (account: Entity.Account): string => {
       if (account.display_name !== '') {
         return account.display_name
       } else {
         return account.username
       }
-    },
-    search() {
-      this.$store.dispatch('TimelineSpace/Modals/AddListMember/search', this.name)
-    },
-    add(user) {
-      this.$store
-        .dispatch('TimelineSpace/Modals/AddListMember/add', user)
+    }
+    const search = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.SEARCH}`, name.value)
+    }
+    const add = (account: Entity.Account) => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.ADD}`, account)
         .then(() => {
-          this.addListMemberModal = false
-          this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.listId)
+          store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
+          store.dispatch(`TimelineSpace/Contents/Lists/Edit/${LIST_ACTION_TYPES.FETCH_MEMBERS}`, listId.value)
         })
         .catch(() => {
-          this.$message({
-            message: this.$t('message.add_user_error'),
+          ElMessage({
+            message: i18n.t('message.add_user_error'),
             type: 'error'
           })
         })
     }
+
+    return {
+      name,
+      loadingBackground,
+      accounts,
+      addListMemberModal,
+      username,
+      search,
+      add
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts b/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
index d688765e..3e8a21ec 100644
--- a/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
@@ -21,8 +21,13 @@ const mutations: MutationTree<EditState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  FETCH_MEMBERS: 'fetchMembers',
+  REMOVE_ACCOUNT: 'removeAccount'
+}
+
 const actions: ActionTree<EditState, RootState> = {
-  fetchMembers: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
+  [ACTION_TYPES.FETCH_MEMBERS]: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -33,7 +38,7 @@ const actions: ActionTree<EditState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_MEMBERS, res.data)
     return res.data
   },
-  removeAccount: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
+  [ACTION_TYPES.REMOVE_ACCOUNT]: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
diff --git a/src/renderer/store/TimelineSpace/Modals/AddListMember.ts b/src/renderer/store/TimelineSpace/Modals/AddListMember.ts
index 0cbe4ceb..61bf7a3a 100644
--- a/src/renderer/store/TimelineSpace/Modals/AddListMember.ts
+++ b/src/renderer/store/TimelineSpace/Modals/AddListMember.ts
@@ -32,11 +32,17 @@ const mutations: MutationTree<AddListMemberState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  SEARCH: 'search',
+  ADD: 'add'
+}
+
 const actions: ActionTree<AddListMemberState, RootState> = {
-  changeModal: ({ commit }, value: boolean) => {
+  [ACTION_TYPES.CHANGE_MODAL]: ({ commit }, value: boolean) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, value)
   },
-  search: async ({ commit, rootState }, name: string): Promise<Array<Entity.Account>> => {
+  [ACTION_TYPES.SEARCH]: async ({ commit, rootState }, name: string): Promise<Array<Entity.Account>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -47,7 +53,7 @@ const actions: ActionTree<AddListMemberState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_ACCOUNTS, res.data)
     return res.data
   },
-  add: async ({ state, rootState }, account: Entity.Account): Promise<{}> => {
+  [ACTION_TYPES.ADD]: async ({ state, rootState }, account: Entity.Account): Promise<{}> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,

From dad6dd3336983bda88df2a0277f61a57cd18d53a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Thu, 28 Apr 2022 23:47:36 +0900
Subject: [PATCH 07/11] Rewrite Modals/ListMembership with composition API

---
 .../components/TimelineSpace/Modals.vue       |  5 +-
 .../TimelineSpace/Modals/ListMembership.vue   | 97 +++++++++----------
 .../TimelineSpace/Modals/ListMembership.ts    | 18 +++-
 3 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index d447f121..ada1af78 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -3,7 +3,7 @@
     <new-toot></new-toot>
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
-    <list-membership></list-membership>
+    <list-membership v-if="listMembershipModal"></list-membership>
     <add-list-member v-if="addListMemberModal"></add-list-member>
     <mute-confirm v-if="muteConfirmModal"></mute-confirm>
     <shortcut></shortcut>
@@ -39,7 +39,8 @@ export default {
       jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
       reportModal: state => state.TimelineSpace.Modals.Report.modalOpen,
       muteConfirmModal: state => state.TimelineSpace.Modals.MuteConfirm.modalOpen,
-      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen
+      addListMemberModal: state => state.TimelineSpace.Modals.AddListMember.modalOpen,
+      listMembershipModal: state => state.TimelineSpace.Modals.ListMembership.modalOpen
     })
   }
 }
diff --git a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
index 3dc9b246..d947fe69 100644
--- a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
+  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" custom-class="list-membership-modal">
     <el-checkbox-group v-model="belongToLists" v-loading="loading">
       <table class="lists">
         <tbody>
@@ -14,71 +14,66 @@
   </el-dialog>
 </template>
 
-<script>
-import { mapState } from 'vuex'
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18next } from 'vue3-i18next'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ListMembership'
 
-export default {
+export default defineComponent({
   name: 'list-membership',
-  data() {
-    return {
-      loading: false
-    }
-  },
-  computed: {
-    ...mapState({
-      account: state => state.TimelineSpace.Modals.ListMembership.account,
-      lists: state => state.TimelineSpace.Modals.ListMembership.lists
-    }),
-    listMembershipModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.modalOpen
-      },
-      set(value) {
-        this.$store.dispatch('TimelineSpace/Modals/ListMembership/changeModal', value)
-      }
-    },
-    belongToLists: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id)
-      },
-      set(value) {
-        this.loading = true
-        return this.$store
-          .dispatch('TimelineSpace/Modals/ListMembership/changeBelongToLists', value)
+  setup() {
+    const space = 'TimelineSpace/Modals/ListMembership'
+    const loading = ref<boolean>(false)
+    const store = useStore()
+    const i18n = useI18next()
+
+    const account = computed(() => store.state.TimelineSpace.Modals.ListMembership.account)
+    const lists = computed(() => store.state.TimelineSpace.Modals.ListMembership.lists)
+    const listMembershipModal = computed({
+      get: () => store.state.TimelineSpace.Modals.ListMembership.modalOpen,
+      set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
+    })
+    const belongToLists = computed({
+      get: () => store.state.TimelineSpace.Modals.ListMembership.belongToLists.map(l => l.id),
+      set: (value: Array<string>) => {
+        loading.value = true
+        store
+          .dispatch(`${space}/${ACTION_TYPES.CHANGE_BELONG_TO_LISTS}`, value)
           .catch(() => {
-            this.$message({
-              message: this.$t('message.update_list_memberships_error'),
+            ElMessage({
+              message: i18n.t('message.update_list_memberships_error'),
               type: 'error'
             })
           })
-          .finally(() => (this.loading = false))
+          .finally(() => (loading.value = false))
       }
-    }
-  },
-  watch: {
-    listMembershipModal: function (newState, oldState) {
-      if (!oldState && newState) {
-        this.init()
-      }
-    }
-  },
-  methods: {
-    async init() {
-      this.loading = true
+    })
+
+    onMounted(async () => {
+      loading.value = true
       try {
-        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchListMembership', this.account)
-        await this.$store.dispatch('TimelineSpace/Modals/ListMembership/fetchLists')
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST_MEMBERSHIP}`, account.value)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
       } catch (err) {
-        this.$message({
-          message: this.$t('message.lists_fetch_error'),
+        ElMessage({
+          message: i18n.t('message.lists_fetch_error'),
           type: 'error'
         })
       } finally {
-        this.loading = false
+        loading.value = false
       }
+    })
+
+    return {
+      loading,
+      lists,
+      listMembershipModal,
+      belongToLists
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/TimelineSpace/Modals/ListMembership.ts b/src/renderer/store/TimelineSpace/Modals/ListMembership.ts
index 5a58b586..d3a215e3 100644
--- a/src/renderer/store/TimelineSpace/Modals/ListMembership.ts
+++ b/src/renderer/store/TimelineSpace/Modals/ListMembership.ts
@@ -38,14 +38,22 @@ const mutations: MutationTree<ListMembershipState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  CHANGE_MODAL: 'changeModal',
+  SET_ACCOUNT: 'setAccount',
+  FETCH_LIST_MEMBERSHIP: 'fetchListMembership',
+  FETCH_LISTS: 'fetchLists',
+  CHANGE_BELONG_TO_LISTS: 'changeBelongToLists'
+}
+
 const actions: ActionTree<ListMembershipState, RootState> = {
-  changeModal: ({ commit }, value: boolean) => {
+  [ACTION_TYPES.CHANGE_MODAL]: ({ commit }, value: boolean) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, value)
   },
-  setAccount: ({ commit }, account: Entity.Account) => {
+  [ACTION_TYPES.SET_ACCOUNT]: ({ commit }, account: Entity.Account) => {
     commit(MUTATION_TYPES.CHANGE_ACCOUNT, account)
   },
-  fetchListMembership: async ({ commit, rootState }, account: Entity.Account) => {
+  [ACTION_TYPES.FETCH_LIST_MEMBERSHIP]: async ({ commit, rootState }, account: Entity.Account) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -56,7 +64,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_BELONG_TO_LISTS, res.data)
     return res.data
   },
-  fetchLists: async ({ commit, rootState }) => {
+  [ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -67,7 +75,7 @@ const actions: ActionTree<ListMembershipState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
     return res.data
   },
-  changeBelongToLists: async ({ rootState, dispatch, state }, belongToLists: Array<string>) => {
+  [ACTION_TYPES.CHANGE_BELONG_TO_LISTS]: async ({ rootState, dispatch, state }, belongToLists: Array<string>) => {
     // Calcurate diff
     const removedLists = state.belongToLists.map(l => l.id).filter(i => belongToLists.indexOf(i) === -1)
     const addedLists = belongToLists.filter(i => state.belongToLists.map(l => l.id).indexOf(i) === -1)

From 71a8e4c488bde728a67b9e407f00f6de2de98a0a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 29 Apr 2022 17:20:58 +0900
Subject: [PATCH 08/11] Rewrite Modals/NewToot/Poll with composition API

---
 .../components/TimelineSpace/Modals.vue       |   3 +-
 .../TimelineSpace/Modals/NewToot.vue          |  13 +-
 .../TimelineSpace/Modals/NewToot/Poll.vue     | 144 +++++++++++-------
 3 files changed, 89 insertions(+), 71 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Modals.vue b/src/renderer/components/TimelineSpace/Modals.vue
index ada1af78..7f7491a1 100644
--- a/src/renderer/components/TimelineSpace/Modals.vue
+++ b/src/renderer/components/TimelineSpace/Modals.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <new-toot></new-toot>
+    <new-toot v-if="newTootModal"></new-toot>
     <jump v-if="jumpModal"></jump>
     <image-viewer></image-viewer>
     <list-membership v-if="listMembershipModal"></list-membership>
@@ -36,6 +36,7 @@ export default {
   },
   computed: {
     ...mapState({
+      newTootModal: state => state.TimelineSpace.Modals.NewToot.modalOpen,
       jumpModal: state => state.TimelineSpace.Modals.Jump.modalOpen,
       reportModal: state => state.TimelineSpace.Modals.Report.modalOpen,
       muteConfirmModal: state => state.TimelineSpace.Modals.MuteConfirm.modalOpen,
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index f61d1f60..6e108c02 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -27,15 +27,7 @@
           @suggestOpened="innerElementOpened"
         />
       </el-form>
-      <Poll
-        v-if="openPoll"
-        v-model="polls"
-        @addPoll="addPoll"
-        @removePoll="removePoll"
-        :defaultExpire="pollExpire"
-        @changeExpire="changeExpire"
-        ref="poll"
-      ></Poll>
+      <Poll v-if="openPoll" v-model:polls="polls" v-model:expire="pollExpire" @addPoll="addPoll" @removePoll="removePoll" ref="poll"></Poll>
       <div class="preview" ref="preview">
         <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
           <img :src="media.preview_url" class="preview-image" />
@@ -432,9 +424,6 @@ export default {
       const diff = previousPollHeight - this.$refs.poll.$el.offsetHeight
       this.statusHeight = this.statusHeight + diff
     },
-    changeExpire(obj) {
-      this.pollExpire = obj
-    },
     async toggleContentWarning() {
       const previousHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
       await (this.showContentWarning = !this.showContentWarning)
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
index 356a0e75..1d515664 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Poll.vue
@@ -1,78 +1,102 @@
 <template>
   <div class="poll">
     <ul class="poll-list">
-      <li class="poll-option" v-for="(option, id) in value" v-bind:key="id">
+      <li class="poll-option" v-for="(option, id) in polls" v-bind:key="id">
         <el-radio :disabled="true" :label="id">
-          <el-input :placeholder="`choice ${id}`" v-model="value[id]" @input="value => updateOption(value, id)" size="small"></el-input>
+          <el-input :placeholder="`choice ${id}`" :modelValue="option" @input="polls[id] = $event" size="small"></el-input>
           <el-button class="remove-poll" type="text" @click="removePoll(id)" size="small"><font-awesome-icon icon="xmark" /></el-button>
         </el-radio>
       </li>
     </ul>
     <el-button class="add-poll" type="info" size="small" @click="addPoll" plain>{{ $t('modals.new_toot.poll.add_choice') }}</el-button>
-    <el-select v-model="expiresIn" size="small" value-key="value" @change="changeExpire">
-      <el-option v-for="exp in expires" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
+    <el-select :modelValue="expire" @change="$emit('update:expire', $event)" size="small" value-key="value">
+      <el-option v-for="exp in expiresList" :key="exp.value" :label="exp.label" :value="exp"> </el-option>
     </el-select>
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, PropType, toRefs, reactive, watch } from 'vue'
+import { useI18next } from 'vue3-i18next'
+
+type Expire = {
+  label: string
+  value: number
+}
+
+export default defineComponent({
   name: 'poll',
-  props: ['value', 'defaultExpire'],
-  data() {
-    return {
-      expires: [
-        {
-          label: this.$t('modals.new_toot.poll.expires.5_minutes'),
-          value: 60 * 5
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.30_minutes'),
-          value: 60 * 30
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.1_hour'),
-          value: 3600
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.6_hours'),
-          value: 3600 * 6
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.1_day'),
-          value: 3600 * 24
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.3_days'),
-          value: 3600 * 24 * 3
-        },
-        {
-          label: this.$t('modals.new_toot.poll.expires.7_days'),
-          value: 3600 * 24 * 7
-        }
-      ],
-      expiresIn: null
+  props: {
+    polls: {
+      type: Array as PropType<Array<String>>,
+      default: []
+    },
+    expire: {
+      type: Object as PropType<Expire>,
+      required: true
     }
   },
-  created() {
-    this.expiresIn = this.defaultExpire
-  },
-  methods: {
-    addPoll() {
-      this.$emit('addPoll')
-    },
-    removePoll(id) {
-      this.$emit('removePoll', id)
-    },
-    updateOption(item, index) {
-      const newValue = [...this.value.slice(0, index), item, ...this.value.slice(index + 1)]
-      this.$emit('input', newValue)
-    },
-    changeExpire(exp) {
-      this.$emit('changeExpire', exp)
+  setup(props, ctx) {
+    const i18n = useI18next()
+    const { expire, polls } = toRefs(props)
+    const expiresList = reactive<Array<Expire>>([
+      {
+        label: i18n.t('modals.new_toot.poll.expires.5_minutes'),
+        value: 60 * 5
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.30_minutes'),
+        value: 60 * 30
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.1_hour'),
+        value: 3600
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.6_hours'),
+        value: 3600 * 6
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.1_day'),
+        value: 3600 * 24
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.3_days'),
+        value: 3600 * 24 * 3
+      },
+      {
+        label: i18n.t('modals.new_toot.poll.expires.7_days'),
+        value: 3600 * 24 * 7
+      }
+    ])
+
+    const addPoll = () => {
+      ctx.emit('addPoll')
+    }
+    const removePoll = (id: number) => {
+      ctx.emit('removePoll', id)
+    }
+
+    watch(expire, (newExpire, _old) => {
+      ctx.emit('update:expire', newExpire)
+    })
+    watch(
+      polls,
+      (newPolls, _old) => {
+        ctx.emit('update:polls', newPolls)
+      },
+      { deep: true }
+    )
+
+    return {
+      polls,
+      expire,
+      expiresList,
+      addPoll,
+      removePoll
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -93,7 +117,11 @@ export default {
   }
 
   .add-poll {
-    margin: 0 0 8px 40px;
+    margin: 0 4px 0 40px;
   }
 }
+
+.poll :deep(.el-input__inner) {
+  box-shadow: none;
+}
 </style>

From 29f3776c08528576d55409e3bb0e85b0b2812e6e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 29 Apr 2022 23:47:49 +0900
Subject: [PATCH 09/11] Rewrite Modals/NewToot/Status with composition API

---
 .../TimelineSpace/Modals/NewToot.vue          |   5 +-
 .../TimelineSpace/Modals/NewToot/Status.vue   | 288 ++++++++----------
 .../TimelineSpace/Modals/NewToot/Status.ts    |  74 +++--
 .../utils/{suggestText.js => suggestText.ts}  |   8 +-
 4 files changed, 183 insertions(+), 192 deletions(-)
 rename src/renderer/utils/{suggestText.js => suggestText.ts} (77%)

diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 6e108c02..894cb931 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -17,14 +17,13 @@
           </div>
         </div>
         <Status
-          v-model="status"
+          :modelValue="status"
+          @update:modelValue="status = $event"
           :opened="newTootModal"
           :fixCursorPos="hashtagInserting"
           :height="statusHeight"
           @paste="onPaste"
           @toot="toot"
-          @pickerOpened="innerElementOpened"
-          @suggestOpened="innerElementOpened"
         />
       </el-form>
       <Poll v-if="openPoll" v-model:polls="polls" v-model:expire="pollExpire" @addPoll="addPoll" @removePoll="removePoll" ref="poll"></Poll>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
index baf422ac..9715174b 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="status">
     <textarea
-      v-model="status"
-      ref="status"
-      @paste="onPaste"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+      ref="statusRef"
+      @paste="$emit('paste', $event)"
       v-on:input="startSuggest"
       :placeholder="$t('modals.new_toot.status')"
       role="textbox"
       contenteditable="true"
       aria-multiline="true"
       :style="`height: ${height}px`"
+      v-focus
       autofocus
     >
     </textarea>
@@ -19,7 +21,7 @@
           v-for="(item, index) in filteredSuggestion"
           :key="index"
           @click="insertItem(item)"
-          @mouseover="highlightedIndex = index"
+          @mouseover="suggestHighlight(index)"
           :class="{ highlighted: highlightedIndex === index }"
         >
           <span v-if="item.image">
@@ -59,23 +61,24 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import data from 'emoji-mart-vue-fast/data/all.json'
-import { mapState, mapGetters } from 'vuex'
+import { defineComponent, computed, toRefs, ref } from 'vue'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
 import suggestText from '@/utils/suggestText'
+import { useStore } from '@/store'
+import { MUTATION_TYPES, ACTION_TYPES } from '@/store/TimelineSpace/Modals/NewToot/Status'
 
-const emojiIndex = new EmojiIndex(data)
-
-export default {
+export default defineComponent({
   name: 'status',
   components: {
     Picker
   },
   props: {
-    value: {
-      type: String
+    modelValue: {
+      type: String,
+      default: ''
     },
     opened: {
       type: Boolean,
@@ -90,194 +93,145 @@ export default {
       default: 120
     }
   },
-  data() {
-    return {
-      highlightedIndex: 0,
-      openEmojiPicker: false,
-      emojiIndex: emojiIndex
+  setup(props, ctx) {
+    const space = 'TimelineSpace/Modals/NewToot/Status'
+    const store = useStore()
+    const emojiIndex = new EmojiIndex(data)
+    const { modelValue } = toRefs(props)
+    const highlightedIndex = ref(0)
+    const statusRef = ref<HTMLTextAreaElement>()
+
+    const filteredAccounts = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.filteredAccounts)
+    const filteredHashtags = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.filteredHashtags)
+    const filteredSuggestion = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.filteredSuggestion)
+    const openSuggest = computed({
+      get: () => store.state.TimelineSpace.Modals.NewToot.Status.openSuggest,
+      set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_OPEN_SUGGEST}`, value)
+    })
+    const startIndex = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.startIndex)
+    const matchWord = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.matchWord)
+    const pickerEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
+
+    const closeSuggest = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.CLOSE_SUGGEST}`)
+      if (openSuggest.value) {
+        highlightedIndex.value = 0
+      }
+      ctx.emit('suggestOpened', false)
     }
-  },
-  computed: {
-    ...mapState('TimelineSpace/Modals/NewToot/Status', {
-      filteredAccounts: state => state.filteredAccounts,
-      filteredHashtags: state => state.filteredHashtags,
-      openSuggest: state => state.openSuggest,
-      startIndex: state => state.startIndex,
-      matchWord: state => state.matchWord,
-      filteredSuggestion: state => state.filteredSuggestion
-    }),
-    ...mapGetters('TimelineSpace/Modals/NewToot/Status', ['pickerEmojis']),
-    status: {
-      get: function () {
-        return this.value
-      },
-      set: function (value) {
-        this.$emit('input', value)
+    const suggestAccount = async (start: number, word: string) => {
+      try {
+        await store.dispatch(`${space}/${ACTION_TYPES.SUGGEST_ACCOUNT}`, { word: word, start: start })
+        ctx.emit('suggestOpened', true)
+        return true
+      } catch (err) {
+        console.log(err)
+        return false
       }
     }
-  },
-  mounted() {
-    // When change account, the new toot modal is recreated.
-    // So can not catch open event in watch.
-    this.$refs.status.focus()
-    if (this.fixCursorPos) {
-      this.$refs.status.setSelectionRange(0, 0)
-    }
-  },
-  watch: {
-    opened: function (newState, oldState) {
-      if (!oldState && newState) {
-        this.$nextTick(function () {
-          this.$refs.status.focus()
-          if (this.fixCursorPos) {
-            this.$refs.status.setSelectionRange(0, 0)
-          }
-        })
-      } else if (oldState && !newState) {
-        this.closeSuggest()
+    const suggestHashtag = async (start: number, word: string) => {
+      try {
+        await store.dispatch(`${space}/${ACTION_TYPES.SUGGEST_HASHTAG}`, { word: word, start: start })
+        ctx.emit('suggestOpened', true)
+        return true
+      } catch (err) {
+        console.log(err)
+        return false
       }
     }
-  },
-  methods: {
-    async startSuggest(e) {
-      const currentValue = e.target.value
-      // Start suggest after user stop writing
-      setTimeout(async () => {
-        if (currentValue === this.status) {
-          await this.suggest(e)
-        }
-      }, 700)
-    },
-    async suggest(e) {
+    const suggestEmoji = async (start: number, word: string) => {
+      try {
+        store.dispatch(`${space}/${ACTION_TYPES.SUGGEST_EMOJI}`, { word: word, start: start })
+        ctx.emit('suggestOpened', true)
+        return true
+      } catch (err) {
+        console.log(err)
+        return false
+      }
+    }
+    const suggest = async (e: Event) => {
+      const target = e.target as HTMLInputElement
       // e.target.sectionStart: Cursor position
       // e.target.value: current value of the textarea
-      const [start, word] = suggestText(e.target.value, e.target.selectionStart)
+      const [start, word] = suggestText(target.value, target.selectionStart!)
       if (!start || !word) {
-        this.closeSuggest()
+        closeSuggest()
         return false
       }
       switch (word.charAt(0)) {
         case ':':
-          await this.suggestEmoji(start, word)
+          await suggestEmoji(start, word)
           return true
         case '@':
-          await this.suggestAccount(start, word)
+          await suggestAccount(start, word)
           return true
         case '#':
-          await this.suggestHashtag(start, word)
+          await suggestHashtag(start, word)
           return true
         default:
           return false
       }
-    },
-    async suggestAccount(start, word) {
-      try {
-        await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestAccount', { word: word, start: start })
-        this.$emit('suggestOpened', true)
-        return true
-      } catch (err) {
-        console.log(err)
-        return false
-      }
-    },
-    async suggestHashtag(start, word) {
-      try {
-        await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestHashtag', { word: word, start: start })
-        this.$emit('suggestOpened', true)
-        return true
-      } catch (err) {
-        console.log(err)
-        return false
-      }
-    },
-    suggestEmoji(start, word) {
-      try {
-        this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/suggestEmoji', { word: word, start: start })
-        this.$emit('suggestOpened', true)
-        return true
-      } catch (err) {
-        this.closeSuggest()
-        return false
-      }
-    },
-    closeSuggest() {
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/closeSuggest')
-      if (this.openSuggest) {
-        this.highlightedIndex = 0
-      }
-      this.$emit('suggestOpened', false)
-    },
-    suggestHighlight(index) {
+    }
+    const startSuggest = (e: Event) => {
+      const currentValue = (e.target as HTMLInputElement).value
+      // Start suggest after user stop writing
+      setTimeout(async () => {
+        if (currentValue === modelValue.value) {
+          await suggest(e)
+        }
+      }, 700)
+    }
+
+    const suggestHighlight = (index: number) => {
       if (index < 0) {
-        this.highlightedIndex = 0
-      } else if (index >= this.filteredSuggestion.length) {
-        this.highlightedIndex = this.filteredSuggestion.length - 1
+        highlightedIndex.value = 0
+      } else if (index >= filteredSuggestion.value.length) {
+        highlightedIndex.value = filteredSuggestion.value.length - 1
       } else {
-        this.highlightedIndex = index
+        highlightedIndex.value = index
       }
-    },
-    insertItem(item) {
+    }
+    const insertItem = item => {
+      console.log('inserted', item.name)
       if (item.code) {
-        const str = `${this.status.slice(0, this.startIndex - 1)}${item.code} ${this.status.slice(this.startIndex + this.matchWord.length)}`
-        this.status = str
+        const str = `${modelValue.value.slice(0, startIndex.value - 1)}${item.code} ${modelValue.value.slice(
+          startIndex.value + matchWord.value.length
+        )}`
+        ctx.emit('update:modelValue', str)
       } else {
-        const str = `${this.status.slice(0, this.startIndex - 1)}${item.name} ${this.status.slice(this.startIndex + this.matchWord.length)}`
-        this.status = str
+        const str = `${modelValue.value.slice(0, startIndex.value - 1)}${item.name} ${modelValue.value.slice(
+          startIndex.value + matchWord.value.length
+        )}`
+        console.log(str)
+        ctx.emit('update:modelValue', str)
       }
-      this.closeSuggest()
-    },
-    selectCurrentItem() {
-      const item = this.filteredSuggestion[this.highlightedIndex]
-      this.insertItem(item)
-    },
-    onPaste(e) {
-      this.$emit('paste', e)
-    },
-    handleKey(event) {
-      const current = event.target.selectionStart
-      switch (event.srcKey) {
-        case 'up':
-          this.suggestHighlight(this.highlightedIndex - 1)
-          break
-        case 'down':
-          this.suggestHighlight(this.highlightedIndex + 1)
-          break
-        case 'enter':
-          this.selectCurrentItem()
-          break
-        case 'esc':
-          this.closeSuggest()
-          break
-        case 'left':
-          event.target.setSelectionRange(current - 1, current - 1)
-          break
-        case 'right':
-          event.target.setSelectionRange(current + 1, current + 1)
-          break
-        case 'linux':
-        case 'mac':
-          this.$emit('toot')
-          break
-        default:
-          return true
-      }
-    },
-    toggleEmojiPicker() {
-      this.openEmojiPicker = !this.openEmojiPicker
-      this.$emit('pickerOpened', this.openEmojiPicker)
-    },
-    selectEmoji(emoji) {
-      const current = this.$refs.status.selectionStart
+      closeSuggest()
+    }
+    const selectEmoji = emoji => {
+      const current = statusRef.value?.selectionStart
       if (emoji.native) {
-        this.status = `${this.status.slice(0, current)}${emoji.native} ${this.status.slice(current)}`
+        ctx.emit('update:modelValue', `${modelValue.value.slice(0, current)}${emoji.native} ${modelValue.value.slice(current)}`)
       } else {
         // Custom emoji don't have natvie code
-        this.status = `${this.status.slice(0, current)}${emoji.name} ${this.status.slice(current)}`
+        ctx.emit('update:modelValue', `${modelValue.value.slice(0, current)}${emoji.name} ${modelValue.value.slice(current)}`)
       }
-      this.hideEmojiPicker()
+    }
+
+    return {
+      emojiIndex,
+      highlightedIndex,
+      filteredAccounts,
+      filteredHashtags,
+      filteredSuggestion,
+      pickerEmojis,
+      openSuggest,
+      startSuggest,
+      suggestHighlight,
+      insertItem,
+      selectEmoji
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/src/renderer/store/TimelineSpace/Modals/NewToot/Status.ts b/src/renderer/store/TimelineSpace/Modals/NewToot/Status.ts
index d8b0e1a3..55a1bcba 100644
--- a/src/renderer/store/TimelineSpace/Modals/NewToot/Status.ts
+++ b/src/renderer/store/TimelineSpace/Modals/NewToot/Status.ts
@@ -1,4 +1,5 @@
-import emojidata from 'unicode-emoji-json/data-by-emoji.json'
+import { EmojiIndex } from 'emoji-mart-vue-fast'
+import emojidata from 'emoji-mart-vue-fast/data/all.json'
 import generator, { MegalodonInterface } from 'megalodon'
 import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
 import { RootState } from '@/store/index'
@@ -7,7 +8,19 @@ import { InsertAccountCache } from '~/src/types/insertAccountCache'
 import { CachedAccount } from '~/src/types/cachedAccount'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
+
+const emojiIndex = new EmojiIndex(emojidata)
+
+type EmojiMartEmoji = {
+  id: string
+  name: string
+  colons: string
+  text: string
+  emoticons: Array<string>
+  skin: any
+  native: string
+}
 
 type Suggest = {
   name: string
@@ -27,8 +40,8 @@ export type StatusState = {
   filteredHashtags: Array<SuggestHashtag>
   filteredEmojis: Array<SuggestEmoji>
   openSuggest: boolean
-  startIndex: number | null
-  matchWord: string | null
+  startIndex: number
+  matchWord: string
   client: MegalodonInterface | null
 }
 
@@ -38,8 +51,8 @@ const state = (): StatusState => ({
   filteredHashtags: [],
   filteredEmojis: [],
   openSuggest: false,
-  startIndex: null,
-  matchWord: null,
+  startIndex: 0,
+  matchWord: '',
   client: null
 })
 
@@ -113,10 +126,10 @@ const mutations: MutationTree<StatusState> = {
   [MUTATION_TYPES.CHANGE_OPEN_SUGGEST]: (state, value: boolean) => {
     state.openSuggest = value
   },
-  [MUTATION_TYPES.CHANGE_START_INDEX]: (state, index: number | null) => {
+  [MUTATION_TYPES.CHANGE_START_INDEX]: (state, index: number) => {
     state.startIndex = index
   },
-  [MUTATION_TYPES.CHANGE_MATCH_WORD]: (state, word: string | null) => {
+  [MUTATION_TYPES.CHANGE_MATCH_WORD]: (state, word: string) => {
     state.matchWord = word
   },
   [MUTATION_TYPES.FILTERED_SUGGESTION_FROM_HASHTAGS]: state => {
@@ -144,8 +157,16 @@ type WordStart = {
   start: number
 }
 
+export const ACTION_TYPES = {
+  SUGGEST_ACCOUNT: 'suggestAccount',
+  SUGGEST_HASHTAG: 'suggestHashtag',
+  SUGGEST_EMOJI: 'suggestEmoji',
+  CANCEL_REQUEST: 'cancelRequest',
+  CLOSE_SUGGEST: 'closeSuggest'
+}
+
 const actions: ActionTree<StatusState, RootState> = {
-  suggestAccount: async ({ commit, rootState, dispatch }, wordStart: WordStart) => {
+  [ACTION_TYPES.SUGGEST_ACCOUNT]: async ({ commit, rootState, dispatch }, wordStart: WordStart) => {
     dispatch('cancelRequest')
     commit(MUTATION_TYPES.CLEAR_FILTERED_ACCOUNTS)
     commit(MUTATION_TYPES.FILTERED_SUGGESTION_FROM_ACCOUNTS)
@@ -188,7 +209,7 @@ const actions: ActionTree<StatusState, RootState> = {
     }
     await Promise.all([searchCache(), searchAPI()])
   },
-  suggestHashtag: async ({ commit, rootState, dispatch }, wordStart: WordStart) => {
+  [ACTION_TYPES.SUGGEST_HASHTAG]: async ({ commit, rootState, dispatch }, wordStart: WordStart) => {
     dispatch('cancelRequest')
     commit(MUTATION_TYPES.CLEAR_FILTERED_HASHTAGS)
     commit(MUTATION_TYPES.FILTERED_SUGGESTION_FROM_HASHTAGS)
@@ -231,16 +252,29 @@ const actions: ActionTree<StatusState, RootState> = {
     }
     await Promise.all([searchCache(), searchAPI()])
   },
-  suggestEmoji: ({ commit, rootState }, wordStart: WordStart) => {
+  [ACTION_TYPES.SUGGEST_EMOJI]: ({ commit, rootState }, wordStart: WordStart) => {
     const { word, start } = wordStart
     // Find native emojis
-    const filteredEmojiName: Array<string> = Object.keys(emojidata).filter((emoji: string) => `:${emojidata[emoji].name}:`.includes(word))
-    const filteredNativeEmoji: Array<SuggestEmoji> = filteredEmojiName.map((emoji: string) => {
+    const foundEmoji: EmojiMartEmoji = emojiIndex.findEmoji(word)
+    if (foundEmoji) {
       return {
-        name: `:${emojidata[emoji].name}:`,
-        code: emoji
+        name: foundEmoji.colons,
+        code: foundEmoji.native
       }
-    })
+    }
+    let filteredNativeEmoji: Array<SuggestEmoji> = []
+
+    const regexp = word.match(/^:(.+)/)
+    if (regexp && regexp.length > 1) {
+      const emojiName = regexp[1]
+      const filteredEmoji: Array<EmojiMartEmoji> = emojiIndex.search(emojiName)
+      filteredNativeEmoji = filteredEmoji.map((emoji: EmojiMartEmoji) => {
+        return {
+          name: emoji.colons,
+          code: emoji.native
+        }
+      })
+    }
     // Find custom emojis
     const filteredCustomEmoji: Array<Suggest> = rootState.TimelineSpace.emojis
       .map(emoji => {
@@ -264,16 +298,16 @@ const actions: ActionTree<StatusState, RootState> = {
     commit(MUTATION_TYPES.FILTERED_SUGGESTION_FROM_EMOJIS)
     return filtered
   },
-  cancelRequest: ({ state }) => {
+  [ACTION_TYPES.CANCEL_REQUEST]: ({ state }) => {
     if (state.client) {
       state.client.cancel()
     }
   },
-  closeSuggest: ({ commit, dispatch }) => {
+  [ACTION_TYPES.CLOSE_SUGGEST]: ({ commit, dispatch }) => {
     dispatch('cancelRequest')
     commit(MUTATION_TYPES.CHANGE_OPEN_SUGGEST, false)
-    commit(MUTATION_TYPES.CHANGE_START_INDEX, null)
-    commit(MUTATION_TYPES.CHANGE_MATCH_WORD, null)
+    commit(MUTATION_TYPES.CHANGE_START_INDEX, 0)
+    commit(MUTATION_TYPES.CHANGE_MATCH_WORD, '')
     commit(MUTATION_TYPES.CLEAR_FILTERED_SUGGESTION)
     commit(MUTATION_TYPES.CLEAR_FILTERED_ACCOUNTS)
     commit(MUTATION_TYPES.CLEAR_FILTERED_HASHTAGS)
diff --git a/src/renderer/utils/suggestText.js b/src/renderer/utils/suggestText.ts
similarity index 77%
rename from src/renderer/utils/suggestText.js
rename to src/renderer/utils/suggestText.ts
index d5a81b4d..1ba2dd99 100644
--- a/src/renderer/utils/suggestText.js
+++ b/src/renderer/utils/suggestText.ts
@@ -1,6 +1,10 @@
 // https://github.com/tootsuite/mastodon/blob/master/app/javascript/mastodon/components/autosuggest_textarea.js
-const textAtCursorMatch = (str, cursorPosition, separators = ['@', '#', ':']) => {
-  let word
+const textAtCursorMatch = (
+  str: string,
+  cursorPosition: number,
+  separators: Array<string> = ['@', '#', ':']
+): [number | null, string | null] => {
+  let word: string
 
   const left = str.slice(0, cursorPosition).search(/\S+$/)
   const right = str.slice(cursorPosition).search(/\s/)

From ebc09cdf556bec74a85cc8ba47ce4d099296ff64 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 30 Apr 2022 01:50:09 +0900
Subject: [PATCH 10/11] Rewrite Modals/NewToot/Quote with composition API

---
 spec/renderer/unit/utils/emojify.spec.ts      | 12 ++-
 .../TimelineSpace/Modals/NewToot/Quote.vue    | 37 +++++----
 .../TimelineSpace/Modals/NewToot/Status.vue   |  9 ++-
 src/renderer/components/atoms/FailoverImg.vue | 77 ++++++++++---------
 .../{exifImageUrl.js => exifImageUrl.ts}      | 15 ++--
 src/renderer/utils/{emojify.js => emojify.ts} |  6 +-
 6 files changed, 86 insertions(+), 70 deletions(-)
 rename src/renderer/components/utils/{exifImageUrl.js => exifImageUrl.ts} (79%)
 rename src/renderer/utils/{emojify.js => emojify.ts} (72%)

diff --git a/spec/renderer/unit/utils/emojify.spec.ts b/spec/renderer/unit/utils/emojify.spec.ts
index 0ef34e16..6ec25210 100644
--- a/spec/renderer/unit/utils/emojify.spec.ts
+++ b/spec/renderer/unit/utils/emojify.spec.ts
@@ -4,15 +4,21 @@ describe('emojify', () => {
   const emoji = [
     {
       shortcode: 'python',
-      url: 'https://example.com/python'
+      static_url: 'https://example.com/python',
+      url: 'https://example.com/python',
+      visible_in_picker: true
     },
     {
       shortcode: 'nodejs',
-      url: 'https://example.com/nodejs'
+      static_url: 'https://example.com/nodejs',
+      url: 'https://example.com/nodejs',
+      visible_in_picker: true
     },
     {
       shortcode: 'slack',
-      url: 'https://example.com/slack'
+      static_url: 'https://example.com/slack',
+      url: 'https://example.com/slack',
+      visible_in_picker: true
     }
   ]
   describe('Does not contain shortcode', () => {
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
index 3b408632..a3307fe5 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Quote.vue
@@ -20,12 +20,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, toRefs } from 'vue'
 import DisplayStyle from '~/src/constants/displayStyle'
-import FailoverImg from '@/components/atoms/FailoverImg'
+import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import emojify from '@/utils/emojify'
+import { Entity } from 'megalodon'
 
-export default {
+export default defineComponent({
   new: 'quote-target',
   components: {
     FailoverImg
@@ -40,9 +42,10 @@ export default {
       default: 0
     }
   },
-  methods: {
-    username(account) {
-      switch (this.displayNameStyle) {
+  setup(props) {
+    const { displayNameStyle } = toRefs(props)
+    const username = (account: Entity.Account) => {
+      switch (displayNameStyle.value) {
         case DisplayStyle.DisplayNameAndUsername.value:
           if (account.display_name !== '') {
             return emojify(account.display_name, account.emojis)
@@ -55,24 +58,30 @@ export default {
           } else {
             return account.acct
           }
-        case DisplayStyle.Username.value:
+        default:
           return account.acct
       }
-    },
-    accountName(account) {
-      switch (this.displayNameStyle) {
+    }
+    const accountName = (account: Entity.Account) => {
+      switch (displayNameStyle.value) {
         case DisplayStyle.DisplayNameAndUsername.value:
           return `@${account.acct}`
         case DisplayStyle.DisplayName.value:
-        case DisplayStyle.Username.value:
+        default:
           return ''
       }
-    },
-    emojiText(content, emojis) {
+    }
+    const emojiText = (content: string, emojis: Array<Entity.Emoji>) => {
       return emojify(content, emojis)
     }
+
+    return {
+      username,
+      accountName,
+      emojiText
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
index 9715174b..8243e3bb 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -45,7 +45,6 @@
           set="twitter"
           :autoFocus="true"
           @select="selectEmoji"
-          :custom="pickerEmojis"
           :perLine="7"
           :emojiSize="24"
           :showPreview="false"
@@ -96,7 +95,7 @@ export default defineComponent({
   setup(props, ctx) {
     const space = 'TimelineSpace/Modals/NewToot/Status'
     const store = useStore()
-    const emojiIndex = new EmojiIndex(data)
+
     const { modelValue } = toRefs(props)
     const highlightedIndex = ref(0)
     const statusRef = ref<HTMLTextAreaElement>()
@@ -110,7 +109,10 @@ export default defineComponent({
     })
     const startIndex = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.startIndex)
     const matchWord = computed(() => store.state.TimelineSpace.Modals.NewToot.Status.matchWord)
-    const pickerEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
+    const customEmojis = computed(() => store.getters[`${space}/pickerEmojis`])
+    const emojiIndex = new EmojiIndex(data, {
+      custom: customEmojis.value
+    })
 
     const closeSuggest = () => {
       store.dispatch(`${space}/${ACTION_TYPES.CLOSE_SUGGEST}`)
@@ -223,7 +225,6 @@ export default defineComponent({
       filteredAccounts,
       filteredHashtags,
       filteredSuggestion,
-      pickerEmojis,
       openSuggest,
       startSuggest,
       suggestHighlight,
diff --git a/src/renderer/components/atoms/FailoverImg.vue b/src/renderer/components/atoms/FailoverImg.vue
index 39ce5129..418fb911 100644
--- a/src/renderer/components/atoms/FailoverImg.vue
+++ b/src/renderer/components/atoms/FailoverImg.vue
@@ -10,69 +10,72 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, ref, toRefs, onMounted, watch } from 'vue'
 import exifImageUrl from '@/components/utils/exifImageUrl'
 
-export default {
+export default defineComponent({
   name: 'FailoverImg',
   props: {
     src: {
       type: String,
-      default: '',
+      default: ''
     },
     title: {
       type: String,
-      default: '',
+      default: ''
     },
     alt: {
       type: String,
-      default: '',
+      default: ''
     },
     readExif: {
       type: Boolean,
-      default: false,
+      default: false
     },
     failoverSrc: {
       type: String,
       default:
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACvtJREFUeNrs3WtrFEkbgOGsCS4GBEVREBIUAgFBQfD//4EIQgQhoCQkICgGhUDEQGAfLN6i3p6ZPsXp6Z5c14dl3cQ5dPfdVX2Y2X8ODg42gNW5YxGACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEIg21rS425ubm5vb4/qrV5fX19eXlrl3JYIo8D9/f1RvdWLi4ujoyOrHNNRQIQgQmDpx4QVqzoY29nZGdv5IVhNhBcXFyt5e9fX19YxpqOACEGEwIqPCee6f//+06dP45+bm5tx0Hh+fv79+3erBBEOZGdnJwosgwx379798uXLbVsH8ca3t7djT5T+GPujy8tLp5SydAtkLKX0x3T74apO9a1PhA8ePCgLDNHe169fx7nlxUuNXUZ+nY27ib29vXiD8S8/f/789OnTol/7999/nz179ujRo7k/jXlBPNHv3797vODYZF++fJn+/ezsLBbsop/GsxwfH7eP4fXr12ln0fIewPKvXF1dHR4e9pgrpYVZEZtKLN76RfTmzZu8a2sjHvP9+/e3JcLd3d3yjycnJ2OeiJYrMraJ2HDr28i/X7MFPH78OMKu+YVHf/RbMuXDzj5F+V9i+44/ttz3xWvutE2Hhw8f5r8S05yIqv0IVpkrzb6LWD7x+mMvs2gRdX21XX9/widmYgSI9VHu8id0KBjr6fnz5zd8kNia40HarPL4tfjlpb6dmg19dkbQY8pTeeN/pcDK6ljqIlrPkbAsMPz48WNyh3CxbcVcqPc+KE9u0xQopovxaOljVungJ6apOdHYyC7/WNLbiS24zXF4vOXKimtTSCXCuRPLxqOVmMfGK4whNE1AYhGlX8iLKJZn/ulc8QhtdvSrOhpaQYSVCckUj7BjOh0vu986KwOLjSOOrMqtJ/UWW8z+/n6+4S42suXd9xdpRYeN22iPYXB2gEpZNu6/yqOVWM5xXF0u6rSIYs+VF1E8bCyimsPvWMJjPuG3muuEZXgxMkwuwthwe2yU+Ugm/zG2m7n779jmPn/+XI69S11KT548aRy988nJ9vI7LROKo8TGs0p5yI2dVKXAyiLKP5r0x7VXE2EcTJcLfULLK6/1GNB6hFFuynkKumjnHUfLXSdy/ZQXABaN3j1m3XnNxjCb32mUWX8wXL7T+hPmsYiOj49jKX348GHSV7ZWE2GskryHK6dn41ee7u9xhqbc4zTOysqj5WXvqhrPQ/YeBjf+nHv79u1by8Gwsp+qf5b4heiw34Wc2x5hWnyHh4cxJEaQ/aZ2KxF73LxTT2doekfYuOmUk/auJ0VaivleHn8WDezl2ml/AJ8PCOMpYomVO5T6hVbukade19gj3PjficEYEqc1lyjn0ru7u52G8fKXGw9jBjhZVw7si+acOaeLP1rua/JeI+WXrq3nCGsWWt5PrdM9MeONcKLSba43PEPTtbElTUfL+7/mthEF5pzKY9ROc9HZueXUr+z9XVtTfwPpa91i6+l0B9YNnZ6e5k02BpDGe2huMl1MDSzvsDmmIel78dKF+8qsJOeULrW1PEOTGyuvcMaQmI+i42ErN9MteyNpfOUrvGtyaz0KzJvLMB3G2oqNNV9zj21rSdfxou0lHQ2WA3tOvXLhPt1Vn1tt+YDliFoOnmlGmg4IY8XFIWiPPVc5Ms+O6otO5MTraYyw/WRbhPMLLHfbw3QYO854ujRLvOE9NCsXgaUxqnLhPg9o0U/7G5vKk5+VZZIjTK32GAxjmS+6mhIJTXQV3FmbAvNKevHixTCv4eTkpPcZmlGJ6vJMLF+4j5Eqz0XbT9XKW9ViaKqMdeUTjeqUeLyqfKLYSHijAgceD9PNU2ljSmdo/vpp3h73qfQe2NOELV24j1Fl7smVNsPg3LloORimR44lFs/V9U6X2Rljm0U08i9fX32EseNMK6PlXKK+wNxhKmSAiVz+gE9sxPU3wdww+GVHmG+Jjn+JrTaPVJ1OO5XXAOeu0JjW5rzTauq6wCv/5e3btxsTt+II04d68uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg==',
-    },
-  },
-  data() {
-    return {
-      loading: true,
-      originalSrc: this.src,
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACvtJREFUeNrs3WtrFEkbgOGsCS4GBEVREBIUAgFBQfD//4EIQgQhoCQkICgGhUDEQGAfLN6i3p6ZPsXp6Z5c14dl3cQ5dPfdVX2Y2X8ODg42gNW5YxGACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEIg21rS425ubm5vb4/qrV5fX19eXlrl3JYIo8D9/f1RvdWLi4ujoyOrHNNRQIQgQmDpx4QVqzoY29nZGdv5IVhNhBcXFyt5e9fX19YxpqOACEGEwIqPCee6f//+06dP45+bm5tx0Hh+fv79+3erBBEOZGdnJwosgwx379798uXLbVsH8ca3t7djT5T+GPujy8tLp5SydAtkLKX0x3T74apO9a1PhA8ePCgLDNHe169fx7nlxUuNXUZ+nY27ib29vXiD8S8/f/789OnTol/7999/nz179ujRo7k/jXlBPNHv3797vODYZF++fJn+/ezsLBbsop/GsxwfH7eP4fXr12ln0fIewPKvXF1dHR4e9pgrpYVZEZtKLN76RfTmzZu8a2sjHvP9+/e3JcLd3d3yjycnJ2OeiJYrMraJ2HDr28i/X7MFPH78OMKu+YVHf/RbMuXDzj5F+V9i+44/ttz3xWvutE2Hhw8f5r8S05yIqv0IVpkrzb6LWD7x+mMvs2gRdX21XX9/widmYgSI9VHu8id0KBjr6fnz5zd8kNia40HarPL4tfjlpb6dmg19dkbQY8pTeeN/pcDK6ljqIlrPkbAsMPz48WNyh3CxbcVcqPc+KE9u0xQopovxaOljVungJ6apOdHYyC7/WNLbiS24zXF4vOXKimtTSCXCuRPLxqOVmMfGK4whNE1AYhGlX8iLKJZn/ulc8QhtdvSrOhpaQYSVCckUj7BjOh0vu986KwOLjSOOrMqtJ/UWW8z+/n6+4S42suXd9xdpRYeN22iPYXB2gEpZNu6/yqOVWM5xXF0u6rSIYs+VF1E8bCyimsPvWMJjPuG3muuEZXgxMkwuwthwe2yU+Ugm/zG2m7n779jmPn/+XI69S11KT548aRy988nJ9vI7LROKo8TGs0p5yI2dVKXAyiLKP5r0x7VXE2EcTJcLfULLK6/1GNB6hFFuynkKumjnHUfLXSdy/ZQXABaN3j1m3XnNxjCb32mUWX8wXL7T+hPmsYiOj49jKX348GHSV7ZWE2GskryHK6dn41ee7u9xhqbc4zTOysqj5WXvqhrPQ/YeBjf+nHv79u1by8Gwsp+qf5b4heiw34Wc2x5hWnyHh4cxJEaQ/aZ2KxF73LxTT2doekfYuOmUk/auJ0VaivleHn8WDezl2ml/AJ8PCOMpYomVO5T6hVbukade19gj3PjficEYEqc1lyjn0ru7u52G8fKXGw9jBjhZVw7si+acOaeLP1rua/JeI+WXrq3nCGsWWt5PrdM9MeONcKLSba43PEPTtbElTUfL+7/mthEF5pzKY9ROc9HZueXUr+z9XVtTfwPpa91i6+l0B9YNnZ6e5k02BpDGe2huMl1MDSzvsDmmIel78dKF+8qsJOeULrW1PEOTGyuvcMaQmI+i42ErN9MteyNpfOUrvGtyaz0KzJvLMB3G2oqNNV9zj21rSdfxou0lHQ2WA3tOvXLhPt1Vn1tt+YDliFoOnmlGmg4IY8XFIWiPPVc5Ms+O6otO5MTraYyw/WRbhPMLLHfbw3QYO854ujRLvOE9NCsXgaUxqnLhPg9o0U/7G5vKk5+VZZIjTK32GAxjmS+6mhIJTXQV3FmbAvNKevHixTCv4eTkpPcZmlGJ6vJMLF+4j5Eqz0XbT9XKW9ViaKqMdeUTjeqUeLyqfKLYSHijAgceD9PNU2ljSmdo/vpp3h73qfQe2NOELV24j1Fl7smVNsPg3LloORimR44lFs/V9U6X2Rljm0U08i9fX32EseNMK6PlXKK+wNxhKmSAiVz+gE9sxPU3wdww+GVHmG+Jjn+JrTaPVJ1OO5XXAOeu0JjW5rzTauq6wCv/5e3btxsTt+II04d68uyu8TbiNgXmedEw05izs7P8Fjrdad3pzMSyT9ylsyYpjwipvI2p/fBe+djEq1evGofN8qLr7PLptJane13xzkgK3Gjx2bn2BQ58QJVXf0yN6t9CeeDReNpz4Ltqy9jyucT6jwjNrtBOz5g+5rtowtnmtPB6fLPznZEU2NjhOAtMyt15/eflyw268WCm3MIG+JRA5ZbxrsPgxv9fo+/dbTnmNzY28CJaq+no3AJzh2l4mUqBafXHxppGj/r/MWM5ZWr8NG25Tf/69WuYUb180k7fp1R+bKLxCD9f7pu9jzSeMf/HOC6tP8E2/CJakwhrCpzb4cgLzCc2aq4jl1tYvjKeTqguOnsUG2L5/WLDfP9AumCdn7f86EOnYTB2LvUR5q/VmP2Yb/x7vgsi3VizaIiLRyizn+7d3nfGVmBlXjqJAlMnp6enLUebcu4693JZbJfl1c4h76jKO4X0Af8eE8vyXu1Fynlv5ZNNlVlxrP258/byK/C67i9u9UjYssDcYf3x1djEllcOIzXnP9JVmbLD/LHX9AUq5YQ2Rs4hb7OMd/Hu3buuf6v82ESbS03xZvOMIIa72H+Ve5m0iNKqj39Gh2mIjr+1tbV179696LacdMSP6vcXsVLa/H+j4zXUfEfGOkTYqcA8aZnWLu3k5KTxvHz6tXJ4j+1p0Z2NabMY/xcBl3PRljPn2LPkoSyiKitKH5nf29srK1q0d0sfEG98usFuexj1dLScPKyrll8oFNvN4eFh4zmP+LWjo6NJnPQrP8Lb8qaL8tdmT8/ETz9+/Nh4K1n8WiyiqX9b+XAj4XRvrYw1nfajbVZ27ODzd9rXZBYPFVtPuq5Y+SBf/Cjdi9z761hj281PPZtE+dOuN0zm86XlW4sXn/cU7W+hTsd+Naey0q4qLZ9Kpekt1JyzyUeenT6DsqqY/zk4OFjG41Zm4XGYMfDtRen76svD+pHfQJhe5+35OHm/RZT+RxRr9r62rNqRkN+tXUS+3gJECCIcxpAXu8zucEw4x9nZ2fn5+TDnSK+urm7JV1YiwrYGvlR694+NKV8XQYR/WZubhsAxISBCMB39W9K9V6N6q+t3pwUibNjix3yPGJiOAiIEEQIiBBGCCC0CECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBAQIYgQECGIEBAhiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBDG6D8BBgBNIRvwsstoqwAAAABJRU5ErkJggg=='
     }
   },
-  async mounted() {
-    if (this.readExif) {
-      try {
-        const transformed = await exifImageUrl(this.src)
-        this.originalSrc = transformed
-      } catch (err) {
-        console.warn(err)
-      }
-    }
-  },
-  watch: {
-    src: async function (newSrc, _oldSrc) {
-      this.originalSrc = newSrc
-      if (this.readExif) {
+  setup(props) {
+    const { src, readExif, failoverSrc } = toRefs(props)
+    const loading = ref<boolean>(false)
+    const originalSrc = ref<string>(src.value)
+
+    onMounted(async () => {
+      if (readExif.value) {
         try {
-          const transformed = await exifImageUrl(newSrc)
-          this.originalSrc = transformed
+          const transformed = await exifImageUrl(src.value)
+          originalSrc.value = transformed
         } catch (err) {
           console.warn(err)
         }
       }
-    },
-  },
-  methods: {
-    failover() {
-      this.originalSrc = this.failoverSrc
-    },
-  },
-}
+    })
+
+    watch(src, async (newSrc, _oldSrc) => {
+      originalSrc.value = newSrc
+      if (readExif.value) {
+        try {
+          const transformed = await exifImageUrl(newSrc)
+          originalSrc.value = transformed
+        } catch (err) {}
+      }
+    })
+
+    const failover = () => {
+      originalSrc.value = failoverSrc.value
+    }
+
+    return {
+      loading,
+      originalSrc,
+      failover
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/utils/exifImageUrl.js b/src/renderer/components/utils/exifImageUrl.ts
similarity index 79%
rename from src/renderer/components/utils/exifImageUrl.js
rename to src/renderer/components/utils/exifImageUrl.ts
index 6d12b49e..4eb5b383 100644
--- a/src/renderer/components/utils/exifImageUrl.js
+++ b/src/renderer/components/utils/exifImageUrl.ts
@@ -1,15 +1,10 @@
 import loadImage from 'blueimp-load-image'
 
-const parseExtension = (url) => {
+const parseExtension = (url: string) => {
   if (!url) {
     return null
   }
-  if (
-    url.match(/\.jpg$/) ||
-    url.match(/\.jpeg$/) ||
-    url.match(/\.JPG$/) ||
-    url.match(/\.JPEG$/)
-  ) {
+  if (url.match(/\.jpg$/) || url.match(/\.jpeg$/) || url.match(/\.JPG$/) || url.match(/\.JPEG$/)) {
     return 'image/jpeg'
   } else if (url.match(/\.png$/) || url.match(/\.PNG$/)) {
     return 'image/png'
@@ -23,7 +18,7 @@ const parseExtension = (url) => {
   return null
 }
 
-const exifImageUrl = (url) => {
+const exifImageUrl = (url: string): Promise<string> => {
   return new Promise((resolve, reject) => {
     const extension = parseExtension(url)
     if (!extension) {
@@ -31,7 +26,7 @@ const exifImageUrl = (url) => {
     }
     loadImage(
       url,
-      (canvas) => {
+      canvas => {
         if (canvas.type === 'error') {
           return reject(Error(`can not load image: ${url}`))
         }
@@ -41,7 +36,7 @@ const exifImageUrl = (url) => {
       {
         canvas: true,
         meta: true,
-        orientation: true,
+        orientation: true
       }
     )
   })
diff --git a/src/renderer/utils/emojify.js b/src/renderer/utils/emojify.ts
similarity index 72%
rename from src/renderer/utils/emojify.js
rename to src/renderer/utils/emojify.ts
index 478eeace..6e7f4ae0 100644
--- a/src/renderer/utils/emojify.js
+++ b/src/renderer/utils/emojify.ts
@@ -1,6 +1,8 @@
-const emojify = (str, customEmoji = []) => {
+import { Entity } from 'megalodon'
+
+const emojify = (str: string, customEmoji: Array<Entity.Emoji> = []): string => {
   let result = str
-  customEmoji.map((emoji) => {
+  customEmoji.map(emoji => {
     const reg = new RegExp(`:${emoji.shortcode}:`, 'g')
     const match = result.match(reg)
     if (!match) return emoji

From ee9300054c0d3b995fa30ffccc13e58aa3eeba3d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 30 Apr 2022 15:49:24 +0900
Subject: [PATCH 11/11] Rewrite Modals/NewToot with composition API

---
 src/renderer/components/TimelineSpace.vue     |   1 -
 .../TimelineSpace/Modals/NewToot.vue          | 567 ++++++++++--------
 .../components/{event.js => event.ts}         |   0
 .../store/TimelineSpace/Modals/NewToot.ts     |  56 +-
 4 files changed, 342 insertions(+), 282 deletions(-)
 rename src/renderer/components/{event.js => event.ts} (100%)

diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 0e11bce5..6fce6248 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -119,7 +119,6 @@ export default {
         return false
       }
       this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/incrementMediaCount')
       this.$store
         .dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
         .then(() => {
diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
index 894cb931..a76cb0be 100644
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -7,18 +7,18 @@
       :before-close="closeConfirm"
       width="600px"
       custom-class="new-toot-modal"
-      ref="dialog"
+      ref="dialogRef"
     >
       <el-form v-on:submit.prevent="toot" role="form">
-        <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quote"></Quote>
-        <div class="spoiler" v-if="showContentWarning" ref="spoiler">
+        <Quote :message="quoteToMessage" :displayNameStyle="displayNameStyle" v-if="quoteToMessage !== null" ref="quoteRef"></Quote>
+        <div class="spoiler" v-if="showContentWarning" ref="spoilerRef">
           <div class="el-input">
-            <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" />
+            <input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoilerText" />
           </div>
         </div>
         <Status
-          :modelValue="status"
-          @update:modelValue="status = $event"
+          :modelValue="statusText"
+          @update:modelValue="statusText = $event"
           :opened="newTootModal"
           :fixCursorPos="hashtagInserting"
           :height="statusHeight"
@@ -26,8 +26,15 @@
           @toot="toot"
         />
       </el-form>
-      <Poll v-if="openPoll" v-model:polls="polls" v-model:expire="pollExpire" @addPoll="addPoll" @removePoll="removePoll" ref="poll"></Poll>
-      <div class="preview" ref="preview">
+      <Poll
+        v-if="openPoll"
+        v-model:polls="polls"
+        v-model:expire="pollExpire"
+        @addPoll="addPoll"
+        @removePoll="removePoll"
+        ref="pollRef"
+      ></Poll>
+      <div class="preview" ref="previewRef">
         <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
           <img :src="media.preview_url" class="preview-image" />
           <el-button type="text" @click="removeAttachment(media)" class="remove-image"><font-awesome-icon icon="circle-xmark" /></el-button>
@@ -50,7 +57,7 @@
             <el-button size="default" type="text" @click="selectImage" :title="$t('modals.new_toot.footer.add_image')">
               <font-awesome-icon icon="camera" />
             </el-button>
-            <input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
+            <input name="image" type="file" class="image-input" ref="imageRef" @change="onChangeImage" />
           </div>
           <div class="poll">
             <el-button size="default" type="text" @click="togglePollForm" :title="$t('modals.new_toot.footer.poll')">
@@ -122,7 +129,7 @@
           </div>
           <div class="info">
             <img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
-            <span class="text-count">{{ tootMax - status.length }}</span>
+            <span class="text-count">{{ tootMax - statusText.length }}</span>
 
             <el-button class="toot-action" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
             <el-button class="toot-action" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
@@ -135,332 +142,366 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
+<script lang="ts">
+import { defineComponent, ref, reactive, computed, onMounted, ComponentPublicInstance, nextTick } from 'vue'
+import { useI18next } from 'vue3-i18next'
+import { ElMessage, ElMessageBox, ElDialog } from 'element-plus'
+import { Entity } from 'megalodon'
+import { useStore } from '@/store'
 import Visibility from '~/src/constants/visibility'
-import Status from './NewToot/Status'
-import Poll from './NewToot/Poll'
-import Quote from './NewToot/Quote'
+import Status from './NewToot/Status.vue'
+import Poll from './NewToot/Poll.vue'
+import Quote from './NewToot/Quote.vue'
 import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit, NewTootPollInvalid } from '@/errors/validations'
-import { EventEmitter } from '~/src/renderer/components/event'
+import { EventEmitter } from '@/components/event'
+import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Modals/NewToot'
 
-export default {
+export default defineComponent({
   name: 'new-toot',
   components: {
     Status,
     Poll,
     Quote
   },
-  data() {
-    return {
-      status: '',
-      spoiler: '',
-      showContentWarning: false,
-      visibilityList: Visibility,
-      openPoll: false,
-      polls: [],
-      pollExpire: {
-        label: this.$t('modals.new_toot.poll.expires.1_day'),
-        value: 3600 * 24
-      },
-      statusHeight: 240
-    }
-  },
-  computed: {
-    ...mapState('TimelineSpace/Modals/NewToot', {
-      replyToId: state => {
-        if (state.replyToMessage !== null) {
-          return state.replyToMessage.id
-        } else {
-          return null
-        }
-      },
-      quoteToMessage: state => state.quoteToMessage,
-      attachedMedias: state => state.attachedMedias,
-      attachedMediaId: state => state.attachedMediaId,
-      mediaDescriptions: state => state.mediaDescriptions,
-      blockSubmit: state => state.blockSubmit,
-      visibility: state => state.visibility,
-      sensitive: state => state.sensitive,
-      initialStatus: state => state.initialStatus,
-      initialSpoiler: state => state.initialSpoiler,
-      visibilityIcon: state => {
-        switch (state.visibility) {
-          case Visibility.Public.value:
-            return 'globe'
-          case Visibility.Unlisted.value:
-            return 'unlock'
-          case Visibility.Private.value:
-            return 'lock'
-          case Visibility.Direct.value:
-            return 'envelope'
-          default:
-            return 'globe'
-        }
-      },
-      loading: state => state.loading
-    }),
-    ...mapState('TimelineSpace', {
-      tootMax: state => state.tootMax
-    }),
-    ...mapState('App', {
-      displayNameStyle: state => state.displayNameStyle
-    }),
-    ...mapGetters('TimelineSpace/Modals/NewToot', ['hashtagInserting']),
-    newTootModal: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.NewToot.modalOpen
-      },
-      set(value) {
-        if (value) {
-          this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
-        } else {
-          this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
-        }
-      }
-    },
-    pinedHashtag: {
-      get() {
-        return this.$store.state.TimelineSpace.Modals.NewToot.pinedHashtag
-      },
-      set(value) {
-        this.$store.commit('TimelineSpace/Modals/NewToot/changePinedHashtag', value)
-      }
-    }
-  },
-  created() {
-    this.$store.dispatch('TimelineSpace/Modals/NewToot/setupLoading')
-  },
-  mounted() {
-    EventEmitter.on('image-uploaded', () => {
-      if (this.$refs.preview) {
-        this.statusHeight = this.statusHeight - this.$refs.preview.offsetHeight
+  setup() {
+    const space = 'TimelineSpace/Modals/NewToot'
+    const store = useStore()
+    const i18n = useI18next()
+    const visibilityList = Visibility
+
+    const enableResizing = ref<boolean>(true)
+    const statusText = ref<string>('')
+    const spoilerText = ref<string>('')
+    const showContentWarning = ref<boolean>(false)
+    const openPoll = ref<boolean>(false)
+    const polls = ref<Array<string>>([])
+    const pollExpire = reactive({
+      label: i18n.t('modals.new_toot.poll.expires.1_day'),
+      value: 3600 * 24
+    })
+    const statusHeight = ref<number>(240)
+    const previewRef = ref<HTMLElement>()
+    const imageRef = ref<HTMLInputElement>()
+    const pollRef = ref<ComponentPublicInstance>()
+    const spoilerRef = ref<HTMLElement>()
+    const dialogRef = ref<InstanceType<typeof ElDialog>>()
+    const quoteRef = ref<ComponentPublicInstance>()
+
+    const quoteToMessage = computed(() => store.state.TimelineSpace.Modals.NewToot.quoteToMessage)
+    const attachedMedias = computed(() => store.state.TimelineSpace.Modals.NewToot.attachedMedias)
+    const mediaDescriptions = computed(() => store.state.TimelineSpace.Modals.NewToot.mediaDescriptions)
+    const blockSubmit = computed(() => store.state.TimelineSpace.Modals.NewToot.blockSubmit)
+    const sensitive = computed(() => store.state.TimelineSpace.Modals.NewToot.sensitive)
+    const initialStatus = computed(() => store.state.TimelineSpace.Modals.NewToot.initialStatus)
+    const initialSpoiler = computed(() => store.state.TimelineSpace.Modals.NewToot.initialSpoiler)
+    const visibilityIcon = computed(() => {
+      switch (store.state.TimelineSpace.Modals.NewToot.visibility) {
+        case Visibility.Public.value:
+          return 'globe'
+        case Visibility.Unlisted.value:
+          return 'unlock'
+        case Visibility.Private.value:
+          return 'lock'
+        case Visibility.Direct.value:
+          return 'envelope'
+        default:
+          return 'globe'
       }
     })
-  },
-  watch: {
-    newTootModal: function (newState, oldState) {
-      if (!oldState && newState) {
-        this.showContentWarning = this.initialSpoiler
-        this.status = this.initialStatus
-        this.spoiler = this.initialSpoiler
+    const loading = computed(() => store.state.TimelineSpace.Modals.NewToot.loading)
+    const tootMax = computed(() => store.state.TimelineSpace.tootMax)
+    const displayNameStyle = computed(() => store.state.App.displayNameStyle)
+    const hashtagInserting = computed(() => store.getters[`${space}/hashtagInserting`])
+    const newTootModal = computed({
+      get: () => store.state.TimelineSpace.Modals.NewToot.modalOpen,
+      set: (value: boolean) => {
+        if (value) {
+          store.dispatch(`${space}/${ACTION_TYPES.OPEN_MODAL}`)
+        } else {
+          store.dispatch(`${space}/${ACTION_TYPES.CLOSE_MODAL}`)
+        }
       }
+    })
+    const pinedHashtag = computed({
+      get: () => store.state.TimelineSpace.Modals.NewToot.pinedHashtag,
+      set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_PINED_HASHTAG}`, value)
+    })
+
+    store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
+
+    onMounted(() => {
+      EventEmitter.on('image-uploaded', () => {
+        if (previewRef.value) {
+          statusHeight.value = statusHeight.value - previewRef.value.offsetHeight
+        }
+      })
+
+      showContentWarning.value = initialSpoiler.value.length > 0
+      statusText.value = initialStatus.value
+      spoilerText.value = initialSpoiler.value
+    })
+
+    const close = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.RESET_MEDIA_COUNT}`)
+      store.dispatch(`${space}/${ACTION_TYPES.CLOSE_MODAL}`)
     }
-  },
-  methods: {
-    close() {
-      this.filteredAccount = []
-      const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
-      this.showContentWarning = false
-      this.spoiler = ''
-      this.statusHeight = this.statusHeight + spoilerHeight
-      const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
-      this.openPoll = false
-      this.polls = []
-      this.pollExpire = {
-        label: this.$t('modals.new_toot.poll.expires.1_day'),
-        value: 3600 * 24
-      }
-      this.statusHeight = this.statusHeight + pollHeight
-      const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
-      this.statusHeight = this.statusHeight + quoteHeight
-      const attachmentHeight = this.$refs.preview ? this.$refs.preview.offsetHeight : 0
-      this.statusHeight = this.statusHeight + attachmentHeight
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/resetMediaCount')
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
-    },
-    async toot() {
+    const toot = async () => {
       const form = {
-        status: this.status,
-        spoiler: this.spoiler,
-        polls: this.polls,
-        pollExpireSeconds: this.pollExpire.value
+        status: statusText.value,
+        spoiler: spoilerText.value,
+        polls: polls.value,
+        pollExpireSeconds: pollExpire.value
       }
 
       try {
-        const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
-        this.$store.dispatch('TimelineSpace/Modals/NewToot/updateHashtags', status.tags)
-        this.close()
+        const status = await store.dispatch(`${space}/${ACTION_TYPES.POST_TOOT}`, form)
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_HASHTAGS}`, status.tags)
+        close()
       } catch (err) {
         console.error(err)
         if (err instanceof NewTootTootLength) {
-          this.$message({
-            message: this.$t('validation.new_toot.toot_length', {
+          ElMessage({
+            message: i18n.t('validation.new_toot.toot_length', {
               min: 1,
-              max: this.tootMax
+              max: tootMax.value
             }),
             type: 'error'
           })
         } else if (err instanceof NewTootAttachLength) {
-          this.$message({
-            message: this.$t('validation.new_toot.attach_length', { max: 4 }),
+          ElMessage({
+            message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
             type: 'error'
           })
         } else if (err instanceof NewTootPollInvalid) {
-          this.$message({
-            message: this.$t('validation.new_toot.poll_invalid'),
+          ElMessage({
+            message: i18n.t('validation.new_toot.poll_invalid'),
             type: 'error'
           })
         } else if (err instanceof NewTootModalOpen || err instanceof NewTootBlockSubmit) {
           // Nothing
         } else {
-          this.$message({
-            message: this.$t('message.toot_error'),
+          ElMessage({
+            message: i18n.t('message.toot_error'),
             type: 'error'
           })
         }
       }
-    },
-    selectImage() {
-      this.$refs.image.click()
-    },
-    onChangeImage(e) {
-      if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
+    }
+    const selectImage = () => {
+      imageRef!.value!.click()
+    }
+    const updateImage = (file: File) => {
+      store
+        .dispatch(`${space}/${ACTION_TYPES.UPLOAD_IMAGE}`, file)
+        .then(() => {
+          enableResizing.value = false
+          nextTick(() => {
+            if (attachedMedias.value.length === 1 && previewRef.value) {
+              statusHeight.value = statusHeight.value - previewRef.value.offsetHeight
+            }
+            enableResizing.value = true
+          })
+        })
+        .catch(err => {
+          if (err instanceof NewTootAttachLength) {
+            ElMessage({
+              message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
+              type: 'error'
+            })
+          } else {
+            ElMessage({
+              message: i18n.t('message.attach_error'),
+              type: 'error'
+            })
+          }
+        })
+    }
+    const onChangeImage = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const file = target.files?.item(0)
+      if (file === null || file === undefined) {
         return
       }
-      const file = e.target.files.item(0)
       if (!file.type.includes('image') && !file.type.includes('video')) {
-        this.$message({
-          message: this.$t('validation.new_toot.attach_image'),
+        ElMessage({
+          message: i18n.t('validation.new_toot.attach_image'),
           type: 'error'
         })
         return
       }
-      this.updateImage(file)
-    },
-    onPaste(e) {
-      const mimeTypes = window.clipboard.availableFormats().filter(type => type.startsWith('image'))
+      updateImage(file)
+    }
+    const onPaste = (e: Event) => {
+      const mimeTypes = (window as any).clipboard.availableFormats().filter(t => t.startsWith('image'))
       if (mimeTypes.length === 0) {
         return
       }
       e.preventDefault()
-      const image = window.clipboard.readImage()
-      let data
+      const image = (window as any).clipboard.readImage()
+      let data: any
       if (/^image\/jpe?g$/.test(mimeTypes[0])) {
         data = image.toJPEG(100)
       } else {
         data = image.toPNG()
       }
       const file = new File([data], 'clipboard.picture', { type: mimeTypes[0] })
-      this.updateImage(file)
-    },
-    updateImage(file) {
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/incrementMediaCount')
-      this.$store
-        .dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
-        .then(() => {
-          this.statusHeight = this.statusHeight - this.$refs.preview.offsetHeight
-        })
-        .catch(err => {
-          if (err instanceof NewTootAttachLength) {
-            this.$message({
-              message: this.$t('validation.new_toot.attach_length', { max: 4 }),
-              type: 'error'
-            })
-          } else {
-            this.$message({
-              message: this.$t('message.attach_error'),
-              type: 'error'
-            })
+      updateImage(file)
+    }
+    const removeAttachment = (media: Entity.Attachment) => {
+      const previousHeight = previewRef!.value!.offsetHeight
+      store.dispatch(`${space}/${ACTION_TYPES.REMOVE_MEDIA}`, media).then(() => {
+        enableResizing.value = false
+        nextTick(() => {
+          if (attachedMedias.value.length === 0) {
+            statusHeight.value = statusHeight.value + previousHeight
           }
+          enableResizing.value = true
         })
-    },
-    removeAttachment(media) {
-      const previousHeight = this.$refs.preview.offsetHeight
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/removeMedia', media).then(() => {
-        this.statusHeight = this.statusHeight + previousHeight
       })
-    },
-    changeVisibility(level) {
-      this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
-    },
-    changeSensitive() {
-      this.$store.commit('TimelineSpace/Modals/NewToot/changeSensitive', !this.sensitive)
-    },
-    closeConfirm(done) {
-      if (this.status.length === 0) {
+    }
+    const changeVisibility = (level: number) => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_VISIBILITY_VALUE}`, level)
+    }
+    const changeSensitive = () => {
+      store.commit(`${space}/${MUTATION_TYPES.CHANGE_SENSITIVE}`, !sensitive.value)
+    }
+    const closeConfirm = (done: Function) => {
+      if (statusText.value.length === 0) {
         done()
       } else {
-        this.$confirm(this.$t('modals.new_toot.close_confirm'), {
-          confirmButtonText: this.$t('modals.new_toot.close_confirm_ok'),
-          cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel')
+        ElMessageBox.confirm(i18n.t('modals.new_toot.close_confirm'), {
+          confirmButtonText: i18n.t('modals.new_toot.close_confirm_ok'),
+          cancelButtonText: i18n.t('modals.new_toot.close_confirm_cancel')
         })
           .then(_ => {
             done()
           })
           .catch(_ => {})
       }
-    },
-    updateDescription(id, value) {
-      this.$store.commit('TimelineSpace/Modals/NewToot/updateMediaDescription', { id: id, description: value })
-    },
-    async togglePollForm() {
-      const previousHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
+    }
+    const updateDescription = (id: number, value: string) => {
+      store.commit(`${space}/${MUTATION_TYPES.UPDATE_MEDIA_DESCRIPTION}`, { id: id, description: value })
+    }
+    const togglePollForm = () => {
+      const previousHeight = pollRef.value ? pollRef.value.$el.offsetHeight : 0
       const toggle = () => {
-        this.openPoll = !this.openPoll
-        if (this.openPoll) {
-          this.polls = ['', '']
+        openPoll.value = !openPoll.value
+        if (openPoll.value) {
+          polls.value = ['', '']
         } else {
-          this.polls = []
+          polls.value = []
         }
       }
-      await toggle()
-      if (this.openPoll) {
-        this.statusHeight = this.statusHeight - this.$refs.poll.$el.offsetHeight
-      } else {
-        this.statusHeight = this.statusHeight + previousHeight
-      }
-    },
-    async addPoll() {
-      const previousPollHeight = this.$refs.poll.$el.offsetHeight
-      await this.polls.push('')
-      const diff = this.$refs.poll.$el.offsetHeight - previousPollHeight
-      this.statusHeight = this.statusHeight - diff
-    },
-    async removePoll(id) {
-      const previousPollHeight = this.$refs.poll.$el.offsetHeight
-      await this.polls.splice(id, 1)
-      const diff = previousPollHeight - this.$refs.poll.$el.offsetHeight
-      this.statusHeight = this.statusHeight + diff
-    },
-    async toggleContentWarning() {
-      const previousHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
-      await (this.showContentWarning = !this.showContentWarning)
-      if (this.showContentWarning) {
-        this.statusHeight = this.statusHeight - this.$refs.spoiler.offsetHeight
-      } else {
-        this.statusHeight = this.statusHeight + previousHeight
-      }
-    },
-    handleResize(event) {
+      enableResizing.value = false
+      toggle()
+      nextTick(() => {
+        if (openPoll.value) {
+          const currentHeight = pollRef.value ? pollRef.value.$el.offsetHeight : 0
+          statusHeight.value = statusHeight.value - currentHeight
+        } else {
+          statusHeight.value = statusHeight.value + previousHeight
+        }
+        enableResizing.value = true
+      })
+    }
+    const addPoll = () => {
+      enableResizing.value = false
+      polls.value.push('')
+      nextTick(() => {
+        enableResizing.value = true
+      })
+    }
+    const removePoll = (id: number) => {
+      enableResizing.value = false
+      polls.value.splice(id, 1)
+      nextTick(() => {
+        enableResizing.value = true
+      })
+    }
+    const toggleContentWarning = () => {
+      const previousHeight = spoilerRef.value ? spoilerRef.value.offsetHeight : 0
+      enableResizing.value = false
+      showContentWarning.value = !showContentWarning.value
+      nextTick(() => {
+        if (showContentWarning.value) {
+          if (spoilerRef.value) {
+            statusHeight.value = statusHeight.value - spoilerRef.value.offsetHeight
+          }
+        } else {
+          statusHeight.value = statusHeight.value + previousHeight
+        }
+        enableResizing.value = true
+      })
+    }
+    const handleResize = (event: { width: number; height: number }) => {
+      if (!enableResizing.value) return
+      const dialog = document.getElementsByClassName('new-toot-modal').item(0) as HTMLElement
+      if (!dialog) return
+      const dialogStyle = window.getComputedStyle(dialog, null)
       // Ignore when the modal height already reach window height.
-      const vHeight = this.$refs.dialog.$el.firstChild.style.marginTop
-      const marginTop = (document.documentElement.clientHeight / 100) * parseInt(vHeight)
-      const limitHeight = document.documentElement.clientHeight - marginTop - 80
-      if (this.$refs.dialog.$el.firstChild.offsetHeight >= limitHeight) {
+      const marginTop = dialogStyle.marginTop
+      const limitHeight = document.documentElement.clientHeight - parseInt(marginTop) - 80
+      if (dialog.offsetHeight >= limitHeight) {
         return
       }
-      // When emoji picker is opened, resize event has to be stopped.
-      const style = this.$refs.dialog.$el.firstChild.style
-      if (style.overflow === '' || style.overflow === 'hidden') {
-        const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
-        const spoilerHeight = this.$refs.spoiler ? this.$refs.spoiler.offsetHeight : 0
-        const quoteHeight = this.$refs.quote ? this.$refs.quote.$el.offsetHeight : 0
-        const headerHeight = 54
-        const footerHeight = 63
-        this.statusHeight =
-          event.height - footerHeight - headerHeight - this.$refs.preview.offsetHeight - pollHeight - spoilerHeight - quoteHeight
-      }
-    },
-    innerElementOpened() {
-      // if (open) {
-      //   this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
-      // } else {
-      //   this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
-      // }
+      const pollHeight = pollRef.value ? pollRef.value.$el.offsetHeight : 0
+      const spoilerHeight = spoilerRef.value ? spoilerRef.value.offsetHeight : 0
+      const quoteHeight = quoteRef.value ? quoteRef.value.$el.offsetHeight : 0
+      const previewHeight = previewRef.value ? previewRef.value.offsetHeight : 0
+      const headerHeight = 54
+      const footerHeight = 66
+      statusHeight.value = event.height - footerHeight - headerHeight - previewHeight - pollHeight - spoilerHeight - quoteHeight
     }
-  }
-}
+
+    return {
+      visibilityList,
+      statusText,
+      spoilerText,
+      showContentWarning,
+      openPoll,
+      polls,
+      pollExpire,
+      statusHeight,
+      // DOM refs
+      previewRef,
+      imageRef,
+      pollRef,
+      spoilerRef,
+      dialogRef,
+      quoteRef,
+      // computed
+      quoteToMessage,
+      attachedMedias,
+      mediaDescriptions,
+      blockSubmit,
+      sensitive,
+      visibilityIcon,
+      loading,
+      tootMax,
+      displayNameStyle,
+      hashtagInserting,
+      newTootModal,
+      pinedHashtag,
+      // methods
+      close,
+      toot,
+      selectImage,
+      onChangeImage,
+      onPaste,
+      removeAttachment,
+      changeVisibility,
+      changeSensitive,
+      closeConfirm,
+      updateDescription,
+      togglePollForm,
+      addPoll,
+      removePoll,
+      toggleContentWarning,
+      handleResize
+    }
+  },
+  methods: {}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/components/event.js b/src/renderer/components/event.ts
similarity index 100%
rename from src/renderer/components/event.js
rename to src/renderer/components/event.ts
diff --git a/src/renderer/store/TimelineSpace/Modals/NewToot.ts b/src/renderer/store/TimelineSpace/Modals/NewToot.ts
index 78c5f642..a10a7865 100644
--- a/src/renderer/store/TimelineSpace/Modals/NewToot.ts
+++ b/src/renderer/store/TimelineSpace/Modals/NewToot.ts
@@ -16,7 +16,7 @@ import {
 } from '@/errors/validations'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
 
 type MediaDescription = {
   id: string
@@ -156,8 +156,27 @@ const mutations: MutationTree<NewTootState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  SETUP_LOADING: 'setupLoading',
+  START_LOADING: 'startLoading',
+  STOP_LOADING: 'stopLoading',
+  UPDATE_MEDIA: 'updateMedia',
+  POST_TOOT: 'postToot',
+  OPEN_REPLY: 'openReply',
+  OPEN_QUOTE: 'openQuote',
+  OPEN_MODAL: 'openModal',
+  CLOSE_MODAL: 'closeModal',
+  UPLOAD_IMAGE: 'uploadImage',
+  INCREMENT_MEDIA_COUNT: 'incrementMediaCount',
+  DECREMENT_MEDIA_COUNT: 'decrementMediaCount',
+  RESET_MEDIA_COUNT: 'resetMediaCount',
+  REMOVE_MEDIA: 'removeMedia',
+  UPDATE_HASHTAGS: 'updateHashtags',
+  FETCH_VISIBILITY: 'fetchVisibility'
+}
+
 const actions: ActionTree<NewTootState, RootState> = {
-  setupLoading: ({ dispatch }) => {
+  [ACTION_TYPES.SETUP_LOADING]: ({ dispatch }) => {
     const axiosLoading = new AxiosLoading()
     axiosLoading.on('start', (_: number) => {
       dispatch('startLoading')
@@ -166,17 +185,17 @@ const actions: ActionTree<NewTootState, RootState> = {
       dispatch('stopLoading')
     })
   },
-  startLoading: ({ commit, state }) => {
+  [ACTION_TYPES.START_LOADING]: ({ commit, state }) => {
     if (state.modalOpen && !state.loading) {
       commit(MUTATION_TYPES.CHANGE_LOADING, true)
     }
   },
-  stopLoading: ({ commit, state }) => {
+  [ACTION_TYPES.STOP_LOADING]: ({ commit, state }) => {
     if (state.modalOpen && state.loading) {
       commit(MUTATION_TYPES.CHANGE_LOADING, false)
     }
   },
-  updateMedia: async ({ rootState }, mediaDescription: MediaDescription) => {
+  [ACTION_TYPES.UPDATE_MEDIA]: async ({ rootState }, mediaDescription: MediaDescription) => {
     if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
       throw new AuthenticationError()
     }
@@ -198,7 +217,7 @@ const actions: ActionTree<NewTootState, RootState> = {
       throw err
     })
   },
-  postToot: async ({ state, commit, rootState, dispatch }, params: TootForm): Promise<Entity.Status> => {
+  [ACTION_TYPES.POST_TOOT]: async ({ state, commit, rootState, dispatch }, params: TootForm): Promise<Entity.Status> => {
     if (!state.modalOpen) {
       throw new NewTootModalOpen()
     }
@@ -287,7 +306,7 @@ const actions: ActionTree<NewTootState, RootState> = {
         commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, false)
       })
   },
-  openReply: ({ commit, rootState }, message: Entity.Status) => {
+  [ACTION_TYPES.OPEN_REPLY]: ({ commit, rootState }, message: Entity.Status) => {
     commit(MUTATION_TYPES.SET_REPLY_TO, message)
     const mentionAccounts = [message.account.acct]
       .concat(message.mentions.map(a => a.acct))
@@ -305,18 +324,18 @@ const actions: ActionTree<NewTootState, RootState> = {
     })
     commit(MUTATION_TYPES.CHANGE_VISIBILITY_VALUE, value)
   },
-  openQuote: ({ commit }, message: Entity.Status) => {
+  [ACTION_TYPES.OPEN_QUOTE]: ({ commit }, message: Entity.Status) => {
     commit(MUTATION_TYPES.SET_QUOTE_TO, message)
     commit(MUTATION_TYPES.CHANGE_MODAL, true)
   },
-  openModal: ({ dispatch, commit, state }) => {
+  [ACTION_TYPES.OPEN_MODAL]: ({ dispatch, commit, state }) => {
     if (!state.replyToMessage && state.pinedHashtag) {
       commit(MUTATION_TYPES.UPDATE_INITIAL_STATUS, state.hashtags.map(t => `#${t.name}`).join(' '))
     }
     commit(MUTATION_TYPES.CHANGE_MODAL, true)
     dispatch('fetchVisibility')
   },
-  closeModal: ({ commit }) => {
+  [ACTION_TYPES.CLOSE_MODAL]: ({ commit }) => {
     commit(MUTATION_TYPES.CHANGE_MODAL, false)
     commit(MUTATION_TYPES.UPDATE_INITIAL_STATUS, '')
     commit(MUTATION_TYPES.UPDATE_INITIAL_SPOILER, '')
@@ -328,7 +347,7 @@ const actions: ActionTree<NewTootState, RootState> = {
     commit(MUTATION_TYPES.CHANGE_SENSITIVE, false)
     commit(MUTATION_TYPES.CHANGE_VISIBILITY_VALUE, Visibility.Public.value)
   },
-  uploadImage: async ({ commit, state, rootState }, image: any) => {
+  [ACTION_TYPES.UPLOAD_IMAGE]: async ({ commit, state, dispatch, rootState }, image: any) => {
     if (state.attachedMedias.length > 3) {
       throw new NewTootAttachLength()
     }
@@ -348,6 +367,7 @@ const actions: ActionTree<NewTootState, RootState> = {
         commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, false)
         if (res.data.type === 'unknown') throw new NewTootUnknownType()
         commit(MUTATION_TYPES.APPEND_ATTACHED_MEDIAS, res.data)
+        dispatch(ACTION_TYPES.INCREMENT_MEDIA_COUNT)
         return res.data
       })
       .catch(err => {
@@ -356,26 +376,26 @@ const actions: ActionTree<NewTootState, RootState> = {
         throw err
       })
   },
-  incrementMediaCount: ({ commit, state }) => {
+  [ACTION_TYPES.INCREMENT_MEDIA_COUNT]: ({ commit, state }) => {
     commit(MUTATION_TYPES.UPDATE_MEDIA_COUNT, state.attachedMediaCount + 1)
   },
-  decrementMediaCount: ({ commit, state }) => {
+  [ACTION_TYPES.DECREMENT_MEDIA_COUNT]: ({ commit, state }) => {
     commit(MUTATION_TYPES.UPDATE_MEDIA_COUNT, state.attachedMediaCount - 1)
   },
-  resetMediaCount: ({ commit }) => {
+  [ACTION_TYPES.RESET_MEDIA_COUNT]: ({ commit }) => {
     commit(MUTATION_TYPES.UPDATE_MEDIA_COUNT, 0)
   },
-  removeMedia: ({ commit, dispatch }, media: Entity.Attachment) => {
+  [ACTION_TYPES.REMOVE_MEDIA]: ({ commit, dispatch }, media: Entity.Attachment) => {
     commit(MUTATION_TYPES.REMOVE_MEDIA, media)
     commit(MUTATION_TYPES.REMOVE_MEDIA_DESCRIPTION, media.id)
-    dispatch('decrementMediaCount')
+    dispatch(ACTION_TYPES.DECREMENT_MEDIA_COUNT)
   },
-  updateHashtags: ({ commit, state }, tags: Array<Entity.Tag>) => {
+  [ACTION_TYPES.UPDATE_HASHTAGS]: ({ commit, state }, tags: Array<Entity.Tag>) => {
     if (state.pinedHashtag && tags.length > 0) {
       commit(MUTATION_TYPES.UPDATE_HASHTAGS, tags)
     }
   },
-  fetchVisibility: async ({ commit, rootState }) => {
+  [ACTION_TYPES.FETCH_VISIBILITY]: async ({ commit, rootState }) => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,