Ask for confirmation before clearing chat history (#11891)

* Adjust cancel button for chat delete/leave dialog

Show the Cancel button for both 1-to-1 chats
and channels. Also use the "normal" cancel
button type instead, otherwise both confirm and
cancel dialog actions are buttons in red color.

* Ask for confirmation before clearing chat history

Also move the context menu action to the
bottom section along with delete/leave chat,
since both are irreversible operations.

* Adjustments to chat context menu

- To show the vertical section separator if either
"clear history" or "delete/leave" destructive actions are
enabled.
- Show either the "clear history" or the "delete/leave"
actions in red, but not both at the same time.

ui/imports/shared/views/chat/ChatContextMenuView.qml

@@ -148,15 +148,6 @@ StatusMenu {
 //        }
 //    }
 
-    StatusAction {
-        objectName: "clearHistoryMenuItem"
-        text: qsTr("Clear History")
-        icon.name: "close-circle"
-        onTriggered: {
-            root.clearChatHistory(root.chatId)
-        }
-    }
-
     StatusAction {
         objectName: "editChannelMenuItem"
         text: qsTr("Edit Channel")
@@ -206,7 +197,17 @@ StatusMenu {
     }
 
     StatusMenuSeparator {
-        visible: deleteOrLeaveMenuItem.enabled
+        visible: clearHistoryMenuItem.enabled || deleteOrLeaveMenuItem.enabled
+    }
+
+    StatusAction {
+        objectName: "clearHistoryMenuItem"
+        text: qsTr("Clear History")
+        icon.name: "close-circle"
+        type: deleteOrLeaveMenuItem.enabled ? StatusAction.Type.Normal : StatusAction.Type.Danger
+        onTriggered: {
+            Global.openPopup(clearChatConfirmationDialogComponent);
+        }
     }
 
     StatusAction {
@@ -251,6 +252,29 @@ StatusMenu {
         }
     }
 
+    Component {
+        id: clearChatConfirmationDialogComponent
+        ConfirmationDialog {
+            confirmButtonObjectName: "clearChatConfirmationDialogClearButton"
+            headerSettings.title: qsTr("Clear chat history")
+            confirmationText: qsTr("Are you sure you want to clear chat history for <b>%1</b>?").arg(root.chatName)
+            confirmButtonLabel: qsTr("Clear")
+            showCancelButton: true
+            cancelBtnType: "normal"
+
+            onClosed: {
+                destroy()
+            }
+            onCancelButtonClicked: {
+                close()
+            }
+            onConfirmButtonClicked: {
+                root.clearChatHistory(root.chatId)
+                close()
+            }
+        }
+    }
+
     Component {
         id: deleteChatConfirmationDialogComponent
         ConfirmationDialog {
@@ -264,7 +288,8 @@ StatusMenu {
                                                 root.chatType === Constants.chatType.oneToOne ?
                                                 qsTr("Are you sure you want to delete this chat?"):
                                                 qsTr("Are you sure you want to leave this chat?")
-            showCancelButton: root.isCommunityChat
+            showCancelButton: true
+            cancelBtnType: "normal"
 
             onClosed: {
                 destroy()