Re-implement user followers in profile

src/renderer/components/TimelineSpace/Detail/Profile.vue

@@ -100,7 +100,9 @@
       <el-tab-pane :label="precision(user.following_count) + ' Following'" name="following"
         ><Following :user="user" :account="account.account" :server="account.server"
       /></el-tab-pane>
-      <el-tab-pane :label="precision(user.followers_count) + ' Followers'" name="followers">Followers</el-tab-pane>
+      <el-tab-pane :label="precision(user.followers_count) + ' Followers'" name="followers"
+        ><Followers :user="user" :account="account.account" :server="account.server"
+      /></el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -120,13 +122,15 @@ import { ACTION_TYPES as MUTE_ACTION } from '@/store/TimelineSpace/Modals/MuteCo
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import Posts from './Profile/Posts.vue'
 import Following from './Profile/Following.vue'
+import Followers from './Profile/Followers.vue'
 
 export default defineComponent({
   name: 'Profile',
   components: {
     FailoverImg,
     Posts,
-    Following
+    Following,
+    Followers
   },
   setup() {
     const win = (window as any) as MyWindow

src/renderer/components/TimelineSpace/Detail/Profile/Followers.vue

@@ -0,0 +1,102 @@
+<template>
+  <DynamicScroller :items="followers" :min-item-size="53" class="scroller" page-mode>
+    <template v-slot="{ item, index, active }">
+      <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.item]" :data-index="index" :watchData="true">
+        <User :user="item" :relationship="targetRelationship(item.id)" @follow-account="follow" @unfollow-account="unfollow" />
+      </DynamicScrollerItem>
+    </template>
+  </DynamicScroller>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs, ref, computed, onMounted, watch } from 'vue'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { useStore } from '@/store'
+import User from '@/components/molecules/User.vue'
+
+export default defineComponent({
+  name: 'Followers',
+  components: { User },
+  props: {
+    user: {
+      type: Object as PropType<Entity.Account>,
+      required: true
+    },
+    account: {
+      type: Object as PropType<LocalAccount>,
+      required: true
+    },
+    server: {
+      type: Object as PropType<LocalServer>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { user, account, server } = toRefs(props)
+    const store = useStore()
+
+    const followers = ref<Array<Entity.Account>>([])
+    const relationships = ref<Array<Entity.Relationship>>([])
+    const client = ref<MegalodonInterface | null>(null)
+    const userAgent = computed(() => store.state.App.userAgent)
+
+    onMounted(async () => {
+      client.value = generator(server.value.sns, server.value.baseURL, account.value.accessToken, userAgent.value)
+      const res = await client.value.getAccountFollowers(user.value.id)
+      const ids = res.data.map(a => a.id)
+      const rel = await client.value.getRelationships(ids)
+      followers.value = res.data
+      relationships.value = rel.data
+    })
+
+    watch(user, async current => {
+      if (client.value) {
+        const res = await client.value.getAccountFollowers(current.id)
+        const ids = res.data.map(a => a.id)
+        const rel = await client.value.getRelationships(ids)
+        followers.value = res.data
+        relationships.value = rel.data
+      }
+    })
+
+    const targetRelationship = (id: string) => {
+      return relationships.value.find(r => r.id === id)
+    }
+
+    const follow = async (acct: Entity.Account) => {
+      if (client.value) {
+        const res = await client.value.followAccount(acct.id)
+        relationships.value = relationships.value.map(r => {
+          if (r.id === res.data.id) {
+            return res.data
+          }
+          return r
+        })
+      }
+    }
+
+    const unfollow = async (acct: Entity.Account) => {
+      if (client.value) {
+        const res = await client.value.unfollowAccount(acct.id)
+        relationships.value = relationships.value.map(r => {
+          if (r.id === res.data.id) {
+            return res.data
+          }
+          return r
+        })
+      }
+    }
+
+    return {
+      followers,
+      targetRelationship,
+      follow,
+      unfollow
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>