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] 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