💩(frontend) integrate chat into sidepanel and revamp UI

Properly integrate chat into the sidepanel to improve UX and avoid disruptions.
Implement initial styling based on Google Meet's design, with plans for future
enhancements. Some details remain to be refined, such as preserving newline
characters in the message formatter.

This substantial commit refactors and cleans up a significant legacy component.
Chat notifications will be addressed in a separate PR.

Note: While this is a large commit, it represents a major improvement in user
experience (in my opinion).

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -10,6 +10,7 @@ import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useWidgetInteraction } from '../hooks/useWidgetInteraction'
 import { ReactNode } from 'react'
 import { Effects } from './Effects'
+import { Chat } from '../prefabs/Chat'
 
 type StyledSidePanelProps = {
   title: string
@@ -81,12 +82,19 @@ const StyledSidePanel = ({
 )
 
 type PanelProps = {
-  isOpen: boolean;
-  children: React.ReactNode;
-};
+  isOpen: boolean
+  children: React.ReactNode
+}
 
 const Panel = ({ isOpen, children }: PanelProps) => (
-  <div style={{ display: isOpen ? 'block' : 'none' }}>
+  <div
+    style={{
+      display: isOpen ? 'inherit' : 'none',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flexGrow: 1,
+    }}
+  >
     {children}
   </div>
 )
@@ -95,7 +103,8 @@ export const SidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const sidePanel = layoutSnap.sidePanel
 
-  const { isParticipantsOpen, isEffectsOpen } = useWidgetInteraction()
+  const { isParticipantsOpen, isEffectsOpen, isChatOpen } =
+    useWidgetInteraction()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (
@@ -107,16 +116,15 @@ export const SidePanel = () => {
       })}
       isClosed={!sidePanel}
     >
-      <Panel
-        isOpen={isParticipantsOpen}
-      >
+      <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
       </Panel>
-      <Panel
-        isOpen={isEffectsOpen}
-      >
+      <Panel isOpen={isEffectsOpen}>
         <Effects />
       </Panel>
+      <Panel isOpen={isChatOpen}>
+        <Chat />
+      </Panel>
     </StyledSidePanel>
   )
 }