Use EmojiDialog popup in chatbar

This converts the emoji dialog in the chatbar to be the same popup as for reactions. This includes:

- EmojiPicker and ReactionPicker were already similar and are made identical, as such ReactionPicker no longer needed
- Emoji dialog used for both reactions and chatbar emojis
- Add some parameters to allow for different use cases (include custom emojis and whether selection closes the popup)

![image](/uploads/c71bb5ffdc6914efad654998a886ade6/image.png)

src/qml/Component/ChatBox/ChatBar.qml

@@ -14,7 +14,6 @@ QQC2.ToolBar {
     id: chatBar
     property alias inputFieldText: inputField.text
     property alias textField: inputField
-    property alias emojiPaneOpened: emojiButton.checked
     property alias cursorPosition: inputField.cursorPosition
 
     signal closeAllTriggered()
@@ -205,6 +204,14 @@ QQC2.ToolBar {
             display: QQC2.AbstractButton.IconOnly
             checkable: true
 
+            onClicked: {
+                if (emojiDialog.visible) {
+                    emojiDialog.close()
+                } else {
+                    emojiDialog.open()
+                }
+            }
+
             QQC2.ToolTip.text: text
             QQC2.ToolTip.visible: hovered
         }
@@ -224,6 +231,19 @@ QQC2.ToolBar {
         }
     }
 
+    EmojiDialog {
+        id: emojiDialog
+        x: parent.width - implicitWidth
+        y: -implicitHeight - Kirigami.Units.smallSpacing
+
+        modal: false
+        includeCustom: true
+        closeOnChosen: false
+
+        onChosen: insertText(emoji)
+        onClosed: if (emojiButton.checked) emojiButton.checked = false
+    }
+
     CompletionMenu {
         id: completionMenu
         height: implicitHeight

src/qml/Component/ChatBox/ChatBox.qml

@@ -46,38 +46,6 @@ ColumnLayout {
         }
     }
 
-    Kirigami.Separator {
-        id: emojiPickerLoaderSeparator
-        visible: emojiPickerLoader.visible
-        Layout.fillWidth: true
-        height: visible ? implicitHeight : 0
-    }
-
-    Loader {
-        id: emojiPickerLoader
-        active: visible
-        visible: chatBar.emojiPaneOpened
-        onItemChanged: if (visible) {
-            emojiPickerLoader.item.forceActiveFocus()
-        }
-        Layout.fillWidth: true
-        sourceComponent: QQC2.Pane {
-            onActiveFocusChanged: if(activeFocus) {
-                emojiPicker.forceActiveFocus()
-            }
-            topPadding: 0
-            bottomPadding: 0
-            rightPadding: 0
-            leftPadding: 0
-            Kirigami.Theme.colorSet: Kirigami.Theme.View
-            contentItem: EmojiPicker {
-                id: emojiPicker
-                onChosen: insertText(emoji)
-            }
-        }
-
-    }
-
     Kirigami.Separator {
         id: replySeparator
         visible: replyPane.visible