nits fixes

src/components/views/messages/MessageActionBar.tsx

@@ -48,6 +48,7 @@ import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { UserTab } from '../dialogs/UserTab';
 import { Action } from '../../../dispatcher/actions';
 import SdkConfig from "../../../SdkConfig";
+import useFavouriteMessages from '../../../hooks/useFavouriteMessages';
 
 interface IOptionsButtonProps {
     mxEvent: MatrixEvent;
@@ -237,6 +238,26 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
     </RovingAccessibleTooltipButton>;
 };
 
+interface IFavouriteButtonProp {
+    mxEvent: MatrixEvent;
+}
+
+const FavouriteButton = ({ mxEvent }: IFavouriteButtonProp) => {
+    const { isFavourite, toggleFavourite } = useFavouriteMessages();
+
+    const eventId = mxEvent.getId();
+    const classes = classNames("mx_MessageActionBar_maskButton mx_MessageActionBar_favouriteButton", {
+        'mx_MessageActionBar_favouriteButton_fillstar': isFavourite(eventId),
+    });
+
+    return <RovingAccessibleTooltipButton
+        className={classes}
+        title={_t("Favourite")}
+        onClick={() => toggleFavourite(eventId)}
+        data-testid={eventId}
+    />;
+};
+
 interface IMessageActionBarProps {
     mxEvent: MatrixEvent;
     reactions?: Relations;
@@ -421,6 +442,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                 // Like the resend button, the react and reply buttons need to appear before the edit.
                 // The only catch is we do the reply button first so that we can make sure the react
                 // button is the very first button without having to do length checks for `splice()`.
+
                 if (this.context.canSendMessages) {
                     if (this.showReplyInThreadAction) {
                         toolbarOpts.splice(0, 0, threadTooltipButton);
@@ -442,6 +464,11 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                         key="react"
                     />);
                 }
+                if (SettingsStore.getValue("feature_favourite_messages")) {
+                    toolbarOpts.splice(-1, 0, (
+                        <FavouriteButton key="favourite" mxEvent={this.props.mxEvent} />
+                    ));
+                }
 
                 // XXX: Assuming that the underlying tile will be a media event if it is eligible media.
                 if (MediaEventHelper.isEligible(this.props.mxEvent)) {

src/hooks/useFavouriteMessages.ts

@@ -0,0 +1,41 @@
+
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useState } from "react";
+
+const favouriteMessageIds = JSON.parse(
+    localStorage?.getItem("io_element_favouriteMessages")?? "[]") as string[];
+
+export default function useFavouriteMessages() {
+    const [, setX] = useState<string[]>();
+
+    //checks if an id already exist
+    const isFavourite = (eventId: string): boolean => favouriteMessageIds.includes(eventId);
+
+    const toggleFavourite = (eventId: string) => {
+        isFavourite(eventId) ? favouriteMessageIds.splice(favouriteMessageIds.indexOf(eventId), 1)
+            : favouriteMessageIds.push(eventId);
+
+        //update the local storage
+        localStorage.setItem('io_element_favouriteMessages', JSON.stringify(favouriteMessageIds));
+
+        // This forces a re-render to account for changes in appearance in real-time when the favourite button is toggled
+        setX([]);
+    };
+
+    return { isFavourite, toggleFavourite };
+}

src/i18n/strings/en_EN.json

@@ -902,6 +902,7 @@
     "Right-click message context menu": "Right-click message context menu",
     "Location sharing - pin drop": "Location sharing - pin drop",
     "Live Location Sharing (temporary implementation: locations persist in room history)": "Live Location Sharing (temporary implementation: locations persist in room history)",
+    "Favourite Messages (under active development)": "Favourite Messages (under active development)",
     "Font size": "Font size",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
@@ -2115,6 +2116,7 @@
     "Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
     "Beta feature": "Beta feature",
     "Beta feature. Click to learn more.": "Beta feature. Click to learn more.",
+    "Favourite": "Favourite",
     "Edit": "Edit",
     "Reply": "Reply",
     "Collapse quotes": "Collapse quotes",
@@ -2940,7 +2942,6 @@
     "Copy link": "Copy link",
     "Forget": "Forget",
     "Favourited": "Favourited",
-    "Favourite": "Favourite",
     "Mentions only": "Mentions only",
     "Copy room link": "Copy room link",
     "Low Priority": "Low Priority",

src/settings/Settings.tsx

@@ -429,6 +429,13 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         ),
         default: false,
     },
+    "feature_favourite_messages": {
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
+        supportedLevels: LEVELS_FEATURE,
+        displayName: _td("Favourite Messages (under active development)"),
+        default: false,
+    },
     "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,