From 1b52d761680311c1b1342ba8458188099238167a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 22 Jan 2025 14:30:22 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20extract=20menu?=
 =?UTF-8?q?=20items=20into=20individual=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each menu item is now a standalone component, improving:
- Code organization & reusability
- Maintainability by reducing OptionsMenuItems complexity

This breaks down large components.
---
 .../controls/Options/EffectsMenuItem.tsx      | 20 ++++++
 .../controls/Options/FeedbackMenuItem.tsx     | 20 ++++++
 .../controls/Options/FullScreenMenuItem.tsx   | 34 +++++++++
 .../controls/Options/OptionsMenuItems.tsx     | 70 +++----------------
 .../controls/Options/SettingsMenuItem.tsx     | 20 ++++++
 5 files changed, 103 insertions(+), 61 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx

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 (
+    <MenuItem
+      onAction={() => toggleEffects()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiAccountBoxLine size={20} />
+      {t('effects')}
+    </MenuItem>
+  )
+}
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 (
+    <MenuItem
+      href={GRIST_FORM}
+      target="_blank"
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiMegaphoneLine size={20} />
+      {t('feedback')}
+    </MenuItem>
+  )
+}
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 (
+    <MenuItem
+      onAction={() => toggleFullScreen()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      {isCurrentlyFullscreen ? (
+        <>
+          <RiFullscreenExitLine size={20} />
+          {t('fullscreen.exit')}
+        </>
+      ) : (
+        <>
+          <RiFullscreenLine size={20} />
+          {t('fullscreen.enter')}
+        </>
+      )}
+    </MenuItem>
+  )
+}
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 (
     <RACMenu
       style={{
@@ -31,49 +15,13 @@ export const OptionsMenuItems = () => {
       }}
     >
       <MenuSection>
-        {isFullscreenAvailable && (
-          <MenuItem
-            onAction={() => toggleFullScreen()}
-            className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          >
-            {isCurrentlyFullscreen ? (
-              <>
-                <RiFullscreenExitLine size={20} />
-                {t('fullscreen.exit')}
-              </>
-            ) : (
-              <>
-                <RiFullscreenLine size={20} />
-                {t('fullscreen.enter')}
-              </>
-            )}
-          </MenuItem>
-        )}
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
+        <FullScreenMenuItem />
+        <EffectsMenuItem />
       </MenuSection>
       <Separator />
       <MenuSection>
-        <MenuItem
-          href={GRIST_FORM}
-          target="_blank"
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiMegaphoneLine size={20} />
-          {t('feedback')}
-        </MenuItem>
-        <MenuItem
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          onAction={() => setDialogOpen(true)}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
+        <FeedbackMenuItem />
+        <SettingsMenuItem />
       </MenuSection>
     </RACMenu>
   )
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 (
+    <MenuItem
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+      onAction={() => setDialogOpen(true)}
+    >
+      <RiSettings3Line size={20} />
+      {t('settings')}
+    </MenuItem>
+  )
+}