⚡️(frontend) handle actions on userChoices store directly in the module

The Valtio actions on the store were initially defined inside a hook,
which was a bad idea: it does not follow Valtio's recommendation of
defining actions at the module level, and the function definitions
were re-created every time the hook re-rendered, which happened on
every state update.

These action has nothing related to React.

Additionally, the snapshot should be used more directly so Valtio can
understand and optimize which parts of the proxy are of interest to
the snapshot being made.

src/frontend/src/features/rooms/components/Join.tsx

@@ -22,7 +22,6 @@ import {
 } from '../livekit/components/effects/EffectsConfiguration'
 import { SelectDevice } from '../livekit/components/controls/Device/SelectDevice'
 import { ToggleDevice } from '../livekit/components/controls/Device/ToggleDevice'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { isMobileBrowser } from '@livekit/components-core'
 import { fetchRoom } from '@/features/rooms/api/fetchRoom'
@@ -37,8 +36,20 @@ import { useLoginHint } from '@/hooks/useLoginHint'
 import { openPermissionsDialog } from '@/stores/permissions'
 import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
 import { isSafari } from '@/utils/livekit'
-import type { LocalUserChoices } from '@/stores/userChoices'
+
+import {
+  type LocalUserChoices,
+  saveAudioInputDeviceId,
+  saveAudioInputEnabled,
+  saveAudioOutputDeviceId,
+  saveUsername,
+  saveVideoInputDeviceId,
+  saveVideoInputEnabled,
+  userChoicesStore,
+} from '@/stores/userChoices'
+
 import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
+import { useSnapshot } from 'valtio'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -104,22 +115,14 @@ export const Join = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
   const {
-    userChoices: {
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      audioOutputDeviceId,
-      videoDeviceId,
-      processorConfig,
-      username,
-    },
-    saveAudioInputEnabled,
-    saveAudioOutputDeviceId,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-  } = usePersistentUserChoices()
+    audioEnabled,
+    videoEnabled,
+    audioDeviceId,
+    audioOutputDeviceId,
+    videoDeviceId,
+    processorConfig,
+    username,
+  } = useSnapshot(userChoicesStore)
 
   const initialUserChoices = useRef<LocalUserChoices | null>(null)