Improve notifications debug devtool (#11310)

Author: t3chguy

src/components/views/dialogs/devtools/RoomNotifications.tsx

@@ -17,6 +17,8 @@ limitations under the License.
 import { NotificationCountType, Room } from "matrix-js-sdk/src/models/room";
 import { Thread } from "matrix-js-sdk/src/models/thread";
 import React, { useContext } from "react";
+import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
+import { ReadReceipt } from "matrix-js-sdk/src/models/read-receipt";
 
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
@@ -26,6 +28,42 @@ import { humanReadableNotificationColor } from "../../../../stores/notifications
 import { doesRoomOrThreadHaveUnreadMessages } from "../../../../Unread";
 import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 
+function UserReadUpTo({ target }: { target: ReadReceipt<any, any> }): JSX.Element {
+    const cli = useContext(MatrixClientContext);
+    const userId = cli.getSafeUserId();
+    const hasPrivate = !!target.getReadReceiptForUserId(userId, false, ReceiptType.ReadPrivate);
+    return (
+        <>
+            <li>
+                {_t("User read up to: ")}
+                <strong>{target.getReadReceiptForUserId(userId)?.eventId ?? _t("No receipt found")}</strong>
+            </li>
+            <li>
+                {_t("User read up to (ignoreSynthetic): ")}
+                <strong>{target.getReadReceiptForUserId(userId, true)?.eventId ?? _t("No receipt found")}</strong>
+            </li>
+            {hasPrivate && (
+                <>
+                    <li>
+                        {_t("User read up to (m.read.private): ")}
+                        <strong>
+                            {target.getReadReceiptForUserId(userId, false, ReceiptType.ReadPrivate)?.eventId ??
+                                _t("No receipt found")}
+                        </strong>
+                    </li>
+                    <li>
+                        {_t("User read up to (m.read.private;ignoreSynthetic): ")}
+                        <strong>
+                            {target.getReadReceiptForUserId(userId, true, ReceiptType.ReadPrivate)?.eventId ??
+                                _t("No receipt found")}
+                        </strong>
+                    </li>
+                </>
+            )}
+        </>
+    );
+}
+
 export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Element {
     const { room } = useContext(DevtoolsContext);
     const cli = useContext(MatrixClientContext);
@@ -90,13 +128,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                     </li>
                     {roomHasUnread(room) && (
                         <>
-                            <li>
-                                {_t("User read up to: ")}
-                                <strong>
-                                    {room.getReadReceiptForUserId(cli.getSafeUserId())?.eventId ??
-                                        _t("No receipt found")}
-                                </strong>
-                            </li>
+                            <UserReadUpTo target={room} />
                             <li>
                                 {_t("Last event:")}
                                 <ul>
@@ -149,13 +181,7 @@ export default function RoomNotifications({ onBack }: IDevtoolsProps): JSX.Eleme
                                     <li>
                                         {_t("Dot: ")} <strong>{doesRoomOrThreadHaveUnreadMessages(thread) + ""}</strong>
                                     </li>
-                                    <li>
-                                        {_t("User read up to: ")}
-                                        <strong>
-                                            {thread.getReadReceiptForUserId(cli.getSafeUserId())?.eventId ??
-                                                _t("No receipt found")}
-                                        </strong>
-                                    </li>
+                                    <UserReadUpTo target={thread} />
                                     <li>
                                         {_t("Last event:")}
                                         <ul>

src/i18n/strings/en_EN.json

@@ -3210,6 +3210,11 @@
     "Event Content": "Event Content",
     "Filter results": "Filter results",
     "No results found": "No results found",
+    "User read up to: ": "User read up to: ",
+    "No receipt found": "No receipt found",
+    "User read up to (ignoreSynthetic): ": "User read up to (ignoreSynthetic): ",
+    "User read up to (m.read.private): ": "User read up to (m.read.private): ",
+    "User read up to (m.read.private;ignoreSynthetic): ": "User read up to (m.read.private;ignoreSynthetic): ",
     "Room status": "Room status",
     "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>|other": "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>",
     "Room unread status: <strong>%(status)s</strong>, count: <strong>%(count)s</strong>|zero": "Room unread status: <strong>%(status)s</strong>",
@@ -3220,8 +3225,6 @@
     "Total: ": "Total: ",
     "Highlight: ": "Highlight: ",
     "Dot: ": "Dot: ",
-    "User read up to: ": "User read up to: ",
-    "No receipt found": "No receipt found",
     "Last event:": "Last event:",
     "ID: ": "ID: ",
     "Type: ": "Type: ",