Improve rendering of empty topics in the timeline

src/TextForEvent.tsx

@@ -37,7 +37,8 @@
 import { highlightEvent, isLocationEvent } from "./utils/EventUtils";
 import { ElementCall } from "./models/Call";
 import { getSenderName } from "./utils/event/getSenderName";
 import PosthogTrackers from "./PosthogTrackers.ts";
+import { parseTopicContent } from "matrix-js-sdk/lib/content-helpers";
 
 function getRoomMemberDisplayname(client: MatrixClient, event: MatrixEvent, userId = event.getSender()): string {
     const roomId = event.getRoomId();
@@ -227,10 +228,13 @@
 
 function textForTopicEvent(ev: MatrixEvent): (() => string) | null {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const topic = parseTopicContent(ev.getContent()).text;
     return () =>
-        _t("timeline|m.room.topic", {
+        topic ? _t("timeline|m.room.topic|changed", {
             senderDisplayName,
             topic: ev.getContent().topic,
+        }) : _t("timeline|m.room.topic|removed", {
+            senderDisplayName,
         });
 }
 

src/components/views/room_settings/RoomProfileSettings.tsx

@@ -15,7 +15,8 @@
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import AvatarSetting from "../settings/AvatarSetting";
 import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
 import { idNameForRoom } from "../avatars/RoomAvatar";
+import { parseTopicContent } from "matrix-js-sdk/src/content-helpers";
 
 interface IProps {
     roomId: string;
@@ -51,7 +52,7 @@
         const avatarUrl = avatarEvent?.getContent()["url"] ?? null;
 
         const topicEvent = room.currentState.getStateEvents(EventType.RoomTopic, "");
-        const topic = topicEvent && topicEvent.getContent() ? topicEvent.getContent()["topic"] : "";
+        const topic = topicEvent && parseTopicContent(topicEvent.getContent()).text || "";
 
         const nameEvent = room.currentState.getStateEvents(EventType.RoomName, "");
         const name = nameEvent && nameEvent.getContent() ? nameEvent.getContent()["name"] : "";
@@ -145,6 +146,8 @@
 
         if (this.state.originalTopic !== this.state.topic) {
             const html = htmlSerializeFromMdIfNeeded(this.state.topic, { forceHTML: false });
+            // XXX: Note that we deliberately send an empty string on an empty topic rather
+            // than a clearer `undefined` value. Synapse still requires a string in a topic.
             await client.setRoomTopic(this.props.roomId, this.state.topic, html);
             newState.originalTopic = this.state.topic;
         }

src/i18n/strings/cs.json

@@ -3205,7 +3205,9 @@
             "sent": "%(senderName)s pozval(a) uživatele %(targetDisplayName)s ke vstupu do místnosti."
         },
         "m.room.tombstone": "%(senderDisplayName)s aktualizoval(a) místnost.",
-        "m.room.topic": "%(senderDisplayName)s změnil(a) téma na „%(topic)s“.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s změnil(a) téma na „%(topic)s“."
+        },
         "m.sticker": "%(senderDisplayName)s poslal(a) nálepku.",
         "m.video": {
             "error_decrypting": "Chyba při dešifrování videa"

src/i18n/strings/de_DE.json

@@ -3489,7 +3489,9 @@
             "sent": "%(senderName)s hat %(targetDisplayName)s in diesen Raum eingeladen."
         },
         "m.room.tombstone": "%(senderDisplayName)s hat diesen Raum aktualisiert.",
-        "m.room.topic": "%(senderDisplayName)s hat das Thema geändert in \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s hat das Thema geändert in \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s hat einen Sticker gesendet.",
         "m.video": {
             "error_decrypting": "Videoentschlüsselung fehlgeschlagen"

src/i18n/strings/el.json

@@ -2592,7 +2592,9 @@
             "sent": "Ο %(senderName)s έστειλε μια πρόσκληση στον %(targetDisplayName)s για να συνδεθεί στο δωμάτιο."
         },
         "m.room.tombstone": "Ο %(senderDisplayName)s αναβάθμισε αυτό το δωμάτιο.",
-        "m.room.topic": "Ο %(senderDisplayName)s άλλαξε το θέμα σε \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "Ο %(senderDisplayName)s άλλαξε το θέμα σε \"%(topic)s\"."
+        },
         "m.sticker": "Ο %(senderDisplayName)s έστειλε ένα αυτοκόλλητο.",
         "m.video": {
             "error_decrypting": "Σφάλμα κατά την αποκρυπτογράφηση του βίντεο"

src/i18n/strings/en_EN.json

@@ -3490,7 +3490,10 @@
             "sent": "%(senderName)s sent an invitation to %(targetDisplayName)s to join the room."
         },
         "m.room.tombstone": "%(senderDisplayName)s upgraded this room.",
-        "m.room.topic": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s changed the topic to \"%(topic)s\".",
+            "removed": "%(senderDisplayName)s removed the topic."
+        },
         "m.sticker": "%(senderDisplayName)s sent a sticker.",
         "m.video": {
             "error_decrypting": "Error decrypting video"

src/i18n/strings/eo.json

@@ -2343,7 +2343,9 @@
             "sent": "%(senderName)s sendis ĉambran inviton al %(targetDisplayName)s."
         },
         "m.room.tombstone": "%(senderDisplayName)s gradaltigis ĉi tiun ĉambron.",
-        "m.room.topic": "%(senderDisplayName)s ŝanĝis la temon al « %(topic)s ».",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s ŝanĝis la temon al « %(topic)s »."
+        },
         "m.sticker": "%(senderDisplayName)s sendis glumarkon.",
         "m.video": {
             "error_decrypting": "Malĉifro de filmo eraris"

src/i18n/strings/es.json

@@ -2950,7 +2950,9 @@
             "sent": "%(senderName)s invitó a %(targetDisplayName)s a unirse a la sala."
         },
         "m.room.tombstone": "%(senderDisplayName)s actualizó esta sala.",
-        "m.room.topic": "%(senderDisplayName)s cambió el asunto a «%(topic)s».",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s cambió el asunto a «%(topic)s»."
+        },
         "m.sticker": "%(senderDisplayName)s envió una pegatina.",
         "m.video": {
             "error_decrypting": "Error al descifrar el vídeo"

src/i18n/strings/et.json

@@ -3149,7 +3149,9 @@
             "sent": "%(senderName)s saatis %(targetDisplayName)s'le kutse jututoaga liitumiseks."
         },
         "m.room.tombstone": "%(senderDisplayName)s uuendas seda jututuba.",
-        "m.room.topic": "%(senderDisplayName)s muutis uueks teemaks „%(topic)s“.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s muutis uueks teemaks „%(topic)s“."
+        },
         "m.sticker": "%(senderDisplayName)s saatis kleepsu.",
         "m.video": {
             "error_decrypting": "Viga videovoo dekrüptimisel"

src/i18n/strings/fa.json

@@ -2049,7 +2049,9 @@
             "sent": "%(senderName)s %(targetDisplayName)s را به اتاق دعوت کرد."
         },
         "m.room.tombstone": "%(senderDisplayName)s این اتاق را ارتقا داد.",
-        "m.room.topic": "%(senderDisplayName)s موضوع را به %(topic)s تغییر داد.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s موضوع را به %(topic)s تغییر داد."
+        },
         "m.sticker": "%(senderDisplayName)s یک برچسب فرستاد.",
         "m.video": {
             "error_decrypting": "خطا در رمزگشایی ویدیو"

src/i18n/strings/fi.json

@@ -2812,7 +2812,9 @@
             "sent": "%(senderName)s kutsui käyttäjän %(targetDisplayName)s liittymään huoneeseen."
         },
         "m.room.tombstone": "%(senderDisplayName)s päivitti tämän huoneen.",
-        "m.room.topic": "%(senderDisplayName)s vaihtoi aiheeksi \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s vaihtoi aiheeksi \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s lähetti tarran.",
         "m.video": {
             "error_decrypting": "Virhe purettaessa videon salausta"

src/i18n/strings/fr.json

@@ -3388,7 +3388,9 @@
             "sent": "%(senderName)s a invité %(targetDisplayName)s à rejoindre le salon."
         },
         "m.room.tombstone": "%(senderDisplayName)s a mis à niveau ce salon.",
-        "m.room.topic": "%(senderDisplayName)s a changé le sujet du salon en « %(topic)s ».",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s a changé le sujet du salon en « %(topic)s »."
+        },
         "m.sticker": "%(senderDisplayName)s a envoyé un autocollant.",
         "m.video": {
             "error_decrypting": "Erreur lors du déchiffrement de la vidéo"

src/i18n/strings/gl.json

@@ -2705,7 +2705,9 @@
             "sent": "%(senderName)s enviou un convite a %(targetDisplayName)s para unirse a sala."
         },
         "m.room.tombstone": "%(senderDisplayName)s actualizou esta sala.",
-        "m.room.topic": "%(senderDisplayName)s cambiou o asunto a \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s cambiou o asunto a \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s enviou un adhesivo.",
         "m.video": {
             "error_decrypting": "Fallo descifrando vídeo"

src/i18n/strings/he.json

@@ -2202,7 +2202,9 @@
             "sent": "%(senderName)s שלח הזמנה ל%(targetDisplayName)s להצטרף אל החדר."
         },
         "m.room.tombstone": "%(senderDisplayName)s שידרג את החדר הזה.",
-        "m.room.topic": "%(senderDisplayName)s שינה את שם הנושא ל-\"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s שינה את שם הנושא ל-\"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s שלח מדבקה",
         "m.video": {
             "error_decrypting": "שגיאה בפענוח וידאו"

src/i18n/strings/hu.json

@@ -3120,7 +3120,9 @@
             "sent": "%(senderName)s meghívót küldött %(targetDisplayName)s számára, hogy lépjen be a szobába."
         },
         "m.room.tombstone": "%(senderDisplayName)s fejlesztette a szobát.",
-        "m.room.topic": "%(senderDisplayName)s a következőre változtatta a témát: „%(topic)s”.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s a következőre változtatta a témát: „%(topic)s”."
+        },
         "m.sticker": "%(senderDisplayName)s matricát küldött.",
         "m.video": {
             "error_decrypting": "Hiba a videó visszafejtésénél"

src/i18n/strings/id.json

@@ -3152,7 +3152,9 @@
             "sent": "%(senderName)s mengirim sebuah undangan ke %(targetDisplayName)s untuk bergabung dengan ruangan ini."
         },
         "m.room.tombstone": "%(senderDisplayName)s meningkatkan ruangan ini.",
-        "m.room.topic": "%(senderDisplayName)s telah mengubah topik menjadi \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s telah mengubah topik menjadi \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s mengirim sebuah stiker.",
         "m.video": {
             "error_decrypting": "Terjadi kesalahan mendekripsi video"

src/i18n/strings/is.json

@@ -2625,7 +2625,9 @@
             "sent": "%(senderName)s sendi boð til %(targetDisplayName)s um þátttöku í spjallrásinni."
         },
         "m.room.tombstone": "%(senderDisplayName)s uppfærði þessa spjallrás.",
-        "m.room.topic": "%(senderDisplayName)s breytti umræðuefninu í \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s breytti umræðuefninu í \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s sendi límmerki.",
         "m.video": {
             "error_decrypting": "Villa við afkóðun myndskeiðs"

src/i18n/strings/it.json

@@ -3198,7 +3198,9 @@
             "sent": "%(senderName)s ha mandato un invito a %(targetDisplayName)s per unirsi alla stanza."
         },
         "m.room.tombstone": "%(senderDisplayName)s ha aggiornato questa stanza.",
-        "m.room.topic": "%(senderDisplayName)s ha modificato l'argomento in \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s ha modificato l'argomento in \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s ha inviato uno sticker.",
         "m.video": {
             "error_decrypting": "Errore decifratura video"

src/i18n/strings/ja.json

@@ -2928,7 +2928,9 @@
             "sent": "%(senderName)sが%(targetDisplayName)sをこのルームに招待しました。"
         },
         "m.room.tombstone": "%(senderDisplayName)sがこのルームをアップグレードしました。",
-        "m.room.topic": "%(senderDisplayName)sがトピックを\"%(topic)s\"に変更しました。",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)sがトピックを\"%(topic)s\"に変更しました。"
+        },
         "m.sticker": "%(senderDisplayName)sがステッカーを送信しました。",
         "m.video": {
             "error_decrypting": "動画を復号化する際にエラーが発生しました"

src/i18n/strings/lo.json

@@ -2606,7 +2606,9 @@
             "sent": "%(senderName)s ສົ່ງຄຳເຊີນໄປຫາ %(targetDisplayName)s ເພື່ອເຂົ້າຮ່ວມຫ້ອງ."
         },
         "m.room.tombstone": "%(senderDisplayName)s ຍົກລະດັບຫ້ອງນີ້ແລ້ວ.",
-        "m.room.topic": "%(senderDisplayName)s ໄດ້ປ່ຽນຫົວຂໍ້ເປັນ \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s ໄດ້ປ່ຽນຫົວຂໍ້ເປັນ \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s ສົ່ງສະຕິກເກີ.",
         "m.video": {
             "error_decrypting": "ການຖອດລະຫັດວິດີໂອຜິດພາດ"

src/i18n/strings/lt.json

@@ -2062,7 +2062,9 @@
             "sent": "%(senderName)s išsiuntė pakvietimą %(targetDisplayName)s prisijungti prie kambario."
         },
         "m.room.tombstone": "%(senderDisplayName)s atnaujino šį kambarį.",
-        "m.room.topic": "%(senderDisplayName)s pakeitė temą į \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s pakeitė temą į \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s nusiuntė lipduką.",
         "m.video": {
             "error_decrypting": "Klaida iššifruojant vaizdo įrašą"

src/i18n/strings/nl.json

@@ -2756,7 +2756,9 @@
             "sent": "%(senderName)s heeft %(targetDisplayName)s in deze kamer uitgenodigd."
         },
         "m.room.tombstone": "%(senderDisplayName)s heeft deze kamer geüpgraded.",
-        "m.room.topic": "%(senderDisplayName)s heeft het onderwerp gewijzigd naar ‘%(topic)s’.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s heeft het onderwerp gewijzigd naar ‘%(topic)s’."
+        },
         "m.sticker": "%(senderDisplayName)s Verstuurde een sticker.",
         "m.video": {
             "error_decrypting": "Fout bij het ontsleutelen van de video"

src/i18n/strings/pl.json

@@ -3405,7 +3405,9 @@
             "sent": "%(senderName)s wysłał zaproszenie do %(targetDisplayName)s do dołączenia do pokoju."
         },
         "m.room.tombstone": "%(senderDisplayName)s ulepszył ten pokój.",
-        "m.room.topic": "%(senderDisplayName)s zmienił temat na \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s zmienił temat na \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s wysłał naklejkę.",
         "m.video": {
             "error_decrypting": "Błąd deszyfrowania wideo"

src/i18n/strings/pt.json

@@ -3311,7 +3311,9 @@
             "sent": "%(senderName)s enviou um convite para %(targetDisplayName)s entrar na sala."
         },
         "m.room.tombstone": "%(senderDisplayName)s atualizou a sala.",
-        "m.room.topic": "%(senderDisplayName)s mudou o tópico para \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s mudou o tópico para \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s enviou um sticker.",
         "m.video": {
             "error_decrypting": "Erro ao descriptografar o vídeo"

src/i18n/strings/pt_BR.json

@@ -2233,7 +2233,9 @@
             "sent": "%(senderName)s enviou um convite para %(targetDisplayName)s entrar na sala."
         },
         "m.room.tombstone": "%(senderDisplayName)s atualizou esta sala.",
-        "m.room.topic": "%(senderDisplayName)s alterou a descrição para \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s alterou a descrição para \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s enviou uma figurinha.",
         "m.video": {
             "error_decrypting": "Erro ao descriptografar o vídeo"

src/i18n/strings/ru.json

@@ -3181,7 +3181,9 @@
             "sent": "%(senderName)s пригласил(а) %(targetDisplayName)s в комнату."
         },
         "m.room.tombstone": "%(senderDisplayName)s обновил(а) эту комнату.",
-        "m.room.topic": "%(senderDisplayName)s изменил(а) тему комнаты на \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s изменил(а) тему комнаты на \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s отправил(а) наклейку.",
         "m.video": {
             "error_decrypting": "Ошибка расшифровки видео"

src/i18n/strings/sk.json

@@ -3182,7 +3182,9 @@
             "sent": "%(senderName)s pozval %(targetDisplayName)s vstúpiť do miestnosti."
         },
         "m.room.tombstone": "%(senderDisplayName)s aktualizoval túto miestnosť.",
-        "m.room.topic": "%(senderDisplayName)s zmenil tému na \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s zmenil tému na \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s poslal nálepku.",
         "m.video": {
             "error_decrypting": "Chyba pri dešifrovaní videa"

src/i18n/strings/sq.json

@@ -2995,7 +2995,9 @@
             "sent": "%(senderName)s dërgoi një ftesë për %(targetDisplayName)s që të marrë pjesë në dhomë."
         },
         "m.room.tombstone": "%(senderDisplayName)s e përmirësoi këtë dhomë.",
-        "m.room.topic": "%(senderDisplayName)s ndryshoi temën në \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s ndryshoi temën në \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s dërgoi një ngjitës.",
         "m.video": {
             "error_decrypting": "Gabim në shfshehtëzim videoje"

src/i18n/strings/sv.json

@@ -3388,7 +3388,9 @@
             "sent": "%(senderName)s bjöd in %(targetDisplayName)s att gå med i rummet."
         },
         "m.room.tombstone": "%(senderDisplayName)s uppgraderade det här rummet.",
-        "m.room.topic": "%(senderDisplayName)s bytte rummets ämne till \"%(topic)s\".",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s bytte rummets ämne till \"%(topic)s\"."
+        },
         "m.sticker": "%(senderDisplayName)s skickade en dekal.",
         "m.video": {
             "error_decrypting": "Fel vid avkryptering av video"

src/i18n/strings/uk.json

@@ -3117,7 +3117,9 @@
             "sent": "%(senderName)s надсилає запрошення %(targetDisplayName)s приєднатися до кімнати."
         },
         "m.room.tombstone": "%(senderDisplayName)s поліпшує цю кімнату.",
-        "m.room.topic": "%(senderDisplayName)s змінює тему на %(topic)s.",
+        "m.room.topic": {
+            "changed": "%(senderDisplayName)s змінює тему на %(topic)s."
+        },
         "m.sticker": "%(senderDisplayName)s надсилає наліпку.",
         "m.video": {
             "error_decrypting": "Помилка розшифрування відео"