Experiment use markers for notifications

src/components/background-service.jsx

@@ -24,7 +24,20 @@ export default memo(function BackgroundService({ isLoggedIn }) {
           });
           const { value: notifications } = await notificationsIterator.next();
           if (notifications?.length) {
-            states.notificationsShowNew = true;
+            let lastReadId;
+            try {
+              const markers = await masto.v1.markers.fetch({
+                timeline: 'notifications',
+              });
+              lastReadId = markers?.notifications?.lastReadId;
+            } catch (e) {}
+            if (lastReadId) {
+              if (notifications[0].id !== lastReadId) {
+                states.notificationsShowNew = true;
+              }
+            } else {
+              states.notificationsShowNew = true;
+            }
           }
         }
 

src/pages/home.jsx

@@ -128,6 +128,15 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
 
       states.notificationsLast = notifications[0];
       states.notifications = groupedNotifications;
+
+      // Update last read marker
+      masto.v1.markers
+        .create({
+          notifications: {
+            lastReadId: notifications[0].id,
+          },
+        })
+        .catch(() => {});
     }
 
     states.notificationsShowNew = false;

src/pages/notifications.jsx

@@ -73,6 +73,15 @@ function Notifications({ columnMode }) {
       if (firstLoad) {
         states.notificationsLast = notifications[0];
         states.notifications = groupedNotifications;
+
+        // Update last read marker
+        masto.v1.markers
+          .create({
+            notifications: {
+              lastReadId: notifications[0].id,
+            },
+          })
+          .catch(() => {});
       } else {
         states.notifications.push(...groupedNotifications);
       }