Alert the user to unread notifications in prior versions of rooms

Fixes https://github.com/vector-im/riot-web/issues/8161

res/css/structures/_RoomView.scss

@@ -70,6 +70,13 @@ limitations under the License.
     background-color: $primary-bg-color;
 }
 
+.mx_RoomView_auxPanel_hiddenHighlights {
+    border-bottom: 1px solid $primary-hairline-color;
+    padding: 10px;
+    color: $warning-color;
+    cursor: pointer;
+}
+
 .mx_RoomView_auxPanel_apps {
     max-width: 1920px ! important;
 }

src/components/structures/RoomSubList.js

@@ -29,6 +29,7 @@ import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import RoomTile from "../views/rooms/RoomTile";
 import LazyRenderList from "../views/elements/LazyRenderList";
+import MatrixClientPeg from "../../MatrixClientPeg";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
@@ -138,6 +139,28 @@ const RoomSubList = React.createClass({
         this.setState(this.state);
     },
 
+    getUnreadNotificationCount: function(room, type=null) {
+        let notificationCount = room.getUnreadNotificationCount(type);
+
+        // Check notification counts in the old room just in case there's some lost
+        // there. We only go one level down to avoid performance issues, and theory
+        // is that 1st generation rooms will have already been read by the 3rd generation.
+        const createEvent = room.currentState.getStateEvents("m.room.create", "");
+        if (createEvent && createEvent.getContent()['predecessor']) {
+            const oldRoomId = createEvent.getContent()['predecessor']['room_id'];
+            const oldRoom = MatrixClientPeg.get().getRoom(oldRoomId);
+            if (oldRoom) {
+                // We only ever care if there's highlights in the old room. No point in
+                // notifying the user for unread messages because they would have extreme
+                // difficulty changing their notification preferences away from "All Messages"
+                // and "Noisy".
+                notificationCount += oldRoom.getUnreadNotificationCount("highlight");
+            }
+        }
+
+        return notificationCount;
+    },
+
     makeRoomTile: function(room) {
         return <RoomTile
             room={room}
@@ -146,8 +169,8 @@ const RoomSubList = React.createClass({
             key={room.roomId}
             collapsed={this.props.collapsed || false}
             unread={Unread.doesRoomHaveUnreadMessages(room)}
-            highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
-            notificationCount={room.getUnreadNotificationCount()}
+            highlight={this.props.isInvite || this.getUnreadNotificationCount(room, 'highlight') > 0}
+            notificationCount={this.getUnreadNotificationCount(room)}
             isInvite={this.props.isInvite}
             refreshSubList={this._updateSubListCount}
             incomingCall={null}

src/components/structures/RoomView.js

@@ -1515,6 +1515,25 @@ module.exports = React.createClass({
         }
     },
 
+    _getOldRoom: function() {
+        const createEvent = this.state.room.currentState.getStateEvents("m.room.create", "");
+        if (!createEvent || !createEvent.getContent()['predecessor']) return null;
+
+        return MatrixClientPeg.get().getRoom(createEvent.getContent()['predecessor']['room_id']);
+    },
+
+    _getHiddenHighlightCount: function() {
+        const oldRoom = this._getOldRoom();
+        if (!oldRoom) return 0;
+        return oldRoom.getUnreadNotificationCount('highlight');
+    },
+
+    _onHiddenHighlightsClick: function() {
+        const oldRoom = this._getOldRoom();
+        if (!oldRoom) return;
+        dis.dispatch({action: "view_room", room_id: oldRoom.roomId});
+    },
+
     render: function() {
         const RoomHeader = sdk.getComponent('rooms.RoomHeader');
         const MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1673,6 +1692,8 @@ module.exports = React.createClass({
             !MatrixClientPeg.get().getKeyBackupEnabled()
         );
 
+        const hiddenHighlightCount = this._getHiddenHighlightCount();
+
         let aux = null;
         let hideCancel = false;
         if (this.state.forwardingEvent !== null) {
@@ -1713,6 +1734,15 @@ module.exports = React.createClass({
                                 room={this.state.room}
                 />
             );
+        } else if (hiddenHighlightCount > 0) {
+            aux = (
+                <div className="mx_RoomView_auxPanel_hiddenHighlights" onClick={this._onHiddenHighlightsClick}>
+                    {_t(
+                        "You have %(count)s unread notifications in a prior version of this room.",
+                        {count: hiddenHighlightCount},
+                    )}
+                </div>
+            );
         }
 
         const auxPanel = (

src/i18n/strings/en_EN.json

@@ -1416,6 +1416,8 @@
     "Unknown room %(roomId)s": "Unknown room %(roomId)s",
     "Room": "Room",
     "Failed to reject invite": "Failed to reject invite",
+    "You have %(count)s unread notifications in a prior version of this room.|other": "You have %(count)s unread notifications in a prior version of this room.",
+    "You have %(count)s unread notifications in a prior version of this room.|one": "You have %(count)s unread notification in a prior version of this room.",
     "Fill screen": "Fill screen",
     "Click to unmute video": "Click to unmute video",
     "Click to mute video": "Click to mute video",