Enable options to favourite and low priority rooms

res/css/views/rooms/_RoomTile2.scss

@@ -224,6 +224,11 @@ limitations under the License.
         mask-image: url('$(res)/img/feather-customised/star.svg');
     }
 
+    .mx_RoomTile2_iconFavorite::before {
+        background-color: $accent-color;
+        mask-image: url('$(res)/img/feather-customised/favourites.svg');
+    }
+
     .mx_RoomTile2_iconArrowDown::before {
         mask-image: url('$(res)/img/feather-customised/arrow-down.svg');
     }

res/img/feather-customised/favourites.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41411 0.432179C7.59217 -0.144061 8.40783 -0.144059 8.58589 0.43218L10.1715 5.56319H15.3856C15.9721 5.56319 16.224 6.30764 15.7578 6.66373L11.5135 9.90611L13.1185 15.1001C13.2948 15.6705 12.6348 16.1309 12.1604 15.7684L8 12.5902L3.83965 15.7684C3.3652 16.1309 2.70521 15.6705 2.88148 15.1001L4.4865 9.90611L0.242159 6.66373C-0.223967 6.30764 0.0278507 5.56319 0.614427 5.56319H5.82854L7.41411 0.432179Z" fill="black"/>
+</svg>

src/components/views/rooms/RoomTile2.tsx

@@ -50,6 +50,8 @@ import { INotificationState } from "../../../stores/notifications/INotificationS
 import NotificationBadge from "./NotificationBadge";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { Volume } from "../../../RoomNotifsTypes";
+import RoomListStore from "../../../stores/room-list/RoomListStore2";
+import RoomListActions from "../../../actions/RoomListActions";
 
 // TODO: Remove banner on launch: https://github.com/vector-im/riot-web/issues/14231
 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14231
@@ -212,8 +214,22 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
-        // TODO: Support tagging: https://github.com/vector-im/riot-web/issues/14211
+        if (tagId === DefaultTagID.Favourite) {
-        // TODO: XOR favourites and low priority: https://github.com/vector-im/riot-web/issues/14210
+            const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+            const isFavourite = roomTags.includes(DefaultTagID.Favourite);
+            const removeTag = isFavourite ? DefaultTagID.Favourite : DefaultTagID.LowPriority;
+            const addTag = isFavourite ? null : DefaultTagID.Favourite;
+            dis.dispatch(RoomListActions.tagRoom(
+                MatrixClientPeg.get(),
+                this.props.room,
+                removeTag,
+                addTag,
+                undefined,
+                0
+            ));
+        } else {
+            console.log(`Unexpected tag ${tagId} applied to ${this.props.room.room_id}`);
+        }
 
         if ((ev as React.KeyboardEvent).key === Key.ENTER) {
             // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
@@ -345,6 +361,11 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         // TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests
 
+        const roomTags = RoomListStore.instance.getTagsForRoom(this.props.room);
+
+        const isFavorite = roomTags.includes(DefaultTagID.Favourite);
+        const favoriteClassName = isFavorite ? "mx_RoomTile2_iconFavorite" : "mx_RoomTile2_iconStar"
+
         let contextMenu = null;
         if (this.state.generalMenuPosition) {
             contextMenu = (
@@ -353,10 +374,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                         <div className="mx_IconizedContextMenu_optionList">
                             <MenuItemCheckbox
                                 onClick={(e) => this.onTagRoom(e, DefaultTagID.Favourite)}
-                                active={false} // TODO: https://github.com/vector-im/riot-web/issues/14283
+                                active={isFavorite}
                                 label={_t("Favourite")}
                             >
-                                <span className="mx_IconizedContextMenu_icon mx_RoomTile2_iconStar" />
+                                <span className={classNames("mx_IconizedContextMenu_icon", favoriteClassName)} />
                                 <span className="mx_IconizedContextMenu_label">{_t("Favourite")}</span>
                             </MenuItemCheckbox>
                             <MenuItem onClick={this.onOpenRoomSettings} label={_t("Settings")}>

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js

@@ -22,6 +22,10 @@ import * as sdk from "../../../../..";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher/dispatcher";
+import RoomListStore from "../../../../../stores/room-list/RoomListStore2";
+import RoomListActions from "../../../../../actions/RoomListActions";
+import { DefaultTagID } from '../../../../../stores/room-list/models';
+import LabelledToggleSwitch from '../../../elements/LabelledToggleSwitch';
 
 export default class AdvancedRoomSettingsTab extends React.Component {
     static propTypes = {
@@ -29,12 +33,16 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         closeSettingsFn: PropTypes.func.isRequired,
     };
 
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
+
+        const room = MatrixClientPeg.get().getRoom(props.roomId);
+        const roomTags = RoomListStore.instance.getTagsForRoom(room);
 
         this.state = {
             // This is eventually set to the value of room.getRecommendedVersion()
             upgradeRecommendation: null,
+            isLowPriorityRoom: roomTags.includes(DefaultTagID.LowPriority),
         };
     }
 
@@ -86,6 +94,25 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         this.props.closeSettingsFn();
     };
 
+    _onToggleLowPriorityTag = (e) => {
+        this.setState({
+            isLowPriorityRoom: !this.state.isLowPriorityRoom,
+        });
+
+        const removeTag = this.state.isLowPriorityRoom ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
+        const addTag = this.state.isLowPriorityRoom ? null : DefaultTagID.LowPriority;
+        const client = MatrixClientPeg.get();
+
+        dis.dispatch(RoomListActions.tagRoom(
+            client,
+            client.getRoom(this.props.roomId),
+            removeTag,
+            addTag,
+            undefined,
+            0,
+        ));
+    }
+
     render() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
@@ -156,6 +183,14 @@ export default class AdvancedRoomSettingsTab extends React.Component {
                         {_t("Open Devtools")}
                     </AccessibleButton>
                 </div>
+                <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
+                    <span className='mx_SettingsTab_subheading'>{_t('Make this room low priority')}</span>
+                    <LabelledToggleSwitch
+                        value={this.state.isLowPriorityRoom}
+                        onChange={this._onToggleLowPriorityTag}
+                        label={_t("Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list")}
+                    />
+                </div>
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -966,6 +966,8 @@
     "Room version:": "Room version:",
     "Developer options": "Developer options",
     "Open Devtools": "Open Devtools",
+    "Make this room low priority": "Make this room low priority",
+    "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list": "Low priority rooms show up at the bottom of your room list in a dedicated section at the bottom of your room list",
     "This room is bridging messages to the following platforms. <a>Learn more.</a>": "This room is bridging messages to the following platforms. <a>Learn more.</a>",
     "This room isn’t bridging messages to any platforms. <a>Learn more.</a>": "This room isn’t bridging messages to any platforms. <a>Learn more.</a>",
     "Bridges": "Bridges",