Rework chat invite/left banners

The banners shown in place of the composer for invited and left rooms
suffered from numerous problems due to being written very long ago and
untouched since then: unflexible components, layout glitching at certain
size, and focus issues.

These elements have been reimplemented as part of the Composer using
standard components, handle lack of space/width much better and
correctly take focus when switching rooms or the room's state changes.

Other note, the inviter's avatar is no longer shown in place of where
the current writing user is currently shown, to maintain consistency and
keep an indication of which account the user is acting as.
The inviter's profile should be available in the right pane, but nio
apparently doesn't give us member events for invited rooms.

src/gui/Pages/Chat/Composer/Composer.qml

@@ -5,18 +5,33 @@ import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../.."
 import "../../../Base"
+import "../../../Base/Buttons"
 import "../AutoCompletion"
 
 Rectangle {
-    id: composer
+    id: root
 
     property UserAutoCompletion userCompletion
     property alias eventList: messageArea.eventList
 
-    readonly property bool hasFocus: messageArea.activeFocus
+    readonly property bool widthStarved: width < 384 * theme.uiScale
+    readonly property bool parted: chat.roomInfo.left
+    readonly property string inviterId: chat.roomInfo.inviter_id
+    readonly property string inviterColoredName:
+        utils.coloredNameHtml(chat.roomInfo.inviter_name, inviterId)
+
+    readonly property bool hasFocus:
+        messageArea.activeFocus ||
+        joinButton.activeFocus ||
+        exitButton.activeFocus
+
     readonly property alias messageArea: messageArea
 
-    function takeFocus() { messageArea.forceActiveFocus() }
+    function takeFocus() {
+        joinButton.visible ? joinButton.forceActiveFocus() :
+        exitButton.visible ? exitButton.forceActiveFocus() :
+        messageArea.forceActiveFocus()
+    }
 
     implicitHeight: Math.max(theme.baseElementsHeight, row.implicitHeight)
     color: theme.chat.composer.background
@@ -39,6 +54,10 @@ Rectangle {
         }
 
         HScrollView {
+            enabled: visible
+            visible: ! root.inviterId && ! root.parted
+            onVisibleChanged: if (root.hasFocus) root.takeFocus()
+
             Layout.fillHeight: true
             Layout.fillWidth: true
 
@@ -59,7 +78,85 @@ Rectangle {
         }
 
         UploadButton {
+            visible: ! root.inviterId && ! root.parted
+            onVisibleChanged: if (root.hasFocus) root.takeFocus()
+
             Layout.fillHeight: true
         }
+
+        HLabel {
+            textFormat: Text.StyledText
+            wrapMode: HLabel.Wrap
+            visible: root.inviterId || root.parted
+            verticalAlignment: HLabel.AlignVCenter
+            text:
+                root.parted && root.inviterId ?
+                qsTr("Declined %1's invite").arg(root.inviterColoredName) :
+
+                root.parted ?
+                qsTr("No longer part of this room") :
+
+                qsTr("Invited by %1").arg(root.inviterColoredName)
+
+            leftPadding: theme.spacing
+            rightPadding: leftPadding
+            topPadding: theme.spacing / 2
+            bottomPadding: topPadding
+
+
+            onVisibleChanged: if (root.hasFocus) root.takeFocus()
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        ApplyButton {
+            id: joinButton
+            icon.name: "invite-accept"
+            text: widthStarved ? "" : qsTr("Join")
+            visible: root.inviterId && ! root.parted
+            onVisibleChanged: if (root.hasFocus) root.takeFocus()
+
+            onClicked: {
+                loading = true
+                function callback() { joinButton.loading = false }
+                py.callClientCoro(chat.userId, "join", [chat.roomId], callback)
+            }
+
+            Layout.fillWidth: false
+            Layout.fillHeight: true
+
+            Behavior on implicitWidth { HNumberAnimation {} }
+        }
+
+        CancelButton {
+            id: exitButton
+            icon.name: root.parted ? "room-forget" : "invite-decline"
+            visible: root.inviterId || root.parted
+            text:
+                widthStarved ? "" :
+                root.parted ? qsTr("Forget") :
+                qsTr("Decline")
+
+            onVisibleChanged: if (root.hasFocus) root.takeFocus()
+
+            onClicked: {
+                loading = true
+
+                window.makePopup("Popups/LeaveRoomPopup.qml", {
+                    userId: chat.userId,
+                    roomId: chat.roomId,
+                    roomName: chat.roomInfo.display_name,
+                    inviterId: root.inviterId,
+                    left: root.parted,
+                    doneCallback: () => { exitButton.loading = false },
+                })
+            }
+
+            Layout.fillWidth: false
+            Layout.fillHeight: true
+
+            Behavior on implicitWidth { HNumberAnimation {} }
+        }
     }
 }