🏷️(frontend) make toast props readonly for enhanced type safety

Refactor toast component props to use readonly TypeScript modifiers,
preventing accidental mutations and strengthening type safety.

src/frontend/src/features/notifications/components/Toast.tsx

@@ -38,7 +38,7 @@ export interface ToastProps {
   state: ToastState<ToastData>
 }
 
-export function Toast({ state, ...props }: ToastProps) {
+export function Toast({ state, ...props }: Readonly<ToastProps>) {
   const ref = useRef(null)
   const { toastProps, contentProps, closeButtonProps } = useToast(
     props,

src/frontend/src/features/notifications/components/ToastAnyRecording.tsx

@@ -6,7 +6,7 @@ import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { NotificationType } from '../NotificationType'
 
-export function ToastAnyRecording({ state, ...props }: ToastProps) {
+export function ToastAnyRecording({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

src/frontend/src/features/notifications/components/ToastJoined.tsx

@@ -19,7 +19,7 @@ const ClickableToast = styled(RACButton, {
   },
 })
 
-export function ToastJoined({ state, ...props }: ToastProps) {
+export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(

src/frontend/src/features/notifications/components/ToastLowerHand.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 
-export function ToastLowerHand({ state, ...props }: ToastProps) {
+export function ToastLowerHand({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

src/frontend/src/features/notifications/components/ToastMessageReceived.tsx

@@ -9,7 +9,10 @@ import { Button as RACButton } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMessageReceived({ state, ...props }: ToastProps) {
+export function ToastMessageReceived({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps } = useToast(props, state, ref)

src/frontend/src/features/notifications/components/ToastMuted.tsx

@@ -5,7 +5,7 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMuted({ state, ...props }: ToastProps) {
+export function ToastMuted({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

src/frontend/src/features/notifications/components/ToastPermissionsRemoved.tsx

@@ -5,7 +5,10 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 
-export function ToastPermissionsRemoved({ state, ...props }: ToastProps) {
+export function ToastPermissionsRemoved({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', {
     keyPrefix: 'permissionsRemoved',
   })

src/frontend/src/features/notifications/components/ToastRaised.tsx

@@ -9,7 +9,7 @@ import { RiCloseLine, RiHand } from '@remixicon/react'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 
-export function ToastRaised({ state, ...props }: ToastProps) {
+export function ToastRaised({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(

src/frontend/src/features/notifications/components/ToastRecordingSaving.tsx

@@ -9,7 +9,10 @@ import { useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { RecordingMode } from '@/features/recording'
 
-export function ToastRecordingSaving({ state, ...props }: ToastProps) {
+export function ToastRecordingSaving({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'recordingSave' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)