From 8c4d68def94e238f9a3e9cc06fce484a1ea8243d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 14 Sep 2020 15:43:33 +0200
Subject: [PATCH] show decryption errors in timeline

---
 .../room/timeline/tiles/EncryptedEventTile.js        | 12 +++++++++++-
 src/matrix/room/timeline/entries/EventEntry.js       |  4 ++++
 src/ui/web/css/themes/element/theme.css              |  5 +++++
 src/ui/web/session/room/TimelineList.js              |  4 +++-
 src/ui/web/session/room/timeline/common.js           |  1 +
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/EncryptedEventTile.js b/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
index 99c8a291..bc4f8feb 100644
--- a/src/domain/session/room/timeline/tiles/EncryptedEventTile.js
+++ b/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."`;
+        }
     }
 }
diff --git a/src/matrix/room/timeline/entries/EventEntry.js b/src/matrix/room/timeline/entries/EventEntry.js
index 8c7029d4..81e31112 100644
--- a/src/matrix/room/timeline/entries/EventEntry.js
+++ b/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;
+    }
 }
diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css
index bdcd599f..a669d3f5 100644
--- a/src/ui/web/css/themes/element/theme.css
+++ b/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;
diff --git a/src/ui/web/session/room/TimelineList.js b/src/ui/web/session/room/TimelineList.js
index b43fcc27..2072b453 100644
--- a/src/ui/web/session/room/TimelineList.js
+++ b/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);
             }
         });
diff --git a/src/ui/web/session/room/timeline/common.js b/src/ui/web/session/room/timeline/common.js
index 7869731f..50b6a0cd 100644
--- a/src/ui/web/session/room/timeline/common.js
+++ b/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"}, [