Mobile explore component

Create a mobile version of explore component and place it at the bottom for single handed use. This also refactors the UserInfo component so it can be at the top on mobile as well as the bottom on dektop.

This should have no effect on desktop and should be identical.

![image](/uploads/9b3133fbde74ca27069d6b039efb1079/image.png)

src/qml/RoomListPage.qml

@@ -84,11 +84,9 @@ Kirigami.Page {
         goToPreviousRoomFiltered((item) => (item.visible && item.hasUnread));
     }
 
-    titleDelegate: ExploreComponent {
+    titleDelegate: Loader {
         Layout.fillWidth: true
-        desiredWidth: root.width - Kirigami.Units.largeSpacing
-        collapsed: root.collapsed
-        connection: root.connection
+        sourceComponent:  Kirigami.Settings.isMobile ? userInfo : exploreComponent
     }
 
     padding: 0
@@ -284,10 +282,9 @@ Kirigami.Page {
         }
     }
 
-    footer: UserInfo {
+    footer: Loader {
         width: parent.width
-        visible: !root.collapsed
-        connection: root.connection
+        sourceComponent: Kirigami.Settings.isMobile ? exploreComponentMobile : userInfoDesktop
     }
 
     MouseArea {
@@ -333,6 +330,43 @@ Kirigami.Page {
         }
     }
 
+    Component {
+        id: userInfo
+        UserInfo {
+            visible: !root.collapsed
+            bottomEdge: false
+            connection: root.connection
+        }
+    }
+
+    Component {
+        id: userInfoDesktop
+        UserInfoDesktop {
+            visible: !root.collapsed
+            connection: root.connection
+        }
+    }
+
+    Component {
+        id: exploreComponent
+        ExploreComponent {
+            desiredWidth: root.width - Kirigami.Units.largeSpacing
+            collapsed: root.collapsed
+            connection: root.connection
+        }
+    }
+
+    Component {
+        id: exploreComponentMobile
+        ExploreComponentMobile {
+            connection: root.connection
+
+            onTextChanged: (newText) => {
+                sortFilterRoomListModel.filterText = newText
+            }
+        }
+    }
+
     /*
      * Hold the modifiable currentWidth in a private object so that only internal
      * members can modify it.