show reactions as ListView of buttons if present

src/platform/web/ui/css/themes/element/timeline.css

@@ -20,7 +20,8 @@ limitations under the License.
     grid-template:
         "avatar sender" auto
         "avatar body" auto
-        "time   body" 1fr /
+        "time   body" 1fr
+        "time   reactions" auto /
          30px   1fr;
     column-gap: 8px;
     padding: 4px;
@@ -37,9 +38,10 @@ limitations under the License.
 @media screen and (max-width: 800px) {
     .Timeline_message {
         grid-template:
-            "avatar sender" auto
+            "avatar    sender" auto
-            "body body" 1fr
+            "body      body" 1fr
-            "time time" auto /
+            "time      time" auto
+            "reactions reactions" auto /
              30px 1fr;
     }
 
@@ -211,6 +213,10 @@ only loads when the top comes into view*/
     color: #ff4b55;
 }
 
+.Timeline_messageReactions {
+    grid-area: reactions;
+}
+
 .AnnouncementView {
     margin: 5px 0;
     padding: 5px 10%;

src/platform/web/ui/session/room/timeline/BaseMessageView.js

@@ -20,6 +20,7 @@ import {tag} from "../../../general/html.js";
 import {TemplateView} from "../../../general/TemplateView.js";
 import {Popup} from "../../../general/Popup.js";
 import {Menu} from "../../../general/Menu.js";
+import {ReactionsView} from "./ReactionsView.js";
 
 export class BaseMessageView extends TemplateView {
     constructor(value) {
@@ -38,6 +39,7 @@ export class BaseMessageView extends TemplateView {
             this.renderMessageBody(t, vm),
             // should be after body as it is overlayed on top
             t.button({className: "Timeline_messageOptions"}, "⋯"),
+            t.ifView(vm => vm.reactions, vm => new ReactionsView(vm.reactions)),
         ]);
         // given that there can be many tiles, we don't add
         // unneeded DOM nodes in case of a continuation, and we add it

src/platform/web/ui/session/room/timeline/ReactionsView.js

@@ -0,0 +1,43 @@
+/*
+Copyright 2021 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 {ListView} from "../../../general/ListView.js";
+import {TemplateView} from "../../../general/TemplateView.js";
+
+export class ReactionsView extends ListView {
+    constructor(reactionsViewModel) {
+        const options = {
+            className: "Timeline_messageReactions",
+            list: reactionsViewModel.reactions,
+            onItemClick: (reactionView, evt) => reactionView.onClick(),
+        }
+        super(options, reactionVM => new ReactionView(reactionVM));
+    }
+}
+
+class ReactionView extends TemplateView {
+    render(t, vm) {
+        const haveReacted = vm => vm.haveReacted;
+        return t.button({
+            disabled: haveReacted,
+            className: {haveReacted},
+        }, [vm.key, " ", vm => `${vm.count}`]);
+    }
+
+    onClick() {
+        this.value.react();
+    }
+}