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 c00076e5..eec8035d 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,13 +1,15 @@
import { menuItemRecipe } from '@/primitives/menuItemRecipe'
import {
+ RiAccountBoxLine,
RiFeedbackLine,
RiQuestionLine,
RiSettings3Line,
} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
import { useTranslation } from 'react-i18next'
import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
+import { DialogState } from './OptionsButton'
+import { Separator } from '@/primitives/Separator'
// @todo try refactoring it to use MenuList component
export const OptionsMenuItems = ({
@@ -24,29 +26,41 @@ export const OptionsMenuItems = ({
width: '300px',
}}
>
-
-
-
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index eda86274..ab9779e0 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -69,7 +69,8 @@
"feedbacks": "",
"support": "",
"settings": "",
- "username": ""
+ "username": "",
+ "effects": ""
}
},
"participants": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index eaae4617..1a4baa71 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -67,7 +67,8 @@
"feedbacks": "Give us feedbacks",
"support": "Get Help on Tchap",
"settings": "Settings",
- "username": "Update Your Name"
+ "username": "Update Your Name",
+ "effects": "Apply effects"
}
},
"participants": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index da9747ca..587164b0 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -67,7 +67,8 @@
"feedbacks": "Partager votre avis",
"support": "Obtenir de l'aide sur Tchap",
"settings": "Paramètres",
- "username": "Choisir votre nom"
+ "username": "Choisir votre nom",
+ "effects": "Appliquer des effets"
}
},
"participants": {
diff --git a/src/frontend/src/primitives/Separator.tsx b/src/frontend/src/primitives/Separator.tsx
new file mode 100644
index 00000000..811566fe
--- /dev/null
+++ b/src/frontend/src/primitives/Separator.tsx
@@ -0,0 +1,10 @@
+import { styled } from '@/styled-system/jsx'
+import { Separator as RACSeparator } from 'react-aria-components'
+
+export const Separator = styled(RACSeparator, {
+ base: {
+ height: '1px',
+ background: 'gray.400',
+ margin: '4px 0',
+ },
+})