Add standalone join message with user badge

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -11,8 +11,9 @@ import s from './ChatContainer.module.scss';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { ChatTextField, ChatUserMessage } from '..';
 import ChatModeratorNotification from '../ChatModeratorNotification/ChatModeratorNotification';
-import ChatActionMessage from '../ChatAction/ChatActionMessage';
+// import ChatActionMessage from '../ChatAction/ChatActionMessage';
 import ChatSystemMessage from '../ChatSystemMessage/ChatSystemMessage';
+import ChatJoinMessage from '../ChatJoinMessage/ChatJoinMessage';
 
 interface Props {
   messages: ChatMessage[];
@@ -53,10 +54,12 @@ export default function ChatContainer(props: Props) {
   const getUserJoinedMessage = (message: ChatMessage) => {
     const { user } = message;
     const { displayName, displayColor } = user;
-    const color = `var(--theme-user-colors-${displayColor})`;
+    const isAuthorModerator = checkIsModerator(message);
     return (
-      <ChatActionMessage
-        body={`<span style="color: ${color}">${displayName}</span> joined the chat.`}
+      <ChatJoinMessage
+        displayName={displayName}
+        userColor={displayColor}
+        isAuthorModerator={isAuthorModerator}
       />
     );
   };

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -0,0 +1,4 @@
+.join {
+  margin: 5px;
+  text-align: center;
+}

web/components/chat/ChatJoinMessage/ChatJoinMessage.tsx

@@ -0,0 +1,27 @@
+import s from './ChatJoinMessage.module.scss';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
+
+interface Props {
+  isAuthorModerator: boolean;
+  userColor: number;
+  displayName: string;
+}
+
+export default function ChatJoinMessage(props: Props) {
+  const { isAuthorModerator, userColor, displayName } = props;
+  const color = `var(--theme-user-colors-${userColor})`;
+
+  return (
+    <div className={s.join}>
+      <span style={{ color }}>
+        {displayName}
+        {isAuthorModerator && (
+          <span>
+            <ChatUserBadge badge="mod" userColor={userColor} />
+          </span>
+        )}
+      </span>{' '}
+      joined the chat.
+    </div>
+  );
+}

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -7,7 +7,7 @@ import s from './ChatUserMessage.module.scss';
 import { formatTimestamp } from './messageFmt';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatModerationActionMenu from '../ChatModerationActionMenu/ChatModerationActionMenu';
-import ChatUserBadge from './ChatUserBadge';
+import ChatUserBadge from '../ChatUserBadge/ChatUserBadge';
 
 interface Props {
   message: ChatMessage;

web/stories/ChatJoinMessage.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatJoinMessage from '../components/chat/ChatJoinMessage/ChatJoinMessage';
+import Mock from './assets/mocks/chatmessage-action.png';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat Join',
+  component: ChatJoinMessage,
+  argTypes: {
+    userColor: {
+      options: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+    },
+    docs: {
+      description: {
+        component: `This is the message design an action takes place, such as a join or a name change.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatJoinMessage>;
+
+const Template: ComponentStory<typeof ChatJoinMessage> = args => <ChatJoinMessage {...args} />;
+
+export const Regular = Template.bind({});
+Regular.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: false,
+  userColor: 3,
+};
+
+export const Moderator = Template.bind({});
+Moderator.args = {
+  displayName: 'RandomChatter',
+  isAuthorModerator: true,
+  userColor: 2,
+};

web/stories/ChatUserBadge.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatUserBadge from '../components/chat/ChatUserMessage/ChatUserBadge';
+import ChatUserBadge from '../components/chat/ChatUserBadge/ChatUserBadge';
 
 export default {
   title: 'owncast/Chat/Messages/User Flag',