Fix notifications not refreshing and not clearing "new"

Still quite clunky, but let's see

src/pages/home.jsx

@@ -34,9 +34,6 @@ function Home() {
     })();
   }, []);
 
-  const notificationLinkRef = useRef();
-  const [menuState, setMenuState] = useState(undefined);
-
   return (
     <>
       {(snapStates.settings.shortcutsColumnsMode ||
@@ -49,34 +46,7 @@ function Home() {
           path="/"
           id="home"
           headerStart={false}
-          headerEnd={
+          headerEnd={<NotificationsLink />}
-            <>
-              <Link
-                ref={notificationLinkRef}
-                to="/notifications"
-                class={`button plain notifications-button ${
-                  snapStates.notificationsShowNew ? 'has-badge' : ''
-                } ${menuState}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (window.matchMedia('(min-width: calc(40em))').matches) {
-                    e.preventDefault();
-                    setMenuState((state) => {
-                      console.log('state', state, !state ? 'open' : undefined);
-                      return !state ? 'open' : undefined;
-                    });
-                  }
-                }}
-              >
-                <Icon icon="notification" size="l" alt="Notifications" />
-              </Link>
-              <NotificationsMenu
-                state={menuState}
-                anchorRef={notificationLinkRef}
-                onClose={() => setMenuState(undefined)}
-              />
-            </>
-          }
         />
       )}
       <button
@@ -101,6 +71,37 @@ function Home() {
   );
 }
 
+function NotificationsLink() {
+  const snapStates = useSnapshot(states);
+  const notificationLinkRef = useRef();
+  const [menuState, setMenuState] = useState(undefined);
+  return (
+    <>
+      <Link
+        ref={notificationLinkRef}
+        to="/notifications"
+        class={`button plain notifications-button ${
+          snapStates.notificationsShowNew ? 'has-badge' : ''
+        } ${menuState}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (window.matchMedia('(min-width: calc(40em))').matches) {
+            e.preventDefault();
+            setMenuState((state) => (!state ? 'open' : undefined));
+          }
+        }}
+      >
+        <Icon icon="notification" size="l" alt="Notifications" />
+      </Link>
+      <NotificationsMenu
+        state={menuState}
+        anchorRef={notificationLinkRef}
+        onClose={() => setMenuState(undefined)}
+      />
+    </>
+  );
+}
+
 const NOTIFICATIONS_LIMIT = 30;
 const NOTIFICATIONS_DISPLAY_LIMIT = 5;
 function NotificationsMenu({ anchorRef, state, onClose }) {
@@ -147,8 +148,8 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
   }
 
   useEffect(() => {
-    loadNotifications();
+    if (state === 'open') loadNotifications();
-  }, []);
+  }, [state]);
 
   return (
     <ControlledMenu