From 56b280186fd16a0c17668ec2fce53c707abaf698 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 7 Aug 2024 13:12:42 +0200
Subject: [PATCH] [Glitch] Change group notifications unread markers to only be
 cleared when focusing/navigating again

Port 6f285bb2a606467bac555b630364f82fb1f3eaaf to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/features/notifications_v2/index.tsx   |  7 +++++--
 .../glitch/reducers/notification_groups.ts       | 13 ++++++++++++-
 .../flavours/glitch/selectors/notifications.ts   | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/notifications_v2/index.tsx b/app/javascript/flavours/glitch/features/notifications_v2/index.tsx
index 586b2da3fe..d58efc4b8f 100644
--- a/app/javascript/flavours/glitch/features/notifications_v2/index.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/index.tsx
@@ -26,6 +26,7 @@ import type { NotificationGap } from 'flavours/glitch/reducers/notification_grou
 import {
   selectUnreadNotificationGroupsCount,
   selectPendingNotificationGroupsCount,
+  selectAnyPendingNotification,
 } from 'flavours/glitch/selectors/notifications';
 import {
   selectNeedsNotificationPermission,
@@ -95,7 +96,7 @@ export const Notifications: React.FC<{
 
   const lastReadId = useAppSelector((s) =>
     selectSettingsNotificationsShowUnread(s)
-      ? s.notificationGroups.lastReadId
+      ? s.notificationGroups.readMarkerId
       : '0',
   );
 
@@ -105,11 +106,13 @@ export const Notifications: React.FC<{
     selectUnreadNotificationGroupsCount,
   );
 
+  const anyPendingNotification = useAppSelector(selectAnyPendingNotification);
+
   const isUnread = unreadNotificationsCount > 0;
 
   const canMarkAsRead =
     useAppSelector(selectSettingsNotificationsShowUnread) &&
-    unreadNotificationsCount > 0;
+    anyPendingNotification;
 
   const needsNotificationPermission = useAppSelector(
     selectNeedsNotificationPermission,
diff --git a/app/javascript/flavours/glitch/reducers/notification_groups.ts b/app/javascript/flavours/glitch/reducers/notification_groups.ts
index b0b284b696..a657cf5c97 100644
--- a/app/javascript/flavours/glitch/reducers/notification_groups.ts
+++ b/app/javascript/flavours/glitch/reducers/notification_groups.ts
@@ -48,6 +48,7 @@ interface NotificationGroupsState {
   scrolledToTop: boolean;
   isLoading: boolean;
   lastReadId: string;
+  readMarkerId: string;
   mounted: number;
   isTabVisible: boolean;
 }
@@ -58,7 +59,8 @@ const initialState: NotificationGroupsState = {
   scrolledToTop: false,
   isLoading: false,
   // The following properties are used to track unread notifications
-  lastReadId: '0', // used for unread notifications
+  lastReadId: '0', // used internally for unread notifications
+  readMarkerId: '0', // user-facing and updated when focus changes
   mounted: 0, // number of mounted notification list components, usually 0 or 1
   isTabVisible: true,
 };
@@ -284,6 +286,12 @@ function updateLastReadId(
   }
 }
 
+function commitLastReadId(state: NotificationGroupsState) {
+  if (shouldMarkNewNotificationsAsRead(state)) {
+    state.readMarkerId = state.lastReadId;
+  }
+}
+
 export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
   initialState,
   (builder) => {
@@ -457,6 +465,7 @@ export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
           compareId(state.lastReadId, mostRecentGroup.page_max_id) < 0
         )
           state.lastReadId = mostRecentGroup.page_max_id;
+        commitLastReadId(state);
       })
       .addCase(fetchMarkers.fulfilled, (state, action) => {
         if (
@@ -470,6 +479,7 @@ export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
       })
       .addCase(mountNotifications, (state) => {
         state.mounted += 1;
+        commitLastReadId(state);
         updateLastReadId(state);
       })
       .addCase(unmountNotifications, (state) => {
@@ -477,6 +487,7 @@ export const notificationGroupsReducer = createReducer<NotificationGroupsState>(
       })
       .addCase(focusApp, (state) => {
         state.isTabVisible = true;
+        commitLastReadId(state);
         updateLastReadId(state);
       })
       .addCase(unfocusApp, (state) => {
diff --git a/app/javascript/flavours/glitch/selectors/notifications.ts b/app/javascript/flavours/glitch/selectors/notifications.ts
index 7cc64aa6c5..efc2dff68a 100644
--- a/app/javascript/flavours/glitch/selectors/notifications.ts
+++ b/app/javascript/flavours/glitch/selectors/notifications.ts
@@ -27,6 +27,22 @@ export const selectUnreadNotificationGroupsCount = createSelector(
   },
 );
 
+// Whether there is any unread notification according to the user-facing state
+export const selectAnyPendingNotification = createSelector(
+  [
+    (s: RootState) => s.notificationGroups.readMarkerId,
+    (s: RootState) => s.notificationGroups.groups,
+  ],
+  (notificationMarker, groups) => {
+    return groups.some(
+      (group) =>
+        group.type !== 'gap' &&
+        group.page_max_id &&
+        compareId(group.page_max_id, notificationMarker) > 0,
+    );
+  },
+);
+
 export const selectPendingNotificationGroupsCount = createSelector(
   [(s: RootState) => s.notificationGroups.pendingGroups],
   (pendingGroups) =>