web/preferences: add option to not render read receipts

web/src/api/types/preferences/preferences.ts

@@ -47,6 +47,12 @@ export const preferences = {
 		allowedContexts: anyContext,
 		defaultValue: true,
 	}),
+	display_read_receipts: new Preference<boolean>({
+		displayName: "Display read receipts",
+		description: "Should read receipts be rendered in the timeline?",
+		allowedContexts: anyContext,
+		defaultValue: true,
+	}),
 	show_media_previews: new Preference<boolean>({
 		displayName: "Show image and video previews",
 		description: "If disabled, images and videos will only be visible after clicking and will not be downloaded automatically.",

web/src/ui/StylePreferences.tsx

@@ -102,6 +102,11 @@ const StylePreferences = ({ client, activeRoom }: StylePreferencesProps) => {
 			display: none;
 		}
 	`, [preferences.show_date_separators])
+	useStyle(() => !preferences.display_read_receipts && css`
+		:root {
+			--timeline-status-size: 2rem;
+		}
+	`, [preferences.display_read_receipts])
 	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

@@ -199,7 +199,8 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => {
 			</ContentErrorBoundary>
 			{evt.reactions ? <EventReactions reactions={evt.reactions}/> : null}
 		</div>
-		{!evt.event_id.startsWith("~") && <ReadReceipts room={roomCtx.store} eventID={evt.event_id} />}
+		{!evt.event_id.startsWith("~") && roomCtx.store.preferences.display_read_receipts &&
+			<ReadReceipts room={roomCtx.store} eventID={evt.event_id} />}
 		{evt.sender === client.userID && evt.transaction_id ? <EventSendStatus evt={evt}/> : null}
 	</div>
 	return <>