refs #197 Manage unread statuses in public

src/renderer/components/TimelineSpace/Contents/Public.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="public">
+    <div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
     <div class="public-timeline" v-for="message in timeline" v-bind:key="message.id">
       <toot :message="message" v-on:update="updateToot"></toot>
     </div>
@@ -19,7 +20,9 @@ export default {
     ...mapState({
       timeline: state => state.TimelineSpace.Contents.Public.timeline,
       lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading,
-      backgroundColor: state => state.App.theme.background_color
+      backgroundColor: state => state.App.theme.background_color,
+      heading: state => state.TimelineSpace.Contents.Public.heading,
+      unread: state => state.TimelineSpace.Contents.Public.unreadTimeline
     })
   },
   created () {
@@ -42,9 +45,13 @@ export default {
     this.$store.dispatch('TimelineSpace/Contents/Public/stopPublicStreaming')
   },
   destroyed () {
-    this.$store.commit('TimelineSpace/Contents/Public/updateTimeline', [])
+    this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
+    this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+    this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
+    this.$store.commit('TimelineSpace/Contents/Public/clearTimeline')
     if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
       document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
+      document.getElementById('scrollable').scrollTop = 0
     }
   },
   methods: {
@@ -78,17 +85,40 @@ export default {
             })
           })
       }
+      // for unread control
+      if ((event.target.scrollTop > 10) && this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
+      } else if ((event.target.scrollTop <= 10) && !this.heading) {
+        this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
+        this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.loading-card {
-  height: 60px;
-}
+#public {
+  .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;
 
-.loading-card:empty {
+    &:empty {
+      display: none;
+    }
+  }
+
+  .loading-card {
+    height: 60px;
+  }
+
+  .loading-card:empty {
     height: 0;
+  }
 }
 </style>

src/renderer/store/TimelineSpace/Contents/Public.js

@@ -5,18 +5,38 @@ const Public = {
   namespaced: true,
   state: {
     timeline: [],
-    lazyLoading: false
+    unreadTimeline: [],
+    lazyLoading: false,
+    heading: true
   },
   mutations: {
+    changeHeading (state, value) {
+      state.heading = value
+    },
     appendTimeline (state, update) {
+      if (state.heading) {
         state.timeline = [update].concat(state.timeline)
+      } else {
+        state.unreadTimeline = [update].concat(state.unreadTimeline)
+      }
     },
     updateTimeline (state, messages) {
       state.timeline = messages
     },
+    mergeTimeline (state, messages) {
+      state.timeline = state.unreadTimeline.concat(state.timeline)
+      state.unreadTimeline = []
+    },
     insertTimeline (state, messages) {
       state.timeline = state.timeline.concat(messages)
     },
+    archiveTimeline (state, messages) {
+      state.timeline = state.timeline.slice(0, 40)
+    },
+    clearTimeline (state) {
+      state.timeline = []
+      state.unreadTimeline = []
+    },
     updateToot (state, message) {
       state.timeline = state.timeline.map((toot) => {
         if (toot.id === message.id) {
@@ -56,6 +76,9 @@ const Public = {
     startPublicStreaming ({ state, commit, rootState }) {
       ipcRenderer.on('update-start-public-streaming', (event, update) => {
         commit('appendTimeline', update)
+        if (state.heading && Math.random() > 0.8) {
+          commit('archiveTimeline')
+        }
       })
       return new Promise((resolve, reject) => {
         ipcRenderer.send('start-public-streaming', rootState.TimelineSpace.account)