Fix accessibility of StartChatPage and port to new components

(cherry picked from commit cdd5c9f484)

src/models/userdirectorylistmodel.cpp

@@ -144,7 +144,7 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
         auto avatarUrl = user.avatarUrl;
 
         if (avatarUrl.isEmpty()) {
-            return "";
+            return QString();
         }
         return avatarUrl.url().remove(0, 6);
     }
@@ -153,7 +153,7 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
     }
     if (role == DirectChatsRole) {
         if (!m_connection) {
-            return {};
+            return QStringList();
         };
 
         auto userObj = m_connection->user(user.userId);
@@ -165,6 +165,8 @@ QVariant UserDirectoryListModel::data(const QModelIndex &index, int role) const
                 return QVariant::fromValue(directChatsForUser);
             }
         }
+
+        return QStringList();
     }
 
     return {};

src/qml/Page/StartChatPage.qml

@@ -7,6 +7,8 @@ import QtQuick.Controls 2.15 as QQC2
 import QtQuick.Layouts 1.15
 
 import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kirigamiaddons.delegates 1.0 as Delegates
+import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents
 
 import org.kde.neochat 1.0
 
@@ -60,69 +62,68 @@ Kirigami.ScrollablePage {
             keyword: identifierField.text
         }
 
-        delegate: Kirigami.AbstractListItem {
+        delegate: Delegates.RoundedItemDelegate {
-            width: userDictListView.width
+            id: delegate
+
+            required property string userID
+            required property string avatar
+            required property string name
+            required property var directChats
+
+            text: name
+
             contentItem: RowLayout {
-                spacing: Kirigami.Units.largeSpacing
+                KirigamiComponents.Avatar {
-
+                    Layout.preferredWidth: Kirigami.Units.iconSizes.medium
-                Kirigami.Avatar {
+                    Layout.preferredHeight: Kirigami.Units.iconSizes.medium
-                    Layout.preferredWidth: height
+                    source: delegate.avatar ? ("image://mxc/" + delegate.avatar) : ""
-                    Layout.fillHeight: true
+                    name: delegate.name
-
-                    source: model.avatar ? ("image://mxc/" + model.avatar) : ""
-                    name: model.name
                 }
 
-                ColumnLayout {
+                Delegates.SubtitleContentItem {
+                    itemDelegate: delegate
+                    subtitle: delegate.userID
                     Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    spacing: 0
-
-                    Kirigami.Heading {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        text: name
-                        textFormat: Text.PlainText
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                    }
-
-                    QQC2.Label {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        text: userID
-                        textFormat: Text.PlainText
-                        elide: Text.ElideRight
-                        wrapMode: Text.NoWrap
-                    }
                 }
 
                 QQC2.Button {
                     id: joinChatButton
-                    Layout.alignment: Qt.AlignRight
+
-                    visible: directChats && directChats.length > 0
+                    visible: delegate.directChats && delegate.directChats.length > 0
+                    text: i18n("Join existing chat")
+                    display: QQC2.Button.IconOnly
 
                     icon.name: "document-send"
                     onClicked: {
-                        connection.requestDirectChat(userID);
+                        connection.requestDirectChat(delegate.userID);
                         applicationWindow().pageStack.layers.pop();
                     }
+
+                    Layout.alignment: Qt.AlignRight
+
+                    QQC2.ToolTip.text: text
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
                 }
 
                 QQC2.Button {
-                    Layout.alignment: Qt.AlignRight
                     icon.name: "irc-join-channel"
                     // We wants to make sure an user can't start more than one
                     // chat with someone.
                     visible: !joinChatButton.visible
+                    text: i18n("Create new chat")
+                    display: QQC2.Button.IconOnly
 
                     onClicked: {
-                        connection.requestDirectChat(userID);
+                        connection.requestDirectChat(delegate.userID);
                         applicationWindow().pageStack.layers.pop();
                     }
+
+                    Layout.alignment: Qt.AlignRight
+
+                    QQC2.ToolTip.text: text
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
                 }
             }
         }