More accurately hide/show and track chat state

web/components/ui/Header/Header.tsx

@@ -1,6 +1,8 @@
 import { Layout } from 'antd';
+import { useRecoilValue } from 'recoil';
 import { ChatState } from '../../../interfaces/application-state';
 import { OwncastLogo, UserDropdown } from '../../common';
+import { chatStateAtom } from '../../stores/ClientConfigStore';
 import s from './Header.module.scss';
 
 const { Header } = Layout;
@@ -10,13 +12,15 @@ interface Props {
 }
 
 export default function HeaderComponent({ name = 'Your stream title' }: Props) {
+  const chatState = useRecoilValue<ChatState>(chatStateAtom);
+
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
         <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown username="fillmein" chatState={ChatState.Available} />
+      <UserDropdown chatState={chatState} />
     </Header>
   );
 }