diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx
new file mode 100644
index 00000000..65bc98f5
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiAccountBoxLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+
+export const EffectsMenuItem = () => {
+ const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+ const { toggleEffects } = useSidePanel()
+
+ return (
+
+ )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx
new file mode 100644
index 00000000..3f9c91b4
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiMegaphoneLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { GRIST_FORM } from '@/utils/constants'
+
+export const FeedbackMenuItem = () => {
+ const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+
+ return (
+
+ )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
new file mode 100644
index 00000000..8f5f25ee
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
@@ -0,0 +1,34 @@
+import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useFullScreen } from '../../../hooks/useFullScreen'
+
+export const FullScreenMenuItem = () => {
+ const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+ const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
+ useFullScreen()
+
+ if (!isFullscreenAvailable) {
+ return null
+ }
+
+ return (
+
+ )
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
index 68be037a..6d30c0bb 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
@@ -1,28 +1,12 @@
-import {
- RiAccountBoxLine,
- RiFullscreenExitLine,
- RiFullscreenLine,
- RiMegaphoneLine,
- RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useSettingsDialog } from '../SettingsDialogContext'
-import { GRIST_FORM } from '@/utils/constants'
-import { useFullScreen } from '../../../hooks/useFullScreen'
+import { FullScreenMenuItem } from './FullScreenMenuItem'
+import { SettingsMenuItem } from './SettingsMenuItem'
+import { FeedbackMenuItem } from './FeedbackMenuItem'
+import { EffectsMenuItem } from './EffectsMenuItem'
// @todo try refactoring it to use MenuList component
export const OptionsMenuItems = () => {
- const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
- const { toggleEffects } = useSidePanel()
- const { setDialogOpen } = useSettingsDialog()
-
- const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
- useFullScreen()
-
return (
{
}}
>
- {isFullscreenAvailable && (
-
- )}
-
+
+
-
-
+
+
)
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
new file mode 100644
index 00000000..f36cb081
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx
@@ -0,0 +1,20 @@
+import { RiSettings3Line } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSettingsDialog } from '../SettingsDialogContext'
+
+export const SettingsMenuItem = () => {
+ const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+ const { setDialogOpen } = useSettingsDialog()
+
+ return (
+
+ )
+}