Move UserAutoCompletion outside of Composer

src/gui/Pages/Chat/ChatPage.qml

@@ -3,6 +3,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../Base"
+import "AutoCompletion"
 import "Banners"
 import "Composer"
 import "FileTransfer"
@@ -91,6 +92,14 @@ HColumnPage {
         Behavior on Layout.preferredHeight { HNumberAnimation {} }
     }
 
+    UserAutoCompletion {
+        id: userCompletion
+        textArea: composer.messageArea
+
+        Layout.fillWidth: true
+        Layout.maximumHeight: chatPage.height / 4
+    }
+
     InviteBanner {
         id: inviteBanner
         visible: ! chat.roomInfo.left && inviterId
@@ -108,9 +117,9 @@ HColumnPage {
 
     Composer {
         id: composer
+        userCompletion: userCompletion
         eventList: loadEventList ? eventListLoader.item.eventList : null
-        visible:
-            ! chat.roomInfo.left && ! chat.roomInfo.inviter_id
+        visible: ! chat.roomInfo.left && ! chat.roomInfo.inviter_id
 
         Layout.fillWidth: true
         Layout.maximumHeight: parent.height / 2

src/gui/Pages/Chat/Composer/Composer.qml

@@ -3,30 +3,25 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../../Base"
+import "../AutoCompletion"
 
 Rectangle {
+    property UserAutoCompletion userCompletion
     property alias eventList: messageArea.eventList
+
     readonly property bool hasFocus: messageArea.activeFocus
+    readonly property alias messageArea: messageArea
 
     function takeFocus() { messageArea.forceActiveFocus() }
 
 
-    implicitHeight: Math.max(theme.baseElementsHeight, column.implicitHeight)
+    implicitHeight: Math.max(theme.baseElementsHeight, row.implicitHeight)
     color: theme.chat.composer.background
 
-    HColumnLayout {
-        id: column
+    HRowLayout {
+        id: row
         anchors.fill: parent
 
-        UserAutoCompletion {
-            id: userCompletion
-            textArea: messageArea
-
-            Layout.fillWidth: true
-            Layout.maximumHeight: chat.height / 3
-        }
-
-        HRowLayout {
         HUserAvatar {
             id: avatar
             radius: 0
@@ -67,5 +62,4 @@ Rectangle {
             Layout.fillHeight: true
         }
     }
-    }
 }