Add role mentions

Nerimity · Dec 9, 2024 · 70cf93d · 70cf93d
1 parent d3a4707
commit 70cf93d
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 28 deletions.
diff --git a/src/chat-api/Bitwise.ts b/src/chat-api/Bitwise.ts
@@ -190,6 +190,12 @@ export const ROLE_PERMISSIONS = {
     bit: 128,
     icon: "edit",
   },
+  MENTION_ROLES: {
+    name: "Mention Roles",
+    bit: 256,
+    description: "Allow users to mention roles",
+    icon: "alternate_email",
+  },
 };
 
 export const hasBit = (permissions: number, bit: number) => {

diff --git a/src/chat-api/RawData.ts b/src/chat-api/RawData.ts
@@ -58,6 +58,7 @@ export interface RawMessage {
   }[];
 
   buttons: RawMessageButton[];
+  roleMentions: RawServerRole[];
 }
 
 export interface RawMessageButton {

diff --git a/src/chat-api/events/messageEvents.ts b/src/chat-api/events/messageEvents.ts
@@ -14,6 +14,7 @@ import useServerMembers from "../store/useServerMembers";
 import { ROLE_PERMISSIONS } from "../Bitwise";
 import useFriends from "../store/useFriends";
 import { pushMessageNotification } from "@/components/in-app-notification-previews/useInAppNotificationPreviews";
+import useServers from "../store/useServers";
 
 export function onMessageCreated(payload: {
   socketId: string;
@@ -42,13 +43,18 @@ export function onMessageCreated(payload: {
   const users = useUsers();
   const account = useAccount();
   const friends = useFriends();
+  const servers = useServers();
   const { hasFocus } = useWindowProperties();
 
   const accountUser = account.user();
 
   const hasBlockedRecipient =
     friends.get(payload.message.createdBy.id)?.status === FriendStatus.BLOCKED;
 
+  const member = members.get(channel?.serverId!, payload.message.createdBy.id);
+  const selfMember = members.get(channel?.serverId!, accountUser?.id!);
+  const server = servers.get(channel?.serverId!);
+
   batch(() => {
     channel?.updateLastMessaged(payload.message.createdAt);
 
@@ -68,10 +74,6 @@ export function onMessageCreated(payload: {
       if (hasBlockedRecipient) return false;
       const everyoneMentioned = payload.message.content?.includes("[@:e]");
       if (everyoneMentioned && channel?.serverId) {
-        const member = members.get(
-          channel.serverId,
-          payload.message.createdBy.id
-        );
         const hasPerm =
           member?.isServerCreator() ||
           member?.hasPermission(ROLE_PERMISSIONS.MENTION_EVERYONE);
@@ -87,6 +89,14 @@ export function onMessageCreated(payload: {
 
       if (quoteMention) return true;
 
+      const isRoleMentioned =
+        member?.hasPermission(ROLE_PERMISSIONS.MENTION_ROLES) &&
+        payload.message.roleMentions.find(
+          (r) => server?.defaultRoleId !== r.id && selfMember?.hasRole(r.id)
+        );
+
+      if (isRoleMentioned) return true;
+
       const replyMention =
         payload.message.mentionReplies &&
         payload.message.replyMessages.find(

diff --git a/src/common/Sound.ts b/src/common/Sound.ts
@@ -84,9 +84,13 @@ function getCustomSound(type: "MESSAGE" | "MESSAGE_MENTION") {
 }
 
 export function isMentioned(message: RawMessage, serverId?: string) {
-  const { account, serverMembers } = useStore();
+  const { account, serverMembers, servers } = useStore();
   const userId = account.user()?.id;
 
+  const member = serverMembers.get(serverId!, message.createdBy.id);
+  const selfMember = serverMembers.get(serverId!, userId!);
+  const server = servers.get(serverId!);
+
   const mentionedMe = message.mentions?.find(
     (m) => m.id === account.user()?.id
   );
@@ -104,13 +108,18 @@ export function isMentioned(message: RawMessage, serverId?: string) {
       (m) => m.replyToMessage?.createdBy?.id === userId
     );
 
-  if (quoteMention || replyMention) {
+  const isRoleMentioned =
+    member?.hasPermission(ROLE_PERMISSIONS.MENTION_ROLES) &&
+    message.roleMentions.find(
+      (r) => r.id !== server?.defaultRoleId && selfMember?.hasRole(r.id)
+    );
+
+  if (quoteMention || replyMention || isRoleMentioned) {
     return true;
   }
 
   const everyoneMentioned = message.content?.includes("[@:e]");
   if (everyoneMentioned && serverId) {
-    const member = serverMembers.get(serverId, message.createdBy.id);
     const hasPerm =
       member?.isServerCreator() ||
       member?.hasPermission(ROLE_PERMISSIONS.MENTION_EVERYONE);

diff --git a/src/components/Markup.tsx b/src/components/Markup.tsx
@@ -34,6 +34,7 @@ import { GenericMention } from "./markup/GenericMention";
 import { TimestampMention, TimestampType } from "./markup/TimestampMention";
 import { Dynamic } from "solid-js/web";
 import { Post } from "@/chat-api/store/usePosts";
+import useServerRoles from "@/chat-api/store/useServerRoles";
 
 export interface Props {
   text: string;
@@ -43,6 +44,7 @@ export interface Props {
   isQuote?: boolean;
   animateEmoji?: boolean;
   class?: string;
+  serverId?: string;
 }
 
 type RenderContext = {
@@ -72,6 +74,7 @@ type CustomEntity = Entity & { type: "custom" };
 function transformCustomEntity(entity: CustomEntity, ctx: RenderContext) {
   const channels = useChannels();
   const users = useUsers();
+  const serverRoles = useServerRoles();
   const type = entity.params.type;
   const expr = sliceText(ctx, entity.innerSpan, { countText: false });
   switch (type) {
@@ -83,6 +86,22 @@ function transformCustomEntity(entity: CustomEntity, ctx: RenderContext) {
       }
       break;
     }
+    // Role mentions
+    case "r": {
+      const serverId = ctx.props().serverId;
+
+      if (!serverId) {
+        break;
+      }
+
+      const role = serverRoles.get(serverId, expr);
+      if (role) {
+        ctx.textCount += expr.length;
+        return <GenericMention name={role.name} color={role.hexColor} />;
+      }
+
+      break;
+    }
     case "@": {
       const message = ctx.props().message;
       const user =

diff --git a/src/components/markup/GenericMention.tsx b/src/components/markup/GenericMention.tsx
@@ -1,8 +1,7 @@
-export function GenericMention(props: { name: string }) {
+export function GenericMention(props: { name: string; color?: string }) {
   return (
-    <div
-      class="mention">
+    <div class="mention" style={{ color: props.color }}>
       @{props.name}
     </div>
   );
-}
+}
diff --git a/src/components/message-pane/MessagePane.tsx b/src/components/message-pane/MessagePane.tsx
@@ -80,6 +80,7 @@ import DropDown, { DropDownItem } from "../ui/drop-down/DropDown";
 import { useCustomScrollbar } from "../custom-scrollbar/CustomScrollbar";
 import { t } from "i18next";
 import { RemindersModal } from "../reminders-modal/RemindersModal";
+import useServerRoles from "@/chat-api/store/useServerRoles";
 
 const DeleteMessageModal = lazy(
   () => import("./message-delete-modal/MessageDeleteModal")
@@ -1195,6 +1196,7 @@ function Floating(props: {
 const emojiRegex = /:[\w+-]+:/g;
 const channelMentionRegex = /#([^#]+)#/g;
 const userMentionRegex = /@([^@:]+):([a-zA-Z0-9]+)/g;
+const roleMentionRegex = /@([^#]+)@/g;
 
 function randomIndex(arrLength: number) {
   return Math.floor(Math.random() * arrLength);
@@ -1213,6 +1215,9 @@ export function formatMessage(
   const serverMembers = useServerMembers();
   const account = useAccount();
   const servers = useServers();
+  const roles = useServerRoles();
+
+  const serverRoles = roles.getAllByServerId(serverId!);
 
   const serverChannels = channels.getChannelsByServerId(serverId!);
   const members = serverMembers.array(serverId!);
@@ -1277,6 +1282,11 @@ export function formatMessage(
         return `[@:${member.user().id}]`;
       }
     );
+    finalString = finalString.replace(roleMentionRegex, (match, group) => {
+      const channel = serverRoles.find((c) => c!.name === group);
+      if (!channel) return match;
+      return `[r:${channel.id}]`;
+    });
     // replace channel mentions
     finalString = finalString.replaceAll(
       channelMentionRegex,
@@ -1557,20 +1567,33 @@ function FloatingUserSuggestions(props: {
   textArea?: HTMLTextAreaElement;
 }) {
   const params = useParams<{ serverId?: string; channelId: string }>();
-  const { serverMembers, channels, account } = useStore();
+  const { serverMembers, channels, account, serverRoles, servers } = useStore();
+
+  const server = createMemo(() => servers.get(params.serverId!));
 
   const members = () => serverMembers.array(params.serverId!);
+  const roles = () =>
+    serverRoles
+      .getAllByServerId(params.serverId!)
+      .filter((r) => r.id !== server()?.defaultRoleId);
 
   const hasPermissionToMentionEveryone = () => {
     if (!params.serverId) return false;
     const member = serverMembers.get(params.serverId, account.user()?.id!);
     return member?.hasPermission?.(ROLE_PERMISSIONS.MENTION_EVERYONE);
   };
 
+  const hasPermissionToMentionRoles = () => {
+    if (!params.serverId) return false;
+    const member = serverMembers.get(params.serverId, account.user()?.id!);
+    return member?.hasPermission?.(ROLE_PERMISSIONS.MENTION_ROLES);
+  };
+
   const searchedServerUsers = () =>
     matchSorter(
       [
         ...members(),
+        ...(hasPermissionToMentionRoles() ? roles() : []),
         ...(hasPermissionToMentionEveryone()
           ? [
               {
@@ -1599,14 +1622,14 @@ function FloatingUserSuggestions(props: {
       ] as any[],
       props.search,
       {
-        keys: [(e) => e.user().username, (e) => e.nickname],
+        keys: [(e) => e.user?.().username, (e) => e.nickname, (e) => e.name],
       }
     )
       .slice(0, 10)
       .sort((a, b) => {
         // move all special users to the bottom
-        if (a.user().special && !b.user().special) return 1;
-        if (!a.user().special && b.user().special) return -1;
+        if (a.user?.().special && !b.user?.().special) return 1;
+        if (!a.user?.().special && b.user?.().special) return -1;
         return 0;
       });
 
@@ -1628,14 +1651,15 @@ function FloatingUserSuggestions(props: {
     )
   );
 
-  const onUserClick = (user: User) => {
+  const onUserClick = (user: User & { name?: string }) => {
+    console.log(user);
     if (!props.textArea) return;
     if (!user.tag) {
       appendText(
         params.channelId,
         props.textArea,
         props.search,
-        `${user.username} `
+        `${user.username || user.name}${user.name ? "@" : ""} `
       );
       return;
     }
@@ -1680,7 +1704,7 @@ function UserSuggestionItem(props: {
   nickname?: string;
   onHover: () => void;
   selected: boolean;
-  user: User & { special?: boolean };
+  user: User & { special?: boolean; name?: string };
   onclick(user: User): void;
 }) {
   return (
@@ -1689,12 +1713,16 @@ function UserSuggestionItem(props: {
       selected={props.selected}
       class={styles.suggestionItem}
       onclick={() => props.onclick(props.user)}
+      style={{ color: props.user.name ? props.user.hexColor : undefined }}
     >
-      <Show when={!props.user?.special} fallback={<div>@</div>}>
+      <Show
+        when={props.user.username && !props.user?.special}
+        fallback={<div>@</div>}
+      >
         <Avatar user={props.user} animate={props.selected} size={15} />
       </Show>
       <div class={styles.suggestLabel}>
-        {props.nickname || props.user.username}
+        {props.nickname || props.user.username || props.user.name}
       </div>
       <Show when={props.nickname}>
         <div class={styles.suggestionInfo}>{props.user.username}</div>

diff --git a/src/components/message-pane/message-item/MessageItem.tsx b/src/components/message-pane/message-item/MessageItem.tsx
@@ -249,15 +249,16 @@ const MessageItem = (props: MessageItemProps) => {
   const params = useParams();
   const { serverMembers, servers, account, friends } = useStore();
   const [hovered, setHovered] = createSignal(false);
-  const serverMember = () =>
+  const serverMember = createMemo(() =>
     params.serverId
       ? serverMembers.get(params.serverId, props.message.createdBy.id)
-      : undefined;
+      : undefined
+  );
+  const server = createMemo(() => servers.get(params.serverId!));
 
   const isServerCreator = () =>
-    params.serverId
-      ? servers.get(params.serverId)?.createdById === props.message.createdBy.id
-      : undefined;
+    server()?.createdById === props.message.createdBy.id;
+
   const { createPortal } = useCustomPortal();
 
   const currentTime = props.message?.createdAt;
@@ -294,11 +295,15 @@ const MessageItem = (props: MessageItemProps) => {
     return member.hasPermission?.(ROLE_PERMISSIONS.MENTION_EVERYONE);
   };
 
+  const selfMember = createMemo(() =>
+    serverMembers.get(params.serverId!, account.user()?.id!)
+  );
   createEffect(
     on(
       [
         () => props.message.mentions?.length,
         () => props.message.quotedMessages?.length,
+        () => props.message.roleMentions?.length,
       ],
       () => {
         setTimeout(() => {
@@ -313,10 +318,19 @@ const MessageItem = (props: MessageItemProps) => {
           const isReplied = props.message.replyMessages?.find(
             (m) => m.replyToMessage?.createdBy?.id === account.user()?.id
           );
+          const isRoleMentioned =
+            serverMember()?.hasPermission(ROLE_PERMISSIONS.MENTION_ROLES) &&
+            props.message.roleMentions.find(
+              (r) =>
+                r.id !== server()?.defaultRoleId && selfMember()?.hasRole(r.id)
+            );
           const isMentioned =
             isEveryoneMentioned ||
             props.message.mentions?.find((u) => u.id === account.user()?.id);
-          setIsMentioned(!!isQuoted || !!isMentioned || !!isReplied);
+
+          setIsMentioned(
+            !!isQuoted || !!isMentioned || !!isReplied || !!isRoleMentioned
+          );
           setIsSomeoneMentioned(isSomeoneMentioned);
         });
       }
@@ -442,9 +456,14 @@ const MessageItem = (props: MessageItemProps) => {
 };
 
 const Content = (props: { message: Message; hovered: boolean }) => {
+  const params = useParams<{ serverId?: string }>();
   return (
     <div class={styles.content}>
-      <Markup message={props.message} text={props.message.content || ""} />
+      <Markup
+        message={props.message}
+        text={props.message.content || ""}
+        serverId={params.serverId}
+      />
       <Show
         when={
           !props.message.uploadingAttachment || props.message.content?.trim()

diff --git a/src/components/message-pane/message-log-area/MessageLogArea.tsx b/src/components/message-pane/message-log-area/MessageLogArea.tsx
@@ -120,7 +120,7 @@ export const MessageLogArea = (props: {
     bottomSkeletonHeight
   );
 
-  const channel = () => channels.get(params.channelId!)!;
+  const channel = createMemo(() => channels.get(params.channelId!));
 
   const properties = () => channelProperties.get(params.channelId);
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,7 @@ export interface RawMessage { @@
       }[];
       buttons: RawMessageButton[];
+      roleMentions: RawServerRole[];
     }
     export interface RawMessageButton {
@@ Expand Down @@