feat: community room icon (#23)

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

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M17.4315 15.2736L12.967 23C16.206 22.7194 19.0289 21.0519 20.8478 18.5867L18.0894 13.7901C17.9324 14.3145 17.711 14.8128 17.4315 15.2736ZM17.7045 9.21981L21.9841 16.6646C22.6366 15.2502 23 13.6705 23 12.0002C23 10.4218 22.6743 8.92408 22.0873 7.57043H16.5478C17.0144 8.05441 17.4067 8.61082 17.7045 9.21981ZM20.9919 5.61965L12.0575 5.60899C12.036 5.60873 12.0145 5.60899 11.993 5.60899C11.4759 5.60899 10.9707 5.67345 10.4869 5.79469L13.2314 1.02791C16.4435 1.38689 19.2267 3.11328 20.9919 5.61965ZM11.0115 1C7.77576 1.27888 4.9614 2.94336 3.14786 5.40537L5.8988 10.1959C6.05575 9.67211 6.27613 9.17356 6.55456 8.71357L11.0115 1ZM6.26108 14.7302L2.01051 7.33713C1.3612 8.7512 1 10.3305 1 12.0002C1 13.5737 1.32143 15.0666 1.90301 16.4169H7.43606C6.95983 15.9229 6.56101 15.3536 6.26108 14.7302ZM11.9285 18.3783L2.98984 18.3677C4.74747 20.8807 7.52529 22.6123 10.7406 22.9724L13.4959 18.1936C13.0132 18.3141 12.509 18.3783 11.993 18.3783C11.9715 18.3783 11.95 18.3786 11.9285 18.3783Z"
+        fill="#1161FE" />
+    <circle cx="12.0077" cy="12.0081" r="4.40322" fill="#1161FE" />
+</svg>

res/welcome.html

@@ -171,7 +171,6 @@ we don't have an account and should hide them. No account == no guest account ei
     </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 {
+export function useVerifiedRoom(room?: Room | IPublicRoomsChunkRoom): {
-    const isVerifiedRoom = useMemo(() => {
+    isTokenGatedRoom: boolean;
-        return isTokenGatedRoom(room);
+    isCommunityRoom: boolean;
+} {
+    const isTokenGatedRoom = useMemo<boolean>(() => {
+        return !!room?.name?.startsWith("[TG]");
     }, [room]);
 
-    return isVerifiedRoom;
+    const isCommunityRoom = useMemo(() => {
+        return !!room?.name?.startsWith("$");
+    }, [room]);
+
+    return {
+        isTokenGatedRoom,
+        isCommunityRoom,
+    };
 }