✨(frontend) move support options to menu for a clearer UI

Relocated support options to the menu to keep the interface concise
and reduce visual clutter.

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -4,6 +4,7 @@ import { FullScreenMenuItem } from './FullScreenMenuItem'
 import { SettingsMenuItem } from './SettingsMenuItem'
 import { FeedbackMenuItem } from './FeedbackMenuItem'
 import { EffectsMenuItem } from './EffectsMenuItem'
+import { SupportMenuItem } from './SupportMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
@@ -20,6 +21,7 @@ export const OptionsMenuItems = () => {
       </MenuSection>
       <Separator />
       <MenuSection>
+        <SupportMenuItem />
         <FeedbackMenuItem />
         <SettingsMenuItem />
       </MenuSection>

src/frontend/src/features/rooms/livekit/components/controls/Options/SupportMenuItem.tsx

@@ -0,0 +1,27 @@
+import { RiQuestionLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { Crisp } from 'crisp-sdk-web'
+import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
+
+export const SupportMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const isSupportEnabled = useIsSupportEnabled()
+
+  if (!isSupportEnabled || !Crisp) {
+    return
+  }
+
+  return (
+    <MenuItem
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+      onAction={() => {
+        Crisp?.chat.open()
+      }}
+    >
+      <RiQuestionLine size={20} />
+      {t('support')}
+    </MenuItem>
+  )
+}

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

@@ -1,60 +0,0 @@
-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'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
-
-export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-
-  const [isOpened, setIsOpened] = useState(() => {
-    return window?.$crisp?.is?.('chat:opened') || false
-  })
-
-  useEffect(() => {
-    if (!Crisp) {
-      return
-    }
-
-    Crisp.chat.onChatOpened(() => {
-      setIsOpened(true)
-    })
-    Crisp.chat.onChatClosed(() => {
-      setIsOpened(false)
-    })
-    return () => {
-      Crisp.chat.offChatOpened()
-      Crisp.chat.offChatClosed()
-    }
-  }, [])
-
-  const isSupportEnabled = useIsSupportEnabled()
-
-  if (!isSupportEnabled) {
-    return
-  }
-
-  return (
-    <ToggleButton
-      square
-      variant="primaryTextDark"
-      tooltip={t('support')}
-      aria-label={t('support')}
-      isSelected={isOpened}
-      onPress={(e) => {
-        if (isOpened) {
-          Crisp.chat.close()
-        } else {
-          Crisp.chat.open()
-        }
-        onPress?.(e)
-      }}
-      data-attr="controls-support"
-      {...props}
-    >
-      <RiQuestionLine />
-    </ToggleButton>
-  )
-}

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

@@ -17,7 +17,6 @@ import {
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
@@ -138,10 +137,6 @@ export function MobileControlBar({
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
-            <SupportToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
             <Button
               onPress={() => {
                 toggleEffects()

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

@@ -1,7 +1,6 @@
 import { css } from '@/styled-system/css'
 import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
 import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
@@ -22,7 +21,6 @@ const NavigationControls = ({
     <ChatToggle onPress={onPress} tooltipType={tooltipType} />
     <ParticipantsToggle onPress={onPress} tooltipType={tooltipType} />
     <TranscriptToggle onPress={onPress} tooltipType={tooltipType} />
-    <SupportToggle onPress={onPress} tooltipType={tooltipType} />
     <AdminToggle onPress={onPress} tooltipType={tooltipType} />
   </>
 )

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

@@ -112,7 +112,6 @@
       "open": "",
       "closed": ""
     },
-    "support": "",
     "moreOptions": "",
     "reactions": {
       "button": "",
@@ -131,7 +130,8 @@
       "fullscreen": {
         "enter": "",
         "exit": ""
-      }
+      },
+      "support": ""
     }
   },
   "effects": {

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

@@ -111,7 +111,6 @@
       "open": "Hide admin",
       "closed": "Open admin"
     },
-    "support": "Support",
     "moreOptions": "More options",
     "reactions": {
       "button": "Send reaction",
@@ -130,7 +129,8 @@
       "fullscreen": {
         "enter": "Fullscreen",
         "exit": "Exit fullscreen mode"
-      }
+      },
+      "support": "Contact support"
     }
   },
   "effects": {

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

@@ -111,7 +111,6 @@
       "open": "Masquer l'admin",
       "closed": "Afficher l'admin"
     },
-    "support": "Support",
     "moreOptions": "Plus d'options",
     "reactions": {
       "button": "Envoyer une réaction",
@@ -130,7 +129,8 @@
       "fullscreen": {
         "enter": "Plein écran",
         "exit": "Quitter le mode plein écran"
-      }
+      },
+      "support": "Contacter l'aide"
     }
   },
   "effects": {

src/frontend/src/locales/nl/rooms.json

@@ -111,7 +111,6 @@
       "open": "Verberg beheerder",
       "closed": "Toon beheerder"
     },
-    "support": "Ondersteuning",
     "moreOptions": "Meer opties",
     "reactions": {
       "button": "Stuur reactie",
@@ -130,7 +129,8 @@
       "fullscreen": {
         "enter": "Volledig scherm",
         "exit": "Stop volledig scherm stand"
-      }
+      },
+      "support": "Contact ondersteuning"
     }
   },
   "effects": {