fix: notification.vueのIntersectionObserverまわりを修正 (#8010)

* fix notification.vue

* remove a blank line

* disconnect intersection observer

* disconnect2

* Update packages/client/src/components/notification.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* disconnect

* oops

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

1 files changed, 9 insertions, 12 deletions

diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue
index 89025b72e6..5cf44f4c56 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -107,28 +107,25 @@ export default defineComponent({
 		const reactionRef = ref(null);
 
 		onMounted(() => {
-			let readObserver: IntersectionObserver | null = null;
-			let connection = null;
-
 			if (!props.notification.isRead) {
-				readObserver = new IntersectionObserver((entries, observer) => {
+				const readObserver = new IntersectionObserver((entries, observer) => {
 					if (!entries.some(entry => entry.isIntersecting)) return;
 					os.stream.send('readNotification', {
 						id: props.notification.id
 					});
-					entries.map(({ target }) => observer.unobserve(target));
+					observer.disconnect();
 				});
 
 				readObserver.observe(elRef.value);
 
-				connection = os.stream.useChannel('main');
-				connection.on('readAllNotifications', () => readObserver.unobserve(elRef.value));
-			}
+				const connection = os.stream.useChannel('main');
+				connection.on('readAllNotifications', () => readObserver.disconnect());
 
-			onUnmounted(() => {
-				if (readObserver) readObserver.unobserve(elRef.value);
-				if (connection) connection.dispose();
-			});
+				onUnmounted(() => {
+					readObserver.disconnect();
+					connection.dispose();
+				});
+			}
 		});
 
 		const followRequestDone = ref(false);