show decryption errors in timeline

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

@@ -28,7 +28,17 @@ export class EncryptedEventTile extends MessageTile {
         }
     }
 
+    get shape() {
+        return "message-status"
+    }
+
     get text() {
-        return this.i18n`**Encrypted message**`;
+        const decryptionError = this._entry.decryptionError;
+        const code = decryptionError?.code;
+        if (code === "MEGOLM_NO_SESSION") {
+            return this.i18n`The sender hasn't sent us the key for this message yet.`;
+        } else {
+            return decryptionError?.message || this.i18n`"Could not decrypt message because of unknown reason."`;
+        }
     }
 }

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

@@ -93,4 +93,8 @@ export class EventEntry extends BaseEntry {
     setDecryptionError(err) {
         this._decryptionError = err;
     }
+
+    get decryptionError() {
+        return this._decryptionError;
+    }
 }

src/ui/web/css/themes/element/theme.css

@@ -327,6 +327,11 @@ ul.Timeline > li.continuation time {
     display: none;
 }
 
+ul.Timeline > li.messageStatus .message-container > p {
+    font-style: italic;
+    color: #777;
+}
+
 .message-container {
     padding: 1px 10px 0px 10px;
     margin: 5px 10px 0 10px;

src/ui/web/session/room/TimelineList.js

@@ -30,7 +30,9 @@ export class TimelineList extends ListView {
             switch (entry.shape) {
                 case "gap": return new GapView(entry);
                 case "announcement": return new AnnouncementView(entry);
-                case "message": return new TextMessageView(entry);
+                case "message":
+                case "message-status":
+                    return new TextMessageView(entry);
                 case "image": return new ImageView(entry);
             }
         });

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

@@ -24,6 +24,7 @@ export function renderMessage(t, vm, children) {
         pending: vm.isPending,
         unverified: vm.isUnverified,
         continuation: vm => vm.isContinuation,
+        messageStatus: vm => vm.shape === "message-status",
     };
 
     const profile = t.div({className: "profile"}, [