Add settings toggle for displaying deleted message tombstones

.changeset/add_tombstone_settings_toggle_for_redacted_msgs.md

@@ -0,0 +1,5 @@
+---
+sable: patch
+---
+
+added settings toggle in (General>Messages) to enable showing a tombstone for deleted messages without having to set all hidden events to visible

src/app/features/room/RoomTimeline.tsx

@@ -573,6 +573,7 @@ export function RoomTimeline({
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [showTombstoneEvents] = useSetting(settingsAtom, 'showTombstoneEvents');
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
   const [reducedMotion] = useSetting(settingsAtom, 'reducedMotion');
 
@@ -2063,7 +2064,7 @@ export function RoomTimeline({
     if (eventSender && ignoredUsersSet.has(eventSender)) {
       return null;
     }
-    if (mEvent.isRedacted() && !showHiddenEvents) {
+    if (mEvent.isRedacted() && !(showHiddenEvents || showTombstoneEvents)) {
       return null;
     }
 

src/app/features/settings/general/General.tsx

@@ -385,6 +385,16 @@ function SelectDateFormat() {
   );
 }
 
+function getTombstoneSettingToggleTitle(showHidden: boolean, showTombstone: boolean): string {
+  if (showHidden) {
+    return 'Tombstone events are always shown when "Show Hidden Events" is enabled.';
+  }
+  if (showTombstone) {
+    return 'Disable to hide redacted messages entirely instead of showing a tombstone.';
+  }
+  return 'Enable to show tombstone events for redacted messages instead of hiding them entirely.';
+}
+
 function DateAndTime() {
   const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
 
@@ -826,6 +836,10 @@ function Messages() {
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [showTombstoneEvents, setShowTombstoneEvents] = useSetting(
+    settingsAtom,
+    'showTombstoneEvents'
+  );
   const [hideMembershipInReadOnly, setHideMembershipInReadOnly] = useSetting(
     settingsAtom,
     'hideMembershipInReadOnly'
@@ -924,7 +938,30 @@ function Messages() {
         <SettingTile
           title="Show Hidden Events"
           after={
-            <Switch variant="Primary" value={showHiddenEvents} onChange={setShowHiddenEvents} />
+            <Switch
+              variant="Primary"
+              value={showHiddenEvents}
+              onChange={setShowHiddenEvents}
+              title={
+                showHiddenEvents
+                  ? 'Disable to hide hidden events'
+                  : 'Enable to show hidden events, this will cause visual clutter in busy rooms.'
+              }
+            />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Show Tombstones for Redacted Messages"
+          after={
+            <Switch
+              variant="Primary"
+              value={showTombstoneEvents || showHiddenEvents}
+              onChange={setShowTombstoneEvents}
+              disabled={showHiddenEvents}
+              title={getTombstoneSettingToggleTitle(showHiddenEvents, showTombstoneEvents)}
+            />
           }
         />
       </SequenceCard>

src/app/state/settings.ts

@@ -48,6 +48,7 @@ export interface Settings {
   urlPreview: boolean;
   encUrlPreview: boolean;
   showHiddenEvents: boolean;
+  showTombstoneEvents: boolean;
   legacyUsernameColor: boolean;
   allowPipVideos: boolean;
 
@@ -123,6 +124,7 @@ const defaultSettings: Settings = {
   urlPreview: true,
   encUrlPreview: false,
   showHiddenEvents: false,
+  showTombstoneEvents: false,
   legacyUsernameColor: false,
   allowPipVideos: false,