Handle centralized app state and registration + chat history

web/components/ui/Content/Content.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 import { Layout, Row, Col, Tabs } from 'antd';
-import { clientConfigState } from '../../stores/ClientConfigStore';
+import { clientConfigStateAtom } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
 import CustomPageContent from '../../CustomPageContent';
 import OwncastPlayer from '../../video/OwncastPlayer';
@@ -11,7 +11,7 @@ const { TabPane } = Tabs;
 const { Content } = Layout;
 
 export default function FooterComponent() {
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { extraPageContent } = clientConfig;
 
   return (

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,18 +1,25 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
+import { useEffect } from 'react';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatContainer from '../../chat/ChatContainer';
-import { chatMessages, chatVisibility as chatVisibilityAtom } from '../../stores/ClientConfigStore';
-import { ChatVisibilityState } from '../../../interfaces/application-state';
+import {
+  chatMessagesAtom,
+  chatVisibilityAtom,
+  chatStateAtom,
+} from '../../stores/ClientConfigStore';
+import { ChatState, ChatVisibilityState } from '../../../interfaces/application-state';
 import ChatTextField from '../../chat/ChatTextField';
 
 export default function Sidebar() {
-  const messages = useRecoilValue<ChatMessage[]>(chatMessages);
+  const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatVisibility = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
+  const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
   return (
     <Sider
       collapsed={chatVisibility === ChatVisibilityState.Hidden}
+      collapsedWidth={0}
       width={300}
       style={{
         position: 'fixed',
@@ -21,7 +28,7 @@ export default function Sidebar() {
         bottom: 0,
       }}
     >
-      <ChatContainer messages={messages} />
+      <ChatContainer messages={messages} state={chatState} />
       <ChatTextField />
     </Sider>
   );