From 4a657b279d257a847978a4379cce4c632beb6e97 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Sun, 16 Jun 2019 15:21:20 +0200
Subject: [PATCH] apply css from prototype, other small changes, keep scroll at
 bottom

---
 index.html                                    | 49 +-----------
 src/domain/session/avatar.js                  |  4 +
 src/domain/session/room/RoomViewModel.js      |  7 +-
 .../room/timeline/tiles/MessageTile.js        |  2 +-
 .../room/timeline/tiles/RoomMemberTile.js     | 15 +++-
 .../session/room/timeline/tiles/TextTile.js   |  4 +-
 .../session/roomlist/RoomTileViewModel.js     |  6 ++
 src/ui/web/css/avatar.css                     | 27 +++++++
 src/ui/web/css/layout.css                     | 56 ++++++++++++++
 src/ui/web/css/left-panel.css                 | 47 ++++++++++++
 src/ui/web/css/main.css                       | 21 ++++++
 src/ui/web/css/room.css                       | 65 ++++++++++++++++
 src/ui/web/css/timeline.css                   | 74 +++++++++++++++++++
 src/ui/web/general/ListView.js                | 18 ++++-
 src/ui/web/general/TemplateView.js            |  2 +-
 src/ui/web/general/html.js                    |  2 +-
 src/ui/web/session/RoomPlaceholderView.js     |  2 +-
 src/ui/web/session/RoomTile.js                |  5 +-
 src/ui/web/session/SessionView.js             |  4 +-
 src/ui/web/session/SyncStatusBar.js           |  1 +
 src/ui/web/session/room/RoomView.js           | 70 ++++++++----------
 src/ui/web/session/room/TimelineList.js       | 31 ++++++++
 ...AnnoucementView.js => AnnouncementView.js} |  2 +-
 .../session/room/timeline/TextMessageView.js  |  1 +
 24 files changed, 415 insertions(+), 100 deletions(-)
 create mode 100644 src/domain/session/avatar.js
 create mode 100644 src/ui/web/css/avatar.css
 create mode 100644 src/ui/web/css/layout.css
 create mode 100644 src/ui/web/css/left-panel.css
 create mode 100644 src/ui/web/css/main.css
 create mode 100644 src/ui/web/css/room.css
 create mode 100644 src/ui/web/css/timeline.css
 create mode 100644 src/ui/web/session/room/TimelineList.js
 rename src/ui/web/session/room/timeline/{AnnoucementView.js => AnnouncementView.js} (63%)
diff --git a/index.html b/index.html
index 0ab41b2d..8ae1e5cf 100644
--- a/index.html
+++ b/index.html
@@ -2,54 +2,7 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-        <style type="text/css">
-            #container {
-                height: 80vh;
-                border: 1px solid black;
-                font-family: sans-serif;
-            }
-
-            .SessionView {
-                display: flex;
-                height: 100%;
-                min-width: 0;
-            }
-
-            .ListView {
-                margin: 0;
-                padding: 0;
-            }
-
-            .SessionView > .ListView {
-                height: 100%;
-                flex: 0 0 auto;
-                border-right: 1px solid black;
-                list-style: none;
-                overflow-y: scroll;
-            }
-
-            .SessionView > .ListView > li {
-                padding: 10px;
-                border-bottom: 1px solid grey;
-                cursor: pointer;
-            }
-
-            .SessionView > .RoomView {
-                padding: 10px;
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .SessionView > .RoomView > .ListView {
-                flex: 1;
-                overflow-y: scroll;
-            }
-
-            .RoomView_error {
-                color: red;
-            }
-        </style>
+        <link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
 	</head>
 	<body>
 		<script type="module">
diff --git a/src/domain/session/avatar.js b/src/domain/session/avatar.js
new file mode 100644
index 00000000..ba275d65
--- /dev/null
+++ b/src/domain/session/avatar.js
@@ -0,0 +1,4 @@
+export function avatarInitials(name) {
+    const words = name.split(" ").slice(0, 2);
+    return words.reduce((i, w) => i + w.charAt(0).toUpperCase(), "");
+}
\ No newline at end of file
diff --git a/src/domain/session/room/RoomViewModel.js b/src/domain/session/room/RoomViewModel.js
index 899f13af..84e21627 100644
--- a/src/domain/session/room/RoomViewModel.js
+++ b/src/domain/session/room/RoomViewModel.js
@@ -1,5 +1,6 @@
 import EventEmitter from "../../../EventEmitter.js";
 import TimelineViewModel from "./timeline/TimelineViewModel.js";
+import {avatarInitials} from "../avatar.js";
 
 export default class RoomViewModel extends EventEmitter {
     constructor(room, ownUserId) {
@@ -50,6 +51,10 @@ export default class RoomViewModel extends EventEmitter {
         if (this._timelineError) {
             return `Something went wrong loading the timeline: ${this._timelineError.message}`;
         }
-        return null;
+        return "";
+    }
+
+    get avatarInitials() {
+        return avatarInitials(this._room.name);
     }
 }
diff --git a/src/domain/session/room/timeline/tiles/MessageTile.js b/src/domain/session/room/timeline/tiles/MessageTile.js
index 937074fc..80ea8ebb 100644
--- a/src/domain/session/room/timeline/tiles/MessageTile.js
+++ b/src/domain/session/room/timeline/tiles/MessageTile.js
@@ -21,7 +21,7 @@ export default class MessageTile extends SimpleTile {
     }
 
     get time() {
-        return this._date.toLocaleTimeString();
+        return this._date.toLocaleTimeString({}, {hour: "numeric", minute: "2-digit"});
     }
 
     get isOwn() {
diff --git a/src/domain/session/room/timeline/tiles/RoomMemberTile.js b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
index e3492882..3f0535fa 100644
--- a/src/domain/session/room/timeline/tiles/RoomMemberTile.js
+++ b/src/domain/session/room/timeline/tiles/RoomMemberTile.js
@@ -9,6 +9,19 @@ export default class RoomNameTile extends SimpleTile {
     get announcement() {
         const event = this._entry.event;
         const content = event.content;
-        return `${event.sender} changed membership to ${content.membership}`;
+        switch (content.membership) {
+            case "invite": return `${event.state_key} was invited to the room by ${event.sender}`;
+            case "join": return `${event.state_key} joined the room`;
+            case "leave": {
+                if (event.state_key === event.sender) {
+                    return `${event.state_key} left the room`;
+                } else {
+                    const reason = content.reason;
+                    return `${event.state_key} was kicked from the room by ${event.sender}${reason ? `: ${reason}` : ""}`;
+                }
+            }
+            case "ban": return `${event.state_key} was banned from the room by ${event.sender}`;
+            default: return `${event.sender} membership changed to ${content.membership}`;
+        }
     }
 }
diff --git a/src/domain/session/room/timeline/tiles/TextTile.js b/src/domain/session/room/timeline/tiles/TextTile.js
index 03485ea0..a13f24fb 100644
--- a/src/domain/session/room/timeline/tiles/TextTile.js
+++ b/src/domain/session/room/timeline/tiles/TextTile.js
@@ -1,14 +1,14 @@
 import MessageTile from "./MessageTile.js";
 
 export default class TextTile extends MessageTile {
-    get label() {
+    get text() {
         const content = this._getContent();
         const body = content && content.body;
         const sender = this._entry.event.sender;
         if (this._entry.type === "m.emote") {
             return `* ${sender} ${body}`;
         } else {
-            return `${sender}: ${body}`;
+            return body;
         }
     }
 }
diff --git a/src/domain/session/roomlist/RoomTileViewModel.js b/src/domain/session/roomlist/RoomTileViewModel.js
index 34c8ea86..110b88b2 100644
--- a/src/domain/session/roomlist/RoomTileViewModel.js
+++ b/src/domain/session/roomlist/RoomTileViewModel.js
@@ -1,3 +1,5 @@
+import {avatarInitials} from "../avatar.js";
+
 export default class RoomTileViewModel {
     // we use callbacks to parent VM instead of emit because
     // it would be annoying to keep track of subscriptions in
@@ -21,4 +23,8 @@ export default class RoomTileViewModel {
     get name() {
         return this._room.name;
     }
+
+    get avatarInitials() {
+        return avatarInitials(this._room.name);
+    }
 }
diff --git a/src/ui/web/css/avatar.css b/src/ui/web/css/avatar.css
new file mode 100644
index 00000000..b780ef23
--- /dev/null
+++ b/src/ui/web/css/avatar.css
@@ -0,0 +1,27 @@
+.avatar {
+    --avatar-size: 32px;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    border-radius: 100px;
+    overflow: hidden;
+    flex-shrink: 0;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height: var(--avatar-size);
+    font-size: calc(var(--avatar-size) * 0.6);
+    text-align: center;
+    letter-spacing: calc(var(--avatar-size) * -0.05);
+    background: white;
+    color: black;
+}
+
+.avatar.large {
+    --avatar-size: 40px;
+}
+
+.avatar img {
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/ui/web/css/layout.css b/src/ui/web/css/layout.css
new file mode 100644
index 00000000..55f9b4f9
--- /dev/null
+++ b/src/ui/web/css/layout.css
@@ -0,0 +1,56 @@
+html {
+    height: 100%;
+}
+body {
+    margin: 0;
+}
+
+.SessionView {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.SessionView > .main {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    min-width: 0;
+    width: 100vw;
+}
+
+/* mobile layout */
+@media screen and (max-width: 800px) {
+    .back { display: block !important; }
+    .RoomView, .RoomPlaceholderView { display: none; }
+    .room-shown .RoomView { display: unset; }
+    .room-shown .LeftPanel { display: none; }
+    .right-shown .TimelinePanel { display: none; }
+}
+
+.LeftPanel {
+    flex: 0 0 300px;
+    min-width: 0;
+}
+
+.RoomPlaceholderView, .RoomView {
+    flex: 1 0 0;
+    min-width: 0;
+}
+
+.RoomView {
+    min-width: 0;
+    display: flex;
+}
+
+
+.TimelinePanel {
+    flex: 3;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.RoomHeader {
+    display: flex;
+}
diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css
new file mode 100644
index 00000000..b3a16457
--- /dev/null
+++ b/src/ui/web/css/left-panel.css
@@ -0,0 +1,47 @@
+
+.LeftPanel {
+    background: #333;
+    color: white;
+    overflow-y: auto;
+}
+
+.LeftPanel ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.LeftPanel li {
+    margin: 5px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.LeftPanel li {
+    border-bottom: 1px #555 solid;
+}
+
+.LeftPanel li:last-child {
+    border-bottom: none;
+}
+
+.LeftPanel li > * {
+    margin-right: 10px;
+}
+
+.LeftPanel div.description {
+    margin: 0;
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.LeftPanel .description > * {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.LeftPanel .description .last-message {
+    font-size: 0.8em;
+}
diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css
new file mode 100644
index 00000000..91c8c0de
--- /dev/null
+++ b/src/ui/web/css/main.css
@@ -0,0 +1,21 @@
+@import url('layout.css');
+@import url('left-panel.css');
+@import url('room.css');
+@import url('timeline.css');
+@import url('avatar.css');
+
+body {
+    margin: 0;
+    font-family: sans-serif;
+    background-color: black;
+    color: white;
+}
+
+.SyncStatusBar {
+    background-color: #555;
+    display: none;
+}
+
+.SyncStatusBar_shown {
+    display: unset;
+}
diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css
new file mode 100644
index 00000000..f90ee8c8
--- /dev/null
+++ b/src/ui/web/css/room.css
@@ -0,0 +1,65 @@
+
+.RoomHeader {
+    padding: 10px;
+    background-color: #333;
+}
+
+.RoomHeader *:last-child {
+    margin-right: 0 !important;
+}
+
+.RoomHeader > * {
+    margin-right: 10px !important;
+}
+
+.RoomHeader button {
+    width: 40px;
+    height: 40px;
+    display: none;
+    font-size: 1.5em;
+    padding: 0;
+    display: block;
+    background: white;
+    border: none;
+    font-weight: bolder;
+    line-height: 40px;
+}
+
+.RoomHeader button.back {
+    display: none;
+}
+
+.RoomHeader .topic {
+    font-size: 0.8em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.back::before {
+    content: "☰";
+}
+
+.more::before {
+    content: "⋮";
+}
+
+.RoomHeader {
+    align-items: center;
+}
+
+.RoomHeader .description {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.RoomHeader h2 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+}
+
+.RoomView_error {
+    color: red;
+}
diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
new file mode 100644
index 00000000..aea0be49
--- /dev/null
+++ b/src/ui/web/css/timeline.css
@@ -0,0 +1,74 @@
+
+.TimelinePanel ul {
+    flex: 1;
+    overflow-y: auto;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.TimelinePanel li {
+}
+
+.message-container {
+    flex: 0 1 auto;
+    max-width: 80%;
+    padding: 5px 10px;
+    margin: 5px 10px;
+    background: blue;
+}
+
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.TextMessageView {
+    display: flex;
+    min-width: 0;
+}
+
+.TextMessageView.own .message-container {
+    margin-left: auto;
+}
+
+.TextMessageView .message-container time {
+    float: right;
+    padding: 2px 0 0px 20px;
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.message-container time {
+    font-size: 0.9em;
+    color: lightblue;
+}
+
+.own time {
+    color: lightgreen;
+}
+
+.own .message-container {
+    background-color: darkgreen;
+}
+
+.message-container p {
+    margin: 5px 0;
+}
+
+.AnnouncementView {
+    margin: 5px 0;
+    padding: 5px 10%;
+    display: flex;
+    align-items: center;
+}
+
+.AnnouncementView > div {
+    margin: 0 auto;
+    padding: 10px 20px;
+    background-color: #333;
+    font-size: 0.9em;
+    color: #CCC;
+    text-align: center;
+}
diff --git a/src/ui/web/general/ListView.js b/src/ui/web/general/ListView.js
index f12651a3..1b305228 100644
--- a/src/ui/web/general/ListView.js
+++ b/src/ui/web/general/ListView.js
@@ -19,9 +19,10 @@ function insertAt(parentNode, idx, childNode) {
 }
 
 export default class ListView {
-    constructor({list, onItemClick}, childCreator) {
+    constructor({list, onItemClick, className}, childCreator) {
         this._onItemClick = onItemClick;
         this._list = list;
+        this._className = className;
         this._root = null;
         this._subscription = null;
         this._childCreator = childCreator;
@@ -47,7 +48,11 @@ export default class ListView {
     }
 
     mount() {
-        this._root = tag.ul({className: "ListView"});
+        const attr = {};
+        if (this._className) {
+            attr.className = this._className;
+        }
+        this._root = tag.ul(attr);
         this._loadList();
         if (this._onItemClick) {
             this._root.addEventListener("click", this._onClick);
@@ -95,25 +100,34 @@ export default class ListView {
     }
 
     onAdd(idx, value) {
+        this.onBeforeListChanged();
         const child = this._childCreator(value);
         this._childInstances.splice(idx, 0, child);
         insertAt(this._root, idx, child.mount());
+        this.onListChanged();
     }
 
     onRemove(idx, _value) {
+        this.onBeforeListChanged();
         const [child] = this._childInstances.splice(idx, 1);
         child.root().remove();
         child.unmount();
+        this.onListChanged();
     }
 
     onMove(fromIdx, toIdx, value) {
+        this.onBeforeListChanged();
         const [child] = this._childInstances.splice(fromIdx, 1);
         this._childInstances.splice(toIdx, 0, child);
         child.root().remove();
         insertAt(this._root, toIdx, child.root());
+        this.onListChanged();
     }
 
     onUpdate(i, value, params) {
         this._childInstances[i].update(value, params);
     }
+
+    onBeforeListChanged() {}
+    onListChanged() {}
 }
diff --git a/src/ui/web/general/TemplateView.js b/src/ui/web/general/TemplateView.js
index a697a9a7..da7f4938 100644
--- a/src/ui/web/general/TemplateView.js
+++ b/src/ui/web/general/TemplateView.js
@@ -31,7 +31,7 @@ export default class TemplateView {
         this._template = null;
     }
 
-    update(value) {
+    update(value, prop) {
         this._template.update(value);
     }
 }
diff --git a/src/ui/web/general/html.js b/src/ui/web/general/html.js
index b003b5a1..e316d3c8 100644
--- a/src/ui/web/general/html.js
+++ b/src/ui/web/general/html.js
@@ -70,7 +70,7 @@ export function text(str) {
 export const TAG_NAMES = [
     "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
     "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
-    "pre", "button"];
+    "pre", "button", "time"];
 
 export const tag = {};
 
diff --git a/src/ui/web/session/RoomPlaceholderView.js b/src/ui/web/session/RoomPlaceholderView.js
index fb5f9b61..d4cb7e0e 100644
--- a/src/ui/web/session/RoomPlaceholderView.js
+++ b/src/ui/web/session/RoomPlaceholderView.js
@@ -6,7 +6,7 @@ export default class RoomPlaceholderView {
     }
 
     mount() {
-        this._root = tag.div(tag.h2("Choose a room on the left side."));
+        this._root = tag.div({className: "RoomPlaceholderView"}, tag.h2("Choose a room on the left side."));
         return this._root;
     }
 
diff --git a/src/ui/web/session/RoomTile.js b/src/ui/web/session/RoomTile.js
index cd880593..59c76cd8 100644
--- a/src/ui/web/session/RoomTile.js
+++ b/src/ui/web/session/RoomTile.js
@@ -2,7 +2,10 @@ import TemplateView from "../general/TemplateView.js";
 
 export default class RoomTile extends TemplateView {
     render(t) {
-        return t.li(vm => vm.name);
+        return t.li([
+            t.div({className: "avatar medium"}, vm => vm.avatarInitials),
+            t.div({className: "description"}, t.div({className: "name"}, vm => vm.name))
+        ]);
     }
 
     // called from ListView
diff --git a/src/ui/web/session/SessionView.js b/src/ui/web/session/SessionView.js
index be19ca30..dc52c84d 100644
--- a/src/ui/web/session/SessionView.js
+++ b/src/ui/web/session/SessionView.js
@@ -25,6 +25,7 @@ export default class SessionView {
         this._syncStatusBar = new SyncStatusBar(this._viewModel.syncStatusViewModel);
         this._roomList = new ListView(
             {
+                className: "RoomList",
                 list: this._viewModel.roomList,
                 onItemClick: (roomTile, event) => roomTile.clicked(event)
             },
@@ -35,7 +36,7 @@ export default class SessionView {
         this._root = tag.div({className: "SessionView"}, [
             this._syncStatusBar.mount(),
             tag.div({className: "main"}, [
-                this._roomList.mount(),
+                tag.div({className: "LeftPanel"}, this._roomList.mount()),
                 this._middleSwitcher.mount()
             ])
         ]);
@@ -51,6 +52,7 @@ export default class SessionView {
 
     _onViewModelChange(prop) {
         if (prop === "currentRoom") {
+            this._root.classList.add("room-shown");
             this._middleSwitcher.switch(new RoomView(this._viewModel.currentRoom));
         }
     }
diff --git a/src/ui/web/session/SyncStatusBar.js b/src/ui/web/session/SyncStatusBar.js
index 7630cbe1..08ab9955 100644
--- a/src/ui/web/session/SyncStatusBar.js
+++ b/src/ui/web/session/SyncStatusBar.js
@@ -8,6 +8,7 @@ export default class SyncStatusBar extends TemplateView {
     render(t, vm) {
         return t.div({className: {
             "SyncStatusBar": true,
+            "SyncStatusBar_shown": true,
         }}, [
             vm => vm.status,
             t.if(vm => !vm.isSyncing, t => t.button({onClick: () => vm.trySync()}, "Try syncing"))
diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js
index 03f3ddd5..88b46dbc 100644
--- a/src/ui/web/session/room/RoomView.js
+++ b/src/ui/web/session/room/RoomView.js
@@ -1,55 +1,47 @@
-import TimelineTile from "./timeline/TimelineTile.js";
-import ListView from "../../general/ListView.js";
-import {tag} from "../../general/html.js";
-import GapView from "./timeline/GapView.js";
+import TemplateView from "../../general/TemplateView.js";
+import TimelineList from "./TimelineList.js";
 
-export default class RoomView {
+export default class RoomView extends TemplateView {
     constructor(viewModel) {
-        this._viewModel = viewModel;
-        this._root = null;
+        super(viewModel, true);
         this._timelineList = null;
-        this._nameLabel = null;
-        this._onViewModelUpdate = this._onViewModelUpdate.bind(this);
+        this._checkScroll = this._checkScroll.bind(this);
+    }
+
+    render(t) {
+        return t.div({className: "RoomView"}, [
+            t.div({className: "TimelinePanel"}, [
+                t.div({className: "RoomHeader"}, [
+                    t.button({className: "back"}),
+                    t.div({className: "avatar large"}, vm => vm.avatarInitials),
+                    t.div({className: "room-description"}, [
+                        t.h2(vm => vm.name),
+                    ]),
+                ]),
+                t.div({className: "RoomView_error"}, vm => vm.error),
+                this._timelineList.mount()
+            ])
+        ]);
     }
 
     mount() {
-        this._viewModel.on("change", this._onViewModelUpdate);
-        this._nameLabel = tag.h2(null, this._viewModel.name);
-        this._errorLabel = tag.div({className: "RoomView_error"});
-
-        this._timelineList = new ListView({}, entry => {
-            return entry.shape === "gap" ? new GapView(entry) : new TimelineTile(entry);
-        });
-        this._timelineList.mount();
-
-        this._root = tag.div({className: "RoomView"}, [
-            this._nameLabel,
-            this._errorLabel,
-            this._timelineList.root()
-        ]);
-
-        return this._root;
+        this._timelineList = new TimelineList();
+        return super.mount();
     }
 
     unmount() {
         this._timelineList.unmount();
-        this._viewModel.off("change", this._onViewModelUpdate);
+        super.unmount();
     }
 
-    root() {
-        return this._root;
-    }
-
-    _onViewModelUpdate(prop) {
-        if (prop === "name") {
-            this._nameLabel.innerText = this._viewModel.name;
-        }
-        else if (prop === "timelineViewModel") {
-            this._timelineList.update({list: this._viewModel.timelineViewModel.tiles});
-        } else if (prop === "error") {
-            this._errorLabel.innerText = this._viewModel.error;
+    update(value, prop) {
+        super.update(value, prop);
+        if (prop === "timelineViewModel") {
+            this._timelineList.update({list: this.viewModel.timelineViewModel.tiles});
         }
     }
 
-    update() {}
+    _checkScroll() {
+        // const list = this._timelineList.root();
+    }
 }
diff --git a/src/ui/web/session/room/TimelineList.js b/src/ui/web/session/room/TimelineList.js
new file mode 100644
index 00000000..524c78fc
--- /dev/null
+++ b/src/ui/web/session/room/TimelineList.js
@@ -0,0 +1,31 @@
+import ListView from "../../general/ListView.js";
+import GapView from "./timeline/GapView.js";
+import TextMessageView from "./timeline/TextMessageView.js";
+import AnnouncementView from "./timeline/AnnouncementView.js";
+
+export default class TimelineList extends ListView {
+    constructor(options = {}) {
+        options.className = "Timeline";
+        super(options, entry => {
+            switch (entry.shape) {
+                case "gap": return new GapView(entry);
+                case "announcement": return new AnnouncementView(entry);
+                case "message":return new TextMessageView(entry);
+            }
+        });
+        this._atBottom = false;
+    }
+
+    onBeforeListChanged() {
+        const root = this.root();
+        const fromBottom = root.scrollHeight - root.scrollTop - root.clientHeight;
+        this._atBottom = fromBottom < 1;
+    }
+
+    onListChanged() {
+        if (this._atBottom) {
+            const root = this.root();
+            root.scrollTop = root.scrollHeight;
+        }
+    }
+}
diff --git a/src/ui/web/session/room/timeline/AnnoucementView.js b/src/ui/web/session/room/timeline/AnnouncementView.js
similarity index 63%
rename from src/ui/web/session/room/timeline/AnnoucementView.js
rename to src/ui/web/session/room/timeline/AnnouncementView.js
index 1bb08db0..fff0d081 100644
--- a/src/ui/web/session/room/timeline/AnnoucementView.js
+++ b/src/ui/web/session/room/timeline/AnnouncementView.js
@@ -2,6 +2,6 @@ import TemplateView from "../../../general/TemplateView.js";
 
 export default class AnnouncementView extends TemplateView {
     render(t) {
-        return t.li({className: "AnnouncementView"}, vm => vm.announcement);
+        return t.li({className: "AnnouncementView"}, t.div(vm => vm.announcement));
     }
 }
diff --git a/src/ui/web/session/room/timeline/TextMessageView.js b/src/ui/web/session/room/timeline/TextMessageView.js
index 86f2813b..31c3d103 100644
--- a/src/ui/web/session/room/timeline/TextMessageView.js
+++ b/src/ui/web/session/room/timeline/TextMessageView.js
@@ -2,6 +2,7 @@ import TemplateView from "../../../general/TemplateView.js";
 
 export default class TextMessageView extends TemplateView {
     render(t, vm) {
+        // no bindings ... should this be a template view?
         return t.li(
             {className: {"TextMessageView": true, own: vm.isOwn}},
             t.div({className: "message-container"}, [
