From 4a6b84ed50b9a8cedb79980fa4eaba919766f9e2 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 30 Jun 2025 18:03:20 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(frontend)=20remove=20redundant=20R?=
 =?UTF-8?q?eact=20fragments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove unnecessary React fragments that contain only one child or are direct
children of HTML elements. Simplifies JSX structure by eliminating redundant
wrapper elements that don't add functional value.
---
 .../controls/Options/OptionsButton.tsx        |  24 +-
 .../effects/EffectsConfiguration.tsx          | 218 +++++++++---------
 .../prefabs/ControlBar/DesktopControlBar.tsx  | 118 +++++-----
 src/frontend/src/primitives/Spinner.tsx       |  74 +++---
 4 files changed, 213 insertions(+), 221 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
index 4de38d59..5bf7d92b 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
@@ -7,18 +7,16 @@ export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
 
   return (
-    <>
-      <Menu variant="dark">
-        <Button
-          square
-          variant="primaryDark"
-          aria-label={t('options.buttonLabel')}
-          tooltip={t('options.buttonLabel')}
-        >
-          <RiMoreFill />
-        </Button>
-        <OptionsMenuItems />
-      </Menu>
-    </>
+    <Menu variant="dark">
+      <Button
+        square
+        variant="primaryDark"
+        aria-label={t('options.buttonLabel')}
+        tooltip={t('options.buttonLabel')}
+      >
+        <RiMoreFill />
+      </Button>
+      <OptionsMenuItems />
+    </Menu>
   )
 }
diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index e87ed39f..80b6397b 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -247,9 +247,81 @@ export const EffectsConfiguration = ({
           />
         )}
         {isSupported ? (
-          <>
+          <div>
             <div>
-              <div>
+              <H
+                lvl={3}
+                style={{
+                  marginBottom: '1rem',
+                }}
+                variant="bodyXsBold"
+              >
+                {t('blur.title')}
+              </H>
+              <div
+                className={css({
+                  display: 'flex',
+                  gap: '1.25rem',
+                })}
+              >
+                <ToggleButton
+                  variant="bigSquare"
+                  onPress={async () => {
+                    await clearEffect()
+                  }}
+                  isSelected={!getProcessor()}
+                  isDisabled={processorPendingReveal}
+                >
+                  <RiProhibited2Line />
+                </ToggleButton>
+                <ToggleButton
+                  variant="bigSquare"
+                  aria-label={tooltipLabel(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.LIGHT,
+                  })}
+                  tooltip={tooltipLabel(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.LIGHT,
+                  })}
+                  isDisabled={processorPendingReveal}
+                  onChange={async () =>
+                    await toggleEffect(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })
+                  }
+                  isSelected={isSelected(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.LIGHT,
+                  })}
+                  data-attr="toggle-blur-light"
+                >
+                  <BlurOn />
+                </ToggleButton>
+                <ToggleButton
+                  variant="bigSquare"
+                  aria-label={tooltipLabel(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.NORMAL,
+                  })}
+                  tooltip={tooltipLabel(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.NORMAL,
+                  })}
+                  isDisabled={processorPendingReveal}
+                  onChange={async () =>
+                    await toggleEffect(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })
+                  }
+                  isSelected={isSelected(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.NORMAL,
+                  })}
+                  data-attr="toggle-blur-normal"
+                >
+                  <BlurOnStrong />
+                </ToggleButton>
+              </div>
+              <div
+                className={css({
+                  marginTop: '1.5rem',
+                })}
+              >
                 <H
                   lvl={3}
                   style={{
@@ -257,125 +329,51 @@ export const EffectsConfiguration = ({
                   }}
                   variant="bodyXsBold"
                 >
-                  {t('blur.title')}
+                  {t('virtual.title')}
                 </H>
                 <div
                   className={css({
                     display: 'flex',
                     gap: '1.25rem',
+                    flexWrap: 'wrap',
                   })}
                 >
-                  <ToggleButton
-                    variant="bigSquare"
-                    onPress={async () => {
-                      await clearEffect()
-                    }}
-                    isSelected={!getProcessor()}
-                    isDisabled={processorPendingReveal}
-                  >
-                    <RiProhibited2Line />
-                  </ToggleButton>
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    isDisabled={processorPendingReveal}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.LIGHT,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    data-attr="toggle-blur-light"
-                  >
-                    <BlurOn />
-                  </ToggleButton>
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    isDisabled={processorPendingReveal}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.NORMAL,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    data-attr="toggle-blur-normal"
-                  >
-                    <BlurOnStrong />
-                  </ToggleButton>
-                </div>
-                <div
-                  className={css({
-                    marginTop: '1.5rem',
+                  {[...Array(8).keys()].map((i) => {
+                    const imagePath = `/assets/backgrounds/${i + 1}.jpg`
+                    const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
+                    return (
+                      <ToggleButton
+                        key={i}
+                        variant="bigSquare"
+                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        isDisabled={processorPendingReveal}
+                        onChange={async () =>
+                          await toggleEffect(ProcessorType.VIRTUAL, {
+                            imagePath,
+                          })
+                        }
+                        isSelected={isSelected(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        className={css({
+                          bgSize: 'cover',
+                        })}
+                        style={{
+                          backgroundImage: `url(${thumbnailPath})`,
+                        }}
+                        data-attr={`toggle-virtual-${i}`}
+                      />
+                    )
                   })}
-                >
-                  <H
-                    lvl={3}
-                    style={{
-                      marginBottom: '1rem',
-                    }}
-                    variant="bodyXsBold"
-                  >
-                    {t('virtual.title')}
-                  </H>
-                  <div
-                    className={css({
-                      display: 'flex',
-                      gap: '1.25rem',
-                      flexWrap: 'wrap',
-                    })}
-                  >
-                    {[...Array(8).keys()].map((i) => {
-                      const imagePath = `/assets/backgrounds/${i + 1}.jpg`
-                      const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
-                      return (
-                        <ToggleButton
-                          key={i}
-                          variant="bigSquare"
-                          aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })}
-                          tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })}
-                          isDisabled={processorPendingReveal}
-                          onChange={async () =>
-                            await toggleEffect(ProcessorType.VIRTUAL, {
-                              imagePath,
-                            })
-                          }
-                          isSelected={isSelected(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })}
-                          className={css({
-                            bgSize: 'cover',
-                          })}
-                          style={{
-                            backgroundImage: `url(${thumbnailPath})`,
-                          }}
-                          data-attr={`toggle-virtual-${i}`}
-                        />
-                      )
-                    })}
-                  </div>
                 </div>
               </div>
             </div>
-          </>
+          </div>
         ) : (
           <Information>
             <Text variant="sm">{t('notAvailable')}</Text>
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
index 8622d7b5..1874074b 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
@@ -22,75 +22,73 @@ export function DesktopControlBar({
   const browserSupportsScreenSharing = supportsScreenSharing()
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
   return (
-    <>
+    <div
+      ref={desktopControlBarEl}
+      className={css({
+        width: '100vw',
+        display: 'flex',
+        position: 'absolute',
+        padding: '1.125rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+      })}
+    >
       <div
-        ref={desktopControlBarEl}
         className={css({
-          width: '100vw',
           display: 'flex',
-          position: 'absolute',
-          padding: '1.125rem',
-          bottom: 0,
-          left: 0,
-          right: 0,
+          justifyContent: 'flex-start',
+          flex: '1 1 33%',
+          alignItems: 'center',
+          gap: '0.5rem',
+          marginLeft: '0.5rem',
+        })}
+      />
+      <div
+        className={css({
+          flex: '1 1 33%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '0.65rem',
         })}
       >
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'flex-start',
-            flex: '1 1 33%',
-            alignItems: 'center',
-            gap: '0.5rem',
-            marginLeft: '0.5rem',
-          })}
+        <SelectToggleDevice
+          source={Track.Source.Microphone}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+          onActiveDeviceChange={(deviceId) =>
+            saveAudioInputDeviceId(deviceId ?? '')
+          }
+          menuVariant="dark"
         />
-        <div
-          className={css({
-            flex: '1 1 33%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            gap: '0.65rem',
-          })}
-        >
-          <SelectToggleDevice
-            source={Track.Source.Microphone}
-            onChange={microphoneOnChange}
+        <SelectToggleDevice
+          source={Track.Source.Camera}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+          onActiveDeviceChange={(deviceId) =>
+            saveVideoInputDeviceId(deviceId ?? '')
+          }
+          menuVariant="dark"
+        />
+        <ReactionsToggle />
+        {browserSupportsScreenSharing && (
+          <ScreenShareToggle
             onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Microphone, error })
+              onDeviceError?.({ source: Track.Source.ScreenShare, error })
             }
-            onActiveDeviceChange={(deviceId) =>
-              saveAudioInputDeviceId(deviceId ?? '')
-            }
-            menuVariant="dark"
           />
-          <SelectToggleDevice
-            source={Track.Source.Camera}
-            onChange={cameraOnChange}
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Camera, error })
-            }
-            onActiveDeviceChange={(deviceId) =>
-              saveVideoInputDeviceId(deviceId ?? '')
-            }
-            menuVariant="dark"
-          />
-          <ReactionsToggle />
-          {browserSupportsScreenSharing && (
-            <ScreenShareToggle
-              onDeviceError={(error) =>
-                onDeviceError?.({ source: Track.Source.ScreenShare, error })
-              }
-            />
-          )}
-          <HandToggle />
-          <OptionsButton />
-          <LeaveButton />
-          <StartMediaButton />
-        </div>
-        <MoreOptions parentElement={desktopControlBarEl} />
+        )}
+        <HandToggle />
+        <OptionsButton />
+        <LeaveButton />
+        <StartMediaButton />
       </div>
-    </>
+      <MoreOptions parentElement={desktopControlBarEl} />
+    </div>
   )
 }
diff --git a/src/frontend/src/primitives/Spinner.tsx b/src/frontend/src/primitives/Spinner.tsx
index cc1e8513..fb8b8344 100644
--- a/src/frontend/src/primitives/Spinner.tsx
+++ b/src/frontend/src/primitives/Spinner.tsx
@@ -15,44 +15,42 @@ export const Spinner = ({
   return (
     <ProgressBar aria-label="Loading…" value={30}>
       {({ percentage }) => (
-        <>
-          <svg
-            width={size}
-            height={size}
-            viewBox="0 0 28 28"
-            fill="none"
-            strokeWidth={strokeWidth}
-          >
-            <circle
-              cx={center}
-              cy={center}
-              r={r}
-              strokeDasharray={0}
-              strokeDashoffset={0}
-              strokeLinecap="round"
-              className={css({
-                stroke: variant == 'light' ? 'primary.100' : 'transparent',
-              })}
-              style={{}}
-            />
-            <circle
-              cx={center}
-              cy={center}
-              r={r}
-              strokeDasharray={`${c} ${c}`}
-              strokeDashoffset={percentage && c - (percentage / 100) * c}
-              strokeLinecap="round"
-              className={css({
-                stroke: variant == 'light' ? 'primary.800' : 'white',
-              })}
-              style={{
-                animation: `rotate 1s ease-in-out infinite`,
-                transformOrigin: 'center',
-                transition: 'transform 16ms linear',
-              }}
-            />
-          </svg>
-        </>
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 28 28"
+          fill="none"
+          strokeWidth={strokeWidth}
+        >
+          <circle
+            cx={center}
+            cy={center}
+            r={r}
+            strokeDasharray={0}
+            strokeDashoffset={0}
+            strokeLinecap="round"
+            className={css({
+              stroke: variant == 'light' ? 'primary.100' : 'transparent',
+            })}
+            style={{}}
+          />
+          <circle
+            cx={center}
+            cy={center}
+            r={r}
+            strokeDasharray={`${c} ${c}`}
+            strokeDashoffset={percentage && c - (percentage / 100) * c}
+            strokeLinecap="round"
+            className={css({
+              stroke: variant == 'light' ? 'primary.800' : 'white',
+            })}
+            style={{
+              animation: `rotate 1s ease-in-out infinite`,
+              transformOrigin: 'center',
+              transition: 'transform 16ms linear',
+            }}
+          />
+        </svg>
       )}
     </ProgressBar>
   )