dedicated template view for gaps

src/ui/web/RoomView.js

@@ -1,6 +1,7 @@
 import TimelineTile from "./TimelineTile.js";
 import ListView from "./ListView.js";
 import * as html from "./html.js";
+import GapView from "./timeline/GapView.js";
 
 export default class RoomView {
     constructor(viewModel) {
@@ -16,7 +17,9 @@ export default class RoomView {
         this._nameLabel = html.h2(null, this._viewModel.name);
         this._errorLabel = html.div({className: "RoomView_error"});
 
-        this._timelineList = new ListView({}, entry => new TimelineTile(entry));
+        this._timelineList = new ListView({}, entry => {
+            return entry.shape === "gap" ? new GapView(entry) : new TimelineTile(entry);
+        });
         this._timelineList.mount();
 
         this._root = html.div({className: "RoomView"}, [

src/ui/web/timeline/GapView.js

@@ -0,0 +1,15 @@
+import TemplateView from "../TemplateView.js";
+
+export default class GapView extends TemplateView {
+    render(t, vm) {
+        const className = {
+            gap: true,
+            loading: vm => vm.isLoading
+        };
+        const label = (vm.isUp ? "🠝" : "🠟") + " fill gap"; //no binding
+        return t.li({className}, [
+            t.button({onClick: () => this.viewModel.fill(), disabled: vm => vm.isLoading}, label),
+            t.if(vm => vm.error, t => t.strong(vm => vm.error))
+        ]);
+    }
+}