✨(frontend) persist local participant name on updates

Utilized local storage to persist the updated name. After careful
consideration, persisting all user choices in the backend was deemed overly
complex and unnecessary for the value it would provide.

Opted for a single responsibility approach by leveraging local storage to manage
user choices, aligning with LiveKit's default implementation.

src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx

@@ -1,18 +1,24 @@
 import { useTranslation } from 'react-i18next'
 import { Field, Form, Dialog, DialogProps } from '@/primitives'
-import { useRoomContext } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
 
 export type UsernameDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
 export const UsernameDialog = (props: UsernameDialogProps) => {
   const { t } = useTranslation('rooms')
+  const { saveUsername } = usePersistentUserChoices()
 
   const ctx = useRoomContext()
   return (
     <Dialog title={t('options.username.heading')} {...props}>
       <Form
         onSubmit={(data) => {
-          ctx.localParticipant.setName(data.username as string)
+          const { username } = data as { username: string }
+          ctx.localParticipant.setName(username)
+          saveUsername(username)
           const { onOpenChange } = props
           if (onOpenChange) {
             onOpenChange(false)