From 68ebe5e7b125a71e81956244dee08750dab02b40 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 23 Nov 2023 13:59:28 +0000
Subject: [PATCH] fix: notifications marker

---
 .prettierignore                        |  3 ++-
 packages/app/src/Login/LoginSession.ts |  5 ----
 packages/app/src/Pages/Layout.css      |  6 ++---
 packages/app/src/Pages/Layout.tsx      | 33 +++++++++++++++++++-------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 9b4632da..312750b0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,4 +4,5 @@ build/
 .github/
 transifex.yml
 dist/
-src-tauri/
\ No newline at end of file
+src-tauri/
+target/
\ No newline at end of file
diff --git a/packages/app/src/Login/LoginSession.ts b/packages/app/src/Login/LoginSession.ts
index 0527cd62..91172e19 100644
--- a/packages/app/src/Login/LoginSession.ts
+++ b/packages/app/src/Login/LoginSession.ts
@@ -95,11 +95,6 @@ export interface LoginSession {
    */
   blocked: Newest<Array<HexKey>>;
 
-  /**
-   * Latest notification
-   */
-  latestNotification: number;
-
   /**
    * Timestamp of last read notification
    */
diff --git a/packages/app/src/Pages/Layout.css b/packages/app/src/Pages/Layout.css
index 64ccf63c..780e7837 100644
--- a/packages/app/src/Pages/Layout.css
+++ b/packages/app/src/Pages/Layout.css
@@ -48,9 +48,9 @@ header {
   border-radius: 100%;
   width: 9px;
   height: 9px;
-  position: absolute;
-  top: 8px;
-  right: 8px;
+  position: relative;
+  top: -4px;
+  right: 7px;
 }
 
 @media (max-width: 520px) {
diff --git a/packages/app/src/Pages/Layout.tsx b/packages/app/src/Pages/Layout.tsx
index c71fd502..468b3639 100644
--- a/packages/app/src/Pages/Layout.tsx
+++ b/packages/app/src/Pages/Layout.tsx
@@ -1,5 +1,5 @@
 import "./Layout.css";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { useUserProfile } from "@snort/system-react";
@@ -24,6 +24,7 @@ import { ProfileLink } from "@/Element/User/ProfileLink";
 import SearchBox from "../Element/SearchBox";
 import SnortApi from "@/External/SnortApi";
 import useEventPublisher from "@/Hooks/useEventPublisher";
+import { Notifications } from "@/Cache";
 
 export default function Layout() {
   const location = useLocation();
@@ -99,19 +100,13 @@ const AccountHeader = () => {
     }
   });
 
-  const { publicKey, latestNotification, readNotifications, readonly } = useLogin(s => ({
+  const { publicKey, readonly } = useLogin(s => ({
     publicKey: s.publicKey,
-    latestNotification: s.latestNotification,
-    readNotifications: s.readNotifications,
     readonly: s.readonly,
   }));
   const profile = useUserProfile(publicKey);
   const { publisher } = useEventPublisher();
 
-  const hasNotifications = useMemo(
-    () => latestNotification > readNotifications,
-    [latestNotification, readNotifications],
-  );
   const unreadDms = useMemo(() => (publicKey ? 0 : 0), [publicKey]);
 
   async function goToNotifications() {
@@ -166,7 +161,7 @@ const AccountHeader = () => {
       )}
       <Link className="btn" to="/notifications" onClick={goToNotifications}>
         <Icon name="bell-02" size={24} />
-        {hasNotifications && <span className="has-unread"></span>}
+        <HasNotificationsMarker />
       </Link>
       <ProfileLink pubkey={publicKey} user={profile}>
         <Avatar pubkey={publicKey} user={profile} />
@@ -200,3 +195,23 @@ function LogoHeader() {
     </Link>
   );
 }
+
+function HasNotificationsMarker() {
+  const readNotifications = useLogin(s => s.readNotifications);
+  const notifications = useSyncExternalStore(
+    c => Notifications.hook(c, "*"),
+    () => Notifications.snapshot(),
+  );
+  const latestNotification = useMemo(
+    () => notifications.reduce((acc, v) => (v.created_at > acc ? v.created_at : acc), 0),
+    [notifications],
+  );
+  const hasNotifications = useMemo(
+    () => latestNotification * 1000 > readNotifications,
+    [notifications, readNotifications],
+  );
+
+  if (hasNotifications) {
+    return <span className="has-unread"></span>;
+  }
+}