Fix user settings dropdown story not rendering. Closes #2350

web/components/common/UserDropdown/UserDropdown.stories.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { UserDropdown } from './UserDropdown';
+import { CurrentUser } from '../../../interfaces/current-user';
+import { currentUserAtom } from '../../stores/ClientConfigStore';
 
 export default {
   title: 'owncast/Components/User settings menu',
@@ -10,20 +12,30 @@ export default {
 } as ComponentMeta<typeof UserDropdown>;
 
 // This component uses Recoil internally so wrap it in a RecoilRoot.
-const Example = args => (
+const Example = args => {
-  <RecoilRoot>
+  const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
-    <UserDropdown {...args} />
+
-  </RecoilRoot>
+  useEffect(
+    () =>
+      setCurrentUser({
+        id: '1',
+        displayName: 'Test User',
+        displayColor: 3,
+        isModerator: false,
+      }),
+    [],
   );
 
-const Template: ComponentStory<typeof UserDropdown> = args => <Example {...args} />;
+  return <UserDropdown {...args} />;
+};
+
+const Template: ComponentStory<typeof UserDropdown> = args => (
+  <RecoilRoot>
+    <Example {...args} />
+  </RecoilRoot>
+);
 
 export const ChatEnabled = Template.bind({});
 ChatEnabled.args = {
   username: 'test-user',
 };
-
-export const ChatDisabled = Template.bind({});
-ChatDisabled.args = {
-  username: 'test-user',
-};