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', }} > - - - {t('support')} - - - - {t('feedbacks')} - - onOpenDialog('settings')} - > - - {t('settings')} - +
+ console.log('open dialog')} + className={menuItemRecipe({ icon: true })} + > + + {t('effects')} + +
+ +
+ + + {t('support')} + + + + {t('feedbacks')} + + onOpenDialog('settings')} + > + + {t('settings')} + +
) } 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', + }, +})