✨(frontend) introduce 'effects' menu item

Increased all icons size, as they looked a bit small on screen.
Introduce a new component separator, to organize menu items
in section.

Work in progress, added the 'effects' item, which triggers no
action yet.

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',
       }}
     >
-      <MenuItem
-        href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
-        target="_blank"
-        className={menuItemRecipe({ icon: true })}
-      >
-        <RiQuestionLine size={18} />
-        {t('support')}
-      </MenuItem>
-      <MenuItem
-        href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-        target="_blank"
-        className={menuItemRecipe({ icon: true })}
-      >
-        <RiFeedbackLine size={18} />
-        {t('feedbacks')}
-      </MenuItem>
-      <MenuItem
-        className={menuItemRecipe({ icon: true })}
-        onAction={() => onOpenDialog('settings')}
-      >
-        <RiSettings3Line size={18} />
-        {t('settings')}
-      </MenuItem>
+      <Section>
+        <MenuItem
+          onAction={() => console.log('open dialog')}
+          className={menuItemRecipe({ icon: true })}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
+      </Section>
+      <Separator />
+      <Section>
+        <MenuItem
+          href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+          target="_blank"
+          className={menuItemRecipe({ icon: true })}
+        >
+          <RiQuestionLine size={20} />
+          {t('support')}
+        </MenuItem>
+        <MenuItem
+          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+          target="_blank"
+          className={menuItemRecipe({ icon: true })}
+        >
+          <RiFeedbackLine size={20} />
+          {t('feedbacks')}
+        </MenuItem>
+        <MenuItem
+          className={menuItemRecipe({ icon: true })}
+          onAction={() => onOpenDialog('settings')}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
+      </Section>
     </RACMenu>
   )
 }

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

@@ -69,7 +69,8 @@
       "feedbacks": "",
       "support": "",
       "settings": "",
-      "username": ""
+      "username": "",
+      "effects": ""
     }
   },
   "participants": {

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": {

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": {

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',
+  },
+})