feat: community room icon (#23)

res/welcome.html

@@ -171,7 +171,6 @@
     </a>
     <h1 class="mx_Header_title">_t("welcome_to_superhero")</h1>
     <!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
-    <h4 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h4>
     <div class="mx_ButtonGroup">
         <div class="mx_ButtonRow">
             <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">

src/components/views/elements/RoomName.tsx

@@ -18,6 +18,7 @@ import { IPublicRoomsChunkRoom, Room } from "matrix-js-sdk/src/matrix";
 import React, { useCallback, useMemo } from "react";
 
 import { Icon as TokenGatedRoomIcon } from "../../../../res/themes/superhero/img/icons/tokengated-room.svg";
+import { Icon as CommunityRoomIcon } from "../../../../res/themes/superhero/img/icons/community-room.svg";
 import { useRoomName } from "../../../hooks/useRoomName";
 import { useVerifiedRoom } from "../../../hooks/useVerifiedRoom";
 import { UserVerifiedBadge } from "./UserVerifiedBadge";
@@ -30,7 +31,7 @@ interface IProps {
 
 export const RoomName = ({ room, children, maxLength }: IProps): JSX.Element => {
     const roomName = useRoomName(room);
-    const isVerifiedRoom = useVerifiedRoom(room);
+    const { isTokenGatedRoom, isCommunityRoom } = useVerifiedRoom(room);
 
     const roomUsers: string[] = useMemo(() => {
         return (
@@ -51,12 +52,13 @@ export const RoomName = ({ room, children, maxLength }: IProps): JSX.Element =>
     const renderRoomName = useCallback(
         () => (
             <span className="sh_RoomTokenGatedRoom">
-                {isVerifiedRoom && <TokenGatedRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
+                {isCommunityRoom && <CommunityRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
+                {isTokenGatedRoom && <TokenGatedRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
                 <span dir="auto">{truncatedRoomName}</span>
                 {roomUsers?.length && <UserVerifiedBadge userId={roomUsers[0]} />}
             </span>
         ),
-        [truncatedRoomName, isVerifiedRoom, roomUsers],
+        [truncatedRoomName, isCommunityRoom, isTokenGatedRoom, roomUsers],
     );
 
     if (children) return children(renderRoomName());

src/hooks/useRoomName.ts

@@ -10,7 +10,7 @@ import { useMemo } from "react";
  * @returns {string}
  */
 export function getSafeRoomName(roomName?: string): string {
-    return roomName?.replace(/^(\s|\[TG\])*/, "") || "";
+    return roomName?.replace(/^(\s|\[TG\])*/, "").replace(/^(\s|\$)*/, "") || "";
 }
 
 /**

src/hooks/useVerifiedRoom.ts

@@ -1,24 +1,24 @@
 import { IPublicRoomsChunkRoom, Room } from "matrix-js-sdk/src/matrix";
 import { useMemo } from "react";
 
-/**
- * Determines if a room is a token gated room
- * @param room - The room model
- * @returns {boolean} true if the room is token gated
- */
-export function isTokenGatedRoom(room?: Room | IPublicRoomsChunkRoom): boolean {
-    return !!room?.name?.startsWith("[TG]");
-}
-
 /**
  * Custom hook to check if a room is verified
  * @param room - The room model
- * @returns {boolean} true if the room is verified, false otherwise
  */
-export function useVerifiedRoom(room?: Room | IPublicRoomsChunkRoom): boolean {
-    const isVerifiedRoom = useMemo(() => {
-        return isTokenGatedRoom(room);
+export function useVerifiedRoom(room?: Room | IPublicRoomsChunkRoom): {
+    isTokenGatedRoom: boolean;
+    isCommunityRoom: boolean;
+} {
+    const isTokenGatedRoom = useMemo<boolean>(() => {
+        return !!room?.name?.startsWith("[TG]");
+    }, [room]);
+
+    const isCommunityRoom = useMemo(() => {
+        return !!room?.name?.startsWith("$");
     }, [room]);
 
-    return isVerifiedRoom;
+    return {
+        isTokenGatedRoom,
+        isCommunityRoom,
+    };
 }