Room Drawer Media Tab

Add a tab bar to the room drawer which includes a new media tab in addition to the room information tab. This mr completes the architecture for adding others easily later e.g. message highlights or threads.

To put this together I had to make sure things like the menus and the maximize delegate were available to both the room drawer and page so there is some rework there to put it all together.

Wide\
![image](/uploads/b7d3a3ee00016f9ede5cf6fb93e7b40c/image.png)

Mobile\
![image](/uploads/aa02e23f79b37f6cad903d3f356e0ef4/image.png)

src/qml/RoomDrawer/RoomDrawer.qml

@@ -65,9 +65,12 @@ Kirigami.OverlayDrawer {
     onAnimatingChanged: if (dim === false) dim = undefined
 
     topPadding: 0
+    bottomPadding: 0
     leftPadding: 0
     rightPadding: 0
+
     Kirigami.Theme.colorSet: Kirigami.Theme.View
+
     contentItem: Loader {
         id: loader
         active: root.drawerOpen
@@ -75,6 +78,8 @@ Kirigami.OverlayDrawer {
         sourceComponent: ColumnLayout {
             spacing: 0
 
+            Component.onCompleted: infoAction.toggle()
+
             QQC2.ToolBar {
                 Layout.fillWidth: true
 
@@ -83,7 +88,7 @@ Kirigami.OverlayDrawer {
                 contentItem: RowLayout {
                     Kirigami.Heading {
                         Layout.fillWidth: true
-                        text: i18n("Room information")
+                        text: drawerItemLoader.item ? drawerItemLoader.item.title : ""
                     }
 
                     QQC2.ToolButton {
@@ -102,18 +107,47 @@ Kirigami.OverlayDrawer {
                 }
             }
 
-            QQC2.ScrollView {
+            Loader {
+                id: drawerItemLoader
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                sourceComponent: roomInformation
+            }
 
-                // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
-                QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
-
+            Component {
+                id: roomInformation
                 RoomInformation {
-                    id: roomInformation
                     room: root.room
                 }
             }
+
+            Component {
+                id: roomMedia
+                RoomMedia {
+                    currentRoom: root.room
+                }
+            }
+
+            Kirigami.NavigationTabBar {
+                id: navigationBar
+                Layout.fillWidth: true
+                Kirigami.Theme.colorSet: Kirigami.Theme.Window
+                Kirigami.Theme.inherit: false
+
+                actions: [
+                    Kirigami.Action {
+                        id: infoAction
+                        text: i18n("Information")
+                        icon.name: "documentinfo"
+                        onTriggered: drawerItemLoader.sourceComponent = roomInformation
+                    },
+                    Kirigami.Action {
+                        text: i18n("Media")
+                        icon.name: "mail-attachment-symbollic"
+                        onTriggered: drawerItemLoader.sourceComponent = roomMedia
+                    }
+                ]
+            }
         }
     }
 }

src/qml/RoomDrawer/RoomDrawerPage.qml

@@ -18,7 +18,7 @@ import org.kde.neochat 1.0
  *
  * @sa RoomDrawer
  */
-Kirigami.ScrollablePage {
+Kirigami.Page {
     id: root
 
     /**
@@ -26,18 +26,66 @@ Kirigami.ScrollablePage {
      */
     readonly property NeoChatRoom room: RoomManager.currentRoom
 
-    title: roomInformation.title
+    title: drawerItemLoader.item ? drawerItemLoader.item.title : ""
+
+    topPadding: 0
+    bottomPadding: 0
+    leftPadding: 0
+    rightPadding: 0
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+    Kirigami.Theme.inherit: false
+
+    Component.onCompleted: infoAction.toggle()
 
     actions {
         main: Kirigami.Action {
+            displayHint: Kirigami.DisplayHint.IconOnly
+            text: i18n("Settings")
             icon.name: "settings-configure"
             onTriggered: applicationWindow().pageStack.pushDialogLayer('qrc:/Categories.qml', {room: root.room}, { title: i18n("Room Settings") })
         }
     }
 
-    RoomInformation {
+    Loader {
+        id: drawerItemLoader
+        width: parent.width
+        height: parent.height
+        sourceComponent: roomInformation
+    }
+
+    Component {
         id: roomInformation
-        room: root.room
+        RoomInformation {
+            room: root.room
+        }
+    }
+
+    Component {
+        id: roomMedia
+        RoomMedia {
+            currentRoom: root.room
+        }
+    }
+
+    footer: Kirigami.NavigationTabBar {
+        id: navigationBar
+        Kirigami.Theme.colorSet: Kirigami.Theme.Window
+        Kirigami.Theme.inherit: false
+
+        actions: [
+            Kirigami.Action {
+                id: infoAction
+                text: i18n("Information")
+                icon.name: "documentinfo"
+                onTriggered: drawerItemLoader.sourceComponent = roomInformation
+            },
+            Kirigami.Action {
+                text: i18n("Media")
+                icon.name: "mail-attachment-symbollic"
+                onTriggered: drawerItemLoader.sourceComponent = roomMedia
+            }
+        ]
     }
 
     Connections {

src/qml/RoomDrawer/RoomInformation.qml

@@ -24,7 +24,7 @@ import org.kde.neochat 1.0
  *
  * @sa RoomDrawer, RoomDrawerPage
  */
-ListView {
+QQC2.ScrollView {
     id: root
 
     /**
@@ -37,206 +37,212 @@ ListView {
      */
     readonly property string title: i18nc("@action:title", "Room information")
 
-    header: ColumnLayout {
-        id: columnLayout
+    // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+    QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
 
-        property alias userListSearchField: userListSearchField
+    ListView {
+        id: userList
+        header: ColumnLayout {
+            id: columnLayout
 
-        spacing: 0
-        width: root.width
+            property alias userListSearchField: userListSearchField
 
-        Loader {
-            active: true
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.smallSpacing
-            sourceComponent: root.room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
-            onItemChanged: if (item) {
-                root.positionViewAtBeginning();
-            }
-        }
-
-        Kirigami.ListSectionHeader {
-            label: i18n("Options")
-            activeFocusOnTab: false
-
-            Layout.fillWidth: true
-        }
-
-        Delegates.RoundedItemDelegate {
-            id: devtoolsButton
-
-            icon.name: "tools"
-            text: i18n("Open developer tools")
-            visible: Config.developerTools
-
-            Layout.fillWidth: true
-
-            onClicked: {
-                applicationWindow().pageStack.pushDialogLayer("qrc:/DevtoolsPage.qml", {room: root.room}, {title: i18n("Developer Tools")})
-            }
-        }
-
-        Delegates.RoundedItemDelegate {
-            id: searchButton
-
-            icon.name: "search"
-            text: i18n("Search in this room")
-
-            Layout.fillWidth: true
-
-            onClicked: {
-                pageStack.pushDialogLayer("qrc:/SearchPage.qml", {
-                    currentRoom: root.room
-                }, {
-                    title: i18nc("@action:title", "Search")
-                })
-            }
-        }
-
-        Delegates.RoundedItemDelegate {
-            id: favouriteButton
-
-            icon.name: root.room && root.room.isFavourite ? "rating" : "rating-unrated"
-            text: root.room && root.room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite")
-
-            onClicked: root.room.isFavourite ? root.room.removeTag("m.favourite") : root.room.addTag("m.favourite", 1.0)
-
-            Layout.fillWidth: true
-        }
-
-        Delegates.RoundedItemDelegate {
-            id: locationsButton
-
-            icon.name: "map-flat"
-            text: i18n("Show locations for this room")
-
-            onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", {
-                room: root.room
-            }, {
-                title: i18nc("Locations on a map", "Locations")
-            })
-
-            Layout.fillWidth: true
-        }
-
-        Kirigami.ListSectionHeader {
-            label: i18n("Members")
-            activeFocusOnTab: false
             spacing: 0
-            visible: !root.room.isDirectChat()
+            width: root.width
 
-            Layout.fillWidth: true
-
-            QQC2.ToolButton {
-                id: memberSearchToggle
-                checkable: true
-                icon.name: "search"
-                QQC2.ToolTip.text: i18n("Search user in room")
-                QQC2.ToolTip.visible: hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-                onToggled: {
-                    userListSearchField.text = "";
+            Loader {
+                active: true
+                Layout.fillWidth: true
+                Layout.topMargin: Kirigami.Units.smallSpacing
+                sourceComponent: root.room.isDirectChat() ? directChatDrawerHeader : groupChatDrawerHeader
+                onItemChanged: if (item) {
+                    userList.positionViewAtBeginning();
                 }
             }
 
-            QQC2.ToolButton {
-                visible: root.room.canSendState("invite")
-                icon.name: "list-add-user"
-
-                onClicked: {
-                    applicationWindow().pageStack.pushDialogLayer("qrc:/InviteUserPage.qml", {room: root.room}, {title: i18nc("@title", "Invite a User")})
-                }
-
-                QQC2.ToolTip.text: i18n("Invite user to room")
-                QQC2.ToolTip.visible: hovered
-                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
-            }
-
-            QQC2.Label {
-                Layout.alignment: Qt.AlignRight
-                text: root.room ? i18np("%1 member", "%1 members", root.room.joinedCount) : i18n("No member count")
-            }
-        }
-
-        Kirigami.SearchField {
-            id: userListSearchField
-            visible: memberSearchToggle.checked
-
-            onVisibleChanged: if (visible) forceActiveFocus()
-            Layout.fillWidth: true
-            Layout.leftMargin: Kirigami.Units.largeSpacing - 1
-            Layout.rightMargin: Kirigami.Units.largeSpacing - 1
-            Layout.bottomMargin: Kirigami.Units.smallSpacing
-
-            focusSequence: "Ctrl+Shift+F"
-
-            onAccepted: sortedMessageEventModel.filterString = text;
-        }
-    }
-
-    KSortFilterProxyModel {
-        id: sortedMessageEventModel
-
-        sourceModel: UserListModel {
-            room: root.room
-        }
-
-        sortRole: "powerLevel"
-        sortOrder: Qt.DescendingOrder
-        filterRole: "name"
-        filterCaseSensitivity: Qt.CaseInsensitive
-    }
-
-    model: root.room.isDirectChat() ? 0 : sortedMessageEventModel
-
-    clip: true
-    activeFocusOnTab: true
-
-    delegate: Delegates.RoundedItemDelegate {
-        id: userDelegate
-
-        required property string name
-        required property string userId
-        required property string avatar
-        required property int powerLevel
-        required property string powerLevelString
-
-        implicitHeight: Kirigami.Units.gridUnit * 2
-
-        text: name
-
-        onClicked: {
-            userDelegate.highlighted = true;
-            RoomManager.visitUser(room.getUser(userDelegate.userId).object, "mention")
-        }
-
-        contentItem: RowLayout {
-            KirigamiComponents.Avatar {
-                implicitWidth: height
-                sourceSize {
-                    height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
-                    width: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
-                }
-                source: userDelegate.avatar
-                name: userDelegate.userId
-
-                Layout.fillHeight: true
-            }
-
-            QQC2.Label {
-                text: userDelegate.name
-                textFormat: Text.PlainText
-                elide: Text.ElideRight
+            Kirigami.ListSectionHeader {
+                label: i18n("Options")
+                activeFocusOnTab: false
 
                 Layout.fillWidth: true
             }
 
-            QQC2.Label {
-                visible: userDelegate.powerLevel > 0
+            Delegates.RoundedItemDelegate {
+                id: devtoolsButton
 
-                text: userDelegate.powerLevelString
-                color: Kirigami.Theme.disabledTextColor
-                textFormat: Text.PlainText
+                icon.name: "tools"
+                text: i18n("Open developer tools")
+                visible: Config.developerTools
+
+                Layout.fillWidth: true
+
+                onClicked: {
+                    applicationWindow().pageStack.pushDialogLayer("qrc:/DevtoolsPage.qml", {room: root.room}, {title: i18n("Developer Tools")})
+                }
+            }
+
+            Delegates.RoundedItemDelegate {
+                id: searchButton
+
+                icon.name: "search"
+                text: i18n("Search in this room")
+
+                Layout.fillWidth: true
+
+                onClicked: {
+                    pageStack.pushDialogLayer("qrc:/SearchPage.qml", {
+                        currentRoom: root.room
+                    }, {
+                        title: i18nc("@action:title", "Search")
+                    })
+                }
+            }
+
+            Delegates.RoundedItemDelegate {
+                id: favouriteButton
+
+                icon.name: root.room && root.room.isFavourite ? "rating" : "rating-unrated"
+                text: root.room && root.room.isFavourite ? i18n("Remove room from favorites") : i18n("Make room favorite")
+
+                onClicked: root.room.isFavourite ? root.room.removeTag("m.favourite") : root.room.addTag("m.favourite", 1.0)
+
+                Layout.fillWidth: true
+            }
+
+            Delegates.RoundedItemDelegate {
+                id: locationsButton
+
+                icon.name: "map-flat"
+                text: i18n("Show locations for this room")
+
+                onClicked: pageStack.pushDialogLayer("qrc:/LocationsPage.qml", {
+                    room: root.room
+                }, {
+                    title: i18nc("Locations on a map", "Locations")
+                })
+
+                Layout.fillWidth: true
+            }
+
+            Kirigami.ListSectionHeader {
+                label: i18n("Members")
+                activeFocusOnTab: false
+                spacing: 0
+                visible: !root.room.isDirectChat()
+
+                Layout.fillWidth: true
+
+                QQC2.ToolButton {
+                    id: memberSearchToggle
+                    checkable: true
+                    icon.name: "search"
+                    QQC2.ToolTip.text: i18n("Search user in room")
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                    onToggled: {
+                        userListSearchField.text = "";
+                    }
+                }
+
+                QQC2.ToolButton {
+                    visible: root.room.canSendState("invite")
+                    icon.name: "list-add-user"
+
+                    onClicked: {
+                        applicationWindow().pageStack.pushDialogLayer("qrc:/InviteUserPage.qml", {room: root.room}, {title: i18nc("@title", "Invite a User")})
+                    }
+
+                    QQC2.ToolTip.text: i18n("Invite user to room")
+                    QQC2.ToolTip.visible: hovered
+                    QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+                }
+
+                QQC2.Label {
+                    Layout.alignment: Qt.AlignRight
+                    text: root.room ? i18np("%1 member", "%1 members", root.room.joinedCount) : i18n("No member count")
+                }
+            }
+
+            Kirigami.SearchField {
+                id: userListSearchField
+                visible: memberSearchToggle.checked
+
+                onVisibleChanged: if (visible) forceActiveFocus()
+                Layout.fillWidth: true
+                Layout.leftMargin: Kirigami.Units.largeSpacing - 1
+                Layout.rightMargin: Kirigami.Units.largeSpacing - 1
+                Layout.bottomMargin: Kirigami.Units.smallSpacing
+
+                focusSequence: "Ctrl+Shift+F"
+
+                onAccepted: sortedMessageEventModel.filterString = text;
+            }
+        }
+
+        KSortFilterProxyModel {
+            id: sortedMessageEventModel
+
+            sourceModel: UserListModel {
+                room: root.room
+            }
+
+            sortRole: "powerLevel"
+            sortOrder: Qt.DescendingOrder
+            filterRole: "name"
+            filterCaseSensitivity: Qt.CaseInsensitive
+        }
+
+        model: root.room.isDirectChat() ? 0 : sortedMessageEventModel
+
+        clip: true
+        activeFocusOnTab: true
+
+        delegate: Delegates.RoundedItemDelegate {
+            id: userDelegate
+
+            required property string name
+            required property string userId
+            required property string avatar
+            required property int powerLevel
+            required property string powerLevelString
+
+            implicitHeight: Kirigami.Units.gridUnit * 2
+
+            text: name
+
+            onClicked: {
+                userDelegate.highlighted = true;
+                RoomManager.visitUser(room.getUser(userDelegate.userId).object, "mention")
+            }
+
+            contentItem: RowLayout {
+                KirigamiComponents.Avatar {
+                    implicitWidth: height
+                    sourceSize {
+                        height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
+                        width: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5
+                    }
+                    source: userDelegate.avatar
+                    name: userDelegate.userId
+
+                    Layout.fillHeight: true
+                }
+
+                QQC2.Label {
+                    text: userDelegate.name
+                    textFormat: Text.PlainText
+                    elide: Text.ElideRight
+
+                    Layout.fillWidth: true
+                }
+
+                QQC2.Label {
+                    visible: userDelegate.powerLevel > 0
+
+                    text: userDelegate.powerLevelString
+                    color: Kirigami.Theme.disabledTextColor
+                    textFormat: Text.PlainText
+                }
             }
         }
     }
@@ -255,6 +261,6 @@ ListView {
         if (root.headerItem) {
             root.headerItem.userListSearchField.text = "";
         }
-        root.currentIndex = -1
+        userList.currentIndex = -1
     }
 }

src/qml/RoomDrawer/RoomMedia.qml

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+import Qt.labs.qmlmodels 1.0
+
+import org.kde.kirigami 2.20 as Kirigami
+
+import org.kde.neochat 1.0
+
+/**
+ * @brief Component for visualising the loaded media items in the room.
+ *
+ * The component is a simple list of media delegates (videos or images) with the
+ * ability to open them in the mamimize component.
+ *
+ * @note This component is only the contents, it will need to be placed in either
+ *       a drawer (desktop) or page (mobile) to be used.
+ *
+ * @sa RoomDrawer, RoomDrawerPage
+ */
+QQC2.ScrollView {
+    id: root
+
+    /**
+    * @brief The title that should be displayed for this component if available.
+    */
+    readonly property string title: i18nc("@action:title", "Room Media")
+
+    /**
+     * @brief The current room that user is viewing.
+     */
+    required property NeoChatRoom currentRoom
+
+    // HACK: Hide unnecessary horizontal scrollbar (https://bugreports.qt.io/browse/QTBUG-83890)
+    QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+
+    ListView {
+        // So that delegates can access current room properly.
+        readonly property NeoChatRoom currentRoom: root.currentRoom
+
+        clip: true
+        verticalLayoutDirection: ListView.BottomToTop
+
+        model: RoomManager.mediaMessageFilterModel
+
+        delegate: DelegateChooser {
+            role: "type"
+
+            DelegateChoice {
+                roleValue: 0//MediaMessageFilterModel.Image
+                delegate: ImageDelegate {
+                    alwaysShowAuthor: true
+                    alwaysMaxWidth: true
+                    cardBackground: false
+                }
+            }
+
+            DelegateChoice {
+                roleValue: 1//MediaMessageFilterModel.Video
+                delegate: VideoDelegate {
+                    alwaysShowAuthor: true
+                    alwaysMaxWidth: true
+                    cardBackground: false
+                }
+            }
+        }
+    }
+}