feat: sidebar custom room name

res/css/superhero/custom.css

@@ -0,0 +1,9 @@
+.sh_RoomTokenGatedRoomIcon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+}
+.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
+    align-items: center;
+    display: flex;
+}

res/themes/superhero/img/icons/tokengated-room.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="7" fill="white" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47705 17.5229 2 12 2C6.47705 2 2 6.47705 2 12C2 17.5229 6.47705 22 12 22ZM14.1455 6.79102C13.8464 6.66235 13.5195 6.56592 13.1643 6.50098V5H11.1643V6.45581C10.696 6.51904 10.2646 6.63818 9.86987 6.81323C9.25195 7.08252 8.76611 7.46362 8.41235 7.95703C8.05859 8.44531 7.88159 9.01831 7.88159 9.67603V9.68359C7.88159 10.4958 8.15063 11.1562 8.68896 11.6643C9.22705 12.1726 10.0269 12.5339 11.0884 12.7483L12.2244 12.9724C12.8972 13.1121 13.3755 13.2864 13.6597 13.4956C13.9485 13.7 14.093 13.9841 14.093 14.3479V14.3552C14.093 14.5161 14.0637 14.6658 14.0054 14.8042C13.9644 14.9019 13.9089 14.9939 13.8389 15.0803C13.6746 15.2847 13.4404 15.4441 13.1362 15.5588C12.8374 15.6685 12.4785 15.7231 12.0601 15.7231C11.6514 15.7231 11.2852 15.6685 10.9612 15.5588C10.6372 15.4441 10.3733 15.2871 10.1689 15.0879C9.96948 14.8835 9.84497 14.6418 9.79517 14.3628L9.78027 14.2805H7.6499L7.65747 14.4001C7.70215 15.063 7.90649 15.6311 8.27026 16.1045C8.63403 16.5728 9.13232 16.9341 9.76514 17.1882C9.97974 17.272 10.2065 17.3418 10.4453 17.3975C10.6738 17.4507 10.9136 17.491 11.1643 17.5183V18.9998H13.1643V17.4758C13.5918 17.4077 13.981 17.2996 14.3323 17.1509C14.9851 16.8718 15.4834 16.4807 15.8271 15.9773C16.176 15.469 16.3506 14.8687 16.3506 14.176V14.1685C16.3506 13.8398 16.3108 13.5393 16.231 13.2668C16.1741 13.0723 16.0969 12.8918 15.9993 12.7258C15.77 12.3223 15.4136 11.9883 14.9302 11.7241C14.447 11.4602 13.8291 11.2534 13.0767 11.1038L11.9329 10.8721C11.3149 10.7476 10.8616 10.5806 10.5725 10.3713C10.2834 10.1621 10.1389 9.88794 10.1389 9.54907V9.5415C10.1389 9.28247 10.2112 9.05566 10.3557 8.86133C10.446 8.74365 10.5603 8.64185 10.698 8.55518C10.7881 8.49878 10.8882 8.44873 10.9985 8.40552C11.2776 8.29077 11.6089 8.23364 11.9927 8.23364C12.3665 8.23364 12.6953 8.28833 12.9795 8.39795C13.2683 8.50757 13.5 8.66455 13.6746 8.8689C13.8489 9.06812 13.9561 9.30981 13.9958 9.59399L14.0034 9.68359H16.1338L16.1262 9.5415C16.0913 8.91382 15.9045 8.36304 15.5657 7.88965C15.2268 7.41626 14.7534 7.05005 14.1455 6.79102Z"
+        fill="#1161FE" />
+</svg>

src/components/views/rooms/CustomRoomName.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Room } from "matrix-js-sdk/src/matrix";
+
+import { Icon as TokenGatedRoomIcon } from "../../../../res/themes/superhero/img/icons/tokengated-room.svg";
+import { useTokenGatedRoom } from "../../../hooks/useTokengatedRoom";
+
+export interface CustomRoomNameProps {
+    room: Room;
+}
+export const CustomRoomName: React.FC<CustomRoomNameProps> = ({ room }) => {
+    const { roomName, isVerifiedRoom } = useTokenGatedRoom(room);
+    return (
+        <>
+            {isVerifiedRoom && <TokenGatedRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
+            <span dir="auto">{roomName}</span>
+        </>
+    );
+};

src/components/views/rooms/RoomTile.tsx

@@ -59,6 +59,8 @@ import { MessagePreview, MessagePreviewStore } from "matrix-react-sdk/src/stores
 import { DefaultTagID, TagID } from "matrix-react-sdk/src/stores/room-list/models";
 import { isKnockDenied } from "matrix-react-sdk/src/utils/membership";
 import { useHasRoomLiveVoiceBroadcast } from "matrix-react-sdk/src/voice-broadcast";
+import { CustomRoomName } from "./CustomRoomName";
+import { getRoomName } from "../../../hooks/useTokengatedRoom";
 
 interface Props {
     room: Room;
@@ -399,10 +401,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
             mx_RoomTile_minimized: this.props.isMinimized,
         });
 
-        let name = this.props.room.name;
-        if (typeof name !== "string") name = "";
-        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
-
+        const name = getRoomName(this.props.room);
         let badge: React.ReactNode;
         if (!this.props.isMinimized && this.notificationState) {
             // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
@@ -436,7 +435,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
         const titleContainer = this.props.isMinimized ? null : (
             <div className="mx_RoomTile_titleContainer">
                 <div title={name} className={titleClasses} tabIndex={-1}>
-                    <span dir="auto">{name}</span>
+                    <CustomRoomName room={this.props.room} />
                 </div>
                 {subtitle}
             </div>

src/hooks/useTokenGatedRoom.tsx

@@ -0,0 +1,27 @@
+import { Room } from "matrix-js-sdk/src/matrix";
+import { useMemo } from "react";
+
+export function getRoomName(room: Room): string {
+    return (room?.name || "")
+        .replace(":", ":\u200b") // add a zero-width space to allow linewrapping after the colon (matrix defaults)
+        .replace("[TG]", "");
+}
+
+export function isTokenGatedRoom(room: Room): boolean {
+    return room?.name?.includes("[TG]");
+}
+
+export function useTokenGatedRoom(room: Room): any {
+    const roomName = useMemo(() => {
+        return getRoomName(room);
+    }, [room]);
+
+    const isVerifiedRoom = useMemo(() => {
+        return isTokenGatedRoom(room);
+    }, [room]);
+
+    return {
+        roomName,
+        isVerifiedRoom,
+    };
+}

src/vector/index.ts

@@ -33,6 +33,7 @@ import "setimmediate";
 // in webpack.config.js
 require("gfm.css/gfm.css");
 require("katex/dist/katex.css");
+require("../../res/css/superhero/custom.css");
 
 /**
  * This require is necessary only for purposes of CSS hot-reload, as otherwise