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] 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)
   },