web/preferences: add options to hide redacted events, membership changes and date separators

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.",

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);

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