{ notice }
diff --git a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
index b572122da1b..8247ee25e93 100644
--- a/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
+++ b/src/components/views/spaces/SpaceSettingsGeneralTab.tsx
@@ -25,8 +25,8 @@ import AccessibleButton from "../elements/AccessibleButton";
import SpaceBasicSettings from "./SpaceBasicSettings";
import { avatarUrlForRoom } from "../../../Avatar";
import { IDialogProps } from "../dialogs/IDialogProps";
-import { getTopic } from "../elements/RoomTopic";
import { leaveSpace } from "../../../utils/leave-behaviour";
+import { getTopic } from "../../../hooks/room/useTopic";
interface IProps extends IDialogProps {
matrixClient: MatrixClient;
diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts
index 0331f7de945..27f0b423c07 100644
--- a/src/dispatcher/actions.ts
+++ b/src/dispatcher/actions.ts
@@ -313,4 +313,9 @@ export enum Action {
* logs. Fires with no payload.
*/
DumpDebugLogs = "dump_debug_logs",
+
+ /**
+ * Show current room topic
+ */
+ ShowRoomTopic = "show_room_topic"
}
diff --git a/src/hooks/room/useTopic.ts b/src/hooks/room/useTopic.ts
new file mode 100644
index 00000000000..b01065c37ca
--- /dev/null
+++ b/src/hooks/room/useTopic.ts
@@ -0,0 +1,40 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useEffect, useState } from "react";
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+
+import { useTypedEventEmitter } from "../useEventEmitter";
+
+export const getTopic = (room: Room) => {
+ return room?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
+};
+
+export function useTopic(room: Room): string {
+ const [topic, setTopic] = useState(getTopic(room));
+ useTypedEventEmitter(room.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => {
+ if (ev.getType() !== EventType.RoomTopic) return;
+ setTopic(getTopic(room));
+ });
+ useEffect(() => {
+ setTopic(getTopic(room));
+ }, [room]);
+
+ return topic;
+}
diff --git a/src/hooks/useHover.ts b/src/hooks/useHover.ts
new file mode 100644
index 00000000000..9f7c1012255
--- /dev/null
+++ b/src/hooks/useHover.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useState } from "react";
+
+export default function useHover(ref: React.MutableRefObject) {
+ const [hovered, setHoverState] = useState(false);
+
+ const handleMouseOver = () => setHoverState(true);
+ const handleMouseOut = () => setHoverState(false);
+
+ useEffect(
+ () => {
+ const node = ref.current;
+ if (node) {
+ node.addEventListener("mouseover", handleMouseOver);
+ node.addEventListener("mouseout", handleMouseOut);
+
+ return () => {
+ node.removeEventListener("mouseover", handleMouseOver);
+ node.removeEventListener("mouseout", handleMouseOut);
+ };
+ }
+ },
+ [ref],
+ );
+
+ return hovered;
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0c7e3b77b94..15df64eeec8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2370,6 +2370,8 @@
"Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
"%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
"%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
+ "Edit topic": "Edit topic",
+ "Click to read topic": "Click to read topic",
"Message search initialisation failed, check your settings for more information": "Message search initialisation failed, check your settings for more information",
"Use the Desktop app to see all encrypted files": "Use the Desktop app to see all encrypted files",
"Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages",
diff --git a/test/components/views/elements/Linkify-test.tsx b/test/components/views/elements/Linkify-test.tsx
new file mode 100644
index 00000000000..7224c543736
--- /dev/null
+++ b/test/components/views/elements/Linkify-test.tsx
@@ -0,0 +1,64 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useState } from "react";
+import { mount } from "enzyme";
+
+import { Linkify } from "../../../../src/components/views/elements/Linkify";
+
+describe("Linkify", () => {
+ it("linkifies the context", () => {
+ const wrapper = mount(
+ https://perdu.com
+ );
+ expect(wrapper.html()).toBe('
');
+ });
+});
diff --git a/test/useTopic-test.tsx b/test/useTopic-test.tsx
new file mode 100644
index 00000000000..75096b43e48
--- /dev/null
+++ b/test/useTopic-test.tsx
@@ -0,0 +1,69 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { mount } from "enzyme";
+import { act } from "react-dom/test-utils";
+
+import { useTopic } from "../src/hooks/room/useTopic";
+import { mkEvent, stubClient } from "./test-utils";
+import { MatrixClientPeg } from "../src/MatrixClientPeg";
+
+describe("useTopic", () => {
+ it("should display the room topic", () => {
+ stubClient();
+ const room = new Room("!TESTROOM", MatrixClientPeg.get(), "@alice:example.org");
+ const topic = mkEvent({
+ type: 'm.room.topic',
+ room: '!TESTROOM',
+ user: '@alice:example.org',
+ content: {
+ topic: 'Test topic',
+ },
+ ts: 123,
+ event: true,
+ });
+
+ room.addLiveEvents([topic]);
+
+ function RoomTopic() {
+ const topic = useTopic(room);
+ return