From ebfb94ccce17a183c11f7eccc03fb4163e6aed62 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Wed, 29 Jun 2022 20:48:37 +0200
Subject: [PATCH 1/3] Render HTML topics in rooms on space home

Signed-off-by: Johannes Marbach <johannesm@element.io>
---
 src/components/structures/SpaceHierarchy.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 9d7c737c5f2..9b434cae52f 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -50,7 +50,7 @@ import TextWithTooltip from "../views/elements/TextWithTooltip";
 import { useStateToggle } from "../../hooks/useStateToggle";
 import { getChildOrder } from "../../stores/spaces/SpaceStore";
 import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
-import { linkifyElement } from "../../HtmlUtils";
+import { linkifyElement, topicToHtml } from "../../HtmlUtils";
 import { useDispatcher } from "../../hooks/useDispatcher";
 import { Action } from "../../dispatcher/actions";
 import { IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
@@ -65,6 +65,7 @@ import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPay
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { Alignment } from "../views/elements/Tooltip";
+import { getTopic } from "../../hooks/room/useTopic";
 
 interface IProps {
     space: Room;
@@ -186,9 +187,12 @@ const Tile: React.FC<ITileProps> = ({
         description += " · " + _t("%(count)s rooms", { count: numChildRooms });
     }
 
-    const topic = joinedRoom?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic || room.topic;
-    if (topic) {
-        description += " · " + topic;
+    let topic;
+    if (joinedRoom) {
+        const topicObj = getTopic(joinedRoom);
+        topic = topicToHtml(topicObj?.text, topicObj?.html);
+    } else {
+        topic = room.topic;
     }
 
     let joinedSection;
@@ -226,6 +230,8 @@ const Tile: React.FC<ITileProps> = ({
                 }}
             >
                 { description }
+                { topic && " · " }
+                { topic && topic }
             </div>
         </div>
         <div className="mx_SpaceHierarchy_actions">

From 1376f039f292922eafae73819b6f6fac487c9ca5 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 30 Jun 2022 08:02:06 +0200
Subject: [PATCH 2/3] Add type annotations

Signed-off-by: Johannes Marbach <johannesm@element.io>
---
 src/components/structures/SpaceHierarchy.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 9b434cae52f..22378dcc640 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -18,6 +18,7 @@ import React, {
     Dispatch,
     KeyboardEvent,
     KeyboardEventHandler,
+    ReactElement,
     ReactNode,
     SetStateAction,
     useCallback,
@@ -123,7 +124,7 @@ const Tile: React.FC<ITileProps> = ({
         });
     };
 
-    let button;
+    let button: ReactElement;
     if (busy) {
         button = <AccessibleTooltipButton
             disabled={true}
@@ -155,7 +156,7 @@ const Tile: React.FC<ITileProps> = ({
         </AccessibleButton>;
     }
 
-    let checkbox;
+    let checkbox: ReactElement | undefined;
     if (onToggleClick) {
         if (hasPermissions) {
             checkbox = <StyledCheckbox checked={!!selected} onChange={onToggleClick} tabIndex={isActive ? 0 : -1} />;
@@ -169,7 +170,7 @@ const Tile: React.FC<ITileProps> = ({
         }
     }
 
-    let avatar;
+    let avatar: ReactElement;
     if (joinedRoom) {
         avatar = <RoomAvatar room={joinedRoom} width={20} height={20} />;
     } else {
@@ -187,7 +188,7 @@ const Tile: React.FC<ITileProps> = ({
         description += " · " + _t("%(count)s rooms", { count: numChildRooms });
     }
 
-    let topic;
+    let topic: ReactNode | string | null;
     if (joinedRoom) {
         const topicObj = getTopic(joinedRoom);
         topic = topicToHtml(topicObj?.text, topicObj?.html);
@@ -195,14 +196,14 @@ const Tile: React.FC<ITileProps> = ({
         topic = room.topic;
     }
 
-    let joinedSection;
+    let joinedSection: ReactElement | undefined;
     if (joinedRoom) {
         joinedSection = <div className="mx_SpaceHierarchy_roomTile_joined">
             { _t("Joined") }
         </div>;
     }
 
-    let suggestedSection;
+    let suggestedSection: ReactElement | undefined;
     if (suggested && (!joinedRoom || hasPermissions)) {
         suggestedSection = <InfoTooltip tooltip={_t("This room is suggested as a good one to join")}>
             { _t("Suggested") }

From 7c5b666e56f95c7452598e3941d38adb66ef0bba Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Thu, 30 Jun 2022 08:02:42 +0200
Subject: [PATCH 3/3] Remove superfluous conditional check

Signed-off-by: Johannes Marbach <johannesm@element.io>
---
 src/components/structures/SpaceHierarchy.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index 22378dcc640..cb0432efb5d 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -232,7 +232,7 @@ const Tile: React.FC<ITileProps> = ({
             >
                 { description }
                 { topic && " · " }
-                { topic && topic }
+                { topic }
             </div>
         </div>
         <div className="mx_SpaceHierarchy_actions">