♻️(frontend) extract permission checks into reusable hook by media kind

Create hook to encapsulate permission denied/prompted/loading checks
based on media kind, eliminating props drilling and simplifying code.

Returns appropriate permission state for consuming components based on
media type, cleaning up code structure with small enhancement.

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

@@ -33,12 +33,12 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { useSnapshot } from 'valtio'
-import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { openPermissionsDialog } from '@/stores/permissions'
 import { ToggleDevice } from './join/ToggleDevice'
 import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
 import { isSafari } from '@/utils/livekit'
 import type { LocalUserChoices } from '@/stores/userChoices'
+import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -350,13 +350,8 @@ export const Join = ({
     enterRoom()
   }
 
-  const permissions = useSnapshot(permissionsStore)
-
-  const isCameraDeniedOrPrompted =
-    permissions.isCameraDenied || permissions.isCameraPrompted
-
-  const isMicrophoneDeniedOrPrompted =
-    permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
+  const isCameraDeniedOrPrompted = useCannotUseDevice('videoinput')
+  const isMicrophoneDeniedOrPrompted = useCannotUseDevice('audioinput')
 
   const hintMessage = useMemo(() => {
     if (isCameraDeniedOrPrompted) {

src/frontend/src/features/rooms/components/join/ToggleDevice.tsx

@@ -6,9 +6,7 @@ import {
 } from '../../livekit/config/ToggleDeviceConfig'
 import { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useCallback, useMemo, useState } from 'react'
-import { useSnapshot } from 'valtio'
-import { permissionsStore } from '@/stores/permissions'
+import { useCallback, useState } from 'react'
 
 type ToggleDeviceProps<T extends ToggleSource> = UseTrackToggleProps<T> & {
   track?: LocalAudioTrack | LocalVideoTrack
@@ -31,17 +29,6 @@ export const ToggleDevice = <T extends ToggleSource>({
     props.initialState ?? false
   )
 
-  const permissions = useSnapshot(permissionsStore)
-
-  const isPermissionDeniedOrPrompted = useMemo(() => {
-    if (config.kind == 'audioinput') {
-      return permissions.isMicrophoneDenied || permissions.isMicrophonePrompted
-    }
-    if (config.kind == 'videoinput') {
-      return permissions.isCameraDenied || permissions.isCameraPrompted
-    }
-  }, [config, permissions])
-
   const toggle = useCallback(async () => {
     try {
       if (isTrackEnabled) {
@@ -61,7 +48,6 @@ export const ToggleDevice = <T extends ToggleSource>({
   return (
     <BaseToggleDevice
       enabled={isTrackEnabled}
-      isPermissionDeniedOrPrompted={isPermissionDeniedOrPrompted}
       toggle={toggle}
       config={config}
       variant="whiteCircle"