Highlight currently select account/room delegate

src/qml/Base/HFixedListView.qml

@@ -2,6 +2,9 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 ListView {
+    interactive: false
+    currentIndex: -1
+
     add: Transition {
         HNumberAnimation { properties: "x,y"; from: 100 }
     }
@@ -20,6 +23,4 @@ ListView {
             HNumberAnimation { properties: "x,y"; to: 100 }
         }
     }
-
-    interactive: false
 }

src/qml/Base/HListView.qml

@@ -3,5 +3,7 @@ import QtQuick.Controls 2.12
 
 HFixedListView {
     interactive: true
+    keyNavigationWraps: true
+
     ScrollBar.vertical: ScrollBar {}
 }

src/qml/SidePane/AccountDelegate.qml

@@ -28,6 +28,10 @@ Column {
         height: childrenRect.height
         color: theme.sidePane.account.background
 
+        checked:
+            window.uiState.page == "Pages/EditAccount/EditAccount.qml" &&
+            window.uiState.pageProperties.userId == model.user_id
+
         TapHandler {
             onTapped: pageStack.showPage(
                 "EditAccount/EditAccount", { "userId": model.user_id }

src/qml/SidePane/RoomDelegate.qml

@@ -12,6 +12,11 @@ HInteractiveRectangle {
     opacity: model.left ? theme.sidePane.room.leftRoomOpacity : 1
     Behavior on opacity { HNumberAnimation {} }
 
+    checked:
+        window.uiState.page == "Chat/Chat.qml" &&
+        window.uiState.pageProperties.userId == userId &&
+        window.uiState.pageProperties.roomId == model.room_id
+
     TapHandler { onTapped: pageStack.showRoom(userId, model.room_id) }
 
     HRowLayout {

src/qml/SidePane/SidePane.qml

@@ -10,6 +10,7 @@ HRectangle {
 
     color: theme.sidePane.background
 
+    property alias accountList: accountList
     property alias paneToolBar: paneToolBar
 
     property real autoWidthRatio: theme.sidePane.autoWidthRatio
@@ -73,6 +74,7 @@ HRectangle {
         anchors.fill: parent
 
         AccountList {
+            id: accountList
             Layout.fillWidth: true
             Layout.fillHeight: true
 

src/qml/UI.qml

@@ -79,17 +79,17 @@ HRectangle {
                 if (page == "Chat/Chat.qml") {
                     pageStack.showRoom(props.userId, props.roomId)
                 } else {
-                    pageStack.show(page, props)
+                    pageStack._show(page, props)
                 }
             }
 
-            function show(componentUrl, properties={}) {
+            function _show(componentUrl, properties={}) {
                 pageStack.replace(componentUrl, properties)
             }
 
             function showPage(name, properties={}) {
                 let path = "Pages/" + name + ".qml"
-                show(path, properties)
+                _show(path, properties)
 
                 window.uiState.page           = path
                 window.uiState.pageProperties = properties
@@ -97,7 +97,7 @@ HRectangle {
             }
 
             function showRoom(userId, roomId) {
-                show("Chat/Chat.qml", {userId, roomId})
+                _show("Chat/Chat.qml", {userId, roomId})
 
                 window.uiState.page           = "Chat/Chat.qml"
                 window.uiState.pageProperties = {userId, roomId}

src/themes/Default.qpl

@@ -95,13 +95,13 @@ controls:
     interactiveRectangle:
         color background: "transparent"
 
-        color hoveredOverlay: hsluv(0, 0, 100)
-        color pressedOverlay: hsluv(0, 0, 100)
-        color checkedOverlay: hsluv(0, 0, 100)
+        color hoveredOverlay: hsluv(0, 0, 80)
+        color pressedOverlay: hsluv(0, 0, 80)
+        color checkedOverlay: hsluv(0, 0, 80)
 
         real hoveredOpacity: 0.1
         real pressedOpacity: 0.2
-        real checkedOpacity: 0.2
+        real checkedOpacity: 0.1
 
     textField:
         color background:        colors.inputBackground