show quick reactions in message menu

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

@@ -660,6 +660,16 @@ button.link {
     margin: 0;
 }
 
+.menu .quick-reactions {
+    display: flex;
+    padding: 8px 32px 8px 8px;
+}
+
+.menu .quick-reactions button {
+    padding: 2px 4px;
+    text-align: center;
+}
+
 .menu button {
     border-radius: 4px;
     display: block;

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

@@ -111,8 +111,7 @@ export class BaseMessageView extends TemplateView {
     createMenuOptions(vm) {
         const options = [];
         if (vm.canReact) {
-            options.push(Menu.option(vm.i18n`React with 👍`, () => vm.react("👍")))
-            options.push(Menu.option(vm.i18n`React with 🙈`, () => vm.react("🙈")))
+            options.push(new QuickReactionsMenuOption(vm));
         }
         if (vm.canAbortSending) {
             options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
@@ -124,3 +123,21 @@ export class BaseMessageView extends TemplateView {
 
     renderMessageBody() {}
 }
+
+class QuickReactionsMenuOption {
+    constructor(vm) {
+        this._vm = vm;
+    }
+    toDOM(t) {
+        const emojiButtons = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => {
+            return t.button({onClick: () => this._vm.react(emoji)}, emoji);
+        });
+        const customButton = t.button({onClick: () => {
+            const key = prompt("Enter your reaction (emoji)");
+            if (key) {
+                this._vm.react(key);
+            }
+        }}, "…");
+        return t.li({className: "quick-reactions"}, [...emojiButtons, customButton]);
+    }
+}