From 5d7bc9f9ddb9021c2dfeb15d4a300ac213c23936 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 21:01:12 +0900
Subject: [PATCH 1/9] Remove unread timeline and fix scroll position in public

---
 .../TimelineSpace/Contents/Public.spec.ts     |  4 +-
 .../TimelineSpace/Contents/Public.spec.ts     | 24 +++------
 .../TimelineSpace/Contents/Public.vue         | 53 ++++++++-----------
 src/renderer/components/utils/scroll.js       | 20 ++++++-
 .../store/TimelineSpace/Contents/Public.ts    | 16 +-----
 5 files changed, 51 insertions(+), 66 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts
index 67836cf8..13735fae 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Public.spec.ts
@@ -117,8 +117,7 @@ let state = (): PublicState => {
   return {
     lazyLoading: false,
     heading: true,
-    timeline: [],
-    unreadTimeline: []
+    timeline: []
   }
 }
 
@@ -180,7 +179,6 @@ describe('Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [status1],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts
index 7aea60c0..3b1b096c 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Public.spec.ts
@@ -136,8 +136,7 @@ describe('TimelineSpace/Contents/Local', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, status1],
-            unreadTimeline: []
+            timeline: [status2, status1]
           }
         })
         it('should be deleted', () => {
@@ -151,8 +150,7 @@ describe('TimelineSpace/Contents/Local', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, rebloggedStatus],
-            unreadTimeline: []
+            timeline: [status2, rebloggedStatus]
           }
         })
         it('should be deleted', () => {
@@ -169,14 +167,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Public.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -185,14 +181,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Public.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -203,14 +197,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Public.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
-            expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([rebloggedStatus])
+            expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
           })
         })
 
@@ -219,14 +211,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Public.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 3c34417b..7be5890d 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -1,8 +1,7 @@
 <template>
   <div id="public" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -32,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'public',
@@ -39,15 +39,15 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
     ...mapState('TimelineSpace/Contents/Public', {
       timeline: state => state.timeline,
       lazyLoading: state => state.lazyLoading,
-      heading: state => state.heading,
-      unread: state => state.unreadTimeline
+      heading: state => state.heading
     }),
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@@ -87,11 +87,24 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
     }
+    if (!this.heading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.public) {
@@ -102,7 +115,6 @@ export default {
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
     if (!this.unreadNotification.public) {
       this.$store.commit('TimelineSpace/Contents/Public/clearTimeline')
@@ -125,7 +137,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
       }
     }
   },
@@ -158,16 +169,11 @@ export default {
           })
         })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
       }
     },
     async reload() {
@@ -225,21 +231,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/components/utils/scroll.js b/src/renderer/components/utils/scroll.js
index b2c2591e..f6aa26ae 100644
--- a/src/renderer/components/utils/scroll.js
+++ b/src/renderer/components/utils/scroll.js
@@ -3,7 +3,7 @@
  * @param element a target dom element
  * @param point scroll target point of the element
  **/
-export default function scrollTop (element, point = 0) {
+export default function scrollTop(element, point = 0) {
   const start = element.scrollTop
   const range = start - point
   // Progress of scroll: 0 ~ 100
@@ -35,3 +35,21 @@ export default function scrollTop (element, point = 0) {
 const easeOut = function (p) {
   return p * (2 - p)
 }
+
+export class ScrollPosition {
+  node = null
+  previousScrollHeightMinusTop = 0
+
+  constructor(node) {
+    this.node = node
+    this.previousScrollHeightMinusTop = 0
+  }
+
+  prepare() {
+    this.previousScrollHeightMinusTop = this.node.scrollHeight - this.node.scrollTop
+  }
+
+  restore() {
+    this.node.scrollTop = this.node.scrollHeight - this.previousScrollHeightMinusTop
+  }
+}
diff --git a/src/renderer/store/TimelineSpace/Contents/Public.ts b/src/renderer/store/TimelineSpace/Contents/Public.ts
index eccb001c..2db11703 100644
--- a/src/renderer/store/TimelineSpace/Contents/Public.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Public.ts
@@ -4,14 +4,12 @@ import { RootState } from '@/store'
 
 export type PublicState = {
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
   lazyLoading: boolean
   heading: boolean
 }
 
 const state = (): PublicState => ({
   timeline: [],
-  unreadTimeline: [],
   lazyLoading: false,
   heading: true
 })
@@ -20,7 +18,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -35,21 +32,13 @@ const mutations: MutationTree<PublicState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = messages
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -58,7 +47,6 @@ const mutations: MutationTree<PublicState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     state.timeline = state.timeline.map(toot => {

From 4fdc2f90de9f9f5ba1ad12eb99c6de7465251ccb Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 21:16:28 +0900
Subject: [PATCH 2/9] Remove unread timeline and fix scroll position in local

---
 .../TimelineSpace/Contents/Local.spec.ts      |  3 +-
 .../TimelineSpace/Contents/Local.spec.ts      | 24 +++------
 .../TimelineSpace/Contents/Local.vue          | 52 ++++++++-----------
 .../store/TimelineSpace/Contents/Local.ts     | 16 +-----
 4 files changed, 31 insertions(+), 64 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts
index 7ab103ea..b2dc2cc8 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Local.spec.ts
@@ -117,8 +117,7 @@ let state = (): LocalState => {
   return {
     lazyLoading: false,
     heading: true,
-    timeline: [],
-    unreadTimeline: []
+    timeline: []
   }
 }
 
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts
index 18d54fc9..f80b1aef 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Local.spec.ts
@@ -136,8 +136,7 @@ describe('TimelineSpace/Contents/Local', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, status1],
-            unreadTimeline: []
+            timeline: [status2, status1]
           }
         })
         it('should be deleted', () => {
@@ -151,8 +150,7 @@ describe('TimelineSpace/Contents/Local', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, rebloggedStatus],
-            unreadTimeline: []
+            timeline: [status2, rebloggedStatus]
           }
         })
         it('should be deleted', () => {
@@ -168,14 +166,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Local.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -184,14 +180,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Local.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -202,14 +196,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Local.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
-            expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([rebloggedStatus])
+            expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
           })
         })
 
@@ -218,14 +210,12 @@ describe('TimelineSpace/Contents/Local', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Local.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 1c76fbda..7fe8b575 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -1,8 +1,7 @@
 <template>
   <div id="local" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -32,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'local',
@@ -39,15 +39,15 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
     ...mapState('TimelineSpace/Contents/Local', {
       timeline: state => state.timeline,
       lazyLoading: state => state.lazyLoading,
-      heading: state => state.heading,
-      unread: state => state.unreadTimeline
+      heading: state => state.heading
     }),
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@@ -86,11 +86,24 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
     }
+    if (!this.heading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.local) {
@@ -101,7 +114,6 @@ export default {
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
     if (!this.unreadNotification.local) {
       this.$store.commit('TimelineSpace/Contents/Local/clearTimeline')
@@ -124,7 +136,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
       }
     }
   },
@@ -157,16 +168,10 @@ export default {
           })
         })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
       }
     },
     async reload() {
@@ -224,21 +229,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/Local.ts b/src/renderer/store/TimelineSpace/Contents/Local.ts
index 0102139b..ced86ea2 100644
--- a/src/renderer/store/TimelineSpace/Contents/Local.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Local.ts
@@ -4,14 +4,12 @@ import { RootState } from '@/store'
 
 export type LocalState = {
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
   lazyLoading: boolean
   heading: boolean
 }
 
 const state = (): LocalState => ({
   timeline: [],
-  unreadTimeline: [],
   lazyLoading: false,
   heading: true
 })
@@ -20,7 +18,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -35,21 +32,13 @@ const mutations: MutationTree<LocalState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = messages
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -58,7 +47,6 @@ const mutations: MutationTree<LocalState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     state.timeline = state.timeline.map(toot => {

From 143849424e439b702983eb5f7c19fa70ebbe9089 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 21:33:10 +0900
Subject: [PATCH 3/9] Remove unread timeline and fix scroll position in home

---
 .../store/TimelineSpace/Contents/Home.spec.ts |  1 -
 .../store/TimelineSpace/Contents/Home.spec.ts | 40 ++--------------
 .../TimelineSpace/Contents/Home.vue           | 47 ++++++++-----------
 .../store/TimelineSpace/Contents/Home.ts      | 16 +------
 4 files changed, 25 insertions(+), 79 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
index 6d60a127..aec1b5a3 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
@@ -118,7 +118,6 @@ let state = (): HomeState => {
     lazyLoading: false,
     heading: true,
     timeline: [],
-    unreadTimeline: [],
     showReblogs: true,
     showReplies: true
   }
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
index 9612f06a..48a8ae84 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
@@ -99,7 +99,6 @@ describe('TimelineSpace/Contents/Home', () => {
         lazyLoading: false,
         heading: true,
         timeline: [],
-        unreadTimeline: [],
         showReblogs: true,
         showReplies: true
       }
@@ -127,7 +126,6 @@ describe('TimelineSpace/Contents/Home', () => {
               lazyLoading: false,
               heading: true,
               timeline: [status1],
-              unreadTimeline: [],
               showReblogs: true,
               showReplies: true
             }
@@ -135,7 +133,6 @@ describe('TimelineSpace/Contents/Home', () => {
           it('should update timeline', () => {
             Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
             expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -145,7 +142,6 @@ describe('TimelineSpace/Contents/Home', () => {
               lazyLoading: false,
               heading: true,
               timeline: [status2, status1],
-              unreadTimeline: [],
               showReblogs: true,
               showReplies: true
             }
@@ -153,7 +149,6 @@ describe('TimelineSpace/Contents/Home', () => {
           it('should not update timeline', () => {
             Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
             expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -165,15 +160,13 @@ describe('TimelineSpace/Contents/Home', () => {
               lazyLoading: false,
               heading: false,
               timeline: [status1],
-              unreadTimeline: [],
               showReblogs: true,
               showReplies: true
             }
           })
-          it('should update unreadTimeline', () => {
+          it('should update timeline', () => {
             Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
-            expect(state.timeline).toEqual([status1])
-            expect(state.unreadTimeline).toEqual([status2])
+            expect(state.timeline).toEqual([status2, status1])
           })
         })
         describe('duplicated status', () => {
@@ -181,46 +174,25 @@ describe('TimelineSpace/Contents/Home', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [],
-              unreadTimeline: [status2, status1],
+              timeline: [status2, status1],
               showReblogs: true,
               showReplies: true
             }
           })
           it('should not update unreadTimeline', () => {
             Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
-            expect(state.timeline).toEqual([])
-            expect(state.unreadTimeline).toEqual([status2, status1])
+            expect(state.timeline).toEqual([status2, status1])
           })
         })
       })
     })
 
-    describe('mergeTimeline', () => {
-      beforeEach(() => {
-        state = {
-          lazyLoading: false,
-          heading: true,
-          timeline: [status1],
-          unreadTimeline: [status2],
-          showReblogs: true,
-          showReplies: true
-        }
-      })
-      it('should be merged', () => {
-        Home.mutations![MUTATION_TYPES.MERGE_TIMELINE](state, null)
-        expect(state.timeline).toEqual([status2, status1])
-        expect(state.unreadTimeline).toEqual([])
-      })
-    })
-
     describe('insertTimeline', () => {
       beforeEach(() => {
         state = {
           lazyLoading: false,
           heading: true,
           timeline: [status1],
-          unreadTimeline: [],
           showReblogs: true,
           showReplies: true
         }
@@ -238,7 +210,6 @@ describe('TimelineSpace/Contents/Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [status1, status2],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
@@ -294,7 +265,6 @@ describe('TimelineSpace/Contents/Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [rebloggedStatus, status2],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
@@ -314,7 +284,6 @@ describe('TimelineSpace/Contents/Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [status1, status2],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
@@ -365,7 +334,6 @@ describe('TimelineSpace/Contents/Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [rebloggedStatus, status2],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index 5bf31298..a8bb7ac6 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -1,8 +1,7 @@
 <template>
   <div id="home" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="filteredTimeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="filteredTimeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -33,6 +32,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'home',
@@ -40,7 +40,8 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
@@ -48,7 +49,6 @@ export default {
       timeline: state => state.timeline,
       lazyLoading: state => state.lazyLoading,
       heading: state => state.heading,
-      unread: state => state.unreadTimeline,
       showReblogs: state => state.showReblogs,
       showReplies: state => state.showReplies
     }),
@@ -97,18 +97,30 @@ export default {
     if (this.heading && this.timeline.length > 0) {
       this.$store.dispatch('TimelineSpace/Contents/Home/saveMarker', this.timeline[0].id)
     }
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     }
+    if (!this.heading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
     if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
       document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
@@ -128,7 +140,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
       }
     },
     timeline: function (newState, _oldState) {
@@ -151,16 +162,11 @@ export default {
           })
         })
       }
-      // for unread control
+
       if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
       } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+        this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
       }
     },
     updateToot(message) {
@@ -224,21 +230,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/Home.ts b/src/renderer/store/TimelineSpace/Contents/Home.ts
index 8b5aebaa..d431bc15 100644
--- a/src/renderer/store/TimelineSpace/Contents/Home.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Home.ts
@@ -12,14 +12,12 @@ export type HomeState = {
   showReblogs: boolean
   showReplies: boolean
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
 }
 
 const state = (): HomeState => ({
   lazyLoading: false,
   heading: true,
   timeline: [],
-  unreadTimeline: [],
   showReblogs: true,
   showReplies: true
 })
@@ -29,7 +27,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -48,21 +45,13 @@ const mutations: MutationTree<HomeState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = messages
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -71,7 +60,6 @@ const mutations: MutationTree<HomeState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     // Replace target message in homeTimeline and notifications

From 24e2a8023620fb738b98c8b6e16fa75e81279cd4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 21:51:51 +0900
Subject: [PATCH 4/9] Remove unread timeline and fix scroll position in
 notifications

---
 .../Contents/Notifications.spec.ts            |  6 +--
 .../store/TimelineSpace/Contents/Home.spec.ts |  2 +-
 .../Contents/Notifications.spec.ts            | 27 ++++------
 .../TimelineSpace/Contents/Notifications.vue  | 53 ++++++++-----------
 .../TimelineSpace/Contents/Notifications.ts   | 20 ++-----
 5 files changed, 37 insertions(+), 71 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts
index f83e0bd1..7855e398 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Notifications.spec.ts
@@ -192,8 +192,7 @@ let state = (): NotificationsState => {
   return {
     lazyLoading: false,
     heading: true,
-    notifications: [],
-    unreadNotifications: []
+    notifications: []
   }
 }
 
@@ -253,8 +252,7 @@ describe('Notifications', () => {
         return {
           lazyLoading: false,
           heading: true,
-          notifications: [notification1],
-          unreadNotifications: []
+          notifications: [notification1]
         }
       }
     })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
index 48a8ae84..3e736ab5 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
@@ -179,7 +179,7 @@ describe('TimelineSpace/Contents/Home', () => {
               showReplies: true
             }
           })
-          it('should not update unreadTimeline', () => {
+          it('should not update timeline', () => {
             Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
             expect(state.timeline).toEqual([status2, status1])
           })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
index 3bf79ccc..b4a41731 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Notifications.spec.ts
@@ -175,8 +175,7 @@ describe('TimelineSpace/Contents/Notifications', () => {
         state = {
           lazyLoading: false,
           heading: true,
-          notifications: [notification2, notification1],
-          unreadNotifications: []
+          notifications: [notification2, notification1]
         }
       })
       describe('message is not reblogged', () => {
@@ -200,14 +199,12 @@ describe('TimelineSpace/Contents/Notifications', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              notifications: [notification1],
-              unreadNotifications: []
+              notifications: [notification1]
             }
           })
           it('should update timeline', () => {
             Notifications.mutations![MUTATION_TYPES.APPEND_NOTIFICATIONS](state, notification2)
             expect(state.notifications).toEqual([notification2, notification1])
-            expect(state.unreadNotifications).toEqual([])
           })
         })
 
@@ -216,14 +213,12 @@ describe('TimelineSpace/Contents/Notifications', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              notifications: [notification2, notification1],
-              unreadNotifications: []
+              notifications: [notification2, notification1]
             }
           })
           it('should not update timeline', () => {
             Notifications.mutations![MUTATION_TYPES.APPEND_NOTIFICATIONS](state, notification2)
             expect(state.notifications).toEqual([notification2, notification1])
-            expect(state.unreadNotifications).toEqual([])
           })
         })
       })
@@ -234,14 +229,12 @@ describe('TimelineSpace/Contents/Notifications', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              notifications: [notification1],
-              unreadNotifications: []
+              notifications: [notification1]
             }
           })
-          it('should update unreadTimeline', () => {
+          it('should update timeline', () => {
             Notifications.mutations![MUTATION_TYPES.APPEND_NOTIFICATIONS](state, notification2)
-            expect(state.notifications).toEqual([notification1])
-            expect(state.unreadNotifications).toEqual([notification2])
+            expect(state.notifications).toEqual([notification2, notification1])
           })
         })
         describe('duplicated status', () => {
@@ -249,14 +242,12 @@ describe('TimelineSpace/Contents/Notifications', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              notifications: [notification1],
-              unreadNotifications: [notification2]
+              notifications: [notification2, notification1]
             }
           })
-          it('should not update unreadTimeline', () => {
+          it('should not update timeline', () => {
             Notifications.mutations![MUTATION_TYPES.APPEND_NOTIFICATIONS](state, notification2)
-            expect(state.notifications).toEqual([notification1])
-            expect(state.unreadNotifications).toEqual([notification2])
+            expect(state.notifications).toEqual([notification2, notification1])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 80c59f1c..bc1e8327 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="notifications" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
     <DynamicScroller :items="handledNotifications" :min-item-size="20" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
@@ -31,6 +30,7 @@ import { mapState, mapGetters } from 'vuex'
 import Notification from '~/src/renderer/components/organisms/Notification'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'notifications',
@@ -38,7 +38,8 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
@@ -49,8 +50,7 @@ export default {
     }),
     ...mapState('TimelineSpace/Contents/Notifications', {
       lazyLoading: state => state.lazyLoading,
-      heading: state => state.heading,
-      unread: state => state.unreadNotifications
+      heading: state => state.heading
     }),
     ...mapGetters('TimelineSpace/Contents/Notifications', ['handledNotifications', 'filters']),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
@@ -83,18 +83,30 @@ export default {
     if (this.heading && this.handledNotifications.length > 0) {
       this.$store.dispatch('TimelineSpace/Contents/Notifications/saveMarker', this.handledNotifications[0].id)
     }
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
-    if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications) {
+    if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
     }
+    if (!this.heading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
     this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
     if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
       document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
@@ -114,7 +126,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
         this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
       }
     },
@@ -142,16 +153,11 @@ export default {
             })
           })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Notifications/mergeNotifications')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
         this.$store.dispatch('TimelineSpace/Contents/Notifications/resetBadge')
       }
     },
@@ -214,21 +220,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/Notifications.ts b/src/renderer/store/TimelineSpace/Contents/Notifications.ts
index 4dfd1562..10164504 100644
--- a/src/renderer/store/TimelineSpace/Contents/Notifications.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Notifications.ts
@@ -10,14 +10,12 @@ export type NotificationsState = {
   lazyLoading: boolean
   heading: boolean
   notifications: Array<Entity.Notification>
-  unreadNotifications: Array<Entity.Notification>
 }
 
 const state = (): NotificationsState => ({
   lazyLoading: false,
   heading: true,
-  notifications: [],
-  unreadNotifications: []
+  notifications: []
 })
 
 export const MUTATION_TYPES = {
@@ -25,7 +23,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_NOTIFICATIONS: 'appendNotifications',
   UPDATE_NOTIFICATIONS: 'updateNotifications',
-  MERGE_NOTIFICATIONS: 'mergeNotifications',
   INSERT_NOTIFICATIONS: 'insertNotifications',
   UPDATE_TOOT: 'updateToot',
   DELETE_TOOT: 'deleteToot',
@@ -42,24 +39,13 @@ const mutations: MutationTree<NotificationsState> = {
   },
   [MUTATION_TYPES.APPEND_NOTIFICATIONS]: (state, notification: Entity.Notification) => {
     // Reject duplicated status in timeline
-    if (
-      !state.notifications.find(item => item.id === notification.id) &&
-      !state.unreadNotifications.find(item => item.id === notification.id)
-    ) {
-      if (state.heading) {
-        state.notifications = [notification].concat(state.notifications)
-      } else {
-        state.unreadNotifications = [notification].concat(state.unreadNotifications)
-      }
+    if (!state.notifications.find(item => item.id === notification.id)) {
+      state.notifications = [notification].concat(state.notifications)
     }
   },
   [MUTATION_TYPES.UPDATE_NOTIFICATIONS]: (state, notifications: Array<Entity.Notification>) => {
     state.notifications = notifications
   },
-  [MUTATION_TYPES.MERGE_NOTIFICATIONS]: state => {
-    state.notifications = state.unreadNotifications.slice(0, 80).concat(state.notifications)
-    state.unreadNotifications = []
-  },
   [MUTATION_TYPES.INSERT_NOTIFICATIONS]: (state, notifications: Array<Entity.Notification>) => {
     state.notifications = state.notifications.concat(notifications)
   },

From ce4780f587ea7f66647f7af2ef0be2165b031568 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 22:19:41 +0900
Subject: [PATCH 5/9] Remove unread timeline and fix scroll position in
 mentions

---
 .../TimelineSpace/Contents/Mentions.spec.ts   | 12 ++---
 .../TimelineSpace/Contents/Mentions.spec.ts   | 51 ++++--------------
 .../TimelineSpace/Contents/Mentions.vue       | 53 ++++++++-----------
 .../store/TimelineSpace/Contents/Mentions.ts  | 18 ++-----
 4 files changed, 40 insertions(+), 94 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts
index a2f63ac6..6c969be5 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Mentions.spec.ts
@@ -115,8 +115,7 @@ let state: Function = () => {
   return {
     lazyLoading: false,
     heading: true,
-    mentions: [],
-    unreadMentions: []
+    mentions: []
   }
 }
 
@@ -176,8 +175,7 @@ describe('Mentions', () => {
           return {
             lazyLoading: true,
             heading: true,
-            mentions: [],
-            unreadMentions: []
+            mentions: []
           }
         }
       })
@@ -193,8 +191,7 @@ describe('Mentions', () => {
           return {
             lazyLoading: false,
             heading: true,
-            mentions: [mention, reblog],
-            unreadMentions: []
+            mentions: [mention, reblog]
           }
         }
       })
@@ -224,8 +221,7 @@ describe('Mentions', () => {
         return {
           lazyLoading: false,
           heading: true,
-          mentions: [mention, favourite, reblog, follow],
-          unreadMentions: []
+          mentions: [mention, favourite, reblog, follow]
         }
       }
     })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
index d8cd0504..de045539 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Mentions.spec.ts
@@ -173,8 +173,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
       state = {
         lazyLoading: false,
         heading: true,
-        mentions: [],
-        unreadMentions: []
+        mentions: []
       }
     })
 
@@ -185,14 +184,12 @@ describe('TimelineSpace/Contents/Mentions', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              mentions: [notification1],
-              unreadMentions: []
+              mentions: [notification1]
             }
           })
           it('should update mentions', () => {
             Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
             expect(state.mentions).toEqual([notification2, notification1])
-            expect(state.unreadMentions).toEqual([])
           })
         })
 
@@ -201,14 +198,12 @@ describe('TimelineSpace/Contents/Mentions', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              mentions: [notification2, notification1],
-              unreadMentions: []
+              mentions: [notification2, notification1]
             }
           })
           it('should not be updated mentions', () => {
             Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
             expect(state.mentions).toEqual([notification2, notification1])
-            expect(state.unreadMentions).toEqual([])
           })
         })
       })
@@ -219,14 +214,12 @@ describe('TimelineSpace/Contents/Mentions', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              mentions: [notification1],
-              unreadMentions: []
+              mentions: [notification1]
             }
           })
           it('should update mentions', () => {
             Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
-            expect(state.mentions).toEqual([notification1])
-            expect(state.unreadMentions).toEqual([notification2])
+            expect(state.mentions).toEqual([notification2, notification1])
           })
         })
 
@@ -235,42 +228,23 @@ describe('TimelineSpace/Contents/Mentions', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              mentions: [notification1],
-              unreadMentions: [notification2]
+              mentions: [notification2, notification1]
             }
           })
           it('should not be updated mentions', () => {
             Mentions.mutations![MUTATION_TYPES.APPEND_MENTIONS](state, notification2)
-            expect(state.mentions).toEqual([notification1])
-            expect(state.unreadMentions).toEqual([notification2])
+            expect(state.mentions).toEqual([notification2, notification1])
           })
         })
       })
     })
 
-    describe('mergeMentions', () => {
-      beforeEach(() => {
-        state = {
-          lazyLoading: false,
-          heading: false,
-          mentions: [notification1],
-          unreadMentions: [notification2]
-        }
-      })
-      it('should be merged', () => {
-        Mentions.mutations![MUTATION_TYPES.MERGE_MENTIONS](state, null)
-        expect(state.mentions).toEqual([notification2, notification1])
-        expect(state.unreadMentions).toEqual([])
-      })
-    })
-
     describe('insertMentions', () => {
       beforeEach(() => {
         state = {
           lazyLoading: false,
           heading: false,
-          mentions: [notification2],
-          unreadMentions: []
+          mentions: [notification2]
         }
       })
       it('should be inserted', () => {
@@ -284,8 +258,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
         state = {
           lazyLoading: false,
           heading: false,
-          mentions: [notification2, notification1],
-          unreadMentions: []
+          mentions: [notification2, notification1]
         }
       })
       it('should be updated', () => {
@@ -304,8 +277,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            mentions: [notification2, notification1],
-            unreadMentions: []
+            mentions: [notification2, notification1]
           }
         })
         it('should be deleted', () => {
@@ -318,8 +290,7 @@ describe('TimelineSpace/Contents/Mentions', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            mentions: [notification2, notification1],
-            unreadMentions: []
+            mentions: [notification2, notification1]
           }
         })
         it('should be deleted', () => {
diff --git a/src/renderer/components/TimelineSpace/Contents/Mentions.vue b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
index e96c00c1..c6a77506 100644
--- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
@@ -1,8 +1,7 @@
 <template>
   <div id="mentions" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="mentions" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="mentions" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.url]" :data-index="index" :watchData="true">
           <notification
@@ -31,6 +30,7 @@ import { mapState, mapGetters } from 'vuex'
 import Notification from '~/src/renderer/components/organisms/Notification'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'mentions',
@@ -38,7 +38,8 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
@@ -53,8 +54,7 @@ export default {
     }),
     ...mapState('TimelineSpace/Contents/Mentions', {
       lazyLoading: state => state.lazyLoading,
-      heading: state => state.heading,
-      unread: state => state.unreadMentions
+      heading: state => state.heading
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     ...mapGetters('TimelineSpace/Contents/Mentions', ['mentions']),
@@ -81,18 +81,30 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
     }
+    if (!this.heading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     Event.$off('focus-timeline')
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
     this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
     if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
       document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
@@ -112,7 +124,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
       }
     }
   },
@@ -130,16 +141,11 @@ export default {
           })
         })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Mentions/mergeMentions')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
       }
     },
     async reload() {
@@ -200,21 +206,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/Mentions.ts b/src/renderer/store/TimelineSpace/Contents/Mentions.ts
index 10d3de94..8189d13f 100644
--- a/src/renderer/store/TimelineSpace/Contents/Mentions.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Mentions.ts
@@ -6,14 +6,12 @@ export type MentionsState = {
   lazyLoading: boolean
   heading: boolean
   mentions: Array<Entity.Notification>
-  unreadMentions: Array<Entity.Notification>
 }
 
 const state = (): MentionsState => ({
   lazyLoading: false,
   heading: true,
-  mentions: [],
-  unreadMentions: []
+  mentions: []
 })
 
 export const MUTATION_TYPES = {
@@ -21,7 +19,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_MENTIONS: 'appendMentions',
   UPDATE_MENTIONS: 'updateMentions',
-  MERGE_MENTIONS: 'mergeMentions',
   INSERT_MENTIONS: 'insertMentions',
   ARCHIVE_MENTIONS: 'archiveMentions',
   CLEAR_MENTIONS: 'clearMentions',
@@ -38,21 +35,13 @@ const mutations: MutationTree<MentionsState> = {
   },
   [MUTATION_TYPES.APPEND_MENTIONS]: (state, update: Entity.Notification) => {
     // Reject duplicated status in timeline
-    if (!state.mentions.find(item => item.id === update.id) && !state.unreadMentions.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.mentions = [update].concat(state.mentions)
-      } else {
-        state.unreadMentions = [update].concat(state.unreadMentions)
-      }
+    if (!state.mentions.find(item => item.id === update.id)) {
+      state.mentions = [update].concat(state.mentions)
     }
   },
   [MUTATION_TYPES.UPDATE_MENTIONS]: (state, messages: Array<Entity.Notification>) => {
     state.mentions = messages
   },
-  [MUTATION_TYPES.MERGE_MENTIONS]: state => {
-    state.mentions = state.unreadMentions.slice(0, 80).concat(state.mentions)
-    state.unreadMentions = []
-  },
   [MUTATION_TYPES.INSERT_MENTIONS]: (state, messages: Array<Entity.Notification>) => {
     state.mentions = state.mentions.concat(messages)
   },
@@ -61,7 +50,6 @@ const mutations: MutationTree<MentionsState> = {
   },
   [MUTATION_TYPES.CLEAR_MENTIONS]: state => {
     state.mentions = []
-    state.unreadMentions = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Notification) => {
     state.mentions = state.mentions.map(mention => {

From 7d11dcf18d4d7a92e77e6ded7049169d1309239e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 22:33:19 +0900
Subject: [PATCH 6/9] Stop scroll position control when lazy loading

---
 src/renderer/components/TimelineSpace/Contents/Home.vue       | 4 ++--
 src/renderer/components/TimelineSpace/Contents/Local.vue      | 4 ++--
 src/renderer/components/TimelineSpace/Contents/Mentions.vue   | 4 ++--
 .../components/TimelineSpace/Contents/Notifications.vue       | 4 ++--
 src/renderer/components/TimelineSpace/Contents/Public.vue     | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index a8bb7ac6..ebdfdce1 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -105,14 +105,14 @@ export default {
     if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
     }
-    if (!this.heading) {
+    if (!this.heading && !this.lazyLoading) {
       const el = document.getElementById('scroller')
       this.scroll = new ScrollPosition(el)
       this.scroll.prepare()
     }
   },
   updated() {
-    if (this.scroll && !this.heading) {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
       this.scroll.restore()
     }
   },
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 7fe8b575..36842b58 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -94,14 +94,14 @@ export default {
     if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
     }
-    if (!this.heading) {
+    if (!this.heading && !this.lazyLoading) {
       const el = document.getElementById('scroller')
       this.scroll = new ScrollPosition(el)
       this.scroll.prepare()
     }
   },
   updated() {
-    if (this.scroll && !this.heading) {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
       this.scroll.restore()
     }
   },
diff --git a/src/renderer/components/TimelineSpace/Contents/Mentions.vue b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
index c6a77506..1b596f03 100644
--- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
@@ -89,14 +89,14 @@ export default {
     if (this.$store.state.TimelineSpace.SideMenu.unreadMentions && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadMentions', false)
     }
-    if (!this.heading) {
+    if (!this.heading && !this.lazyLoading) {
       const el = document.getElementById('scroller')
       this.scroll = new ScrollPosition(el)
       this.scroll.prepare()
     }
   },
   updated() {
-    if (this.scroll && !this.heading) {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
       this.scroll.restore()
     }
   },
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index bc1e8327..06e237a0 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -91,14 +91,14 @@ export default {
     if (this.$store.state.TimelineSpace.SideMenu.unreadNotifications && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
     }
-    if (!this.heading) {
+    if (!this.heading && !this.lazyLoading) {
       const el = document.getElementById('scroller')
       this.scroll = new ScrollPosition(el)
       this.scroll.prepare()
     }
   },
   updated() {
-    if (this.scroll && !this.heading) {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
       this.scroll.restore()
     }
   },
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 7be5890d..27fe0478 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -95,14 +95,14 @@ export default {
     if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
     }
-    if (!this.heading) {
+    if (!this.heading && !this.lazyLoading) {
       const el = document.getElementById('scroller')
       this.scroll = new ScrollPosition(el)
       this.scroll.prepare()
     }
   },
   updated() {
-    if (this.scroll && !this.heading) {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
       this.scroll.restore()
     }
   },

From 97bec5be6dcec6f4456c3082bc52cba86fae2888 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 23:23:12 +0900
Subject: [PATCH 7/9] Remove unread timeline and fix scroll position in direct
 messages

---
 .../Contents/DirectMessages.spec.ts           |  4 +-
 .../Contents/DirectMessages.spec.ts           | 24 +++------
 .../TimelineSpace/Contents/DirectMessages.vue | 51 ++++++++-----------
 .../TimelineSpace/Contents/DirectMessages.ts  | 18 ++-----
 4 files changed, 32 insertions(+), 65 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
index 02c8558f..b62dce19 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
@@ -133,8 +133,7 @@ let state = (): DirectMessagesState => {
   return {
     lazyLoading: false,
     heading: true,
-    timeline: [],
-    unreadTimeline: []
+    timeline: []
   }
 }
 
@@ -197,7 +196,6 @@ describe('Home', () => {
             lazyLoading: false,
             heading: true,
             timeline: [status1],
-            unreadTimeline: [],
             showReblogs: true,
             showReplies: true
           }
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
index f8f483db..1cfb08d1 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
@@ -136,8 +136,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, status1],
-            unreadTimeline: []
+            timeline: [status2, status1]
           }
         })
         it('should be deleted', () => {
@@ -151,8 +150,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, rebloggedStatus],
-            unreadTimeline: []
+            timeline: [status2, rebloggedStatus]
           }
         })
         it('should be deleted', () => {
@@ -169,14 +167,12 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             DirectMessages.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -185,14 +181,12 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             DirectMessages.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -203,14 +197,12 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             DirectMessages.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
-            expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([rebloggedStatus])
+            expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
           })
         })
 
@@ -219,14 +211,12 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             DirectMessages.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index f67d4bbc..cf84b59b 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="directmessages" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
     <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
@@ -32,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'directmessages',
@@ -39,15 +39,15 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
     ...mapState('TimelineSpace/Contents/DirectMessages', {
       timeline: state => state.timeline,
       lazyLoading: state => state.lazyLoading,
-      heading: state => state.heading,
-      unread: state => state.unreadTimeline
+      heading: state => state.heading
     }),
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
@@ -86,11 +86,24 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
   },
   beforeUpdate() {
     if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
       this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
     }
+    if (!this.heading && !this.lazyLoading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
+      this.scroll.restore()
+    }
   },
   beforeDestroy() {
     if (!this.unreadNotification.direct) {
@@ -101,7 +114,6 @@ export default {
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
     if (!this.unreadNotification.direct) {
       this.$store.commit('TimelineSpace/Contents/DirectMessages/clearTimeline')
@@ -124,7 +136,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
       }
     }
   },
@@ -154,16 +165,11 @@ export default {
             })
           })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
       }
     },
     updateToot(message) {
@@ -227,21 +233,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .loading-card {
     height: 60px;
   }
diff --git a/src/renderer/store/TimelineSpace/Contents/DirectMessages.ts b/src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
index 8a00c71d..ff7e9c70 100644
--- a/src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
+++ b/src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
@@ -6,14 +6,12 @@ export type DirectMessagesState = {
   lazyLoading: boolean
   heading: boolean
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
 }
 
 const state = (): DirectMessagesState => ({
   lazyLoading: false,
   heading: true,
-  timeline: [],
-  unreadTimeline: []
+  timeline: []
 })
 
 export const MUTATION_TYPES = {
@@ -21,7 +19,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -38,21 +35,13 @@ const mutations: MutationTree<DirectMessagesState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = messages
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -61,7 +50,6 @@ const mutations: MutationTree<DirectMessagesState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     // Replace target message in DirectMessagesTimeline and notifications

From 477593e9323a661301956dca3f101a6801aca1c1 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 23:31:32 +0900
Subject: [PATCH 8/9] Remove unread timeline and fix scroll position in lists

---
 .../TimelineSpace/Contents/Lists/Show.spec.ts |  6 +-
 .../TimelineSpace/Contents/Lists/Show.spec.ts | 24 +++-----
 .../TimelineSpace/Contents/DirectMessages.vue |  2 +-
 .../TimelineSpace/Contents/Lists/Show.vue     | 55 ++++++++-----------
 .../TimelineSpace/Contents/Lists/Show.ts      | 16 +-----
 5 files changed, 36 insertions(+), 67 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts
index 9c75517e..bb437c32 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Lists/Show.spec.ts
@@ -120,8 +120,7 @@ let state = (): ShowState => {
   return {
     lazyLoading: false,
     heading: true,
-    timeline: [],
-    unreadTimeline: []
+    timeline: []
   }
 }
 
@@ -180,8 +179,7 @@ describe('Lists/Show', () => {
         return {
           lazyLoading: false,
           heading: true,
-          timeline: [status1],
-          unreadTimeline: []
+          timeline: [status1]
         }
       }
     })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts
index 074e9ce4..d259bfde 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Lists/Show.spec.ts
@@ -136,8 +136,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, status1],
-            unreadTimeline: []
+            timeline: [status2, status1]
           }
         })
         it('should be deleted', () => {
@@ -151,8 +150,7 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, rebloggedStatus],
-            unreadTimeline: []
+            timeline: [status2, rebloggedStatus]
           }
         })
         it('should be deleted', () => {
@@ -169,14 +167,12 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Show.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -185,14 +181,12 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Show.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -203,14 +197,12 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Show.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
-            expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([rebloggedStatus])
+            expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
           })
         })
 
@@ -219,14 +211,12 @@ describe('TimelineSpace/Contents/Lists/Show', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Show.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index cf84b59b..a2717534 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="directmessages" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index 9b22dfed..e5002b8f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -1,8 +1,7 @@
 <template>
   <div name="list" class="list-timeline" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -32,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'list',
@@ -40,7 +40,8 @@ export default {
   mixins: [reloadable],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
@@ -50,8 +51,7 @@ export default {
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Lists.Show.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Lists.Show.lazyLoading,
-      heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
-      unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline
+      heading: state => state.TimelineSpace.Contents.Lists.Show.heading
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     shortcutEnabled: function () {
@@ -82,6 +82,21 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
+  },
+  beforeUpdate() {
+    if (!this.heading && !this.lazyLoading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
+      this.scroll.restore()
+    }
   },
   watch: {
     list_id: function () {
@@ -102,7 +117,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
       }
     }
   },
@@ -111,7 +125,6 @@ export default {
   },
   destroyed() {
     this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
-    this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
     this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
     this.$store.commit('TimelineSpace/Contents/Lists/Show/clearTimeline')
     if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
@@ -154,16 +167,11 @@ export default {
           status: this.timeline[this.timeline.length - 1]
         })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
       }
     },
     async reload() {
@@ -234,21 +242,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .upper {
     position: fixed;
     bottom: 20px;
diff --git a/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts b/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
index 78f4538c..c30c1352 100644
--- a/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Lists/Show.ts
@@ -8,14 +8,12 @@ const win = (window as any) as MyWindow
 
 export type ShowState = {
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
   lazyLoading: boolean
   heading: boolean
 }
 
 const state = (): ShowState => ({
   timeline: [],
-  unreadTimeline: [],
   lazyLoading: false,
   heading: true
 })
@@ -24,7 +22,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -39,21 +36,13 @@ const mutations: MutationTree<ShowState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
     state.timeline = timeline
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -62,7 +51,6 @@ const mutations: MutationTree<ShowState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     state.timeline = state.timeline.map(toot => {

From 66ad1955600c04963efe19ca441c7cba1a127040 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sun, 25 Jul 2021 23:36:40 +0900
Subject: [PATCH 9/9] Remove unread timeline and fix scroll position in tags

---
 .../Contents/Hashtag/Tag.spec.ts              |  6 +-
 .../Contents/Hashtag/Tag.spec.ts              | 24 +++-----
 .../TimelineSpace/Contents/Hashtag/Tag.vue    | 55 ++++++++-----------
 .../TimelineSpace/Contents/Hashtag/Tag.ts     | 16 +-----
 4 files changed, 35 insertions(+), 66 deletions(-)

diff --git a/spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts b/spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
index 4a488efe..25578d35 100644
--- a/spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
+++ b/spec/renderer/integration/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
@@ -118,8 +118,7 @@ let state = (): TagState => {
   return {
     lazyLoading: false,
     heading: true,
-    timeline: [],
-    unreadTimeline: []
+    timeline: []
   }
 }
 
@@ -180,8 +179,7 @@ describe('Home', () => {
           return {
             lazyLoading: false,
             heading: true,
-            timeline: [status1],
-            unreadTimeline: []
+            timeline: [status1]
           }
         }
       })
diff --git a/spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts b/spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
index 2d3850f4..ed347d79 100644
--- a/spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
+++ b/spec/renderer/unit/store/TimelineSpace/Contents/Hashtag/Tag.spec.ts
@@ -136,8 +136,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, status1],
-            unreadTimeline: []
+            timeline: [status2, status1]
           }
         })
         it('should be deleted', () => {
@@ -151,8 +150,7 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
           state = {
             lazyLoading: false,
             heading: true,
-            timeline: [status2, rebloggedStatus],
-            unreadTimeline: []
+            timeline: [status2, rebloggedStatus]
           }
         })
         it('should be deleted', () => {
@@ -169,14 +167,12 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Tag.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
 
@@ -185,14 +181,12 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
             state = {
               lazyLoading: false,
               heading: true,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Tag.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
@@ -203,14 +197,12 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [status2, status1],
-              unreadTimeline: []
+              timeline: [status2, status1]
             }
           })
           it('should be updated timeline', () => {
             Tag.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
-            expect(state.timeline).toEqual([status2, status1])
-            expect(state.unreadTimeline).toEqual([rebloggedStatus])
+            expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
           })
         })
 
@@ -219,14 +211,12 @@ describe('TimelineSpace/Contents/Hashtag/Tag', () => {
             state = {
               lazyLoading: false,
               heading: false,
-              timeline: [rebloggedStatus, status2, status1],
-              unreadTimeline: []
+              timeline: [rebloggedStatus, status2, status1]
             }
           })
           it('should not be updated timeline', () => {
             Tag.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, rebloggedStatus)
             expect(state.timeline).toEqual([rebloggedStatus, status2, status1])
-            expect(state.unreadTimeline).toEqual([])
           })
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 8a96ab77..cc34a578 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -1,8 +1,7 @@
 <template>
   <div name="tag" class="tag-timeline" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
-    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
-    <DynamicScroller :items="timeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
+    <DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
           <toot
@@ -32,6 +31,7 @@ import { mapState, mapGetters } from 'vuex'
 import Toot from '~/src/renderer/components/organisms/Toot'
 import reloadable from '~/src/renderer/components/mixins/reloadable'
 import { Event } from '~/src/renderer/components/event'
+import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
 
 export default {
   name: 'tag',
@@ -40,7 +40,8 @@ export default {
   props: ['tag'],
   data() {
     return {
-      focusedId: null
+      focusedId: null,
+      scroll: null
     }
   },
   computed: {
@@ -50,8 +51,7 @@ export default {
       startReload: state => state.TimelineSpace.HeaderMenu.reload,
       timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
-      heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
-      unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline
+      heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading
     }),
     ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
     shortcutEnabled: function () {
@@ -81,6 +81,21 @@ export default {
         this.focusedId = previousFocusedId
       })
     })
+    const el = document.getElementById('scroller')
+    this.scroll = new ScrollPosition(el)
+    this.scroll.prepare()
+  },
+  beforeUpdate() {
+    if (!this.heading && !this.lazyLoading) {
+      const el = document.getElementById('scroller')
+      this.scroll = new ScrollPosition(el)
+      this.scroll.prepare()
+    }
+  },
+  updated() {
+    if (this.scroll && !this.heading && !this.lazyLoading) {
+      this.scroll.restore()
+    }
   },
   watch: {
     tag: function (newTag, _oldTag) {
@@ -102,7 +117,6 @@ export default {
         this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
       } else if (newState === null && !this.heading) {
         this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
       }
     }
   },
@@ -129,7 +143,6 @@ export default {
     },
     reset() {
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
-      this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
       this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/clearTimeline')
       if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
@@ -153,16 +166,11 @@ export default {
           status: this.timeline[this.timeline.length - 1]
         })
       }
-      // for unread control
-      if (event.target.scrollTop > 5 && this.heading) {
+
+      if (event.target.scrollTop > 10 && this.heading) {
         this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
-      } else if (event.target.scrollTop <= 5 && !this.heading) {
-        const currentPos = this.unread.length
-        if (currentPos === 0) {
-          this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
-        }
-        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
-        this.$refs.scroller.scrollToItem(currentPos)
+      } else if (event.target.scrollTop <= 10 && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
       }
     },
     async reload() {
@@ -234,21 +242,6 @@ export default {
     height: 100%;
   }
 
-  .unread {
-    position: fixed;
-    right: 24px;
-    top: 48px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ffffff;
-    padding: 4px 8px;
-    border-radius: 0 0 2px 2px;
-    z-index: 1;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   .upper {
     position: fixed;
     bottom: 20px;
diff --git a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
index 9e06480b..a6d48ce9 100644
--- a/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
+++ b/src/renderer/store/TimelineSpace/Contents/Hashtag/Tag.ts
@@ -8,14 +8,12 @@ const win = (window as any) as MyWindow
 
 export type TagState = {
   timeline: Array<Entity.Status>
-  unreadTimeline: Array<Entity.Status>
   lazyLoading: boolean
   heading: boolean
 }
 
 const state = (): TagState => ({
   timeline: [],
-  unreadTimeline: [],
   lazyLoading: false,
   heading: true
 })
@@ -24,7 +22,6 @@ export const MUTATION_TYPES = {
   CHANGE_HEADING: 'changeHeading',
   APPEND_TIMELINE: 'appendTimeline',
   UPDATE_TIMELINE: 'updateTimeline',
-  MERGE_TIMELINE: 'mergeTimeline',
   INSERT_TIMELINE: 'insertTimeline',
   ARCHIVE_TIMELINE: 'archiveTimeline',
   CLEAR_TIMELINE: 'clearTimeline',
@@ -39,21 +36,13 @@ const mutations: MutationTree<TagState> = {
   },
   [MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
     // Reject duplicated status in timeline
-    if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
-      if (state.heading) {
-        state.timeline = [update].concat(state.timeline)
-      } else {
-        state.unreadTimeline = [update].concat(state.unreadTimeline)
-      }
+    if (!state.timeline.find(item => item.id === update.id)) {
+      state.timeline = [update].concat(state.timeline)
     }
   },
   [MUTATION_TYPES.UPDATE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
     state.timeline = timeline
   },
-  [MUTATION_TYPES.MERGE_TIMELINE]: state => {
-    state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
-    state.unreadTimeline = []
-  },
   [MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
     state.timeline = state.timeline.concat(messages)
   },
@@ -62,7 +51,6 @@ const mutations: MutationTree<TagState> = {
   },
   [MUTATION_TYPES.CLEAR_TIMELINE]: state => {
     state.timeline = []
-    state.unreadTimeline = []
   },
   [MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
     state.timeline = state.timeline.map(toot => {