Merge RoomList & AccountBar account delegates code

TODO.md

@@ -1,6 +1,6 @@
 # TODO
 
-- merge AccountBar account and RoomList account delegates code
+- better initial highlight position when filtering
 
 - fix python getting stuck when loading large room
 - fix accounts in room list not getting their profile updated if mirage starts
@@ -12,7 +12,7 @@
 - fix: there are rooms without messages on first sync
 - avatar loading performance problem?
 
-- update docstrings
+- update docstrings and readme
 - update flatpak nio required version
 - final test
 

src/gui/Base/HTile/HTileDelegate.qml

@@ -9,13 +9,13 @@ HTile {
     topPadding: padded ? spacing / (compact ? 4 : 2) : 0
     bottomPadding: topPadding
 
-    onLeftClicked: {
+    // onLeftClicked: {
-        view.highlightRangeMode    = ListView.NoHighlightRange
+    //     view.highlightRangeMode    = ListView.NoHighlightRange
-        view.highlightMoveDuration = 0
+    //     view.highlightMoveDuration = 0
-        activated()
+    //     activated()
-        view.highlightRangeMode    = ListView.ApplyRange
+    //     view.highlightRangeMode    = ListView.ApplyRange
-        view.highlightMoveDuration = theme.animationDuration
+    //     view.highlightMoveDuration = theme.animationDuration
-    }
+    // }
 
 
     signal activated()

src/gui/MainPane/Account.qml

@@ -5,16 +5,15 @@ import QtQuick.Layouts 1.12
 import "../Base"
 import "../Base/HTile"
 
-HTileDelegate {
+HTile {
     id: account
     backgroundColor: theme.mainPane.listView.account.background
-    leftPadding: theme.spacing
-    rightPadding: 0  // the right buttons have padding
 
     contentItem: ContentRow {
         tile: account
         spacing: 0
-        opacity: collapsed ? theme.mainPane.listView.account.collapsedOpacity : 1
+        opacity:
+            collapsed ? theme.mainPane.listView.account.collapsedOpacity : 1
 
         Behavior on opacity { HNumberAnimation {} }
 
@@ -25,9 +24,45 @@ HTileDelegate {
             mxc: model.avatar_url
             radius: theme.mainPane.listView.account.avatarRadius
             compact: account.compact
+
+            Layout.alignment: Qt.AlignCenter
+
+            HLoader {
+                anchors.fill: parent
+                z: 9998
+                opacity: model.first_sync_done ? 0 : 1
+                active: opacity > 0
+
+                sourceComponent: Rectangle {
+                    radius: avatar.radius
+                    color: utils.hsluv(0, 0, 0, 0.6)
+
+                    HBusyIndicator {
+                        anchors.centerIn: parent
+                        width: parent.width / 2
+                        height: width
+                    }
+                }
+
+                Behavior on opacity { HNumberAnimation {} }
+            }
+
+            MessageIndicator {
+                id: totalMessageIndicator
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                z: 9999
+
+                indicatorTheme:
+                    theme.mainPane.accountBar.account.unreadIndicator
+                unreads: model.total_unread
+                mentions: model.total_mentions
+            }
+
         }
 
         TitleLabel {
+            id: title
             text: model.display_name || model.id
             color:
                 hovered ?
@@ -59,7 +94,7 @@ HTileDelegate {
                 account.width >= 100 * theme.uiScale ?  implicitWidth : 0
 
             HShortcut {
-                enabled: isCurrent
+                enabled: enableKeybinds
                 sequences: window.settings.keys.addNewChat
                 onActivated: addChat.clicked()
             }
@@ -98,20 +133,20 @@ HTileDelegate {
 
     contextMenu: AccountContextMenu { userId: model.id }
 
-    onLeftClicked: {
-        pageLoader.showPage(
-            "AccountSettings/AccountSettings", { "userId": model.id }
-        )
-    }
 
-
+    property bool enableKeybinds: false
-    property bool isCurrent: false
     property bool filterActive: false
 
     readonly property bool collapsed:
         (window.uiState.collapseAccounts[model.id] || false) &&
         ! filterActive
 
+    readonly property alias avatar: title
+    readonly property alias totalMessageIndicator: totalMessageIndicator
+    readonly property alias title: title
+    readonly property alias addChat: addChat
+    readonly property alias expand: expand
+
 
     function setCollapse(collapse) {
         window.uiState.collapseAccounts[model.id] = collapse
@@ -126,13 +161,13 @@ HTileDelegate {
 
 
     HShortcut {
-        enabled: isCurrent
+        enabled: enableKeybinds
         sequences: window.settings.keys.accountSettings
         onActivated: leftClicked()
     }
 
     HShortcut {
-        enabled: isCurrent
+        enabled: enableKeybinds
         sequences: window.settings.keys.toggleCollapseAccount
         onActivated: toggleCollapse()
     }

src/gui/MainPane/AccountBar.qml

@@ -38,79 +38,18 @@ Rectangle {
 
         model: ModelStore.get("matching_accounts")
 
-        delegate: HTile {
+        delegate: Account {
-            id: tile
             width: accountList.cellWidth
             height: accountList.cellHeight
             padded: false
-            backgroundColor: theme.mainPane.accountBar.account.background
+            compact: false
+            filterActive: Boolean(roomList.filter)
 
-            contentItem: Item {
+            title.visible: false
-                id: tileContent
+            addChat.visible: false
+            expand.visible: false
 
-                HUserAvatar {
+            onLeftClicked: roomList.goToAccount(model.id)
-                    id: avatar
-                    anchors.centerIn: parent
-                    userId: model.id
-                    displayName: model.display_name
-                    mxc: model.avatar_url
-                    // compact: tile.compact
-
-                    radius: theme.mainPane.accountBar.account.avatarRadius
-
-                    opacity:
-                        tile.collapsed ?
-                        theme.mainPane.accountBar.account.collapsedOpacity :
-                        1
-
-                    Behavior on opacity { HNumberAnimation {} }
-                }
-
-                MessageIndicator {
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-
-                    indicatorTheme:
-                        theme.mainPane.accountBar.account.unreadIndicator
-                    unreads: model.total_unread
-                    mentions: model.total_mentions
-                }
-
-                HLoader {
-                    anchors.centerIn: parent
-                    width: avatar.width
-                    height: avatar.height
-                    opacity: model.first_sync_done ? 0 : 1
-
-                    active: opacity > 0
-                    sourceComponent: Rectangle {
-                        radius: avatar.radius
-                        color: utils.hsluv(0, 0, 0, 0.5)
-
-                        HBusyIndicator {
-                            anchors.centerIn: parent
-                            width: tileContent.width / 2
-                            height: width
-                        }
-                    }
-
-                    Behavior on opacity { HNumberAnimation {} }
-                }
-            }
-
-            contextMenu: AccountContextMenu { userId: model.id }
-
-            onLeftClicked: {
-                accountList.highlightRangeMode    = GridView.NoHighlightRange
-                accountList.highlightMoveDuration = 0
-                roomList.goToAccount(model.id)
-                accountList.highlightRangeMode    = GridView.ApplyRange
-                accountList.highlightMoveDuration = theme.animationDuration
-            }
-
-            readonly property bool collapsed:
-                (window.uiState.collapseAccounts[model.id] || false) &&
-                ! roomList.filter
         }
 
         highlight: Item {

src/gui/MainPane/RoomList.qml

@@ -17,11 +17,20 @@ HListView {
             roleValue: "Account"
             Account {
                 width: roomList.width
+                leftPadding: theme.spacing
+                rightPadding: 0  // the right buttons have padding
+
                 filterActive: Boolean(filter)
-                isCurrent:
+                enableKeybinds:
                     currentIndexModel &&
                     (currentIndexModel.for_account || currentIndexModel.id) ===
                     model.id
+
+                totalMessageIndicator.visible: false
+
+                onLeftClicked: pageLoader.showPage(
+                    "AccountSettings/AccountSettings", {userId: model.id}
+                )
             }
         }
 
@@ -29,7 +38,7 @@ HListView {
             roleValue: "Room"
             Room {
                 width: roomList.width
-                onActivated: showItemAtIndex(model.index)
+                onLeftClicked: showItemAtIndex(model.index)
             }
         }
     }

src/themes/Midnight.qpl

@@ -283,10 +283,6 @@ mainPane:
         color background: colors.mediumBackground
 
         account:
-            real collapsedOpacity: 0.3
-            color background:      "transparent"
-            int avatarRadius:      controls.avatar.radius
-
             color selectedBackground:       colors.accentBackground
             real selectedBackgroundOpacity: 0.3
             color selectedBorder:           colors.strongAccentElement