fix(@desktop/timeline): timeline and images area bugfixes

ui/app/AppLayouts/Timeline/TimelineLayout.qml

@@ -113,6 +113,13 @@ ScrollView {
             model: messageListDelegate
             section.property: "sectionIdentifier"
             section.criteria: ViewSection.FullString
+
+            Connections {
+                target: chatsModel.messageView
+                onMessagesLoaded: {
+                    Qt.callLater(chatLogView.positionViewAtBeginning)
+                }
+            }
         }
 
         DelegateModelGeneralized {

ui/imports/Utils.qml

@@ -549,11 +549,11 @@ QtObject {
     }
 
     function hasImageExtension(url) {
-        return Constants.acceptedImageExtensions.some(ext => url.includes(ext))
+        return Constants.acceptedImageExtensions.some(ext => url.toLowerCase().includes(ext))
     }
 
     function hasDragNDropImageExtension(url) {
-        return Constants.acceptedDragNDropImageExtensions.some(ext => url.includes(ext))
+        return Constants.acceptedDragNDropImageExtensions.some(ext => url.toLowerCase().includes(ext))
     }
 
     function deduplicate(array) {

ui/shared/status/StatusChatImageQtyValidator.qml

@@ -10,11 +10,7 @@ StatusChatImageValidator {
     errorMessage: qsTr("You can only upload %1 images at a time").arg(Constants.maxUploadFiles)
 
     onImagesChanged: {
-        let isValid = true
-        if (images.length > Constants.maxUploadFiles) {
-            isValid = false
-        }
-        root.isValid = isValid
+        root.isValid = images.length <= Constants.maxUploadFiles
         root.validImages = images.slice(0, Constants.maxUploadFiles)
     }
 }

ui/shared/status/StatusChatInput.qml

@@ -805,7 +805,7 @@ Rectangle {
                 anchors.right: parent.right
                 anchors.rightMargin: control.isStatusUpdateInput ? actions.width + 2* Style.current.padding : Style.current.halfPadding
                 anchors.top: parent.top
-                anchors.topMargin: control.isStatusUpdateInput ? 0 : Style.current.halfPadding
+                anchors.topMargin: Style.current.halfPadding
                 visible: isImage
                 width: messageInputField.width - actions.width
                 onImageRemoved: {

ui/shared/status/StatusChatInputImageArea.qml

@@ -6,19 +6,22 @@ import "../../shared"
 
 Row {
     id: imageArea
-    spacing: Style.current.halfPadding
+    spacing: 0
 
     signal imageRemoved(int index)
     property alias imageSource: rptImages.model
 
     Repeater {
         id: rptImages
+
         Item {
-            height: chatImage.paintedHeight + closeBtn.height - 5
-            width: chatImage.width
+            height: Style.current.halfPadding * 2 + chatImage.height + closeBtn.height / 3
+            width: chatImage.width + closeBtn.width / 3
+
             Image {
                 id: chatImage
-                property bool hovered: false
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
                 width: 64
                 height: 64
                 fillMode: Image.PreserveAspectCrop
@@ -26,18 +29,6 @@ Row {
                 smooth: false
                 antialiasing: true
                 source: modelData
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onEntered: {
-                        chatImage.hovered = true
-                    }
-                    onExited: {
-                        chatImage.hovered = false
-                    }
-                }
-
                 layer.enabled: true
                 layer.effect: OpacityMask {
                     maskSource: Item {
@@ -61,19 +52,31 @@ Row {
                     }
                 }
             }
+
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                hoverEnabled: true
+                onClicked: {
+                    console.log("opening image...")
+                    imagePopup.openPopup(chatImage)
+                }
+            }
+
             RoundButton {
                 id: closeBtn
-                implicitWidth: 24
-                implicitHeight: 24
+                width: 24
+                height: 24
                 padding: 0
-                anchors.top: chatImage.top
-                anchors.topMargin: -5
                 anchors.right: chatImage.right
-                anchors.rightMargin: -Style.current.halfPadding
-                visible: chatImage.hovered || hovered
+                anchors.rightMargin: -width / 3
+                anchors.top: chatImage.top
+                anchors.topMargin: -height / 3
+                hoverEnabled: false
+                opacity: mouseArea.containsMouse || buttonMouseArea.containsMouse ? 1 : 0
                 contentItem: SVGImage {
-                    source: !closeBtn.hovered ?
-                    "../../app/img/close-filled.svg" : "../../app/img/close-filled-hovered.svg"
+                    source: !buttonMouseArea.containsMouse ? "../../app/img/close-filled.svg" : "../../app/img/close-filled-hovered.svg"
                     width: closeBtn.width
                     height: closeBtn.height
                 }
@@ -86,9 +89,11 @@ Row {
                     rptImages.model = tmp
                 }
                 MouseArea {
-                    cursorShape: Qt.PointingHandCursor
+                    id: buttonMouseArea
                     anchors.fill: parent
-                    onPressed: mouse.accepted = false
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+                    onClicked: closeBtn.clicked()
                 }
             }
         }