Fill out some more components + add application state enums

web/stories/UserDropdownMenu.stories.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import UserDropdownMenu from '../components/UserDropdownMenu';
+import { ChatState } from '../interfaces/application-state';
 
 export default {
-  title: 'owncast/User settings dropdown menu',
+  title: 'owncast/User settings menu',
   component: UserDropdownMenu,
   parameters: {},
 } as ComponentMeta<typeof UserDropdownMenu>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
+// This component uses Recoil internally so wrap it in a RecoilRoot.
+const Example = args => (
+  <RecoilRoot>
+    <UserDropdownMenu {...args} />
+  </RecoilRoot>
+);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example = Template.bind({});
+const Template: ComponentStory<typeof UserDropdownMenu> = args => <Example {...args} />;
+
+export const ChatEnabled = Template.bind({});
+ChatEnabled.args = {
+  username: 'test-user',
+  chatState: ChatState.Available,
+};
+
+export const ChatDisabled = Template.bind({});
+ChatDisabled.args = {
+  username: 'test-user',
+  chatState: ChatState.NotAvailable,
+};