fix back button in room header not working

src/domain/navigation/URLRouter.js

@@ -65,6 +65,10 @@ export class URLRouter {
         return this.urlForSegments([this._navigation.segment(type, value)]);
     }
 
+    urlUntilSegment(type) {
+        return this.urlForPath(this._navigation.path.until(type));
+    }
+
     urlForPath(path) {
         return this.history.pathAsUrl(this._stringifyPath(path));
     }

src/domain/session/room/RoomViewModel.js

@@ -22,7 +22,7 @@ import {ViewModel} from "../../ViewModel.js";
 export class RoomViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {room, ownUserId, closeCallback} = options;
+        const {room, ownUserId} = options;
         this._room = room;
         this._ownUserId = ownUserId;
         this._timeline = null;
@@ -30,9 +30,13 @@ export class RoomViewModel extends ViewModel {
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
         this._sendError = null;
-        this._closeCallback = closeCallback;
         this._composerVM = new ComposerViewModel(this);
         this._clearUnreadTimout = null;
+        this._closeUrl = this.urlRouter.urlUntilSegment("session");
+    }
+
+    get closeUrl() {
+        return this._closeUrl;
     }
 
     async load() {

src/ui/web/css/layout.css

@@ -54,7 +54,7 @@ html {
 /* mobile layout */
 @media screen and (max-width: 800px) {
     /* show back button */
-    .RoomHeader button.back { display: block; }
+    .RoomHeader .close-room { display: block !important; }
     /* hide grid button */
     .LeftPanel button.grid { display: none; }
     div.RoomView, div.room-placeholder, div.RoomGridView { display: none; }

src/ui/web/css/room.css

@@ -27,7 +27,7 @@ limitations under the License.
     display: block;
 }
 
-.RoomHeader .back {
+.RoomHeader .close-room {
     display: none;
 }
 

src/ui/web/css/themes/bubbles/theme.css

@@ -97,7 +97,7 @@ a {
     line-height: 40px;
 }
 
-.back::before {
+.close-room::before {
     content: "☰";
 }
 

src/ui/web/css/themes/element/theme.css

@@ -397,12 +397,12 @@ a {
 
 .RoomHeader > :not(:last-child) {
     /* use margin-right because the first item,
-    button.back might be hidden and then we don't
+    .close-room might be hidden and then we don't
     want a margin-left on the second item*/
     margin-right: 8px;
 }
 
-button.back {
+.close-room, .close-session {
     background-image: url('icons/chevron-left.svg');
     background-position-x: 10px;
 }

src/ui/web/session/room/RoomView.js

@@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "utility back", onClick: () => vm.close()}),
+                    t.a({className: "button-utility close-room", href: vm.closeUrl, title: vm.i18n`Close room`}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),