Add Quick Reaction to EmojiDialog

src/qml/Component/Emoji/EmojiDelegate.qml

@@ -13,7 +13,7 @@ QQC2.ItemDelegate {
     property bool showTones: false
 
     QQC2.ToolTip.text: emojiDelegate.name
-    QQC2.ToolTip.visible: hovered
+    QQC2.ToolTip.visible: hovered && emojiDelegate.name !== ""
     QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
     leftInset: Kirigami.Units.smallSpacing
     topInset: Kirigami.Units.smallSpacing

src/qml/Component/Emoji/EmojiPicker.qml

@@ -11,6 +11,7 @@ ColumnLayout {
     id: root
 
     property bool includeCustom: false
+    property bool showQuickReaction: false
 
     readonly property var currentEmojiModel: {
         if (includeCustom) {
@@ -90,4 +91,35 @@ ColumnLayout {
         header: categories
         Keys.forwardTo: searchField
     }
+
+    Kirigami.Separator {
+        visible: showQuickReaction
+        Layout.fillWidth: true
+        Layout.preferredHeight: 1
+    }
+
+    QQC2.ScrollView {
+        visible: showQuickReaction
+        Layout.fillWidth: true
+        Layout.preferredHeight: root.categoryIconSize + QQC2.ScrollBar.horizontal.height
+        QQC2.ScrollBar.horizontal.height: QQC2.ScrollBar.horizontal.visible ? QQC2.ScrollBar.horizontal.implicitHeight : 0
+
+        ListView {
+            id: quickReactions
+            Layout.fillWidth: true
+
+            model: ["👍", "👎", "😄", "🎉", "😕", "❤", "🚀", "👀"]
+
+            delegate: EmojiDelegate {
+                emoji: modelData
+
+                height: root.categoryIconSize
+                width: height
+
+                onClicked: root.chosen(modelData)
+            }
+
+            orientation: Qt.Horizontal
+        }
+    }
 }

src/qml/Dialog/EmojiDialog.qml

@@ -13,6 +13,7 @@ QQC2.Popup {
 
     property bool includeCustom: false
     property bool closeOnChosen: true
+    property bool showQuickReaction: false
 
     signal chosen(string emoji)
 
@@ -44,6 +45,7 @@ QQC2.Popup {
     contentItem: EmojiPicker {
         height: 400
         includeCustom: emojiPopup.includeCustom
+        showQuickReaction: emojiPopup.showQuickReaction
         onChosen: {
             emojiPopup.chosen(emoji)
             if (emojiPopup.closeOnChosen) emojiPopup.close()

src/qml/Page/RoomPage.qml

@@ -521,6 +521,7 @@ Kirigami.ScrollablePage {
                     onClicked: emojiDialog.open();
                     EmojiDialog {
                         id: emojiDialog
+                        showQuickReaction: true
                         onChosen: {
                             page.currentRoom.toggleReaction(hoverActions.event.eventId, emoji);
                             chatBox.focusInputField();