Update tile when request is cancelled

Show that the sas request was cancelled in the timeline if we receive a
cancel event before we've accepted/rejected the request.

src/domain/session/room/timeline/TilesCollection.js

@@ -144,6 +144,14 @@ export class TilesCollection extends BaseObservableList {
             this._addTileAt(tileIdx, newTile);
             this._evaluateDateHeaderAtIdx(tileIdx);
         }
+
+        // Emit updates for context entry
+        const { contextEntry } = entry;
+        if (contextEntry) {
+            const tileIdx = this._findTileIdx(contextEntry);
+            const tile = this._findTileAtIdx(contextEntry, tileIdx);
+            this.emitUpdate(tileIdx, tile);
+        }
         // find position by sort key
         // ask siblings to be included? both? yes, twice: a (insert c here) b, ask a(c), if yes ask b(a), else ask b(c)? if yes then b(a)?
     }

src/domain/session/room/timeline/tiles/VerificationTile.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import {SASRequest} from "../../../../../matrix/verification/SAS/SASRequest";
 import {TileShape} from "./ITile";
 import {SimpleTile} from "./SimpleTile";
+import {VerificationEventType} from "../../../../../matrix/verification/SAS/channel/types";
 import type {SASVerification} from "../../../../../matrix/verification/SAS/SASVerification";
 import type {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry.js";
 import type {Options} from "./SimpleTile";
@@ -31,7 +32,7 @@ export const enum Status {
 export class VerificationTile extends SimpleTile {
     private request: SASRequest;
     public isCancelledByUs: boolean;
-    public status: Status = Status.Ready;
+    private _status: Status = Status.Ready;
 
     constructor(entry: EventEntry, options: Options) {
         super(entry, options);
@@ -41,7 +42,7 @@ export class VerificationTile extends SimpleTile {
             crossSigning.sasVerificationObservable.subscribe(sas => {
                 this.subscribeToSASVerification(sas);
             })
-        )
+        );
     }
 
     get shape(): TileShape {
@@ -52,11 +53,21 @@ export class VerificationTile extends SimpleTile {
         return this.i18n`${this.sender} wants to verify`;
     }
 
+    get status(): Status {
+        const contextEventEntry = this.lowerEntry.contextForEntries?.[0];
+        if (contextEventEntry.eventType === VerificationEventType.Cancel) {
+            this._status = Status.Cancelled;
+            this.isCancelledByUs = false;
+
+        }
+        return this._status;
+    }
+
     accept(): void {
         const crossSigning = this.getOption("session").crossSigning.get()
         crossSigning.receivedSASVerifications.set(this.eventId, this.request);
         this.openVerificationPanel(this.eventId);
-        this.status = Status.InProgress;
+        this._status = Status.InProgress;
         this.emitChange("status");
     }
 
@@ -66,7 +77,7 @@ export class VerificationTile extends SimpleTile {
             const crossSigning = this.getOption("session").crossSigning.get();
             await this.request.reject(crossSigning, this._room, log);
             this.isCancelledByUs = true;
-            this.status = Status.Cancelled;
+            this._status = Status.Cancelled;
             this.emitChange("status");
         });
     }
@@ -89,13 +100,13 @@ export class VerificationTile extends SimpleTile {
         this.track(
             sas.disposableOn("VerificationCancelled", (cancellation) => {
                 this.isCancelledByUs = cancellation?.cancelledByUs!;
-                this.status = Status.Cancelled;
+                this._status = Status.Cancelled;
                 this.emitChange("status");
              })
         );
         this.track(
             sas.disposableOn("VerificationCompleted", () => {
-                this.status = Status.Completed;
+                this._status = Status.Completed;
                 this.emitChange("status");
              })
         );

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

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {BaseEntry} from "./BaseEntry";
 import {REDACTION_TYPE} from "../../common";
-import {createAnnotation, ANNOTATION_RELATION_TYPE, getRelationFromContent} from "../relations.js";
+import {createAnnotation, ANNOTATION_RELATION_TYPE, getRelationFromContent, REFERENCE_RELATION_TYPE} from "../relations.js";
 import {PendingAnnotation} from "../PendingAnnotation.js";
 import {createReplyContent} from "./reply.js"
 
@@ -35,6 +35,10 @@ export class BaseEventEntry extends BaseEntry {
         return !!this.relation?.["m.in_reply_to"];
     }
 
+    get isReference() {
+        return this.relation?.rel_type === REFERENCE_RELATION_TYPE;
+    }
+
     get isRedacting() {
         return !!this._pendingRedactions;
     }

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

@@ -155,7 +155,7 @@ export class EventEntry extends BaseEventEntry {
 
     // similar to relatedEventID but only for replies
     get contextEventId() {
-        if (this.isReply) {
+        if (this.isReply || this.isReference) {
             return this.relatedEventId;
         }
         return null;