Add a display for the m.room.tombstone event

web/src/ui/timeline/content/RoomTombstoneBody.tsx

@@ -0,0 +1,36 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Nexus Nicholson
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+import { TombstoneEventContent } from "@/api/types"
+import EventContentProps from "./props.ts"
+
+const RoomTombstoneBody = ({ event, sender }: EventContentProps) => {
+	const content = event.content as TombstoneEventContent
+	const end = content.body.length > 0 ? ` with the message: ${content.body}` : "."
+	const onClick = () => window.mainScreenContext.setActiveRoom(content.replacement_room)
+	const description = (
+		<span>
+			replaced this room with&nbsp;
+			<a onClick={onClick} className="hicli-matrix-uri hicli-matrix-uri-room-alias">
+				<span className="room-id">{content.replacement_room}</span>
+			</a>{end}
+		</span>
+	)
+	return <div className="room-avatar-body">
+		{sender?.content.displayname ?? event.sender} {description}
+	</div>
+}
+
+export default RoomTombstoneBody

web/src/ui/timeline/content/index.ts

@@ -12,6 +12,7 @@ import PowerLevelBody from "./PowerLevelBody.tsx"
 import RedactedBody from "./RedactedBody.tsx"
 import RoomAvatarBody from "./RoomAvatarBody.tsx"
 import RoomNameBody from "./RoomNameBody.tsx"
+import RoomTombstoneBody from "./RoomTombstoneBody.tsx"
 import TextMessageBody from "./TextMessageBody.tsx"
 import UnknownMessageBody from "./UnknownMessageBody.tsx"
 import EventContentProps from "./props.ts"
@@ -31,6 +32,7 @@ export { default as RedactedBody } from "./RedactedBody.tsx"
 export { default as RoomAvatarBody } from "./RoomAvatarBody.tsx"
 export { default as RoomNameBody } from "./RoomNameBody.tsx"
 export { default as TextMessageBody } from "./TextMessageBody.tsx"
+export { default as RoomTombstoneBody } from "./RoomTombstoneBody.tsx"
 export { default as UnknownMessageBody } from "./UnknownMessageBody.tsx"
 export type { default as EventContentProps } from "./props.ts"
 
@@ -51,6 +53,8 @@ export function getBodyType(evt: MemDBEvent, forReply = false): React.FunctionCo
 			return PinnedEventsBody
 		case "m.room.power_levels":
 			return PowerLevelBody
+		case "m.room.tombstone":
+			return RoomTombstoneBody
 		}
 	} else if (evt.state_key !== undefined) {
 		// State events which must have a non-empty state key
@@ -120,6 +124,7 @@ export function isSmallEvent(bodyType: React.FunctionComponent<EventContentProps
 	case PolicyRuleBody:
 	case PinnedEventsBody:
 	case PowerLevelBody:
+	case RoomTombstoneBody:
 		return true
 	default:
 		return false