make continuation logic work well with pending events

- don't use display name to compare but user id
   (pending doesn't have display name yet)
 - use current time as timestamp

src/domain/session/room/timeline/tiles/MessageTile.js

@@ -31,8 +31,12 @@ export class MessageTile extends SimpleTile {
         return "message";
     }
 
+    get displayName() {
+        return this._entry.displayName || this.sender;
+    }
+
     get sender() {
-        return this._entry.displayName || this._entry.sender;
+        return this._entry.sender;
     }
 
     // Avatar view model contract
@@ -52,7 +56,7 @@ export class MessageTile extends SimpleTile {
     }
 
     get avatarTitle() {
-        return this.sender;
+        return this.displayName;
     }
 
     get date() {

src/matrix/Session.js

@@ -245,7 +245,8 @@ export class Session {
             sendScheduler: this._sendScheduler,
             pendingEvents,
             user: this._user,
-            createRoomEncryption: this._createRoomEncryption
+            createRoomEncryption: this._createRoomEncryption,
+            clock: this._clock
         });
         this._rooms.add(roomId, room);
         return room;

src/matrix/room/Room.js

@@ -31,7 +31,7 @@ import {DecryptionSource} from "../e2ee/common.js";
 const EVENT_ENCRYPTED_TYPE = "m.room.encrypted";
 
 export class Room extends EventEmitter {
-	constructor({roomId, storage, hsApi, emitCollectionChange, sendScheduler, pendingEvents, user, createRoomEncryption, getSyncToken}) {
+	constructor({roomId, storage, hsApi, emitCollectionChange, sendScheduler, pendingEvents, user, createRoomEncryption, getSyncToken, clock}) {
         super();
         this._roomId = roomId;
         this._storage = storage;
@@ -48,6 +48,7 @@ export class Room extends EventEmitter {
         this._createRoomEncryption = createRoomEncryption;
         this._roomEncryption = null;
         this._getSyncToken = getSyncToken;
+        this._clock = clock;
 	}
 
     async notifyRoomKeys(roomKeys) {
@@ -488,6 +489,7 @@ export class Room extends EventEmitter {
                 }
             },
             user: this._user,
+            clock: this._clock
         });
         if (this._roomEncryption) {
             this._timeline.enableEncryption(this._decryptEntries.bind(this, DecryptionSource.Timeline));

src/matrix/room/timeline/Timeline.js

@@ -21,7 +21,7 @@ import {TimelineReader} from "./persistence/TimelineReader.js";
 import {PendingEventEntry} from "./entries/PendingEventEntry.js";
 
 export class Timeline {
-    constructor({roomId, storage, closeCallback, fragmentIdComparer, pendingEvents, user}) {
+    constructor({roomId, storage, closeCallback, fragmentIdComparer, pendingEvents, user, clock}) {
         this._roomId = roomId;
         this._storage = storage;
         this._closeCallback = closeCallback;
@@ -35,7 +35,7 @@ export class Timeline {
         });
         this._readerRequest = null;
         const localEntries = new MappedList(pendingEvents, pe => {
-            return new PendingEventEntry({pendingEvent: pe, user});
+            return new PendingEventEntry({pendingEvent: pe, user, clock});
         }, (pee, params) => {
             pee.notifyUpdate(params);
         });

src/matrix/room/timeline/entries/PendingEventEntry.js

@@ -17,10 +17,11 @@ limitations under the License.
 import {BaseEntry, PENDING_FRAGMENT_ID} from "./BaseEntry.js";
 
 export class PendingEventEntry extends BaseEntry {
-    constructor({pendingEvent, user}) {
+    constructor({pendingEvent, user, clock}) {
         super(null);
         this._pendingEvent = pendingEvent;
         this._user = user;
+        this._clock = clock;
     }
 
     get fragmentId() {
@@ -52,7 +53,7 @@ export class PendingEventEntry extends BaseEntry {
     }
 
     get timestamp() {
-        return null;
+        return this._clock.now();
     }
 
     get isPending() {

src/ui/web/session/room/timeline/common.js

@@ -28,7 +28,7 @@ export function renderMessage(t, vm, children) {
 
     const profile = t.div({className: "profile"}, [
         renderAvatar(t, vm, 30),
-        t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.sender)
+        t.div({className: `sender usercolor${vm.avatarColorNumber}`}, vm.displayName)
     ]);
     children = [profile].concat(children);
     return t.li(