wip

src/client/components/notification.vue

@@ -68,6 +68,7 @@ import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
+import { markNotificationRead } from '@/scripts/mark-notification-read';
 
 export default defineComponent({
 	components: {
@@ -113,7 +114,17 @@ export default defineComponent({
 			this.readObserver.observe(this.$el);
 
 			this.connection = os.stream.useSharedConnection('main');
-			this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
+
+			this.connection.on('readAllNotifications', () => {
+				this.readObserver.unobserve(this.$el);
+				this.notification = markNotificationRead(this.notification);
+			});
+			this.connection.on('readNotifications', notificationIds => {
+				if (notificationIds.includes(this.notification.id)) {
+					this.readObserver.unobserve(this.$el);
+					this.notification = markNotificationRead(this.notification);
+				}
+			})
 		}
 	},
 

src/client/components/notifications.vue

@@ -19,6 +19,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import paging from '@/scripts/paging';
+import { markNotificationRead } from '@/scripts/mark-notification-read';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
@@ -85,6 +86,20 @@ export default defineComponent({
 	mounted() {
 		this.connection = os.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
+
+		// queueに対してのみ既読処理を行う
+		this.connection.on('readAllNotifications', () => {
+			this.queue = this.queue.map(markNotificationRead);
+		});
+		this.connection.on('readNotifications', notificationIds => {
+			if (this.queue.length === 0) return;
+
+			for (let i = 0; i < this.queue.length; i++) {
+				if (notificationIds.includes(this.queue[i].id)) {
+					this.queue[i] = markNotificationRead(this.queue[i]);
+				}
+			}
+		});
 	},
 
 	beforeUnmount() {