Fixes profile edit image selection not prompting users on web (#309) (#321)

* Fixes profile edit image selection not prompting users on web (#309)

* Fixes linting erros

src/lib/hooks/usePermissions.ts

@@ -2,6 +2,7 @@ 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'
 
 const openSettings = () => {
   Linking.openURL('app-settings:')
@@ -24,6 +25,12 @@ const openPermissionAlert = (perm: string) => {
 export function usePhotoLibraryPermission() {
   const [mediaLibraryPermissions] = MediaLibrary.usePermissions()
   const requestPhotoAccessIfNeeded = async () => {
+    // On the, we use <input type="file"> to produce a filepicker
+    // This does not need any permission granting.
+    if (isWeb) {
+      return true
+    }
+
     if (mediaLibraryPermissions?.status === 'granted') {
       return true
     } else {

src/lib/media/picker.web.tsx

@@ -111,6 +111,18 @@ export async function cropAndCompressFlow(
 // helpers
 // =
 
+/**
+ * Opens the select file dialog in the browser.
+ * NOTE:
+ * If in the future someone updates this method to use:
+ * https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ * Check that the `showOpenFilePicker` API does not require any permissions
+ * granted to use. As of this writing, it does not, but that could change
+ * in the future. If the user does need to go through a permissions granting
+ * flow, then checkout the usePhotoLibraryPermission() hook in
+ *   src/lib/hooks/usePermissions.ts
+ * so that it gets appropriately updated.
+ */
 function selectFile(opts: PickerOpts): Promise<PickedFile> {
   return new Promise((resolve, reject) => {
     var input = document.createElement('input')

src/view/shell/index.web.tsx

@@ -7,9 +7,7 @@ import {DesktopRightNav} from './desktop/RightNav'
 import {ErrorBoundary} from '../com/util/ErrorBoundary'
 import {Lightbox} from '../com/lightbox/Lightbox'
 import {ModalsContainer} from '../com/modals/Modal'
-import {Text} from 'view/com/util/text/Text'
 import {Composer} from './Composer.web'
-import {usePalette} from 'lib/hooks/usePalette'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {s, colors} from 'lib/styles'
 import {RoutesContainer, FlatNavigator} from '../../Navigation'