From d6e57059e42c28d855aecd71f6bbe47551874642 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 24 Jul 2023 07:19:22 +0000
Subject: [PATCH] =?UTF-8?q?backed=E3=81=8Cfalse=E3=81=AB=E3=81=AA=E3=81=A3?=
 =?UTF-8?q?=E3=81=9F=E3=82=89=E9=80=9A=E7=9F=A5=E3=82=92=E6=97=A2=E8=AA=AD?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkNotifications.vue | 10 ++++++++--
 packages/frontend/src/components/MkPagination.vue    |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 9b1aa6230e..4498f0f113 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, shallowRef } from 'vue';
+import { onUnmounted, onMounted, computed, shallowRef, watch } from 'vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@@ -50,10 +50,16 @@ const onNotification = (notification) => {
 	}
 
 	if (!isMuted) {
-		pagingComponent.value.prepend(notification);
+		pagingComponent.value?.prepend(notification);
 	}
 };
 
+watch(() => pagingComponent.value?.backed, (backed) => {
+	if (backed === false) {
+		useStream().send('readNotification');
+	}
+});
+
 let connection;
 
 onMounted(() => {
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index cae08c8f4b..257f3c5b71 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -568,6 +568,7 @@ defineExpose({
 	more,
 	inited,
 	queueSize,
+	backed: $$(backed),
 	reload,
 	prepend,
 	append: appendItem,