added the starred item button to the left panel

src/components/views/rooms/RoomList.tsx

@@ -77,10 +77,12 @@ interface IState {
     sublists: ITagMap;
     currentRoomId?: string;
     suggestedRooms: ISuggestedRoom[];
+    feature_favourite_messages: boolean;
 }
 
 export const TAG_ORDER: TagID[] = [
     DefaultTagID.Invite,
+    DefaultTagID.SavedItems,
     DefaultTagID.Favourite,
     DefaultTagID.DM,
     DefaultTagID.Untagged,
@@ -351,6 +353,11 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
         isInvite: false,
         defaultHidden: false,
     },
+    [DefaultTagID.SavedItems]: {
+        sectionLabel: _td("Saved Items"),
+        isInvite: false,
+        defaultHidden: false,
+    },
     [DefaultTagID.DM]: {
         sectionLabel: _td("People"),
         isInvite: false,
@@ -392,6 +399,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
     private dispatcherRef;
     private roomStoreToken: fbEmitter.EventSubscription;
     private treeRef = createRef<HTMLDivElement>();
+    private favouriteMessageWatcher: string;
 
     static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
@@ -402,6 +410,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         this.state = {
             sublists: {},
             suggestedRooms: SpaceStore.instance.suggestedRooms,
+            feature_favourite_messages: SettingsStore.getValue("feature_favourite_messages"),
         };
     }
 
@@ -410,12 +419,17 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         this.roomStoreToken = RoomViewStore.instance.addListener(this.onRoomViewStoreUpdate);
         SpaceStore.instance.on(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
+        this.favouriteMessageWatcher =
+            SettingsStore.watchSetting("feature_favourite_messages", null, (...[,,, value]) => {
+                this.setState({ feature_favourite_messages: value });
+            });
         this.updateLists(); // trigger the first update
     }
 
     public componentWillUnmount() {
         SpaceStore.instance.off(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
         RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
+        SettingsStore.unwatchSetting(this.favouriteMessageWatcher);
         defaultDispatcher.unregister(this.dispatcherRef);
         if (this.roomStoreToken) this.roomStoreToken.remove();
     }
@@ -545,6 +559,28 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             );
         });
     }
+    private renderFavoriteMessagesList(): ReactComponentElement<typeof ExtraTile>[] {
+        const avatar = (
+            <RoomAvatar
+                oobData={{
+                    name: "Favourites",
+                }}
+                width={32}
+                height={32}
+                resizeMethod="crop"
+            />);
+
+        return [
+            <ExtraTile
+                isMinimized={this.props.isMinimized}
+                isSelected={false}
+                displayName="Favourite Messages"
+                avatar={avatar}
+                onClick={() => ""}
+                key="favMessagesTile_key"
+            />,
+        ];
+    }
 
     private renderSublists(): React.ReactElement[] {
         // show a skeleton UI if the user is in no rooms and they are not filtering and have no suggested rooms
@@ -558,6 +594,12 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     extraTiles = this.renderSuggestedRooms();
                 }
 
+                if (this.state.feature_favourite_messages && orderedTagId === DefaultTagID.SavedItems) {
+                    extraTiles = this.renderFavoriteMessagesList();
+                } else {
+                    extraTiles = null;
+                }
+
                 const aesthetics = TAG_AESTHETICS[orderedTagId];
                 if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
 
@@ -582,7 +624,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 ) {
                     forceExpanded = true;
                 }
-
                 // The cost of mounting/unmounting this component offsets the cost
                 // of keeping it in the DOM and hiding it when it is not required
                 return <RoomSublist

src/components/views/rooms/RoomSublist.tsx

@@ -527,7 +527,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
     }
 
     private renderMenu(): React.ReactElement {
-        if (this.props.tagId === DefaultTagID.Suggested) return null; // not sortable
+        if (this.props.tagId === DefaultTagID.Suggested ||  this.props.tagId === DefaultTagID.SavedItems ) return null; // not sortable
 
         let contextMenu = null;
         if (this.state.contextMenuPosition) {

src/i18n/strings/en_EN.json

@@ -1802,6 +1802,7 @@
     "Explore public rooms": "Explore public rooms",
     "Add room": "Add room",
     "Invites": "Invites",
+    "Saved Items": "Saved Items",
     "Low priority": "Low priority",
     "System Alerts": "System Alerts",
     "Historical": "Historical",

src/stores/room-list/models.ts

@@ -23,11 +23,13 @@ export enum DefaultTagID {
     DM = "im.vector.fake.direct",
     ServerNotice = "m.server_notice",
     Suggested = "im.vector.fake.suggested",
+    SavedItems = "im.vector.fake.saved_items",
 }
 
 export const OrderedDefaultTagIDs = [
     DefaultTagID.Invite,
     DefaultTagID.Favourite,
+    DefaultTagID.SavedItems,
     DefaultTagID.DM,
     DefaultTagID.Untagged,
     DefaultTagID.LowPriority,