✨(frontend) create a control button for participants list

Introduced a button to manage the visibility of the participants list.

Encountered refresh issues with the room context where the participant count
in the room metadata does not update in real-time, causing discrepancies
between the actual number of participants and the displayed count. To address
this, I utilized the participants hook, which updates more frequently and
ensures consistency.

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useParticipants } from '@livekit/components-react'
+import { useState } from 'react'
+
+export const ParticipantsToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  /**
+   * Context could not be used due to inconsistent refresh behavior.
+   * The 'numParticipant' property on the room only updates when the room's metadata changes,
+   * resulting in a delay compared to the participant list's actual refresh rate.
+   */
+  const participants = useParticipants()
+  const numParticipants = participants?.length
+
+  const [isOpen, setIsOpen] = useState(false)
+  const tooltipLabel = isOpen ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        onPress={() => setIsOpen(!isOpen)}
+      >
+        <RiGroupLine />
+      </Button>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-.25rem',
+          right: '-.25rem',
+          width: '1.25rem',
+          height: '1.25rem',
+          backgroundColor: 'gray',
+          borderRadius: '50%',
+          color: 'white',
+          fontSize: '0.75rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 1,
+          userSelect: 'none',
+        })}
+      >
+        {numParticipants < 100 ? (
+          numParticipants || 1
+        ) : (
+          <RiInfinityLine size={10} />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -29,7 +29,11 @@
     "shareScreen": "",
     "stopScreenShare": "",
     "chat": "",
-    "leave": ""
+    "leave": "",
+    "participants": {
+      "open": "",
+      "closed": ""
+    }
   },
   "options": {
     "buttonLabel": "",

src/frontend/src/locales/en/rooms.json

@@ -29,7 +29,11 @@
     "shareScreen": "Share screen",
     "stopScreenShare": "Stop screen share",
     "chat": "Chat",
-    "leave": "Leave"
+    "leave": "Leave",
+    "participants": {
+      "open": "Hide everyone",
+      "closed": "See everyone"
+    }
   },
   "options": {
     "buttonLabel": "More Options",

src/frontend/src/locales/fr/rooms.json

@@ -29,7 +29,11 @@
     "shareScreen": "Partager l'écran",
     "stopScreenShare": "Arrêter le partage",
     "chat": "Chat",
-    "leave": "Quitter"
+    "leave": "Quitter",
+    "participants": {
+      "open": "Masquer les participants",
+      "closed": "Afficher les participants"
+    }
   },
   "options": {
     "buttonLabel": "Plus d'options",