Add placeholders for moderation actions

web/components/chat/ChatModerationActionMenu.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {}
+
+export default function ChatModerationActionMenu(props: Props) {
+  return <div>Moderation popup menu goes here</div>;
+}

web/components/chat/ChatModerationDetailsModal.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {}
+
+export default function ChatModerationDetailsModal(props: Props) {
+  return <div>Moderation details modal goes here</div>;
+}

web/stories/ChatModerationActionMenu.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu';
+
+export default {
+  title: 'owncast/Chat/Moderation menu',
+  component: ChatModerationActionMenu,
+  parameters: {
+    docs: {
+      description: {
+        component: `This should be a popup that is activated from a user's chat message. It should have actions to:
+- Remove single message
+- Ban user completely
+- Open modal to see user details
+        `,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatModerationActionMenu>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatModerationActionMenu> = args => (
+  <ChatModerationActionMenu />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatModerationDetailsModal.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatModerationDetailsModal from '../components/chat/ChatModerationDetailsModal';
+
+export default {
+  title: 'owncast/Chat/Moderation modal',
+  component: ChatModerationDetailsModal,
+  parameters: {
+    docs: {
+      description: {
+        component: `This should be a modal that gives the moderator more details about the user such as:
+- When the user was created
+- Other names they've used
+- If they're authenticated, and using what method (IndieAuth, FediAuth)
+`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ChatModerationDetailsModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatModerationDetailsModal> = args => (
+  <ChatModerationDetailsModal />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatModerationNotification.stories.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatModeratorNotification from '../components/chat/ChatModeratorNotification';
-
-export default {
-  title: 'owncast/Chat/Messages/Moderator notification',
-  component: ChatModeratorNotification,
-  parameters: {},
-} as ComponentMeta<typeof ChatModeratorNotification>;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatModeratorNotification> = args => (
-  <ChatModeratorNotification />
-);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});