refs #3301 Rewrite TimelineSpace/Contents/SideBar with composition API

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -23,12 +23,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState } from 'vuex'
+import { defineComponent, ref, toRefs, computed, onBeforeUnmount } from 'vue'
-import TootDetail from './SideBar/TootDetail'
+import TootDetail from './SideBar/TootDetail.vue'
-import AccountProfile from './SideBar/AccountProfile'
+import AccountProfile from './SideBar/AccountProfile.vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/SideBar'
 
-export default {
+export default defineComponent({
   components: {
     TootDetail,
     AccountProfile
@@ -40,43 +42,42 @@ export default {
       default: false
     }
   },
-  data() {
+  setup(props) {
+    const space = 'TimelineSpace/Contents/SideBar'
+    const store = useStore()
+
+    const { overlaid } = toRefs(props)
+    const loading = ref<boolean>(false)
+
+    const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
+    const component = computed(() => store.state.TimelineSpace.Contents.SideBar.component)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
+    const shortcutEnabled = computed(() => !overlaid.value)
+
+    onBeforeUnmount(() => {
+      close()
+    })
+
+    const close = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.CLOSE}`)
+    }
+    const changeLoading = (value: boolean) => {
+      loading.value = value
+    }
+    const reload = () => {
+      store.dispatch(`${space}/${ACTION_TYPES.RELOAD}`)
+    }
+
     return {
-      loading: false
+      openSideBar,
-    }
+      component,
-  },
+      backgroundColor,
-  computed: {
+      shortcutEnabled,
-    ...mapState({
+      changeLoading,
-      openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
+      reload
-      component: state => state.TimelineSpace.Contents.SideBar.component,
-      backgroundColor: state => state.App.theme.background_color
-    }),
-    shortcutEnabled: function () {
-      return !this.overlaid
-    }
-  },
-  beforeUnmount() {
-    this.close()
-  },
-  methods: {
-    close() {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
-    },
-    changeLoading(value) {
-      this.loading = value
-    },
-    reload() {
-      this.$store.dispatch('TimelineSpace/Contents/SideBar/reload')
-    },
-    handleKey(event) {
-      switch (event.srcKey) {
-        case 'close':
-          this.close()
-          break
-      }
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue

@@ -60,7 +60,7 @@ export default defineComponent({
       store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
       try {
         const followers = await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FOLLOWERS}`, account.value)
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, followers.value)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, followers)
       } catch (err) {
         ElMessage({
           message: i18n.t('message.followers_fetch_error'),

src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Follows.vue

@@ -66,7 +66,7 @@ export default defineComponent({
       store.commit(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_MUTATION.CHANGE_LOADING}`, true)
       try {
         const follows = await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FOLLOWS}`, account.value)
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows.value)
+        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_RELATIONSHIPS}`, follows)
       } catch (err) {
         console.error(err)
         ElMessage({

src/renderer/components/organisms/Toot.vue

@@ -146,7 +146,7 @@
               @click="changeBookmark(originalMessage)"
               :class="originalMessage.bookmarked ? 'bookmarked' : 'bookmark'"
               type="text"
-              :text="$t('cards.toot.bookmark')"
+              :title="$t('cards.toot.bookmark')"
               :aria-label="$t('cards.toot.bookmark')"
               v-if="bookmarkSupported"
             >