fix: pill room name badge icons

2024-01-24 19:20:29 +01:00 · 2024-01-24 19:20:29 +01:00 · 3031451657
parent ae8b7da18f
commit 3031451657
5 changed files with 221 additions and 11 deletions
--- a/components.json
+++ b/components.json
@ -16,5 +16,6 @@
    "src/components/views/dialogs/InviteDialog.tsx": "src/components/views/dialogs/InviteDialog.tsx",
    "src/components/views/right_panel/UserInfo.tsx": "src/components/views/right_panel/UserInfo.tsx",
    "src/components/structures/HomePage.tsx": "src/components/structures/HomePage.tsx",
-    "src/components/views/dialogs/spotlight/SpotlightDialog.tsx": "src/components/views/dialogs/spotlight/SpotlightDialog.tsx"
+    "src/components/views/dialogs/spotlight/SpotlightDialog.tsx": "src/components/views/dialogs/spotlight/SpotlightDialog.tsx",
+    "src/components/views/elements/Pill.tsx": "src/components/views/elements/Pill.tsx"
 }
--- a/res/themes/superhero/img/icons/community-room.svg
+++ b/res/themes/superhero/img/icons/community-room.svg
@ -1,6 +1,8 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="12" fill="white" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37262 0 0 5.37258 0 12C0 18.6274 5.37262 24 12 24ZM14.9324 4.82915C14.5333 4.65738 14.0965 4.52818 13.6223 4.44158V2.43478H10.9521V4.38116C10.3274 4.46569 9.7517 4.62502 9.22452 4.85913C8.3998 5.21891 7.75102 5.7286 7.27887 6.38819C6.80639 7.04112 6.57031 7.80732 6.57031 8.68678V8.69677C6.57031 9.78277 6.92935 10.6656 7.64776 11.3451C8.36651 12.0247 9.4341 12.5078 10.8512 12.7943L12.3679 13.0941C13.266 13.2806 13.9046 13.5138 14.284 13.7936C14.6698 14.0668 14.8624 14.4466 14.8624 14.9329V14.9429C14.8624 15.3094 14.7497 15.6325 14.5234 15.9123C14.3037 16.1855 13.9912 16.3987 13.5853 16.5519C13.1861 16.6985 12.7072 16.7718 12.1484 16.7718C11.6029 16.7718 11.1138 16.6985 10.6814 16.5519C10.249 16.3987 9.8964 16.1888 9.62364 15.9223C9.35768 15.6492 9.19124 15.326 9.12466 14.9529L9.10496 14.843H6.26087L6.27072 15.0029C6.33084 15.889 6.6036 16.6485 7.08899 17.2815C7.57473 17.9078 8.24015 18.3908 9.08492 18.7306C9.64538 18.9499 10.268 19.097 10.9521 19.1719V21.1531H13.6223V19.1151C14.1929 19.0242 14.713 18.8794 15.1821 18.6806C16.0533 18.3075 16.7188 17.7845 17.1777 17.1116C17.6433 16.432 17.876 15.6292 17.876 14.7031V14.6931C17.876 13.9402 17.7198 13.2973 17.4073 12.7643C17.1012 12.2246 16.6257 11.7782 15.9803 11.4251C15.3349 11.072 14.5099 10.7955 13.5054 10.5956L11.9786 10.2858C11.1539 10.1192 10.5486 9.89604 10.1627 9.61621C9.77683 9.33638 9.5839 8.96994 9.5839 8.51688V8.50689C9.5839 8.16043 9.68037 7.85728 9.8733 7.59744C10.0727 7.3376 10.3587 7.1344 10.7313 6.98782C11.1039 6.83459 11.5462 6.75796 12.0584 6.75796C12.5574 6.75796 12.9966 6.83126 13.3757 6.97783C13.7615 7.12441 14.071 7.33428 14.3037 7.60744C14.5367 7.87395 14.6797 8.19707 14.733 8.57684L14.7429 8.69677H17.587L17.5768 8.50689C17.5302 7.66741 17.2809 6.93119 16.8285 6.29824C16.376 5.6653 15.7439 5.17561 14.9324 4.82915Z"
+    <path
+        d="M10.9558 0L1 4.34075V10.8988C1 16.941 5.24358 22.5986 10.9558 24V21H13.4641L13.4641 24C19.1763 22.5986 23.4199 16.941 23.4199 10.8988V4.34075L13.4641 0V3H10.9558L10.9558 0Z"
        fill="#6147FF" />
+    <path
+        d="M13.4713 4.79524C13.9208 4.8801 14.3338 5.00676 14.7119 5.17483C15.1321 5.36011 15.5015 5.58762 15.8202 5.85694C16.0842 6.08035 16.3133 6.33286 16.5075 6.61406C16.9364 7.23387 17.1726 7.95492 17.2162 8.77722L17.2265 8.96292H14.5328L14.5233 8.84568C14.4725 8.47388 14.337 8.15701 14.1166 7.8963C13.8962 7.62862 13.6029 7.42325 13.2375 7.27937C12.8791 7.13589 12.463 7.06416 11.9905 7.06416C11.7479 7.06416 11.522 7.08301 11.3119 7.12073C11.1026 7.15803 10.91 7.21419 10.7332 7.28921C10.3804 7.43268 10.1101 7.6319 9.92065 7.88646C9.73833 8.14102 9.64716 8.43781 9.64716 8.77722V8.78706C9.64716 9.23059 9.82949 9.58969 10.1949 9.86351C10.4343 10.0431 10.7617 10.1984 11.1787 10.33C11.3991 10.3997 11.6441 10.4628 11.9144 10.5194L13.3603 10.8227C13.9137 10.9367 14.4099 11.0761 14.8483 11.2408C15.1638 11.3593 15.4492 11.4909 15.7045 11.6352C16.3157 11.9812 16.7659 12.4186 17.0561 12.9469C17.3518 13.4692 17.5 14.0988 17.5 14.8363V14.8461C17.5 15.7529 17.2796 16.5395 16.8389 17.2048C16.4036 17.864 15.7734 18.3764 14.949 18.7416C14.5043 18.9363 14.012 19.0781 13.4713 19.1671V21.1634H10.9425V19.2228C10.2948 19.1495 9.70503 19.0056 9.1739 18.7908C8.37403 18.4579 7.7438 17.9849 7.28402 17.3712C6.82423 16.7514 6.5658 16.0074 6.50872 15.1396L6.5 14.983H9.19292L9.21195 15.0908C9.27457 15.4561 9.43233 15.7725 9.68442 16.0402C9.94285 16.3013 10.2766 16.5067 10.6864 16.6567C11.0955 16.8002 11.5592 16.8719 12.0753 16.8719C12.6049 16.8719 13.0583 16.8002 13.4364 16.6567C13.8209 16.5067 14.1166 16.2981 14.3251 16.0304C14.5391 15.7561 14.6462 15.4397 14.6462 15.081V15.0712C14.6462 14.5948 14.4638 14.2226 14.0984 13.9554C13.7385 13.6811 13.1336 13.4528 12.283 13.27L10.8474 12.9765C9.50526 12.6957 8.49373 12.2226 7.81356 11.5569C7.1326 10.8916 6.79252 10.0267 6.79252 8.96292V8.95349C6.79252 8.09183 7.01607 7.34168 7.46397 6.7022C7.91107 6.05616 8.52544 5.55688 9.30628 5.20434C9.68363 5.03136 10.0871 4.89977 10.5176 4.81C10.6563 4.78089 10.7982 4.7563 10.9425 4.73621V2.83008H13.4713V4.79524Z"
+        fill="white" />
 </svg>
--- a/res/themes/superhero/img/icons/tokengated-room.svg
+++ b/res/themes/superhero/img/icons/tokengated-room.svg
@ -1,8 +1,16 @@
 <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M10.9558 0L1 4.34075V10.8988C1 16.941 5.24358 22.5986 10.9558 24V21H13.4641L13.4641 24C19.1763 22.5986 23.4199 16.941 23.4199 10.8988V4.34075L13.4641 0V3H10.9558L10.9558 0Z"
-        fill="#6147FF" />
-    <path
-        d="M13.4713 4.79524C13.9208 4.8801 14.3338 5.00676 14.7119 5.17483C15.1321 5.36011 15.5015 5.58762 15.8202 5.85694C16.0842 6.08035 16.3133 6.33286 16.5075 6.61406C16.9364 7.23387 17.1726 7.95492 17.2162 8.77722L17.2265 8.96292H14.5328L14.5233 8.84568C14.4725 8.47388 14.337 8.15701 14.1166 7.8963C13.8962 7.62862 13.6029 7.42325 13.2375 7.27937C12.8791 7.13589 12.463 7.06416 11.9905 7.06416C11.7479 7.06416 11.522 7.08301 11.3119 7.12073C11.1026 7.15803 10.91 7.21419 10.7332 7.28921C10.3804 7.43268 10.1101 7.6319 9.92065 7.88646C9.73833 8.14102 9.64716 8.43781 9.64716 8.77722V8.78706C9.64716 9.23059 9.82949 9.58969 10.1949 9.86351C10.4343 10.0431 10.7617 10.1984 11.1787 10.33C11.3991 10.3997 11.6441 10.4628 11.9144 10.5194L13.3603 10.8227C13.9137 10.9367 14.4099 11.0761 14.8483 11.2408C15.1638 11.3593 15.4492 11.4909 15.7045 11.6352C16.3157 11.9812 16.7659 12.4186 17.0561 12.9469C17.3518 13.4692 17.5 14.0988 17.5 14.8363V14.8461C17.5 15.7529 17.2796 16.5395 16.8389 17.2048C16.4036 17.864 15.7734 18.3764 14.949 18.7416C14.5043 18.9363 14.012 19.0781 13.4713 19.1671V21.1634H10.9425V19.2228C10.2948 19.1495 9.70503 19.0056 9.1739 18.7908C8.37403 18.4579 7.7438 17.9849 7.28402 17.3712C6.82423 16.7514 6.5658 16.0074 6.50872 15.1396L6.5 14.983H9.19292L9.21195 15.0908C9.27457 15.4561 9.43233 15.7725 9.68442 16.0402C9.94285 16.3013 10.2766 16.5067 10.6864 16.6567C11.0955 16.8002 11.5592 16.8719 12.0753 16.8719C12.6049 16.8719 13.0583 16.8002 13.4364 16.6567C13.8209 16.5067 14.1166 16.2981 14.3251 16.0304C14.5391 15.7561 14.6462 15.4397 14.6462 15.081V15.0712C14.6462 14.5948 14.4638 14.2226 14.0984 13.9554C13.7385 13.6811 13.1336 13.4528 12.283 13.27L10.8474 12.9765C9.50526 12.6957 8.49373 12.2226 7.81356 11.5569C7.1326 10.8916 6.79252 10.0267 6.79252 8.96292V8.95349C6.79252 8.09183 7.01607 7.34168 7.46397 6.7022C7.91107 6.05616 8.52544 5.55688 9.30628 5.20434C9.68363 5.03136 10.0871 4.89977 10.5176 4.81C10.6563 4.78089 10.7982 4.7563 10.9425 4.73621V2.83008H13.4713V4.79524Z"
-        fill="white" />
+    <g clip-path="url(#clip0_29053_183063)">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M10.7459 0L0.790039 4.34075V10.8988C0.790039 16.941 5.03362 22.5986 10.7459 24V17.6846C8.13423 17.1112 6.17969 14.7838 6.17969 12C6.17969 9.21615 8.13423 6.88881 10.7459 6.31539V0ZM13.2539 17.6845C15.8654 17.1109 17.8197 14.7837 17.8197 12C17.8197 9.2163 15.8654 6.88906 13.2539 6.31549L13.2539 0L23.2098 4.34075V10.8988C23.2098 16.941 18.9662 22.5986 13.2539 24L13.2539 17.6845Z"
+            fill="#D539EE" />
+        <circle cx="12" cy="12" r="3.5" fill="#D539EE" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M13.2442 21V17.6846C15.8556 17.111 17.8099 14.7838 17.8099 12.0001C17.8099 9.21637 15.8556 6.88913 13.2442 6.31555V3.00007C12.5098 3.00005 12.5053 3 12.0098 3C11.658 3 11.0098 3 10.7361 3.00007L10.7361 6.31546C8.12446 6.88888 6.16992 9.21622 6.16992 12.0001C6.16992 14.7839 8.12446 17.1113 10.7361 17.6847V21C11.0098 21 11.5098 21 12.0098 21C12.5053 21 12.5098 21 13.2442 21ZM11.9902 15.5001C13.9232 15.5001 15.4902 13.9331 15.4902 12.0001C15.4902 10.0671 13.9232 8.50007 11.9902 8.50007C10.0572 8.50007 8.49023 10.0671 8.49023 12.0001C8.49023 13.9331 10.0572 15.5001 11.9902 15.5001Z"
+            fill="white" />
+    </g>
+    <defs>
+        <clipPath id="clip0_29053_183063">
+            <rect width="24" height="24" fill="white" />
+        </clipPath>
+    </defs>
 </svg>
--- a/src/components/views/elements/Pill.tsx
+++ b/src/components/views/elements/Pill.tsx
@ -0,0 +1,194 @@
+/*
+Copyright 2017 - 2019, 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, { ReactElement } from "react";
+import classNames from "classnames";
+import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+import MatrixClientContext from "matrix-react-sdk/src/contexts/MatrixClientContext";
+import { usePermalink } from "matrix-react-sdk/src/hooks/usePermalink";
+import RoomAvatar from "matrix-react-sdk/src/components/views/avatars/RoomAvatar";
+import MemberAvatar from "matrix-react-sdk/src/components/views/avatars/MemberAvatar";
+import { _t } from "matrix-react-sdk/src/languageHandler";
+import { Icon as LinkIcon } from "matrix-react-sdk/res/img/element-icons/room/composer/link.svg";
+import { Icon as UserIcon } from "matrix-react-sdk/res/img/compound/user.svg";
+
+import { Icon as TokenGatedRoomIcon } from "../../../../res/themes/superhero/img/icons/tokengated-room.svg";
+import { isVerifiedRoom } from "../../../hooks/useVerifiedRoom";
+import { Icon as CommunityRoomIcon } from "../../../../res/themes/superhero/img/icons/community-room.svg";
+import { getSafeRoomName } from "../../../hooks/useRoomName";
+
+export enum PillType {
+    UserMention = "TYPE_USER_MENTION",
+    RoomMention = "TYPE_ROOM_MENTION",
+    AtRoomMention = "TYPE_AT_ROOM_MENTION", // '@room' mention
+    EventInSameRoom = "TYPE_EVENT_IN_SAME_ROOM",
+    EventInOtherRoom = "TYPE_EVENT_IN_OTHER_ROOM",
+}
+
+export const pillRoomNotifPos = (text: string | null): number => {
+    return text?.indexOf("@room") ?? -1;
+};
+
+export const pillRoomNotifLen = (): number => {
+    return "@room".length;
+};
+
+const linkIcon = <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar" />;
+
+const PillRoomAvatar: React.FC<{
+    shouldShowPillAvatar: boolean;
+    room: Room | null;
+}> = ({ shouldShowPillAvatar, room }) => {
+    if (!shouldShowPillAvatar) {
+        return null;
+    }
+
+    if (room) {
+        return <RoomAvatar room={room} size="16px" aria-hidden="true" />;
+    }
+    return linkIcon;
+};
+
+const PillMemberAvatar: React.FC<{
+    shouldShowPillAvatar: boolean;
+    member: RoomMember | null;
+}> = ({ shouldShowPillAvatar, member }) => {
+    if (!shouldShowPillAvatar) {
+        return null;
+    }
+
+    if (member) {
+        return <MemberAvatar member={member} size="16px" aria-hidden="true" hideTitle />;
+    }
+    return <UserIcon className="mx_Pill_UserIcon mx_BaseAvatar" />;
+};
+
+export interface PillProps {
+    // The Type of this Pill. If url is given, this is auto-detected.
+    type?: PillType;
+    // The URL to pillify (no validation is done)
+    url?: string;
+    /** Whether the pill is in a message. It will act as a link then. */
+    inMessage?: boolean;
+    // The room in which this pill is being rendered
+    room?: Room;
+    // Whether to include an avatar in the pill
+    shouldShowPillAvatar?: boolean;
+}
+
+export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => {
+    const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({
+        room,
+        type: propType,
+        url,
+    });
+
+    if (!type || !text) {
+        return null;
+    }
+
+    const classes = classNames("mx_Pill", {
+        mx_AtRoomPill: type === PillType.AtRoomMention,
+        mx_RoomPill: type === PillType.RoomMention,
+        mx_SpacePill: type === "space" || targetRoom?.isSpaceRoom(),
+        mx_UserPill: type === PillType.UserMention,
+        mx_UserPill_me: resourceId === MatrixClientPeg.safeGet().getUserId(),
+        mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom,
+    });
+
+    let avatar: ReactElement | null = null;
+    let pillText: string | null = text;
+
+    switch (type) {
+        case PillType.EventInOtherRoom:
+            {
+                avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
+                pillText = _t("pill|permalink_other_room", {
+                    room: text,
+                });
+            }
+            break;
+        case PillType.EventInSameRoom:
+            {
+                if (event) {
+                    avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
+                    pillText = _t("pill|permalink_this_room", {
+                        user: text,
+                    });
+                } else {
+                    avatar = linkIcon;
+                    pillText = _t("common|message");
+                }
+            }
+            break;
+        case PillType.AtRoomMention:
+        case PillType.RoomMention:
+        case "space":
+            avatar = <PillRoomAvatar shouldShowPillAvatar={shouldShowPillAvatar} room={targetRoom} />;
+            break;
+        case PillType.UserMention:
+            avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
+            break;
+        default:
+            return null;
+    }
+
+    const isAnchor = !!inMessage && !!url;
+    const { isCommunityRoom, isTokenGatedRoom } = isVerifiedRoom(pillText);
+
+    const renderPillText = (): ReactElement => {
+        return (
+            <>
+                {isCommunityRoom ? (
+                    <>
+                        <CommunityRoomIcon className="sh_RoomTokenGatedRoomIcon" style={{ marginLeft: "5px" }} />
+                        <span>$</span>
+                    </>
+                ) : null}
+                {isTokenGatedRoom ? (
+                    <TokenGatedRoomIcon className="sh_RoomTokenGatedRoomIcon" style={{ marginLeft: "5px" }} />
+                ) : null}
+                <span className="mx_Pill_text">{getSafeRoomName(pillText || "")}</span>
+            </>
+        );
+    };
+    return (
+        <bdi>
+            <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
+                <Tooltip
+                    label={resourceId ?? ""}
+                    open={resourceId ? undefined : false}
+                    side="right"
+                    isTriggerInteractive={isAnchor}
+                >
+                    {isAnchor ? (
+                        <a className={classes} href={url} onClick={onClick}>
+                            {avatar}
+                            {renderPillText()}
+                        </a>
+                    ) : (
+                        <span className={classes}>
+                            {avatar}
+                            {renderPillText()}
+                        </span>
+                    )}
+                </Tooltip>
+            </MatrixClientContext.Provider>
+        </bdi>
+    );
+};
--- a/src/components/views/elements/RoomName.tsx
+++ b/src/components/views/elements/RoomName.tsx
@ -55,7 +55,12 @@ export const RoomName = ({ room, children, maxLength }: IProps): JSX.Element =>
    const renderRoomName = useCallback(
        () => (
            <span className="sh_RoomTokenGatedRoom">
-                {isCommunityRoom && <CommunityRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
+                {isCommunityRoom && (
+                    <>
+                        <CommunityRoomIcon className="sh_RoomTokenGatedRoomIcon" />
+                        <span>$</span>
+                    </>
+                )}
                {isTokenGatedRoom && <TokenGatedRoomIcon className="sh_RoomTokenGatedRoomIcon" />}
                <span dir="auto">{truncatedRoomName}</span>
                {roomUsers?.length && !isTokenGatedRoom && !isCommunityRoom ? (