notify of incoming messages and show in app notifications

app/features/core/hooks/use-notifications.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { atom, useAtom } from "jotai";
+
+import type { NotificationPayload } from "~/utils/web-push.server";
+
+export default function useNotifications() {
+	const [notificationData, setNotificationData] = useAtom(notificationDataAtom);
+
+	useEffect(() => {
+		const channel = new BroadcastChannel("notifications");
+		async function eventHandler(event: MessageEvent) {
+			const payload: NotificationPayload = JSON.parse(event.data);
+			setNotificationData(payload);
+		}
+
+		channel.addEventListener("message", eventHandler);
+
+		return () => {
+			channel.removeEventListener("message", eventHandler);
+			channel.close();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (!notificationData) {
+			return;
+		}
+
+		const timeout = setTimeout(() => setNotificationData(null), 5000);
+		return () => clearTimeout(timeout);
+	}, [notificationData]);
+}
+
+export const notificationDataAtom = atom<NotificationPayload | null>(null);