From 754e49bf0f3bb87c06cd56803cded5cf8e3354ae Mon Sep 17 00:00:00 2001
From: Andrei Smirnov <andrei.smirnov@toptal.com>
Date: Wed, 18 Aug 2021 12:33:49 +0300
Subject: [PATCH] fix(@desktop/communities): improve member list sorting

---
 ui/app/AppLayouts/Chat/ChatColumn/User.qml    |  8 +--
 .../CommunityComponents/CommunityUserList.qml | 58 ++++++++++++++++---
 ui/main.qml                                   |  4 +-
 3 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/ChatColumn/User.qml b/ui/app/AppLayouts/Chat/ChatColumn/User.qml
index fdcc8901b7..5a28efc926 100644
--- a/ui/app/AppLayouts/Chat/ChatColumn/User.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/User.qml
@@ -11,6 +11,7 @@ Item {
     property string lastSeen: ""
     property string identicon
     property int statusType: Constants.statusType_Online
+    property color offlineColor: Style.current.darkGrey
     property bool hovered: false
     property bool enableMouseArea: true
     property var currentTime
@@ -54,11 +55,10 @@ Item {
             chatType: Constants.chatTypeOneToOne
             identicon: wrapper.profileImage || wrapper.identicon
             anchors.left: parent.left
-            anchors.leftMargin: Style.current.smallPadding
+            anchors.leftMargin: Style.current.padding
             anchors.verticalCenter: parent.verticalCenter
         }
 
-
         StyledText {
             id: contactInfo
             text: Emoji.parse(Utils.removeStatusEns(Utils.filterXSS(wrapper.name))) + (isCurrentUser ? " " + qsTrId("(you)") : "")
@@ -83,7 +83,7 @@ Item {
             color: {
                 let lastSeenMinutesAgo = (currentTime/1000 - parseInt(lastSeen)) / 60
                 if (!chatsModel.isOnline) {
-                    return Style.current.darkGrey 
+                    return offlineColor
                 }
 
                 if (isCurrentUser || lastSeenMinutesAgo < 5.5){
@@ -92,7 +92,7 @@ Item {
                     return statusType == Constants.statusType_DoNotDisturb ? Style.current.red : Style.current.orange;
                 }
 
-                return Style.current.darkGrey
+                return offlineColor
             }
         }
 
diff --git a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml
index ce07fcaaf1..7cf7f94970 100644
--- a/ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml
+++ b/ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml
@@ -27,6 +27,31 @@ Item {
 
     property QtObject community: chatsModel.communities.activeCommunity
 
+    onCommunityChanged: {
+        proxyModel.clear()
+        for (let r = 0; r < community.members.rowCount(); r++) {
+            const pubKey = community.members.rowData(r, "address")
+            const nickname = appMain.getUserNickname(pubKey)
+            const identicon = community.members.rowData(r, "identicon")
+            const ensName = community.members.rowData(r, "ensName")
+            const name = !ensName.endsWith(".eth") && !!nickname ? nickname : Utils.removeStatusEns(ensName)
+            const statusType = chatsModel.communities.activeCommunity.memberStatus(pubKey)
+            const lastSeen = chatsModel.communities.activeCommunity.memberLastSeen(pubKey)
+            const lastSeenMinutesAgo = (currentTime / 1000 - parseInt(lastSeen)) / 60
+            const online = (pubKey === profileModel.profile.pubKey) || (lastSeenMinutesAgo < 7)
+
+            proxyModel.append({
+                pubKey: pubKey,
+                name: name,
+                identicon: identicon,
+                lastSeen: lastSeen,
+                statusType: statusType,
+                online: online,
+                sortKey: "%1%2".arg(online ? "A" : "B").arg(name)
+            })
+        }
+    }
+
     StyledText {
         id: titleText
         anchors.top: parent.top
@@ -36,6 +61,7 @@ Item {
         opacity: (root.width > 50) ? 1.0 : 0.0
         visible: (opacity > 0.1)
         font.pixelSize: Style.current.primaryTextFontSize
+        font.bold: true
         //% "Members"
         text: qsTrId("members-label")
     }
@@ -49,31 +75,47 @@ Item {
             topMargin: Style.current.padding
             left: parent.left
             right: parent.right
-            rightMargin: Style.current.halfPadding
+            rightMargin: Style.current.padding
             bottom: parent.bottom
             bottomMargin: Style.current.bigPadding
         }
         boundsBehavior: Flickable.StopAtBounds
         model: userListDelegate
+        section.property: "online"
+        section.delegate: Item {
+            id: sectionItem
+            property bool online: !!section
+            width: parent.width
+            height: 24
+
+            StyledText {
+                anchors.fill: parent
+                anchors.leftMargin: Style.current.padding
+                font.pixelSize: Style.current.additionalTextSize
+                color: Style.current.darkGrey
+                text: sectionItem.online ? qsTr("Online") : qsTr("Offline")
+            }
+        }
     }
     
     DelegateModelGeneralized {
         id: userListDelegate
         lessThan: [
             function(left, right) {
-                return left.lastSeen > right.lastSeen
+                return left.sortKey.localeCompare(right.sortKey) < 0
             }
         ]
-        model: community.members
+        model: ListModel {
+            id: proxyModel
+        }
         delegate: User {
-            property string nickname: appMain.getUserNickname(model.pubKey)
-
             publicKey: model.pubKey
-            name: !model.userName.endsWith(".eth") && !!nickname ? nickname : Utils.removeStatusEns(model.userName)
+            name: model.name
             identicon: model.identicon
-            lastSeen: chatsModel.communities.activeCommunity.memberLastSeen(model.pubKey)
-            statusType: chatsModel.communities.activeCommunity.memberStatus(model.pubKey)
+            lastSeen: model.lastSeen
+            statusType: model.statusType
             currentTime: root.currentTime
+            offlineColor: "transparent"
         }
     }
 }
diff --git a/ui/main.qml b/ui/main.qml
index 33944a0595..fe1e27c23a 100644
--- a/ui/main.qml
+++ b/ui/main.qml
@@ -42,8 +42,8 @@ StatusWindow {
     objectName: "mainWindow"
     minimumWidth: 900
     minimumHeight: 600
-    width: 1232
-    height: 770
+    width: Math.min(1232, Screen.desktopAvailableWidth - 64)
+    height: Math.min(770, Screen.desktopAvailableHeight - 64)
     color: Style.current.background
     title: {
         // Set application settings