Use different border-color for read items

src/components/Entry.vue

@@ -27,7 +27,7 @@
               </div>
 
               <h3 class="title is-6" v-if="currentItem.name" v-text="currentItem.name"></h3>
-              <div class="content" v-html="main_content"></div>
+              <div class="content is-pre" v-html="main_content"></div>
 
               <div class="photos">
                 <div class="photo" v-for="photo in photo_rest" :key="photo">
@@ -270,7 +270,7 @@
 
 <style scoped>
   .entry.unread {
-    outline: 1px solid #ccc;
+    border-color: #555;
   }
 
   .media .entry {
@@ -286,4 +286,7 @@
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 4px;
   }
+  .is-pre {
+    white-space: pre-wrap;
+  }
 </style>

src/components/Timeline.vue

@@ -58,6 +58,8 @@
         return this.$store.dispatch('markRead', {channel: channel, entry: item._id})
           .then(() => {
             item._is_read = true
+          }).then(() => {
+            this.$store.dispatch('fetchChannels')
           })
       },
       handleScroll() {

src/store.js

@@ -175,15 +175,20 @@ export default new Vuex.Store({
     },
     bottomReached() {
       let count = 0
-      this.state.timeline.items.forEach((item) => {
+      let uids = []
+      let items = this.state.timeline.items
+      uids = _.map(_.filter(items, item => !item._is_read), item => item._id)
+      items.forEach((item) => {
         if (item && !item._is_read) {
           item._is_read = true
-          this.dispatch('markRead', {channel: this.state.channel.uid, entry: item._id})
           count++;
         }
       })
       if (count > 0) {
-        this.dispatch('fetchChannels')
+        this.dispatch('markRead', {channel: this.state.channel.uid, 'entry[]': uids})
+          .then(() => {
+            this.dispatch('fetchChannels')
+          })
       }
     },
     startEventListening({commit}, url) {