Implement UI

src/style.css

@@ -3,14 +3,11 @@
     bottom: 10px;
     right: 10px;
     max-width: 375px;
+    border-radius: 5px;
 }
 
 #chatterbox .Timeline {
-    height: 500px;
-}
-
-#chatterbox>div {
-    border-radius: 5px;
+    height: 450px;
 }
 
 /*
@@ -26,7 +23,6 @@ todo: this style should actually be in hydrogen-web
     width: 32px;
     height: 32px;
     border: none;
-    margin: 5px;
     background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd;
     border-radius: 2px;
     cursor: pointer;
@@ -40,8 +36,8 @@ todo: this style should actually be in hydrogen-web
     justify-content: space-evenly;
     height: 80px;
     width: 320px;
-    border-radius: 5px;
 }
+
 .PolicyAgreementView-text {
     padding-bottom: 10px;
 }
@@ -67,15 +63,58 @@ todo: this style should actually be in hydrogen-web
 
 .ChatterboxView {
     width: 375px;
-    height: 570px;
+    height: 595px;
+}
+
+.RoomHeaderView {
+    display: grid;
+    grid-template-columns: 1fr 6fr 1fr;
+    align-items: center;
+    padding: 10px 15px;
+    height: 35px;
+    background-color: #295dbd;
+    border-radius: 5px 5px  0 0;
+    color: white;
+    font-weight: 600;
+    font-size: 1.5rem;
+}
+
+.RoomHeaderView_menu {
+    display: flex;
+    justify-content: end;
 }
 
-.hydrogen {
-    background-color: transparent !important;
+.RoomHeaderView_menu_minimize {
+    background: url("./ui/res/chevron-down.svg") no-repeat;
+    height: 20px;
+    width: 20px;
+    border: none;
+    cursor: pointer;
+}
+
+.RoomHeaderView .avatar {
+    border-radius: 2px;
+}
+
+.ChatterboxView_footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    font-size: 1.0rem;
+    font-weight: 600;
+    box-sizing: border-box;
+    padding-right: 53px;
+    color: #9b9797;
 }
 
-.hydrogen :not(.StartChat) {
-    background-color: rgba(245, 245, 245, 0.90);
+.ChatterboxView_footer>img {
+    width: 35px;
+    padding-left: 4px;
+}
+
+.ChatterboxView .MessageComposer_input>textarea {
+    border-radius: 5px;
+    border: #c2bebe 1.5px solid;
 }
 
 body {

src/ui/views/ChatterboxView.ts

@@ -1,13 +1,27 @@
-import { TemplateView, TimelineView, LoadingView } from "hydrogen-view-sdk";
+import { TemplateView, TimelineView, LoadingView, AvatarView, RoomViewModel } from "hydrogen-view-sdk";
 import { Builder } from "hydrogen-view-sdk/types/platform/web/ui/general/TemplateView";
 import { MessageComposer } from "hydrogen-view-sdk";
 import { ChatterboxViewModel } from "../../viewmodels/ChatterboxViewModel";
 
 export class ChatterboxView extends TemplateView<ChatterboxViewModel> {
     render(t: Builder<ChatterboxViewModel>) {
         return t.div({className: "ChatterboxView"}, [
+            t.mapView(vm => vm.roomViewModel? vm: null, vm => vm ? new RoomHeaderView(vm) : null),
             t.mapView(vm => vm.timelineViewModel, vm => vm ? new TimelineView(vm) : new LoadingView()),
-            t.mapView(vm => vm.messageComposerViewModel, vm => vm ? new MessageComposer(vm) : null)
+            t.mapView(vm => vm.messageComposerViewModel, vm => vm ? new MessageComposer(vm) : null),
+            t.div({className: "ChatterboxView_footer"}, ["Powered by", t.img({src:"./src/ui/res/matrix-logo.svg"})]),
+        ]);
+    }
+}
+
+class RoomHeaderView extends TemplateView<ChatterboxViewModel> {
+    render(t: Builder<ChatterboxViewModel>, vm) {
+        return t.div({ className: "RoomHeaderView" }, [
+            t.view(new AvatarView(vm.roomViewModel, 30)),
+            t.div({ className: "RoomHeaderView_name" }, vm => vm.roomViewModel.name),
+            t.div({ className: "RoomHeaderView_menu" }, [
+                t.button({ className: "RoomHeaderView_menu_minimize", onClick: () => vm.minimize() })
+            ]),
         ]);
     }
 }

src/viewmodels/ChatterboxViewModel.ts

@@ -1,31 +1,32 @@
 import { RoomViewModel, ViewModel, TimelineViewModel, ComposerViewModel} from "hydrogen-view-sdk";
 
 export class ChatterboxViewModel extends ViewModel {
-    private _timelineViewModel?: TimelineViewModel;
     private _messageComposerViewModel?: ComposerViewModel;
+    private _roomViewModel?: RoomViewModel;
     private _loginPromise: Promise<void>;
+    private _applySegment: (segment) => void;
 
     constructor(options) {
         super(options);
         this._client = options.client;
         this._loginPromise = options.loginPromise;
+        this._applySegment = options.applySegment;
     }
 
     async loadRoom() {
         // wait until login is completed
         await this._loginPromise;
         const roomId = this._options.config["auto_join_room"];
         const room = this._session.rooms.get(roomId) ?? await this._joinRoom(roomId);
-        const roomVm = new RoomViewModel({
+        this._roomViewModel = new RoomViewModel({
             room,
             ownUserId: this._session.userId,
             platform: this.platform,
             urlCreator: this.urlCreator,
             navigation: this.navigation,
         });
-        await roomVm.load();
-        this._timelineViewModel = roomVm.timelineViewModel;
-        this._messageComposerViewModel = new ComposerViewModel(roomVm);
+        await this._roomViewModel.load();
+        this._messageComposerViewModel = new ComposerViewModel(this._roomViewModel);
         this.emitChange("timelineViewModel");
     }
 
@@ -52,13 +53,21 @@ export class ChatterboxViewModel extends ViewModel {
         return promise;
     }
 
+    minimize() {
+        this._applySegment("start");
+    }
+
     get timelineViewModel() {
-        return this._timelineViewModel;
+        return this._roomViewModel?.timelineViewModel;
     }
 
     get messageComposerViewModel() {
         return this._messageComposerViewModel;
     }
+
+    get roomViewModel() {
+        return this._roomViewModel;
+    }
 
     private get _session() {
         return this._client.session;

src/viewmodels/RootViewModel.ts

@@ -39,29 +39,31 @@ export class RootViewModel extends ViewModel {
 
     private async _showTimeline(loginPromise: Promise<void>) {
         this._activeSection = "timeline";
-        this._chatterBoxViewModel = new ChatterboxViewModel(
-            this.childOptions({
-                client: this._client,
-                config: this._config,
-                state: this._state,
-                applySegment: this._applySegment,
-                loginPromise,
-            })
-        );
-        this._chatterBoxViewModel.loadRoom();
+        if (!this._chatterBoxViewModel) {
+            this._chatterBoxViewModel = this.track(new ChatterboxViewModel(
+                this.childOptions({
+                    client: this._client,
+                    config: this._config,
+                    state: this._state,
+                    applySegment: this._applySegment,
+                    loginPromise,
+                })
+            ));
+            this._chatterBoxViewModel.loadRoom();
+        }
         this.emitChange("activeSection");
     }
 
     private _showAccountSetup() {
         this._activeSection = "account-setup";
-        this._accountSetupViewModel = new AccountSetupViewModel(
+        this._accountSetupViewModel = this.track(new AccountSetupViewModel(
             this.childOptions({
                 client: this._client,
                 config: this._config,
                 state: this._state,
                 applySegment: this._applySegment,
             })
-        );
+        ));
         this.emitChange("activeSection");
     }