📱(front) improve control bar responsive

We want the bottom bar to stay at the center of the screen.

Co-authored-by: Nathan Vasse <nathan.vasse@gmail.com>

src/frontend/src/App.tsx

@@ -30,7 +30,7 @@ function App() {
               <Route component={NotFoundScreen} />
             </Switch>
           </Layout>
-          <ReactQueryDevtools initialIsOpen={false} />
+          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -0,0 +1,37 @@
+import { ToggleButton } from '@/primitives'
+import { RiQuestionLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { Crisp } from 'crisp-sdk-web'
+import { useEffect, useState } from 'react'
+
+export const SupportToggle = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
+
+  useEffect(() => {
+    Crisp.chat.onChatOpened(() => {
+      setIsOpened(true)
+    })
+    Crisp.chat.onChatClosed(() => {
+      setIsOpened(false)
+    })
+    return () => {
+      Crisp.chat.offChatOpened()
+      Crisp.chat.offChatClosed()
+    }
+  }, [])
+
+  return (
+    <ToggleButton
+      square
+      variant="primaryTextDark"
+      tooltip={t('support')}
+      aria-label={t('support')}
+      isSelected={isOpened}
+      onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())}
+      data-attr="controls-support"
+    >
+      <RiQuestionLine />
+    </ToggleButton>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -14,6 +14,7 @@ import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
 import { LeaveButton } from '../components/controls/LeaveButton'
 import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
 import { css } from '@/styled-system/css'
+import { SupportToggle } from '@/features/rooms/livekit/components/controls/SupportToggle.tsx'
 
 /** @public */
 export type ControlBarControls = {
@@ -83,28 +84,32 @@ export function ControlBar({
   return (
     <div
       className={css({
-        alignItems: 'center',
+        width: '100vw',
-        justifyContent: 'space-between',
+        display: 'flex',
-        padding: '.75rem',
-        maxHeight: 'var(--lk-control-bar-height)',
-        height: '80px',
         position: 'absolute',
+        padding: '1.125rem',
         bottom: 0,
         left: 0,
         right: 0,
-        display: 'flex',
       })}
     >
       <div
         className={css({
           display: 'flex',
-          gap: '.5rem',
+          justifyContent: 'flex-start',
+          flex: '1 1 33%',
           alignItems: 'center',
-          lg: {
+          gap: '0.5rem',
-            position: 'absolute',
+          marginLeft: '0.5rem',
-            left: '50%',
+        })}
-            transform: 'translateX(-50%)',
+      ></div>
-          },
+      <div
+        className={css({
+          flex: '1 1 33%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '0.65rem',
         })}
       >
         <SelectToggleDevice
@@ -142,17 +147,16 @@ export function ControlBar({
       <div
         className={css({
           display: 'flex',
-          gap: '.5rem',
+          justifyContent: 'flex-end',
+          flex: '1 1 33%',
           alignItems: 'center',
-          marginRight: '6.25rem',
+          gap: '0.5rem',
-          lg: {
+          paddingRight: '0.25rem',
-            position: 'absolute',
-            right: 0,
-          },
         })}
       >
         <ChatToggle />
         <ParticipantsToggle />
+        <SupportToggle />
       </div>
     </div>
   )

src/frontend/src/locales/de/rooms.json

@@ -70,7 +70,8 @@
     "participants": {
       "open": "",
       "closed": ""
-    }
+    },
+    "support": ""
   },
   "options": {
     "buttonLabel": "",

src/frontend/src/locales/en/rooms.json

@@ -69,7 +69,8 @@
     "participants": {
       "open": "Hide everyone",
       "closed": "See everyone"
-    }
+    },
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "More Options",

src/frontend/src/locales/fr/rooms.json

@@ -69,7 +69,8 @@
     "participants": {
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
-    }
+    },
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "Plus d'options",

src/frontend/src/styles/index.css

@@ -25,3 +25,7 @@ body,
     transition: none !important;
   }
 }
+
+body:has(.lk-video-conference) #crisp-chatbox > div > a {
+  display: none !important;
+}