Can show Ancestors and Descendants now

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

@@ -38,16 +38,6 @@
         <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
           <icon name="star" scale="0.9"></icon>
         </el-button>
-        <el-button type="text" v-popover:menu.bottom>
-          <icon name="ellipsis-h" scale="0.9"></icon>
-        </el-button>
-        <popover name="menu" :width="120">
-          <ul class="toot-menu">
-            <li role="button" @click="openDetail(message)">
-              View Toot Detail
-            </li>
-          </ul>
-        </popover>
       </div>
     </div>
     <div class="clearfix"></div>
@@ -67,7 +57,14 @@ export default {
       message: state => state.TimelineSpace.Contents.SideBar.TootDetail.message
     })
   },
+  created () {
+    this.load()
+  },
   methods: {
+    load () {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.message)
+        .catch(() => {})
+    },
     originalMessage (message) {
       if (message.reblog !== null) {
         return message.reblog

src/renderer/store/TimelineSpace/Contents/SideBar/TootDetail.js

@@ -1,10 +1,12 @@
-// import Mastodon from 'mastodon-api'
+import Mastodon from 'mastodon-api'
 
 const TootDetail = {
   namespaced: true,
   state: {
     message: null,
-    loading: false
+    loading: false,
+    ancestors: [],
+    descendants: []
   },
   mutations: {
     changeToot (state, message) {
@@ -12,11 +14,34 @@ const TootDetail = {
     },
     changeLoading (state, value) {
       state.loading = value
+    },
+    updateAncestors (state, ancestors) {
+      state.ancestors = ancestors
+    },
+    updateDescendants (state, descendants) {
+      state.descendants = descendants
     }
   },
   actions: {
     changeToot ({ commit, dispatch }, message) {
       commit('changeToot', message)
+    },
+    fetchToot ({ state, commit, rootState }, message) {
+      return new Promise((resolve, reject) => {
+        commit('TimelineSpace/Contents/SideBar/TootDetail/changeLoading', true, { root: true })
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get(`/statuses/${message.id}/context`, { limit: 40 }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateAncestors', data.ancestors)
+          commit('updateDescendants', data.descendants)
+          commit('TimelineSpace/Contents/SideBar/TootDetail/changeLoading', false, { root: true })
+          resolve(res)
+        })
+      })
     }
   }
 }