@@ -18,6 +18,7 @@ import React, {
18
18
Dispatch ,
19
19
KeyboardEvent ,
20
20
KeyboardEventHandler ,
21
+ ReactElement ,
21
22
ReactNode ,
22
23
SetStateAction ,
23
24
useCallback ,
@@ -50,7 +51,7 @@ import TextWithTooltip from "../views/elements/TextWithTooltip";
50
51
import { useStateToggle } from "../../hooks/useStateToggle" ;
51
52
import { getChildOrder } from "../../stores/spaces/SpaceStore" ;
52
53
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton" ;
53
- import { linkifyElement } from "../../HtmlUtils" ;
54
+ import { linkifyElement , topicToHtml } from "../../HtmlUtils" ;
54
55
import { useDispatcher } from "../../hooks/useDispatcher" ;
55
56
import { Action } from "../../dispatcher/actions" ;
56
57
import { IState , RovingTabIndexProvider , useRovingTabIndex } from "../../accessibility/RovingTabIndex" ;
@@ -65,6 +66,7 @@ import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPay
65
66
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts" ;
66
67
import { getKeyBindingsManager } from "../../KeyBindingsManager" ;
67
68
import { Alignment } from "../views/elements/Tooltip" ;
69
+ import { getTopic } from "../../hooks/room/useTopic" ;
68
70
69
71
interface IProps {
70
72
space : Room ;
@@ -122,7 +124,7 @@ const Tile: React.FC<ITileProps> = ({
122
124
} ) ;
123
125
} ;
124
126
125
- let button ;
127
+ let button : ReactElement ;
126
128
if ( busy ) {
127
129
button = < AccessibleTooltipButton
128
130
disabled = { true }
@@ -154,7 +156,7 @@ const Tile: React.FC<ITileProps> = ({
154
156
</ AccessibleButton > ;
155
157
}
156
158
157
- let checkbox ;
159
+ let checkbox : ReactElement | undefined ;
158
160
if ( onToggleClick ) {
159
161
if ( hasPermissions ) {
160
162
checkbox = < StyledCheckbox checked = { ! ! selected } onChange = { onToggleClick } tabIndex = { isActive ? 0 : - 1 } /> ;
@@ -168,7 +170,7 @@ const Tile: React.FC<ITileProps> = ({
168
170
}
169
171
}
170
172
171
- let avatar ;
173
+ let avatar : ReactElement ;
172
174
if ( joinedRoom ) {
173
175
avatar = < RoomAvatar room = { joinedRoom } width = { 20 } height = { 20 } /> ;
174
176
} else {
@@ -186,19 +188,22 @@ const Tile: React.FC<ITileProps> = ({
186
188
description += " · " + _t ( "%(count)s rooms" , { count : numChildRooms } ) ;
187
189
}
188
190
189
- const topic = joinedRoom ?. currentState ?. getStateEvents ( EventType . RoomTopic , "" ) ?. getContent ( ) ?. topic || room . topic ;
190
- if ( topic ) {
191
- description += " · " + topic ;
191
+ let topic : ReactNode | string | null ;
192
+ if ( joinedRoom ) {
193
+ const topicObj = getTopic ( joinedRoom ) ;
194
+ topic = topicToHtml ( topicObj ?. text , topicObj ?. html ) ;
195
+ } else {
196
+ topic = room . topic ;
192
197
}
193
198
194
- let joinedSection ;
199
+ let joinedSection : ReactElement | undefined ;
195
200
if ( joinedRoom ) {
196
201
joinedSection = < div className = "mx_SpaceHierarchy_roomTile_joined" >
197
202
{ _t ( "Joined" ) }
198
203
</ div > ;
199
204
}
200
205
201
- let suggestedSection ;
206
+ let suggestedSection : ReactElement | undefined ;
202
207
if ( suggested && ( ! joinedRoom || hasPermissions ) ) {
203
208
suggestedSection = < InfoTooltip tooltip = { _t ( "This room is suggested as a good one to join" ) } >
204
209
{ _t ( "Suggested" ) }
@@ -226,6 +231,8 @@ const Tile: React.FC<ITileProps> = ({
226
231
} }
227
232
>
228
233
{ description }
234
+ { topic && " · " }
235
+ { topic }
229
236
</ div >
230
237
</ div >
231
238
< div className = "mx_SpaceHierarchy_actions" >
0 commit comments