Add quick reactions

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -219,6 +219,10 @@ function RoomMessage(p: {
             right: "0px",
           }}
         >
+          {/* Common reactions */}
+          <ReactionButton {...p} emojiKey="👍" /> {/* 👍 */}
+          <ReactionButton {...p} emojiKey="♥️" /> {/* ♥️ */}
+          <ReactionButton {...p} emojiKey="😂" /> {/* 😂 */}
           {/* Add reaction */}
           <Button onClick={handleAddReaction}>
             <AddReactionIcon />
@@ -291,3 +295,31 @@ function RoomMessage(p: {
     </>
   );
 }
+
+function ReactionButton(p: {
+  room: Room;
+  message: Message;
+  emojiKey: string;
+}): React.ReactElement {
+  const alert = useAlert();
+  const user = useUserInfo();
+
+  const sendEmoji = async () => {
+    try {
+      await MatrixApiEvent.ReactToEvent(p.room, p.message.event_id, p.emojiKey);
+    } catch (e) {
+      console.error("Failed to send reaction!", e);
+      alert(`Failed to send reaction! ${e}`);
+    }
+  };
+
+  // Do not offer to react to existing reactions
+  if (
+    p.message.reactions.find(
+      (r) => r.key === p.emojiKey && r.account === user.info.matrix_user_id
+    ) !== undefined
+  )
+    return <></>;
+
+  return <Button onClick={sendEmoji}>{p.emojiKey}</Button>;
+}