Support upgraded rooms (via links to successor/predecessor)

src/components/messages/composition/RoomTombstone.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="statusEvent">
+    <i18n-t keypath="message.room_upgraded" tag="span">
+      <template v-slot:link>
+        <a v-on:click="goToSuccessor" class="clickable" href="about:blank">{{ $t("message.room_upgraded_link") }}</a>
+      </template>
+    </i18n-t>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { MessageProps } from "./useMessage";
+import utils from "@/plugins/utils";
+
+const $navigation: any = inject("globalNavigation");
+
+const props = defineProps<MessageProps>();
+
+const goToSuccessor = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const replacement_room = props.originalEvent.getContent().replacement_room;
+  if (replacement_room) {
+    $navigation.push(
+      {
+        name: "Chat",
+        params: {
+          roomId: utils.sanitizeRoomId(replacement_room),
+        },
+      },
+      -1
+    );
+  }
+};
+</script>
+
+<style lang="scss">
+@use "@/assets/css/chat.scss" as *;
+</style>