✨(frontend) add quick action to open recording menu

Implement quick access button to open the recording menu directly,
providing faster navigation to recording controls and settings.

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

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

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

@@ -0,0 +1,32 @@
+import { RiRecordCircleLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { RecordingMode, useHasRecordingAccess } from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
+
+export const ScreenRecordingMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { isScreenRecordingOpen, openScreenRecording, toggleTools } =
+    useSidePanel()
+
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )
+
+  if (!hasScreenRecordingAccess) return null
+
+  return (
+    <MenuItem
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+      onAction={() =>
+        !isScreenRecordingOpen ? openScreenRecording() : toggleTools()
+      }
+    >
+      <RiRecordCircleLine size={20} />
+      {t('screenRecording')}
+    </MenuItem>
+  )
+}

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

@@ -206,6 +206,7 @@
     "items": {
       "feedback": "Feedback geben",
       "settings": "Einstellungen",
+      "screenRecording": "Aufzeichnung",
       "username": "Ihren Namen aktualisieren",
       "effects": "Effekte anwenden",
       "switchCamera": "Kamera wechseln",

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

@@ -206,6 +206,7 @@
     "items": {
       "feedback": "Give us feedback",
       "settings": "Settings",
+      "screenRecording": "Screen recording",
       "username": "Update Your Name",
       "effects": "Apply effects",
       "switchCamera": "Switch camera",

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

@@ -206,6 +206,7 @@
     "items": {
       "feedback": "Partager votre avis",
       "settings": "Paramètres",
+      "screenRecording": "Enregistrement",
       "username": "Choisir votre nom",
       "effects": "Effets d'arrière-plan",
       "switchCamera": "Changer de caméra",

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

@@ -206,6 +206,7 @@
     "items": {
       "feedback": "Geef ons feedback",
       "settings": "Instellingen",
+      "screenRecording": "Schermopname",
       "username": "Verander uw naam",
       "effects": "Pas effecten toe",
       "switchCamera": "Selecteer camera",