♻️(frontend) allow opening Settings dialog in a controlled way

I am not hundred percent sure it respects @manuhabitela's guidelines,
but for the options menu, I would need to trigger a dialog in a controlled way.

I tried to have the minimal impact on the existing settings dialog.

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

@@ -4,12 +4,14 @@ import {
   RiQuestionLine,
   RiSettings3Line,
 } from '@remixicon/react'
+import { useState } from 'react'
 import { styled } from '@/styled-system/jsx'
 import {
   Menu as RACMenu,
   MenuItem as RACMenuItem,
   Popover as RACPopover,
 } from 'react-aria-components'
+import { SettingsDialog } from '@/features/settings'
 
 // Styled components to be refactored
 const StyledMenu = styled(RACMenu, {
@@ -60,8 +62,9 @@ const StyledPopover = styled(RACPopover, {
 
 export const OptionsMenu = () => {
   const { t } = useTranslation('rooms')
-
+  const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
   return (
+    <>
       <StyledPopover>
         <StyledMenu>
           <StyledMenuItem
@@ -78,11 +81,16 @@ export const OptionsMenu = () => {
             <RiFeedbackLine size={18} />
             {t('options.items.feedbacks')}
           </StyledMenuItem>
-        <StyledMenuItem onAction={() => alert('delete')}>
+          <StyledMenuItem onAction={() => setIsSettingsDialogOpen(true)}>
             <RiSettings3Line size={18} />
             {t('options.items.settings')}
           </StyledMenuItem>
         </StyledMenu>
       </StyledPopover>
+      <SettingsDialog
+        isOpen={isSettingsDialogOpen}
+        onOpenChange={(v) => setIsSettingsDialogOpen(v)}
+      />
+    </>
   )
 }

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -1,12 +1,14 @@
 import { useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { Dialog, Field, H } from '@/primitives'
+import { Dialog, type DialogProps, Field, H } from '@/primitives'
 
-export const SettingsDialog = () => {
+export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
+
+export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
-    <Dialog title={t('dialog.heading')}>
+    <Dialog title={t('dialog.heading')} {...props}>
       <H lvl={2}>{t('language.heading')}</H>
       <Field
         type="select"