From 795eef1449e8580511f822d6cded1d536896dc64 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 16 Nov 2024 16:25:37 +0200
Subject: [PATCH] web/preferences: add options to hide redacted events,
 membership changes and date separators

---
 web/src/api/types/preferences/preferences.ts | 18 ++++++++++++++++++
 web/src/ui/StylePreferences.tsx              | 15 +++++++++++++++
 web/src/ui/timeline/TimelineEvent.tsx        |  6 ++++++
 3 files changed, 39 insertions(+)

diff --git a/web/src/api/types/preferences/preferences.ts b/web/src/api/types/preferences/preferences.ts
index 3e4d2de6..6831a586 100644
--- a/web/src/api/types/preferences/preferences.ts
+++ b/web/src/api/types/preferences/preferences.ts
@@ -73,6 +73,24 @@ export const preferences = {
 		allowedContexts: anyContext,
 		defaultValue: true,
 	}),
+	show_redacted_events: new Preference<boolean>({
+		displayName: "Show redacted event placeholders",
+		description: "Whether redacted events should leave a placeholder behind in the room timeline.",
+		allowedContexts: anyContext,
+		defaultValue: true,
+	}),
+	show_membership_events: new Preference<boolean>({
+		displayName: "Show membership events",
+		description: "Whether membership and profile changes should be visible in the room timeline.",
+		allowedContexts: anyContext,
+		defaultValue: true,
+	}),
+	show_date_separators: new Preference<boolean>({
+		displayName: "Show date separators",
+		description: "Whether messages in different days should have a date separator between them in the room timeline.",
+		allowedContexts: anyContext,
+		defaultValue: true,
+	}),
 	show_room_emoji_packs: new Preference<boolean>({
 		displayName: "Show room emoji packs",
 		description: "Whether to show custom emoji packs provided by the room. If disabled, only your personal packs are shown in all rooms.",
diff --git a/web/src/ui/StylePreferences.tsx b/web/src/ui/StylePreferences.tsx
index 9e742d9d..5896eced 100644
--- a/web/src/ui/StylePreferences.tsx
+++ b/web/src/ui/StylePreferences.tsx
@@ -87,6 +87,21 @@ const StylePreferences = ({ client, activeRoom }: StylePreferencesProps) => {
 			display: none;
 		}
 	`, [preferences.show_hidden_events])
+	useStyle(() => !preferences.show_redacted_events && css`
+		div.timeline-list > div.redacted-event {
+			display: none;
+		}
+	`, [preferences.show_redacted_events])
+	useStyle(() => !preferences.show_membership_events && css`
+		div.timeline-list > div.membership-event {
+			display: none;
+		}
+	`, [preferences.show_membership_events])
+	useStyle(() => !preferences.show_date_separators && css`
+		div.timeline-list > div.date-separator {
+			display: none;
+		}
+	`, [preferences.show_date_separators])
 	useAsyncStyle(() => preferences.code_block_theme === "auto" ? `
 		@import url("_gomuks/codeblock/github.css") (prefers-color-scheme: light);
 		@import url("_gomuks/codeblock/github-dark.css") (prefers-color-scheme: dark);
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 4e5b131d..4105e039 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -85,6 +85,12 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => {
 	if (evt.unread_type & UnreadType.Highlight) {
 		wrapperClassNames.push("highlight")
 	}
+	if (evt.redacted_by) {
+		wrapperClassNames.push("redacted-event")
+	}
+	if (evt.type === "m.room.member") {
+		wrapperClassNames.push("membership-event")
+	}
 	let smallAvatar = false
 	let renderAvatar = true
 	let eventTimeOnly = false