Merge remote-tracking branch 'alangecker/mark-unread' into sc

Conflicts:
	src/components/structures/TimelinePanel.tsx
	src/components/views/rooms/RoomTile.tsx
	src/stores/notifications/RoomNotificationState.ts

res/css/views/rooms/_NotificationBadge.scss

@@ -34,7 +34,7 @@ limitations under the License.
         align-items: center;
         justify-content: center;
 
-        &.mx_NotificationBadge_highlighted {
+        &.mx_NotificationBadge_highlighted, &.mx_NotificationBadge_highlighted.mx_NotificationBadge_dot {
             // TODO: Use a more specific variable
             background-color: $warning-color;
         }
@@ -44,9 +44,9 @@ limitations under the License.
         &.mx_NotificationBadge_dot {
             background-color: $primary-content; // increased visibility
 
-            width: 6px;
-            height: 6px;
-            border-radius: 6px;
+            width: 8px;
+            height: 8px;
+            border-radius: 8px;
         }
 
         &.mx_NotificationBadge_2char {

src/Rooms.ts

@@ -153,3 +153,19 @@ function guessDMRoomTargetId(room: Room, myUserId: string): string {
     if (oldestUser === undefined) return myUserId;
     return oldestUser.userId;
 }
+
+export const UNSTABLE_MSC2867_MARKED_UNREAD_TYPE = 'com.famedly.marked_unread';
+
+export function isRoomMarkedAsUnread(room: Room): boolean {
+    return !!room.getAccountData(UNSTABLE_MSC2867_MARKED_UNREAD_TYPE)?.getContent()?.unread;
+}
+
+export async function setRoomMarkedAsUnread(room: Room, value = true): Promise<void> {
+    await MatrixClientPeg.get().setRoomAccountData(
+        room.roomId,
+        UNSTABLE_MSC2867_MARKED_UNREAD_TYPE,
+        {
+            unread: value,
+        },
+    );
+}

src/components/structures/TimelinePanel.tsx

@@ -52,6 +52,8 @@ import { UserNameColorMode } from '../../settings/UserNameColorMode';
 
 import { logger } from "matrix-js-sdk/src/logger";
 
+import { isRoomMarkedAsUnread, setRoomMarkedAsUnread } from '../../Rooms';
+
 const PAGINATE_SIZE = 20;
 const INITIAL_SIZE = 20;
 const READ_RECEIPT_INTERVAL_MS = 500;
@@ -870,6 +872,20 @@ class TimelinePanel extends React.Component<IProps, IState> {
         this.sendReadReceipt();
     };
 
+    private removeUnreadMarker = () => {
+        // This happens on user_activity_end which is delayed, and it's
+        // very possible have logged out within that timeframe, so check
+        // we still have a client.
+        const cli = MatrixClientPeg.get();
+        // if no client or client is guest don't send mark room as read
+        if (!cli || cli.isGuest()) return;
+
+        const markUnreadEnabled = SettingsStore.getValue("feature_mark_unread");
+        if (markUnreadEnabled && isRoomMarkedAsUnread(this.props.timelineSet.room)) {
+            setRoomMarkedAsUnread(this.props.timelineSet.room, false);
+        }
+    };
+
     // advance the read marker past any events we sent ourselves.
     private advanceReadMarkerPastMyEvents(): void {
         if (!this.props.manageReadMarkers) return;
@@ -1121,6 +1137,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 if (this.props.sendReadReceiptOnLoad) {
                     this.sendReadReceipt();
                 }
+                this.removeUnreadMarker();
             });
         };
 

src/components/views/rooms/RoomTile.tsx

@@ -52,6 +52,9 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 import { logger } from "matrix-js-sdk/src/logger";
 
+import { setRoomMarkedAsUnread } from "../../../Rooms";
+import SettingsStore from "../../../settings/SettingsStore";
+
 interface IProps {
     room: Room;
     showMessagePreview: boolean;
@@ -283,6 +286,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
         this.setState({ generalMenuPosition: null });
     };
 
+    private onMarkUnreadClick = (ev: ButtonEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        setRoomMarkedAsUnread(this.props.room);
+        this.setState({ generalMenuPosition: null }); // hide the menu
+    };
+
     private onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -487,13 +497,20 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
             const userId = MatrixClientPeg.get().getUserId();
             const canInvite = this.props.room.canInvite(userId);
+            const markUnreadEnabled = SettingsStore.getValue("feature_mark_unread");
+
             contextMenu = <IconizedContextMenu
                 {...contextMenuBelow(this.state.generalMenuPosition)}
                 onFinished={this.onCloseGeneralMenu}
                 className="mx_RoomTile_contextMenu"
                 compact
             >
                 <IconizedContextMenuOptionList>
+                    {markUnreadEnabled ? (<IconizedContextMenuOption
+                        onClick={this.onMarkUnreadClick}
+                        label={_t("Mark as unread")}
+                        iconClassName="mx_RoomTile_iconStar"
+                    />) : null }
                     <IconizedContextMenuCheckbox
                         onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
                         active={isFavorite}

src/i18n/strings/en_EN.json

@@ -817,6 +817,7 @@
     "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
+    "Mark rooms as unread": "Mark rooms as unread",
     "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.": "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.",
     "Message Pinning": "Message Pinning",
     "Threaded messaging": "Threaded messaging",
@@ -1780,6 +1781,7 @@
     "Favourited": "Favourited",
     "Favourite": "Favourite",
     "Low Priority": "Low Priority",
+    "Mark as unread": "Mark as unread",
     "Invite People": "Invite People",
     "Copy Room Link": "Copy Room Link",
     "Settings": "Settings",

src/settings/Settings.tsx

@@ -158,6 +158,12 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_mark_unread": {
+        isFeature: true,
+        displayName: _td("Mark rooms as unread"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_communities_v2_prototypes": {
         isFeature: true,
         displayName: _td(

src/stores/notifications/RoomNotificationState.ts

@@ -26,16 +26,26 @@ import * as Unread from '../../Unread';
 import { NotificationState } from "./NotificationState";
 import { getUnsentMessages } from "../../components/structures/RoomStatusBar";
 
+import { isRoomMarkedAsUnread, UNSTABLE_MSC2867_MARKED_UNREAD_TYPE } from "../../Rooms";
+import SettingsStore from "../../settings/SettingsStore";
+
 export class RoomNotificationState extends NotificationState implements IDestroyable {
+    private featureMarkedUnreadWatcherRef = null;
     constructor(public readonly room: Room) {
         super();
         this.room.on("Room.receipt", this.handleReadReceipt);
         this.room.on("Room.timeline", this.handleRoomEventUpdate);
         this.room.on("Room.redaction", this.handleRoomEventUpdate);
         this.room.on("Room.myMembership", this.handleMembershipUpdate);
         this.room.on("Room.localEchoUpdated", this.handleLocalEchoUpdated);
+        this.room.on("Room.accountData", this.handleRoomAccountDataUpdate);
         MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate);
         MatrixClientPeg.get().on("accountData", this.handleAccountDataUpdate);
+
+        this.featureMarkedUnreadWatcherRef = SettingsStore.watchSetting("feature_mark_unread", null, () => {
+            this.updateNotificationState();
+        });
+
         this.updateNotificationState();
     }
 
@@ -50,10 +60,12 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         this.room.removeListener("Room.redaction", this.handleRoomEventUpdate);
         this.room.removeListener("Room.myMembership", this.handleMembershipUpdate);
         this.room.removeListener("Room.localEchoUpdated", this.handleLocalEchoUpdated);
+        this.room.removeListener("Room.accountData", this.handleRoomAccountDataUpdate);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate);
             MatrixClientPeg.get().removeListener("accountData", this.handleAccountDataUpdate);
         }
+        SettingsStore.unwatchSetting(this.featureMarkedUnreadWatcherRef);
     }
 
     private handleLocalEchoUpdated = () => {
@@ -83,6 +95,12 @@ export class RoomNotificationState extends NotificationState implements IDestroy
         }
     };
 
+    private handleRoomAccountDataUpdate = (ev: MatrixEvent) => {
+        if (ev.getType() === UNSTABLE_MSC2867_MARKED_UNREAD_TYPE) {
+            this.updateNotificationState();
+        }
+    };
+
     private updateNotificationState() {
         const snapshot = this.snapshot();
 
@@ -122,13 +140,20 @@ export class RoomNotificationState extends NotificationState implements IDestroy
                 this._count = trueCount;
                 this._symbol = null; // symbol calculated by component
             } else {
-                // We don't have any notified messages, but we might have unread messages. Let's
-                // find out.
-                const hasUnread = Unread.doesRoomHaveUnreadMessages(this.room);
-                if (hasUnread) {
-                    this._color = NotificationColor.Bold;
+                const markUnreadEnabled = SettingsStore.getValue("feature_mark_unread");
+
+                if (markUnreadEnabled && isRoomMarkedAsUnread(this.room)) {
+                    this._color = NotificationColor.Red;
                 } else {
-                    this._color = NotificationColor.None;
+                    // We don't have any notified messages, but we might have unread messages. Let's
+                    // find out.
+                    const hasUnread = Unread.doesRoomHaveUnreadMessages(this.room);
+
+                    if (hasUnread) {
+                        this._color = NotificationColor.Bold;
+                    } else {
+                        this._color = NotificationColor.None;
+                    }
                 }
 
                 // no symbol or count for this state