create Alert.tsx and Alert.web.tsx and replace uses (#513)

src/lib/hooks/usePermissions.ts

@@ -1,8 +1,8 @@
-import {Alert} from 'react-native'
 import {Camera} from 'expo-camera'
 import * as MediaLibrary from 'expo-media-library'
 import {Linking} from 'react-native'
 import {isWeb} from 'platform/detection'
+import {Alert} from 'view/com/util/Alert'
 
 const openSettings = () => {
   Linking.openURL('app-settings:')

src/view/com/util/Alert.tsx

@@ -0,0 +1 @@
+export {Alert} from 'react-native'

src/view/com/util/Alert.web.tsx

@@ -0,0 +1,23 @@
+import {AlertButton, AlertStatic} from 'react-native'
+
+class WebAlert implements Pick<AlertStatic, 'alert'> {
+  public alert(title: string, message?: string, buttons?: AlertButton[]): void {
+    if (buttons === undefined || buttons.length === 0) {
+      window.alert([title, message].filter(Boolean).join('\n'))
+      return
+    }
+
+    const result = window.confirm([title, message].filter(Boolean).join('\n'))
+
+    if (result === true) {
+      const confirm = buttons.find(({style}) => style !== 'cancel')
+      confirm?.onPress?.()
+      return
+    }
+
+    const cancel = buttons.find(({style}) => style === 'cancel')
+    cancel?.onPress?.()
+  }
+}
+
+export const Alert = new WebAlert()

src/view/screens/AppPasswords.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Alert, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {Alert} from 'view/com/util/Alert'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ScrollView} from 'react-native-gesture-handler'
 import {Text} from '../com/util/text/Text'
@@ -159,31 +160,24 @@ function AppPassword({
   const store = useStores()
 
   const onDelete = React.useCallback(async () => {
-    if (isDesktopWeb) {
+    Alert.alert(
-      if (confirm('Delete app password?')) {
+      'Delete App Password',
-        await store.me.deleteAppPassword(name)
+      `Are you sure you want to delete the app password "${name}"?`,
-        Toast.show('App password deleted')
+      [
-      }
+        {
-    } else {
+          text: 'Cancel',
-      Alert.alert(
+          style: 'cancel',
-        'Delete App Password',
+        },
-        `Are you sure you want to delete the app password "${name}"?`,
+        {
-        [
+          text: 'Delete',
-          {
+          style: 'destructive',
-            text: 'Cancel',
+          onPress: async () => {
-            style: 'cancel',
+            await store.me.deleteAppPassword(name)
+            Toast.show('App password deleted')
           },
-          {
+        },
-            text: 'Delete',
+      ],
-            style: 'destructive',
+    )
-            onPress: async () => {
-              await store.me.deleteAppPassword(name)
-              Toast.show('App password deleted')
-            },
-          },
-        ],
-      )
-    }
   }, [store, name])
 
   return (