From 50024fbc1dca2f314b627d41294cf3d98c7d4b49 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 12 Oct 2024 18:44:12 +0300
Subject: [PATCH] web/timeline: add better placeholder for redactions and
 undecryptable events

---
 web/src/icons/delete.svg                      |  1 +
 web/src/icons/lock-clock.svg                  |  1 +
 web/src/icons/lock.svg                        |  1 +
 web/src/ui/timeline/TimelineEvent.css         | 20 +++++++++++++++++++
 web/src/ui/timeline/content/EncryptedBody.tsx |  6 ++++--
 web/src/ui/timeline/content/RedactedBody.tsx  |  4 +++-
 6 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 web/src/icons/delete.svg
 create mode 100644 web/src/icons/lock-clock.svg
 create mode 100644 web/src/icons/lock.svg

diff --git a/web/src/icons/delete.svg b/web/src/icons/delete.svg
new file mode 100644
index 0000000..a5dfc5c
--- /dev/null
+++ b/web/src/icons/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
diff --git a/web/src/icons/lock-clock.svg b/web/src/icons/lock-clock.svg
new file mode 100644
index 0000000..d703df7
--- /dev/null
+++ b/web/src/icons/lock-clock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM490-80H240q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v52q-18-6-37.5-9t-42.5-3v-40H240v400h212q8 24 16 41.5T490-80Zm230 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40Zm66-106 28-28-74-74v-112h-40v128l86 86ZM240-560v400-400Z"/></svg>
diff --git a/web/src/icons/lock.svg b/web/src/icons/lock.svg
new file mode 100644
index 0000000..d4fe312
--- /dev/null
+++ b/web/src/icons/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>
diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index 141c9d3..259b58c 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -126,6 +126,26 @@ div.date-separator {
 	}
 }
 
+div.decryption-error-body {
+	display: flex;
+	align-items: center;
+
+	> svg {
+		height: 20px;
+		color: red;
+	}
+}
+
+div.redacted-body, div.decryption-pending-body {
+	display: flex;
+	align-items: center;
+	color: #888;
+
+	> svg {
+		height: 20px;
+	}
+}
+
 div.html-body {
 	overflow: hidden;
 	img[data-mx-emoticon] {
diff --git a/web/src/ui/timeline/content/EncryptedBody.tsx b/web/src/ui/timeline/content/EncryptedBody.tsx
index 54d2e61..32da177 100644
--- a/web/src/ui/timeline/content/EncryptedBody.tsx
+++ b/web/src/ui/timeline/content/EncryptedBody.tsx
@@ -14,12 +14,14 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { EventContentProps } from "./props.ts"
+import LockIcon from "../../../icons/lock.svg?react"
+import LockClockIcon from "../../../icons/lock.svg?react"
 
 const EncryptedBody = ({ event }: EventContentProps) => {
 	if (event.decryption_error) {
-		return `Failed to decrypt: ${event.decryption_error}`
+		return <div className="decryption-error-body"><LockIcon/> Failed to decrypt: {event.decryption_error}</div>
 	}
-	return `Waiting for message`
+	return <div className="decryption-pending-body"><LockClockIcon/> Waiting for message</div>
 }
 
 export default EncryptedBody
diff --git a/web/src/ui/timeline/content/RedactedBody.tsx b/web/src/ui/timeline/content/RedactedBody.tsx
index ec95dbc..8846e11 100644
--- a/web/src/ui/timeline/content/RedactedBody.tsx
+++ b/web/src/ui/timeline/content/RedactedBody.tsx
@@ -13,8 +13,10 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import DeleteIcon from "../../../icons/delete.svg?react"
+
 const RedactedBody = () => {
-	return `Message deleted`
+	return <div className="redacted-body"><DeleteIcon/> Message deleted</div>
 }
 
 export default RedactedBody