Chat popup (#3098)

* add pop out chat button

* add button to close chat popup

* chat is hidden on main interface when a popup chat is open

* NameChangeEvent renames clients with the given id

if you have two or more owncast windows (or pop-out chats) open, changing your
name in 1 client is reflected in all clients.

* replace isChatVisible booleans with chatState enum

* update stories to use ChatState

* fix build tests

---------

Co-authored-by: janWilejan <>

web/components/layouts/Main/Main.stories.tsx

@@ -6,7 +6,8 @@ import {
   accessTokenAtom,
   appStateAtom,
   chatMessagesAtom,
-  chatVisibleToggleAtom,
+  ChatState,
+  chatStateAtom,
   clientConfigStateAtom,
   currentUserAtom,
   fatalErrorStateAtom,
@@ -68,7 +69,7 @@ const initializeDefaultState = (mutableState: MutableSnapshot) => {
     chatAvailable: false,
   });
   mutableState.set(clientConfigStateAtom, defaultClientConfig);
-  mutableState.set(chatVisibleToggleAtom, true);
+  mutableState.set(chatStateAtom, ChatState.VISIBLE);
   mutableState.set(accessTokenAtom, 'token');
   mutableState.set(currentUserAtom, {
     ...spidermanUser,