✨(frontend) add room access configuration options

Implement interface allowing room creators to configure access settings,
with options to set rooms as either public or restricted. Provides users
with control over who can join their rooms.

src/frontend/src/features/rooms/api/patchRoom.tsx

@@ -0,0 +1,25 @@
+import { type ApiRoom } from './ApiRoom'
+import { fetchApi } from '@/api/fetchApi'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ApiError } from '@/api/ApiError'
+
+export type PatchRoomParams = {
+  roomId: string
+  room: Pick<ApiRoom, 'configuration' | 'access_level'>
+}
+
+export const patchRoom = ({ roomId, room }: PatchRoomParams) => {
+  return fetchApi<ApiRoom>(`/rooms/${roomId}/`, {
+    method: 'PATCH',
+    body: JSON.stringify(room),
+  })
+}
+
+export function usePatchRoom(
+  options?: UseMutationOptions<ApiRoom, ApiError, PatchRoomParams>
+) {
+  return useMutation<ApiRoom, ApiError, PatchRoomParams>({
+    mutationFn: patchRoom,
+    onSuccess: options?.onSuccess,
+  })
+}

src/frontend/src/features/rooms/livekit/components/Admin.tsx

@@ -1,11 +1,33 @@
-import { Div, H, Text } from '@/primitives'
+import { Div, Field, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Separator as RACSeparator } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
+import { usePatchRoom } from '@/features/rooms/api/patchRoom'
+import { fetchRoom } from '@/features/rooms/api/fetchRoom'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { queryClient } from '@/api/queryClient'
+import { keys } from '@/api/queryKeys'
+import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'wouter'
 
 export const Admin = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
 
+  const { roomId } = useParams()
+
+  if (!roomId) {
+    throw new Error()
+  }
+
+  const { mutateAsync: patchRoom } = usePatchRoom()
+
+  const { data: readOnlyData } = useQuery({
+    queryKey: [keys.room, roomId],
+    queryFn: () => fetchRoom({ roomId }),
+    retry: false,
+    enabled: false,
+  })
+
   return (
     <Div
       display="flex"
@@ -44,13 +66,37 @@ export const Admin = () => {
       >
         {t('access.description')}
       </Text>
-      <div
-        className={css({
-          marginTop: '1rem',
-        })}
-      >
-        [WIP]
-      </div>
+      <Field
+        type="radioGroup"
+        label="Type d'accès à la réunion"
+        aria-label="Type d'accès à la réunion"
+        labelProps={{
+          className: css({
+            fontSize: '1rem',
+            paddingBottom: '1rem',
+          }),
+        }}
+        value={readOnlyData?.access_level}
+        onChange={(value) =>
+          patchRoom({ roomId, room: { access_level: value as ApiAccessLevel } })
+            .then((room) => {
+              queryClient.setQueryData([keys.room, roomId], room)
+            })
+            .catch((e) => console.error(e))
+        }
+        items={[
+          {
+            value: ApiAccessLevel.PUBLIC,
+            label: t('access.levels.public.label'),
+            description: t('access.levels.public.description'),
+          },
+          {
+            value: ApiAccessLevel.RESTRICTED,
+            label: t('access.levels.restricted.label'),
+            description: t('access.levels.restricted.description'),
+          },
+        ]}
+      />
     </Div>
   )
 }

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

@@ -177,7 +177,17 @@
     "description": "",
     "access": {
       "title": "",
-      "description": ""
+      "description": "",
+      "levels": {
+        "public": {
+          "label": "",
+          "description": ""
+        },
+        "restricted": {
+          "label": "",
+          "description": ""
+        }
+      }
     }
   },
   "rating": {

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

@@ -176,7 +176,17 @@
     "description": "These organizer settings allow you to maintain control of your meeting. Only organizers can access these controls.",
     "access": {
       "title": "Room access",
-      "description": "These settings will also apply to future occurrences of this meeting."
+      "description": "These settings will also apply to future occurrences of this meeting.",
+      "levels": {
+        "public": {
+          "label": "Open",
+          "description": "No one needs to request to join the meeting."
+        },
+        "restricted": {
+          "label": "Restricted",
+          "description": "People who have not been invited to the meeting must request to join."
+        }
+      }
     }
   },
   "rating": {

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

@@ -176,7 +176,17 @@
     "description": "Ces paramètres organisateur vous permettent de garder le contrôle de votre réunion. Seuls les organisateurs peuvent accéder à ces commandes.",
     "access": {
       "title": "Accès à la réunion",
-      "description": "Ces paramètres s'appliqueront également aux futures occurences de cette réunion."
+      "description": "Ces paramètres s'appliqueront également aux futures occurences de cette réunion.",
+      "levels": {
+        "public": {
+          "label": "Ouvrir",
+          "description": "Persone n'a à demander à rejoindre la réunion."
+        },
+        "restricted": {
+          "label": "Restreindre",
+          "description": "Les personnes qui n'ont pas été invitées à la réunion doivent demander à la rejoindre."
+        }
+      }
     }
   },
   "rating": {