Add user chat message badges. Closes #1988

web/stories/ChatUserBadge.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatUserBadge from '../components/chat/ChatUserMessage/ChatUserBadge';
+
+export default {
+  title: 'owncast/Chat/Messages/User Flag',
+  component: ChatUserBadge,
+  argTypes: {
+    userColor: {
+      options: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof ChatUserBadge>;
+
+const Template: ComponentStory<typeof ChatUserBadge> = args => <ChatUserBadge {...args} />;
+
+export const Moderator = Template.bind({});
+Moderator.args = {
+  badge: 'mod',
+  userColor: '5',
+};
+
+export const Authenticated = Template.bind({});
+Authenticated.args = {
+  badge: 'auth',
+  userColor: '6',
+};

web/stories/ChatUserMessage.stories.tsx

@@ -92,6 +92,7 @@ export const FromAuthenticatedUser = Template.bind({});
 FromAuthenticatedUser.args = {
   message: authenticatedUserMessage,
   showModeratorMenu: false,
+  isAuthorAuthenticated: true,
 };
 
 export const WithStringHighlighted = Template.bind({});