From 5ec2a485711014b8d88401e6f1b711b3c00e9707 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 29 Jan 2023 21:57:54 +0900
Subject: [PATCH 1/7] [refactor] Remove public timeline store

---
 .../TimelineSpace/Contents/DirectMessages.vue |  10 +-
 .../TimelineSpace/Contents/Favourites.vue     |  10 +-
 .../TimelineSpace/Contents/Home.vue           |  10 +-
 .../TimelineSpace/Contents/Public.vue         | 100 +++++++++------
 src/renderer/components/organisms/Toot.vue    |   4 +-
 src/renderer/store/GlobalHeader.ts            |   9 --
 src/renderer/store/TimelineSpace/Contents.ts  |   3 -
 .../store/TimelineSpace/Contents/Public.ts    | 114 ------------------
 8 files changed, 82 insertions(+), 178 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Public.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index 9f3118c0ce..84465c8f34 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -11,9 +11,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
-            v-on:delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @update="updateToot"
+            @delete="deleteToot"
+            @select-toot="focusToot(item)"
           >
           </toot>
         </DynamicScrollerItem>
@@ -132,9 +132,9 @@ export default defineComponent({
         store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
       }
     }
-    const deleteToot = (message: Entity.Status) => {
+    const deleteToot = (id: string) => {
       if (account.account) {
-        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
+        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: id, accountId: account.account.id })
       }
     }
     const upper = () => {
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 0f25e0f617..85dc88b3b9 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -12,9 +12,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
-            v-on:delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @update="updateToot"
+            @delete="deleteToot"
+            @select-toot="focusToot(item)"
           >
           </toot>
         </DynamicScrollerItem>
@@ -150,8 +150,8 @@ export default defineComponent({
     const updateToot = (message: Entity.Status) => {
       store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
     }
-    const deleteToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
+    const deleteToot = (id: string) => {
+      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, id)
     }
     const reload = async () => {
       store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 21507e6896..67490fca6d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -17,9 +17,9 @@
               :filters="filters"
               :account="account.account"
               :server="account.server"
-              v-on:update="updateToot"
-              v-on:delete="deleteToot"
-              @selectToot="focusToot(item)"
+              @update="updateToot"
+              delete="deleteToot"
+              @select-toot="focusToot(item)"
             >
             </toot>
           </DynamicScrollerItem>
@@ -180,9 +180,9 @@ export default defineComponent({
         store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
       }
     }
-    const deleteToot = (message: Entity.Status) => {
+    const deleteToot = (id: string) => {
       if (account.account) {
-        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
+        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: id, accountId: account.account.id })
       }
     }
     const fetchTimelineSince = (since_id: string) => {
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 4735b9b262..293ba4a80e 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="public">
-    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <DynamicScroller :items="statuses" :min-item-size="86" id="scroller" class="scroller" ref="scroller" v-else>
       <template #default="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -11,9 +12,9 @@
             :filters="filters"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
-            v-on:delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @update="updateToot"
+            @delete="deleteToot"
+            @select-toot="focusToot(item)"
           >
           </toot>
         </DynamicScrollerItem>
@@ -27,13 +28,12 @@ import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref,
 import { logicAnd } from '@vueuse/math'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
 import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
-import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Public'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { MyWindow } from '~/src/types/global'
@@ -53,23 +53,44 @@ export default defineComponent({
 
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>(null)
-    const lazyLoading = ref(false)
+    const loading = ref<boolean>(false)
     const heading = ref(true)
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
-    const timeline = computed(() => store.state.TimelineSpace.Contents.Public.timeline[id.value])
+    const statuses = ref<Array<Entity.Status>>([])
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const filters = computed(() => store.getters[`${space}/filters`])
-    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
     const shortcutEnabled = computed(() => !modalOpened.value)
+    const userAgent = computed(() => store.state.App.userAgent)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
       account.account = a
       account.server = s
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+
+      loading.value = true
+      try {
+        const res = await client.value.getPublicTimeline({ limit: 20 })
+        statuses.value = res.data
+      } finally {
+        loading.value = false
+      }
+
+      win.ipcRenderer.removeAllListeners(`update-public-streamings-${a.id}`)
+      win.ipcRenderer.on(`update-public-streamings-${a.id}`, (_, update: Entity.Status) => {
+        statuses.value = [update, ...statuses.value]
+      })
+      win.ipcRenderer.removeAllListeners(`delete-public-streamings-${a.id}`)
+      win.ipcRenderer.on(`delete-public-streamings-${a.id}`, (_, id: string) => {
+        deleteToot(id)
+      })
 
       store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_PUBLIC_TIMELINE}`, false)
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@@ -96,7 +117,7 @@ export default defineComponent({
     })
     whenever(logicAnd(j, shortcutEnabled), () => {
       if (focusedId.value === null) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
       } else {
         focusNext()
       }
@@ -108,25 +129,21 @@ export default defineComponent({
     const onScroll = (event: Event) => {
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
-          document.getElementById('scroller')!.scrollHeight - 10 &&
-        !lazyLoading.value
+        document.getElementById('scroller')!.scrollHeight - 10
       ) {
-        lazyLoading.value = true
-        store
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
-            statuses: timeline.value[timeline.value.length - 1],
-            account: account.account,
-            server: account.server
+        const lastStatus = statuses.value[statuses.value.length - 1]
+        client.value
+          ?.getPublicTimeline({ max_id: lastStatus.id, limit: 20 })
+          .then(res => {
+            statuses.value = [...statuses.value, ...res.data]
           })
-          .catch(() => {
+          .catch(err => {
+            console.error(err)
             ElMessage({
               message: i18n.t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
-          .finally(() => {
-            lazyLoading.value = false
-          })
       }
 
       if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@@ -137,14 +154,25 @@ export default defineComponent({
     }
 
     const updateToot = (message: Entity.Status) => {
-      if (account.account) {
-        store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, { status: message, accountId: account.account.id })
-      }
+      statuses.value = statuses.value.map(status => {
+        if (status.id === message.id) {
+          return message
+        } else if (status.reblog && status.reblog.id === message.id) {
+          return Object.assign(status, {
+            reblog: message
+          })
+        }
+        return status
+      })
     }
-    const deleteToot = (message: Entity.Status) => {
-      if (account.account) {
-        store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
-      }
+    const deleteToot = (id: string) => {
+      statuses.value = statuses.value.filter(status => {
+        if (status.reblog !== null && status.reblog.id === id) {
+          return false
+        } else {
+          return status.id !== id
+        }
+      })
     }
     const upper = () => {
       scroller.value.scrollToItem(0)
@@ -152,16 +180,16 @@ export default defineComponent({
     }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
-      } else if (currentFocusedIndex.value < timeline.value.length) {
-        focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
+      } else if (currentFocusedIndex.value < statuses.value.length) {
+        focusedId.value = statuses.value[currentFocusedIndex.value + 1].uri + statuses.value[currentFocusedIndex.value + 1].id
       }
     }
     const focusPrev = () => {
       if (currentFocusedIndex.value === 0) {
         focusedId.value = null
       } else if (currentFocusedIndex.value > 0) {
-        focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
+        focusedId.value = statuses.value[currentFocusedIndex.value - 1].uri + statuses.value[currentFocusedIndex.value - 1].id
       }
     }
     const focusToot = (message: Entity.Status) => {
@@ -169,7 +197,8 @@ export default defineComponent({
     }
 
     return {
-      timeline,
+      loading,
+      statuses,
       scroller,
       focusedId,
       modalOpened,
@@ -179,7 +208,8 @@ export default defineComponent({
       focusToot,
       heading,
       upper,
-      account
+      account,
+      backgroundColor
     }
   }
 })
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 432c5c2096..eb46b05877 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -633,8 +633,8 @@ export default defineComponent({
     const deleteToot = (message: Entity.Status) => {
       client.value
         ?.deleteStatus(message.id)
-        .then(message => {
-          ctx.emit('delete', message)
+        .then(() => {
+          ctx.emit('delete', message.id)
         })
         .catch(() => {
           ElMessage({
diff --git a/src/renderer/store/GlobalHeader.ts b/src/renderer/store/GlobalHeader.ts
index 5f1e2c6a96..348c437357 100644
--- a/src/renderer/store/GlobalHeader.ts
+++ b/src/renderer/store/GlobalHeader.ts
@@ -122,7 +122,6 @@ const actions: ActionTree<GlobalHeaderState, RootState> = {
       await dispatch('TimelineSpace/Contents/Home/fetchTimeline', { account, server }, { root: true })
       await dispatch('TimelineSpace/Contents/Notifications/fetchNotifications', { account, server }, { root: true })
       await dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline', { account, server }, { root: true })
-      await dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline', { account, server }, { root: true })
       await dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline', { account, server }, { root: true })
     })
   },
@@ -149,14 +148,6 @@ const actions: ActionTree<GlobalHeaderState, RootState> = {
       win.ipcRenderer.on(`delete-local-streamings-${account.id}`, (_, id: string) => {
         commit('TimelineSpace/Contents/Local/deleteToot', { statusId: id, accountId: account.id }, { root: true })
       })
-      win.ipcRenderer.removeAllListeners(`update-public-streamings-${account.id}`)
-      win.ipcRenderer.on(`update-public-streamings-${account.id}`, (_, update: Entity.Status) => {
-        commit('TimelineSpace/Contents/Public/appendTimeline', { status: update, accountId: account.id }, { root: true })
-      })
-      win.ipcRenderer.removeAllListeners(`delete-public-streamings-${account.id}`)
-      win.ipcRenderer.on(`delete-public-streamings-${account.id}`, (_, id: string) => {
-        commit('TimelineSpace/Contents/Public/deleteToot', { statusId: id, accountId: account.id }, { root: true })
-      })
       win.ipcRenderer.removeAllListeners(`update-direct-streamings-${account.id}`)
       win.ipcRenderer.on(`update-direct-streamings-${account.id}`, (_, update: Entity.Status) => {
         commit('TimelineSpace/Contents/DirectMessages/appendTimeline', { status: update, accountId: account.id }, { root: true })
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index e91eae7475..718b5e7b64 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -3,7 +3,6 @@ import Notifications, { NotificationsState } from './Contents/Notifications'
 import Favourites, { FavouritesState } from './Contents/Favourites'
 import Bookmarks, { BookmarksState } from './Contents/Bookmarks'
 import Local, { LocalState } from './Contents/Local'
-import Public, { PublicState } from './Contents/Public'
 import Search, { SearchModuleState } from './Contents/Search'
 import Lists, { ListsModuleState } from './Contents/Lists'
 import Hashtag, { HashtagModuleState } from './Contents/Hashtag'
@@ -23,7 +22,6 @@ type ContentsModule = {
   Favourites: FavouritesState
   Bookmarks: BookmarksState
   Local: LocalState
-  Public: PublicState
   Search: SearchModuleState
   Hashtag: HashtagModuleState
   FollowRequests: FollowRequestsState
@@ -66,7 +64,6 @@ const Contents: Module<ContentsState, RootState> = {
     Bookmarks,
     Local,
     DirectMessages,
-    Public,
     Search,
     Lists,
     Hashtag,
diff --git a/src/renderer/store/TimelineSpace/Contents/Public.ts b/src/renderer/store/TimelineSpace/Contents/Public.ts
deleted file mode 100644
index 8111a8e044..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Public.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import generator, { Entity, FilterContext } from 'megalodon'
-import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
-import { RootState } from '@/store'
-import { LocalAccount } from '~/src/types/localAccount'
-import { LocalServer } from '~/src/types/localServer'
-
-export type PublicState = {
-  timeline: { [key: number]: Array<Entity.Status> }
-}
-
-const state = (): PublicState => ({
-  timeline: {}
-})
-
-export const MUTATION_TYPES = {
-  APPEND_TIMELINE: 'appendTimeline',
-  REPLACE_TIMELINE: 'replaceTimeline',
-  INSERT_TIMELINE: 'insertTimeline',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot'
-}
-
-const mutations: MutationTree<PublicState> = {
-  [MUTATION_TYPES.APPEND_TIMELINE]: (state, obj: { status: Entity.Status; accountId: number }) => {
-    if (state.timeline[obj.accountId]) {
-      state.timeline[obj.accountId] = [obj.status, ...state.timeline[obj.accountId]]
-    } else {
-      state.timeline[obj.accountId] = [obj.status]
-    }
-  },
-  [MUTATION_TYPES.REPLACE_TIMELINE]: (state, obj: { statuses: Array<Entity.Status>; accountId: number }) => {
-    state.timeline[obj.accountId] = obj.statuses
-  },
-  [MUTATION_TYPES.INSERT_TIMELINE]: (state, obj: { statuses: Array<Entity.Status>; accountId: number }) => {
-    if (state.timeline[obj.accountId]) {
-      state.timeline[obj.accountId] = [...state.timeline[obj.accountId], ...obj.statuses]
-    } else {
-      state.timeline[obj.accountId] = obj.statuses
-    }
-  },
-  [MUTATION_TYPES.UPDATE_TOOT]: (state, obj: { status: Entity.Status; accountId: number }) => {
-    state.timeline[obj.accountId] = state.timeline[obj.accountId].map(toot => {
-      if (toot.id === obj.status.id) {
-        return obj.status
-      } else if (toot.reblog && toot.reblog.id === obj.status.id) {
-        // When user reblog/favourite a reblogged toot, target message is a original toot.
-        // So, a message which is received now is original toot.
-        const reblog = {
-          reblog: obj.status
-        }
-        return Object.assign(toot, reblog)
-      } else {
-        return toot
-      }
-    })
-  },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, obj: { statusId: string; accountId: number }) => {
-    state.timeline[obj.accountId] = state.timeline[obj.accountId].filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === obj.statusId) {
-        return false
-      } else {
-        return toot.id !== obj.statusId
-      }
-    })
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_PUBLIC_TIMELINE: 'fetchPublicTimeline',
-  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
-}
-
-const actions: ActionTree<PublicState, RootState> = {
-  [ACTION_TYPES.FETCH_PUBLIC_TIMELINE]: async (
-    { commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    try {
-      const res = await client.getPublicTimeline({ limit: 20 })
-      commit(MUTATION_TYPES.REPLACE_TIMELINE, { statuses: res.data, accountId: req.account.id })
-      return res.data
-    } catch (err) {
-      console.error(err)
-      return []
-    }
-  },
-  [ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
-    { commit, rootState },
-    req: { lastStatus: Entity.Status; account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status> | null> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    return client.getPublicTimeline({ max_id: req.lastStatus.id, limit: 20 }).then(res => {
-      commit(MUTATION_TYPES.INSERT_TIMELINE, { statuses: res.data, accountId: req.account.id })
-      return res.data
-    })
-  }
-}
-
-const getters: GetterTree<PublicState, RootState> = {
-  filters: (_state, _getters, rootState) => {
-    return rootState.TimelineSpace.filters.filter(f => f.context.includes(FilterContext.Public) && !f.irreversible)
-  }
-}
-
-const Public: Module<PublicState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions,
-  getters: getters
-}
-
-export default Public

From 273b3c7d13fe9c9c219bcda999ee3c8e1fdbdc71 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 29 Jan 2023 22:15:25 +0900
Subject: [PATCH 2/7] [refactor] Remove favourites timeline store

---
 .../TimelineSpace/Contents/Favourites.vue     | 115 +++++++++-------
 .../TimelineSpace/Contents/Public.vue         |  13 +-
 src/renderer/store/TimelineSpace/Contents.ts  |   3 -
 .../TimelineSpace/Contents/Favourites.ts      | 123 ------------------
 4 files changed, 78 insertions(+), 176 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Favourites.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 85dc88b3b9..2d6c5cc77e 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="favourites">
-    <div></div>
-    <DynamicScroller :items="favourites" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <DynamicScroller :items="favourites" :min-item-size="60" id="scroller" class="scroller" ref="scroller" v-else>
       <template #default="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -30,10 +30,9 @@ import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
-import { Entity } from 'megalodon'
+import parse from 'parse-link-header'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import Toot from '@/components/organisms/Toot.vue'
-import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Favourites'
-import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
 import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
 import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -45,12 +44,10 @@ export default defineComponent({
   name: 'favourites',
   components: { Toot },
   setup() {
-    const space = 'TimelineSpace/Contents/Favourites'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
 
-    const heading = ref<boolean>(false)
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>()
     const { j, k, Ctrl_r } = useMagicKeys()
@@ -58,41 +55,53 @@ export default defineComponent({
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
 
+    const loading = ref(false)
     const lazyLoading = ref(false)
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
-    const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
+    const favourites = ref<Array<Entity.Status>>([])
+    const nextMaxId = ref<string | null>(null)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
     const shortcutEnabled = computed(() => !modalOpened.value)
+    const userAgent = computed(() => store.state.App.userAgent)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
       account.account = a
       account.server = s
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
 
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
 
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
-      store
-        .dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account)
-        .catch(() => {
-          ElMessage({
-            message: i18n.t('message.favourite_fetch_error'),
-            type: 'error'
-          })
-        })
-        .finally(() => {
-          store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+      loading.value = true
+      try {
+        const res = await client.value.getFavourites({ limit: 20 })
+        favourites.value = res.data
+        const link = parse(res.headers.link)
+        if (link !== null && link.next) {
+          nextMaxId.value = link.next.max_id
+        } else {
+          nextMaxId.value = null
+        }
+      } catch (err) {
+        console.error(err)
+        ElMessage({
+          message: i18n.t('message.favourite_fetch_error'),
+          type: 'error'
         })
+      } finally {
+        loading.value = false
+      }
     })
 
     onUnmounted(() => {
-      store.commit(`${space}/${MUTATION_TYPES.UPDATE_FAVOURITES}`, [])
       const el = document.getElementById('scroller')
       if (el !== undefined && el !== null) {
         el.removeEventListener('scroll', onScroll)
@@ -125,12 +134,23 @@ export default defineComponent({
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
           document.getElementById('scroller')!.scrollHeight - 10 &&
-        !lazyLoading.value
+        !lazyLoading.value &&
+        nextMaxId.value
       ) {
         lazyLoading.value = true
-        store
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_FAVOURITES}`, account)
-          .catch(() => {
+        client.value
+          ?.getFavourites({ limit: 20, max_id: nextMaxId.value })
+          .then(res => {
+            favourites.value = [...favourites.value, ...res.data]
+            const link = parse(res.headers.link)
+            if (link !== null && link.next) {
+              nextMaxId.value = link.next.max_id
+            } else {
+              nextMaxId.value = null
+            }
+          })
+          .catch(err => {
+            console.error(err)
             ElMessage({
               message: i18n.t('message.favourite_fetch_error'),
               type: 'error'
@@ -140,36 +160,43 @@ export default defineComponent({
             lazyLoading.value = false
           })
       }
-      // for upper
-      if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
-        heading.value = false
-      } else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
-        heading.value = true
-      }
     }
     const updateToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
+      favourites.value = favourites.value.map(status => {
+        if (status.id === message.id) {
+          return message
+        } else if (status.reblog && status.reblog.id === message.id) {
+          return Object.assign(status, {
+            reblog: message
+          })
+        }
+        return status
+      })
     }
     const deleteToot = (id: string) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, id)
+      favourites.value = favourites.value.filter(status => {
+        if (status.reblog !== null && status.reblog.id === id) {
+          return false
+        } else {
+          return status.id !== id
+        }
+      })
     }
     const reload = async () => {
       store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account).catch(() => {
-          ElMessage({
-            message: i18n.t('message.favourite_fetch_error'),
-            type: 'error'
-          })
-        })
+        const res = await client.value!.getFavourites({ limit: 20 })
+        favourites.value = res.data
+        const link = parse(res.headers.link)
+        if (link !== null && link.next) {
+          nextMaxId.value = link.next.max_id
+        } else {
+          nextMaxId.value = null
+        }
       } finally {
         store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
       }
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = favourites.value[0].uri
@@ -189,15 +216,15 @@ export default defineComponent({
     }
 
     return {
+      loading,
       favourites,
+      backgroundColor,
       scroller,
       focusedId,
       modalOpened,
       updateToot,
       deleteToot,
       focusToot,
-      heading,
-      upper,
       account
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 293ba4a80e..f4a9b461d9 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -54,6 +54,7 @@ export default defineComponent({
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>(null)
     const loading = ref<boolean>(false)
+    const lazyLoading = ref(false)
     const heading = ref(true)
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
@@ -129,9 +130,11 @@ export default defineComponent({
     const onScroll = (event: Event) => {
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
-        document.getElementById('scroller')!.scrollHeight - 10
+          document.getElementById('scroller')!.scrollHeight - 10 &&
+        !lazyLoading.value
       ) {
         const lastStatus = statuses.value[statuses.value.length - 1]
+        lazyLoading.value = true
         client.value
           ?.getPublicTimeline({ max_id: lastStatus.id, limit: 20 })
           .then(res => {
@@ -144,6 +147,9 @@ export default defineComponent({
               type: 'error'
             })
           })
+          .finally(() => {
+            lazyLoading.value = false
+          })
       }
 
       if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
@@ -174,10 +180,6 @@ export default defineComponent({
         }
       })
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = statuses.value[0].uri + statuses.value[0].id
@@ -207,7 +209,6 @@ export default defineComponent({
       deleteToot,
       focusToot,
       heading,
-      upper,
       account,
       backgroundColor
     }
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 718b5e7b64..27bd847f77 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -1,6 +1,5 @@
 import Home, { HomeState } from './Contents/Home'
 import Notifications, { NotificationsState } from './Contents/Notifications'
-import Favourites, { FavouritesState } from './Contents/Favourites'
 import Bookmarks, { BookmarksState } from './Contents/Bookmarks'
 import Local, { LocalState } from './Contents/Local'
 import Search, { SearchModuleState } from './Contents/Search'
@@ -19,7 +18,6 @@ type ContentsModule = {
   Home: HomeState
   Notifications: NotificationsState
   DirectMessages: DirectMessagesState
-  Favourites: FavouritesState
   Bookmarks: BookmarksState
   Local: LocalState
   Search: SearchModuleState
@@ -60,7 +58,6 @@ const Contents: Module<ContentsState, RootState> = {
   modules: {
     Home,
     Notifications,
-    Favourites,
     Bookmarks,
     Local,
     DirectMessages,
diff --git a/src/renderer/store/TimelineSpace/Contents/Favourites.ts b/src/renderer/store/TimelineSpace/Contents/Favourites.ts
deleted file mode 100644
index 909c229d58..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Favourites.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import parse from 'parse-link-header'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { LocalAccount } from '~/src/types/localAccount'
-import { LocalServer } from '~/src/types/localServer'
-
-export type FavouritesState = {
-  favourites: Array<Entity.Status>
-  maxId: string | null
-}
-
-const state = (): FavouritesState => ({
-  favourites: [],
-  maxId: null
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_FAVOURITES: 'updateFavourites',
-  INSERT_FAVOURITES: 'insertFavourites',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot',
-  CHANGE_MAX_ID: 'changeMaxId'
-}
-
-const mutations: MutationTree<FavouritesState> = {
-  [MUTATION_TYPES.UPDATE_FAVOURITES]: (state, favourites: Array<Entity.Status>) => {
-    state.favourites = favourites
-  },
-  [MUTATION_TYPES.INSERT_FAVOURITES]: (state, favourites: Array<Entity.Status>) => {
-    state.favourites = state.favourites.concat(favourites)
-  },
-  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
-    state.favourites = state.favourites.map(toot => {
-      if (toot.id === message.id) {
-        return message
-      } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-        // When user reblog/favourite a reblogged toot, target message is a original toot.
-        // So, a message which is received now is original toot.
-        const reblog = {
-          reblog: message
-        }
-        return Object.assign(toot, reblog)
-      } else {
-        return toot
-      }
-    })
-  },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, message: Entity.Status) => {
-    state.favourites = state.favourites.filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === message.id) {
-        return false
-      } else {
-        return toot.id !== message.id
-      }
-    })
-  },
-  [MUTATION_TYPES.CHANGE_MAX_ID]: (state, id: string | null) => {
-    state.maxId = id
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_FAVOURITES: 'fetchFavourites',
-  LAZY_FETCH_FAVOURITES: 'lazyFetchFavourites'
-}
-
-const actions: ActionTree<FavouritesState, RootState> = {
-  [ACTION_TYPES.FETCH_FAVOURITES]: async (
-    { commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getFavourites({ limit: 20 })
-    commit(MUTATION_TYPES.UPDATE_FAVOURITES, res.data)
-    // Parse link header
-    try {
-      const link = parse(res.headers.link)
-      if (link !== null && link.next) {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
-      } else {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      }
-    } catch (err) {
-      commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      console.error(err)
-    }
-    return res.data
-  },
-  lazyFetchFavourites: async (
-    { state, commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status> | null> => {
-    if (!state.maxId) {
-      return Promise.resolve(null)
-    }
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getFavourites({ max_id: state.maxId, limit: 20 })
-    commit(MUTATION_TYPES.INSERT_FAVOURITES, res.data)
-    // Parse link header
-    try {
-      const link = parse(res.headers.link)
-      if (link !== null && link.next) {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
-      } else {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      }
-    } catch (err) {
-      commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      console.error(err)
-    }
-    return res.data
-  }
-}
-
-const Favourites: Module<FavouritesState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default Favourites

From 2ed4e8d9e9bb30049a1492fa87c078eb99c412d4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 29 Jan 2023 22:24:45 +0900
Subject: [PATCH 3/7] [refactor] Remove follow request store

---
 .../TimelineSpace/Contents/Favourites.vue     |  3 +-
 .../TimelineSpace/Contents/FollowRequests.vue | 55 +++++++++------
 src/renderer/store/TimelineSpace/Contents.ts  |  5 +-
 .../TimelineSpace/Contents/FollowRequests.ts  | 68 -------------------
 4 files changed, 37 insertions(+), 94 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/FollowRequests.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 2d6c5cc77e..2460b876cc 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -184,8 +184,9 @@ export default defineComponent({
     }
     const reload = async () => {
       store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
+      if (!client.value) return
       try {
-        const res = await client.value!.getFavourites({ limit: 20 })
+        const res = await client.value.getFavourites({ limit: 20 })
         favourites.value = res.data
         const link = parse(res.headers.link)
         if (link !== null && link.next) {
diff --git a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
index 21f43f4cc9..a726abd38a 100644
--- a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
+++ b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
@@ -7,13 +7,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, reactive } from 'vue'
+import { defineComponent, computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import User from '@/components/molecules/User.vue'
-import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/FollowRequests'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { MyWindow } from '~/src/types/global'
@@ -23,20 +22,21 @@ export default defineComponent({
   name: 'follow-requests',
   components: { User },
   setup() {
-    const space = 'TimelineSpace/Contents/FollowRequests'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
+    const userAgent = computed(() => store.state.App.userAgent)
 
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
-    const requests = computed(() => store.state.TimelineSpace.Contents.FollowRequests.requests)
+    const requests = ref<Array<Entity.Account>>([])
 
     onMounted(async () => {
       await initialize()
@@ -47,28 +47,41 @@ export default defineComponent({
       account.account = a
       account.server = s
 
-      await store.dispatch(`${space}/${ACTION_TYPES.FETCH_REQUESTS}`, account).catch(_ => {
-        ElMessage({
-          message: i18n.t('message.timeline_fetch_error'),
-          type: 'error'
-        })
-      })
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      const res = await client.value.getFollowRequests()
+      requests.value = res.data
     }
     const accept = (user: Entity.Account) => {
-      store.dispatch(`${space}/${ACTION_TYPES.ACCEPT_REQUEST}`, { user, account: account.account, server: account.server }).catch(_ => {
-        ElMessage({
-          message: i18n.t('message.follow_request_accept_error'),
-          type: 'error'
+      client.value
+        ?.acceptFollowRequest(user.id)
+        .then(() => {
+          client.value?.getFollowRequests().then(res => {
+            requests.value = res.data
+          })
+        })
+        .catch(err => {
+          console.error(err)
+          ElMessage({
+            message: i18n.t('message.follow_request_accept_error'),
+            type: 'error'
+          })
         })
-      })
     }
     const reject = (user: Entity.Account) => {
-      store.dispatch(`${space}/${ACTION_TYPES.REJECT_REQUEST}`, { user, account: account.account, server: account.server }).catch(_ => {
-        ElMessage({
-          message: i18n.t('message.follow_request_reject_error'),
-          type: 'error'
+      client.value
+        ?.rejectFollowRequest(user.id)
+        .then(() => {
+          client.value?.getFollowRequests().then(res => {
+            requests.value = res.data
+          })
+        })
+        .catch(err => {
+          console.error(err)
+          ElMessage({
+            message: i18n.t('message.follow_request_reject_error'),
+            type: 'error'
+          })
         })
-      })
     }
 
     return {
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 27bd847f77..b6a1d649a5 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -6,7 +6,6 @@ import Search, { SearchModuleState } from './Contents/Search'
 import Lists, { ListsModuleState } from './Contents/Lists'
 import Hashtag, { HashtagModuleState } from './Contents/Hashtag'
 import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
-import FollowRequests, { FollowRequestsState } from './Contents/FollowRequests'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 
@@ -22,7 +21,6 @@ type ContentsModule = {
   Local: LocalState
   Search: SearchModuleState
   Hashtag: HashtagModuleState
-  FollowRequests: FollowRequestsState
   Lists: ListsModuleState
 }
 
@@ -63,8 +61,7 @@ const Contents: Module<ContentsState, RootState> = {
     DirectMessages,
     Search,
     Lists,
-    Hashtag,
-    FollowRequests
+    Hashtag
   },
   mutations: mutations,
   actions: actions
diff --git a/src/renderer/store/TimelineSpace/Contents/FollowRequests.ts b/src/renderer/store/TimelineSpace/Contents/FollowRequests.ts
deleted file mode 100644
index 7c2d4d2e5e..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/FollowRequests.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { LocalAccount } from '~/src/types/localAccount'
-import { LocalServer } from '~/src/types/localServer'
-
-export type FollowRequestsState = {
-  requests: Array<Entity.Account>
-}
-
-const state = (): FollowRequestsState => ({
-  requests: []
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_REQUESTS: 'updateRequests'
-}
-
-const mutations: MutationTree<FollowRequestsState> = {
-  [MUTATION_TYPES.UPDATE_REQUESTS]: (state, accounts: Array<Entity.Account>) => {
-    state.requests = accounts
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_REQUESTS: 'fetchRequests',
-  ACCEPT_REQUEST: 'acceptRequest',
-  REJECT_REQUEST: 'rejectRequest'
-}
-
-const actions: ActionTree<FollowRequestsState, RootState> = {
-  [ACTION_TYPES.FETCH_REQUESTS]: async (
-    { commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Account>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getFollowRequests()
-    commit(MUTATION_TYPES.UPDATE_REQUESTS, res.data)
-    return res.data
-  },
-  [ACTION_TYPES.ACCEPT_REQUEST]: async (
-    { dispatch, rootState },
-    req: { user: Entity.Account; account: LocalAccount; server: LocalServer }
-  ) => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.acceptFollowRequest(req.user.id)
-    await dispatch(ACTION_TYPES.FETCH_REQUESTS, { account: req.account, server: req.server })
-    return res.data
-  },
-  [ACTION_TYPES.REJECT_REQUEST]: async (
-    { dispatch, rootState },
-    req: { user: Entity.Account; account: LocalAccount; server: LocalServer }
-  ) => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.rejectFollowRequest(req.user.id)
-    await dispatch(ACTION_TYPES.FETCH_REQUESTS, { action: req.account, server: req.server })
-    return res.data
-  }
-}
-
-const FollowRequests: Module<FollowRequestsState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default FollowRequests

From abcea8f333f58e997b504d64a1679f7f876112c8 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 29 Jan 2023 22:54:15 +0900
Subject: [PATCH 4/7] [refactor] Remove bookmarks store

---
 .../TimelineSpace/Contents/Bookmarks.vue      | 107 +++++++++------
 .../TimelineSpace/Contents/DirectMessages.vue |   5 -
 .../TimelineSpace/Contents/Local.vue          |  12 +-
 .../TimelineSpace/Contents/Notifications.vue  |  14 +-
 .../TimelineSpace/Contents/Public.vue         |   1 -
 src/renderer/components/utils/reloadable.ts   |  23 ----
 src/renderer/store/TimelineSpace/Contents.ts  |   3 -
 .../store/TimelineSpace/Contents/Bookmarks.ts | 123 ------------------
 8 files changed, 78 insertions(+), 210 deletions(-)
 delete mode 100644 src/renderer/components/utils/reloadable.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Bookmarks.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index f50307e5a0..5f66f3c1e7 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@@ -30,10 +30,9 @@ import { useStore } from '@/store'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Entity } from 'megalodon'
-import useReloadable from '@/components/utils/reloadable'
+import parse from 'parse-link-header'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import Toot from '@/components/organisms/Toot.vue'
-import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Bookmarks'
 import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
 import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -44,15 +43,14 @@ export default defineComponent({
   name: 'bookmarks',
   components: { Toot },
   setup() {
-    const space = 'TimelineSpace/Contents/Bookmarks'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
-    const { reloadable } = useReloadable(store, route, i18n)
 
     const focusedId = ref<string | null>(null)
     const heading = ref<boolean>(true)
     const scroller = ref<any>()
+    const loading = ref(false)
     const lazyLoading = ref(false)
     const { j, k, Ctrl_r } = useMagicKeys()
 
@@ -63,12 +61,15 @@ export default defineComponent({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
-    const bookmarks = computed(() => store.state.TimelineSpace.Contents.Bookmarks.bookmarks)
+    const bookmarks = ref<Array<Entity.Status>>([])
+    const nextMaxId = ref<string | null>(null)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
     const shortcutEnabled = computed(() => !modalOpened.value)
+    const userAgent = computed(() => store.state.App.userAgent)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@@ -76,18 +77,27 @@ export default defineComponent({
       account.server = s
 
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
-      store.commit(`TimelineSpace/Contents/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
-      store
-        .dispatch(`${space}/${ACTION_TYPES.FETCH_BOOKMARKS}`, account)
-        .catch(() => {
-          ElMessage({
-            message: i18n.t('message.bookmark_fetch_error'),
-            type: 'error'
-          })
-        })
-        .finally(() => {
-          store.commit(`TimelineSpace/Contents/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
+
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      loading.value = true
+      try {
+        const res = await client.value.getBookmarks({ limit: 20 })
+        bookmarks.value = res.data
+        const link = parse(res.headers.link)
+        if (link !== null && link.next) {
+          nextMaxId.value = link.next.max_id
+        } else {
+          nextMaxId.value = null
+        }
+      } catch (err) {
+        console.error(err)
+        ElMessage({
+          message: i18n.t('message.bookmark_fetch_error'),
+          type: 'error'
         })
+      } finally {
+        loading.value = false
+      }
     })
     watch(startReload, (newVal, oldVal) => {
       if (!oldVal && newVal) {
@@ -115,12 +125,23 @@ export default defineComponent({
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
           document.getElementById('scroller')!.scrollHeight - 10 &&
-        !lazyLoading.value
+        !lazyLoading.value &&
+        nextMaxId.value
       ) {
         lazyLoading.value = true
-        store
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_BOOKMARKS}`, account)
-          .catch(() => {
+        client.value
+          ?.getBookmarks({ limit: 20, max_id: nextMaxId.value })
+          .then(res => {
+            bookmarks.value = [...bookmarks.value, ...res.data]
+            const link = parse(res.headers.link)
+            if (link !== null && link.next) {
+              nextMaxId.value = link.next.max_id
+            } else {
+              nextMaxId.value = null
+            }
+          })
+          .catch(err => {
+            console.error(err)
             ElMessage({
               message: i18n.t('message.bookmark_fetch_error'),
               type: 'error'
@@ -130,7 +151,7 @@ export default defineComponent({
             lazyLoading.value = false
           })
       }
-      // for upper
+
       if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
         heading.value = false
       } else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
@@ -139,27 +160,40 @@ export default defineComponent({
     }
     const reload = async () => {
       store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
+      if (!client.value) return
       try {
-        await reloadable()
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_BOOKMARKS}`, account).catch(() => {
-          ElMessage({
-            message: i18n.t('message.bookmark_fetch_error'),
-            type: 'error'
-          })
-        })
+        const res = await client.value.getBookmarks({ limit: 20 })
+        bookmarks.value = res.data
+        const link = parse(res.headers.link)
+        if (link !== null && link.next) {
+          nextMaxId.value = link.next.max_id
+        } else {
+          nextMaxId.value = null
+        }
       } finally {
         store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
       }
     }
     const updateToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
-    }
-    const deleteToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
+      bookmarks.value = bookmarks.value.map(status => {
+        if (status.id === message.id) {
+          return message
+        } else if (status.reblog && status.reblog.id === message.id) {
+          return Object.assign(status, {
+            reblog: message
+          })
+        }
+        return status
+      })
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
+    const deleteToot = (id: string) => {
+      bookmarks.value = bookmarks.value.filter(status => {
+        if (status.reblog !== null && status.reblog.id === id) {
+          return false
+        } else {
+          return status.id !== id
+        }
+      })
     }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
@@ -188,7 +222,6 @@ export default defineComponent({
       deleteToot,
       focusToot,
       heading,
-      upper,
       account
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index 84465c8f34..ddaf6e185a 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -137,10 +137,6 @@ export default defineComponent({
         store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: id, accountId: account.account.id })
       }
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = timeline.value[0].uri + timeline.value[0].id
@@ -168,7 +164,6 @@ export default defineComponent({
       deleteToot,
       focusToot,
       heading,
-      upper,
       account
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 020a37b154..dbfc6acf9b 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -11,9 +11,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
-            v-on:delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @update="updateToot"
+            @delete="deleteToot"
+            @select-toot="focusToot(item)"
           >
           </toot>
         </DynamicScrollerItem>
@@ -145,10 +145,6 @@ export default defineComponent({
         store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, { statusId: message.id, accountId: account.account.id })
       }
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = timeline.value[0].uri + timeline.value[0].id
@@ -175,8 +171,6 @@ export default defineComponent({
       updateToot,
       deleteToot,
       focusToot,
-      heading,
-      upper,
       account
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 5fd99f25a2..85feb71a90 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -17,8 +17,8 @@
               :filters="filters"
               :account="account.account"
               :server="account.server"
-              v-on:update="updateToot"
-              @selectNotification="focusNotification(item)"
+              @update="updateToot"
+              @select-notification="focusNotification(item)"
             >
             </notification>
           </DynamicScrollerItem>
@@ -180,10 +180,7 @@ export default defineComponent({
           }, 500)
         })
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
+
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
         focusedId.value = notifications.value[0].id
@@ -213,9 +210,8 @@ export default defineComponent({
       focusNext,
       focusPrev,
       focusNotification,
-      heading,
-      upper,
-      account
+      account,
+      scroller
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index f4a9b461d9..6185bafc1f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -208,7 +208,6 @@ export default defineComponent({
       updateToot,
       deleteToot,
       focusToot,
-      heading,
       account,
       backgroundColor
     }
diff --git a/src/renderer/components/utils/reloadable.ts b/src/renderer/components/utils/reloadable.ts
deleted file mode 100644
index 54f122c8bd..0000000000
--- a/src/renderer/components/utils/reloadable.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Store } from 'vuex'
-import { RootState } from '@/store'
-import { RouteLocationNormalizedLoaded } from 'vue-router'
-import { i18n } from 'i18next'
-import { ElMessage } from 'element-plus'
-import { ACTION_TYPES } from '@/store/TimelineSpace'
-
-export default function useReloadable(store: Store<RootState>, route: RouteLocationNormalizedLoaded, i18next: i18n) {
-  async function reloadable() {
-    const account = await store.dispatch(`TimelineSpace/${ACTION_TYPES.LOCAL_ACCOUNT}`, route.params.id).catch(err => {
-      ElMessage({
-        message: i18next.t<string>('message.account_load_error'),
-        type: 'error'
-      })
-      throw err
-    })
-    return account
-  }
-
-  return {
-    reloadable
-  }
-}
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index b6a1d649a5..45ecdf118e 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -1,6 +1,5 @@
 import Home, { HomeState } from './Contents/Home'
 import Notifications, { NotificationsState } from './Contents/Notifications'
-import Bookmarks, { BookmarksState } from './Contents/Bookmarks'
 import Local, { LocalState } from './Contents/Local'
 import Search, { SearchModuleState } from './Contents/Search'
 import Lists, { ListsModuleState } from './Contents/Lists'
@@ -17,7 +16,6 @@ type ContentsModule = {
   Home: HomeState
   Notifications: NotificationsState
   DirectMessages: DirectMessagesState
-  Bookmarks: BookmarksState
   Local: LocalState
   Search: SearchModuleState
   Hashtag: HashtagModuleState
@@ -56,7 +54,6 @@ const Contents: Module<ContentsState, RootState> = {
   modules: {
     Home,
     Notifications,
-    Bookmarks,
     Local,
     DirectMessages,
     Search,
diff --git a/src/renderer/store/TimelineSpace/Contents/Bookmarks.ts b/src/renderer/store/TimelineSpace/Contents/Bookmarks.ts
deleted file mode 100644
index a5a00c6c0c..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Bookmarks.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import parse from 'parse-link-header'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { LocalAccount } from '~src/types/localAccount'
-import { LocalServer } from '~src/types/localServer'
-
-export type BookmarksState = {
-  bookmarks: Array<Entity.Status>
-  maxId: string | null
-}
-
-const state = (): BookmarksState => ({
-  bookmarks: [],
-  maxId: null
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_BOOKMARKS: 'updateBookmarks',
-  INSERT_BOOKMARKS: 'insertBookmarks',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot',
-  CHANGE_MAX_ID: 'changeMaxId'
-}
-
-const mutations: MutationTree<BookmarksState> = {
-  [MUTATION_TYPES.UPDATE_BOOKMARKS]: (state, bookmarks: Array<Entity.Status>) => {
-    state.bookmarks = bookmarks
-  },
-  [MUTATION_TYPES.INSERT_BOOKMARKS]: (state, bookmarks: Array<Entity.Status>) => {
-    state.bookmarks = state.bookmarks.concat(bookmarks)
-  },
-  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
-    state.bookmarks = state.bookmarks.map(toot => {
-      if (toot.id === message.id) {
-        return message
-      } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-        // When user reblog/favourite a reblogged toot, target message is a original toot.
-        // So, a message which is received now is original toot.
-        const reblog = {
-          reblog: message
-        }
-        return Object.assign(toot, reblog)
-      } else {
-        return toot
-      }
-    })
-  },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, message: Entity.Status) => {
-    state.bookmarks = state.bookmarks.filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === message.id) {
-        return false
-      } else {
-        return toot.id !== message.id
-      }
-    })
-  },
-  [MUTATION_TYPES.CHANGE_MAX_ID]: (state, id: string | null) => {
-    state.maxId = id
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_BOOKMARKS: 'fetchBookmarks',
-  LAZY_FETCH_BOOKMARKS: 'lazyFetchBookmarks'
-}
-
-const actions: ActionTree<BookmarksState, RootState> = {
-  [ACTION_TYPES.FETCH_BOOKMARKS]: async (
-    { commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getBookmarks({ limit: 20 })
-    commit(MUTATION_TYPES.UPDATE_BOOKMARKS, res.data)
-    // Parse link header
-    try {
-      const link = parse(res.headers.link)
-      if (link !== null && link.next) {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
-      } else {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      }
-    } catch (err) {
-      commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      console.error(err)
-    }
-    return res.data
-  },
-  [ACTION_TYPES.LAZY_FETCH_BOOKMARKS]: async (
-    { state, commit, rootState },
-    req: { account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status> | null> => {
-    if (!state.maxId) {
-      return Promise.resolve(null)
-    }
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getFavourites({ max_id: state.maxId, limit: 20 })
-    commit(MUTATION_TYPES.INSERT_BOOKMARKS, res.data)
-    // Parse link header
-    try {
-      const link = parse(res.headers.link)
-      if (link !== null && link.next) {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
-      } else {
-        commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      }
-    } catch (err) {
-      commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
-      console.error(err)
-    }
-    return res.data
-  }
-}
-
-const Bookmark: Module<BookmarksState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default Bookmark

From 3a6d5fe687afab8e6fc631cc3667912be76e1c1f Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 30 Jan 2023 00:16:55 +0900
Subject: [PATCH 5/7] [refactor] Remove tag store

---
 .../TimelineSpace/Contents/Hashtag/List.vue   |  22 +--
 .../TimelineSpace/Contents/Hashtag/Tag.vue    | 132 +++++++++---------
 src/renderer/store/TimelineSpace/Contents.ts  |   5 +-
 .../store/TimelineSpace/Contents/Hashtag.ts   |  26 ----
 .../TimelineSpace/Contents/Hashtag/List.ts    |  53 -------
 .../TimelineSpace/Contents/Hashtag/Tag.ts     | 129 -----------------
 6 files changed, 81 insertions(+), 286 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Hashtag.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
index 0dba2e3839..3ea9ed7347 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
@@ -2,7 +2,7 @@
   <div id="list">
     <table class="tag-list">
       <tbody>
-        <tr v-for="tag in tags" v-bind:key="tag._id" @click.stop.prevent="openTimeline(tag.tagName)">
+        <tr v-for="tag in tags" :key="tag._id" @click.stop.prevent="openTimeline(tag.tagName)">
           <td>
             {{ tag.tagName }}
           </td>
@@ -18,31 +18,31 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted } from 'vue'
+import { defineComponent, computed, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useStore } from '@/store'
-import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/List'
 import { LocalTag } from '~/src/types/localTag'
+import { MyWindow } from '~/src/types/global'
 
 export default defineComponent({
   name: 'list',
   setup() {
-    const space = 'TimelineSpace/Contents/Hashtag/List'
-    const store = useStore()
     const route = useRoute()
     const router = useRouter()
-    const tags = computed(() => store.state.TimelineSpace.Contents.Hashtag.List.tags)
+    const win = (window as any) as MyWindow
+    const id = computed(() => parseInt(route.params.id as string))
+    const tags = ref<Array<LocalTag>>([])
 
-    onMounted(() => {
-      store.dispatch(`${space}/${ACTION_TYPES.LIST_TAGS}`)
+    onMounted(async () => {
+      tags.value = await win.ipcRenderer.invoke('list-hashtags', id.value)
     })
     const openTimeline = (tagName: string) => {
       router.push({
         path: `/${route.params.id}/hashtag/${tagName}`
       })
     }
-    const deleteTag = (tag: LocalTag) => {
-      store.dispatch(`${space}/${ACTION_TYPES.REMOVE_TAG}`, tag)
+    const deleteTag = async (tag: LocalTag) => {
+      await win.ipcRenderer.invoke('remove-hashtag', tag)
+      tags.value = await win.ipcRenderer.invoke('list-hashtags', id.value)
     }
 
     return {
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 1e4d2fcadd..4521ea377b 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -1,6 +1,7 @@
 <template>
   <div name="tag" class="tag-timeline">
-    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <DynamicScroller :items="statuses" :min-item-size="86" id="scroller" class="scroller" ref="scroller" v-else>
       <template #default="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -11,9 +12,9 @@
             :filters="[]"
             :account="account.account"
             :server="account.server"
-            v-on:update="updateToot"
-            v-on:delete="deleteToot"
-            @selectToot="focusToot(item)"
+            @update="updateToot"
+            @delete="deleteToot"
+            @select-toot="focusToot(item)"
           >
           </toot>
         </DynamicScrollerItem>
@@ -27,16 +28,12 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, wat
 import { logicAnd } from '@vueuse/math'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
-import useReloadable from '@/components/utils/reloadable'
-import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
 import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
-import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
-import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Hashtag/Tag'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { MyWindow } from '~/src/types/global'
@@ -46,11 +43,9 @@ export default defineComponent({
   components: { Toot },
   props: ['tag'],
   setup(props) {
-    const space = 'TimelineSpace/Contents/Hashtag/Tag'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
-    const { reloadable } = useReloadable(store, route, i18n)
     const { j, k, Ctrl_r } = useMagicKeys()
 
     const win = (window as any) as MyWindow
@@ -60,34 +55,39 @@ export default defineComponent({
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>(null)
     const lazyLoading = ref(false)
+    const loading = ref(false)
     const heading = ref(true)
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
-    const timeline = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.timeline)
+    const statuses = ref<Array<Entity.Status>>([])
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
-    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
     const shortcutEnabled = computed(() => !modalOpened.value)
+    const userAgent = computed(() => store.state.App.userAgent)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
       account.account = a
       account.server = s
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
 
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+      loading.value = true
       load(tag.value).finally(() => {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+        loading.value = false
       })
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
     })
     watch(tag, (newTag, _oldTag) => {
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+      loading.value = true
       reset()
       load(newTag).finally(() => {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+        loading.value = false
       })
     })
     watch(startReload, (newVal, oldVal) => {
@@ -106,7 +106,7 @@ export default defineComponent({
     })
     whenever(logicAnd(j, shortcutEnabled), () => {
       if (focusedId.value === null) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
       } else {
         focusNext()
       }
@@ -119,24 +119,32 @@ export default defineComponent({
     })
 
     onBeforeUnmount(() => {
-      store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
       reset()
     })
 
     const load = async (tag: string) => {
-      await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, { tag: tag, account: account.account, server: account.server }).catch(() => {
+      if (!client.value) return
+      try {
+        const res = await client.value.getTagTimeline(tag, { limit: 20 })
+        statuses.value = res.data
+      } catch (err) {
+        console.error(err)
         ElMessage({
           message: i18n.t('message.timeline_fetch_error'),
           type: 'error'
         })
+      }
+      if (!account.account) return
+      win.ipcRenderer.on(`update-tag-streamings-${account.account.id}`, (_, update: Entity.Status) => {
+        statuses.value = [update, ...statuses.value]
       })
-      store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, { tag: tag, account: account.account }).catch(() => {
-        ElMessage({
-          message: i18n.t('message.start_streaming_error'),
-          type: 'error'
-        })
+      win.ipcRenderer.on(`delete-tag-streamings-${account.account.id}`, (_, id: string) => {
+        deleteToot(id)
+      })
+      win.ipcRenderer.send('start-tag-streaming', {
+        tag: encodeURIComponent(tag),
+        accountId: account.account.id
       })
-      return true
     }
     const reset = () => {
       heading.value = true
@@ -152,13 +160,12 @@ export default defineComponent({
           document.getElementById('scroller')!.scrollHeight - 10 &&
         !lazyLoading.value
       ) {
+        const lastStatus = statuses.value[statuses.value.length - 1]
         lazyLoading.value = true
-        store
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
-            tag: tag.value,
-            status: timeline.value[timeline.value.length - 1],
-            account: account.account,
-            server: account.server
+        client.value
+          ?.getTagTimeline(tag.value, { max_id: lastStatus.id, limit: 20 })
+          .then(res => {
+            statuses.value = [...statuses.value, ...res.data]
           })
           .catch(() => {
             ElMessage({
@@ -177,49 +184,47 @@ export default defineComponent({
         heading.value = true
       }
     }
-    const updateToot = (toot: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, toot)
+    const updateToot = (message: Entity.Status) => {
+      statuses.value = statuses.value.map(status => {
+        if (status.id === message.id) {
+          return message
+        } else if (status.reblog && status.reblog.id === message.id) {
+          return Object.assign(status, {
+            reblog: message
+          })
+        }
+        return status
+      })
     }
-    const deleteToot = (toot: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, toot.id)
+    const deleteToot = (id: string) => {
+      statuses.value = statuses.value.filter(status => {
+        if (status.reblog !== null && status.reblog.id === id) {
+          return false
+        } else {
+          return status.id !== id
+        }
+      })
     }
     const reload = async () => {
-      store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
+      loading.value = true
       try {
-        await reloadable()
-        await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH}`, tag.value).catch(() => {
-          ElMessage({
-            message: i18n.t('message.timeline_fetch_error'),
-            type: 'error'
-          })
-        })
-        store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, tag.value).catch(() => {
-          ElMessage({
-            message: i18n.t('message.start_streaming_error'),
-            type: 'error'
-          })
-        })
+        await load(tag.value)
       } finally {
-        store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
+        loading.value = false
       }
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
-    }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
-      } else if (currentFocusedIndex.value < timeline.value.length) {
-        focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
+      } else if (currentFocusedIndex.value < statuses.value.length) {
+        focusedId.value = statuses.value[currentFocusedIndex.value + 1].uri + statuses.value[currentFocusedIndex.value + 1].id
       }
     }
     const focusPrev = () => {
       if (currentFocusedIndex.value === 0) {
         focusedId.value = null
       } else if (currentFocusedIndex.value > 0) {
-        focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
+        focusedId.value = statuses.value[currentFocusedIndex.value - 1].uri + statuses.value[currentFocusedIndex.value - 1].id
       }
     }
     const focusToot = (message: Entity.Status) => {
@@ -227,7 +232,7 @@ export default defineComponent({
     }
 
     return {
-      timeline,
+      statuses,
       scroller,
       focusedId,
       modalOpened,
@@ -235,8 +240,9 @@ export default defineComponent({
       deleteToot,
       focusToot,
       heading,
-      upper,
-      account
+      account,
+      loading,
+      backgroundColor
     }
   }
 })
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 45ecdf118e..4bf87ba9d6 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -3,7 +3,6 @@ import Notifications, { NotificationsState } from './Contents/Notifications'
 import Local, { LocalState } from './Contents/Local'
 import Search, { SearchModuleState } from './Contents/Search'
 import Lists, { ListsModuleState } from './Contents/Lists'
-import Hashtag, { HashtagModuleState } from './Contents/Hashtag'
 import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
@@ -18,7 +17,6 @@ type ContentsModule = {
   DirectMessages: DirectMessagesState
   Local: LocalState
   Search: SearchModuleState
-  Hashtag: HashtagModuleState
   Lists: ListsModuleState
 }
 
@@ -57,8 +55,7 @@ const Contents: Module<ContentsState, RootState> = {
     Local,
     DirectMessages,
     Search,
-    Lists,
-    Hashtag
+    Lists
   },
   mutations: mutations,
   actions: actions
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag.ts
deleted file mode 100644
index b88d674480..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import List, { ListState } from './Hashtag/List'
-import Tag, { TagState } from './Hashtag/Tag'
-import { Module } from 'vuex'
-import { RootState } from '@/store'
-
-export type HashtagState = {}
-
-type HashtagModule = {
-  List: ListState
-  Tag: TagState
-}
-
-export type HashtagModuleState = HashtagModule & HashtagState
-
-const state = (): HashtagState => ({})
-
-const Hashtag: Module<HashtagState, RootState> = {
-  namespaced: true,
-  modules: {
-    List,
-    Tag
-  },
-  state: state
-}
-
-export default Hashtag
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
deleted file mode 100644
index f20658f9e8..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/List.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { LocalTag } from '~/src/types/localTag'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { MyWindow } from '~/src/types/global'
-import { toRaw } from 'vue'
-
-const win = (window as any) as MyWindow
-
-export type ListState = {
-  tags: Array<LocalTag>
-}
-
-const state = (): ListState => ({
-  tags: []
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_TAGS: 'updateTags'
-}
-
-const mutations: MutationTree<ListState> = {
-  [MUTATION_TYPES.UPDATE_TAGS]: (state, tags: Array<LocalTag>) => {
-    state.tags = tags
-  }
-}
-
-export const ACTION_TYPES = {
-  LIST_TAGS: 'listTags',
-  REMOVE_TAG: 'removeTag'
-}
-
-const actions: ActionTree<ListState, RootState> = {
-  [ACTION_TYPES.LIST_TAGS]: async ({ rootState, commit }) => {
-    const tags: Array<LocalTag> = await win.ipcRenderer.invoke('list-hashtags', rootState.TimelineSpace.account!.id)
-    commit(MUTATION_TYPES.UPDATE_TAGS, tags)
-    return tags
-  },
-  [ACTION_TYPES.REMOVE_TAG]: async ({ dispatch }, tag: LocalTag) => {
-    await win.ipcRenderer.invoke('remove-hashtag', toRaw(tag))
-    dispatch(ACTION_TYPES.LIST_TAGS)
-    dispatch('TimelineSpace/SideMenu/listTags', {}, { root: true })
-    return 'deleted'
-  }
-}
-
-const List: Module<ListState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default List
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
deleted file mode 100644
index e7feaf8230..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { MyWindow } from '~/src/types/global'
-import { LocalAccount } from '~src/types/localAccount'
-import { LocalServer } from '~src/types/localServer'
-
-const win = (window as any) as MyWindow
-
-export type TagState = {
-  timeline: Array<Entity.Status>
-}
-
-const state = (): TagState => ({
-  timeline: []
-})
-
-export const MUTATION_TYPES = {
-  APPEND_TIMELINE: 'appendTimeline',
-  REPLACE_TIMELINE: 'replaceTimeline',
-  INSERT_TIMELINE: 'insertTimeline',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot'
-}
-
-const mutations: MutationTree<TagState> = {
-  [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
-    state.timeline = [update].concat(state.timeline)
-  },
-  [MUTATION_TYPES.REPLACE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
-    state.timeline = timeline
-  },
-  [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
-    state.timeline = state.timeline.concat(messages)
-  },
-  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
-    state.timeline = state.timeline.map(toot => {
-      if (toot.id === message.id) {
-        return message
-      } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-        // When user reblog/favourite a reblogged toot, target message is a original toot.
-        // So, a message which is received now is original toot.
-        const reblog = {
-          reblog: message
-        }
-        return Object.assign(toot, reblog)
-      } else {
-        return toot
-      }
-    })
-  },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, id: string) => {
-    state.timeline = state.timeline.filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === id) {
-        return false
-      } else {
-        return toot.id !== id
-      }
-    })
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH: 'fetch',
-  START_STREAMING: 'startStreaming',
-  STOP_STREAMING: 'stopStreaming',
-  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
-}
-
-const actions: ActionTree<TagState, RootState> = {
-  [ACTION_TYPES.FETCH]: async (
-    { commit, rootState },
-    req: { tag: string; account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getTagTimeline(encodeURIComponent(req.tag), { limit: 20 })
-    commit(MUTATION_TYPES.REPLACE_TIMELINE, res.data)
-    return res.data
-  },
-  [ACTION_TYPES.START_STREAMING]: ({ commit }, req: { tag: string; account: LocalAccount }) => {
-    win.ipcRenderer.on(`update-tag-streamings-${req.account.id}`, (_, update: Entity.Status) => {
-      commit(MUTATION_TYPES.APPEND_TIMELINE, update)
-    })
-    win.ipcRenderer.on(`delete-tag-streamings-${req.account.id}`, (_, id: string) => {
-      commit(MUTATION_TYPES.DELETE_TOOT, id)
-    })
-    // @ts-ignore
-    return new Promise((resolve, reject) => {
-      // eslint-disable-line no-unused-vars
-      win.ipcRenderer.send('start-tag-streaming', {
-        tag: encodeURIComponent(req.tag),
-        accountId: req.account.id
-      })
-    })
-  },
-  [ACTION_TYPES.STOP_STREAMING]: ({ rootState }) => {
-    return new Promise(resolve => {
-      if (rootState.TimelineSpace.account) {
-        win.ipcRenderer.removeAllListeners(`update-tag-streamings-${rootState.TimelineSpace.account.id}`)
-        win.ipcRenderer.removeAllListeners(`update-tag-streamings-${rootState.TimelineSpace.account.id}`)
-      }
-      resolve(null)
-    })
-  },
-  [ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
-    { commit, rootState },
-    req: {
-      tag: string
-      status: Entity.Status
-      account: LocalAccount
-      server: LocalServer
-    }
-  ): Promise<Array<Entity.Status> | null> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    return client.getTagTimeline(req.tag, { max_id: req.status.id, limit: 20 }).then(res => {
-      commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
-      return res.data
-    })
-  }
-}
-
-const Tag: Module<TagState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default Tag

From d2a1c4ac52667e24967aa55977667fb1631f8fd4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 30 Jan 2023 01:12:35 +0900
Subject: [PATCH 6/7] [refactor] Remove list timeline store

---
 .../TimelineSpace/Contents/Bookmarks.vue      |   9 +-
 .../TimelineSpace/Contents/Lists/Edit.vue     |  54 ++++---
 .../TimelineSpace/Contents/Lists/Index.vue    |  76 ++++++----
 .../TimelineSpace/Contents/Lists/Show.vue     | 143 +++++++++---------
 .../TimelineSpace/Modals/AddListMember.vue    |   3 -
 src/renderer/store/TimelineSpace/Contents.ts  |   5 +-
 .../store/TimelineSpace/Contents/Lists.ts     |  27 ----
 .../TimelineSpace/Contents/Lists/Edit.ts      |  57 -------
 .../TimelineSpace/Contents/Lists/Index.ts     |  69 ---------
 .../TimelineSpace/Contents/Lists/Show.ts      | 122 ---------------
 10 files changed, 160 insertions(+), 405 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Lists.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Lists/Index.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Lists/Show.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index 5f66f3c1e7..f71e31dcf8 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="bookmarks">
-    <div></div>
-    <DynamicScroller :items="bookmarks" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <DynamicScroller :items="bookmarks" :min-item-size="60" id="scroller" class="scroller" ref="scroller" v-else>
       <template #default="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -70,6 +70,7 @@ export default defineComponent({
     const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
     const shortcutEnabled = computed(() => !modalOpened.value)
     const userAgent = computed(() => store.state.App.userAgent)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@@ -222,7 +223,9 @@ export default defineComponent({
       deleteToot,
       focusToot,
       heading,
-      account
+      account,
+      loading,
+      backgroundColor
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
index 9cb44ea8b6..35cf127d0f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
@@ -12,18 +12,20 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, toRefs } from 'vue'
+import { computed, defineComponent, onMounted, toRefs, ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import User from '@/components/molecules/User.vue'
-import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
-import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
 import {
   MUTATION_TYPES as ADD_LIST_MEMBER_MUTATION,
   ACTION_TYPES as ADD_LIST_MEMBER_ACTION
 } from '@/store/TimelineSpace/Modals/AddListMember'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'edit-list',
@@ -31,43 +33,55 @@ export default defineComponent({
   components: { User },
   setup(props) {
     const { list_id } = toRefs(props)
-    const space = 'TimelineSpace/Contents/Lists/Edit'
     const store = useStore()
+    const route = useRoute()
     const i18n = useI18next()
 
-    const members = computed(() => store.state.TimelineSpace.Contents.Lists.Edit.members)
+    const win = (window as any) as MyWindow
+    const id = computed(() => parseInt(route.params.id as string))
+
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+    const client = ref<MegalodonInterface | null>(null)
+
+    const members = ref<Array<Entity.Account>>([])
+    const userAgent = computed(() => store.state.App.userAgent)
 
     onMounted(async () => {
-      await init()
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
+
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      await load()
     })
-    const init = async () => {
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+
+    const load = async () => {
+      if (!client.value) return
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
+        const res = await client.value.getAccountsInList(list_id.value, { limit: 0 })
+        members.value = res.data
       } catch (err) {
+        console.error(err)
         ElMessage({
           message: i18n.t('message.members_fetch_error'),
           type: 'error'
         })
-      } finally {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
       }
     }
+
     const removeAccount = async (account: Entity.Account) => {
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
+      if (!client.value) return
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_ACCOUNT}`, {
-          account: account,
-          listId: list_id.value
-        })
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
+        await client.value.deleteAccountsFromList(list_id.value, [account.id])
+        await load()
       } catch (err) {
         ElMessage({
           message: i18n.t('message.remove_user_error'),
           type: 'error'
         })
-      } finally {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
       }
     }
     const addAccount = () => {
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index 7d1dad29d4..b1a9a68029 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="lists">
-    <div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <div class="new-list" v-else>
       <el-form :inline="true">
         <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
         <el-button link class="create" @click="createList">
@@ -25,61 +26,78 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useI18next } from 'vue3-i18next'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
-import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
-import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Index'
-import { ACTION_TYPES as SIDE_MENU_ACTION } from '@/store/TimelineSpace/SideMenu'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
 
 export default defineComponent({
   name: 'lists',
   setup() {
-    const space = 'TimelineSpace/Contents/Lists/Index'
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
     const i18n = useI18next()
 
     const title = ref<string>('')
-    const creating = ref<boolean>(false)
+    const loading = ref<boolean>(false)
 
-    const lists = computed(() => store.state.TimelineSpace.Contents.Lists.Index.lists)
-    const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
+    const lists = ref<Array<Entity.List>>([])
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
+    const userAgent = computed(() => store.state.App.userAgent)
+
+    const win = (window as any) as MyWindow
     const id = computed(() => route.params.id)
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+    const client = ref<MegalodonInterface | null>(null)
 
-    onMounted(() => {
-      store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
-      fetch().finally(() => {
-        store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
-      })
+    onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
+
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      loading.value = true
+      await load().finally(() => (loading.value = false))
     })
 
-    const fetch = async () => {
-      return store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`).catch(() => {
+    const load = async () => {
+      if (!client.value) return
+      try {
+        const res = await client.value.getLists()
+        lists.value = res.data
+      } catch (err) {
+        console.error(err)
         ElMessage({
           message: i18n.t('message.lists_fetch_error'),
           type: 'error'
         })
-      })
+      }
     }
+
     const createList = async () => {
-      creating.value = true
+      if (!client.value) return
+      loading.value = true
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.CREATE_LIST}`, title.value)
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
+        await client.value.createList(title.value)
+        await load()
       } catch (err) {
+        console.error(err)
         ElMessage({
           message: i18n.t('message.list_create_error'),
           type: 'error'
         })
       } finally {
-        creating.value = false
+        loading.value = false
       }
-      await store.dispatch(`TimelineSpace/SideMenu/${SIDE_MENU_ACTION.FETCH_LISTS}`)
     }
     const edit = (list: Entity.List) => {
       return router.push(`/${id.value}/lists/${list.id}/edit`)
@@ -89,19 +107,19 @@ export default defineComponent({
         confirmButtonText: i18n.t('lists.index.delete.confirm.ok'),
         cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'),
         type: 'warning'
+      }).then(async () => {
+        if (!client.value) return
+        await client.value.deleteList(list.id)
+        await load()
       })
-        .then(() => {
-          store.dispatch(`${space}/${ACTION_TYPES.DELETE_LIST}`, list)
-        })
-        .catch(() => {})
     }
 
     return {
       id,
-      creating,
+      loading,
       title,
       lists,
-      loadingBackground,
+      backgroundColor,
       createList,
       edit,
       del
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index aa53186b4a..e2cfcbdf14 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -1,6 +1,7 @@
 <template>
   <div name="list" class="list-timeline">
-    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
+    <div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
+    <DynamicScroller :items="statuses" :min-item-size="86" id="scroller" class="scroller" ref="scroller" v-else>
       <template #default="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -23,18 +24,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, toRefs, ref, computed, onMounted, watch, onBeforeUnmount, onUnmounted, reactive } from 'vue'
+import { defineComponent, toRefs, ref, computed, onMounted, watch, onUnmounted, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
-import { Entity } from 'megalodon'
+import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
-import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
 import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
-import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Show'
-import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { MyWindow } from '~/src/types/global'
@@ -45,7 +43,6 @@ export default defineComponent({
   props: ['list_id'],
   components: { Toot },
   setup(props) {
-    const space = 'TimelineSpace/Contents/Lists/Show'
     const store = useStore()
     const route = useRoute()
     const i18n = useI18next()
@@ -58,17 +55,21 @@ export default defineComponent({
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>(null)
     const lazyLoading = ref<boolean>(false)
+    const loading = ref(false)
     const heading = ref<boolean>(true)
     const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
       account: null,
       server: null
     })
+    const client = ref<MegalodonInterface | null>(null)
 
-    const timeline = computed(() => store.state.TimelineSpace.Contents.Lists.Show.timeline)
+    const statuses = ref<Array<Entity.Status>>([])
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
-    const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
+    const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
     const shortcutEnabled = computed(() => !modalOpened.value)
+    const userAgent = computed(() => store.state.App.userAgent)
+    const backgroundColor = computed(() => store.state.App.theme.background_color)
 
     onMounted(async () => {
       const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@@ -76,15 +77,18 @@ export default defineComponent({
       account.server = s
 
       document.getElementById('scroller')?.addEventListener('scroll', onScroll)
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
-      load().finally(() => {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
-      })
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+      loading.value = true
+      try {
+        await load(list_id.value)
+      } finally {
+        loading.value = false
+      }
     })
-    watch(list_id, () => {
-      store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
-      load().finally(() => {
-        store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
+    watch(list_id, id => {
+      loading.value = true
+      load(id).finally(() => {
+        loading.value = false
       })
     })
     watch(startReload, (newVal, oldVal) => {
@@ -103,7 +107,7 @@ export default defineComponent({
     })
     whenever(logicAnd(j, shortcutEnabled), () => {
       if (focusedId.value === null) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
       } else {
         focusNext()
       }
@@ -115,9 +119,6 @@ export default defineComponent({
       reload()
     })
 
-    onBeforeUnmount(() => {
-      store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
-    })
     onUnmounted(() => {
       heading.value = true
       const el = document.getElementById('scroller')
@@ -127,42 +128,42 @@ export default defineComponent({
       }
     })
 
-    const load = async () => {
-      await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
+    const load = async (id: string) => {
+      if (!client.value) return
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, {
-          listID: list_id.value,
-          account: account.account,
-          server: account.server
-        })
+        const res = await client.value.getListTimeline(id, { limit: 20 })
+        statuses.value = res.data
       } catch (err) {
+        console.error(err)
         ElMessage({
           message: i18n.t('message.timeline_fetch_error'),
           type: 'error'
         })
       }
-      store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, { listID: list_id.value, account: account.account }).catch(() => {
-        ElMessage({
-          message: i18n.t('message.start_streaming_error'),
-          type: 'error'
-        })
+      if (!account.account) return
+      win.ipcRenderer.on(`update-list-streamings-${account.account.id}`, (_, update: Entity.Status) => {
+        statuses.value = [update, ...statuses.value]
+      })
+      win.ipcRenderer.on(`delete-list-streamings-${account.account.id}`, (_, id: string) => {
+        deleteToot(id)
+      })
+
+      win.ipcRenderer.send('start-list-streaming', {
+        listId: id,
+        accountId: account.account.id
       })
-      return 'started'
     }
+
     const onScroll = (event: Event) => {
       if (
         (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
           document.getElementById('scroller')!.scrollHeight - 10 &&
-        !lazyLoading
+        !lazyLoading.value
       ) {
+        const lastStatus = statuses.value[statuses.value.length - 1]
         lazyLoading.value = true
-        store
-          .dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
-            list_id: list_id.value,
-            status: timeline.value[timeline.value.length - 1],
-            account: account.account,
-            server: account.server
-          })
+        client.value
+          ?.getListTimeline(list_id.value, { max_id: lastStatus.id, limit: 20 })
           .catch(() => {
             ElMessage({
               message: i18n.t('message.timeline_fetch_error'),
@@ -181,47 +182,46 @@ export default defineComponent({
       }
     }
     const reload = async () => {
-      store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
+      loading.value = true
       try {
-        await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
-        await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, list_id.value).catch(() => {
-          ElMessage({
-            message: i18n.t('message.timeline_fetch_error'),
-            type: 'error'
-          })
-        })
-        store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, list_id.value).catch(() => {
-          ElMessage({
-            message: i18n.t('message.start_streaming_error'),
-            type: 'error'
-          })
-        })
+        await load(list_id.value)
       } finally {
-        store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
+        loading.value = false
       }
     }
     const updateToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
-    }
-    const deleteToot = (message: Entity.Status) => {
-      store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
+      statuses.value = statuses.value.map(status => {
+        if (status.id === message.id) {
+          return message
+        } else if (status.reblog && status.reblog.id === message.id) {
+          return Object.assign(status, {
+            reblog: message
+          })
+        }
+        return status
+      })
     }
-    const upper = () => {
-      scroller.value.scrollToItem(0)
-      focusedId.value = null
+    const deleteToot = (id: string) => {
+      statuses.value = statuses.value.filter(status => {
+        if (status.reblog !== null && status.reblog.id === id) {
+          return false
+        } else {
+          return status.id !== id
+        }
+      })
     }
     const focusNext = () => {
       if (currentFocusedIndex.value === -1) {
-        focusedId.value = timeline.value[0].uri + timeline.value[0].id
-      } else if (currentFocusedIndex.value < timeline.value.length) {
-        focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
+        focusedId.value = statuses.value[0].uri + statuses.value[0].id
+      } else if (currentFocusedIndex.value < statuses.value.length) {
+        focusedId.value = statuses.value[currentFocusedIndex.value + 1].uri + statuses.value[currentFocusedIndex.value + 1].id
       }
     }
     const focusPrev = () => {
       if (currentFocusedIndex.value === 0) {
         focusedId.value = null
       } else if (currentFocusedIndex.value > 0) {
-        focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
+        focusedId.value = statuses.value[currentFocusedIndex.value - 1].uri + statuses.value[currentFocusedIndex.value - 1].id
       }
     }
     const focusToot = (message: Entity.Status) => {
@@ -230,15 +230,16 @@ export default defineComponent({
 
     return {
       scroller,
-      timeline,
+      statuses,
       focusedId,
       modalOpened,
       updateToot,
       deleteToot,
       focusToot,
       heading,
-      upper,
-      account
+      account,
+      loading,
+      backgroundColor
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index 842f7d8e18..96f3695423 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -41,7 +41,6 @@ import { useI18next } from 'vue3-i18next'
 import { useMagicKeys, whenever } from '@vueuse/core'
 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 defineComponent({
   name: 'add-list-member',
@@ -55,7 +54,6 @@ export default defineComponent({
 
     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)
@@ -80,7 +78,6 @@ export default defineComponent({
         .dispatch(`${space}/${ACTION_TYPES.ADD}`, account)
         .then(() => {
           store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
-          store.dispatch(`TimelineSpace/Contents/Lists/Edit/${LIST_ACTION_TYPES.FETCH_MEMBERS}`, listId.value)
         })
         .catch(() => {
           ElMessage({
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 4bf87ba9d6..087ec4d7b8 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -2,7 +2,6 @@ import Home, { HomeState } from './Contents/Home'
 import Notifications, { NotificationsState } from './Contents/Notifications'
 import Local, { LocalState } from './Contents/Local'
 import Search, { SearchModuleState } from './Contents/Search'
-import Lists, { ListsModuleState } from './Contents/Lists'
 import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
@@ -17,7 +16,6 @@ type ContentsModule = {
   DirectMessages: DirectMessagesState
   Local: LocalState
   Search: SearchModuleState
-  Lists: ListsModuleState
 }
 
 export type ContentsModuleState = ContentsModule & ContentsState
@@ -54,8 +52,7 @@ const Contents: Module<ContentsState, RootState> = {
     Notifications,
     Local,
     DirectMessages,
-    Search,
-    Lists
+    Search
   },
   mutations: mutations,
   actions: actions
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists.ts b/src/renderer/store/TimelineSpace/Contents/Lists.ts
deleted file mode 100644
index 83afc4d45b..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Lists.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import Index, { IndexState } from './Lists/Index'
-import Show, { ShowState } from './Lists/Show'
-import Edit, { EditState } from './Lists/Edit'
-import { Module } from 'vuex'
-import { RootState } from '@/store'
-
-export type ListsState = {}
-
-type ListModule = {
-  Index: IndexState
-  Show: ShowState
-  Edit: EditState
-}
-
-export type ListsModuleState = ListModule & ListsState
-
-const state = (): ListsState => ({})
-
-export default {
-  namespaced: true,
-  state: state,
-  modules: {
-    Index,
-    Show,
-    Edit
-  }
-} as Module<ListsState, RootState>
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts b/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
deleted file mode 100644
index 62e8b50ef8..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Lists/Edit.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { RemoveAccountFromList } from '@/types/removeAccountFromList'
-
-export type EditState = {
-  members: Array<Entity.Account>
-}
-
-const state = (): EditState => ({
-  members: []
-})
-
-export const MUTATION_TYPES = {
-  CHANGE_MEMBERS: 'changeMembers'
-}
-
-const mutations: MutationTree<EditState> = {
-  [MUTATION_TYPES.CHANGE_MEMBERS]: (state, members: Array<Entity.Account>) => {
-    state.members = members
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_MEMBERS: 'fetchMembers',
-  REMOVE_ACCOUNT: 'removeAccount'
-}
-
-const actions: ActionTree<EditState, RootState> = {
-  [ACTION_TYPES.FETCH_MEMBERS]: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    const res = await client.getAccountsInList(listId, { limit: 0 })
-    commit(MUTATION_TYPES.CHANGE_MEMBERS, res.data)
-    return res.data
-  },
-  [ACTION_TYPES.REMOVE_ACCOUNT]: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    return client.deleteAccountsFromList(remove.listId, [remove.account.id])
-  }
-}
-
-export default {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-} as Module<EditState, RootState>
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists/Index.ts b/src/renderer/store/TimelineSpace/Contents/Lists/Index.ts
deleted file mode 100644
index 5b9b930a78..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Lists/Index.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-
-export type IndexState = {
-  lists: Array<Entity.List>
-}
-
-const state = (): IndexState => ({
-  lists: []
-})
-
-export const MUTATION_TYPES = {
-  CHANGE_LISTS: 'changeLists'
-}
-
-const mutations: MutationTree<IndexState> = {
-  [MUTATION_TYPES.CHANGE_LISTS]: (state, lists: Array<Entity.List>) => {
-    state.lists = lists
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_LISTS: 'fetchLists',
-  CREATE_LIST: 'createList',
-  DELETE_LIST: 'deleteList'
-}
-
-const actions: ActionTree<IndexState, RootState> = {
-  [ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }): Promise<Array<Entity.List>> => {
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    const res = await client.getLists()
-    commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
-    return res.data
-  },
-  [ACTION_TYPES.CREATE_LIST]: async ({ rootState }, title: string): Promise<Entity.List> => {
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    const res = await client.createList(title)
-    return res.data
-  },
-  [ACTION_TYPES.DELETE_LIST]: async ({ dispatch, rootState }, list: Entity.List) => {
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    const res = await client.deleteList(list.id)
-    dispatch(ACTION_TYPES.FETCH_LISTS)
-    return res.data
-  }
-}
-
-export default {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-} as Module<IndexState, RootState>
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts b/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
deleted file mode 100644
index f965cb11e8..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-import { MyWindow } from '~/src/types/global'
-import { LocalAccount } from '~/src/types/localAccount'
-import { LocalServer } from '~/src/types/localServer'
-
-const win = (window as any) as MyWindow
-
-export type ShowState = {
-  timeline: Array<Entity.Status>
-}
-
-const state = (): ShowState => ({
-  timeline: []
-})
-
-export const MUTATION_TYPES = {
-  APPEND_TIMELINE: 'appendTimeline',
-  REPLACE_TIMELINE: 'replaceTimeline',
-  INSERT_TIMELINE: 'insertTimeline',
-  UPDATE_TOOT: 'updateToot',
-  DELETE_TOOT: 'deleteToot'
-}
-
-const mutations: MutationTree<ShowState> = {
-  [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
-    state.timeline = [update].concat(state.timeline)
-  },
-  [MUTATION_TYPES.REPLACE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
-    state.timeline = timeline
-  },
-  [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
-    state.timeline = state.timeline.concat(messages)
-  },
-  [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
-    state.timeline = state.timeline.map(toot => {
-      if (toot.id === message.id) {
-        return message
-      } else if (toot.reblog !== null && toot.reblog.id === message.id) {
-        // When user reblog/favourite a reblogged toot, target message is a original toot.
-        // So, a message which is received now is original toot.
-        const reblog = {
-          reblog: message
-        }
-        return Object.assign(toot, reblog)
-      } else {
-        return toot
-      }
-    })
-  },
-  [MUTATION_TYPES.DELETE_TOOT]: (state, id: string) => {
-    state.timeline = state.timeline.filter(toot => {
-      if (toot.reblog !== null && toot.reblog.id === id) {
-        return false
-      } else {
-        return toot.id !== id
-      }
-    })
-  }
-}
-
-export const ACTION_TYPES = {
-  FETCH_TIMELINE: 'fetchTimeline',
-  START_STREAMING: 'startStreaming',
-  STOP_STREAMING: 'stopStreaming',
-  LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
-}
-
-const actions: ActionTree<ShowState, RootState> = {
-  [ACTION_TYPES.FETCH_TIMELINE]: async (
-    { commit, rootState },
-    req: { listID: string; account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status>> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    const res = await client.getListTimeline(req.listID, { limit: 20 })
-    commit(MUTATION_TYPES.REPLACE_TIMELINE, res.data)
-    return res.data
-  },
-  [ACTION_TYPES.START_STREAMING]: ({ commit }, req: { listID: string; account: LocalAccount }) => {
-    win.ipcRenderer.on(`update-list-streamings-${req.account.id}`, (_, update: Entity.Status) => {
-      commit(MUTATION_TYPES.APPEND_TIMELINE, update)
-    })
-    win.ipcRenderer.on(`delete-list-streamings-${req.account.id}`, (_, id: string) => {
-      commit(MUTATION_TYPES.DELETE_TOOT, id)
-    })
-    // @ts-ignore
-    return new Promise((resolve, reject) => {
-      // eslint-disable-line no-unused-vars
-      win.ipcRenderer.send('start-list-streaming', {
-        listId: req.listID,
-        accountId: req.account.id
-      })
-    })
-  },
-  [ACTION_TYPES.STOP_STREAMING]: ({ rootState }) => {
-    return new Promise(resolve => {
-      if (rootState.TimelineSpace.account) {
-        win.ipcRenderer.removeAllListeners(`update-list-streamings-${rootState.TimelineSpace.account.id}`)
-        win.ipcRenderer.removeAllListeners(`delete-list-streamings-${rootState.TimelineSpace.account.id}`)
-      }
-      resolve(null)
-    })
-  },
-  [ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
-    { commit, rootState },
-    req: { list_id: string; status: Entity.Status; account: LocalAccount; server: LocalServer }
-  ): Promise<Array<Entity.Status> | null> => {
-    const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
-    return client.getListTimeline(req.list_id, { max_id: req.status.id, limit: 20 }).then(res => {
-      commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
-      return res.data
-    })
-  }
-}
-
-export default {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-} as Module<ShowState, RootState>

From f857738e449fdf3928e705307426f024026815fc Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 30 Jan 2023 21:59:56 +0900
Subject: [PATCH 7/7] [refactor] Remove search store

---
 .../TimelineSpace/Contents/Search.vue         | 98 ++++++++++++++-----
 .../TimelineSpace/Contents/Search/Account.vue | 22 ++---
 .../TimelineSpace/Contents/Search/Tag.vue     | 19 ++--
 .../TimelineSpace/Contents/Search/Toots.vue   | 19 ++--
 src/renderer/store/TimelineSpace/Contents.ts  |  5 +-
 .../store/TimelineSpace/Contents/Search.ts    | 25 -----
 .../TimelineSpace/Contents/Search/Account.ts  | 53 ----------
 .../TimelineSpace/Contents/Search/Tag.ts      | 53 ----------
 .../TimelineSpace/Contents/Search/Toots.ts    | 55 -----------
 9 files changed, 94 insertions(+), 255 deletions(-)
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Search.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Search/Account.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Search/Tag.ts
 delete mode 100644 src/renderer/store/TimelineSpace/Contents/Search/Toots.ts

diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 9a5d17556c..b64d5e272f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -10,35 +10,45 @@
       </el-form>
     </div>
     <div class="search-result">
-      <search-account v-if="target === 'account'"></search-account>
-      <search-tag v-else-if="target === 'tag'"></search-tag>
-      <search-toots v-else-if="target === 'toot'"></search-toots>
+      <search-account v-if="target === 'account'" :results="accounts"></search-account>
+      <search-tag v-else-if="target === 'tag'" :results="tags"></search-tag>
+      <search-toots v-else-if="target === 'toot'" :results="statuses"></search-toots>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, onMounted, computed, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useI18next } from 'vue3-i18next'
+import generator, { MegalodonInterface, Entity } from 'megalodon'
 import { useStore } from '@/store'
 import SearchAccount from './Search/Account.vue'
 import SearchTag from './Search/Tag.vue'
 import SearchToots from './Search/Toots.vue'
-import { ACTION_TYPES as TAG_ACTION } from '@/store/TimelineSpace/Contents/Search/Tag'
-import { ACTION_TYPES as ACCOUNT_ACTION } from '@/store/TimelineSpace/Contents/Search/Account'
-import { ACTION_TYPES as TOOTS_ACTION } from '@/store/TimelineSpace/Contents/Search/Toots'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'search',
   components: { SearchAccount, SearchTag, SearchToots },
   setup() {
-    const space = 'TimelineSpace/Contents/Search'
     const store = useStore()
     const i18n = useI18next()
+    const route = useRoute()
+
+    const win = (window as any) as MyWindow
+    const id = computed(() => parseInt(route.params.id as string))
 
     const target = ref<string>('account')
     const query = ref<string>('')
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+    const client = ref<MegalodonInterface | null>(null)
     const searchTargets = [
       {
         target: 'account',
@@ -53,32 +63,69 @@ export default defineComponent({
         label: i18n.t('search.toot')
       }
     ]
+    const userAgent = computed(() => store.state.App.userAgent)
+    const accounts = ref<Array<Entity.Account>>([])
+    const tags = ref<Array<Entity.Tag>>([])
+    const statuses = ref<Array<Entity.Status>>([])
+
+    onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
+
+      client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
+    })
+
+    const clear = () => {
+      accounts.value = []
+      tags.value = []
+      statuses.value = []
+    }
 
     const search = () => {
+      clear()
       switch (target.value) {
         case 'account':
-          store.dispatch(`${space}/Account/${ACCOUNT_ACTION.SEARCH}`, query.value).catch(() => {
-            ElMessage({
-              message: i18n.t('message.search_error'),
-              type: 'error'
+          client.value
+            ?.searchAccount(query.value, { resolve: true })
+            .then(res => {
+              accounts.value = res.data
+            })
+            .catch(err => {
+              console.error(err)
+              ElMessage({
+                message: i18n.t('message.search_error'),
+                type: 'error'
+              })
             })
-          })
           break
         case 'tag':
-          store.dispatch(`${space}/Tag/${TAG_ACTION.SEARCH}`, `#${query.value}`).catch(() => {
-            ElMessage({
-              message: i18n.t('message.search_error'),
-              type: 'error'
+          client.value
+            ?.search(`#${query.value}`, 'hashtags', { resolve: true })
+            .then(res => {
+              tags.value = res.data.hashtags
+            })
+            .catch(err => {
+              console.error(err)
+              ElMessage({
+                message: i18n.t('message.search_error'),
+                type: 'error'
+              })
             })
-          })
           break
         case 'toot':
-          store.dispatch(`${space}/Toots/${TOOTS_ACTION.SEARCH}`, query.value).catch(() => {
-            ElMessage({
-              message: i18n.t('message.search_error'),
-              type: 'error'
+          client.value
+            ?.search(query.value, 'statuses', { resolve: true })
+            .then(res => {
+              statuses.value = res.data.statuses
+            })
+            .catch(err => {
+              console.error(err)
+              ElMessage({
+                message: i18n.t('message.search_error'),
+                type: 'error'
+              })
             })
-          })
           break
         default:
           break
@@ -89,7 +136,10 @@ export default defineComponent({
       target,
       searchTargets,
       query,
-      search
+      search,
+      accounts,
+      tags,
+      statuses
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
index 22fb89e872..cfe7a7eb97 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
@@ -11,26 +11,18 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted } from 'vue'
-import { useStore } from '@/store'
-import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Account'
+import { defineComponent, PropType } from 'vue'
+import { Entity } from 'megalodon'
 import User from '@/components/molecules/User.vue'
 
 export default defineComponent({
   name: 'search-account',
   components: { User },
-  setup() {
-    const store = useStore()
-    const results = computed(() => store.state.TimelineSpace.Contents.Search.Account.results)
-
-    onUnmounted(() => {
-      store.commit(`TimelineSpace/Contents/Search/Account/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
-    })
-
-    return {
-      results
+  props: {
+    results: {
+      type: Object as PropType<Array<Entity.Account>>,
+      required: true
     }
-  },
-  unmounted() {}
+  }
 })
 </script>
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
index 54f224815a..01445a1314 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
@@ -11,24 +11,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, computed } from 'vue'
-import { useStore } from '@/store'
+import { defineComponent, PropType } from 'vue'
+import { Entity } from 'megalodon'
 import Tag from '@/components/molecules/Tag.vue'
-import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Tag'
 
 export default defineComponent({
   name: 'search-tag',
   components: { Tag },
-  setup() {
-    const store = useStore()
-    const results = computed(() => store.state.TimelineSpace.Contents.Search.Tag.results)
-
-    onUnmounted(() => {
-      store.commit(`TimelineSpace/Contents/Search/Tag/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
-    })
-
-    return {
-      results
+  props: {
+    results: {
+      type: Object as PropType<Array<Entity.Account>>,
+      required: true
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue b/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
index a3a9df19bb..ab625a9d33 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
@@ -11,24 +11,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted } from 'vue'
-import { useStore } from '@/store'
+import { defineComponent, PropType } from 'vue'
+import { Entity } from 'megalodon'
 import Toot from '@/components/organisms/Toot.vue'
-import { MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Search/Toots'
 
 export default defineComponent({
   name: 'search-account',
   components: { Toot },
-  setup() {
-    const store = useStore()
-    const results = computed(() => store.state.TimelineSpace.Contents.Search.Toots.results)
-
-    onUnmounted(() => {
-      this.$store.commit(`TimelineSpace/Contents/Search/Toots/${MUTATION_TYPES.UPDATE_RESULTS}`, [])
-    })
-
-    return {
-      results
+  props: {
+    results: {
+      type: Object as PropType<Array<Entity.Account>>,
+      required: true
     }
   }
 })
diff --git a/src/renderer/store/TimelineSpace/Contents.ts b/src/renderer/store/TimelineSpace/Contents.ts
index 087ec4d7b8..7263f6f19b 100644
--- a/src/renderer/store/TimelineSpace/Contents.ts
+++ b/src/renderer/store/TimelineSpace/Contents.ts
@@ -1,7 +1,6 @@
 import Home, { HomeState } from './Contents/Home'
 import Notifications, { NotificationsState } from './Contents/Notifications'
 import Local, { LocalState } from './Contents/Local'
-import Search, { SearchModuleState } from './Contents/Search'
 import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
@@ -15,7 +14,6 @@ type ContentsModule = {
   Notifications: NotificationsState
   DirectMessages: DirectMessagesState
   Local: LocalState
-  Search: SearchModuleState
 }
 
 export type ContentsModuleState = ContentsModule & ContentsState
@@ -51,8 +49,7 @@ const Contents: Module<ContentsState, RootState> = {
     Home,
     Notifications,
     Local,
-    DirectMessages,
-    Search
+    DirectMessages
   },
   mutations: mutations,
   actions: actions
diff --git a/src/renderer/store/TimelineSpace/Contents/Search.ts b/src/renderer/store/TimelineSpace/Contents/Search.ts
deleted file mode 100644
index d4e5dd872f..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Search.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import Account, { AccountState } from './Search/Account'
-import Tag, { TagState } from './Search/Tag'
-import Toots, { TootsState } from './Search/Toots'
-import { Module } from 'vuex'
-import { RootState } from '@/store'
-
-export type SearchState = {}
-
-type SearchModule = {
-  Account: AccountState
-  Tag: TagState
-  Toots: TootsState
-}
-
-export type SearchModuleState = SearchModule & SearchState
-
-const state = (): SearchState => ({})
-
-const Search: Module<SearchState, RootState> = {
-  namespaced: true,
-  modules: { Account, Tag, Toots },
-  state: state
-}
-
-export default Search
diff --git a/src/renderer/store/TimelineSpace/Contents/Search/Account.ts b/src/renderer/store/TimelineSpace/Contents/Search/Account.ts
deleted file mode 100644
index e82b51e499..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Search/Account.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-
-export type AccountState = {
-  results: Array<Entity.Account>
-}
-
-const state = (): AccountState => ({
-  results: []
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_RESULTS: 'updateResults'
-}
-
-const mutations: MutationTree<AccountState> = {
-  [MUTATION_TYPES.UPDATE_RESULTS]: (state, results: Array<Entity.Account>) => {
-    state.results = results
-  }
-}
-
-export const ACTION_TYPES = {
-  SEARCH: 'search'
-}
-
-const actions: ActionTree<AccountState, RootState> = {
-  [ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Account>> => {
-    commit('TimelineSpace/Contents/changeLoading', true, { root: true })
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    return client
-      .searchAccount(query, { resolve: true })
-      .then(res => {
-        commit(MUTATION_TYPES.UPDATE_RESULTS, res.data)
-        return res.data
-      })
-      .finally(() => {
-        commit('TimelineSpace/Contents/changeLoading', false, { root: true })
-      })
-  }
-}
-
-export default {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-} as Module<AccountState, RootState>
diff --git a/src/renderer/store/TimelineSpace/Contents/Search/Tag.ts b/src/renderer/store/TimelineSpace/Contents/Search/Tag.ts
deleted file mode 100644
index 9923f34871..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Search/Tag.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-
-export type TagState = {
-  results: Array<Entity.Tag>
-}
-
-const state = (): TagState => ({
-  results: []
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_RESULTS: 'updateResults'
-}
-
-const mutations: MutationTree<TagState> = {
-  [MUTATION_TYPES.UPDATE_RESULTS]: (state, results: Array<Entity.Tag>) => {
-    state.results = results
-  }
-}
-
-export const ACTION_TYPES = {
-  SEARCH: 'search'
-}
-
-const actions: ActionTree<TagState, RootState> = {
-  [ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Tag>> => {
-    commit('TimelineSpace/Contents/changeLoading', true, { root: true })
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    return client
-      .search(query, 'hashtags', { resolve: true })
-      .then(res => {
-        commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.hashtags)
-        return res.data.hashtags
-      })
-      .finally(() => {
-        commit('TimelineSpace/Contents/changeLoading', false, { root: true })
-      })
-  }
-}
-
-export default {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-} as Module<TagState, RootState>
diff --git a/src/renderer/store/TimelineSpace/Contents/Search/Toots.ts b/src/renderer/store/TimelineSpace/Contents/Search/Toots.ts
deleted file mode 100644
index 4c171ccfe6..0000000000
--- a/src/renderer/store/TimelineSpace/Contents/Search/Toots.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import generator, { Entity } from 'megalodon'
-import { Module, MutationTree, ActionTree } from 'vuex'
-import { RootState } from '@/store'
-
-export type TootsState = {
-  results: Array<Entity.Status>
-}
-
-const state = (): TootsState => ({
-  results: []
-})
-
-export const MUTATION_TYPES = {
-  UPDATE_RESULTS: 'updateResults'
-}
-
-const mutations: MutationTree<TootsState> = {
-  [MUTATION_TYPES.UPDATE_RESULTS]: (state, results: Array<Entity.Status>) => {
-    state.results = results
-  }
-}
-
-export const ACTION_TYPES = {
-  SEARCH: 'search'
-}
-
-const actions: ActionTree<TootsState, RootState> = {
-  [ACTION_TYPES.SEARCH]: async ({ commit, rootState }, query: string): Promise<Array<Entity.Status>> => {
-    commit('TimelineSpace/Contents/changeLoading', true, { root: true })
-    const client = generator(
-      rootState.TimelineSpace.server!.sns,
-      rootState.TimelineSpace.server!.baseURL,
-      rootState.TimelineSpace.account!.accessToken,
-      rootState.App.userAgent
-    )
-    return client
-      .search(query, 'statuses', { resolve: true })
-      .then(res => {
-        commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.statuses)
-        return res.data.statuses
-      })
-      .finally(() => {
-        commit('TimelineSpace/Contents/changeLoading', false, { root: true })
-      })
-  }
-}
-
-const Toots: Module<TootsState, RootState> = {
-  namespaced: true,
-  state: state,
-  mutations: mutations,
-  actions: actions
-}
-
-export default Toots