More reliable badge clearing

Should be when page visible, not on render

Possibly super effective, but badges can be annoying if not cleared easily.

src/components/notification-service.jsx

@@ -7,6 +7,7 @@ import {
   getAccountByAccessToken,
   getCurrentAccount,
 } from '../utils/store-utils';
+import usePageVisibility from '../utils/usePageVisibility';
 
 import Icon from './icon';
 import Link from './link';
@@ -104,6 +105,13 @@ export default function NotificationService() {
     };
   }, []);
 
+  usePageVisibility((visible) => {
+    if (visible && navigator?.clearAppBadge) {
+      console.log('🔰 Clear app badge');
+      navigator.clearAppBadge();
+    }
+  });
+
   const onClose = () => {
     setShowNotificationSheet(false);
     states.routeNotification = null;

src/pages/notifications.jsx

@@ -2,13 +2,7 @@ import './notifications.css';
 
 import { useIdle } from '@uidotdev/usehooks';
 import { memo } from 'preact/compat';
-import {
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -200,12 +194,6 @@ function Notifications({ columnMode }) {
 
   const announcementsListRef = useRef();
 
-  useLayoutEffect(() => {
-    if (navigator.clearAppBadge) {
-      navigator.clearAppBadge();
-    }
-  }, []);
-
   useEffect(() => {
     if (notificationID) {
       states.routeNotification = {