Refactor app state to be a state machine with access selectors

web/components/ui/Header/Header.tsx

@@ -1,8 +1,5 @@
 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;
@@ -12,15 +9,13 @@ 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 chatState={chatState} />
+      <UserDropdown />
     </Header>
   );
 }