feat: better autocompletion UX

The autocompletion bar is now more similar to mainstream
chat applications, which use up/down to change the selection,
and tab to confirm the selection. An extra space is also added
to keep the flow of typing going.

imports/NeoChat/Component/ChatBox/ChatBar.qml

@@ -282,6 +282,23 @@ ToolBar {
                     chatBar.complete();
                 }
 
+                // yes, decrement goes up and increment goes down visually.
+                Keys.onUpPressed: (event) => {
+                    if (chatBar.isCompleting) {
+                        event.accepted = true
+                        completionMenu.listView.decrementCurrentIndex()
+                    }
+                    event.accepted = false
+                }
+
+                Keys.onDownPressed: (event) => {
+                    if (chatBar.isCompleting) {
+                        event.accepted = true
+                        completionMenu.listView.incrementCurrentIndex()
+                    }
+                    event.accepted = false
+                }
+
                 Keys.onTabPressed: {
                     if (event.modifiers & Qt.ControlModifier) {
                         switchRoomDown();
@@ -486,6 +503,8 @@ ToolBar {
 
     function complete() {
         documentHandler.replaceAutoComplete(completionMenu.currentDisplayText);
+        completionMenu.model = null
+        chatBar.isCompleting = false
         if (completionMenu.completionType === ChatDocumentHandler.User
             && completionMenu.currentDisplayText.length > 0
             && completionMenu.currentItem.userId.length > 0) {

imports/NeoChat/Component/ChatBox/CompletionMenu.qml

@@ -17,6 +17,7 @@ Popup {
 
     // Expose internal ListView properties.
     property alias model: completionListView.model
+    property alias listView: completionListView
     property alias currentIndex: completionListView.currentIndex
     property alias currentItem: completionListView.currentItem
     property alias count: completionListView.count
@@ -43,7 +44,7 @@ Popup {
         completionListView.currentIndex = 0;
     }
 
-    implicitHeight: Math.min(completionListView.contentHeight, Kirigami.Units.gridUnit * 5)
+    implicitHeight: Math.min(completionListView.contentHeight, Kirigami.Units.gridUnit * 10)
 
     contentItem: ScrollView {
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@@ -97,7 +98,7 @@ Popup {
             width: ListView.view.width ?? implicitWidth
             property string displayName: modelData.isCustom ? modelData.shortname : modelData.unicode
             text: modelData.shortname
-            reserveSpaceForSubtitle: true
+            height: Kirigami.Units.gridUnit * 2
 
             leading: Image {
                 source: modelData.isCustom ? modelData.unicode : ""

src/chatdocumenthandler.cpp

@@ -197,7 +197,7 @@ void ChatDocumentHandler::replaceAutoComplete(const QString &word)
         }
     }
 
-    cursor.insertHtml(word);
+    cursor.insertHtml(word + " ");
     m_lastState = cursor.block().text();
     cursor.endEditBlock();
 }