From b972f308f4c27fff30a2aef373636e5975fabcd2 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 29 Jun 2025 23:23:04 -0500
Subject: [PATCH] Add visibility hook to remove from the ClientRoot

---
 src/app/hooks/useAppVisibility.ts | 45 +++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/app/hooks/useAppVisibility.ts

diff --git a/src/app/hooks/useAppVisibility.ts b/src/app/hooks/useAppVisibility.ts
new file mode 100644
index 00000000..f53974c1
--- /dev/null
+++ b/src/app/hooks/useAppVisibility.ts
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
+import { useAtom } from 'jotai';
+import { togglePusher } from '../features/settings/notifications/PushNotifications';
+import { appEvents } from '../utils/appEvents';
+import { useClientConfig } from './useClientConfig';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
+import { pushSubscriptionAtom } from '../state/pushSubscription';
+
+export function useAppVisibility(mx: MatrixClient | undefined) {
+  const clientConfig = useClientConfig();
+  const [usePushNotifications] = useSetting(settingsAtom, 'usePushNotifications');
+  const pushSubAtom = useAtom(pushSubscriptionAtom);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      const isVisible = document.visibilityState === 'visible';
+      appEvents.onVisibilityChange?.(isVisible);
+      if (!isVisible) {
+        appEvents.onVisibilityHidden?.();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!mx) return;
+
+    const handleVisibilityForNotifications = (isVisible: boolean) => {
+      togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom);
+    };
+
+    appEvents.onVisibilityChange = handleVisibilityForNotifications;
+    // eslint-disable-next-line consistent-return
+    return () => {
+      appEvents.onVisibilityChange = null;
+    };
+  }, [mx, clientConfig, usePushNotifications, pushSubAtom]);
+}