Add user directory.

imports/Spectral/Dialog/InviteUserDialog.qml

@@ -3,26 +3,180 @@ import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
 
 import Spectral.Component 2.0
+import Spectral.Effect 2.0
+import Spectral.Setting 0.1
+
+import Spectral 0.1
 
 Dialog {
+    property var controller
     property var room
 
     anchors.centerIn: parent
-    width: 360
+    width: 480
+    height: window.height - 100
 
     id: root
 
-    title: "Invite User"
+    title: "Invite a User"
 
-    modal: true
-    standardButtons: Dialog.Ok | Dialog.Cancel
+    contentItem: ColumnLayout {
+        spacing: 0
 
-    contentItem: AutoTextField {
-        id: inviteUserDialogTextField
-        placeholderText: "User ID"
+        RowLayout {
+            Layout.fillWidth: true
+
+            AutoTextField {
+                property bool isUserID: text.match(/@(.+):(.+)/g)
+
+                Layout.fillWidth: true
+
+                id: identifierField
+
+                placeholderText: "Find a user..."
+
+                onAccepted: {
+                    userDictListModel.search()
+                }
+            }
+
+            Button {
+                visible: identifierField.isUserID
+
+                text: "Add"
+                highlighted: true
+
+                onClicked: {
+                    room.inviteToRoom(identifierField.text)
+                }
+            }
+        }
+
+        MenuSeparator {
+            Layout.fillWidth: true
+        }
+
+        AutoListView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            id: userDictListView
+
+            clip: true
+
+            spacing: 4
+
+            model: UserDirectoryListModel {
+                id: userDictListModel
+
+                connection: root.room.connection
+                keyword: identifierField.text
+            }
+
+            delegate: Control {
+                property bool inRoom: room && room.containsUser(userID)
+
+                width: userDictListView.width
+                height: 48
+
+                id: delegate
+
+                padding: 8
+
+                contentItem: RowLayout {
+                    spacing: 8
+
+                    Avatar {
+                        Layout.preferredWidth: height
+                        Layout.fillHeight: true
+
+                        source: avatar
+                        hint: name
+                    }
+
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        spacing: 0
+
+                        Label {
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+
+                            text: name
+                            color: MPalette.foreground
+                            font.pixelSize: 13
+                            textFormat: Text.PlainText
+                            elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
+                        }
+
+                        Label {
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+
+                            text: userID
+                            color: MPalette.lighter
+                            font.pixelSize: 10
+                            textFormat: Text.PlainText
+                            elide: Text.ElideRight
+                            wrapMode: Text.NoWrap
+                        }
+                    }
+
+                    Control {
+                        Layout.preferredWidth: 32
+                        Layout.preferredHeight: 32
+
+                        visible: inRoom
+
+                        contentItem: MaterialIcon {
+                            icon: "\ue89e"
+                            color: MPalette.lighter
+                            font.pixelSize: 20
+                        }
+
+                        background: RippleEffect {
+                            circular: true
+                        }
+                    }
+
+                    Control {
+                        Layout.preferredWidth: 32
+                        Layout.preferredHeight: 32
+
+                        visible: !inRoom
+
+                        contentItem: MaterialIcon {
+                            icon: "\ue7fe"
+                            color: MPalette.lighter
+                            font.pixelSize: 20
+                        }
+
+                        background: RippleEffect {
+                            circular: true
+
+                            onClicked: {
+                                room.inviteToRoom(userID)
+                            }
+                        }
+                    }
+                }
+            }
+
+            ScrollBar.vertical: ScrollBar {}
+
+            Label {
+                anchors.centerIn: parent
+
+                visible: userDictListView.count < 1
+
+                text: "No users available"
+                color: MPalette.foreground
+            }
+        }
     }
 
-    onAccepted: room.inviteToRoom(inviteUserDialogTextField.text)
-
     onClosed: destroy()
 }