Observe notification read

2 files changed, 18 insertions, 0 deletions

diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index de233d14ac..d0c85b6e2e 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -90,9 +90,25 @@ export default Vue.extend({
 			getNoteSummary: (text: string) => noteSummary(text, this.$root.i18n.messages[this.$root.i18n.locale]),
 			followRequestDone: false,
 			groupInviteDone: false,
+			readObserver: new IntersectionObserver((entries, observer) => {
+				if (!entries.some(entry => entry.isIntersecting)) return;
+				this.$root.stream.send('readNotification', {
+					id: this.notification.id
+				});
+				entries.map(({ target }) => observer.unobserve(target));
+			}),
 			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck, faPollH
 		};
 	},
+
+	mounted() {
+		if (!this.notification.isRead) this.readObserver.observe(this.$el);
+	},
+
+	beforeDestroy() {
+		if (!this.notification.isRead) this.readObserver.unobserve(this.$el);
+	},
+
 	methods: {
 		acceptFollowRequest() {
 			this.followRequestDone = true;
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 434a87eb41..9dcb4eb109 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -75,6 +75,8 @@ export default Vue.extend({
 				this.$root.stream.send('readNotification', {
 					id: notification.id
 				});
+
+				notification.isRead = true;
 			}
 
 			this.prepend(notification);