diff --git a/web/src/api/types/preferences/preferences.ts b/web/src/api/types/preferences/preferences.ts index 393cf68..6952424 100644 --- a/web/src/api/types/preferences/preferences.ts +++ b/web/src/api/types/preferences/preferences.ts @@ -47,6 +47,12 @@ export const preferences = { allowedContexts: anyContext, defaultValue: true, }), + display_read_receipts: new Preference({ + displayName: "Display read receipts", + description: "Should read receipts be rendered in the timeline?", + allowedContexts: anyContext, + defaultValue: true, + }), show_media_previews: new Preference({ displayName: "Show image and video previews", description: "If disabled, images and videos will only be visible after clicking and will not be downloaded automatically.", diff --git a/web/src/ui/StylePreferences.tsx b/web/src/ui/StylePreferences.tsx index c1c45a8..53cfe24 100644 --- a/web/src/ui/StylePreferences.tsx +++ b/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); diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx index 4410350..9ed400c 100644 --- a/web/src/ui/timeline/TimelineEvent.tsx +++ b/web/src/ui/timeline/TimelineEvent.tsx @@ -199,7 +199,8 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => { {evt.reactions ? : null} - {!evt.event_id.startsWith("~") && } + {!evt.event_id.startsWith("~") && roomCtx.store.preferences.display_read_receipts && + } {evt.sender === client.userID && evt.transaction_id ? : null} return <>