🚑️(frontend) fix mobile permission deadlock with disabled tracks

Resolve issue where users with disabled track preferences in local
storage wouldn't receive permission prompts in subsequent sessions,
causing app deadlock. Toggle tracks when permissions are disabled to
re-trigger permission requests.

This is a hotfix addressing critical user feedback. Permission handling
requires further testing and improvements based on gathered user
reports since release.

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

@@ -638,7 +638,7 @@ export const Join = ({
                       <Button
                         size="sm"
                         variant="tertiary"
-                        onPress={openPermissionsDialog}
+                        onPress={() => openPermissionsDialog()}
                       >
                         {t(`permissionsButton.${permissionsButtonLabel}`)}
                       </Button>

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

@@ -37,6 +37,22 @@ export const Permissions = () => {
     injectIconIntoTranslation(t('body.openMenu.others'))
 
   useEffect(() => {
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isMicrophoneGranted &&
+      permissions.requestOrigin == 'audioinput'
+    ) {
+      closePermissionsDialog()
+    }
+
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isCameraGranted &&
+      permissions.requestOrigin == 'videoinput'
+    ) {
+      closePermissionsDialog()
+    }
+
     if (
       permissions.isPermissionDialogOpen &&
       permissions.isCameraGranted &&

src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx

@@ -19,7 +19,7 @@ export const PermissionNeededButton = () => {
       <Button
         aria-label={t('ariaLabel')}
         tooltip={t('tooltip')}
-        onPress={openPermissionsDialog}
+        onPress={() => openPermissionsDialog()}
         variant="permission"
       >
         <div

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -107,9 +107,7 @@ export const ToggleDevice = <T extends ToggleSource>({
   }, [enabled, kind, deviceShortcut, t])
 
   const Icon =
-    isDisabled || cannotUseDevice || !enabled
-      ? deviceIcons.toggleOff
-      : deviceIcons.toggleOn
+    isDisabled || !enabled ? deviceIcons.toggleOff : deviceIcons.toggleOn
 
   const roomContext = useMaybeRoomContext()
   if (kind === 'audioinput' && pushToTalk && roomContext) {
@@ -126,7 +124,12 @@ export const ToggleDevice = <T extends ToggleSource>({
           isDisabled || cannotUseDevice || !enabled ? errorVariant : variant
         }
         shySelected
-        onPress={() => (cannotUseDevice ? openPermissionsDialog() : toggle())}
+        onPress={() => {
+          if (cannotUseDevice) {
+            openPermissionsDialog(kind)
+          }
+          toggle()
+        }}
         aria-label={toggleLabel}
         tooltip={
           cannotUseDevice

src/frontend/src/stores/permissions.ts

@@ -13,6 +13,7 @@ type BaseState = {
   microphonePermission: PermissionState
   isLoading: boolean
   isPermissionDialogOpen: boolean
+  requestOrigin?: 'audioinput' | 'videoinput'
 }
 
 type DerivedState = {
@@ -31,6 +32,7 @@ export const permissionsStore = proxy<BaseState>({
   microphonePermission: undefined,
   isLoading: true,
   isPermissionDialogOpen: false,
+  requestOrigin: undefined,
 }) as State
 
 derive(
@@ -52,8 +54,11 @@ derive(
   }
 )
 
-export const openPermissionsDialog = () => {
+export const openPermissionsDialog = (
+  requestOrigin?: 'audioinput' | 'videoinput'
+) => {
   permissionsStore.isPermissionDialogOpen = true
+  permissionsStore.requestOrigin = requestOrigin
 }
 
 export const closePermissionsDialog = () => {