Display keyboard shortcut in UserDropdown chat menu items (#4414)

* Initial plan

* Add keyboard shortcut display to UserDropdown chat menu items

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Successfully implement keyboard shortcut display in UserDropdown chat menu

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Additional instructions

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

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

@@ -3,7 +3,12 @@ import { StoryFn, Meta } from '@storybook/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { UserDropdown } from './UserDropdown';
 import { CurrentUser } from '../../../interfaces/current-user';
-import { currentUserAtom } from '../../stores/ClientConfigStore';
+import {
+  currentUserAtom,
+  appStateAtom,
+  chatStateAtom,
+  ChatState,
+} from '../../stores/ClientConfigStore';
 
 const meta = {
   title: 'owncast/Components/User settings menu',
@@ -16,17 +21,26 @@ export default meta;
 // This component uses Recoil internally so wrap it in a RecoilRoot.
 const Example = args => {
   const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
+  const setAppState = useSetRecoilState(appStateAtom);
+  const setChatState = useSetRecoilState(chatStateAtom);
 
-  useEffect(
+  useEffect(() => {
-    () =>
     setCurrentUser({
       id: '1',
       displayName: 'Test User',
       displayColor: 3,
       isModerator: false,
-      }),
+    });
-    [],
+
-  );
+    setAppState({
+      chatAvailable: true,
+      chatLoading: false,
+      videoAvailable: true,
+      appLoading: false,
+    });
+
+    setChatState(ChatState.VISIBLE);
+  }, []);
 
   return <UserDropdown id="user-menu" {...args} />;
 };

web/components/common/UserDropdown/UserDropdown.tsx

@@ -166,7 +166,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
       'aria-expanded': chatState === ChatState.VISIBLE,
       className: styles.chatToggle, // TODO why do we hide this button on tablets?
       icon: <MessageOutlined />,
-      label: chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat',
+      label: chatState === ChatState.VISIBLE ? 'Hide Chat (c)' : 'Show Chat (c)',
       onClick: toggleChatVisibility,
     } as MenuProps['items'][0]);
   if (canShowChatPopup)